《电子商务网站建设与网页设计（微课版）》课件全套 项目1-8 构建电子商务网站 -电子商务网站建设案例 搭建家具商城网站

项目一构建电子商务

网站电子商务网站建设与网页设计

（微课版）1电子商务网站设计基础知识2电子商务网站结构设计3电子商务网站色彩搭配目录CONTENTS4课堂练习——

使用HTML5制作简单页面5课堂练习——

使用Dreamweaver创建站点当今，网上购物已经成为人们生活中一种重要的消费渠道，电子商务网站中海量的商品信息和便捷的购物方式吸引着越来越多的消费者。那么，面对众多的电子商务网站，设计者是如何通过页面设计和布局吸引消费者注意力的？本任务将介绍电子商务网站设计基础知识。任务一电子商务网站设计基础知识一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。京东首页一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。网站Logo一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。导航栏位于页面左侧一、初识电子商务网站电子商务网站的定义电子商务网站是基于浏览器/服务器应用方式，买卖双方互不谋面地进行各种商贸活动，实现消费者的网上购物、商户之间的网上交易和在线电子支付，以及各种商务活动、交易活动、金融活动和相关的综合服务活动的一种商业运营模式。电子商务网站的经营模式随着其应用领域的不断扩大和信息服务方式的不断创新而层出不穷，主要分为B2B、B2C、C2C、O2O、F2C等，淘宝网、天猫、京东等都是典型的电子商务网站，企业和消费者在网站上即可进行商品交易。网页与网页设计网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网页是网站中的一“页”。网页设计（WebDesign）是根据企业希望向浏览者传递的信息（如产品、服务、理念、文化等）进行网站功能策划后，进行的页面设计美化工作。网页设计常用的工具软件有Dreamweaver、Photoshop、Animate、CorelDRAW、Illustrator等。网页构成元素文本、图像、动画、超链接等是构成网页的基本元素。除此之外，网页的构成元素还包括网站Logo、导航栏、表格、框架、表单和横幅广告等，以及版尾或版权块、字幕、悬停按钮、时间戳、计算器、音频、视频和JavaApplet等元素。横幅广告二、电子商务网站设计准则1明确网站建设目的和用户需求2总体设计主题鲜明3设计人性化的交互界面4网页形式与内容相统一5准确无误的链接6网站信息的时效性7合理利用多媒体功能8努力提高网站的性能对于电子商务网站而言，网站流量在很大程度上取决于网站的结构设计。合理的网站结构设计有利于企业商务诉求的表达。不同类型的电子商务网站，其结构设计在内容呈现、版面处理等方面会有所不同。本任务将学习如何设计电子商务网站结构。任务二电子商务网站结构设计一、网站的物理结构网站的物理结构指的是网站目录及包含的文件所存储的真实位置表现出来的结构。物理结构一般包含两种不同的表现形式：扁平式结构和树形结构。扁平式结构网站将所有网页都存放在网站根目录下，这种结构就是扁平式结构。扁平式结构一般适用于只有少量页面的微型、小型网站。扁平式结构树形结构树形结构就是在网站根目录下还分别有几个分类文件夹，页面放在这几个分类文件夹中，分类文件夹中也可以有子分类文件夹。这种结构适合内容类别多、内容量大的网站。树形结构二、网站的逻辑结构网站的逻辑结构（也称链接结构）主要是指由网页内部链接所形成的逻辑结构。在网站的逻辑结构中，通常采用“链接深度”描述页面之间的逻辑关系。链接深度是指从源页面到达目标页面所经过的路径数量。与网站的物理结构类似，网站的逻辑结构同样可以分为扁平式逻辑结构和树形逻辑结构两种。扁平式逻辑结构扁平式逻辑结构的网站实际上就是网站中任意两个页面之间都可以相互链接，也就是说，网站中任意一个页面都包含其他所有页面的链接，页面之间的链接深度都是1。一般情况下，很少有网站单纯采用扁平式逻辑结构作为整站结构。树形逻辑结构树形逻辑结构是指使用分类、频道等页面，对同类属性的页面进行链接地址组织的网站结构。在树形逻辑结构网站中，链接深度大多大于1。三、网站的构成网站首页网站首页是一个网站的入口网页，作用是引导用户浏览网站其他部分的内容。首页中可以有网站的简介、业务的分类等，也可以根据网站的类型进行更深层次的划分。通常情况下，网站会将最想展示的内容放置在首页中。要根据网站的不同类型，设置好网站的主题。网站内页相较于首页的结构设置，内页的结构设置没有首页那么重要，但也有着重要的作用。无论哪种类型的网站，其中的内容都起着重要的作用。根据用户需求的不同，内页会有风格各异的设置，但都要遵循一点，那就是内容制胜。内页具体的结构设置需要根据实际情况具体分析，但必须明确内容的关键性。网站是一个整体，网页是一个个体，一个网站是由很多网页构建而成的。一般来说，网站至少有两种页面，即首页和内页。四、网页的空间结构网页顶部一般在左上角位置放置网站Logo，网页的顶部留有一行字的位置，以添加网站的关键字；在Logo中添加ALT标签（网站上图片的文字提示），可以提高网站的关键字密度，而且对网站的排名也很有好处；登录条、页面横幅广告、导航栏等都可以放在顶部。当当网站首页的顶部设计四、网页的空间结构网页主体企业信息、产品介绍、业务流程等一系列想呈现给用户的内容都在这个区域。一般可以把网页主体分为2～3个竖列，包括侧边栏、栏目等；在构建网站时，可以选择一个新闻板块放置在网站中间的左上角；图片信息也要添加ALT标签。华为商城网站首页的主体设计四、网页的空间结构网页底部网页底部大多用于放置友情链接、网站版权信息、使用协议等，也可以放置一些导航链接。在网站版权信息中可以添加一些关键字并且加粗、加链接。淘宝网站首页的底部设计五、网页的布局结构“国”字形结构布局是电子商务网站中最常见的一种布局类型，即最上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底。“国”字形结构布局“国”字形结构布局“厂”字形结构布局与“国”字形结构布局只有形式上的区别，它去掉了“国”字形结构布局中最右侧部分，为主要内容区释放出更多空间。这种布局最上面是网站的标题及横幅广告，接下来左侧是较窄的一列信息或链接等，右侧是很宽的内容区。“厂”字形结构布局“回”字形结构布局是“国”字形结构布局的一种变形，即在“国”字形结构布局的下方增加了一个横向通栏。“回”字形结构布局五、网页的布局结构“厂”字形结构布局“国”字形结构布局是电子商务网站中最常见的一种布局类型，即最上面是网站的标题及横幅广告，接下来是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底。“国”字形结构布局“厂”字形结构布局与“国”字形结构布局只有形式上的区别，它去掉了“国”字形结构布局中最右侧部分，为主要内容区释放出更多空间。这种布局最上面是网站的标题及横幅广告，接下来左侧是较窄的一列信息或链接等，右侧是很宽的内容区。“厂”字形结构布局“回”字形结构布局是“国”字形结构布局的一种变形，即在“国”字形结构布局的下方增加了一个横向通栏。“回”字形结构布局五、网页的布局结构自由式结构布局的随意性特别大，它改变了传统的以图文为主的表现形式，将图片、动画或视频作为主体内容，导航栏、文字说明等放在不太显眼的位置。通常情况下，化妆品类、时装类、科技类等网站会采用这种结构布局。自由式结构布局常见的框架型结构布局主要分为左右框架型结构布局、上下框架型结构布局和综合框架型结构布局。这种布局目前很少被专业设计人员使用，不过在一些大型论坛上比较受青睐，有些企业网站也有应用。框架型结构布局上下框架型结构布局五、网页的布局结构常见的框架型结构布局主要分为左右框架型结构布局、上下框架型结构布局和综合框架型结构布局。这种布局目前很少被专业设计人员使用，不过在一些大型论坛上比较受青睐，有些企业网站也有应用。框架型结构布局自由式结构布局的随意性特别大，它改变了传统的以图文为主的表现形式，将图片、动画或视频作为主体内容，导航栏、文字说明等放在不太显眼的位置。通常情况下，化妆品类、时装类、科技类等网站会采用这种结构布局。自由式结构布局自由式结构布局浏览网站时，我们通常会先被网页中的色彩所吸引，然后才会根据页面布局对页面的主次进行下一步了解。在电子商务网站设计中，色彩的搭配是网页设计过程中必须把握好的重要元素。本任务将学习电子商务网站的色彩搭配技巧。任务三电子商务网站色彩搭配一、色彩基础知识人的眼睛所能感觉的色彩一般可以分为两大类：第一类为无彩色，指白、黑和灰调和形成的各种深浅不同的灰色。第二类为彩色，指不同明度和纯度的红、橙、黄、绿、青、蓝、紫等颜色。色彩的分类色彩有3个属性，即色相、饱和度、明度，而色彩的个性取决于这3个方面。色相：指能够比较确切地表示某种颜色色别的名称，也是各种颜色之间的区别。饱和度：指色彩的鲜艳程度，也称色彩的纯度。明度：指色彩的明亮度，明度的高低要根据其接近白色或灰色的程度而定。色彩的属性色相环一、色彩基础知识人的眼睛所能感觉的色彩一般可以分为两大类：第一类为无彩色，指白、黑和灰调和形成的各种深浅不同的灰色。第二类为彩色，指不同明度和纯度的红、橙、黄、绿、青、蓝、紫等颜色。色彩的分类色彩有3个属性，即色相、饱和度、明度，而色彩的个性取决于这3个方面。色相：指能够比较确切地表示某种颜色色别的名称，也是各种颜色之间的区别。饱和度：指色彩的鲜艳程度，也称色彩的纯度。明度：指色彩的明亮度，明度的高低要根据其接近白色或灰色的程度而定。色彩的属性明度推移二、确定网站的主色调暖色调暖色调是由太阳颜色衍生出来的颜色，包括红紫、红、红橙、橙和黄橙等，象征太阳和火焰，给人以热情、温暖的感觉。冷色调蓝色、绿色、紫色都属于冷色调，给人以宁静、清凉、庄重等感觉。蓝色是冷色调中典型的代表，是网站设计中用得最多的颜色之一。使用暖色调配色的网页使用冷色调配色的网页三、网页的色彩搭配技巧同种色配色：指首先选定一种色彩，然后在保证色相大致不变的前提下，通过改变色彩的明度和饱和度完成配色。对比色配色：对比色是指在色相环上相距120°～180°的两种颜色，距离越远，对比越强。邻近色配色：邻近色是指在色相环上相距60°～90°的两种颜色。彩色配色黑、白、灰是万能色，黑底白字对比强烈，简洁明了，可以跟任意一种色彩搭配，传达出一种经典、永恒的美感。无彩色配色使用同种色配色的网页使用对比色配色的网页三、网页的色彩搭配技巧同种色配色：指首先选定一种色彩，然后在保证色相大致不变的前提下，通过改变色彩的明度和饱和度完成配色。对比色配色：对比色是指在色相环上相距120°～180°的两种颜色，距离越远，对比越强。邻近色配色：邻近色是指在色相环上相距60°～90°的两种颜色。彩色配色黑、白、灰是万能色，黑底白字对比强烈，简洁明了，可以跟任意一种色彩搭配，传达出一种经典、永恒的美感。无彩色配色使用邻近色配色的网页使用无彩色配色的网页HTML是一种简单的、由不同元素组成的标记语言，是一种应用非常广泛的网页格式，也是被用来显示Web页面的语言之一。HTML通过标记（Tag）式的指令，将文本、图形、动画、声音、表格、超链接等显示出来。本任务将详细介绍HTML5的基本结构和常用标签。任务四课堂练习——使用HTML5制作简单页面一、初识HTML5HTML主要负责将网页内容进行格式化，使内容更具逻辑性，它通过标记符标记要显示网页中的各个部分。浏览器在阅读网页文件时，根据不同标记符解释和显示其标记的内容。HTML是标记语言，不是编程语言，只有标签和属性，是非常容易理解的语言。使用HTML不需要复杂的语法，基本上只有标签的名字需要记下来。HTML5是HTML第5次重大修改的结果，由万维网联盟（WorldWideWebConsortium，W3C）完成标准制定。与传统的技术相比，HTML5具有良好的兼容性和跨平台性能，语法特征更加明显，并且引入了新的HTML元素，我们在网页中使用这些元素可以更加便捷地处理多媒体内容。二、HTML5基本结构三、HTML5常用标签文本标签主要用于对网页中的文本元素进行修饰、排版，如设置文本的大小、文本的字体等，从而使网页内容更加丰富。文本标签是写在<body>和</body>标签内部的，其语法格式如下：<body><h2>这里将显示为标题2</h2><i>这里将显示为斜体文本</i></body>文本标签标签功能<h1>和</h1>～<h6>和</h6>定义HTML标题，其中<h1>代表1级标题，级别越高，字号越大<p>和</p>定义一个段落，是HTML基本标签之一<br>和</br>定义一个简单的换行符<b>和</b>定义粗体文本<i>和</i>定义斜体文本<strong>和</strong>定义需要加粗的文字，用于强调<del>和</del>定义文档中已删除的文本<ins>和</ins>定义已经被插入文档中的文本常用的文本标签三、HTML5常用标签<img>图像标签定义HTML页面中的图像。<img>是单标签，没有结束标签。图像可以美化网页，Web中常用的有JPG、GIF和PNG这3种图像格式。使用<img>标签在网页中加入图像的语法格式如下：<img

src="image/sucai.jpg"width="500"height="300"alt=""/>图像标签属性功能alt规定图像的替代文本crossorigin设置图像的跨域height定义图像的高度src规定显示图像的URLwidth定义图像的宽度<img>标签的常用属性三、HTML5常用标签表单标签主要用于收集用户的相关信息，如注册、登录、留言、评论等操作中填写的数据，然后将数据提交给服务器。一个表单由表单标签、表单域和表单按钮3个部分组成。<form>标签定义一个表单域，它是一个容器标签，其他表单标签需要放在<form></form>之间，其语法格式如下：<formaction=""method="get"><inputname=""type="text"size="15"/><inputname=""type="submit"value="提交"/></form>表单标签属性功能accept-charset规定服务器可处理的表单数据字符集autocomplete规定是否启用表单的自动完成功能action规定当提交表单时向何处发送表单数据name规定表单的名称method规定用于发送表单数据的HTTP（HypertextTransferProtocol，超文本传输协议）方法enctype规定在发送表单数据之前如何对其进行编码target规定在何处打开actionURL<form>标签的常用属性三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签标签功能<ul>和</ul>定义一个无序列表<ol>和</ol>定义一个有序列表<li>和</li>定义一个列表项<dl>和</dl>定义一个定义列表<dt>和</dt>定义一个定义列表中的项目<dd>和</dd>定义一个定义列表中项目的描述<menu>和</menu>定义菜单列表<command>和</command>定义用户可能调用的命令（如单选按钮、复选框或按钮）常用的列表标签三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的无序列表语法格式和页面效果三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的有序列表语法格式和页面效果三、HTML5常用标签列表标签可以将网页中相关的信息进行排序，使其结构化和条理化，并以列表的样式显示出来。根据使用情景不同，列表标签可以分为无序列表标签、有序列表标签和自定义列表标签。列表标签建立的自定义列表语法格式和页面效果三、HTML5常用标签<table>标签定义HTML表格。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。更复杂的HTML表格可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>及<tbody>等标签。表格标签标签功能<table>和</table>定义一个表格<caption>和</caption>定义表格标题<th>和</th>定义表格中的表头<tr>和</tr>定义表格中的行<td>和</td>定义表格中的单元格<thead>和</thead>定义表格中的表头内容<tbody>和</tbody>定义表格中的主体内容常用的表格标签三、HTML5常用标签<table>标签定义HTML表格。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。更复杂的HTML表格可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>及<tbody>等标签。表格标签建立的表格语法格式和页面效果三、HTML5常用标签<a>标签定义超链接，是网页中最为常用的标签之一，用于从一个页面链接到另一个页面。<a>标签最重要的属性是href

属性，它指定链接的目标。超链接一般设置在文本或图像上，单击设置了超链接的文本或图像，可以跳转到其链接的页面，其语法格式如下：<ahref="">欢迎访问本商城!</a>链接标签属性功能href规定链接的目标URLdownload指定下载链接rel规定当前文档与目标URL之间的关系。仅在href属性存在时使用type规定目标URL的MIME（MultipurposeInternetMailExtensions，多用途互联网邮件扩展）类型。仅在href属性存在时使用<a>标签的常用属性四、制作滚动图片链接网页在记事本中输入HTML代码，可以制作出多种多样的页面效果。下面将使用前面介绍的HTML5基本结构、文本标签和图像标签等相关知识，制作一个滚动图片链接的网页，具体操作方法如下。在设计网页之前，要创建站点。站点其实就是一个文件夹，其中包含网站中所有用到的文件。创建站点的目的是利用站点窗口对站点文件进行管理，尽可能地减少错误的出现。例如，用到的图片会存入网页所在的站点中，并且在网页中自动使用相对路径，以避免路径出错或者链接出错。Dreamweaver是一款简便易用的创建与管理站点的工具，不仅可以制作精美的网页，还可以创建完整的Web站点。本任务将学习如何使用Dreamweaver创建站点。任务五课堂练习——使用Dreamweaver创建站点一、初识DreamweaverDreamweaver是集网页制作和网站管理于一体的网页编辑器，可对网站的相关页面及各类素材进行统一管理，还可使用站点管理功能将文件上传到网页服务器，测试网站。它支持通过代码、拆分、设计、实时视图等多种方式，创作、编写和修改网页。DreamweaverCC2018工作界面二、创建站点的准备无论是企业还是个人，在创建站点前都要明确建设网站的目的，并确定网站需要的功能、规模，以及准备为此而投入的费用，并进行必要的市场分析，然后拟定出初步的网站策划书。需要明确的问题包括：建立什么主题或类型的网站？网站面向的对象或客户是谁？打算如何获取盈利，主要靠实体货物还是虚拟产品或广告？投资有多大？运作团队如何？在开始正式建设网站及创建站点之前，还需要注册域名、申请空间。注册域名：域名要尽可能短、便于记忆，以纯字母或纯数字为佳，最好有一定的规律。除了域名的主要部分之外，还要选择一个合适的域名后缀，常见的域名后缀有.com（常用于商业机构）、.net（常用于网络服务机构）、.org（表示非营利性组织）、.cn（国家顶级域名）等。在确定域名之后，就可以选择域名注册机构进行注册了，域名注册机构有很多，如万网、新网等。申请空间：首先，需要估算网站需要占用多大的容量，根据所需的容量寻找空间；其次，要清楚需要什么类型的空间；接着，选择网络线路。网站空间按照类型可以分为3种，按价格从低到高排序：虚拟主机、VPS（VirtualPrivateServer，虚拟专用服务器）和独立服务器。申请好网络空间后，就会获得相应的IP（InternetProtocol，互联网协议）地址，将域名解析到这个IP地址上，然后把空间和域名进行绑定即可。新网域名注册页面三、创建与设置站点1创建站点在DreamweaverCC2018中创建站点的具体操作方法如下。三、创建与设置站点2编辑站点站点的高级设置包括“本地信息”“遮盖”“设计备注”“文件视图列”“Contribute”“PHP”“模板”“jQuery”

“Web字体”“动画资源”10个选项，用户可以根据需要进行相应设置。站点高级设置三、创建与设置站点3删除站点执行“站点”|“管理站点”命令，弹出“管理站点”对话框，单击“删除当前选定的站点”按钮，即可对不再使用的站点执行删除操作。注意，该操作仅能在Dreamweaver中清除该站点信息，不能删除站点中的实际文件。删除站点三、创建与设置站点4修改站点通过编辑站点可以实现对站点信息的修改，具体操作方法如下。三、创建与设置站点5复制站点如果要创建多个结构相同的站点，在“管理站点”对话框中单击“复制当前选定的站点”按钮，即可实现对选择站点的复制。默认情况下，复制站点的存储路径和源站点的存储路径一致。若要修改站点的存储路径，可以在“管理站点”对话框中双击复制的站点名称，在弹出的“站点设置对象”对话框的“本地站点文件夹”文本框中设置存储路径。修改站点的存储路径复制当前选定的站点三、创建与设置站点6导出与导入站点若要导出站点，可以将当前站点配置文件（*.ste）导出到指定路径下；若要导入站点，可以将站点的配置文件导入Dreamweaver中，具体操作方法如下。项目二使用Dreamweaver

添加网页元素电子商务网站建设与网页设计

（微课版）1认识DreamweaverCC2018工作界面2课堂练习——

在网页中添加文本和图像3课堂练习——

为“新品上市”页面添加商品列表目录CONTENTS4课堂练习——

为商品详情页添加表格5课堂练习——

添加超链接创建链接页面Dreamweaver将可视化布局工具、应用程序开发功能和代码编辑支持组合在一起，功能强大，有助于各个层次的网店开发人员和设计人员快速创建网站、设计与制作网页等。本任务将引领读者初步认识DreamweaverCC2018工作界面。任务一认识DreamweaverCC2018工作界面DreamweaverCC2018工作界面主要由菜单栏、工具栏、文档窗口、“属性”面板与面板组等部分组成。DreamweaverCC2018工作界面菜单栏工具栏文档窗口“属性”面板面板组文本是获取各种信息的重要载体，图片则可以给浏览者提供更加直观、形象的信息展示，它们是网页中两种重要的基本元素。为了使页面更加美观、简洁、富有层次感以及具有较强的可读性，需要对文本和图像进行排版与设置。任务二课堂练习——在网页中添加文本和图像一、添加文本要完成某一内容的描述，需要用到大标题、小标题和段落文字等元素。在网页中添加文本要遵循这一原则。在Dreamweaver中添加文本的具体操作方法如下。二、设置文本属性在网页中添加文本内容后，还可以根据需要对插入的文本进行设置，如设置字体样式、字号和字体颜色等。在网页中设置文本属性的具体操作方法如下。三、添加其他特殊文本在网页中除了添加文本内容外，还需要添加一些特殊的元素，如水平线、特殊字符和日期等。在网页中添加特殊文本的具体操作方法如下。四、添加图像图像具有形象、直观的特点，在网页中适当地插入一些图像，可以提高网页的美观性与可读性。例如，在网页中插入商品图片比使用文字说明更能说明问题。在网页中添加图像的具体操作方法如下。五、添加其他图像元素在网页中除了插入图像外，还可以插入其他图像元素，如鼠标经过图像、图像热点区域和图像占位符等。在网页中添加其他图像元素的具体操作方法如下。列表是网页中的重要元素，分为无序列表、有序列表和自定义列表3种形式。列表在网页布局中是一种重要的布局方式。本任务将学习在Dreamweaver中添加商品列表的方法。任务三课堂练习——为“新品上市”页面添加商品列表一、添加无序列表无序列表没有序号，每一条列表文字都是通过小圆点或其他图形方式标识的。添加无序列表的具体操作方法如下。二、添加有序列表有序列表具有序号，列表内容会按照数字顺序进行排列。添加有序列表的具体操作方法如下。表格在网页中是很重要的元素。在网页设计初期，很多布局都是通过表格实现的，但现在一般使用DIV+CSS布局，只在制作数据表格时才使用表格工具。任务四课堂练习——为商品详情页添加表格一、认识表格表格由一行或多行组成，每行又由一个或多个单元格组成。当选定了表格或表格中有插入点时，DreamweaverCC2018会显示表格宽度和每个表格列的宽度。宽度旁边是表格标题菜单与列标题菜单的箭头。使用这些菜单可以快速访问与表格相关的常用命令。使用“插入”面板或“插入”菜单命令创建一个新表格后，可以根据需要合并任意数目的相邻的单元格，以生成一个跨多个列或行的单元格。选择表格合并单元格二、表格“属性”面板选择创建后的表格，可以通过设置表格“属性”面板中的各项参数完成表格属性的更改。表格“属性”面板三、插入并编辑表格在HTML中，可通过<table>标记定义表格、使用<tr>标记定义行、使用<td>标记定义单元格，表格中的文本数据都是写到单元格中的。在网页中插入并编辑表格的具体操作方法如下。四、使用表格布局商品详情页使用表格除了插入文本数据之外，还可以将图像元素放置在网页中的任何位置，使网页设计更加合理。使用表格布局商品详情页的具体操作方法如下。一个网站是由许多网页组成的集合，通过“超链接”将网页与网页链接在一起，从而形成一个有序而庞大的系统。超链接是网页的重要组成部分。本任务将介绍在Dreamweaver中添加超链接的方法。任务五课堂练习——添加超链接创建链接页面一、认识路径要正确地创建超链接，必须使用路径，即从链接源到链接目标之间的文件路径。描述路径的方式有两种，分别是绝对路径和相对路径。绝对路径提供了链接目标文档完整的URL。例如，在制作友情链接时，需要链接到另一个网站的网页，这时就要使用绝对路径。绝对路径是包含服务器协议的完全路径，如。绝对路径相对路径用于描述链接源与链接目标之间的相对位置，在网站内部各页面的链接中使用相对路径更合适。通过Dreamweaver设立的站点目录就表现了以相对路径建立的网页链接关系，设立站点目录最简单的方法是在硬盘根目录下建立一个文件夹，将网站用到的所有图片、网页文档等都存储在此文件夹中。相对路径二、添加文档链接通常所说的链接主要是指文档链接（也可以是文字和图片链接等），因为链接到其他文档在网页中特别常见。添加文档链接的具体操作方法如下。三、添加锚记链接有时一个网页中的内容很多，需要拖动滚动条才可以看到下面的网页信息。这时，可以在网页的开头部分设计不同的超链接，当单击超链接时可跳转到本网页的不同位置上，以便浏览者快速浏览网页信息。网页文档中的这种链接称为锚记链接。添加锚记链接的具体操作方法如下。四、添加空链接空链接就是不会跳转到任何位置，但链接的文本和图片等具有超链接的样式的链接。空链接可用于向页面上的对象或文本附加行为，例如向空链接附加一个行为，以便在鼠标指针滑过该链接时交换图像或显示绝对定位的元素。添加空链接的具体操作方法如下。项目三使用CSS美化

网页电子商务网站建设与网页设计

（微课版）1认识CSS2课堂练习——在Dreamweaver中创建CSS规则和文件3课堂练习——

使用CSS选择器美化文本目录CONTENTS4课堂练习——

CSS特性的应用5课堂练习——

使用CSS美化童装网站通过CSS可以实现网页外观的快速美化，它是网页设计者的利器，既可以对不同类型的网页应用不同的样式表，又可以使用样式表对网站基本样式进行统一，极大地方便了网页设计工作。本任务主要认识CSS。任务一认识CSS一、了解CSS的基本语法CSS的样式规则由两部分组成：选择器和声明。选择器是样式的名称，包括自定义的类（也称“类样式”）、HTML标签、ID和复合内容。自定义的类：可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点“.”开头。HTML标签：可以重定义特定标签（如<p>或<h1>）的格式。ID和复合内容：可以重定义特定元素组合的格式或其他CSS允许的选择器形式的格式。选择器声明用于定义样式元素，由两部分组成：属性和值。在右图所示的示例中，h1是选择器，介于花括号（{}）之间的所有内容都是声明。声明CSS基本语法二、在网页中引用CSS的方式当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表内嵌样式二、在网页中引用CSS的方式外链样式当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表二、在网页中引用CSS的方式联合使用样式表当CSS与网页中的内容建立关系时，即可称为CSS的引用。CSS的引用主要有以下几种方式。这是应用CSS最简单的方式，由于没有和HTML标记分离，因此不推荐使用这种方法，其语法如下。<标记style="CSS属性:值">内容</标记>直接添加在HTML标记中将CSS代码添加到HTML网页<head>标记区域中的<style></style>标签之间。将样式表内嵌到HTML文件中此方式通过<link>标签实现，将<link>标签加入<head>标签之间。外部样式表可以应用到多个网页中。将外部样式表链接到HTML文件中将样式表导入HTML文件中与将样式表链接到HTML文件中相似，也是将外部定义好的CSS文件引入网页进行应用。但是，导入的CSS文件使用@import在内嵌样式表中导入，导入方式可以与其他方式结合。联合使用样式表在网页引用CSS的方式中，直接引用样式表文件的方式是值得推荐的。CSS文件可以应用到多个网页中；也可以控制整个网站的样式，做到HTML代码和CSS代码的分离。本任务学习如何在Dreamweaver中创建CSS规则和文件。任务二课堂练习——在Dreamweaver中创建CSS规则和文件一、创建CSS规则下面将通过实例介绍如何在DreamweaverCC2018中创建CSS规则，具体操作方法如下。二、创建CSS文件在Dreamweaver中使用CSS样式时建议创建CSS文件，然后在CSS文件中编写CSS代码，从使用“CSS设计器”面板过渡到专业的代码书写。创建CSS文件的具体操作方法如下。在CSS中，选择器是一种模式，用于选择需要添加样式的元素。要使用CSS对HTML页面中的元素实现“一对一”、“一对多”或“多对一”的控制，就需要用到CSS选择器。本任务将学习应用各类选择器的方法。任务三课堂练习——使用CSS选择器美化文本一、应用元素选择器元素选择器又称标记选择器，是一种常用的CSS选择器，它直接对HTML中的所有标记（如<p><h1><a>等标记）进行样式设置。下面将通过实例介绍如何应用元素选择器，具体操作方法如下。二、应用群组选择器在CSS中，如果希望对多个标记进行相同的样式设置，可以通过群组选择器来实现。下面将通过实例介绍如何应用群组选择器，具体操作方法如下。三、应用类选择器类选择器也可以理解为自定义样式，可以单独对网页的某个部分设置样式，操作非常灵活，是网页设计中常用的一种方法。下面将通过实例介绍如何应用类选择器，具体操作方法如下。四、应用ID选择器ID选择器和类选择器类似，不同的是ID选择器使用“#”符号声明样式，如“#con-p{color:blue;}”。ID选择器与类选择器相似，需要单独应用在标记元素上，其使用方法为“<pid=”con-p“>”。声明ID选择器应用ID选择器五、应用后代选择器后代选择器可以理解为一种嵌套关系，是一种多条件的样式规则。在CSS规则中，声明后代选择器的方法为“pem{font-weight:bold;color:#333;}”。声明后代选择器预览网页效果六、应用通配符选择器通配符选择器是一种特殊的CSS规则，其声明方法为“*{color:red;}”。其中，“*”表示HTML所有的标记元素，该CSS规则的含义是将所有元素的字体设置为红色。下面将举例说明，具体操作方法如下。在有些情况下，CSS规则有一些特性，主要包括继承性、特殊性、层叠性和重要性，本任务将分别对其应用方法进行学习。任务四课堂练习——CSS特性的应用一、应用继承性CSS的某些样式是具有继承性的。继承是一种规则，允许样式不仅应用于某个特定HTML标记元素，还应用于其后代元素。下面将举例说明，具体操作方法如下。二、应用特殊性当为同一个元素设置不同的CSS规则代码时，浏览器会根据权值判断使用哪种CSS样式，权值高的具有优先权。下面将举例说明，具体操作方法如下。三、应用层叠性在HTML网页中，同一个元素如果有多个CSS样式存在，并且这些CSS样式具有相同的权值，其效果会怎样？下面将举例说明，具体操作方法如下。四、应用重要性在某些特殊情况下，当有相同权值的样式存在时，需要为某些样式设置最高权值，此时可以通过“!important”提升其权值为最高。下面将举例说明，具体操作方法如下。在网页设计中，文字和段落排版是非常重要的内容，使用CSS规则可以快速完成格式化排版，并且能将其应用到多个网页中，实现CSS代码和HTML代码分离。本任务主要学习CSS规则在文字和段落排版中的应用。任务五课堂练习——使用CSS美化童装网站一、文字排版文字排版主要是设置字体类型（font-family）、字体大小（font-size）、字体颜色（color）等属性。下表所示为文字排版常用的CSS字体规则相关属性。属性描述值font-family字体类型宋体、黑体font-size字体大小像素，如12像素color字体颜色十六进制颜色表示法font-weight字体加粗boldfont-style字体倾斜italictext-decoration下画线underlinetext-decoration删除线line-throughCSS字体规则相关属性一、文字排版下面将通过实例介绍如何使用CSS规则进行文字排版，具体操作方法如下。二、段落排版除了对网页文字进行设置外，还可以单独对文章的段落进行CSS规则设置，在HTML中p标记元素为段落标记。下表所示为段落排版常用的CSS段落规则相关属性。属性描述值text-indent段落首行缩进2emline-height行高2em或像素值letter-spacing中文字间距或英文中字母与字母的间距像素值word-spacing英文单词之间的间距像素值text-align文本对齐方式left（左对齐）、right（右对齐）、center（居中对齐）CSS段落规则相关属性二、段落排版下面将通过实例介绍如何使用CSS规则进行段落排版，具体操作方法如下。三、CSS背景通过background属性可以设置CSS背景规则。下表所示为CSS背景规则相关属性列表。属性描述background简写属性，作用是将背景属性设置在一个声明中background-color设置元素的背景颜色background-image设置背景图像background-position设置背景图像的起始位置background-repeat设置背景图像是否及如何重复background-attachment设置背景图像是否固定或者随着页面的其余部分滚动CSS背景规则相关属性列表三、CSS背景要为网页设置背景颜色，可以通过background-color属性进行设置。下面将举例说明，具体操作方法如下。背景颜色：background-color三、CSS背景要为网页设置背景图像，可以通过background-image属性进行设置。下面将举例说明，具体操作方法如下。背景图像：background-image三、CSS背景通过background-image属性设置的网页背景图像会铺满网页，还可以通过background-repeat属性设置背景图像的位置，如水平方向平铺、垂直方向平铺或不平铺。下面将举例说明，具体操作方法如下。背景图像重复：background-repeat三、CSS背景除了可以设置背景图像的平铺方向外，还可以使用background-position属性将背景图像设置到指定位置。

下面对素材网页中段落的开头部分设置背景图像，具体操作方法如下。背景图像定位：background-position属性值描述center将背景图像设置到页面中间top将背景图像设置到页面顶部bottom将背景图像设置到页面底部right将背景图像设置到页面右侧left将背景图像设置到页面左侧background-position属性值列表三、CSS背景除了可以设置背景图像的平铺方向外，还可以使用background-position属性将背景图像设置到指定位置。

下面对素材网页中段落的开头部分设置背景图像，具体操作方法如下。背景图像定位：background-position三、CSS背景要想使网页背景图像随着页面滚动或固定背景图像，需要使用background-attachment设置背景属性。下面将举例说明，具体操作方法如下。背景关联：background-attachment四、列表排版在网页中，HTML列表ul或ol是非常重要的标记元素。下表所示为列表排版属性值列表。属性描述list-style简写属性，用于把所有用于列表的属性设置在一个声明中list-style-image将图像设置为列表项标志list-style-position设置列表项标志的位置list-style-type设置列表项标志的类型列表排版属性值列表四、列表排版在网页设计中，网页列表标记有默认列表项标志，但为了网页兼容性，一般不设置列表项标志，而通过设置列表项图像来代替。下面将举例说明，具体操作方法如下。五、表格排版下面将介绍如何使用CSS对表格进行排版，例如，设置表格为单一边框，设置表格的宽度和高度，设置表格文本对齐方式，以及设置表格内边距和表格背景颜色，具体操作方法如下。六、链接样式创建完超链接后，可以通过CSS属性修改超链接的样式。下表所示为链接的4种状态。链接状态描述a:link普通的、未被访问的链接a:visited用户已访问的链接a:hover鼠标指针位于链接的上方a:active链接被点击的时刻链接状态六、链接样式下面将举例说明链接样式排版的设置方法，具体操作方法如下。项目四使用DIV+CSS布局网页电子商务网站建设与网页设计

（微课版）1使用CSS盒子模型2标准流和<div>标签3课堂练习——使用盒子模型设计“商品分类”网页目录CONTENTS4课堂练习——使用DIV+CSS

布局电子商务网站首页在学习CSS布局之前，要理解CSS盒子模型的概念及使用方式，才能精确地对页面进行布局。本任务将介绍CSS盒子模型的概念，使读者了解盒子模型的功能和作用。任务一使用CSS盒子模型一、认识CSS盒子模型所有页面中的元素都可以看成一个盒子模型，占据一定的页面空间，例如<p>标签、<h1>标签、<body>标签、<img>标签等，都可以看成盒子模型。从浏览器的角度看，一个网页就是由盒子排列或嵌套在一起组成的。在CSS中，一个盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）4部分组成，几乎所有的网页元素都是由这些部分组成的，如<p>标签、<h1>标签、<div>标签等。盒子模型示意二、CSS盒子模型的边框、内边距和外边距边框（border）的属性主要有3个，分别为color（颜色）、width（粗细）和style（样式）。下面将举例说明如何设置边框，具体操作方法如下。边框二、CSS盒子模型的边框、内边距和外边距内边距（padding）在盒子模型中表示内容与边框之间的距离，可以通过padding-top、padding-right、padding-bottom、padding-left属性设置上、右、下、左方向的内边距，也可以通过“padding:1234”直接设置4个方向的内边距，其顺序按照顺时针方向依次为上、右、下、左。下面将举例说明如何设置内边距，具体操作方法如下。内边距二、CSS盒子模型的边框、内边距和外边距外边距（margin）在盒子模型中位于边框外侧，用于控制盒子与盒子之间的距离，其使用方法和内边距的使用方法类似。下面将举例说明如何设置外边距，具体操作方法如下。外边距<div>标签是页面布局中常用的标记。<div>标签相当于一个容器，可以容纳网页所有元素，如果没有专门设定其定位（或浮动），那么盒子表现为“标准流”的方式。本任务将学习标准流和<div>标签。任务二标准流和<div>标签一、标准流大部分HTML标签都属于块级元素，每个块级元素都占据一个矩形的区域，并且与同级的兄弟块级元素依次垂直排列、左右撑满，如<h1>标签、<p>标签、<div>标签等都是块级元素。下面将举例说明，具体操作方法如下。块级元素一、标准流网页中有一部分元素属于行内元素，基本用于修饰文字的标签，如<span>标签、<em>标签、<a>标签等。行内元素不占据独立的区域，也不会左右撑满。下面将举例说明，具体操作方法如下。行内元素二、<div>标签<div>标签和<p>标签都是块级元素，都具备盒子模型的特征。两种标签的区别在于<p>标签是有特定含义的HTML标签，代表段落标签；而<div>标签是一个通用块级元素，没有具体的HTML含义，适合作为布局标签。下面将举例说明，具体操作方法如下。三、盒子在标准流中的定位两个块级元素默认是垂直排列的，可以通过上、下外边距控制两个同级块级元素之间的距离。两个垂直排列的块级元素之间的距离不是margin-bottom和margin-top的总和，而是两者中的较大者，这种现象叫作“塌陷”。块级元素之间的垂直定位margin属性块级元素之间的垂直定位三、盒子在标准流中的定位当一个盒子包含在另一个盒子中时，盒子之间就形成了典型的嵌套关系，其中，子盒子的margin将以父盒子的内容为参考。在标准流中，一个块级元素的盒子模型在水平方向上的宽度会自动延伸至上一级盒子的限制位置。下面将举例说明，具体操作方法如下。嵌套盒子之间的margin属性在标准流中，一个块级元素的盒子模型在水平方向会自动伸展，而在垂直方向与兄弟块级元素的盒子模型依次排列，不会并排。CSS可以通过浮动改变默认排列方式，使布局更加自由。任务三课堂练习——使用盒子模型设计“商品分类”网页一、盒子浮动通过设置浮动，块级元素将按照浮动位置和外观进行改变，还会脱离默认的排列方式，即不按照标准流的方式排列。下面将举例说明，具体操作方法如下。二、清除浮动影响和盒子定位下面将举例说明如何使用clear属性清除浮动的影响，具体操作方法如下。使用clear属性清除浮动的影响二、清除浮动影响和盒子定位在CSS中，盒子的定位是通过position属性来设置的。position属性有3个常用的属性值，分别为static、relative和absolute。盒子的定位二、清除浮动影响和盒子定位在CSS中，盒子的定位是通过position属性来设置的。position属性有3个常用的属性值，分别为static、relative和absolute。盒子的定位网站首页就是网站的起始页，通过设计软件制作出网站效果图后，再通过DIV+CSS布局完成网页排版。本任务以使用DIV+CSS布局电子商务网站首页为例，帮助读者熟练掌握DIV+CSS布局的方法。任务四课堂练习——使用DIV+CSS布局电子商务网站首页一、使用DIV布局页面结构在进行网页布局之前，最好在设计软件中先设计出网页的整体布局，然后按照设计的样式进行拆分，再利用DIV+CSS进行布局。使用DIV布局页面结构二、对网页顶部布局下面对网页顶部head部分进行布局，具体操作方法如下。三、对网页主体布局下面对网页主体main部分进行布局，具体操作方法如下。四、对网页底部布局下面对网页底部foot部分进行布局，具体操作方法如下。五、组合首页布局当将网站首页的3个组成部分布局完毕后，将它们组合到一起，即可完成一个整体的网页布局，具体操作方法如下。项目五使用行为和表单创建网页特效电子商务网站建设与网页设计

（微课版）1使用行为2使用表单3课堂练习——

制作“新用户注册”网页表单目录CONTENTS4课堂练习——

使用行为制作“数码商城”网页特效5课堂练习——

使用行为验证用户注册行为是一系列使用JavaScript代码预定义的页面特效工具，是JavaScript在Dreamweaver中内置的程序库。当把行为赋予页面中某个元素时，也就是定义了一个操作，以及用于触发这个操作的事件。任务一使用行为一、认识行为和事件行为在网页中是比较常见的，如弹出窗口、鼠标指针移上去图片切换等。当发生某个事件时执行某个动作的过程称为行为，行为是事件和动作的组合。行为行为包括两部分内容，一部分是事件，另一部分是动作。事件用于指明执行某个动作的条件，如将鼠标指针移到对象上方、离开对象、单击对象、双击对象等；动作是行为的另一个组成部分，由预先编写的JavaScript代码组成，我们利用这些代码可以执行特定的任务，如打开浏览器窗口、弹出信息等。事件为了便于理解，可以将事件分为4类，分别是鼠标事件、键盘事件、页面事件和表单事件。常用的事件如下：onBlur、onClick、onDblClick、onError、onFocus、onKeyDown、onKeyPress、onKeyUp、onLoad、onMouseDown、onMouseUp、onMouseMove、onMouseOver、onMouseOut、onUnload。二、“行为”面板通过“行为”面板可以使用和管理行为。“行为”面板的显示列表分为两栏，左栏用于显示触发动作的事件，右栏用于显示动作。“行为”面板显示所有事件添加行为二、“行为”面板“行为”面板相关的基本操作包括打开面板、显示事件、添加行为和删除行为等，具体操作方法如下。在制作动态网页时，表单是接收用户信息的重要窗口，接收后信息交由服务器端的脚本程序处理并进行反馈。本任务将介绍如何在网页中创建表单。任务二使用表单一、了解表单一个完整的表单由两部分组成，一个是客户端包含的表单页面，用于填写浏览者进行交互的信息；另一个是服务器端的应用程序，用于处理浏览者提交的信息。使用表单的网页二、创建表单在网页文档中创建表单的操作非常简单，下面将举例说明，具体操作方法如下。三、设置表单属性前面插入的是一个空表单，单击红色虚线框选中表单，在“属性”面板中可以设置表单的相关属性。表单“属性”面板在创建表单后，即可向其中添加表单对象。在Dreamweaver中可以创建各种表单对象，如文本域、单选按钮、复选框、按钮等。本任务将介绍“新用户注册”网页表单的制作方法。任务三课堂练习——制作“新用户注册”网页表单一、插入文本域文本域是表单中常用的元素之一，主要包括单行文本域、多行文本域和密码文本域3种。在网页中插入文本域的具体操作方法如下。插入文本域一、插入文本域设置文本域属性的具体操作方法如下。设置文本域属性二、插入单选按钮单选按钮通常不会单独出现，而是成组使用，且只允许选择其中的一个。下面将介绍如何在网页中插入单选按钮，具体操作方法如下。三、插入下拉菜单和滚动列表在网页中插入下拉菜单的具体操作方法如下。插入下拉菜单三、插入下拉菜单和滚动列表在网页中插入滚动列表的具体操作方法如下。插入滚动列表四、插入文件域文件域由一个文本框和一个“浏览”按钮组成，主要用于从磁盘上选择文件。在表单中经常会用到文件域，它能使一个文件附加到正被提交的表单中，如在表单中上传图片、在邮件中添加附件等。在表单中插入文件域的具体操作方法如下。五、插入复选框在网页中应用复选框可以为用户提供多个选项，用户可以选择其中的一项或多项。下面将详细介绍如何在网页中插入复选框并设置其属性，具体操作方法如下。六、插入按钮通过脚本的支持，单击相应的按钮，可以将表单信息提交到服务器，或者重置表单。标准表单按钮带有“提交”、“重置”或“发送”标签，还可以根据需要分配其他已经在脚本中定义的处理任务。表单中的按钮一般放置在表单的最后，用于实现相应的操作，如提交、重置等。在网页中插入按钮的具体操作方法如下。七、插入图像按钮通过插入图像按钮可以实现图形化按钮的功能。如果使用图像执行任务，而不是提交数据，则需要将某种行为附加到表单对象。在网页中插入图像按钮的具体操作方法如下。DreamweaverCC2018内置了常用标准行为，如打开浏览器窗口、交换图像、跳转菜单等，每一种行为都可以实现一个动态效果或用户与网页之间的交互。本任务将学习如何使用行为制作“数码商城”网页特效。任务四课堂练习——使用行为制作“数码商城”网页特效一、制作打开浏览器窗口特效使用“打开浏览器窗口”行为可以在一个新的窗口中打开页面，并指定新窗口的属性（包括窗口大小）、特性（是否可以调整大小、是否具有菜单栏等）和名称。制作打开浏览器窗口特效的具体操作方法如下。二、制作交换图像特效通过“交换图像”行为更改<img>标签的src属性，可以将一幅图像和另一幅图像进行交换。使用此行为可以创建鼠标指针经过按钮的效果，以及其他图像效果（包括一次交换多幅图像）。制作交换图像特效的具体操作方法如下。三、制作跳转菜单特效使用“跳转菜单”行为可以创建多个网页的链接，实现向多个目标网页的跳转。制作跳转菜单特效的具体操作方法如下。表单设计完成后，单击“提交”按钮，即可将用户信息收集到网站后台数据库中。但是，为了保证收集信息的正确性，在提交之前应先检查表单，检查是否有不符合格式要求的信息，如果有则弹出提示，进行修改后再重新提交。本任务将学习如何使用行为验证用户注册。任务五课堂练习——使用行为验证用户注册一、检查表单在新用户注册网页中，“昵称”文本框是必须填写的，通过“行为”面板可以添加检查表单行为，具体操作方法如下。二、设置密码仅为数字下面通过添加行为设置“密码”文本框，使用户只能输入数字作为密码，具体操作方法如下。三、检查邮箱格式“邮箱”文本框用于收集用户电子邮箱地址，电子邮箱是有规定格式的，如“×××@”，在提交表单之前，可以先检查用户输入的邮箱信息是否符合电子邮箱的规定格式，具体操作方法如下。项目六使用Animate制作

网页广告动画电子商务网站建设与网页设计

（微课版）1认识AnimateCC2018工作界面2Animate工具的应用3课堂练习——

制作家居网站导航菜单目录CONTENTS4课堂练习——

制作水果促销横幅广告Animate是用于创建动画和多媒体内容的专业工具软件。如果电子商务网站中只有静态的文字和图像，就会显得呆板。Animate可以将动画、音乐和音效等相融合，有效地增强网页的动态效果，从而吸引浏览者的注意力。要想运用Animate制作网页广告动画，就必须了解其工作界面及功能。本任务就来认识AnimateCC2018工作界面。任务一认识AnimateCC2018工作界面AnimateCC2018工作界面由菜单栏、基本功能区、窗口选项卡、编辑栏、舞台、“属性”面板、工具栏和“时间轴”面板等部分组成。AnimateCC2018工作界面作为交互式动画设计工具，Animate可以将音乐、音效和动画融合在一起，制作出高品质的动态效果。在使用Animate制作网页动画之前，本任务先学习Animate工具的应用方法。任务二Animate工具的应用一、文本工具下面将通过实例介绍如何添加静态文本，具体操作方法如下。静态文本一、文本工具动态文本字段显示动态更新的文本。动态文本包含外部源（如文本文件、XML文件及远程Web服务）加载的内容，其功能强大，但并不完美，只允许动态显示，不允许动态输入。下面将通过实例介绍如何添加动态文本，具体操作方法如下。动态文本一、文本工具输入文本用于在Animate动画中接收用户的输入数据，如表单或密码输入区域的数据。下面将通过实例介绍如何在舞台上添加输入文本显示密码字符，具体操作方法如下。输入文本二、绘图工具绘制直线设置绘制对象属性线条工具用于绘制直线。在AnimateCC2018中有6种笔触样式，分别是实线、虚线、点状线、锯齿线、点刻线和斑马线。可以在绘制直线前先对线条工具的属性进行设置，也可以在绘制直线后在“属性”面板中对线条的样式进行修改。线条工具二、绘图工具“实线”样式“虚线”样式“点状线”样式“锯齿线”样式“点刻线”样式“斑马线”样式线条工具用于绘制直线。在AnimateCC2018中有6种笔触样式，分别是实线、虚线、点状线、锯齿线、点刻线和斑马线。可以在绘制直线前先对线条工具的属性进行设置，也可以在绘制直线后在“属性”面板中对线条的样式进行修改。线条工具二、绘图工具铅笔工具“属性”面板单击工具栏中的“铅笔工具”按钮

或按【Shift+Y】组合键，即可调用铅笔工具。铅笔工具的“属性”面板和线条工具的“属性”面板非常相似。铅笔工具铅笔模式二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具设置钢笔工具参数设置笔触参数二、绘图工具使用钢笔工具可以绘制直线和平滑流畅的曲线，而且能调节直线的角度、长度和曲线的倾斜度等。钢笔工具确定锚点