实训五 利用框架制作网页.docVIP

实训五 应用框架技术制作网页 实训目标：应用框架技术制作“畅想未来”网页，效果如下图所示。 相关知识点： 框架的基本概念 创建框架结构的方法 框架页面导航条的链接方法 设置框架和框架集属性的方法 本实训重点 创建框架结构 框架页面导航的链接 保存框架文件 实训内容 一、准备工作 （一）复制文件 把“实训五 利用框架制作网页\实训”中的“materials” 文件夹复制到D：盘根目录。 （二）新建站点 站点名称：利用框架制作网页 站点根文件夹：D:\ materials 二、创建框架结构 1．新建一个网页文件，插入一个如下图所示的框架集 操作步骤如下： （1）新建一个网页文件。 （2）在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，插入框架集，如下图所示。 （3）在弹出的“框架标签辅助功能属性”对话框中，可以为每一个框架指定一个标题，此处使用默认值，如下图所示，单击“确定”按钮。 （4）将鼠标移到框架边框，当鼠标指针变成上下箭头时，可以调整各个框架的大小。 三、保存框架集网页及编辑框架集页面内容 （一）保存框架集网页 分别保存框架集网页和各个框架中的网页文件 操作步骤如下： （1）在文档窗口中，单击框架边框，选中整个框架集。 （2）选择“文件”→“保存框架页”命令，如下图所示。在“另存为”对话框中将框架集网页保存到本地站点根文件夹下，取名为index7_1.html。 （3）将插入点置于顶端框架，在菜单栏中选择“文件”→“保存框架”框架命令，如下图所示。在“另存为”对话框中将顶端框架中的网页保存到本地站点根文件夹下，取名为index7_top1.html。 （4）用相同的方法，将左侧和右侧框架中的网页分别保存到本地站点根文件夹下，取名为index7_left.html和index7_main.html。 （二）编辑框架集页面内容 在3个区域（框架）中分别插入相应的内容，结果如下图所示。 （1）将插入点置于顶部框架中，设置页面的左边距、上边距均为0，插入图像img6_1.jpg。 （2）将插入点置于左侧框架中，设置页面的左、上边距为0，插入页面导航栏及友情链接内容，并链接外部样式文件“css_chapter6.css”美化页面，效果如下图所示。 （3）将插入点置于右下方的主框架中，设置页面的上边距为0，插入网页的主体内容（也可将实训四的index6.html文件中的相应部分复制过来），并链接外部样式文件“css_chapter6.css”美化页面。结果如下图所示。 （4）显示框架边框，适当地调整框架大小，使顶端和左侧框架中的内容能够完全显示出来。 （5）按F12键，此时会弹出如下图所示的对话框。该对话框提示读者在预览框架集网页之前必须先进行保存文件操作。单击“确定”按钮，保存并预览网页。 四、修饰框架集网页外观 （一）设置框架集属性 1．精确调整框架大小，使顶端框架的行高为250像素、左侧框架的列宽为200像素。 操作步骤如下： （1）在“文档”窗口的“设计”视图中单击框架集中上下两个框架之间的边框或在“框架”面板中单击围绕外框架集的立体边框，选择外框架集，如下图所示。 （2）在框架集属性面板“值”的文本框中输入250，并在“单位”下拉列表中选择“像素”。 （3）在框架面板上单击上下之间的立体边框，选中内框架集，如下图所示。 （3）如下图所示，在内框架集属性面板的“值”文本框中输入200，并在“单位”下拉列表中选择“像素”。 2．为框架集网页index7_1.html设置文档标题 操作步骤如下： （1）查看文档窗口标题栏上的文件名是否为“index7_1.html”，如果不是，请选中框架集。 （2）在“文档”工具栏的“标题”文本框中输入“畅想未来”。 （3）预览页面。 （二）设置框架属性 1．自动为左侧框架添加滚动条，效果如下图所示 操作步骤如下： （1）在“框架”面板中单击leftFrame框架，选中左侧框架。 （2）如下图所示，在框架属性面板“滚动”下拉列表中选择“自动”。 2．在index7_1.htm的基础上设置边框的宽度为2，其边框颜色自定，并将设置后的框架网页另存为index7_border.htm。 操作步骤如下： （1）将index7_1.htm网页另存为index7_border.htm。 （2）选中整个框架集，在框架集属性面板上将“边框”设置为“是”、“边框宽度设置为2、“边框颜色”设置为“#014983”。 预览网页，页面上出现了水平细线，但还没有垂直细线。 （3）在框架面板上单击上下之间的立体边框选中下面的框架集，设置和（2）一样的选项（或将“边框”设置为“默认”，“边框宽度”和“边框颜色”不作设置）。 （4）预览网页。 五、设置框架中的链接目标 为导航栏中的“科幻小说