店铺装修培训解析.pptx

店铺个性化装修零起步——本教程由上海瑞喜堂-城市狼倾情出品讲师简介讲师名称：城市狼当前岗位：上海瑞喜堂电商经理工作经历：2005-2010年创办山鹰设计网络工作室，为数百家中小企业提供网站建设、网络营销策划服务。2011-2013年担任淘宝TOP10（小维家）女装店技术主管，从事前端设计和页面优化工作。2014年-现在加入上海上海冠瑞医电集团、组建电商团队、负责旗下品牌瑞喜堂的电商运营和团队管理工作。培训前须知本培训课程适合对店铺装修无任何代码基础的同学参加,如果已经有一定代码基础的可以选择性学习。本堂课程更倾向实战操作，常见的代码运用都会现场演示，目的是让大家即学即用，理论部分不会深入展开，如果理论基础欠缺的同学可以到相关的学习网站去充电。(推荐w3school)目录个性化装修的必备工具店铺装修后台功能简介个性化装修的运用一二三一、店铺装修的必备工具（一）店铺装修的常用软件1、DreamWeaver简称DW,主要用于编写代码和实现网页排版，支持实时的视图模式和源码编辑模式；2、Fireworks简称FW,主要用于网页图片的排版、切片、动画制作等，和PS功能类似，但针对网页设计而言使用比PS更灵活；3、Photoshop,简称PS，这个地球人都知道，在此不详细介绍。但PS在切图和网页排版、图片优化、批处理等方面效率不如FW，建议两个软件配合使用。一、店铺装修的必备工具（二）店铺装修的常用浏览器浏览器兼容性是店铺装修（网页前端设计）最头痛的问题，WEB前端开发者往往要花费大量精力解决浏览器兼容性问题，此处只给大家介绍常用的浏览器阵营。1、Trident内核：IE最先开发或使用的，也称IE内核；2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核；3、Gecko内核：Netscape6开始采用的内核，后来的MozillaFireFox(火狐浏览器)也采用了该内核，K-Meleon浏览器也是使用这种内核；4、Presto内核：目前只有Opera浏览器采用该内核。至于国产的360、百度、搜狗、猎豹等等所谓的双核浏览器都是基于IE和谷歌内核的山寨版。建议大家安装的浏览器如下：IETEST(可以调试IE5-当前最新版IE的网页效果)、火狐浏览器、谷歌浏览器。(扩展知识点：网页调试工具，也叫开发者工具，按F12审查元素，可以实时调试当前打开的网页显示效果)二、苏宁店铺装修后台介绍1、后台装修入口：2、页面功能解读（1）页面管理：用来新增自定义页面，最多能新建10个自定义页面，一般建议编写自定义代码装修店铺时，先新建自定义页面调试，显示正常后再拷贝到首页发布。（2）系统默认页面：包含首页、店内搜索页和商品分类页A、首页是我们重点介绍的，所谓个性化装修，主要是在首页里添加自定义模块，使用html代码改变（新增）系统默认的设置，进行灵活的排版和布局；B、店内搜索页是不能装修的（除修改店招和导航外）；（PS:当店铺首页发布不了的时候可以切换到此页面发布。）C、商品分类页可以自定义装修的，通过左侧添加自定义模块实现个性化装修。（3）自定义页面管理对我们新增的页面进行管理（删除）和个性化装修，一般用来做活动页面或者专题页面。3、系统默认样式功能解读：（1）背景：可以上传500K内的图片，实现整店背景统一，也有的同学用来和990内容区拼接实现全屏效果，但是如果页面过长或者内容区需要经常修改替换，则会非常不灵活。建议如果采用图片作为背景显示方式可以选择定屏。（2）配色：可以快速配置全店色系，但选择有限，没法实现个性化，属于比较鸡肋的功能。（3）模板管理：可以快速切换使用官方提供的系统模板，和配色一样比较鸡肋。（PS：切换模块店铺之前装修好的内容会消失，需要重新装修。）（4）存储管理：发布店铺的时候可以对需要当前装修效果进去保存，最多能存储3个版本。一旦店铺出现问题可以还原到之前备份的版本。非常好的功能，大家灵活使用。三、自定义装修的运用（一）关于代码1、代码的定义（理解）店铺装修代码一般指的是html（超文本标识语言）、div（层）布局、table(表格)布局和css（层叠样式表）的综合体。Html用来实现一个页面的框架；div和table是用来实现页面的实现布局、css是实现页面的修饰效果我们用建一栋大楼来作比喻：html是整栋楼的钢筋结构；div和table是负责每个楼层和每个房间的格局（比如三室一厅、两室一厅），css是房间外表和内部的装饰效果（比如用什么墙纸、用什么地板、门是什么颜色、尺寸大小是多少等等）。我们用一张表来简单比较下：网页设计创意苏宁云台效果图HTMLDIV、TABLECSS楼房建设图纸地基外观结构楼层装修2、HTML的使用（了解）（1）html页面结构：html标签一般都是成对出现，有开头就有结尾，可以理解