立体感+——网店旺铺动态页面快速实现

第1章 每个电商美工都应该知道的基础

1.1 每个美工都应该知道的基本常识

1.2 切片

1.3 店铺装修后台

经验分享——photoshop cc版本快速切片

第2章 Dreamweaver与代码入门

2.1 代码和Dreamweaver

2.2 html与Dreamwea

2.3 表格

2.4 css样式与Dreamweaver

经验分享——如何制作单像素的表格

经验分享——为什么上传后图片大小/ 质量会改变？

第3章 一切从框开始，介绍盒模型

3.1 认识div

3.2 盒模型

3.3 框的背景

经验分享——用热图为大的图片添加链接

第4章 好玩的布局方法让框浮动起来

4.1 简单的N列布局

4.2 更复杂一点的浮动样式

4.3 用嵌套来实现复杂布局

4.4 一行N列在店招上应用的案例

经验分享——解决店招和导航之间的2像素的空隙

第5章 再复杂的布局也没问题：定位的技术

5.1 相对定位

5.2 绝对定位

5.3 借用淘宝的样式

经验分享——用绝对定位来做客服列表

第6章 让你的店铺突破950的宽度

6.1 突破950的原理

6.2 实际操作步骤

6.3 突破中的其他问题

经验分享——如何用自定义导航替代官方的导航

第7章 在框里填充内容

7.1 插入文字

7.2 插入图片

7.3 插入视频

经验分享——在描述中的图文混排

第8章 用CSS 3让页面动起来

8.1 hover鼠标响应效果

8.2 更平滑的动画效果

8.3 同时产生多个动画

8.4 更多的动画效果

经验分享——店铺装修常见问题

第9章 淘宝官方的widget特效

9.1 widget简介

9.2 标签页、卡盘、旋转木马

9.3 手风琴

9.4 弹出层

9.5 倒计时

经验分享——做自定义导航和弹出菜单

第10章 淘宝官方社交组件的应用：sns及其他

10.1 评论组件

10.2 喜欢组件

10.3 分享组件

10.4 其他

经验分享——如何获取店铺ID和商品ID

附录 淘宝的常用widget参数列表

说到淘宝网店装修代码，很多卖家、美工会觉得很难，总是会怀疑自己能学的会么？事实上代码确实会涉及很多基础知识，需要比较长的时间去掌握它。但是如果通过工具来制作，它其实比设计要简单很多，因为设计是活的，而代码知识相对比较死板，只要熟悉了，它们就会成为你的工具而不是障碍。另外，我们需要的不是一个大而全的详细的手册和规则类的代码课，只要能做出想要的布局和效果即达到目的。每天坚持学习一点，在一个月的时间内达到够用的程度对大多数人来说是没有什么问题的，所以如果你为了装修店铺而去学习装修代码，不用怕，你肯定行的。

　　从2011 年开始进入淘宝，并成为淘大讲师开始上美工类的课程后，我对上面所说的情况有非常深的感触，因此也一直有这个想法来写这样一本书，来帮助从事电商工作的掌柜和美工来了解装修代码，让淘宝网店装修代码不再成为我们工作的障碍。

　　本书首先介绍了基础的切片和HTML+CSS 知识，然后开始把所有的HMLT标签归结到框中，在了解了框的基础知识后，开始用框来做大的布局（包括浮动和定位两种方法），然后讲解了在框里填充内容的相关代码知识，到这里我们的基础代码部分就完成了，在工作中遇到的代码问题80% 基本可以通过这些知识来解决。进阶的内容部分介绍了如何用CSS3 让页面产生动态，最后针对淘宝装修的特殊情况，介绍了widget 相关组件的知识。这些知识其实在淘宝开放平台是公开免费的，只是很少有人会告诉你。

　　如果你以前接触过HTML 和CSS，学习这本书的时候会格外轻松。如果你完全没有基础，建议一定要照着书的实例多动手实际操作，有助于你加深理解。另外在随书光盘中，每一章都配有一段视频，来帮助大家整理思路，刚接触代码的新手一定要看一下哦。

　　这是阿灰第一次通过书的形式给大家讲解这方面的知识，可能会出现很多纰漏和问题，大家可以通过新浪微博@ 淘大阿灰猿、微信公共平台ahuips 或论坛来与阿灰沟通和反馈，非常感谢大家的支持。