作者：韩翠
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
设计感+：网店旺铺视觉设计实操技法试读：
前言
说到淘宝网店装修代码，很多卖家、美工会觉得很难，总是会怀疑自己能学的会么？事实上代码确实会涉及很多基础知识，需要比较长的时间去掌握它。但是如果通过工具来制作，它其实比设计要简单很多，因为设计是活的，而代码知识相对比较死板，只要熟悉了，它们就会成为你的工具而不是障碍。另外，我们需要的不是一个大而全的详细的手册和规则类的代码课，只要能做出想要的布局和效果即达到目的。每天坚持学习一点，在一个月的时间内达到够用的程度对大多数人来说是没有什么问题的，所以如果你为了装修店铺而去学习装修代码，不用怕，你肯定行的。
从2011年开始进入淘宝，并成为淘大讲师开始上美工类的课程后，我对上面所说的情况有非常深的感触，因此也一直有这个想法来写这样一本书，来帮助从事电商工作的掌柜和美工来了解装修代码，让淘宝网店装修代码不再成为我们工作的障碍。
本书首先介绍了基础的切片和HTML+CSS知识，然后开始把所有的HMLT标签归结到框中，在了解了框的基础知识后，开始用框来做大的布局（包括浮动和定位两种方法），然后讲解了在框里填充内容的相关代码知识，到这里我们的基础代码部分就完成了，在工作中遇到的代码问题80%基本可以通过这些知识来解决。进阶的内容部分介绍了如何用CSS3让页面产生动态，最后针对淘宝装修的特殊情况，介绍了widget相关组件的知识。这些知识其实在淘宝开放平台是公开免费的，只是很少有人会告诉你。
如果你以前接触过HTML和CSS，学习这本书的时候会格外轻松。如果你完全没有基础，建议一定要照着书的实例多动手实际操作，有助于你加深理解。另外在随书光盘中，每一章都配有一段视频，来帮助大家整理思路，刚接触代码的新手一定要看一下哦。
这是阿灰第一次通过书的形式给大家讲解这方面的知识，可能会出现很多纰漏和问题，大家可以通过新浪微博@淘大阿灰猿、微信公共平台ahuips或论坛http://bbs.ahuips.com来与阿灰沟通和反馈，非常感谢大家的支持。阿灰2014年11月第一章每个电商美工都应该知道的基础本章介绍了电商美工都应该掌握的基础知识，对于从影楼、广告公司等传统行业转到电商行业的这部分美工来说，了解这些基础知识会为后面学习代码知识打下一个坚实的基础。1.1基本常识每个美工都应该知道的
分辨率和尺寸
通常有人问你的屏幕分辨率是多少的时候，是指你的屏幕在水平和垂直方向是由多少像素点组成的。比如我的屏幕分辨率是1440×800，也就意味着我的屏幕水平方向上有1440个像素点，垂直方向上有800个像素点，如图1-1所示。图1-1
当我们在Photoshop软件中新建一个文档的时候，如图1-2所示，对于线下美工，宽度和高度一般会使用长度单位，如厘米、英寸，但是对于电子媒体，绝大多数情况会使用像素作为宽度和高度的单位。图1-2
除了宽度和高度外，这里也有一个分辨率，它其实不是宽度和高度的意思，而是dotsperinch（每英寸点数，简称DPI）的意思，也就是输出的像素密度。对于人眼来说，当像素密度为300DPI时，一般人眼就无法分辨图片中的单个像素点，也就是这个图片看起来会非常精致，印刷品的分辨率一般会选择300像素/英寸。
当宽和高的单位用的是长度单位时，这里的分辨率会影响最终导出图片的大小。如长和宽均为10英寸，分辨率是300像素/英寸时，图片的宽度和高度就会是10×300=3000像素。
但是当宽度和高度用的单位就是像素（px）时，分辨率为72或300对我们最终输出的图片大小实际上没有影响，文件也不会因为分辨率是300就变大，也不会因为分辨率是72就变小。对于电子媒体来说，分辨率其实不会影响最终图片的大小，感兴趣的同学可以测试一下。
表示颜色的方法
用于印刷设计一般我们会使用CMYK色彩模式，而在电子媒体上，我们一般要使用RGB色彩模式，如图1-3所示。图1-3
在本书的后面经常会在代码中使用颜色，比如为文字添加字体色，或为某些区域添加背景色。这时我们需要知道如何在代码中表示颜色，这里讲四种方法。
十六进制表示法
在Photoshop中用吸管吸取颜色时，可以直接得到颜色的16进制值，如图1-4所示。图1-4
但是在代码中使用16进制颜色值来表示颜色时，切记要在这个颜色代码前加#号，如图1-5所示。图1-5
RGB表示法
RGB是另外一种表示颜色的方法，如图1-6所示，我们可以看到R、G、B的三个数字框，R代表红色，G表示绿色，B表示蓝色，数字范围是0～255。图1-6
在用到颜色值的地方，我们可以用RGB(红，绿，蓝）来表示这个颜色，如图1-7所示。图1-7
RGBa表示法
RGBa 这种方法和RGB的方法几乎一样，只是在RGB的后面多加了一个从0到1的值，用来表示这个颜色的透明度。也就是这种表示方法是支持有透明颜色的。如RGBa (255,0,0,0.5)就表示50%透明的红色。
英文单词表示法
文件格式
很多工作了多年的美工在把作品从PSD格式转为其他格式的时候，习惯使用“文件”菜单中的“存储为”命令，如图1-8所示。图1-8
但是对于电商美工来说，图片将来是用在互联网上的，Photoshop软件有一个专门针对Web用途的优化导出功能，即“文件”菜单中的“存储为Web所用格式”命令，如图1-9所示。图1-9
这个命令生成的图片会针对网页目的的使用而做特别优化，它给予了我们更多的控制选项，如图1-10所示。图1-10
在图中，我们可以看到几个常用的文件格式，GIF、JPG、PNG-8和PNG-24，另外一种WBMP很少在网页中使用，所以这里不做详述。
GIF格式
GIF可以存储若干幅静止图像进而形成连续的动画，使之成为为数不多的支持2D动画的格式之一，且可以指定图像中的某一个颜色作为透明色，更方便了图片和设计的融合。GIF图像格式还支持渐显方式，也就是说，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分。但是GIF有个极大的缺点，它最多只支持256色。如图1-11所示红框处就是用来设置GIF渐显的选项。图1-11
JPEG格式
JPG/JPEG格式使用有损压缩方式去除冗余的图像和彩色数据，在获取极高的压缩率的同时能展现十分丰富生动的图像格式，大多数有丰富的细节和色彩的图片都可以用JPG格式。“品质”是可以设置压缩的参数，一般我们设置到70～80之间即可，如图1-12所示。图1-12
PNG-8/PNG-24格式
PNG它汲取了GIF和JPG二者的优点，可以像GIF一样透明，又有JPG的色彩数，PNG-8可以显示28种颜色，PNG-24可以显示224种颜色。而且PNG是一种无损压缩的图像格式，在保证图像的质量的同时，文件体积却也可以接受。对于PNG-24这种格式来说，还具有一个Alpha通道，用来保存透明信息，意味着PNG-24可以有半透明的效果。如图1-13所示是导出PNG格式的界面。注意它也可以实现交错下载。图1-13
简单地说，GIF支持透明度和动画，对于简单线条类的图片文件体积会比较小；JPEG可以压缩图片，文件较小；PNG支持透明度，也可以压缩图片而且是无损压缩。如果我们的图片格式不合适，文件的体积就会增大，客户在打开由几十个甚至上百个图片组成的页面时，就会导致加载速度变慢。在稍后的切片课程里，还会介绍如何为不同的切片设置不同的格式。
4.店铺各部分的尺寸
目前店铺的版本只有两个，基础版和专业版，如图1-14所示。图1-14
这两个版本的差别如图1-15所示。图1-15
但是天猫店的专业版和集市店的专业版在页面的宽度上有所差异，如下表所示。
5.代码与Dreamweaver
在互联网上看到的所有页面均是用代码构建的。当我们从Photoshop中另存我们的图片，并上传到宝贝描述中时，淘宝其实已经通过它的在线编辑器，为你自动编写了代码。如图1-16所示，是淘宝在线编辑器的正常模式和代（源）码模式。当你需要一些复杂的结构和效果时，淘宝的编辑器功能就不一定能满足你的需求，这时就需要用专业的工具来制作这些代码，然后再把这些代码添加到淘宝中，这也是为什么作为美工要懂一些代码的原因和本书的主要目的所在。编辑代码的工具建议大家使用Dreamweaver。图1-161.2切片
从字面上理解切片，就是把大的图片切成小片，这样我们就可以为不同的小切片加上不同的链接，同时由于浏览器可以同时加载图片不同部分的小片，会使整个页面的加载速度得到提升。另外当我们在用代码手工做布局的时候，也经常会需要图片中的一部分，这时也需要用切片把需要的部分单独切出来保存。
1.Photoshop部分的操作
我们通过一个简单的案例来演示如何在Photoshop中对图片进行切片操作，如图1-17所示。图1-17
STEP 01
分析结构、建立辅助线
我们的目的是对设计进行切片，以便稍后我们为不同的区域加上不同的链接，所以上图中三个图片和下面一排小图标肯定需要单独切出来，所以我们在Photoshop中通过拖动标尺建立了如图1-18所示的辅助线。图1-18
STEP 02
建立切片
在工具栏上选择“切片工具”，然后在状态栏上单击“基于参考线的切片”按钮，如图1-19所示。图1-19
STEP 03
合并多余切片
这时在画布上就多了很多和辅助线空间大小一致的切片，本来产品图应该是一个整体的，但是现在却被切成小块，所以需要合并这些被切碎的切片。我们使用“切片选择工具”，按住Shift键依次单击选中需要合并的切片，用鼠标右键单击选中的切片，在弹出的菜单中选择“组合切片”，如图1-20所示。图1-20
重复这个操作，直到所有切片均合并完成，如图1-21所示是合并完成后，并隐藏辅助线后的切片显示效果。图上每个切片左上角的蓝色图标表明了这个小块是一个切片。图1-21
STEP 04
添加链接
用“切片工具”在需要添加链接的切片上双击，在弹出的窗口中设置URL和目标，并单击“确定”按钮，重复这个操作即可为所有需要添加链接的切片部分添加链接。如图1-22所示，URL是指将来单击这个图片后，要访问的网址，目标是指是否在新窗口中打开这个URL。图1-22
STEP 05
设置切片格式
划分好切片后，我们需要把它们导出为图片或代码，这时要用到“文件”菜单中的“存储为Web所用格式”命令，快捷键是Ctrl+Shift+Alt+S，这时我们可以看到如图1-23所示的界面，如果你的文件宽高都比较大，默认100%的显示方式会不太方便，可以在窗口下方选择“符合视图大小”选项，这样可以自动缩小画布以显示所有的切片。图1-23
上方的三个产品图片为了显示更好的效果，我们需要把它们设置为品质为80的JPG格式（这个数值越大，图片的质量越好）。默认情况下只有第一个切片是被选中的，所以我们需要先选中这三个切片，再到右方的设置格式处去设置图片的格式，如图1-24所示。图1-24
其他切片，由于颜色数很少，也没有什么特别复杂的纹理，我们通过拖曳的方式把它们全部选中，并在右侧设置格式为“PNG-8”，如图1-25所示。图1-25
到这里我们已经为所有的切片设置了格式，关于切片文件的格式要灵活应用，根据不同的图片特点来选择不同的格式，最终目的是保证图片质量的同时，能尽量减少切片图片的大小。
STEP 06
保存切片和代码
设置好切片的格式后，单击“存储”按钮，这时会弹出如图1-26所示的对话框，我们在下面选择“HTML和图像”格式，HTML就是代码的意思，图像是指切成小片的图片。如果我们不需要代码，只需要切片图片的话，就要选择“仅限图像”。图1-26
在下方的“切片”选项里，我们选择“所有切片”，如图1-27所示，会把页面上的所有切片都保存为图片，如果选择“选中的切片”，则只会保存你选择的切片。
试读结束[说明：试读内容隐藏了图片]