（3）在第二行插入表单，在出现的表单虚框中充分利用表格和单元格排版，表格宽度为90%，框线蓝色、在网页内居中，参考样张。（建议分上、中、下三个表格排版）
（4）表格中所有字段标签文本如：姓名、地址、个人简历等CSS设置均用方正姚体、18磅、蓝色、单元格内居中，见下图：设置新CSS规则、规则适用范围为表格内所有文字、框线。
图5-9 表单内表格CSS样式
（5）表单右上角放置照片，表单中插入花边图片“背景花纹3.JPG”分隔。
（6）输入时需校验的文本用Spry框架，如出生年月文本请选用表单里的Spry文本域（Spry是javascript的一个框架、可以设置行为、用于检查用户输入的内容）。
? 选中文本框上蓝色的Spry文本域，出现如下图的属性，类型
选整数、状态为初始、验证于change、设置限制用户可输入4数字；取值范围从1950～2010。
图5-10 Spry文本域
图5-11 Spry属性设置
图5-12 出生年月文本框设置
? 再选中文本框，按图5-12设置：
（7）表单中 “单选按钮”根据项目各自分组（ID标签不同）、每组均设置一个“默认选中”。 （8）下拉框月份1—12
（9）最后一行左边为个人简历文本区，右边为“兴趣特长”复选框组，按样张添加各自的复选框，排列整齐。
（10）添加“提交”和“重置”按钮、保存后浏览该网页。
（11）填写表单内容并进行检查，如出生年月、身份证密码显示、单选按钮是否冲突、点击“重置”按钮后是否清表单内容等。
注意：表单的提交效果必须在站点正式发布成功成为网站后才能看到，样张请参照范例四样张。 （13）用IE浏览器浏览本网页、根据自己实际情况填写表单内容、屏幕截图、在画图软件中保
6
存为JPG图片、上传。
（14）下课前将站点导出，并将该站点文件与Dreamweaver范例四文件保存在自己U盘里。
思考：为什么说网页表单是网页的一种交互式工具？表单中有多个不同类型的选项按钮或复选按钮是用什么进行区分的？表单中各按钮、各域的适用范围是什么？（如：个人简历在表单中应该用什么表单域？婚否应该用什么表单按钮？）
范例五：多媒体框架网页
（1）将Dreamweaver范例五文件夹移到C盘根目录下，启动Dreamweaver，新建站点：在对话框内选择高级、网站名为自己姓名+站点5、本地根文件夹为范例五文件夹、默认图像文件夹为范例五文件夹内的images文件夹、在URL地址中输入默认本机虚拟服务器地址http://localhost 或http://127.0.0.1 、启用缓存、确定。
（2）新建立一个框架网页：文件/新建/示例中的页/左侧固定，上方嵌套/创建/为每一个框架指定一个标题/三个框架标题都不变/确定，见图5-13。
（3）左框架：文件/在框架中打开/left.htm，窗口/框架/设置左框架属性：边框“是”、滚动“是”、能调整大小，其余顶框架与主框架设置同左框架。 （4）顶框架：文件/在框架中打开/top.htm，设置同左框架.
（5）鼠标选中主框架、设置main网页背景图片为“back.jpg”、保存为main.htm，设置同上。 （6）文件/保存框架集/将整个框架文件保存为“框架多媒体网页.htm”。
（7）插入一个AP DIV 的层（插入/布局对象）、大小为700×400像素、在该层插入/媒体/插件、视频源文件为“1.wmv”，适当调整大小视频的大小与层的大小一致，反复调整层在本网页中的位置、浏览网页观察效果。
顶框架 左 框 架 主框架 图5-13 框架网页
（8）按样张在top网页表格左单元格内添加：网页、图片和视频三个项目符号、大小20磅、自己设定超链接，中单元格插入SWF动画“bar91”、调整大小，右单元格插入音乐“摇篮曲”。 （9）选中left.htm网页，选中网页中全部文本、添加音乐：菜单/窗口/行为/在行为任务窗格中点击“+”号/播放声音/选择“海滨之歌”为源文件、激发事件选择“onclick”(鼠标点击)，保存全部、浏览“框架多媒体网页-自己姓名”.htm”观察效果，见图5-14。
图5-14 行为
至此、我们在本框架多媒体网页中先后配置了视频“1.wmv”、动画“bar91.swf”、音频“海滨之歌.mp3”和超链接音频“yaolan.mid”，网页背景图片，通过本范例我们基本上掌握了多媒体
7
网页图片、动画、视频和音频的设计与配置方法层和行为的初级应用。
样张见图5-15。检查、浏览无误后保存，将整个网站文件夹压缩成包后上传。
图5-15 框架、多媒体网页样张
（10）下课前将站点导出，并将该站点文件与Dreamweaver范例五文件保存在自己U盘里。
5.3 实验内容
实验一：熟悉 Hypertext Markup Language
（1）简单网页的制作：将实验一文件夹放置在桌面上，应用记事本软件打开“我的第一张网页”文件：建立第一张网页：（注意：除了中文字之外，其余超文本标记语言全部换用英文、半角） （2）网页标题为“我的第一个网页+学生自己姓名” （3）网页内容一：粗体字、“实验一” （4）换行
（5）网页内容二：粗体字、“欢迎访问我的网页” （6）换行
（7）网页内容三：添加一条水平线 （8）换行
（9）网页内容四：红色6号字体、自己学号 （10）网页结束、另存为网页格式文件、打开浏览。
请参考实验一样张。
实验二：简单的网页制作
（1）将Dreamweaver实验二文件夹放置在C盘根目录下，打开Dreamweaver，新建站点：网站名为自己姓名+站点4、本地根文件夹为实验二文件夹、默认图像文件夹为实验二文件夹内的images文件夹、在URL地址中使用默认本机虚拟服务器地址http://localhost 或
8
http://127.0.0.1 、启用缓存；新建一空白网页、设置网页标题为“排版网页”。
（2）使用表格进行网页布局：表格宽度900、在网页内表格居中，边框宽度为0，第一行：300×120、600×120，第二行高×30，见图5-16。
（3）找到相应的图片按实验二样张添加在第一、第二行，将图片调整到各自单元格大小，花边调整大小为449×30然后复制一份在右边。
（4）第三行表格框线宽度为1、颜色蓝；左600×200（浅绿色底纹）、添加文字“学校介绍”；文字首行缩进2字、宋体、16磅、适当调整行距。
（5）（可选）在右边添加字幕，楷体、30磅、红色、滚动向上、楷体、红色、36磅大小，参考范例三。
（6）表格最后2行框线宽度为1、左边上
图5-16表格和单元格
第二行 200×40、下200×160，右边合并。左上格添加文字“我的第二张网页”、隶书、20磅、蓝色、居中。操作方法同上，在单元格属性中设置居中、在内联样式中设置大小、颜色、字体。
（7）在左下单元格中插入图片（首页、注册、联系我）调整到与单元格相适应的大小。 （8）在右单元格中插入图片，将图片调整大小与单元格大小一致。
（9）保存为“我的第二张网页.htm” 在桌面上，然后用IE浏览器打开观察，对照实验二样张。
请参考实验二样张。
实验三：网页表单
（1）将Dreamweaver实验三文件夹放置在C盘根目录下，打开Dreamweaver，新建站点：网站名为自己姓名+站点6、本地根文件夹为实验三文件夹、默认图像文件夹为实验三文件夹内的images文件夹、在URL地址中使用默认本机虚拟服务器地址http://localhost 或http://127.0.0.1 、启用缓存；新建一空白网页、设置网页标题为“调查表”，保存网页在Dreamweaver实验三文件夹内，文件名“我的表单网页.htm”，在网页中输入第一行文本“上网调查表”，内联式样/字体为”华文彩云”，蓝色，36磅，并使其居中，背景图片back.gif。
（2）在第二行插入一个表单，在出现的表单虚框中添加一个1×4的表格，框线宽度1。 （3）“姓名”后面为表单文本域、ID为“name”、宽度为18；“密码”后的文本域ID为“password”，宽度为22；但类型为密码；“性别”后面插入两个“选项按钮”，两个单选按钮的名称均为“XB”，并在“男”前的单选按钮上选择“已勾选”（注意：属于同一个组的多个单选按钮其组名称必须相同，而不同组的单选按钮其组名称必须不同！）。
（4）在后一个单元格内输入年龄；后面为 spry验证文本域，宽度10、初始值20、整数类型，最小值1、最大值150、验证于“onchange”、预览状态设定为“初始”、保存后预览，在本年龄框内输入小于1的数字和大于150的数字，观察有何结果？理解spry验证文本域的作用。 （5）再添加一个4×2的表格，框线宽度1、第一行插入表单单选按钮组1“RadioGroup1”、四个“单选按钮”，整理为一行排列、其值不变。
9
（6）第二行插入表单复选框组1四个“选项”。四个“复选按钮”，整理为一行排列、其值不变。 （7）第三行插入名称为“LB”的下拉式列表，编辑下拉框：添加“请选择”及三个标题（新闻时事、文学艺术、体育竞技）共四个栏目名称，将“请选择”设为在下拉框内的初始显示。 （8）表格的最后一行插入一个字符宽度为50，高度为5行的文本区域，ID为“pingjia”，其中有初始文字“请不吝赐教”。
（9）添加“提交”按钮和“重置”按钮，保存/浏览。
请参考实验三网页表单样张。
实验四：超链接网页
（1）将实验四文件夹移到C盘根目录下，C:\\Dreamweaver实验四。打开Dreamweaver，菜单/站点/新建站点：在对话框内选择高级、网站名为自己姓名+站点7、本地根文件夹为实验四文件夹、默认图像文件夹为实验四文件夹内的images文件夹、在URL地址中输入默认本机虚拟服务器地址http://localhost 或http://127.0.0.1 、启用缓存，确定。
（2）打开“超链接网页”，设置该网页标题为自己姓名+超链接网页、超链接CSS样式如下：
? 超链接颜色：#00F ? 链接后颜色：#600
? 活动链接颜色（鼠标移到链接处颜色）：#C00 设置该网页的背景图片为back.jpg
（3）按样张在表格中补齐TP1～TP5五张图片（TP6已经显示在第六个单元格内）；下面文章中每节内容前均有图片，如没有则请依次重新插入图片，所有图片大小为：300 × 200，见图5-17。 （4）为文章内六个标题添加命令锚记：鼠标放文章里的小标题前：
1.九寨沟地理、菜单/插入/命令锚记/输入“m1”/确定，然后依次添加锚记标题2 – 标题6，再选择红色的隶书总标题“九寨沟”、添加锚记“九寨沟”，自己一一记录下所用过的锚记符号，避免重复。
（5）为目录“1. 九寨沟地理 -- 6. 九寨沟气候”建立与文章内各自标题的锚记超链接：选择目录“1. 九寨沟地理”/在下面的属性面板中选择HTML属性/链接/在链接文本框内输入“#m1”，注意一定要加“#”/回车，一个锚记超链接就做好
图5-18 锚记超链接
图5-17 网页布局
了，后面的小标题2～小标题6均一一与文章中所建立的“#m2”～ “#m6”建立链接，最后的文字“返回目录”与网页最上面锚记“九寨沟”链接，见图5-18。
（6）图片的超链接：选中第一行右边六张小图片中的第六张/在下面的属性面板中选择HTML属性/
10