关于如何制作全屏页面，在过去我们录制了很多相关的视频教程。教程的主要内容，围绕着使用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为宜。 　　接下来上传图片，复制图片地址到自由布局工具中。这里要注意的是，通常我们将大图片作为背景图导入到软件里，而不是添加图片组件。虽然两种方式生成的代码，效果是相同的，但是使用背景图的方式，后面添加其他组件更为方便。 　　然后添加组件，我们添加的组件尽可能的少，组件类型尽可能的少，那么后续修改和维护也相当简单。假如出错了，排查原因也很快。 　　最后，我们生成代码安装到店铺。注意，每个模块的代码要单独放在一个自定义模块里。淘宝的后台每个页面最多允许添加４０个自定义内容区。有的同学只添加一个自定义内容区，将所有的代码都放在这个自定义区里。仔细想一想，如果需要修改某个内容，会不会很麻烦？因此，我们要把模块分散安装，分散管理，这样即科学又方便。