淘宝美工一站式学习 高级PS+HTML+CSS淘宝组件J_TWidget 视频教程（价值168元）

教程名称：淘宝美工一站式学习 高级PS+HTML+CSS淘宝组件J_TWidget 视频教程（价值168元）


课程简介：

简　　介        我们的课程可以使一个零基础的菜鸟转变设计、装修达人，很多想学习的无法入门，看了很多教程不见起色，这是因为没有统一的体系。我们的课程从认识淘
宝、设计淘宝首页界面、学习装修代码、制作整站视觉营销等课程。
学习目标        从零基础可以变为优秀的设计师，并且能够非常好的使用代码装修个性店铺
课程目标： 从零基础可以变为优秀的设计师，并且能够非常好的使用代码装修个性店铺。

课程特色： 我们的课程可以使一个零基础的菜鸟转变设计、装修达人，很多想学习的无法入门，看了很多教程不见起色，这是因为没有统一的体系。我们的课程从认识淘宝、设计淘宝首页界面、学习装修代码、制作整站视觉营销等课程。

适用人群： 只要你想学好设计和自定义店铺，这个课程包你满意。

优惠方式： 知识全面很实惠了，不打折。

课程目录:
第1章淘宝天猫美工开始起航
1课程大纲与开店忠告00:29:35
认识什么是电子商务；淘宝与天猫的区别；进入电子商务后自己开店还是从美工做起。 假设开店，老师给大家的忠告。
2淘宝开店流程00:12:01
确定好自己方向后，想要自己开店的，这里讲解开店流程及注意事项。 如果已经开过店或者直接不开店直接学美工的同学可跳过这一节课。
3即将开店或已经开店的注意事项00:16:18
通过学习，即将开店或已经开店的同学，一定要注意学习这节课，讲的是淘宝的新规则，及不可触碰的一些规则。 不开店只学美工的同学，可以也学习一下。
4卖家中心简介及千牛工作台00:14:21
这节课主要让大家先开通自己的店铺或借一个店铺，为以后美工学习打好基础。 简短的介绍我们未来的工作平台，具体装修在哪些界面常应用。
第2章PS首页全局设计
1淘宝首页设计流程00:14:28
淘宝美工首页设计流程，通过这一节课我们会学习到，淘宝首页是怎么样的一个设计流程的，如何将PSD文件生成到淘宝网页中。
2首页设计之前的准备工作00:25:29
在做淘宝设计设计的时候千万不要拿过产品来就开始做，这样最终的后果是全局乱掉了，不符合我们美工要求，因此在做设计之前，一定要先做好准备工作。
3宝首页内容及尺寸标准00:18:44
做首页草图及效果图之前必须要遵循的模块，以及淘宝标准的尺寸。
4首页PS作图规范及店招图标设计00:24:06
这一节教大家如何在ps作图中讲究规范，还有店招中经常使用的图标是怎么制作的。
5店招设计补充与完善00:22:48
将店招设计的细节再次补充，完成店招设计。
6导航条制作及火狐浏览器插件应用00:21:54
通过PS将导航条静态文字及背景颜色设计出来，并且把鼠标经过后的颜色也设计出来，供后期后台装修时使用。 并且讲解网页美工人员必用的一款浏览器——火狐浏览器，讲解火狐插件的应用。
7海报设计思路及规范00:29:46
淘宝首页的海报是定义一个店铺风格最重要的标志，因此设计海报需要重点把控店铺整体风格，因此这节重要的课来讲述，首页海报在设计上从哪些点出发，并且讲究什么样的规范。这节课，详细的通过一个真实案例制作，教给大家海报该怎么想，应该怎么做。
第3章非常重要的附加课【一键装修淘宝】
1傻瓜式一键装修软件的使用与店铺备份00:13:05
这节课的目的是让大家已经开着的店铺及时装修上，不要再用淘宝默认的页面了（真心很丑），要是让大家看完我的视频再装修你的店铺，可能看完视频了，你的店铺也黄了，所以这节课，你无论如何也要学习。 让你的首页瞬间有自己的风格样式。
2一键装修后如何修改店铺图片00:10:12
使用软件装修后的页面是比较难看的，所有图片也是系统自带的，这节课，简单的教大家如何修改店铺图片。
第4章淘宝店招的N种做法
1第一种最简单的操作【直接导入图像】00:17:38
这种方法简单，只要有PS做好的效果图，保存后放入图片空间，然后在淘宝后台直接默认图片指定我们自己的图片即可。
2第二种制作动画店招【用美图和PS生成动画图像】00:19:49
用两种方式制作店招的动画，在店招中用我们想要突出的重点，使用动画的方式去表现，会吸引消费者的注意如：全场包邮或全称5折或LOGO动画的制作。
3第二种制作动画店招_补充【PS时间轴做动画高级教程】00:22:43
这一节使用PS cs6 制作
4第三种店招【为店招添加链接实现店铺收藏效果】00:13:54
这节课实现点击收藏店铺，可以将我们的店铺加入到收藏效果。结合DW的热点链接。
5第四种店招【使用PS生成代码做方更换图片的爆款图片】00:20:35
使用PS的切片工具，生成代码，很强大，很实用的功能。
6第五种全屏店招【全屏店招两种做法及自定义店铺样式风格】00:24:12
全屏店招的视觉冲击里要高于950PX店招，分别根据平铺及整张图片进行设计。根据设计图在淘宝后台找到属于设计图的样式风格。
第5章自定义店铺导航条（基础）
1修改CSS样式自定义店铺导航条风格00:21:18
通过提供的文案，结合火狐的firebug工具吸取16进制颜色，替换到自己想要的导航条风格。
2淘宝导航添加内容及创建自定义页面00:11:06
随着淘宝卖家数量的不断攀升，许多卖家想要制作出个性化页面带给消费者不一样的用户体验，呼声不断提高，因此淘宝对卖家不断开放功能，以满足卖家的需求。
第6章首页海报的多种做法
1制作静态多图独立链接的全屏海报00:30:09
这几课教大家做全屏静态海报，并且可以实现一张图片多个链接，注意这里不是说的图片热点链接。
2超简单制作全屏轮播海报00:11:39
使用全屏轮播海报作为首页的展现，一方面可以提高店铺的交互性，另一方面可以在有限的版块内，尽量多的展现爆款宝贝。 全屏轮播海报是一个重要的知识点。
第7章不会DIV布局没关系，用强大的PS生成代码吧！！！
1用PS做客服效果图并生成代码00:30:21
使用切片做代码，这节课的内容是简单的切片，就是因为我们简单的切片，会在淘宝后台装修的时候遇到问题，下节课解答。
2将ps生成的代码上传到淘宝装修后台00:15:35
这节课说明，我们PS生成的代码不能直接放到淘宝的，因为淘宝是给我们代码过滤的，会出乱子，因此，用案例来解决问题。
3将整张照片实现点击可链接00:16:00
如果单纯的使用代码生成后的图放置到我们表格中，就会出现问题，这节课就来解决这个问题。
第8章DreamWeaver软件与HTML标签代码征程
1DreamWeaver和HTML的联系00:17:59
DW只是一个网页编辑器，其实网页的本质就是HTML代码，这节课先认识DW操作界面，下节课开始HTML的学习。
2淘宝中常用的HTML标签00:25:55
html代码看起来很复杂，一定很难学吧？ 其实HTML很好学，都是标签对，没有任何逻辑性，所以说上手很快。 非要学习代码不可吗？ 一定要学习的，因为未来我们学习J_TWidget组件的时候不会写代码，根本做出出交互性页面来，因此提高自己要求，按照课上的知识，敲代码。
3HTML标签之间的嵌套00:22:20
标签直接可以通过嵌套关系，完成多重效果
4HTML中的超级链接及锚点链接00:34:32
淘宝中常用的链接，设计视图配合代码，认识链接的代码书写方式。
5Table表格做宝贝展示案例00:48:54
用表格布局做产品展示。
6重要的排版标签table表格00:21:03
先认识一下表格的基本属性，案例在做淘宝的时候一起学。
7揭开DIV布局面纱00:11:07
8给图片加链接及图片热点链接00:34:31
网页中如果没有图片只有文字，网页会非常的枯燥，因此网页中图片是非常重要的，是网页的重要组成部分，我们这一节课就讲图片的多种操作方法。
第9章CSS在淘宝中的专属作用
1CSS基本概念讲义及使用方法00:22:37
2CSS中对标签文字的修改00:18:35
通过可视化的CSS界面讲解，如何用CSS来修改标签自带文字属性，及添加文字属性。
3结合淘宝讲解CSS的背景及方框00:31:24
背景设置类似于淘宝店招和导航区域的设计，视图结合代码双向学习。
4行级与块级标签的相互转换配合浮动属性00:35:06
这一节通过一个DIV布局练习，来讲解行级与块级元素，并且讲解如何让块元素横排显示。
5DIV布局的核心知识【盒子模型】00:40:36
讲解标签的border属性及padding和margin属性
6实例课【推荐区布局table篇】00:32:56
最简单可行的淘宝布局方法，最易上手。通过PS生成html代码，再通过dreamweaver修改图片地址，不用懂代码也可以学会自定义宝贝布局。table布局不过略微有些小缺陷，通过table的学习，来对比下一节课DIV+CSS的优势。
7实例课【推荐区布局DIV+CSS篇】00:41:21
这种布局方式是最最常用的布局方式，因为图片与图片直接的距离可以精确的控制，比table布局要强大的多，但是难点就在于代码一定要熟练使用。
8将页头CSS更给为行内样式00:25:43
在淘宝中我们的自定义内容区，只认行内样式的代码块，原来布局在页头上面的css是不起作用的，因为自定义内容区屏蔽出去HTML代码外的任何字符，因此我们要改为行内书写。 这节课讲解书写行内样式的技巧，及写完后我们不但可以装修淘宝店铺，我们还可以去装修个人博客等。 所以航呢你样式是非常关键的，要求你必须会手写代码。 大家一定要好好练习代码。
9css选择器拓展与加强00:26:05
从开始我们一直接触的就是class与ID选择器，只会这两个选择器，在我们项目中式完全不够的，这节课讲淘宝导航条经常使用的选择器子代选择器、群组选择器及标签选择器等。
10淘宝常用的HTML列表标签00:24:37
结合w3cschool，学习有序列表和无序列表，打牢这个代码的基础之后，为下一节课做淘宝导航条做充足的准备。
11CSS选择器——伪类选择器00:28:45
鼠标经过文字的时候经常能看到发生不同的变化，这是css伪类选择器的作用，这是一个比较重要的一个选择器，是主要针对于链接文字的。
12CSS结束篇【常见的定位属性】00:28:27
CSS讲到这里可以暂时的画一个句号了，更多的应用就去我们案例中突破。这节课是为综合案例中，海报的制作与导航条的制作，尤为关键的一节课，代码一定要熟练敲写。
13DIV+CSS总结篇，排版淘宝导航条100:30:07
在淘宝中我们没有方法干涉他的html布局，只为我们开房css代码，因此我们需要了解淘宝给我们系统提供的html代码，我们通过前面的学习了解自己布局，然后我们再自己定义样式的时候就更加牢靠了。
14DIV+CSS总结篇，排版淘宝导航条200:36:33
将DW定义好的页头CSS放置到淘宝导航条进行测试更正完成导航条的整体布局。
第10章DIV+CSS布局中，要注意淘宝系统给我们的规定
1店招高级——通过绝对定位完成静态多图展示100:22:36
先在线下完成店招能够放置多个热点爆款产品的布局方式，用到的知识就是上一章的绝对定位方式来完成。
2店招高级——淘宝系统为我们提供的专用绝对定位class200:15:02
通过火狐浏览器，找到系统提供的class类，使用他的绝对定位，解决淘宝屏蔽定位属性的问题。
3全屏海报的秘密——通过淘宝系统提供的类，完成全屏海报的制作00:22:00
第11章期待已久的高级，淘宝开放平台之J_TWidget组件做JS动态效果
1J_TWidget详解之弹出层动画00:42:07
淘宝中应用做多的一个JS效果，即简单易操作，用的也多，这节课从这里开始
2J_TWidget弹出层动画【案例1】00:30:07
弹出层动画是组件库中比较重要的一个知识点，通过两个案例来把这个知识点进行加强。
3J_TWidget弹出层动画【案例2】00:33:11
一个加强的弹出层动画，其中用到了之前做全屏海报的淘宝指定类，做的一个综合案例。
4J_TWidget组件【旋转木马】——轮播海报的秘密00:30:54
5J_TWidget组件【旋转木马】＋淘宝系统类=全屏轮播海报00:38:09
全屏轮播海报的制作思路及代码嵌套的详细讲解
6旋转木马之【店招轮播动画】（1）00:37:25
前几节课的代码不是白敲的，这节课的店招轮播动画就用到了，因为很多网站的在线代码生成轮播图片，不支持小图轮播，要想实现，只能我们通过熟悉J_TWidget组件的旋转木马来实现。
7旋转木马之【店招轮播动画】（2）00:15:11
将系统提供的定位类，与淘宝widget组件进行合并，完成轮播效果的店招
第12章以上是淘宝基础系列课程，下面的章节是淘宝首页中经常出现的效果
第13章淘宝中经常出现的效果，混合集，无序列，学习之前先掌握之前知识
1淘宝首页背景做法之（1）【自定义重复背景】00:19:46
这节课完成自定义背景的两种常见方式，一种是纯色背景，另一种是重复的课滚动的背景图片。 这节课主要讲的是，如何从ps到淘宝，实现，蕾丝花边重复背景
2淘宝首页背景做法之（2）【固定背景】00:25:19
将背景锁定在浏览器的中心位置，让其不随着滚动条的滚动而变化。
3为店铺及商品添加分享功能00:23:42
通过淘宝开放文档来学习分享功能
4店铺左侧的悬浮导航制作00:18:23
悬浮导航不跟随鼠标滚动而变化，始终定位在屏幕的固定位置，可以点击导航跳转到不同的页面位置，给消费者一种很好的用户体验。
5为店铺添加搜索框00:25:39
对于某些淘宝店铺来说，产品是比较多的，因此可能需要搜索框，能够让消费者快速的找到自己想要的产品，搜索框模块在首页可以使用默认的模块添加，但是其他页面不行。 这节课，我们使用代码，将搜索框放到店招中，让搜索框方便消费者搜索。
6利用弹出层，模仿达芙妮的首页自定义店招（上）00:17:38
7利用弹出层，模仿达芙妮的首页自定义店招（下）00:36:10
8使用代码生成工具，做热门产品多图轮播00:32:13
第14章PS高级课，之前录制的课程，大家先看着，后期有更精彩的
1抠图的常用技巧【扣取半透明婚纱照】00:20:43
抠图是淘宝装修中不可或缺的一部分，杂乱的背景使得产品低端，将商品或人物抠选出来放到适当背景下，商品的档次就会因此而提高，这就是抠图的重要性。
2抠图的常用技巧【抠取带投影的物体】00:19:52
在图像合成工作中，当物体放入另一个场景的时候，假设物体没有投影，很显然物体就悬浮在空中了，给人一种很假的感觉。 这节课王老师，带大家学习，如何精准的扣取物体的投影。
3扣取头发发丝细节【使用通道配合抽出滤镜】00:15:46
发丝会扣取的非常精细，比完全的通道抠图要好很多。
4淘宝《抢年货》全屏海报制作——全过程（上）00:21:48
讲解海报的制作过程，及PS的一些综合用法。 一步一步的制作过程。
5淘宝《抢年货》全屏海报制作——全过程（下）00:19:57
结合软件CDR做文字特效，完成海报制作。
第15章淘宝效果图设计
1淘宝首页效果图设计思路与要点00:38:34
做效果图始终要讲这三点要牢牢把握： a.版式上没考虑的最终可能使得首页非常的乱，凸显不出主题，喧宾夺主等 b.颜色上没有遵循的，为了突出重点，滥用颜色，最终造成页面类似于涂鸦 c.交互效果不做到位，就好像看一场没有声音的电影一样，枯燥无味
2女装banner设计思路与制作过程（上）00:42:43
有很多的同学看了很多的教程但是就是不会自己独立去完成一张海报或首页，这节课就教大家如何拿到一个产品后从什么方向去考虑，怎么做标题，添加什么细节元素进行考虑，最终完成一张海报的制作，当然这个制作只是为了扩充我们的制作思路，根据不同产品还要不同的针对才行。
3女装banner设计思路与制作过程（下）00:50:59
有很多的同学看了很多的教程但是就是不会自己独立去完成一张海报或首页，这节课就教大家如何拿到一个产品后从什么方向去考虑，怎么做标题，添加什么细节元素进行考虑，最终完成一张海报的制作，当然这个制作只是为了扩充我们的制作思路，根据不同产品还要不同的针对才行。
4淘宝海报—智能电子产品新品海报（上）【课堂实录视频】1:31:17
5淘宝海报—智能电子产品新品海报（下）【课堂实录视频】1:04:11
6智能电子产品发布海报补充与海报版式设计1:32:48
7御泥坊化妆品海报设计00:54:58
第16章模仿太平鸟天猫店铺做淘宝整站装修
1太平鸟店铺原理展示00:24:20



下载地址：

下载地址已隐藏，加入会员后显示

加入会员

版权声明

1、本站所发布的一切学习教程、软件等仅限用于学习体验和研究目的；请自觉下载后24小时内删除，严禁用于其他用途，如果你喜欢教程，请支持正版教程软件，得到更好的正版服务，本站内容全部来自网络，版权争议与本站无关，如果您认为侵犯了您的合法权益，请联系我们删除。发送微信omantoo

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。