框架型网页的制作.docVIP

实验六　框架型网页的制作 实验目的 1、掌握框架集和框架的创建和保存； 2、掌握框架、框架集的编辑和属性的设置； 3、掌握框架超级链接。 二、实验内容 利用框架制作如下图所示的页面效果，框架集网页为index.html， 其中：图2-9-1为打开index.html的效果图； 图2-9-2 单击左侧“勇敢的心”的网页效果图； 图2-9-3 单击左侧“肖申克的救赎”的网页效果图； 图2-9-4 单击左侧“阿凡达”的网页效果图； 图2-9-5 单击左侧“战马”的网页效果图； 图2-9-1 图2-9-2 图2-9-3 图2-9-4 图2-9-5 三、知识点分解 该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。 四、实验步骤 1、选择[文件]/[新建]菜单命令。 2、在“新建文档”对话框“示例中的页”列表中选择“框架集”选项。 3、从“框架集”列表选择相应的框架集，如图2-9-8所示。 图2-9-8 “新建文档”对话框 4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。 5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。 6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。 注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。 7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。 8、打开top.html，依次插入图片，定义图片宽和高均为200px。 注意：可以不需要打开相对应的框架文件，直接在index.html文档中对框架文件进行编辑。 9、按【Ctrl+S】保存该网页。 10、打开left.html，输入文本，在页面属性中设置文本颜色、大小和字体。 11、由于四部电影分别对应4个网页，在框架mainFrame里面进行显示，所以需要新建4个html文档，分别为braveheart.html,sh.html,afd.html,zm.html。分别将电影简介添加到四个对应的页面。 12、打开left.html，依次给4部电影添加超级链接，《勇敢的心》链接到braveheart.html，目标（即当点击链接时的显示区域）选择mianFrame,然后确定；《肖申克的救赎》链接到sh.html，目标选择mianFrame,然后确定；《阿凡达》链接到afd.html, 目标选择mianFrame,然后确定；《战马》链接到zm.html，目标选择mianFrame,然后确定；打开页面属性，定义字号、字体和颜色，定义链接的样式。（链接相对与文档） 12、按【Ctrl+S】保存该网页。 13、打开main.html，制作一个图像查看器来浏览图片，方法已经试验过，请同学们自行制作。 14、按【Ctrl+S】保存该网页。 15、回到index.html，按【F12】预览。