淘宝开店：教你轻松学淘宝电商运营（十一）

云集课堂 06-18 112

前言：

目前朋友们对“htmlinput字体大小”大致比较注重，姐妹们都需要分析一些“htmlinput字体大小”的相关知识。那么小编也在网摘上网罗了一些关于“htmlinput字体大小””的相关资讯，希望姐妹们能喜欢，我们一起来学习一下吧！

动态页面，定位与特效齐飞

在装修店铺时，用系统模板制作的效果有限，如全屏轮播图、收缩分类、悬浮广告、倒计时、鼠标点击翻转和切换等效果不能直接使用模板生成，而是需要使用代码。涉及代码的装修听起来很高深，其实并不难，这就是本课程要讲的淘宝动态页面装修，淘宝动态页面能第一时间吸引买家眼球，提高点击率，带给顾客趣味性的购物体验。

初始动态页

也许有些人觉得“代码”遥不可及，但其实只要掌握了规律，就能够驾轻就熟。下面就来介绍与代码息息相关的装修知识。

“源代码”很简单

装修过淘宝店铺的人都使用过“自定义内容区”模块，这个模块是实现店铺多样化、特色化的关键，因为它是可以使用代码装修的。

在店铺装修后台，添加“自定义内容区”模块，选择并编辑“自定义内容区”模块，添加图片后在对话框中显示的是图片的效果，这是正常模式。

选中下方的“编辑源代码”复选框，进入“源代码模式”后，看到图片的显示效果为一串代码。也就是说实际后台中，代码才是最原始也是最初的组成部分。不仅如此，网页上的所有一切都是由代码组成的。

代码切片也不难

在自定义内容区添加图片后，只能为图片添加一个链接，也就是单击图片的任何位置，都只会跳转到一个页面。如何才能单击图中相应的宝贝，就跳转到相应的页面？这需要将整张图片切开，并为图中的不同宝贝区域添加不同的链接。也可以使用热点区域设置链接。

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>标签通过它设置该标签的外部样式。

定位神器——Division

Div简单而言就是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳文字、表格和图片等各种HTML元素。可以把<div>与</div>中的内容看作一个独立的对象，用于CSS的控制。

如何玩转Div标签

下面以简单的操作帮助认识Div标签。

1．插入Div标签

01 在Dreamweaver软件中新建一个文档，选择菜单“插入”|Div命令。

02 弹出“插入Div”对话框，单击“确定”按钮。

03 此时即可插入了一个Div标签。

04 将标签内的文字删除，重新输入文字，并将软件界面调小，此时会发现，框的大小不是固定的，而是随着内容和编辑器的大小改变的。

05 单击“拆分”按钮，在左侧代码中，将光标定位在<div后，按空格键，在提示内容中选择style选项。

06 双击并在提示内容中选择heigh选项。

07 输入高度值，以；结束，继续输入空格，设置宽度width，此时框的大小固定了。

2．超出隐藏

01 在Dreamweaver中插入Div标签，并设置大小为150像素×150像素。

02 在框中插入一张图片，框的大小没变，但显示的内容超出了框外。

03 在代码区中输入代码“overflow:hidden; ”，超出框的内容即被隐藏。

选择Div标签后将显示一个蓝色的框，没有选择时为虚线的框。

Overflow是超出的意思，样式值hidden是隐藏的意思，与hidden相反的样式值是visible，即“可见”，默认情况下为可见。代码里面的符号都为英文状态。

使用盒子模型轻松搞定

建立Div标签后，会出现一个框，这个框是可以添加内外边框的，添加边框后盒子的大小是多大呢？盒子里面的内容到盒子边框之间的距离为填充（padding），盒子本身有边框（border），而盒子的边框外和其他盒子之间，还有一个边界（margin）。在计算盒子大小时，需要将所有的大小都算进去，这就是盒子模型。盒子模型的宽度=左、右边界+左、右边框+左、右填充+内容宽7个值的和；盒子模型的高度=上、下边界+上、下边框+上、下填充+内容高。

在“CSS设计器”面板的属性栏中可以查看这些参数。

1．边界

在Dreamweaver中建立两个框，并为两个框设置不同的颜色背景，以便于查看。两个框连在一起，若想将它们分开，则需要为框添加边界，在代码中为第1个框添加10像素的下边界。

代码中的margin代表边界，表示这个框与其他框的间距，它有4个值，分别代表上、右、下、左（顺时针）4个方向的间距，值之间用空格隔开。如“margin:10px 15px 5px 25px; ”表示上、右、下、左4个方向的边界间距为10像素、15像素、5像素、25像素。

margin的值有两种简写方法，一种是当框的4个方向的间距都相同时，简写为“margin:15px; ”，表示4个方向的间距均为15像素。另一种是当框的上下间距相同、左右间距相同时，简写为“margin:15px10px; ”，表示框的上下间距为15像素，左右间距为10像素。

2．边框

一个盒子有其自有的边框，我们可以设置边框的粗细、线型和颜色等样式。代码的表示方法为“border；粗细线型颜色；”。其中，粗细用像素表示，如5px；线型有3种值：solid表示实线，dotted表示点画线，dashed表示虚线；颜色的表示方法有3种，分别为RGB、十六进制和英文单词。

边框有上、右、下、左4个值，分别写作border-top、border-right、border-bottom、border-left。在代码中具体的写法如“border-bottom:10px solid red; ”，表示设置下边框，粗细为10像素，线型为实线，颜色为红色。

而当其上下左右边框都相同时，则写作“border;10px solid red; ”。

3．填充

在Dreamweaver中新建一个框，并在框中输入文字，如图7-78所示。从图中可以看出文字紧贴着框，它们之间没有距离。在代码中输入一段代码，现在文字与框之间有间距了，文字与蓝色框之间的虚线就是设置的间距。

这个间距就是框的填充，即框中的内容与边框之间的距离。代码中的padding表示填充。与边界和边框相同，padding也有四个值，简写方法与边界写法相同。

设置个性化的背景

一个框可以设置其背景为纯色或图片。

1．纯色背景

01 插入Div后，在代码下方单击div标签。

02 在“CSS设计器”面板中选择“<内联样式>：div”，然后在下方的属性栏中单击“背景”按钮。

03 在background-color后单击，在展开的颜色拾取器中选择一种颜色。

04 选择颜色后，框的背景发生改变，代码也相应改变。

添加颜色背景后，单击删除图标可删除该属性。

2．图片背景

01 在background-image下方的url后粘贴图片地址。

02 为标签添加背景后，如果背景图片小于框，背景默认进行平铺，直至填满这个框为止。

03 单击background-repeat后的no-repeat按钮。

04 此时的背景不重铺，只显示单张图片效果。

05 当单击repeat-x按钮后，背景水平平铺。

06 单击repeat-y按钮后，背景垂直平铺。

在background-repeat后的第一个按钮就是repeat（平铺），也就是在水平和垂直方向同时平铺，不选择时也默认重铺。

定位与布局高级应用

布局与定位是使用代码实现排版的必学知识。

搞定复杂的浮动布局

了解了框与盒子模型的知识后，就可以学习如何将设定了宽高的框组合排列，从而实现布局。浮动布局是布局的方法之一，本节将具体介绍。

淘宝中的商品展示多数属于简单的N列布局，这类布局的特点是简单整齐。

下面介绍如何在Dreamweaver软件中布局。在布局前，应确定图是放置在哪个模块中的，以计算实际的大小。以常用的宽度为950像素的模块为例，制作一个一行四列、高度为300像素的商品展示图。

01 总宽度为950像素，确定每张图片之间的间隙为10像素，使用公式{总宽-（列数-1）×间隙宽}÷列数}计算，得出列宽为230像素。

02 在Dreamweaver软件中新建一个HTML文件，选择菜单“插入”| Div命令。

03 弹出“插入Div”对话框，单击“确定”按钮。

04 在代码中选中标签内的文字，按Delete键删除。

05 在“选择器”中选择“<内联样式>:div”，然后在“属性”面板中设置width、height及margin-ringht参数。（如果在右侧“选择器”中无法选择“<内联样式>:div”，则在左侧<div>的v字母后输入空格后再在出现的下拉列表中双击style。）

06 选择Div标签中的所有内容并复制，依次换行后粘贴，粘贴3次，并将最后一个标签内的右边界代码（margin-right:10px）删除。

07 从右侧的设计窗口中可以看到此时的框是垂直排列的，并没有达到我们需要水平排列的目的。这是因为Div做的框默认以block（块）的显示方式存在，它会占用整行的宽度，这时就需要为这些框加上浮动样式。在“CSS设计器”面板中单击fl oat后的Left按钮。

由于最后一个框右侧不需要间隙，因此将右边界代码删除。

Float表示浮动，它的值有3个，left（左）、right（右）、none（无）。当float的值为none时，它的显示方式就是block，会占用一整行的空间；当值为left和right时，框会向左或向右漂浮在页面中，不再占用整行的空间。

08 在代码中为4个框均设置float样式，此时它们会按顺序向左浮动。

09 切换至设计视图，此时4个框已经水平排列。

10 在框中添加图片。将图片制作完成后上传到淘宝空间，在淘宝空间中选择图片，单击“复制代码”按钮复制代码。

11 在Dreamweaver中的代码窗口中，将光标定位在<div>与</div>之间，依次粘贴代码。

12 分别选择图片，在“属性”画板中设置链接。

13 链接全部设置好后，在代码视图中将<body>与</body>之间的代码选中，按Ctrl+C组合键复制。

14 进入淘宝装修后台，单击“页面装修”按钮，将左侧的“自定义区”模块拖入右侧相应的位置。

15 添加模块后，单击右上角的“编辑”按钮，在打开的对话框中选中“不显示”单选按钮，然后勾选“编辑源代码”复选框，将前面复制的代码粘贴到文本框中。

16 单击“确定”按钮，单击页面右上角的“预览”按钮，预览装修效果。

浮动布局有一个特点，就是当右侧空间不足时，它会自动换行，继续进行浮动，这样就实现了N行N列的布局了。

使用浮动布局时，左浮动和右浮动的差别在于浮动的方向，当在代码中将左浮动全部替换成右浮动后。

内嵌布局的套路

N列布局十分简单，当我们需要更复杂一点的布局时则需要用到嵌套布局。布局使用直接浮动无法实现。从图中分析得出，可以将整个大框拆分成3个浮动的框，然后将第1个框拆分为2个小框。

下面介绍具体操作。

01 在Dreamweaver软件中建立3个水平排列的浮动框（width:220px, height:400px）。

02 在代码中选择第1个Div标签，在中间再插入两个Div标签。

03 在设计视图中查看框的布局效果。

04 同理可以设计出很多复杂的布局，其前提是算好尺寸大小。

插入框的高度参数=（总高-10px）÷2，即195px。其中10px为框的间距。

相对定位与绝对定位

1．相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，通过设置垂直或水平位置，可以让这个元素相对于它的原始位置进行移动。

可以在“CSS设计器”面板中添加相对定位的值。从图中可以看出相对定位有4个值：top、right、bottom、left。

2．绝对定位

绝对定位与相对定位的不同之处在于，它们的基准不同。相对定位的基准为自己的原有位置，而绝对定位是以浏览器左上角为基准。

在“CSS设计器”面板中设置绝对定位，并设置偏移值为：左50px，顶50px，如图7-115所示。在设计视图中查看效果。按F12键在浏览器中查看，会发现框以浏览器左上角为基准，向下和向右移动了50像素。由此得知，绝对定位的基准为浏览器的左上角。

使用绝对定位后嵌套的布局也会发生改变。

3．为框添加绝对定位后将脱离其原来的位置

在Dreamweaver中插入两个嵌套的框。为中间的小框添加绝对定位，偏移值为顶部350像素、左边350像素。

此时在设计窗口中可以看到嵌套的小框脱离了大框，因为它是以浏览器左上角为基准的。

4．当上级框添加绝对或相对定位后，下级框以上级框的位置为基准点

在代码中为外框添加绝对定位，此时的效果。当外框向下和向右偏移50像素后，加上其本身的大小300像素，小框偏移300像素应该与外框相交才对。此时小框在外框右下角，由此可以得知，当上级框添加相对定位后，下级框的绝对定位将以上级框的左上角为基准进行偏移。

也可以试着将大框的绝对定位改为相对定位，此时下级框的绝对定位仍然以上级框的左上角为基准进行偏移。当多个绝对定位的框重叠时需要考虑到一个问题，框的叠加顺序是怎样的？在前面的实例中会发现，后加到代码中的框会叠加在前面的小框上。但是，如果要改变这个叠加顺序有什么好的方法吗？有，可以在框的代码中添加一个样式来改变，即在“CSS设计器”中设置z-index（堆积顺序）的值。设置后数值大的框会叠加在数值小的框上面。

5．使用淘宝样式突破限制

绝对定位是最灵活的布局方法，但是在淘宝装修中使用绝对定位的样式（position:absolute）会被官方屏蔽。为什么很多淘宝店铺中仍然可以进行绝对定位的布局呢？这是因为他们借用了淘宝的样式，将代码修改后实现的。

● footer-more-trigger

在淘宝集市店可以直接调用footer-more-trigger。当我们给一个框添加绝对定位时正常的写法为：

<divstyle="position:absolute; ……"

为了使绝对定位在淘宝店铺中生效，可以写成：<divclass="footer-more-trigger"style="…"

● sn-simple-logo

在天猫店铺需要调用sn-simple-logo，将上面代码中的footer-more-trigger改为sn-simple-logo即可适用于天猫店铺，也可以将两个类名均写上，这样该代码就可以兼容两种店铺。写法如下：

<divclass="footer-more-triggersn-simple-

logo"style="…"

在调用上面的类名后还需要将不用的样式覆盖，以避免影响我们自己的样式，具体的操作如下。

01 在使用绝对定位的框上，删除position:absolute;。

02 为这个框添加调用的淘宝样式class=“footer-more-trigger sn-simple-logo”。

03 在这个框的行内样式中，覆盖那些由于借用淘宝官方样式而被附加上的样式style=“margin:0;padding:0; border:0; left:***px; top:***px; width:***px; height:***px; ”.

04 将style中的***参数根据框的大小和定位修改为具体的值。

在详情页中不可以使用这里调用样式的方法。

突破950像素极限，宽度延展

淘宝集市店铺的模块中最宽的为950像素，所以在做超出官方宽度的全屏海报、通栏分类时就需要购买收费模板，但是这里讲的绝对定位可以突破950像素宽度的限制。

1．如何突破

在淘宝集市专业版旺铺中，主要内容区为嵌套的框，共9个层级，而添加的“自定义内容”代码会放置在1这个层级中，如图7-121所示。在“自定义内容”外面嵌套了9个框。要想让“自定义内容”突破950像素取决于1～9这9个框的样式，如果框1～9中有一个框有相对或绝对定位，且设置了超出隐藏的样式，那么这个框就达到了最宽，其以下的所有框将以该框为基准来定位，也就是说其下级框都不可能超出950像素的宽度。

在框1～9中，框7具有相对定位的样式，并设置了框为100%和超出隐藏的样式。也就是浏览器有多大，框就有多宽。所以“自定义内容区”模块中的代码使用绝对定位的时候，是以框7为基准进行定位的。由于框7的宽度为100%屏幕宽，所以可以实现突破950像素宽度的要求。

淘宝专业版旺铺的不同官方模板中，首页的结构都可以突破950像素宽度，但自定义页面中框2就具有相对定位的样式，并设置了超出隐藏，且宽度为950像素，所以自定义内容无法突破950像素宽。

2．突破950像素实现全屏海报

知道了突破950像素的原理后就可以实现自定义海报的全屏效果了。为了方便实时查看，本实例的代码在淘宝装修后台的“自定义内容区”模块中编写。

01 准备一张制作好的海报图，宽度为1920px，将图片上传到图片空间。

02 进入店铺装修后台，添加一个“自定义内容区”模块，进入“编辑”界面，单击“插入图片空间图片”按钮，在展开的界面中选择海报图。

03 单击下方的“插入”按钮，然后单击“确定”按钮。

04 预览插入海报图的效果。

05 再次进入“自定义内容区”的编辑界面，选中“编辑源代码”单选按钮，进入源码编辑模式。

06 在图片外添加一个框，将图片套起来，并为了使其他模块正常显示，设置框的高度与图片的高度相同。

07 下面对内容进行绝对定位，在外框里加个框，设置为绝对定位。

08 发现只要将图片的中点向左偏移一半就可以实现图片的完美居中了。