淘宝PS美工+HTML代码实战教程

 1. 为什么电商设计师需要掌握PS+HTML双技能   
淘宝店铺装修已进入精细化运营时代，仅靠PS设计图无法满足动态交互需求。本课程通过62节实操课系统讲解如何用Photoshop设计素材后，结合HTML/CSS代码实现可点击的导航条、全屏轮播海报、动画店招等高级效果。从火狐浏览器插件应用到Dreamweaver代码调试，覆盖淘宝装修后台所有核心场景。   

 2. 课程三大核心能力培养路径   
第一阶段夯实基础：从淘宝首页尺寸规范、店招设计要素到PS时间轴动画制作；第二阶段代码实战：Table表格布局、DIV+CSS盒子模型、淘宝专用class类突破950px宽度限制；第三阶段动态效果：J_TWidget组件实现旋转木马轮播图、弹出层动画等交互功能，解决淘宝屏蔽代码的适配问题。   

 3. 特色案例解决实际工作痛点   
- 智能电子产品海报：从设计思路到PS图层管理   

- 不规则店招装修：利用CSS定位属性实现差异化效果   

- 全屏轮播海报：结合淘宝系统类与JS动态封装   

- 客服中心切图：PS切片工具与热点链接联用技巧   

课程包含7个完整商业案例，如御泥坊化妆品海报设计、女装Banner制作过程等，均提供可复用的代码模板。   

 4. 适合哪些人群学习   
✔ 已有PS基础需突破代码瓶颈的美工   

✔ 想实现动态店铺装修的淘宝店主   

✔ 需要掌握淘宝专用HTML标签的开发者   

✔ 计划转型电商设计的平面设计师   

课程从1.3节《开店注意事项》到18.7节《化妆品海报设计》，形成完整技能闭环。   

 5. 课程与其他培训的本质差异   
不同于单纯教PS操作的教程，本课程独创「设计→切图→代码→调试」四步工作流：第4章详细演示如何将PS效果图转化为可交互的淘宝页面，第9章用14节课深度剖析CSS选择器与定位属性，第11章更独家揭秘淘宝封装的JS组件用法。   

通过62节高清视频，学员能系统掌握从静态设计到动态落地的全流程技能。特别适合希望用专业装修提升店铺转化率的电商从业者，代码部分讲解细致到每行注释，无需编程基础也能跟上实操。

资源目录列表：

├─xs561
│  ├─淘宝美工一站式淘宝ps高级美工技巧视频教程HTML代码
│  │  ├─10----2.6.导航条制作及火狐浏览器插件应用.flv
│  │  ├─1----1.1课程大纲与开店忠告.flv
│  │  ├─11----2.7海报设计思路及规范.flv
│  │  ├─12----3.1.淘宝首页傻瓜式一键装修.flv
│  │  ├─13----3.2一键装修后如何修改店铺图片.flv
│  │  ├─14----4.1.将PS制作的效果图上传到淘宝页面.flv
│  │  ├─15----4.2.店招动画何必使用Flash.flv
│  │  ├─16----4.3.店招动画PS时间轴高级用法.flv
│  │  ├─17----4.4.为店招添加链接实现店铺收藏效果.flv
│  │  ├─18----4.5.使用PS生成代码做店招中可链接好更换的图片.flv
│  │  ├─19----4.6.全屏店招的2种做法及系统模板定义店铺风格.flv
│  │  ├─20----5.1.修改CSS样式自定义店铺导航条风格.flv
│  │  ├─2----1.2淘宝开店流程.flv
│  │  ├─21----5.2.html代码回顾与css面板の类型.flv
│  │  ├─22----6.1.制作静态多图独立链接的全屏海报.flv
│  │  ├─23----7.1.客服中心制作之PS切图.flv
│  │  ├─24----7.2.将ps生成的代码上传到淘宝装修后台.flv
│  │  ├─25----7.3.将整张照片实现点击可链接.flv
│  │  ├─26----8.1.DreamWeaver和HTML的联系.flv
│  │  ├─27----8.2.淘宝中常用的HTML标签.flv
│  │  ├─28----8.3.HTML标签之间的嵌套.flv
│  │  ├─29----8.4.HTML中的超级链接及锚点链接.flv
│  │  ├─30----8.5.给图片加链接及图片热点链接.flv
│  │  ├─3----1.3即将开店或已经开店的注意事项.flv
│  │  ├─31----8.6.重要的排版标签table表格.flv
│  │  ├─32----8.7.Table表格做宝贝展示案例.flv
│  │  ├─33----8.8.揭开DIV布局面纱.flv
│  │  ├─34----9.1.CSS基本概念讲义及使用方法.flv
│  │  ├─35----9.2.CSS中对标签文字的修改.flv
│  │  ├─36----9.3.结合淘宝讲解CSS的背景及方框.flv
│  │  ├─37----9.4.行级与块级标签的相互转换配合浮动属性.flv
│  │  ├─38----9.5.DIV布局的核心知识【盒子模型】.flv
│  │  ├─39----9.6.实例课【推荐区布局table篇】.flv
│  │  ├─40----9.7.实例课【推荐区布局DIVCSS篇】.flv
│  │  ├─4----1.4卖家中心简介及千牛工作台.flv
│  │  ├─41----9.8.将页头CSS更给为行内样式.flv
│  │  ├─42----9.9.淘宝常用的HTML列表标签.flv
│  │  ├─43----9.10.css选择器扩展与加强.flv
│  │  ├─44----9.11.CSS选择器——伪类选择器.flv
│  │  ├─45----9.12.css结束篇【常见的定位属性】.flv
│  │  ├─46----9.13.总结篇DIVCSS布局导航条1.flv
│  │  ├─47----9.14.总结篇DIVCSS布局导航条2.flv
│  │  ├─48----10.1.解决淘宝屏蔽的css代码.flv
│  │  ├─49----10.2.淘宝系统提供的专用class类.flv
│  │  ├─50----10.3.通过淘宝系统类，突破默认950px宽度.flv
│  │  ├─51----11.1.JS动态效果在淘宝中的封装——J_TWidget组件.flv
│  │  ├─5----2.1淘宝首页设计流程.flv
│  │  ├─52----11.2.J_TWidget弹出层动画【案例1】.flv
│  │  ├─53----11.3.J_TWidget弹出层动画【案例2】.flv
│  │  ├─54----11.4.J_TWidget组件【旋转木马】.flv
│  │  ├─55----11.5.J_TWidget组件【旋转木马】＋淘宝类=淘宝全屏轮播海报.flv
│  │  ├─56----11.6.旋转木马之【店招轮播动画】（1）.flv
│  │  ├─57----11.7.旋转木马之【店招轮播动画】（2）.flv
│  │  ├─58----13.1.淘宝首页背景做法之（1）【自定义重复背景】.flv
│  │  ├─59----13.2.淘宝首页背景做法之（2）【固定背景】.flv
│  │  ├─60----13.3.为店铺及商品添加分享功能.flv
│  │  ├─61----13.5店铺左侧固定导航.flv
│  │  ├─6----2.2淘宝首页设计前准备工作.flv
│  │  ├─62----13.6.为店铺添加搜索框.flv
│  │  ├─63----13.7.店招的设计要素与不规则店招的装修.flv
│  │  ├─64----18.1.淘宝首页效果图设计.flv
│  │  ├─65----18.2.女装banner设计思路与制作过程（1）.flv
│  │  ├─66----18.3.淘宝首页banner设计（2）mp4.flv
│  │  ├─67----18.4.淘宝海报—智能电子产品新品海报.flv
│  │  ├─68----18.5.淘宝海报—智能电子产品新品海报（下）.flv
│  │  ├─69----18.6.智能电子产品发布海报补充与海报版式设计.flv
│  │  ├─70----18.7.御泥坊化妆品海报设计.flv
│  │  ├─7----2.3.淘宝首页内容及尺寸标准.flv
│  │  ├─8----2.4淘宝店招图标设计.flv
│  │  ├─9----2.5店招设计补充完善.flv
│  │  ├─下载说明.txt
│  │  ├─一切与IT有关的教程.txt