实验5网页高级制作(一)

实验五 网页高级制作(一)
一、实验目的：
1．熟悉Dreamweaver8创建网页动态连接; 2．熟悉Dreamweaver8创建框架。
二、实验环境

WINXP或WIN2000计算机
三、实验内容及步骤
利用 Dreamweaver8创建一个包含多个网 页元素的网页。
四、实验过程
1、利用 Dreamweaver8创建一个包含多个 网页元素的网页。
文件名称：index.htm
图2 空白网页index.htm
四、实验过程
④
插入一个一行一列 的表格。 单击菜单【插入】 选择【表格】命令， 弹出“表格”对话 框，行数文本框输 入“1”，列数文本 框输入“1”，边框 粗细文本框输入 “0”。表格宽度选 择“百分比”，文 本框内输入“80”。 结果如图3所示。 点击【确定】按钮 完成表格插入。
①选中文本
②设置“编号列表”
③设置“文本缩进”
图9 添加编号列表
图10 添加编号列表过程示意图
四、实验过程
(13)添加超级链接 a)添加页内超级链接 定义命名锚记

把光标放在第二条水平线下的文字“我的学校”左边。单击菜单【插入】选择【命名锚记】 命令，弹出“命名锚记”对话框。如图8-11所示。在该对话框的文本框中输入“a1”作为锚记 名称。
四、实验过程
①选中“我的爱好” ①选中文本
②设置“项目列表” ②设置“项目列表”
③设置“文本缩进”
（a）
（b）
图7 添加项目列表
图8 添加项目列表过程示意图
四、实验过程
(12) 添加水平线和“友情链接”文字内容。 按照第（7）步骤添加水平线。 在该水平线下添加编号列表“我的爱好”。如图9所示。
图13 超级链接对话框
Baidu Nhomakorabea

点击“链接”文本框右边的 “浏览”图标（ ），弹出 “选择文件对话框”，选择 “resume.htm”文件。如图14 所示
图14 选择超级链接网页文件resume.htm
四、实验过程

点击【确定】按 钮，返回“超级 链接对话框”， “目标”列表框 中选择“_self”， 如图15所示。点 击【确定】按钮， 完成单个页面超 级链接设置。 图15 超级链接设置
③
文件夹E:\web2\images。 在中国民航飞行学院网 站 （http://www.cafuc.edu .cn）上下载一张标题图 片，并保存到 E:\web2\images路径下。 如案例3所示操作步骤， 打开Dreamweaver8， 并创建一个空白网页， 保存到E:\web2，名称 命名为index.htm。如图 2所示。

输入“友情链接”，设置好字体、字号。按回车键。 输入“中国民航飞行学院首页”，设置好字体、字号，按回车键。 照此方法依次输入“中国民航资源网”、“中国民航大学”、“北京航空航天大学”、 “南京航空航天大学”。

选中“中国民航飞航飞行学院首页”到“南京航空航天大学”文本。设置“编号 列表”，设置“文本缩进”。如图10所示。
四、实验过程
c)添加网站超级链接


选中“友情链接”下 的“中国民航飞行学 院首页”文字内容。 在“链接”右边文本 框输入 “http://www.cafuc.e du.cn”，按回车键； “目标”的下拉列表 框中选择“_blank”。 如图16所示。保存网 页。

其他几个网站的超级 链接按照上述步骤完 成。 图16 添加网站超级链接
四、实验过程
图5 添加文字、水平线和表格网页设计示例
四、实验过程
⑨
在第二条水平线下添 加文字“我的学校”， 另起一行添加学校介 绍。




输入文字“我的学 校”，按回车键， 留出空行。 输入中国民航飞行 学院的文字介绍， 文字内容可以从中 国民航飞行学院主 页上搜索并复制过 来。 调整文字的对齐方 式和文字的字体、 字号。 调整段落格式。



输入“我的爱好”，设置好字体、字号。按回车键。
选中“我的爱好”，设置“项目列表”。如图8(a)所示。 输入“足球”，设置好字体、字号，按回车键。 照此方法依次输入“上网”、“旅游”、“文学”、“经 济”。

选中“足球”到“经济”文本。设置“项目列表”， 设置“文本缩进”。如图8（b）所示。
图3 表格属性设置
四、实验过程
⑤
插入图片 光标放入表格第一行中，点击菜单【插入】选择【图像】命令，弹 出“图像”对话框。在保存的文件夹E:\web2\images下选择刚才下载 保存的图片文件。如图4（a）所示。点击【确定】按钮完成图像插入。 显示结果如图4（b）所示。
（a）选择图片源
（b）图片插入效果
图4 插入图片
四、实验过程
⑥

⑦

⑧

添加文字 在图片下方添加标题文字“欢迎光临我的个人主 页！”。设置文字居中，字体为“隶书”，字号大小 为“24”，颜色为“蓝色”。 插入2条水平线 在“欢迎光临我的个人主页！”文字后面按回车键， 切换到下一行。点击菜单【插入】选择【HTML】 子菜单选择【水平线】命令。并设置水平线为“居 中对齐”。复制并粘贴该水平线。 插入一个一行五列的表格。 在第一条水平线下面插入一个一行五列的表格。表格 属性设置为：对齐方式为“居中”，表格宽度为 “100％”，边框粗细为“0”。并在五个单元格中分 别输入“我的学校”、“我的专业”、“我的简历”、 “我的爱好”和“友情链接”。并设置这些文字的字 体为“宋体”，24磅。如图5所示。

在单击【确定】按钮。第一个命名锚记设置完成。 重复以上操作，设置“我的专业”、“我的爱好”和“友情链接”命名锚记，其锚记名称分别为 “a2”、“a3”和“a4”。 选中一行五列表格中的文字“我的学校”，然后在链接文本框中输入“#a1”，保存网页。则“我的学 校”页内超级链接设置完成。如图8-12所示。 其他“我的专业”、“我的爱好”和“友情链接”根据以上步骤设置完成。
计算机网络实用教程
实验课件
实验说明：
每次实验均须写明实验报告，实验报告样本在 网站http://222.18.75.11/shiyan上下载“计算 机网络实用教程实验报告模版.doc”。 实验报告文件的名称为：实验名称-学号-姓名。 例如： 实验一-20060611018-姓名.doc 并将实验报告提交到以下网址 ftp://222.18.75.75.11的“计算机网络实用教 程实验”目录下的各班级目录下 用户名：user 密 码：111
五、实验总结

通过这个实验让学生掌握使用 DreamWaver进行多元素网页设计的能力。
六、完成实验报告
(1)实验地点，参加人员，实验时间。 (2)实验内容：将实验步骤作详细记录，可 以截图。 (3)实验的心得体会。
七、实验思考题

网站和Dreamweaver 8中站点的区别？
如图6所示。 图6 文字录入及格式设置
四、实验过程
添加水平线和“我的专业”文字内容。 按照第（7）步和第（9）步的方法进行添加水平线和 “我的专业”文字内容。 (11) 添加水平线和“我的爱好”文字内容。 按照第（7）步的方法添加水平线。
⑩

在该水平线下添加项目列表“我的爱好”。如图7所示。图7 添加项目列表
四、实验过程
(14)设置网页背景颜色。

点击【页面属性】按钮，弹出“页面属性”对 话框。 选择“背景颜色”为黄色。 点击【确定】按钮。背景颜色设置完成
在“页面属性”对话框中，还可以设置网页 页面的其他属性。 (15)网页浏览。 (16)点击编辑界面上面的“在浏览器中预览/调 试”浏览整个网页，查看网页效果

1）.要求
（1）创建的网页包含图片、表格、超级连接等网 页元素。 （2）网页保存为index.htm，物理路径为E:\web2。 （3）结果如图1所示。

图1 包含多元素的网页index.htm
四、实验过程
2. 操作步骤 ① 建立文件夹E:\web2和
②
站点名称：myweb 物理路径：e:\web2Myweb

添加网页内的超链接

①选中文本“我的学校”
②输入“#a1”
图11命名锚记对话框
图12 添加页内超级链接
四、实验过程
“浏览”图标
b)添加单个网页超级链接

在当前物理路径下建立一个空 白网页，保存为resume.htm。 选中一行五列表格中的文字 “我的简历”，点击菜单【插 入】选择【超级链接】命令， 弹出“超级链接”对话框。如 图13所示。