实验6 网页高级制作(二)

计算机网络实用教程实验课件

实验说明：每次实验均须写明实验报告，实验报告样本在 网站http://222.18.75.11/shiyan上下载“计算 机网络实用教程实验报告模版.doc”。 实验报告文件的名称为：实验名称-学号-姓名。 例如： 实验一-20060611018-姓名.doc 并将实验报告提交到以下网址 ftp://222.18.75.75.11的“计算机网络实用教 程实验”目录下的各班级目录下 用户名：user 密 码：111

实验六 网页高级制作一、实验目的：1.熟悉Dreamweaver8创建网页动态连接; 2.熟悉Dreamweaver8创建框架。

二、实验环境WINXP或WIN2000计算机

三、实验内容及步骤利用 Dreamweaver8创建一个框架网页。

四、实验过程1、利用 Dreamweaver8创建一个框架网页。1).要求(1)创建的框架网页表格、超级连接等网页元素。 (2)网页保存为resume.htm,物理路径为 E:\web2。 (3)结果如图1所示。

图1 框架网页示例

四、实验过程2. 操作步骤 (1)框架网页的创建启动Dreamweaver8,点击菜单【文件】 选择【新建】命令 弹出“新建 文档”对话框。“类别”列表框中选择“框架集”,“框架集”列表框中 选择“上方固定，左侧嵌套”。如图2所示。点击【创建】按钮。 弹出“框架标签辅助功能属性”对话框，点击【确定】按钮即可。框架也 创建完成，初始界面如图3所示。顶端网页文件名称缺省为： untitledFrame-2.html,左边网页文件名称缺省为：untitledFrame-3.html, 右边网页文件名称缺省为：untitled-1.html,框架文件名称缺省为： UntitledFrameset-2.html 。 保存框架页。点击菜单【文件】 选择【保存全部】命令，保存文件UntitledFrameset-2.html 为resume.htm。保存文件Untitled-1.html为right.htm。保存文件untitledFrame3.html为left.htm。保存文件untitledFrame-2.html为top.htm。

四、实验过程①选择“框架集” 框架顶部网页

框架右网页

②选择“上方固定，左侧嵌 套”

③点击“创建”按钮

框架左网页

图2 新建框架集文档对话框

图3 新建框架集初始界面

四、实验过程(2)框架页内容的创建。 依照案例1的方法对top.htm、 right.htm和left.htm进行修改，要 求如下：top.htm网页的内容为：文字 “我的个人简历”,字体24号， 隶书，蓝色，居中。 left.htm网页的内容为：换行输 入“个人资料”、“教育经 历”、“所获奖励”、“社会 活动”和“兴趣爱好”等内容。 right.htm网页的内容为：个人资 料的详细信息。用项目列表的 方式表示。包括“姓名”、 “性别”、“出生年月”、 “是否党团员”、“联系方 式”、“家庭住址”等内容。

设置好后的界面如图4所示。 图4 修改好后的框架集网页

四、实验过程(3)框架页面超级

链接设置。a) b) c) d)

创建“教育经历”、“所获奖励”、“社会活动”和“兴趣爱好”网页，网页名称分别为 jiaoyu.htm、jiangli.htm、shehui.htm和xingqu.htm。 选中left.htm中的“个人资料”文本，点击菜单【插入】 选择【超级链接】命令，弹出“超级链 接”对话框。 点击“超级链接”对话框中“链接”文本框右边的“浏览图标”,弹出“选择文件”对话框，选择 “right.htm”文件，点击【确定】按钮，返回“超级链接”对话框。 点击“超级链接”对话框中“目标”下拉列表框，选择“mainframe”选项。如图5所示。

图5 目标选项e) f) g) 点击【确定】按钮，则“个人资料”的超级链接设置成功。 重复b)~e)步骤，设置left.htm中的其他文本的超级链接，注意“教育经历”链接到“jiaoyu.htm” 文件，“所获奖励”链接到“jiangli.htm”文件，“社会经历”链接到“shehui.htm”文件，“兴趣爱 好”链接到“xingqu.htm”文件。 点击菜单【文件】选择【保存全部】命令，保存所有的框架集文件。

四、实验过程(4)预览框架集页面。点击“设计”工具栏上面的“在浏览器中预览/调 试”图标()。在IE中预览如图6所示。

图6 框架网页浏览结果

五、实验总结通过这个实验让学生掌握使用 DreamWaver进行框架网页设计的能力。

六、完成实验报告(1)实验地点，参加人员，实验时间。 (2)实验内容：将实验步骤作详细记录，可 以截图。 (3)实验的心得体会。

七、实验思考题框架网页设计代码有什么特点？

本文来源：https://www.bwwdw.com/article/2mg4.html