（7）再在花边的下方添加一个2×2表格、框线1、表宽900像素、在网页内居中、（表格分别添置是为了更方便地控制单元格内容的布局）在第一列上单元格内插入图片“01.jpg”、在下单元格插入图片“14.jpg”，合并第二列、背景色#99FFFF、放置“网页介绍”文本；宋体、棕色、段落缩进2字。
（8）添加第四个表格，1×3、样式同上，左单元格图片“12.jpg”、中间图片“02.jpg”。 保存本网页、然后再另存为一个网页（做一个备份）
（9）在右边单元格添加字幕，楷体、36磅、红色、滚动向上，用编写HTML代码的方法来实现该功能：
首先在右单元格内输入文字“欢迎光临！”，光标停留在文字上，在下面单元格属性栏内设置水平对齐为居中，切换CSS样式，目标规
图5-8 单元格属性工具栏与CSS样式属性栏
则为新内联样式，设：楷体、红色、36磅大小，见图5-8，然后切换到代码视图，原代码如下：
〈td width=\楷体'; font-size: 36px;\〉欢迎光临! 〈/td〉注：单元格宽度为298，还有2点像素为左右两根蓝色框线所用，HTML语言前后都要用英文状态下的大于小于号括起，鼠标选定在“欢迎光临！”之前、换行；添加和改动如下：
〈marquee direction=\〉 欢迎光临！ 〈/marquee〉〈/td〉
滚动字幕的HTML代码为〈marquee〉 ****〈/marquee〉 ，中间*号表示要滚动的文字、direction=\表示滚动方向、style=\楷体\表示设置文字颜色用#加3组十六进制数表示、大小用font-size:数字+pt（磅）表示、字体用font-family: *体表示，中间用分号连接，整个style设置前后用双引号括起。
保存后浏览效果、如正常显示向上滚动则在“欢迎光临！”后换行、添加“设计者：自己姓名”、蓝色、18磅。
注意：万一滚动字幕失败并且改不回前一步正确样式，则删除该网页然后将（8）最后复制的备份网页改名为“index.htm”，再复制一份做备份。
思考：表格、单元格的关系，网页中文字、图片的排版主要依靠什么工具？框线的宽度设置为0，此时表格的作用是什么？网页、文字、表格等格式通常靠什么设置？
范例四：网页表单
（1）将Dreamweaver范例四文件夹复制C盘根目录下，启动Dreamweaver，新建站点;“自己姓名+站点3”、站点默认文件夹为Dreamweaver范例四、图片文件夹为images、新建一个空白的网页，保存为“表单.htm”。
（2）在网页中输入第一行文本“企事业单位联合招聘表”，字体“隶书”，蓝色，36磅，并使其居中，网页标题为“联合招聘表”、按样张设置网页背景图片。
5
（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
