课程适用范围: 具有Photoshop和Dreamweaver基础的学员或对店铺装修感兴趣的学员。
课程简介: 本套教程可以使一个零基础的菜鸟变成装修达人。随着电商的发展,美工的需求量越来越大,零基础的同学很难入门,看了很多教程不见起色,这是因为学习的知识过于零碎,没有形成统一的课程体系。我们的课程全面讲解从开店到使用淘宝默认模板进行简单装修,以及利用在线生成工具、专业的代码编写软件Dreamweaver实现个性化的、复杂的页面装修效果。教程没有涉及太多视觉设计方面的知识,主要是装修技巧的讲解。相关视觉设计知识,大家也可以在勤学网学习其他专业视觉类课程。
课程基于淘宝店铺进行讲解,主要适用于淘宝店铺装修的同学学习哦~
涉及软件及版本: Photoshop CS6 和Dreamweaver CC 2015 大家可以下载对应版本或者更高版本进行学习。
注:GIF格式图像色彩空间有限,图片失真比较多,主要展示动态过程,实际应用图片会很清晰自然。
轮播海报效果
▽
开关灯效果
▽
十二卡盘效果
▽
自定义布局
▽
旋转木马应用案例
▽
带左右按钮的自定义轮播效果图
▽
应用弹出层做带有下拉菜单的店招
▽
倒计时的应用
▽
突破950px带有鼠标特效的分类展示区域
▽
自定义模块插入视频效果
▽
生成动态旺旺效果
▽
第一章 认识淘宝后台管理界面
|
介绍课程总体内容及学习课程需要做的准备 |
介绍装修店铺的常用后台操作,包括淘宝默认模板,页面添加,配色处理,模块添加等等。 |
店铺装修需要的软件工具,在线生成工具,以及淘宝开放平台的使用 |
第二章 简易的页面装修
|
淘宝首页标准尺寸介绍及如何利用淘宝默认工具进行简单的店招装修 |
使用淘宝默认的模块装修轮播图效果,宝贝分类,宝贝推荐,排行榜等 |
使用淘宝默认模块对分类页面进行装修,包括店招的设置,添加和删除模块等。 |
详情页的装修范围及如何设置宝贝信息及详情描述等 |
如何添加自定义的专题页面,以及导航条项目设置和添加的方法 |
其他两套默认模板的介绍及装修备份还原 |
第三章 使用生成工具装修家居类店铺实战案例
|
设计稿的展示以及店铺配色等的整体设置及全局分析 |
实例讲解通屏店招背景设置及店招主图的装修过程 |
使用Photoshop对店招设计稿进行切片并添加链接,装修店招的过程演示。 |
使用在线生成工具制作自定义导航条效果 |
使用在线生成工具突破淘宝默认最小宽度限制,制作全屏轮播海报效果。 |
使用在线生成工具制作爆款开关灯效果,以及去除模块间隙的方法。 |
使用在线生成工具制作通栏图片及12图卡盘效果 |
主要讲解如何在店铺中添加客服阿里旺旺联系入口,方便买家咨询。 |
第四章 店铺高级装修需要学习的HTML代码
|
认识熟悉代码编辑器Dreamweaver的界面及与HTML的关系详解 |
讲解常用的文字相关HTML标签及用法包括标题标签、加粗、倾斜、段落标签、横线标签、区块标签等 |
详细介绍标签属性的编写方法及嵌套的原则 |
介绍超链接标签、属性及代码书写规范 |
讲解Dreamweaver插入图片的方法及对应标签,以及如何绘制热点地图 |
介绍表格的相关标签及用法,以及如何利用表格来制作淘宝店铺装修中的开关灯效果 |
介绍表单标签及利用百度搜索的代码方便快捷制作店铺搜索框 |
第五章 店铺高级装修需要学习的CSS样式
|
css样式编写规范及常用文本的CSS样式设置方法 |
讲解如何定义网页中元素的尺寸及背景颜色、背景图像和定位等。 |
讲解css样式盒子模型中内部填充值和外边距属性及实际应用时值的设置技巧 |
主要讲解盒子模型的边框编写规范和技巧,类选择器以及火狐浏览器firebug的使用。 |
主要讲解块元素、行元素、行内块元素的特征及相互转换的方法 |
浮动布局的设置方法及原理,后代选择器的编写方式,以及溢出隐藏设置。 |
使用伪类选择器、项目列表、超链接标签、浮动布局等知识制作淘宝店铺导航栏效果 |
元素相对定位、绝对定位、固定定位的属性设置及实际应用 |
讲解CSS3新增的圆角、阴影及不透明度等参数设置 |
如何将Dreamweaver中的CSS样式修改为行内样式,以符合店铺装修代码要求。 |
第六章 使用代码装修自定义店铺
|
使用Dreamweaver实现全屏店招效果及添加热点地图 |
使用CSS样式修改设置导航条的样式,制作店招和导航条统一背景图像效果 |
完全自定义店招和导航条样式,制作店招上动态图片效果及装修方法 |
通过使用淘宝自带类样式设置自定义搜索框的定位 |
使用系统提供类名打破系统默认宽度制作全屏海报 |
讲解活动专题页面切图、制作热点地图以及突破淘宝默认950px宽度的装修方法 |
将大面积的背景图片定义为固定背景以及滚动背景的方法,优化店铺装修的结构 |
使用淘宝自带类样式.footer-more制作鼠标经过时图片显示与隐藏效果等 |
结合前面所学知识,讲解了一个综合案例,主要涉及知识点包括浮动布局,定位布局,突破淘宝默认950px宽度,鼠标经过指针变化,图像变化,以及添加跳转链接等 |
第七章 使淘宝开放平台widget规范和SNS组件
|
淘宝J_TWidget组件之Carousel旋转木马的使用方法介绍 |
通过实例讲解鼠标放置到按钮上实现切换,并且主图实现淡入淡出切换的装修效果 |
使用旋转木马制作带箭头的轮播图效果,以及定义箭头位置的实际案例。 |
J_TWidget之Popup弹出层应用方式讲解以及元素位置、对齐点的原理 |
使用弹出层制作带有下拉菜单的店招效果 |
使用在线生成工具结合Dreamweaver代码制作店铺活动倒计时效果 |
加入购物车、分享、喜欢等组件介绍,以及利用组件制作产品交互效果 |
第八章 装修店铺内页及总结
|
详情页装修权限以及在装修页面中插入视频的方法 |
为自定义页面添加动态旺旺图标和总结 |