店铺装修培训课件.pptxVIP

店铺个性化装修零起步;;培训前须知;;一、店铺装修的必备工具; 1、DreamWeaver 简称DW,主要用于编写代码和实现网页排版，支持实时的视图模式和源码编辑模式； 2、Fireworks 简称FW,主要用于网页图片的排版、切片、动画制作等，和PS功能类似，但针对网页设计而言使用比PS更灵活； 3、Photoshop ,简称PS，这个地球人都知道，在此不详细介绍。但PS在切图和网页排版、图片优化、批处理等方面效率不如FW，建议两个软件配合使用。 ;一、店铺装修的必备工具;浏览器兼容性是店铺装修（网页前端设计）最头痛的问题，WEB前端开发者往往要花费大量精力解决浏览器兼容性问题，此处只给大家介绍常用的浏览器阵营。 1、Trident内核：IE最先开发或使用的，也称IE内核；2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核；3、Gecko内核： Netscape6开始采用的内核，后???的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核；4、Presto内核：目前只有Opera浏览器采用该内核。 至于国产的360、百度、搜狗、猎豹等等所谓的双核浏览器都是基于IE和谷歌内核的山寨版。 建议大家安装的浏览器如下： IETEST(可以调试IE5-当前最新版IE的网页效果)、火狐浏览器、谷歌浏览器。 (扩展知识点：网页调试工具，也叫开发者工具，按F12审查元素，可以实时调试当前打开的网页显示效果) ;二、苏宁店铺装修后台介绍; ; ; ;三、自定义装修的运用;;;;;;;;三、自定义装修的运用;简单来说：切图就是将平面的图片输出成代码，PS和FW都可以实现这个功能，我们以FW为例来现场演示。 PS:图片体积过大（一般超过500K以上，最好是切割成若干部分，有利于加快网页打开速度），用来做切片的整张图片每个需要加链接的区域相对是规则的（方形），不然不利于在切割的图片上加链接。 第一步：使用切片工具在图片上画出切片区域，注意上下左右对齐: ; 第二步：导出图片转化成html代码，请注意红框解说部分，一定按照此标准去导出，不然可能页面会有裂痕或者不兼容的情况。 ;第三步：使用DW打开导出的HTML文件，进一步加工处理： 1、清楚多余的代码； 2、清楚不必要的标签熟悉，使代码看起来干净整洁； 3、给单个图片区域添加链接； 4、上传导出的每张图片并替换掉html文件里的本地图片地址； 5、放到店铺测试页的测试； 6、运用并发布。 ;三、自定义装修的运用;1、热区的使用（深刻理解） 热区也叫热点，是指在一张图片上画不同的形状（矩形、圆形、多边形），然后在形状图上创建超链接，是店铺装修使用频率最高的技术。热区的简易型和方便些不言而喻，但是也是最容易被误解，和容易出错的。 【误解点】：认为热区简单，所以很多同学不管图片尺寸大小，体积大小，甚至有的把整个页面当成一张图片在上面画热区加链接，效率是提高了，但是会严重影响网页打开速度，导致客户流失。 页面的优化比酷炫的效果更有效。 据权威机构调查反馈：一个访客对一个页面的的打开速度的等待时间平均为8秒，超过8秒网页还不能加载，用户将失去耐心，购物就更别提了。 【出错点】：我曾经1个月不到的时间遇到100多个亲们问同一个问题：为什么我热区上链接加好了，本地能打开，放到店铺却打不开，原因是【热区命名重复】，很多同学会在一个页面（模块）里放好几张图片，做好几个热区，但是热区的命名???一律用默认的，导致浏览器不知道到底以哪个为准。 2、热区的运用演示（深刻理解） ;谢 谢