模块五网页型多媒体课件设计与制作 网页型多媒体课件与传统课件相比，具有信息容纳量大、多种素材融合等特点，并且是一个开放的体系，方便对课件进行修改、增加和删除等编辑操作，易于在网上传输、流通与共享等。目前比较流行的网页制作软件是美国Macromedia(2005年被Adobe收购)公司开发的Dreamweaver 8，该软件是集网页制作和网站管理于一体的网页制作软件。 知识树 项目5.1站点的基本结构设计 在Dreamweaver中，站点既指Internet服务器上的站点，也指本地计算机中的本地站点。通常，应先在本地计算机上构建本地站点，创建合理的站点结构，使用合理的组织形式来管理站点中的文档，并对站点进行必要的测试，在全部准备好之后，再将整个站点所有内容上传到Internet服务器上，以便于浏览。 本项目通过为“软件项目管理”课程设计网页型多媒体教学课件，搭建站点并做结构设计，帮助读者了解制作网页型多媒体课件站点基本结构设计和站点的基本操作，能够创建一个简单的网页型课件的站点。  能够进行站点的创建、保存等基本操作。  能够对一个站点进行基本的结构设计。 任务1创建站点 视频讲解 网站是指在Internet上根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合，而站点则是网站用于管理其内容的场所，有利于编辑、修改设计的网页及相关参数。创建站点是网页设计的关键之一。 操作步骤如下。 (1) 打开Dreamweaver 8软件，选择“站点”→“新建站点”命令，如图51所示。 图51新建站点 (2) 打开“未命名站点1的站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入新建站点的名字“MyFirstSite”，如图52所示。 图52“未命名站点1的站点定义为”对话框——输入站点名字 (3) 单击“下一步”按钮，在该对话框中需要选择是否使用服务器技术。本任务选择“否，我不想使用服务器技术”，如图53所示。 图53“MyFirstSite的站点定义为”对话框——是否使用服务器技术 (4) 单击“下一步”按钮，在该对话框中需要选择在开发过程中如何使用文件，本任务选择默认选项“编辑我的计算机上的本地副本，完成后再上传到服务器(推荐)”。单击“您将把文件存储在计算机上的什么位置？”文本框右侧黄色文件夹按钮，选择要存储的磁盘路径，如F:＼MyFirstSite，如图54所示。 图54“MyFirstSite的站点定义为”对话框——使用文件 (5) 单击“下一步”按钮，在该对话框中需要选择如何连接到远程服务器，本任务选择“无”。因为在前面的步骤中选择的是不使用服务器技术，这里应与之对应，如图55所示。 图55“MyFirstSite的站点定义为”对话框——连接到远程服务器 (6) 单击“下一步”按钮，在该对话框中可以看到前面几个步骤设置的结果，如果需要更改，则单击“上一步”按钮进行设置修改； 如果已经确定，则单击“完成”按钮，如图56所示。Dreamweaver 8工作界面右下角会出现新建网站站点。 图56“MyFirstSite的站点定义为”对话框——总结 任务2设计站点网页结构 网页结构即网页内容的布局。创建网页结构实际上就是对网页内容的布局进行规划，网页结构的创建是页面优化的重要环节之一，会直接影响页面的用户体验及相关性，而且还在一定程度上影响网站的整体结构及页面被收录的数量。 操作步骤如下。 (1) 根据“软件项目管理”课程网站的内容特点，设计其站点网页整体结构，如图57所示。 图57站点网页结构 (2) 构思主页布局。网页型多媒体课件通常分为主页及分页面，网站主页布局主要指主页的框架和排版。主页的布局设计可以简单大气为主，将重要的内容展示给用户。合理的设计应该让网站根据屏幕的大小划分模式，并在显示器中以整个屏幕或半屏幕呈现，然后根据重要性从上到下和从左到右进行布局，以此来满足大多数用户的浏览习惯。本案例中主页布局设计如图58所示。 图58主页布局 图59分类保存网站素材 (3) 将收集好的网站素材元素分类保存。根据网页的设计及需要，整理已经收集好的制作网页所需要的素材元素，如文字、图片、动画、声音等，保存在各个分类文件夹中，文件夹的命名通常采用见名知意法，使用英文全拼或缩写名，如图59所示。 任务3搭建站点结构 站点是文件与文件夹的集合，根据要制作的MyFirstSite站点网页型课件的设计及内容，新建站点需要设置文件和文件夹。 视频讲解 (1) 新建文件夹。在文件面板的站点目录下右击，在弹出的快捷菜单中选择“新建文件夹”命令，如图510所示。然后给文件夹命名。在本项目中创建8个文件夹，分别命名为image、media、css、swf、txt、js、moan和fy。 图510站点新建文件夹 (2) 创建页面。为“软件项目管理”课程网站创建全部的页面。 操作步骤如下。 ① 在文件面板的站点根目录下右击，在弹出的快捷菜单中选择“新建文件”命令，然后给文件命名，首先为其添加一个首页，命名为index.html，如图511所示。 图511站点新建首页 ② 根据需要新建其他需要的页面，并进行相应的命名即可。 (3) 文件和文件夹的管理。对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击选中需要管理的文件和文件夹，然后右击，在弹出的快捷菜单中选择“编辑”选项，即可进行相关操作。 本项目通过为“软件项目管理”课程教学课件做准备工作，帮助读者了解网页型课件的站点基本结构的设计，能够制作一个简单的网页型课件的站点。 任选内容制作网页型课件，为其新建一个站点并搭建其基本结构。 要求： (1) 新建一个站点。 (2) 设计站点网页结构。 (3) 整理素材，分类保存。 (4) 搭建站点结构。 项目5.2利用布局表格设计网页型课件 在网页设计的各种要素中，网页布局设计是其中的重要一项。网页布局设计就是在页面内对组成网页的基本元素进行合理的组织安排，使网页便于浏览、阅读和理解，网页布局清晰、美观。 布局视图是一种特殊的表格视图，它的作用是用可视化的方法在页面上绘制复杂的表格。在布局视图中，用户可以在页面上绘制任意数量和大小的表格，而且在表格中的任意位置上还可以绘制任意数量和大小的单元格。 本项目通过使用布局表格制作如图512所示的网页。 图512项目5.2网页效果图  了解常用网页内容的组成要素。  了解常见网页的布局方式。  掌握布局表格的基本操作，并能使用布局表格进行页面布局的设计。 任务1绘制布局表格及布局单元格 1. 打开MyFirstSite中的网页index.html 视频讲解 2. 绘制顶部布局表格 操作步骤如下。 (1) 打开首页index.html，选择“文件”→“查看”→“表格模式”→“布局模式”，将视图切换到“布局视图”，选择“插入”→“布局对象”→“布局表格”命令，鼠标指针变成加号，定位鼠标指针到页面上，然后单击并拖动鼠标来创建布局表格，如图513所示。 图513创建布局表格 (2) 设置布局表格属性，在“属性”面板中将布局表格设置为宽1200px，高100px，表格效果如图514所示。 图514设置布局表格宽高 (3) 选择“插入”→“布局对象”→“布局单元格”命令，在布局表格内分别绘制三个布局单元格，宽度分别为250px、800px、150px，高度与布局表格等高，表格效果如图515所示。 图515在布局表格中插入布局单元格 3. 绘制导航栏布局表格 操作步骤如下。 (1) 继续绘制一个布局表格，宽1200px，高80px，表格效果如图516所示。 图516插入布局表格 (2) 切换到标准视图，如图517所示。 图517标准视图下的布局 4. 绘制右下面内容布局表格 操作步骤如下。 (1) 在绘制好的导航布局表格下，继续绘制一个布局表格，宽1200px，高480px，用于放置网页的主体内容。 (2) 使用布局单元格，将内容布局表格，分成2行，第1行高358px，第2行高122px。第1行分成3列，宽度分别为150px、200px、850px。切换到标准视图，如图518所示。 图518标准视图下的布局 任务2添加内容到单元格 视频讲解 (1) 根据要完成的效果图，将文件夹images中的图像元素添加到单元格。 (2) 根据要完成的效果图，将文字元素添加到单元格。 完成后的网页效果在浏览器中的显示如图519所示。 图519网页效果图 本项目通过制作如图519所示网页，帮助读者掌握了如何利用布局表格进行网页型课件的设计。 根据所提供素材，完成如图520所示网页。 要求： 利用布局表格完成网页布局。 图520同步练习网页效果图 项目5.3利用框架布局设计网页型课件 “软件项目管理”课程网站，所需文字、图片等资料已收集完毕，请为“软件项目管理”课程网站制作如图521～图524所示的网站首页及各子页面。 图521“软件项目管理”课程网站首页 图522“软件项目管理”课程网站“课程介绍”子网页 图523“软件项目管理”课程网站“什么是项目”子网页 图524“软件项目管理”课程网站“项目管理”子网页  能够掌握框架的基本操作。  能使用框架进行页面布局的设计。 “软件项目管理”课程网站各个网页的上部和左侧的网页是相同不变的，只有网页右侧内容随着左侧单击不同的链接而发生变化，这样的网页适合用框架来制作。网页被划分成了上、左、右三部分。其中，上面的网页作为网站LOGO，左侧的网页设置目录超链接文字，右侧网页放置与左侧链接相关的内容。各网页相互独立，但又通过超链接相互联系，所以采用框架的方式进行页面布局的设计。 视频讲解 任务1建立框架网页及内容 1. 打开站点MyFirstSite 2. 建立框架网页及内容 操作步骤如下。 (1) 新建框架网页。选择“文件”→“新建”→“框架集”→“上方固定，左侧嵌套”，如图525所示，新建一个框架网页。 图525新建框架网页 (2) 单击“创建”按钮，弹出如图526所示“框架标签辅助功能属性”对话框。三个框架默认命名为mainFrame、topFrame和leftFrame，如图526所示。 图526“框架标签辅助功能属性”对话框 (3) 在topFrame中插入图片，插入以后效果如图527所示。 图527框架网页中topFrame插入图片后效果图 图528leftFrame框架 网页内容 (4) 在leftFrame框架网页中插入内容。单击“插入”→“表格”，在leftFrame框架网页中插入3行1列表格，宽度为100%，间距、边距、填充、边框均为0。分别在表格的单元格中填入目录的名称，并为每个目录名称建立超链接，页面为空，后面将对应的子页面链接与之对应的目录名称，如图528所示。 (5) 在mainFrame框架网页中插入内容。在mainFrame框架中编辑如图529所示效果的内容。 图529mainFrame框架网页内容 任务2建立子网页及内容 (1) 在网站中新建一个用来展示“课程介绍”的HTML网页，命名为1.html。选择“修改”→“页面属性”，弹出“页面属性”对话框，将页面的上、下、左、右边距均设为0像素，如图530所示。 图530子网页“页面属性”对话框 (2) 制作用于页面布局的表格并插入内容。 操作步骤如下。 ① 在网页中插入一个6行3列的表格，填充、边距、间距均为0像素。 ② 在网页中插入如图531所示图片及文字。 图531子网页“课程介绍”网页效果图 (3) 同样的方法，分别新建并制作介绍“什么是项目”和“项目管理”等页面，命名为2.html、3.html，分别如图532和图533所示。 图532子网页“什么是项目”网页效果图 图533子网页“项目管理”网页效果图 任务3建立链接关系 建立链接关系具体内容将在项目5.4“备注”中详细讲解，在此不再赘述。 视频讲解 本项目通过制作“软件项目管理”课程网站，帮助读者掌握了如何利用框架布局进行网页型课件的设计。涉及知识点如下。 (1) 了解框架的应用场景。 (2) 框架的建立与保存。 (3) 使用框架进行网页型课件的设计与实现。 小豆丁手机网是一家专门售卖手机的公司，请根据所提供素材，为其完成如图534～图537所示网站首页及各子网页。 要求： 利用框架完成整个网站布局设计。 图534手机网站首页 图535手机网站子网页“vivo手机”页面 图536手机网站子网页“oppo手机”页面 图537手机网站子网页“华为手机”页面 项目5.4超链接的设计 视频讲解 网页型课件重要的是它具有网络相连的特性，这些网络相连的特性是通过超链接来完成的。超链接是一种允许用其他网页或站点之间进行链接的元素。各个网页链接在一起才能真正构成一个网站。 请在如图538所示的网页中所标示的位置，分别实现相应的链接效果。 (1) 在位置1处创建图片热区链接，且当鼠标指针经过轮廓时有超链接出现。 (2) 在位置2处创建链接，链接目标为goutong.html。 (3) 在位置3处各目录实现文字链接。 (4) 在位置4处创建电子邮件链接。 (5) 为目录“肢体语言”创建链接到内容“3.肢体语言”的锚点。 图538原网页  创建图片和图片热区链接。  创建文字链接。  创建电子邮件链接。  创建锚点链接。 任务1创建图片热区链接 (1) 在Dreamweaver 8中打开所给资料中index.html文件，选中要创建热区链接的图片(图538中位置1)，选择“属性”面板上的矩形热区工具，如图539所示。 (2) 在图片的“网站说明”文字处手动用鼠标画出一个覆盖文字的矩形区域，如图540所示。 图539“属性”面板矩形热区工具 图540画矩形区域 (3) 在“属性”面板上，可以单击链接后的“浏览”按钮，选择链接的目标文件，此处输入first.html文件，目标选择_blank，如图541所示。 图541创建热区链接 重复以上操作，可以分别为图片上的各种位置创建热区链接。 注意，当目标链接文件还没有建立时，可以在“链接”地址处输入一个“#”号，在创建好目标文件时再替换成目标文件即可。 任务2创建图片链接 (1) 打开index.html文件，选中要创建链接的图片(图538中位置2)，在“属性”面板中设置链接地址、目标和替换文本，如图542所示。 图542创建图片链接 (2) 选择“文件”→“保存”命令，按F12键浏览页面。 任务3创建文本链接 (1) 选中要创建链接的文字“沟通的目的”(图538中位置3)，在“属性”面板中输入链接地址“#”,目标选项设置为_blank，如图543所示。 图543创建文本链接 (2) 重复以上操作，为此处的其他文本创建超链接。 (3) 选择“文件”→“保存”命令，按F12键浏览页面。 注意，项目5.3任务3建立链接关系的操作步骤如下。 (1) 选中leftFrame中的超链接文字，将“课程介绍”链接到1.html，“什么是项目”链接到2.html，“项目管理”链接到3.html。 (2) 如图544所示，在“属性”面板中均将链接目标选项值设置为mainFrame。 图544目录文字链接属性面板 任务4创建电子邮件链接 (1) 将光标移动到插入电子邮件的位置(图538中位置4)，选择“插入”→“电子邮件链接”命令，弹出“电子邮件链接”对话框，在该对话框中输入要显示的文本和电子邮件的目标链接地址，如图545所示。 图545“电子邮件链接”对话框 (2) 也可以通过类似创建文本链接的方式，创建电子邮件链接，选中文本，在属性的链接处输入邮件地址。 (3) 选择“文件”→“保存”命令，按F12键浏览页面，如图546所示。 图546页面效果图 任务5创建锚点链接 (1) 选中表格下方内容中的“3.肢体语言”，把光标移动到“3.肢体语言”的前面。移动好之后，单击“工作区”→“常用”→“命名锚记”按钮，如图547所示。如果没有图中所示的图标，可以单击“窗口”，勾选“插入”即可。 图547选中进行锚点标记的内容 (2) 单击“命名锚记”按钮，弹出“命名锚记”对话框，给锚点添加名称，不要用汉字命名，此处将此锚点命名为“md3”，如图548所示。 图548“命名锚记”对话框 (3) 单击“确定”按钮，添加完锚点标记后，文字前面会有一个锚的小图标，如图549所示。 图549添加锚点标记后效果 (4) 回到左侧选中目录“肢体语言”链接，在属性设置界面，将锚点名称(md3)填写进链接内容，记得加“#”号。一个页面可以有很多的锚点，所以这里必须要加“#”号，如图550所示。 图550添加锚点链接 (5) 选择“文件”→“保存”命令，按F12键浏览页面。 本项目通过为网页所标记位置处实现超链接，帮助读者掌握在网页型课件中超链接的应用。 请在如图551所示的网页中所标示的位置，分别实现如下相应的链接效果。 (1) 在位置1处创建图片热区链接。 (2) 在位置2处实现文字链接。 (3) 在位置3处创建链接，链接目标为该图片。 (4) 在位置4处创建电子邮件链接。 图551原页面 项目5.5行为的设计 为了让读者在软件项目管理课程网页的使用中有更好的体验，需要在制作软件项目管理课程网页上添加一些动态交互式功能。 制作具有动态交互功能的网页。 (1) 打开网页，弹出浏览器窗口，如图552所示。 图552原页面 (2) 制作下拉菜单，如图553所示。 图553原页面下拉菜单 (3) 制作弹出式菜单，如图554所示。 图554弹出式菜单 (4) 为网页添加背景音乐，单击网页中“打开背景音乐”链接可播放音乐。  能够理解网页中行为的概念。  能够理解网页中动作的概念。  能够使用Dreamweaver 8的内置行为设计动态交互式网页型课件。 任务1制作基本页面 (1) 打开Dreamweaver 8，建立一个站点，并新建一个空白页面，命名为index.html。将页面属性设置为上、下、左、右边距均为0。 (2) 插入用于布局页面元素的表格。插入一个3行2列的表格，表格不显示边框，调整至充满整个页面。 (3) 表格内插入图片和文字。在表格第1行第1列内插入图片，第2行第1列内插入图片，第3行第1列内插入表格，在第1行第2列输入“欢迎进入软件项目管理课程网站”，换行输入“打开背景音乐”并添加空链接。 (4) 插入嵌套表格。表格第2行合并为一个单元格，第3行第2列内插入一个1行5列的表格，宽度为100%，在5个单元格内依次输入“文字首页”“教师资料”“教师项目”“资料下载”“留言板”。 视频讲解 任务2制作弹出浏览器窗口 弹出窗口是指打开网页、软件、手机App等的时候自动弹出的窗口。 操作步骤如下。 (1) 创建被弹出页面。新建一个网页，命名为pop.html,页面内输入简单的图片和文字，如图555所示。 图555pop.html (2) 添加“打开浏览器窗口”动作。在网站首页index.html中，选择body标签，打开“行为”面板，单击加号按钮，在“行为”菜单中选择“打开浏览器窗口”命令，如图556所示，弹出“打开浏览器窗口”对话框。 图556打开浏览器窗口 (3) 选择弹出窗口对应的文件。在要显示的URL中输入窗口文件的路径，或者单击“浏览”按钮，找到弹出窗口对应的文件，设置好弹出窗口的宽度和高度，如图557所示。 图557“打开浏览器窗口”对话框 (4) 设定触发动作的事件。单击“确定”按钮，更改触发弹出窗口的事件为onLoad，如图558所示。 图558设定触发动作事件为onLoad 任务3制作下拉菜单 视频讲解 下拉式菜单是菜单的一种表现形式。当用户选中一个选项后，该菜单会向下延伸出具有其他选项的另一个菜单。 操作步骤如下。 (1) 制作要显示和隐藏的层内容。在“教师资料”下面，绘制层layer4，并在层内插入2行1列的表格，输入单元格文字，如图559所示。 图559绘制菜单层 (2) 添加显示层动作。选择“教师资料”单元格，打开“行为”面板，单击加号按钮，在“行为”菜单中选择“显示隐藏层”选项，弹出“显示隐藏层”对话框，如图560所示。选中layer4，单击“显示”按钮后确定。 (3) 添加隐藏层动作。再次选择“教师资料”单元格，添加“显示隐藏层”动作，选择layer4，单击“隐藏”按钮后确定。 (4) 设定触发事件。把触发“显示层”动作的事件设置为onMouseOver，触发“隐藏层”动作的事件设置为onMouseOut，如图561所示。 图560“显示隐藏层”对话框 图561添加显示层动作 任务4制作弹出式菜单 弹出式菜单是菜单的一种表现形式，为用户交互提供了便利。操作步骤如下。 (1) 选择对象。选择文字“资源下载”，为其添加空链接。 (2) 设置选项卡内容。打开“行为”面板，单击“+”按钮，在行为菜单中选择“显示弹出式菜单”，弹出“显示弹出式菜单”对话框，如图562所示。 图562“显示弹出式菜单”对话框 视频讲解 ① “内容”选项卡： 此选项卡可设置菜单内容，在“文本”文本框中输入文本即可，单击“+”按钮可输入多个菜单选项，如图563所示。 图563“显示弹出式菜单”对话框——“内容”选项卡 ② “外观”选项卡： 在此选项卡中，可设置菜单项的字体、大小、颜色等，如图564所示。 ③ “高级”选项卡： 在此选项卡中，可设置菜单项的单元格高度、宽度、边距等，如图565所示。 ④ “位置”选项卡： 在此选项卡中，可设置菜单项相对于菜单出现的位置，可选右下、正下、正上、右上以及自定义位置，默认勾选“在发生onMouseOver事件时隐藏菜单”复选框，如图566所示。 图564“显示弹出式菜单”对话框——“外观”选项卡 图565“显示弹出式菜单”对话框——“高级”选项卡 图566“显示弹出式菜单”对话框——“位置”选项卡 在完成上述设置后，单击“确定”按钮，效果如图567所示。 图567弹出式菜单效果图 视频讲解 任务5为网页添加背景音乐 (1) 选择行为的对象。选择在网页中控制音乐播放的对象，即“打开背景音乐”文字链接。 (2) 选择要播放的声音文件。打开“行为”面板，单击“+”按钮，在“行为”菜单中选择“播放声音”选项，弹出“播放声音”对话框，如图568所示。在文本框中输入音乐文件的路径，或者单击“浏览”按钮找到音乐文件的路径，然后单击“确定”按钮即可。 图568“播放声音”对话框 (3) 设置触发动作的事件。选择事件，看默认事件是不是需要重新设定，可在事件菜单中进行选择，如图569所示。如果希望单击链接文字后播放，选择onClick事件； 如果希望网页加载后自动播放，选择onLoad事件。 图569设定“播放声音”的触发动作事件 本项目通过为制作具有动态交互功能的软件项目管理课程网页，帮助读者掌握了网页型课件中行为的设计。 请根据所给素材，制作符合要求的如图570所示网页。 要求： (1) 制作如图570所示的基本网页。 (2) 为“小明星们”制作下拉菜单，子菜单内容为： TFBoys、粉丝团、其他。 (3) 为“了解更多”制作弹出式菜单，子菜单内容为： 注册、登录、找回密码。 (4) 为网页添加背景音乐，单击网页中“畅听音乐吧”可播放音乐文件“两个人的剧场.mp3”。 图570基本网页 项目5.6表单的设计 在Dreamweaver中可以创建各种各样的表单，表单中可以包含各种对象，例如文本域、按钮、列表等。 制作一个如图571所示的留言表单。 视频讲解 图571表单效果图  能够在网页中制作表单。  能够使用表单中各类型控件。 任务1插入表单 在网页中添加表单时，首先必须创建表单。表单在浏览页中属于不可见元素，在Dreamweaver 8中插入一个表单。当页面处于“设计”时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，检查是否选中了“查看”→“可视化助理”→“不可见元素”。 (1) 将鼠标指针放在表单需要出现的位置，选择“插入”→“表单”→“表单”命令，如图572所示。 图572插入表单 (2) 即可以在界面中显示如图573所示红色的虚轮廓线。 图573插入表单后效果图 (3) 用鼠标选中表单，在“属性”面板上可以设置表单的各项属性，各属性设置值如图574所示。 图574设置表单属性 在“动作”文本框中指定处理该表单的动态或脚本的路径，此处设置为发送至邮箱410730889@qq.com。在“方法”下拉列表中，选择将表单数据传输到服务器的方法。 注意，表单方法有： post方法是为在HTTP请求中嵌入表单数据，get方法是将值追加到该页的URL中。默认使用浏览器的默认设置将表单数据发送到服务器。通常默认为get方法。 任务2在表单中插入内容 1. 在表单中插入表格 操作步骤如下。 (1) 将鼠标指针放在表单中，选择“插入”→“表格”命令。在表单中插入一个5行2列的表格，如图575所示。 图575在表单中插入表格 (2) 单击“确定”按钮后，效果如图576所示。 图576在表单中插入表格的效果图 (3) 如图577所示将表格的第1行与第5行分别合并单元格成为一列，合并完成后如图578所示。 图577合并单元格 图578合并单元格后效果图 2. 在表格中插入内容 操作步骤如下。 (1) 在第1行中输入文本“提交留言”； 在第2行选择“插入”→“表单”→“文本域”命令，如图579所示。 图579在表单中插入文本域 (2) 在弹出的对话框中，进行如图580所示设置。 图580设置标签属性 (3) 单击“确定”按钮，如图581所示。 图581添加“姓名”文本域后效果图 (4) 将姓名剪切到第2行第1列，同时设置第2行第2列为居中显示，如图582所示。 图582添加“姓名”文本域后效果图 (5) 同样的操作设置第3行，如图583所示。 图583添加“密码”文本域后效果图 (6) 在第4行列选择“插入”→“表单”→“文本区域”命令，弹出“输入标签辅助功能属性”对话框，进行设置，如图584所示。 图584设置文本区域属性 (7) 单击“确定”按钮后，效果如图585所示。 图585添加文本区域后的效果图 (8) 选择“插入”→“表单”→“按钮”命令，在第5行中插入两个按钮，选中第2个按钮，在属性设置中将其“值”属性改为“重置”，如图586所示。 图586在“属性”面板中设置按钮的“值”属性 (9) 选中表格，在“属性”面板中，可根据个人偏好，对表格进行背景颜色等设置，如图587所示。 图587在“属性”面板中设置表格的“背景颜色”属性 (10) 完成的表单如图588所示。 图588表单效果图 任务3添加跳转菜单 (1) 选中想要添加跳转菜单的位置，单击工具栏上的“跳转菜单”，如图589所示。 图589插入“跳转菜单” (2) 在弹出的“插入跳转菜单”对话框中，进行如图590所示设置。 图590“插入跳转菜单”对话框 (3) 单击“确定”按钮，效果如图591所示。 图591插入跳转菜单后效果图 视频讲解 (4) 按F12键预览网页，如图592所示。 (5) 在表单中输入信息，单击“提交”按钮，如图593所示。 (6) 单击“确定”按钮后出现如图594所示对话框，单击“允许”按钮即完成了表单的提交。 注意，表单选项各控件名称如图595所示。 图592网页效果图 图593进行表单提交 图594Microsoft Outlook对话框——是否允许发送电子邮件 图595表单控制  表单： 在文档中插入表单，任何其他表单对象，如文本域、按钮等都必须插入表单之中，这样浏览器才能正确处理这些数据。  文本域： 在表单中插入文本域。文本域可接受任何类型的字母数据项。输入的文本可以显示为单行、多行或者显示为项目符号或星号(用于保护密码)。  复选框： 在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。  单选按钮组： 在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮，例如，用户可以选择“是”或“否”。  列表/菜单： 可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且允许用户选择一个选项。  跳转菜单： 插入可导航的列表或弹出式菜单。跳转菜单允许插入一种菜单，在这种菜单中每个选项都链接到文档或文件。  图像域： 在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。  文件域： 在文档中插入空白文本域和“浏览”按钮。文件域可以使用户浏览到硬盘上的文件，并将文件作为表单数据上传。  按钮： 在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单，可以为按钮添加自定义标签或名称。  标签： 在文档中给表单加上标签，以