淘宝店铺装修完全自学教程 - 平面设计学院

课程适用范围： 具有Photoshop和Dreamweaver基础的学员或对店铺装修感兴趣的学员。
课程简介： 本套教程可以使一个零基础的菜鸟变成装修达人。随着电商的发展，美工的需求量越来越大，零基础的同学很难入门，看了很多教程不见起色，这是因为学习的知识过于零碎，没有形成统一的课程体系。我们的课程全面讲解从开店到使用淘宝默认模板进行简单装修，以及利用在线生成工具、专业的代码编写软件Dreamweaver实现个性化的、复杂的页面装修效果。教程没有涉及太多视觉设计方面的知识，主要是装修技巧的讲解。相关视觉设计知识，大家也可以在勤学网学习其他专业视觉类课程。

课程基于淘宝店铺进行讲解，主要适用于淘宝店铺装修的同学学习哦~

涉及软件及版本： Photoshop CS6 和Dreamweaver CC 2015 大家可以下载对应版本或者更高版本进行学习。

淘宝天猫店铺装修完全自学教程.jpg 免费开店.jpg 装修工具介绍.jpg 简易页面装修.jpg 尺寸介绍1.jpg 尺寸介绍2.jpg 店铺页面设计1.jpg 官方模板展示.jpg 在线生成工具制作家居类店铺页面.jpg 案例效果.jpg 家居类店铺页面1.jpg 家居类店铺页面2.jpg 家居类店铺页面3.jpg 动图效果展示标头.jgp

注：GIF格式图像色彩空间有限，图片失真比较多，主要展示动态过程，实际应用图片会很清晰自然。

轮播海报效果

▽

轮播效果.gif

开关灯效果

▽

开关灯效果.gif

十二卡盘效果

▽

12卡盘效果.gif

自定义布局

▽

自定义布局.jpg

第四章店铺高级装修需要的HTML代码.jpg 第五章店铺高级装修需要学习的CSS样式第六章使用代码装修自定义店铺动态店招图

海报.jpg 自定义店铺2.jpg 自定义店铺3.jpg 自定义店铺4.jpg 动图效果.jpg

旋转木马应用案例

▽

旋转木马案例.gif

带左右按钮的自定义轮播效果图

▽

带箭头的轮播效果.gif

应用弹出层做带有下拉菜单的店招

▽

应用弹出层制作下拉菜单店招.gif

倒计时的应用

▽

倒计时效果.gif

突破950px带有鼠标特效的分类展示区域

▽

鼠标经过指针效果.jpg

第八章.jpg

自定义模块插入视频效果

▽

添加视频.gif

生成动态旺旺效果

▽

动态旺旺.gif

老师介绍

韩文强 主攻：网页设计/电商/web前端

简介：资深WEB前端工程师，站酷推荐设计师，是一名永不止步的学习者和分享者。擅长的行业包括WEB前端开发、电商设计及装修、UI设计等，多年从业经验和实战项目经验，共累计参与制作网站超过80个，原创设计文章超过二十几篇，点击量逾80万，被许多平台转载。开发的web前端开发课程，以通俗易懂的特点，帮助了很多菜鸟转变成了前端开发人才。

课程目录

第一章认识淘宝后台管理界面: 1.1 课程总体规划
本节时长：6分钟
介绍课程总体内容及学习课程需要做的准备; 1.2.淘宝后台常用操作
本节时长：15分钟
介绍装修店铺的常用后台操作，包括淘宝默认模板，页面添加，配色处理，模块添加等等。; 1.3.店铺装修常用工具介绍
本节时长：6分钟
店铺装修需要的软件工具，在线生成工具，以及淘宝开放平台的使用
第二章简易的页面装修: 2.1.淘宝首页标准尺寸及淘宝店招装修
本节时长：36分钟
淘宝首页标准尺寸介绍及如何利用淘宝默认工具进行简单的店招装修; 2.2.首页主体内容装修
本节时长：24分钟
使用淘宝默认的模块装修轮播图效果，宝贝分类，宝贝推荐，排行榜等; 2.3.分类页装修
本节时长：15分钟
使用淘宝默认模块对分类页面进行装修，包括店招的设置，添加和删除模块等。; 2.4.详情页装修和发布宝贝
本节时长：28分钟
详情页的装修范围及如何设置宝贝信息及详情描述等; 2.5.自定义专题页装修和导航条设置
本节时长：13分钟
如何添加自定义的专题页面，以及导航条项目设置和添加的方法; 2.6.其他两个官方模板的使用
本节时长：8分钟
其他两套默认模板的介绍及装修备份还原
第三章使用生成工具装修家居类店铺实战案例: 3.1.店铺装修前分析及全局设置
本节时长：10分钟
设计稿的展示以及店铺配色等的整体设置及全局分析; 3.2.页头店招基础设置
本节时长：10分钟
实例讲解通屏店招背景设置及店招主图的装修过程; 3.3.使用Photoshop为店招添加链接
本节时长：18分钟
使用Photoshop对店招设计稿进行切片并添加链接，装修店招的过程演示。; 3.4.使用生成工具做自定义导航条
本节时长：17分钟
使用在线生成工具制作自定义导航条效果; 3.5.全屏轮播海报的制作
本节时长：21分钟
使用在线生成工具突破淘宝默认最小宽度限制，制作全屏轮播海报效果。; 3.6.热卖爆款开关灯特效制作
本节时长：17分钟
使用在线生成工具制作爆款开关灯效果，以及去除模块间隙的方法。; 3.7.通栏图片及12图卡盘的做法
本节时长：18分钟
使用在线生成工具制作通栏图片及12图卡盘效果; 3.8为店铺添加旺旺区域
本节时长：25分钟
主要讲解如何在店铺中添加客服阿里旺旺联系入口，方便买家咨询。
第四章店铺高级装修需要学习的HTML代码: 4.1.代码编辑神器Dreamweaver和HTML的联系
本节时长：15分钟
认识熟悉代码编辑器Dreamweaver的界面及与HTML的关系详解; 4.2.操作文字的常用HTML代码
本节时长：25分钟
讲解常用的文字相关HTML标签及用法包括标题标签、加粗、倾斜、段落标签、横线标签、区块标签等; 4.3.标签的属性和标签的嵌套
本节时长：21分钟
详细介绍标签属性的编写方法及嵌套的原则; 4.4.HTML中的超级链接
本节时长：19分钟
介绍超链接标签、属性及代码书写规范; 4.5.图片标签和图像地图
本节时长：18分钟
讲解Dreamweaver插入图片的方法及对应标签，以及如何绘制热点地图; 4.6.表格标签的应用
本节时长：25分钟
介绍表格的相关标签及用法，以及如何利用表格来制作淘宝店铺装修中的开关灯效果; 4.7.表单标签及搜索框的应用
本节时长：18分钟
介绍表单标签及利用百度搜索的代码方便快捷制作店铺搜索框
第五章店铺高级装修需要学习的CSS样式: 5.1.认识CSS样式和CSS对字体的修改
本节时长：32分钟
css样式编写规范及常用文本的CSS样式设置方法; 5.2.元素的尺寸及背景
本节时长：21分钟
讲解如何定义网页中元素的尺寸及背景颜色、背景图像和定位等。; 5.3.盒子模型的内间距和外边距
本节时长：21分钟
讲解css样式盒子模型中内部填充值和外边距属性及实际应用时值的设置技巧; 5.4.盒子模型的边框和类选择器以及火狐浏览器的用法
本节时长：17分钟
主要讲解盒子模型的边框编写规范和技巧，类选择器以及火狐浏览器firebug的使用。; 5.5.三种不同类型的区块及转换
本节时长：26分钟
主要讲解块元素、行元素、行内块元素的特征及相互转换的方法; 5.6.浮动布局和后代选择器
本节时长：28分钟
浮动布局的设置方法及原理，后代选择器的编写方式，以及溢出隐藏设置。; 5.7.使用浮动做导航条和伪类选择器
本节时长：28分钟
使用伪类选择器、项目列表、超链接标签、浮动布局等知识制作淘宝店铺导航栏效果; 5.8.三种定位布局方式
本节时长：21分钟
元素相对定位、绝对定位、固定定位的属性设置及实际应用; 5.9 CSS3新增属性
本节时长：32分钟
讲解CSS3新增的圆角、阴影及不透明度等参数设置; 5.10.淘宝店铺装修需要的行内样式
本节时长：12分钟
如何将Dreamweaver中的CSS样式修改为行内样式，以符合店铺装修代码要求。
第六章使用代码装修自定义店铺: 6.1.全屏店招的装修方法
本节时长：23分钟
使用Dreamweaver实现全屏店招效果及添加热点地图; 6.2.使用CSS样式控制导航条
本节时长：28分钟
使用CSS样式修改设置导航条的样式，制作店招和导航条统一背景图像效果; 6.3.完全自定义的店招和动态图片的制作
本节时长：20分钟
完全自定义店招和导航条样式，制作店招上动态图片效果及装修方法; 6.4.使用定位布局为店招添加搜索框
本节时长：27分钟
通过使用淘宝自带类样式设置自定义搜索框的定位; 6.5.制作通栏海报
本节时长：26分钟
使用系统提供类名打破系统默认宽度制作全屏海报; 6.6.突破950px的专题活动展示做法
本节时长：35分钟
讲解活动专题页面切图、制作热点地图以及突破淘宝默认950px宽度的装修方法; 6.7.固定背景做法和优化布局结构
本节时长：31分钟
将大面积的背景图片定义为固定背景以及滚动背景的方法，优化店铺装修的结构; 6.8.系统显示与隐藏的类footer-more
本节时长：30分钟
使用淘宝自带类样式.footer-more制作鼠标经过时图片显示与隐藏效果等; 6.9.突破950px带有鼠标特效的分类展示区域
本节时长：33分钟
结合前面所学知识，讲解了一个综合案例，主要涉及知识点包括浮动布局，定位布局，突破淘宝默认950px宽度，鼠标经过指针变化，图像变化，以及添加跳转链接等
第七章使淘宝开放平台widget规范和SNS组件: 7.1.J_TWidget之Carousel旋转木马
本节时长：33分钟
淘宝J_TWidget组件之Carousel旋转木马的使用方法介绍; 7.2.旋转木马应用案例详解
本节时长：40分钟
通过实例讲解鼠标放置到按钮上实现切换，并且主图实现淡入淡出切换的装修效果; 7.3.带有左右按钮的自定义轮播图
本节时长：25分钟
使用旋转木马制作带箭头的轮播图效果，以及定义箭头位置的实际案例。; 7.4.J_TWidget之Popup弹出层
本节时长：29分钟
J_TWidget之Popup弹出层应用方式讲解以及元素位置、对齐点的原理; 7.5.应用弹出层做带有下拉菜单的店招
本节时长：38分钟
使用弹出层制作带有下拉菜单的店招效果; 7.6.倒计时的应用
本节时长：29分钟
使用在线生成工具结合Dreamweaver代码制作店铺活动倒计时效果; 7.7.SNS常用的加入购物车、分享组件等应用
本节时长：31分钟
加入购物车、分享、喜欢等组件介绍，以及利用组件制作产品交互效果
第八章装修店铺内页及总结: 8.1.店铺内页介绍及插入视频
本节时长：23分钟
详情页装修权限以及在装修页面中插入视频的方法; 8.2.动态旺旺图标
本节时长：17分钟
为自定义页面添加动态旺旺图标和总结