应用框架技术制作网.docVIP

第5单元应用框架技术制作网页

实训目的

本例设计目的

制作过程

任务一、创建框架结构

1．插入框架集

?插入一个如图所示的预定义的框架集，操作环节如下：

插入“顶部和嵌套的左侧框架”类型的框架集页面

（1）新建一个网页文献。

（2）执行以下操作之一，插入Dreamweaver预定义的框架集。

在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图所示。

在菜单栏中选择“插入”→“HTML”→“框架”命令，从弹出的子菜单中选择预定义的框架集。

插入栏“布局”分类中的预定义框架集

“框架标签辅助功能属性”对话框

（3）在弹出的“框架标签辅助功能属性”对话框中，可认为每一个框架指定一个标题，本例使用默认值，如图所示，单击“拟定”按钮。

（4）将鼠标移到框架边框，当鼠标指针变成上下箭头时，可以轻松地调整各个框架的大小。

2．保存框架集网页

?分别保存框架集网页和各个框架中的网页文献，操作环节如下：

（1）保证前面已插入了“顶部和嵌套的左侧框架”类型的框架集。然后在文档窗口中，单击框架边框，以选中整个框架集。

（2）在菜单栏中选择“文献”→“保存框架页”命令，如图所示。在“另存为”对话框中将框架集网页保存到本地站点根文献夹下，取名为index7_1.html。

单独保存框架集网页文献单独保存框架中的网页文献

（3）将插入点置于顶端框架，在菜单栏中选择“文献”→“保存框架”框架命令，如图所示。在“另存为”对话框中将顶端框架中的网页保存到本地站点根文献夹下，取名为index7_top1.html。

（4）用相同的方法，将左侧和右侧框架中的网页分别保存到本地站点根文献夹下，取名为index7_left.html和index7_main.html。

3．编辑框架集页面内容

?直接在3个区域（框架）中分别插入相应的内容，结果如图7.1所示。

（1）保证前面已插入了“顶部和嵌套的左侧框架”结构的框架集。

（2）将插入点置于顶部框架中插入图像img6_1.jpg，设立页面的左边距、上边距均为0。

（3）将插入点置于左侧框架中插入页面导航栏及友情链接内容，设立页面的左、上边距为0，并链接外部样式文献“css_chapter6.css”美化页面，效果如图所示。

左侧

框架顶部框架

左侧

框架

顶部框架

主体框架

顶端框架和左侧框架中的内容

（4）将插入点置于右下方的主框架中插入网页的主体内容，设立页面的上边距为0，并链接外部样式文献“css_chapter6.css”美化页面。结果如图所示。

主体框架中的内容

（5）显示框架边框，适本地调整框架大小，使顶端和左侧框架中的内容可以完全显示出来。

（6）按F12键。此时会弹出如图所示的对话框。该对话框提醒读者在预览框架集网页之前必须先进行保存文献操作。单击“拟定”按钮，保存并预览网页。

Dreamweaver8对话框

任务二、修饰框架集网页外观

1．设立框架集属性

?精确调整框架大小，使顶端框架的行高为250像素、左侧框架的列宽为200像素。操作环节如下：

（1）在“文档”窗口的“设计”视图中单击框架集中上下两个框架之间的边框或在“框架”面板中单击围绕外框架集的立体边框，选择外框架集。

（2）在框架集属性面板“值”的文本框中输入250，并在“单位”下拉列表中选择“像素”。

在框架面板中选中外框架集

在框架面板中选中内框架集

（3）在框架面板上单击上下之间的立体边框，选中内框架集。

在框架集的属性面板上设立列宽

（3）如图所示，在内框架集属性面板的“值”文本框中输入200，并在“单位”下拉列表中选择“像素”。

?为框架集网页index7_1.html设立文档标题，操作环节如下：

（1）查看文档窗口标题栏上的文献名是否为“index7_1.html”，假如不是，请选中框架集。

（2）在“文档”工具栏的“标题”文本框中输入“畅想未来”。

（3）预览页面。

2．设立框架属性

?自动为左侧框架添加滚动条，效果如图所示，操作环节如下：

在左侧框架中自动设立滚动条后的效果

（1）在“框架”面板中单击leftFrame框架，选择左侧框架。

框架的属性面板

（2）如图所示，在框架属性面板“滚动”下拉列表中选择“自动”。

?在index7_1.htm的基础上设立边框的宽度为2，其边框颜色自定，并将设立后的框架网页另存为index7_border.htm。操作环节如下：

（1）将ndex7_1.htm网页另存为index7_border.htm。

（2）选中整个框架集，在框架集属性面板上将“边框”设立为“是”、“边框宽度设立为2、“边框颜色”设立为“#014983”。

预览网页，页面上出现了水平细线，但还没有垂直细线。

（3）在