Dreamweaver网页制作基础教程任务二框架属性设置.pptVIP

王焕杰 任务二 框架属性设置 任务描述 利用框架结构为构建好的校园网制作“校园新闻”网页。 任务准备 构建好相关网页，即框架集中的源网页与各个新闻网页，如图6.2.1所示。 设计思路 （1）通过设置框架和框架集属性，来改变框架网页的外观等。 （2）确认链接目标的框架设置，使所有链接内容出现在正确的区域内。 任务实施 步骤1：在“框架”面板上单击顶部框架topFrame，在框架“属性”面板“源文件”文本框中指定源文件为“项目6/result2/index6_top.html”，如图6.2.2所示。 步骤2：在文件窗口将插入点置于页面顶部框架内，然后在菜单栏中选择“文件”→“在框架中打开”选项，如图6.2.2所示。 步骤1：执行下列操作之一，选择外框架集。 · 在文件窗口的设计视图中单击框架集中上、下两个框架之间的边框。 · 在“框架”面板中单击围绕外框架集的立体边框。 被选中的框架集边框在“框架”面板中被加黑显示，如图6.2.3所示。 此时打开的“属性”面板为整个框架集的“属性”面板，如图6.2.4所示。 步骤2：在“值”文本框中输入“210”，并在“单位”下拉列表框中选择“像素”，将顶部框架中的图像正好完全显示出来。 步骤3：单击“框架集缩略图”中的底部框架，在“值”文本框中输入“130”，并在“单位”下拉列表框中选择“像素”，将底部框架中的图像完全显示出来。 步骤4：在“框架”面板上单击中间的立体边框，选中内框架集。被选中的内框架集边框在框架面板中被加黑显示，如图6.2.5所示。此时打开的“属性”面板为内框架集的“属性”面板，如图6.2.6所示。 步骤5：在“值”文本框中输入“202”，并在“单位”下拉列表框中选择“像素”，将左侧框架中的内容完全显示出来。 ?为框架集网页index6.html设置文件标题 步骤1： 查看文件窗口标题栏上的文件名是否为“index6.html”，如果不是，则选中框架集（注意，选中的对象是框架集，而不是某个框架）。 步骤2： 在文件工具栏的“标题”文本框中输入“新闻动态”。 步骤3： 预览页面。当访问者在浏览器中查看该框架集时，标题“新闻动态”就显示在了浏览器的标题栏中。 （1）自动为左侧框架添加滚动条。 步骤1：执行下列操作之一，选择左侧框架。 在“框架”面板中单击leftFrame框架。 在文件窗口中，按住“Alt”键，在左侧框架中单击。 被选取的左侧框架在“框架”面板中被加黑显示的细线围住，而在文件窗口中被较细的虚线框围住。 步骤2：在“滚动”下拉列表框中选择“自动”，这样浏览器会自动根据窗口的大小来判断是否需要出现滚动条。 步骤3：保存框架网页，左侧框架中添加了滚动条。 步骤4：预览网页，效果如图6.2.7所示。 （2）在index6.html的基础上设置边框的宽度为2，边框颜色自定。 步骤1：选中整个框架集。 步骤2：在框架集“属性”面板上将“边框”设置为“是”，“边框宽度”设置为2，“边框颜色”设置为“#0000FF”，如图6.2.8所示。 步骤3：预览网页。 步骤1：在右侧框架中，选取文本“学校放假时间通知”，打开文本的“属性”面板。 步骤2：在“属性”面板上单击“浏览文件”按钮，选取要链接的文件“news1.html”。 步骤3：在“属性”面板上的“目标”下拉列表框中选择框架名称“mainFrame”，如图6.2.10所示。 步骤1：选取文本“网易”，打开文本的“属性”面板。 步骤2：在“属性”面板上“链接”文本框中输入链接网址，在“目标”下拉列表框中选择“_blank”，如图6.2.11所示。 步骤3：保存并预览网页。 知识拓展 知识点1：修饰框架集网页外观 边框： 确定在浏览器中查看文件时在框架周围是否应显示边框。若显示边框，则选择“是”；若使浏览器不显示边框，则选择“否”。要允许浏览器确定如何显示边框，则选择“默认值”。 边框宽度： 设置框架集中所有边框的宽度。 边框颜色： 设置边框的颜色。 值： 用于设置选定框架集的各行和各列的框架大小。在“行列选定范围”右侧的缩略图上单击左侧或顶部的矩形，则会选中相应的框架，然后在“值”文本框中输入高度或宽度。 单位： “单位”下拉列表框中有3个选项。“像素”将选定列或行的大小设置为一个绝对值，对于应始终保持相同大小的框架而言，此选项是最佳选择；“百分比”指定选定框架行（或列）占所属框架集高度（或宽度）的百分数；“相对值”指定在为“像素”和“百分比”框架分配空间后，为选定框架行（或列）分配其余可用空间。设置框架大小的最常用方法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后，能够使右侧框架伸展以占据所有剩余空间。 2．设置框架属性 知识点2：设置框架中的链接目标 任务总结