(chapter5课件应用框架技术制作网页2.docVIP

第5单元 应用框架技术制作网页 /webcourse 实训目标 　本例设计目标 制作过程 任务一、创建框架结构 1．插入框架集 ?　插入一个如图所示的预定义的框架集，操作步骤如下： 插入“顶部和嵌套的左侧框架”类型的框架集页面 （1）新建一个网页文件。 （2）执行以下操作之一，插入Dreamweaver预定义的框架集。 在“插入”栏的“布局”类别中，单击“框架”按钮上的下拉箭头，然后选择预定义的框架集，如图所示。 在菜单栏中选择“插入”→“HTML”→“框架”命令，从弹出的子菜单中选择预定义的框架集。 插入栏“布局”分类中的预定义?　分别保存框架集网页和各个框架中的网页文件，操作步骤如下： （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键。此时会弹出如图所示的对话框。该对话框提示读者在预览框架集网页之前必须先进行保存文件操作。单击“确定”按钮，保存并预览网页。 Dreamweaver 8 对话框 任务二、修饰框架集网页外观 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）在框架面板上单击上下之间的立体边框选中下面的框架集，设置和（1）一样的选项（或将“边框”设置为“默认”，“边框宽度”和“边框颜色”不作设置）。预览网页，页面上出现了垂直细线，但却不够精细。 （4）依次选中各个框架，在框架的属性面板上将“边框”设置为“否”。