当前位置:平面设计学院 > 淘宝店铺装修完全自学教程
 

巴塞罗那德国馆效果图:淘宝店铺装修完全自学教程

339703次 210条 400次
讲师:韩文强
课级:中级提高
时长:19.4小时
单价:¥860元 助学价:¥360元 我要单买
年会员:¥1800元/年 今日促销:¥399元 平面设计学院所有教程免费学
分享到:

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

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

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

淘宝天猫店铺装修完全自学教程.jpg免费开店.jpg 装修工具介绍.jpg 简易页面装修.jpg 尺寸介绍1.jpg 尺寸介绍2.jpg 店铺页面设计1.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

自定义??椴迦胧悠敌Ч?/span>

添加视频.gif

生成动态旺旺效果

动态旺旺.gif

 
 
第一章 认识淘宝后台管理界面

介绍课程总体内容及学习课程需要做的准备

介绍装修店铺的常用后台操作,包括淘宝默认模板,页面添加,配色处理,??樘砑拥鹊?。

店铺装修需要的软件工具,在线生成工具,以及淘宝开放平台的使用

第二章 简易的页面装修

淘宝首页标准尺寸介绍及如何利用淘宝默认工具进行简单的店招装修

使用淘宝默认的??樽靶蘼植ネ夹Ч?,宝贝分类,宝贝推荐,排行榜等

使用淘宝默认??槎苑掷嘁趁娼凶靶?,包括店招的设置,添加和删除??榈?。

详情页的装修范围及如何设置宝贝信息及详情描述等

如何添加自定义的专题页面,以及导航条项目设置和添加的方法

其他两套默认模板的介绍及装修备份还原

第三章 使用生成工具装修家居类店铺实战案例

设计稿的展示以及店铺配色等的整体设置及全局分析

实例讲解通屏店招背景设置及店招主图的装修过程

使用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代码制作店铺活动倒计时效果

加入购物车、分享、喜欢等组件介绍,以及利用组件制作产品交互效果

第八章 装修店铺内页及总结

详情页装修权限以及在装修页面中插入视频的方法

为自定义页面添加动态旺旺图标和总结

 
韩文强 主攻:网页设计/电商/web前端 简介:资深WEB前端工程师,站酷推荐设计师,是一名永不止步的学习者和分享者。擅长的行业包括WEB前端开发、电商设计及装修、UI设计等,多年从业经验和实战项目经验,共累计参与制作网站超过80个,原创设计文章超过二十几篇,点击量逾80万,被许多平台转载??⒌膚eb前端开发课程,以通俗易懂的特点,帮助了很多菜鸟转变成了前端开发人才。
 
  • 1_1课程总体规划 (时间 0_00_08;16)
  • 1_2.淘宝后台常用操作 (时间 0_02_53;19)
  • 1_3_店铺装修常用工具介绍 (时间 0_03_58;17)
  • 1_3店铺装修常用工具介绍 (时间 0_00_34;02)
  • 2_1淘宝首页标准尺寸及淘宝店招装修
  • 2_1淘宝首页标准尺寸及淘宝店招装修2
  • 2_3_分类页装修 (时间 0_06_56;03) (1)
  • 2_3_分类页装修 (时间 0_06_56;03) (2)
  • 2_3_分类页装修 (时间 0_06_56;03) (3)
  • 2_4_详情页装修和发布宝贝 (时间 0_20_48;23)
  • 2_5_自定义专题页装修和导航条设置 (时间 0_06_16;00)
  • 2_5自定义专题页装修和导航条设置 (时间 0_07_17;10)
  • 2_6_其他两个官方模板的使用 (时间 0_00_25;20)
  • 2_6_其他两个官方模板的使用 (时间 0_01_49;18)
  • 2_6_其他两个官方模板的使用 (时间 0_04_43;13)
  • 3_1店铺装修前分析及全局设置 (时间 0_08_06;09)
  • 3_2页头店招基础设置 (时间 0_03_18;23)
  • 3_3使用Photoshop为店招添加链接 (时间 0_05_22;17)
  • 3_3使用Photoshop为店招添加链接 (时间 0_12_47;25)
  • 3_4使用生成工具做自定义导航条 (时间 0_03_33;22)
  • 3_4使用生成工具做自定义导航条 (时间 0_09_30;16)
  • 3_5全屏轮播海报的制作 (时间 0_18_18;19)
  • 3_6热卖爆款开关灯特效制作 (时间 0_15_38;29)
  • 3_7通栏图片及12图卡盘的做法 (时间 0_14_14;16)
  • 3_8为店铺添加旺旺区域 (时间 0_19_28;04)
  • 4_1代码编辑神器Dreamweaver和HTML的联系 (时间 0_06_03;06)
  • 4_1代码编辑神器Dreamweaver和HTML的联系 (时间 0_08_54;10)
  • 4_2操作文字的常用HTML代码 (时间 0_00_28;06)
  • 4_2操作文字的常用HTML代码 (时间 0_20_47;11)
  • 4_3标签的属性和标签的嵌套 (时间 0_16_37;22)
  • 4_4HTML中的超级链接 (时间 0_02_34;13)
  • 4_5 (时间 0_11_54;09)
  • 4_6表格标签的应用 (时间 0_21_53;10)
  • 4_7表单标签及搜索框的应用 (时间 0_10_38;18)
  • 5_1认识CSS样式和CSS对字体的修改 (时间 0_12_26;29)
  • 5_2元素的尺寸及背景 (时间 0_18_47;26)
  • 5_3盒子模型的内间距和外边距 (时间 0_00_48;24)
  • 5_4盒子模型的边框和类选择器以及火狐浏览器的用法 (时间 0_09_00;27)
  • 5_5三种不同类型的区块及转换 (时间 0_10_22;24)
  • 5_6浮动布局和后代选择器 (时间 0_21_58;09)
  • 5_7使用浮动做导航条和伪类选择器 (时间 0_22_42;11)
  • 5_8三种定位布局方式 (时间 0_02_31;07)
  • 5_8三种定位布局方式 (时间 0_17_54;21)
  • 5_9CSS3新增属性 (时间 0_12_34;21)
  • 5_9CSS3新增属性 (时间 0_31_20;15)
  • 5_10淘宝店铺装修需要的行内样式 (时间 0_06_14;00)
  • 6_1全屏店招的装修方法 (时间 0_05_19;28)
  • 6_1全屏店招的装修方法 (时间 0_18_32;02)
  • 6_2 (时间 0_21_19;25)
  • 6_3.完全自定义的店招和动态图片的制作 (时间 0_11_13;27)
  • 6_4使用定位布局为店招添加搜索框 (时间 0_07_39;05)
  • 6.5.2.使用系统提供类名打破系统默认宽度
  • 6_6突破950px的产品展示做法
  • 6_7固定背景做法和优化布局结构
  • 6_8系统显示与隐藏的类footer-more (时间 0_26_04;07)
  • 6_8系统显示与隐藏的类footer-more
  • 6_9突破950px带有鼠标特效的分类展示区域 (时间 0_01_31;26)
  • 6_9突破950px带有鼠标特效的分类展示区域 (时间 0_29_48;21)
  • 7_1J_TWidget之Carousel旋转木马 (时间 0_05_48;20)
  • 7_2旋转木马应用案例详解 (时间 0_34_58;23)
  • 7_3带有左右按钮的自定义轮播图 (时间 0_21_34;06)
  • 7_4J_TWidget之Popup弹出层 (时间 0_16_36;19)
  • 7_5应用弹出层做带有下拉菜单的店招 (时间 0_29_25;10)
  • 7_6倒计时的应用 (时间 0_24_34;10)
  • 7_7SNS常用的加入购物车、分享组件等应用 (时间 0_15_04;18)
  • 7_7SNS常用的加入购物车、分享组件等应用 (时间 0_30_01;17)
  • 8_1店铺内页介绍及插入视频 (时间 0_21_21;09)
  • 8_2为自定义页面添加动态旺旺图标和总结 (时间 0_06_53;04)
  • 本套教程单价:¥860元 助学价:¥360元 
  • 平面设计学院年会员:¥1800元/年 今日促销:¥399元 可学习所有教程+新增教程 
  • 本学院已有112 套教程 总计 1294 个小时 查看详情
购买了该教程的同学
jfxair
俞富城
2wa
哈哈南瓜hahaha
snakypeter
陈露2013
主恩
石莉华
WBE
小宇宙plus
小哥007
aec
一只吱
kokosoku
apple00992
wen初夏
wlh630
kekeren
 
您可能感兴趣的课程
 
讲师:笨叔
31716次17条44次
 
讲师:贾斌
126351次36条130次
 
讲师:江遥
259139次212条519次
 
讲师:开心老师
439161次200条446次
 
讲师:Gordan
227345次116条314次
 
讲师:胡飞虎
309009次208条735次
 
讲师:陈志文
292098次222条188次
 
讲师:田婧
2124346次1293条1164次
 
微信客服 微信号:qinxue7899
800135999