动态页面，定位与特效齐飞
在装修店铺时，用系统模板制作的效果有限，如全屏轮播图、收缩分类、悬浮广告、倒计时、鼠标点击翻转和切换等效果不能直接使用模板生成，而是需要使用代码。涉及代码的装修听起来很高深，其实并不难，这就是本课程要讲的淘宝动态页面装修，淘宝动态页面能第一时间吸引买家眼球，提高点击率，带给顾客趣味性的购物体验。
初始动态页
也许有些人觉得“代码”遥不可及，但其实只要掌握了规律，就能够驾轻就熟。下面就来介绍与代码息息相关的装修知识。
“源代码”很简单
装修过淘宝店铺的人都使用过“自定义内容区”模块，这个模块是实现店铺多样化、特色化的关键，因为它是可以使用代码装修的。
在店铺装修后台，添加“自定义内容区”模块，选择并编辑“自定义内容区”模块，添加图片后在对话框中显示的是图片的效果，这是正常模式。
选中下方的“编辑源代码”复选框，进入“源代码模式”后，看到图片的显示效果为一串代码。也就是说实际后台中，代码才是最原始也是最初的组成部分。不仅如此，网页上的所有一切都是由代码组成的。
代码切片也不难
在自定义内容区添加图片后，只能为图片添加一个链接，也就是单击图片的任何位置，都只会跳转到一个页面。如何才能单击图中相应的宝贝，就跳转到相应的页面？这需要将整张图片切开，并为图中的不同宝贝区域添加不同的链接。也可以使用热点区域设置链接。
01 启动Photoshop软件，在中间空白区域双击，在弹出的对话框中选择文件夹中的图片，打开图片。
02 按Ctrl R组合键打开标尺，从标尺上拖出几条参考线，用参考线分割宝贝。
03 在选项栏中单击“基于参考线的切片”按钮。
04 此时图像被切为多个小块。
05 在工具组中选择“切片选择工具”。
06 按住Shift键，选择不需要切开的两个切片，右击，在弹出的快捷菜单中选择“组合切片”命令。
07 使用同样的方法，组合其他切片，按Ctrl ；组合键隐藏参考线。
08 选择切片，右击，在弹出的快捷菜单中选择“编辑切片选项”命令。
09 在弹出的对话框中修改名称，并将宝贝的链接粘贴到URL文本框中，单击“确定”按钮。
10 使用同样的方法，修改所有切片的名称，并修改宝贝所在切片的URL。
11 选择菜单“文件”|“存储为Web所用格式”命令。
12 弹出对话框，选择优化的格式为JPEG，并设置品质，单击“存储”按钮。
13 弹出对话框，设置存储的位置和名称，并选择格式为“HTML和图像”。
14 单击“保存”按钮，保存后将images文件夹中的所有图片上传到图片空间。
15 选择“切片与代码．HTML”文件，右击，在弹出的快捷菜单中选择“打开方式”|Adobe Dreamweaver CC命令。
16 使用Dreamweaver软件打开文件。
17 在图片空间中选择图片，单击下方的“复制链接”按钮。
18 在Dreamweaver软件中选择对应的图片，在“属性”面板中选择Src中的内容，按Ctrl V组合键粘贴链接。
19 使用同样的方法，将所有图片的Src替换成网络地址（即图片空间的链接地址）。
20 在代码区域选择<body>与</body>之间的代码，右击，在弹出的快捷菜单中选择“拷贝”命令。
21 进入装修后台，新增“自定义内容区”模块，单击模块右上角的“编辑”按钮，打开对话框，勾选“编辑源代码”复选框，然后粘贴代码。
22 单击“确定”按钮，关闭对话框。单击装修页面右上角的“预览”按钮，进入预览页面，单击不同的宝贝，测试是否跳转到相应的宝贝页面。
装修根本——Dreamweaver
编写代码的软件有很多，Dreamweaver是最常见的，下面介绍Dreamweaver的基本操作。
图文插入有一套
文字与图片的插入是最基本的操作。
1．文字的插入
01 启动Dreamweaver软件，在“新建”栏下选择HTML选项，
02 打开编辑界面，在右侧输入文字。
03 选中文字，在“属性”面板中单击CSS按钮，即可修改字体、大小、颜色等属性。
2．图片的插入
01 新建HTML文档，单击“设计”按钮，进入“设计”视图。
02 选择菜单“插入”|“图像”|“图像”命令。
03 在弹出的对话框中选择图片，单击“确定”按钮，即可插入计算机中的图片。或者，在对话框的文件名中粘贴淘宝图片空间的图片链接地址。
04 单击“确定”按钮即可插入网络地址中的图片。
05 选择图片后，在“属性”面板中可以设置参数，包括最常设置的链接和目标等。
若图片不显示，将文档保存后重新打开即可。
＊ 链接：在“链接”文本框中可以设置单击图片后跳转的网址。
＊ 目标：在“目标”下拉列表中有6个选项，最常用的为“_bank”，即在新窗口中打开这个链接。
热点链接交相映
对于需要为图中的小块区域设置链接的情况，切片过于复杂，可以使用热点设置。
01 打开Dreamweaver软件，插入文件夹中的素材图片，在“属性”面板中单击矩形热点工具。
02 在图像上单击并拖动鼠标，创建热点区域。
除了矩形热点工具外，还有圆形热点工具和多边形热点工具，可以根据需要创建热点的区域形状来选择不同的热点工具。
03 弹出对话框，单击“确定”按钮。
04 使用同样的方法，创建其他热点。在“属性”面板中单击指针热点工具。
05 调整热点的位置与大小。
06 选择一个热点，在“属性”面板中设置链接与目标，并在地图Map后添加任意数字。
目标为new表示单击热点后在新的页面中打开链接。
07 单击“代码”按钮，进入代码视图，选择<body>与</body>之间的代码，右击，在弹出的快捷菜单中选择“拷贝”命令。进入装修页面后，将代码粘贴到“自定义内容区”的源代码中，单击“确定”按钮。
08 单击页面右上角的“预览”按钮，预览装修效果，并测试链接是否可用。
嵌套功能很重要
表格的嵌套是使用表格排版的关键。
1．插入表格
表格由行、列和单元格三部分组成。表格横向称为行，纵向称为列，行列交汇部分称为单元格，单元格是输入信息的地方。
01 新建HTML文档，选择菜单“插入”|“表格”命令。
02 在打开的对话框中设置行数、列数以及表格宽度等参数。
03 单击“确定”按钮，即可插入表格。
选择与编辑表格
拖动鼠标，可以选择多个相连的单元格。按住Ctrl键依次单击表格中的单元格，可以选中不相连的单元格。编辑表格一般可以通过右键菜单完成。选中一个或多个单元格，右击，在弹出的快捷菜单中选择“表格”命令，在子菜单中可以看到合并和拆分等多种编辑选项。当需要修改表格的行、列和边距等属性时，可以单击表格下的三角按钮，选中表格，在“属性”面板中直接修改。
3．表格嵌套
表格嵌套是指在单元格内再次插入表格。
01 在文档中插入一个1行2列的表格。
02 将光标定位在第2列。
03 再次插入一个2行1列的表格。
04 此时嵌套的表格效果如图。
在实际应用中，边框粗细设置为0。表格嵌套后，在表格内插入图片。
CSS到底是什么
CSS样式是网页代码中非常重要的组成部分，分为行内样式和外部样式。
1．行内样式
下面以一个实例讲解什么是行内样式。
01 将光标定位在右侧的文字中，然后在状态栏中单击<p>标签。
02 选中标签后，单击“属性”面板中的CSS按钮。
03 在“属性”面板中设置字体、大小、颜色、对齐、粗细等参数。
04 设置完成后，查看代码。红框标出的为新增的代码，这些代码就是样式。
由于这些样式与<p>标签在同一行内，所以称之为行内样式，或<p>标签的样式属性。另外，单击“属性”面板中的“CSS面板”按钮，在展开的面板中可以设置更多样式。
2．外部样式
01 在Dreamweaver右侧的“CSS设计器”面板中，单击“源”右侧的“ ”按钮，在展开的下拉列表中选择“在页面中定义”选项。
02 选择“全局”选项，然后单击“选择器”右侧的“ ”按钮。
03 在添加选择器后输入名称，这里输入“.style01”。
04 添加样式后，可以在“属性”面板中对样式进行设置。
05 在“属性”面板中单击“文本”按钮，设置样式，此时的代码如图。
若“CSS设计器”面板未显示，可按Shift F11组合键调出该面板。
名称可以随意输入，但需要以字母开头，且不能有特殊符号，名称前需要添加英文的“.”号。
从上面的代码看出，新增的样式和<p>标签不在同一行，这就叫作外部样式。
建好样式后，当需要在标签上添加样式时，只需要调用该样式即可。
06 选中<p>标签，右击，在弹出的快捷菜单中选择“设置类”命令，在展开的子菜单中选择需要调用的类。
07 代码中<p>标签内多了一个属性值，<p>标签通过它设置该标签的外部样式。
