项目五： 使用网页元素制作网页


 制作带有文字、表格的简单网页； 
 利用表格的版面布局功能制作图文并茂的简单网页； 
 创建超链接。
任务1： 使用表格制作“旅游签证报价表”页面


视频讲解



本任务利用“插入表格”选项，制作“旅游签证报价表”的简单页面，效果如图51所示。


图51“旅游签证报价表”网页


 插入表格； 
 设置表格的基本属性； 
 录入文本及设置文字的属性。

在网页中，表格的基本作用是显示数据和版面布局。本例中只讲解表格的显示数据功能。表格由行、列和单元格三部分组成，这三部分都可以进行复制、粘贴，在表格中还可以插入表格。




1. 插入表格
通过“插入”菜单的“Table（表格）”选项在网页中插入表格。在弹出来的对话框中输入相应参数后单击“确定”按钮即可，如图52所示。


图52插入表格


2. 设置表格属性
当表格插入完成后，就可以在屏幕下方的属性面板中对表格进行相关设置，如图53所示。


图53属性面板

3. 表格各部分的选择


图54标签选择器

在实际制作表格时，需要对表格中的各个部分分别进行设置，如背景色、字体等。可以通过单击窗口底部的标签选择器中的相应标签来进行选择，如图54所示。
 body： 选中文档的主体（包含文档的所有内容，例如文本、超链接、图像、表格和列表等）。
 table： 选中整表。
 tbody： 选中表格的主体。
 tr： 选中光标所在的行。
 td： 选中光标所在的单元格。


步骤1： 在E盘中新建文件夹mysite05，在mysite05中新建子文件夹task01。打开软件Dreamweaver CC 2019，选择“站点”→“新建站点”，在“站点设置对象”对话框中，设置“站点名称”为mysite051，设置“本地站点文件夹”为E:＼mysite05＼task01＼。在task01文件夹下新建网页文件index.html。

步骤2： 在index.html网页中，选择“插入”→Table，在弹出来的对话框中将“行数”设置为“7”，“列”设置为“3”，“表格宽度”设置为75百分比，“边框粗细”设置为“1”像素，单击“确定”按钮完成设置，如图55所示。


图55插入表格


步骤3： 单击屏幕上方“实时视图”旁的下拉选项，选择“设计”视图，如图56所示。


图56选择“设计”视图


步骤4： 将光标置于表格内，单击窗口底部的table标签选中整表，即可在下方属性面板处设置表格属性。在“Align（对齐方式）”处选择“居中对齐”将表格居中，如图57所示。


图57设置表格居中


步骤5： 将光标置于表格第一行任意单元格内，单击窗口底部“tr”标签选中表格第一行，即可在下方属性面板处设置该行属性。单击“合并单元格”将第一行单元格合并，并在该单元格内输入标题“旅游签证报价表”，在属性面板中设置其“字体”为“宋体”，“大小”为48px，颜色为#FF0000，位置为“居中”，如图58所示。



图58设置标题行


若要添加新字体，可在“字体”的下拉菜单中选择“管理字体”→“自定义字体堆栈”，即可在随后出现的对话框中添加新字体。

步骤6： 在其余单元格中输入如图59所示内容。


图59输入文字


步骤7： 选中表格第2~7行，在属性面板中设置字体“大小”为24px，“水平”为“居中对齐”，“垂直”为“居中”，“背景颜色”为#FFDD00，如图510所示。


图510文本格式设置


步骤8： 调整表格列宽，达到较好的显示效果，完成后保存该网页。用浏览器浏览网页，效果如图511所示。


图511最终效果图


可以通过插入行（列）的方法使表格扩展，如图512所示。


图512扩展后的表格


若要插入行（列），先选中要插入位置的相邻行（列），右击→“表格”→“插入行（列）”，如图513所示。


图513插入行

若在编辑过程中需要拆分单元格，可以先选中该单元格，在属性面板中单击“拆分单元格为行或列”选项，如图514所示。


图514拆分单元格


任务2： 使用表格的版面布局功能制作Banner页面


视频讲解



本任务将利用表格的版面布局功能制作Banner页面，效果如图515所示。


图515Banner网页



 规划版面中各个元素的位置，从而确定要插入表格的参数； 
 利用表格、嵌套表格实现对页面的布局； 
 在网页中插入图片。


1. 表格的布局功能
表格在网页布局中起着很重要的作用，表格运用的好坏将会直接影响到网页的布局效果。通过调整表格的高度、宽度、比例等属性，可以对网页中的文本和图像等元素进行精确定位，从而使网页变得井然有序。
使用表格进行页面布局，能很好地控制整个布局。将整个页面划分为若干表格，表格中设置单元格的高度、宽度以及相互之间的比例，再将网页元素合理地放置在单元格中，可以达到页面布局显示效果的最佳状态。
利用表格布局以及嵌套表格可以制作出稍微复杂的布局页面，如果结合CSS样式表，可以使得页面的整体布局、色彩搭配得到更精确的控制。

关于CSS的运用将在之后的章节学习，本例并未涉及。
2. 网页中的图像
在网页中使用图像可以让网页更加形象生动，传递的信息比文字更加丰富。网页常用的图像格式有JPG、GIF、PNG。
 JPG： JPG全名是JPEG。JPEG图像以24位颜色存储单个位图，是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。
 GIF： GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，体积很小。网上很多小动画都是GIF格式，其实是将多幅图像保存为一个图像文件，从而形成动画，所以归根结底GIF仍然是图像文件格式，但只能显示256色。和JPG格式一样，这是一种在网络上非常流行的图像文件格式。
 PNG： PNG的设计目的是试图替代GIF文件格式，同时增加一些GIF文件格式所不具备的特性。PNG的名称来源于“可移植网络图形格式(Portable Network Graphic Format，PNG)”，也有一个非官方解释“PNGs Not GIF”。它是一种位图文件(bit map file)存储格式，读作“ping”。PNG用来存储灰度图像时，灰度图像的深度可多达16位，存储彩色图像时，彩色图像的深度可多达48位，并且还可存储多达16位的α通道数据。PNG使用无损数据压缩算法，压缩比高，生成文件体积小。
3. Banner
网页的banner指的就是横幅，一般是在网站广告投放的时候使用，如图516所示。



图516Banner



步骤1： 在E盘新建文件夹mysite05，将Dreamweaver CC素材＼project05文件夹下的task02文件夹复制到该新建文件夹中。
打开软件Dreamweaver CC 2019，选择“站点”→“新建站点”，在“站点设置对象”对话框中，设置“站点名称”为mysite052，设置“本地站点文件夹”为E:＼mysite05＼task02＼。在task02目录下新建网页文件index.html。
步骤2： 在index.html网页中，选择“插入”→Table，在弹出的对话框中将“行数”设置为“2”，“列”设置为“1”，“表格宽度”设置为“80百分比”，“边框粗细”设置为“0”像素，“单元格边距”设置为“0”，“单元格间距”设置为“0”，单击“确定”按钮完成设置，如图517所示。之后在属性面板上将表格设为水平居中。



图517插入表格


“表格宽度”以百分比设置的好处是无论页面大小怎么变化，表格宽度都会随之按百分比自适应变化。单元格的“边距”“间距”“边框粗细”设为“0”是表格布局页面时常用的技巧，这样可以使被布局的元素间无空隙。

步骤3： 单击第1行第1个单元格，将光标停入其中，选择“插入”→Table，设置Table选项的参数，如图518所示，插入第1个嵌套表格。

步骤4： 单击第2行第1个单元格，将光标停入其中，选择“插入”→Table，设置Table选项的参数，如图519所示，插入第2个嵌套表格。




图518插入第1个嵌套表格




图519插入第2个嵌套表格




“表格宽度”设为“98百分比”是为了让表格在屏幕上显示时有一点空隙，这样相对美观。

步骤5： 将光标停在新表格第1行第2个单元格内，选择“插入”→Image，选择banner04.gif，图片位置如图520所示。



图520插入图片


本例中将表格第1行第1个单元格空出来是为了在页面左边预留一定的调整空间。同理，在表格第1行第3~8个单元格中分别插入图片banner05.gif~banner10.gif，完成后如图521所示。


图521插入剩余图片


步骤6： 利用相同的方法，在表格第2行单元格中插入banner02.gif和banner03.gif，完成Banner制作，如图522所示。


图522完成效果图



还可以把Banner中的选项图片置于屏幕左侧，如图523所示。



图523修改后的Banner


首先需要建1个1行3列的表格，设置如图524所示。
之后在该表格的第1个单元格中嵌套1个6行1列的表格，设置如图525所示。



图524插入表格




图525插入嵌套表格



布局完成后按顺序插入图片即可。


视频讲解


任务3： 创建超链接
本任务将学习创建超链接，如图526所示，有下画线的文字即为超链接。


图526超链接



 掌握常规超链接的适用场景； 
 掌握网站内部链接的创建； 
 掌握网站外部链接的创建。

超链接是一个网站的灵魂。在网络中存在着数量众多的网站，并且在一个网站中也有大量的页面，通常网站中的这些页面之间是可以相互跳转的，通过使用超链接来实现页面的跳转。
1. 超链接的定义
超链接是指网页上某些文字或者图像等元素与另一个网页、图像、Email地址、下载文件甚至一个程序之间的链接。
在HTML语言中，超链接标记格式为<a>…</a>。常用的属性名称有href（指定链接的目标地址）和target（指定链接的目标窗口）。
例如： 

<a href="km.html">…</a>-指定链接目标地址为站内网页文件km.html

<a href="http://www.sina.com.cn">…</a> -指定链接目标地址为外部网址http://www.sina.com.cn

<a href="km.html" target="_blank">…</a>-指定链接目标地址为站内网页文件km.html，并在新窗口中打开。

target属性的常用取值如下。
 _blank： 将目标文件在新窗口中打开。
 _self： 将目标文件在当前窗口中打开。此项为默认，通常不须指定。
超链接可以清晰有效地组织网页，并方便用户浏览相关信息。在浏览器中，看一个元素是否为超链接的方法很简单，只须将鼠标指针放在某个元素上面，如果鼠标指针变成一只小手，那么它就是一个超链接。大多数超链接在网页中显示为蓝色文本，单击后会改变颜色，提醒用户该链接的页面已经浏览过。
2. URL简介
URL（Uniform Resource Locator，统一资源定位器）分为三个部分，分别是协议名、装有所需文件的服务器地址和含有信息的文件目录及文件名，如
http： //www.china.com/index.htm1，此URL的三个部分分别为： ①传输协议http:； 
②服务器名（地址）www.china.com； ③文件目录和文件名index.html。
在网络中常用的传输协议有以下几种。
 http： 超文本传输协议。
 ftp： 文件传输协议。
 mailto： 电子邮件协议。
 telnet： 远程登录协议。
3. 路径
要正确创建链接，必须了解链接与被链接文档之间的路径关系。在一个网站中，路径通常有三种表示方式： 绝对路径、文档相对路径和站点根目录相对路径。
1） 绝对路径
绝对路径提供所链接文档的完整URL，而且包括所使用的协议（如对于Web页，通常使用http://）。例如http://www.macromedia.com/support/Dreamweaver/contents.html就是一个绝对路径。链接站点外的文件时，必须使用绝对路径。
2） 文档相对路径
文档相对路径是指以当前文档所在位置为起点到被链接文件经由的路径，这种方式适合于创建本地链接。例如要将素材mysite/chap6/ch61.html链接到mysite/chap6/ch62.html，路径为ch62.html，表示两个文件在同一个文件夹中； 如果要链接到mysite/chap5/ch51.html，路径就为../chap5/ch51.html，“../”符号表示在文件夹结构层次中上移一层； 如果要链接的文件在chap6的子文件夹中，则用“./子文件夹/文件名”，“.（英文点号）”符号表示当前文件夹，“/”符号表示下移一层。
3） 站点根目录相对路径
站点根目录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。
站点根目录相对路径以斜杆“/”开头，表示站点根文件夹，例如/chap6/ch61.html是站点根文件夹下的chap6子文件夹中的一个文件ch61.html的根目录相对路径。
使用站点根目录相对路径时，在站点内移动包含根目录相对链接的文件，链接不会发生错误。
使用任何一种路径时，只要链接的目标文件被移动，链接均无效。
4. 超链接的类型
超链接有以下几种类型。
 内部链接： 该链接是指在同一网站文档之间的链接，通常可以使用文档相对路径或站点根目录相对路径。
 外部链接： 该链接是指不同网站文档之间的链接，必须使用绝对路径。
 锚记链接： 该链接是指链接到同一页面或不同页面指定位置的链接。
 电子邮件链接： 该链接是指链接到一个电子邮件地址的链接，使用电子邮件链接专用格式。
 空链接： 该链接是指没有指定目标文件的链接。

步骤1： 在E盘新建文件夹mysite05，将Dreamweaver CC素材＼project05文件夹下的task03文件夹复制到该新建文件夹中。
打开软件Dreamweaver CC 2019，选择“站点”→“新建站点”，在“站点设置对象”对话框中，设置“站点名称”为mysite053，设置“本地站点文件夹”为E:＼mysite05＼task03＼。
步骤2： 为文本创建超链接。
 方法一： 
打开本地站点文件夹task03中的index.html网页，选中文本“签证报价表”，如图527所示。


图527index页面

在属性面板中选中左侧的“<>HTML”→单击“链接”文本框右侧的文件夹选项，如图528所示。


图528创建链接


在随后弹出的对话框中选中要链接的网页，地址为E:＼mysite05＼task03＼pages＼qzfyb.html，如图529所示。单击“确定”按钮，完成链接设置。读者也可以自行在“链接”文本框中输入目标网页地址。


图529选择链接目标网页


 方法二： 
在属性面板上，单击“链接”文本框右边的指向文件选项，将该选项拖动至文件面板中的相应文件上，如图530所示。


图530创建链接


设置完成后就可以在浏览器中测试，单击该链接，就可跳转至目标网页，如图531所示。



图531文本链接


文字被加入了超链接后，被选取的文字在默认状态下变为蓝色，并在文字下方出现下画线，表示此处存在一个超链接，超链接的属性可以在“页面属性”对话框中修改，也可以通过CSS样式表来控制。
步骤3： 为图片创建超链接。与设置文本链接类似，选中图片“汽配人”，在属性面板中的“链接”文本框处设置目标网页地址pages＼qpr.html，如图532所示。
如果在属性面板中的“目标”下拉列表框处选择“_blank”，如图533所示，则当单击该链接时，目标网页会在新窗口中打开，如图534所示。



图532插入图片链接




图533设置图片链接




图534在新窗口打开网页



同理，将图片“平安身”“美食嘴”“化妆脸”“旅游腿”链接至各自对应的目标网页pans.html、msz.html、hzl.html、lyt.html。
步骤4： 创建锚记链接。在页面底部适当位置输入文本“更多目的地”，设置字体参数，如图535所示。


图535页面底部输入文本


选中该文本，在属性面板中单击左侧选项，在ID文本框中输入“mj1”命名锚记，如图536所示。


图536命名锚记

在页面左侧适当位置输入文本“页面底部”，在属性面板中的“链接”文本框处输入“#mj1”，即可将链接指向之前定义的锚记位置，如图537所示。
保存后，在浏览器中打开网页，当单击文字“页面底部”时，将跳转到网页文档底部的“更多目的地”处。



图537链接锚记


小技巧： 利用锚记链接可以跳转到同一页面或不同页面的指定位置。如果一个页面的内容较多，则页面较长，为了使用户浏览起来更加方便，可以在页面的某个特定位置上设置锚点，然后再设置一个转到该点的链接，那么用户就可以通过此锚记链接快速、直接地跳转到感兴趣的内容处了。
创建锚记链接分为两个步骤： 创建命名锚记，创建指向该命名锚记的链接。
步骤5： 创建外部链接。
在如图538所示位置输入文本“飞机票查询”并选中，在属性面板中的“链接”文本框处输入网址“https://flights.ctrip.com/”，即可将链接指向外部网站“携程网”。当单击该链接时，网页将跳转至“携程网”，如图539所示。


图538创建外部链接




图539跳转外部链接网址



图540创建电子邮件链接

步骤6： 创建电子邮件链接。
选中图片“联系我们”，在属性面板中的“链接”文本框处输入“mailto:联系人电子邮件地址（如andy@sina.com）”即可，如图540所示。

同理可为文本创建电子邮件链接。当单击该链接时，如果浏览设备安装了邮件收发软件如Foxmail等，窗口会自动跳转至邮件收发软件。如果没有邮件收发软件，将会弹出安装界面。

步骤7： 创建空链接。选中文本“旅行攻略”，在属性面板中的“链接”文本框处输入“#”即可，如图541所示。


图541创建空链接



1. 图像地图
图像地图是指在一个图像中创建多个特定的区域，即图像热点区域。为每一个区域创建一个超链接，单击这些区域，就会打开相应的链接目标，如图542所示，青色区域即为选取的热点区域。


图542图像热点区域


选中要设置热点区域的图片，在属性面板中就可以进行相关选取和参数设置，如图543所示。设置好热点区域后就可以对各区域分别设置超链接了。


图543热点选取


该面板中各项选项含义如下。
 地图： 用于输入图像地图的名称。如果要在同一文档中创建多个图像地图，则每个图像地图的名称必须是唯一的。
 链接： 用于输入要链接到的文件路径，可以是网站内部链接，也可以是外部链接。
 目标： 用于设置目标文件打开的位置。
 替换： 用于输入对热点区域的说明。
 ： 指针热点工具，用于选取热点区域或调节区域形状。
 ： 用于创建矩形热点区域。
 ： 用于创建圆形热点区域。
 ： 用于创建一个不规则形状的热点区域。创建不规则形状热点区域的方法为单击，再用鼠标沿着图像的轮廓单击，最后单击封闭此形状即可。
删除热点区域，只须用选中要删除的区域，按下键盘上的Delete键即可。
2. 脚本链接
脚本链接用于执行JavaScript代码或调用JavaScript函数，当来访者单击某一特定项时，可以使其在不离开当前页的情况下得到该项的相关信息，脚本链接还能够用于执行计算、窗体验证及其他处理任务等。
如果要关闭网页窗口，只需要选中要创建超链接的元素，在属性面板中的“链接”文本框中输入“javascript:window.close()”即可，如图544所示。


图544关闭窗口的脚本链接


说明： “javascript:”的后面跟上要执行的代码或要调用的函数。
附录： JavaScript简介。
JavaScript是一种直译式脚本语言，是一种动态、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上被使用，用来给HTML网页增加动态功能。
JavaScript也是一种网络脚本语言，已经被广泛用于Web应用开发，常被用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript的特点如下： 
 是一种解释性脚本语言（代码不进行预编译）。
 主要被用来向HTML页面添加交互行为。
 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行，如Windows、Linux、Mac、Android、iOS等。
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型、表达式、算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。变量是存储数据值的容器，表达式则用来完成较复杂的信息处理。
JavaScript的用途如下： 
 嵌入动态文本于HTML页面。
 对浏览器事件做出响应。
 读写HTML元素。
 在数据被提交到服务器之前验证数据。
 检测访客的浏览器信息。
 控制cookies，包括创建和修改等。
 基于Node.js技术进行服务器端编程。


视频讲解


任务4： 制作表单网页

本任务将利用表单制作“旅游调查表”网页，效果如图545所示。


图545“旅游调查表”网页



 插入几种常见的表单元素； 
 插入按钮。


表单网页的定义
表单网页是网站和访问者开展互动的窗口，表单可以用来在网页中发送数据。
在HTML语言中，表单标记格式为<form>…</form>。常用的属性名称有action（定义在提交表单时执行的动作）和method（规定在提交表单时所用的HTTP方法get或post）。
例如： 

<form action="action_page.php">指定了某个服务器脚本来处理被提交的当前表单

<form action="action_page.php" method="get">

或

<form action="action_page.php"  method="post">规定在提交表单时所用的HTTP方法(get或post)


get和post的区别如下： 
 get一般用于向服务器请求获取数据，请求参数存放在URL中，并在地址栏可见，一般用于少量且不含敏感信息的场合，如搜索引擎查询。
 post是向服务器提交数据，数据放置在容器内且不可见，一般用于大量或包含敏感信息的场合，如用户注册登录。

步骤1： 在E盘新建文件夹mysite05，在mysite05中新建子文件夹task04。打开软件Dreamweaver CC 2019，选择“站点”→“新建站点”，在“站点设置对象”对话框中，设置“站点名称”为mysite054，设置“本地站点文件夹”为E:＼mysite05＼task04＼。在task04目录下新建网页文件index.html。
步骤2： 在index.html网页中，选择“插入”→“表单”→“表单”。将光标停在表单内，选择“插入”→Table，在弹出来的对话框中将“行数”设置为“9”，“列”设置为“1”，“表格宽度”设置为“500像素”，“边框粗细”设置为“1”像素，“单元格边距”设置为“0”，“单元格间距”设置为“0”，单击“确定”按钮完成设置，如图546所示。之后在属性面板中将整个表格设置为居中。
步骤3： 在第1行输入“旅游调查表”，设置为“居中”。单击第2行，选择“插入”→“表单”→“文本”，如图547所示。插入文本域后，将TextField改为“姓名”，如图548所示。




图546插入表格




图547插入文本域





图548修改文本域


步骤4： 单击第3行，选择“插入”→“表单”→“数字”，将Number改为“年龄”。单击第4行，选择“插入”→“表单”→“单选按钮组”，在弹出的对话框中设置参数，如图549所示。



图549插入“单选按钮组”


默认情况下，插入的按钮组会显示为多行。如果要像如图550所示一样将按钮组单行显示，只需要将光标置于第1个按钮后，用键盘上的Delete键删除换行符即可。

步骤5： 同理，在第5~8行分别插入“复选框组”“选择”“文本区域”“日期时间（当地）”，并设置各项名称如图550所示。


图550插入各表单元素

小技巧： 若要在“您来自： ”的选择菜单中预设内容，只须单击该下拉列表框，在属性面板中单击即可添加选项，如图551所示。


图551为“选择表单”添加选项


步骤6： 单击第9行，以相同方法分别插入“提交”按钮和“重置”按钮，完成后将各元素设为居中，设置适当背景色，完成“旅游调查表”的制作，如图552所示。


图552完成效果图



本章向读者介绍了如何使用网页元素制作网页，包括以下重点。
 如何在网页中制作表格及设置其属性。
 利用表格的版面布局功能制作Banner页面。表格在网页制作中一个重要的功能就是布局页面。
 超链接的概念和分类及如何设置几种常用的超链接。
 表单的概念及制作方法。

1. 如何在标签选择器中选择表格的各个部分？
2. 用表格布局页面有哪些好处？
3. 网页中常见的图片格式有哪些？这些格式各有何特点？
4. 常见的超链接有哪些类型？
5. 什么是绝对路径？什么是站点根目录相对路径？
6. 表单的作用是什么？