❶ 關於前端代碼的合並和壓縮，我該怎麼處理
除了讓二次開發者直接修改你標准產品的代碼，還有另外一種思路：
提高自己代碼的擴展性（會有一些難度），讓二次開發者通過相關的擴展API來實現個性化需求。
這樣他不需要修改你的代碼，所以他開發的代碼不壓縮、你的標准代碼壓縮這兩個就不矛盾了。
想像一下你使用壓縮版的angularjs時，自己開發的代碼一定是壓縮的么？場景是類似的
❷ PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
❸ 界面圖怎麼跟代碼合拼一個APP軟體的呢
這個問題應該是問如何將前端UI布局樣式和後端數據結合起來生成一個完整的APP軟體。
製作一款的APP軟體簡易的流程如下：
1、首先結合需求設計出原型圖
可以用PS、AI、Sketch等工具畫出完整的APP原型圖，畫出每一個頁面
2、利用各類APP前端語言，編寫對應的APP界面
如可以使用vue、react編寫webapp，非原生方式UI app，也可以用Java或ObjectC編寫安卓或蘋果APP UI
3、APP顯示數據會由後端編程語言編寫成介面API提供
4、結合編好的前端UI APP聯調API數據介面讓數據顯示在前端APP
那麼這樣的一個流程後就形成了一個APP軟體
❹ XD 怎麼配合前端切圖
切圖本應該是前端工程師的工作吧，設計師切的圖往往不專業，他們不知道把圖片壓縮，不知道把圖片合並，更不知道給圖片更好命名，這樣前端拿到切圖還是要重新處理。優秀的設計師會把圖層分類做的很好，圖層按照模塊化設計，很方便前端工程師來使用的。不會切圖的前端不是合格的前端。圖層亂七八糟的設計師也不是個合格的設計師
❺ 前端圖片處理
我的理解應該是生成圖片的時候，在不影響圖片質量的情況下，盡量用體積小的格式，比如在不透明的情況下盡量把圖片保存成png格式。
在css中有一種技術叫做圖片精靈，就是把一些背景圖做成集合的形式。圖片只需載入一次。
最後網上好像是有插件（瀏覽器也有插件）可以對圖片進行壓縮處理。
❻ 前端如果有成千上萬的頁面該如何處理
一、圖片處理
1. 圖片：大小的控制與使用
以淘寶為例，你搜索的所有產品的列表頁面，每個產品都有一個概略圖（小圖），
點開一個產品的頁面可以看到產品展示圖（中圖），點擊圖片後可以看到原始圖（大圖），如果上面提到的三個頁面都用用戶上傳的原始圖，僅用控制顯示大小，頁面性能如何，可想而知，用PC機還好，如果用戶用移動設備加3G網路訪問，5分鍾也打不頁面，就是打開了，流量也用完了。
所以我們說為你的網站針對不同的情況不同的頁面，採用不同的圖像文件，當然屏幕解析度也要考慮進去，如果有人用iphone打開和ipad打開，就不需要顯示像PC機上那麼大的圖片了，只要適應設備就可以了，那你可能要問怎麼做。
通過CSS Media Querises,可以輕松做到，你可以訪問http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 壓縮
傳送圖像的時候單單控制適當的尺寸往往是不夠的。不少文件格式在不失真的前提下可以被壓縮很多。有一類應用程序可以達到這個效果。比如Photoshop有個很好的功能叫做Save for Web and Devices，還有我個人覺得多用PNG是個可以考慮的方案
3. Sprite
增加應用程序性能的方法之一，是減少到伺服器的請求數。每一個新圖像代表一個請求數。有一個辦法是將幾個圖片合並成一個，合並之後的圖像叫做一個sprite，這個功能在淘寶你也會發現，在CSS中改變背景層的位置，就能准確的把特定部分的圖像顯示出來。比如Twitter Bootstrap利用sprites來製作內部圖標，訪問http://getbootstrap.com/2.3.2/ 你會了解更多
在CSS中，你可以參照以下方式，顯示你喜歡的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速緩存
瀏覽器超高速緩存十分好用。盡管有時在開發過程中會導致一些非常有趣的情況，但它確實有助於提高你的網站的性能。所有瀏覽器的超高速緩存下來的內容包括圖片、JavaScript或者CSS。有幾種方法可以控制緩存，建議你閱讀相關文章。
5. 預讀取
HTML 5有一個很好的功能叫做預讀取，它讓瀏覽器提前下載你馬上需要用到的資源：
<link rel="prefetch" href="/images/background.jpg">
6. 數據URI方案/內聯圖像
幾年前我曾開發了一個簡單的網頁，只包含一個HTML文件夾，但當然裡面應該還包括一些我需要的圖像。數據URI方案幫助我解決了問題。我們的想法是將圖像轉換成一個base64編碼的字元串，並將其放置在src屬性中的img標簽里，例如：
Html代碼
<img src="data:image/png;base64,//8/==" alt="Red dot">
通過這種方法，你的圖像實際上在HTML中並保存了一個HTTP請求。你的圖像越大的話，字元串就越長。
❼ web前端什麼是雪碧圖
雪碧圖被運用在眾多使用了很多小圖標的網站上。
相對於把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內存和帶寬更好。
❽ 織夢CMS如何合並logo和banner
親:你是遇到有logo,而且有banner在同一個網頁開頭這樣的情況了,一般這樣的情況有二種,一是以Logo為網頁前端部分,然後下面是橫幅了,可以以圖片格式的banner也可以動畫樣式的?針對這樣的情況,首先把Logo加進去,然後再設置banner就可以形成一個完整的畫面了,如果是Logo和banner在代碼里調用的,可以在代碼里卻除動態或你不希望展現的就可以了,然後再把調用的圖片從ftp里刪除,這樣就得到你希望的效果了.