项目二 使用 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设立的站点目录就表现了以相对路径建立的网页链接关系，设立站点目录最简单的方法是在硬盘根目录下建立一个文件夹，将网站用到的所有图片、网页文档等都存储在此文件夹中。相对路径二、添加文档链接通常所说的链接主要是指文档链接（也可以是文字和图片链接等），因为链接到其他文档在网页中特别常见。添加文档链接的具体操作方法如下。三、添加锚记链接有时一个网页中的内容很多，需要拖动滚动条才可以看到下面的网页信息。这时，可以在网页的开头部分设计不同的超链接，当单击超链接时可跳转到本网页的不同位置上，以便浏览者快速浏览网页信息。网页文档中的这种链接称为锚记链接。添加锚记链接的具体操作方法如