關于如何制作全屏頁面，在過去我們錄制了很多相關的視頻教程。教程的主要內容，圍繞著使用photoshop切片和dreamweaver修改代碼，以及結合全屏代碼生成器突破系統模塊寬度，實現全屏頁面的方法來講解的。本節內容，我們來講解一種效率更高的方法，姑且稱之為“10分鐘制作全屏頁面”教程。 　　切片后在DW加熱區，對于很多的美工來說，已經很熟悉了。當然也有更多的剛接觸網頁裝修的人來說，甚至還不熟練。那么看完這節課，從此你的美工生涯再不需要用DW加熱區了。因為DW加熱區這種繁瑣、陳舊的方法，我個人認為早已經過時了。在淘寶網店裝修的過程中，只有極少數特殊情況下，需要用DW來操作。 　　切片的目的是什么？還不是為了分割圖片提高頁面加載的速度，用ＤＷ給圖片加鏈接？ 　　現在光纖的普及，使網速較以往有了極大的提高。對于網頁美工來說，設計頁面作圖時，已經不太需要衡量圖片的尺寸對頁面加載速度的影響了。以我個人的經驗，制作全屏圖片，只要圖片高度不超過８００ｐｘ，頁面的加載還是很流暢的。 　　過去，我們使用ＤＷ來給網頁圖片加鏈接。自從有了淘寶美工助理，可以毫不客氣的說，電腦上的ＤＷ可以放心卸載了。因為美工助理有制作一圖多連接的功能。只需要用ｐｓ做好圖片，上傳到圖片空間。把圖片地址粘貼到美工助理的熱區工具里，用鼠標拖放幾個熱區，就可以生成全屏代碼安裝到店鋪了。整個過程只需要幾分鐘，就可以輕松搞定。而制作同樣的效果，使用ＤＷ可能需要數十分鐘甚至更長時間，更何況ＤＷ生成的代碼，還不能突破店鋪全屏的限制。此外還有的新手用ＤＷ制作的熱區，會出現鏈接沖突／失效的問題。 　　下面我們以ｖｉｖｏ官方旗艦店的首頁作為例子，來講解如何更快速更準確的制作全屏首頁； | 在線播放 | [點我播放](http://cloud.video.taobao.com/play/u/1692908480/p/1/e/1/t/1/50000646153.swf) | | --- | --- | | 下載播放 | [點我下載](http://yunpan.taobao.com/s/196vG6avuhP) (1920x1080P) | | 相關教程 |[全屏裝修教程]01 文件預處理 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25322646.swf) | | 相關教程 |[全屏裝修教程]02 切片和加鏈接 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25322659.swf) | | 相關教程 |[全屏裝修教程]03 切片批量換圖 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25322679.swf) | | 相關教程 |[全屏裝修教程]04 多屏固定背景 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25324769.swf) | | 相關教程 |[全屏裝修教程]05 補充教程 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25324776.swf) | | 相關教程 |[全屏裝修教程]05 補充教程 [點我播放](http://cloud.video.taobao.com//play/u/1692908480/p/1/e/1/t/1/25324776.swf) | | 相關教程 |帶固定背景的熱區(蘇醒的樂園旗艦店) [點我播放](http://cloud.video.taobao.com/play/u/1692908480/p/1/e/1/t/1/45836151.swf) | | 相關教程 |帶熱區的視頻模塊(韓都衣舍旗艦店) [點我播放](http://cloud.video.taobao.com/play/u/1692908480/p/1/e/1/t/1/45846383.swf) | 　　整個制作過程中，需要注意的幾點事項： * 可以使用淘寶美工助理里面的熱區工具，或者自由布局工具來制作全屏頁面，兩個工具都有制作一圖多鏈接的功能；自由布局工具能添加的特效組件更多； * 切片時，建議每個圖片的高度不要超過８００ｐｘ，太大的圖片可能會影響加載速度； * 添加熱區工具后，如果一張圖片上有多個鏈接，可以一鍵批量替換鏈接； * 店招／導航／頁尾區域，是不支持全屏代碼的； * 使用自由布局工具設計完模塊后，可以導出當前布局文件到本地電腦或者云端，便于下次使用和修改； * 適用平臺：淘寶旺鋪基礎版、專業版、智能版、旺鋪天貓版； ### 全屏頁面的設計原則 >[success]　　在頁面設計中，我們遵循最小化、最少化原則。 >[success]　　什么是最小化？就是圖片尺寸盡可能的小。有的同學設計一個模塊，高度動輒幾千像素，模塊上的組件亂七八糟的，什么元素都有。這是很不科學的。 　　首先，圖片的高度超出1000px，圖片的體積肯定很大。當模塊安裝到店鋪后，用戶打開頁面的時候，體積大的圖片加載慢，會影響用戶體驗。 　　其次，模塊上的組件太多，在軟件里操作的時候也不那么簡單，需要考慮多個組件的層次和位置，有的組件甚至會重疊和遮擋，帶來了操作上的不便。 　　再則，組件太多，圖片體積過大，安裝到店鋪以后，如果下次需要改動其中的某個細節或組件，就需要重新導入修改，牽扯到的內容過于復雜。這對后續的維護是非常不方便的。 　　最后，組件太多，相互之間的協調性把控不好，就容易造成顯示上出現問題。而這種問題的原因，由于牽扯到的設置太多，往往很難排查。會白白浪費更多的時間。 >[success]　　什么是最少化？就是模塊上的組件，要盡可能的少，組件類型盡可能的少。比方說，模塊上添加了熱區，又添加了圖片，那么在遵循最少化的原則上，就盡量避免添加其他類型的組件。這樣一來，維護方便，也會減少出錯的機會。 　　如果一個模塊上，添加了３種以上類型的組件，組件的數量多達十幾個，如果出錯了，查找原因是相當耗時的。 >[success]　　有了上面的理論基礎，那么我們總結一下，在photoshop里設計頁面圖片后，需要對圖片進行切片。切片的時候，盡可能把每個圖片切的小一些，圖片的高度不超過800px為宜。 　　接下來上傳圖片，復制圖片地址到自由布局工具中。這里要注意的是，通常我們將大圖片作為背景圖導入到軟件里，而不是添加圖片組件。雖然兩種方式生成的代碼，效果是相同的，但是使用背景圖的方式，后面添加其他組件更為方便。 　　然后添加組件，我們添加的組件盡可能的少，組件類型盡可能的少，那么后續修改和維護也相當簡單。假如出錯了，排查原因也很快。 　　最后，我們生成代碼安裝到店鋪。注意，每個模塊的代碼要單獨放在一個自定義模塊里。淘寶的后臺每個頁面最多允許添加４０個自定義內容區。有的同學只添加一個自定義內容區，將所有的代碼都放在這個自定義區里。仔細想一想，如果需要修改某個內容，會不會很麻煩？因此，我們要把模塊分散安裝，分散管理，這樣即科學又方便。