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

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目六 制作新闻动态详细信息 任务二 框架属性设置 任务描述 利用框架结构为构建好的校园网制作“校园新闻”网页。 知识准备 根据网站的外观需要，修饰框架集网页的外观及属性。 1．设置框架集属性 框架集属性包括框架的大小和框架之间边框的颜色、宽度等。 2．设置框架属性 框架属性包括框架的名称、源文件、边距、滚动和边框等。 3．设置框架中的链接目标 选择不同的框架名称，链接文件将在不同的框架中打开。 任务准备 构建好相关网页，即框架集中的源网页与各个新闻网页，如图6.2.1所示。 图6.2.1 新闻页面 设计思路 （1）通过设置框架和框架集属性，来改变框架网页的外观等。 （2）确认链接目标的框架设置，使所有链接内容出现在正确的区域内。 任务实施 步骤1：在“框架”面板上单击顶部框架topFrame，在框架“属性”面板“源文件”文本框中指定源文件为“项目6/result2/index6_top.html”，如图6.2.2所示。 步骤2：在文件窗口将插入点置于页面顶部框架内，然后在菜单栏中选择“文件”→“在框架中打开”选项，如图6.2.2所示。 图6.2.2 topFrame框架“属性”面板 ?在各个框架中导入源网页 采用上述方法，依次在左侧框架leftFrame、右侧框架mainFrame和底部框架bottomFrame中导入网页index6_left.html、index6_main.html和index6_bottom.html。 步骤2：在“值”文本框中输入“210”，并在“单位”下拉列表框中选择“像素”，将顶部框架中的图像正好完全显示出来。 步骤3：单击“框架集缩略图”中的底部框架，在“值”文本框中输入“130”，并在“单位”下拉列表框中选择“像素”，将底部框架中的图像完全显示出来。 步骤4：在“框架”面板上单击中间的立体边框，选中内框架集。被选中的内框架集边框在框架面板中被加黑显示，如图6.2.5所示。此时打开的“属性”面板为内框架集的“属性”面板，如图6.2.6所示。 步骤5：在“值”文本框中输入“202”，并在“单位”下拉列表框中选择“像素”，将左侧框架中的内容完全显示出来。 图6.2.5 图6.2.6 ?为框架集网页index6.html设置文件标题 步骤1： 查看文件窗口标题栏上的文件名是否为“index6.html”，如果不是，则选中框架集（注意，选中的对象是框架集，而不是某个框架）。 步骤2： 在文件工具栏的“标题”文本框中输入“新闻动态”。 步骤3： 预览页面。当访问者在浏览器中查看该框架集时，标题“新闻动态”就显示在了浏览器的标题栏中。 （1）自动为左侧框架添加滚动条。 步骤1：执行下列操作之一，选择左侧框架。 在“框架”面板中单击leftFrame框架。 在文件窗口中，按住“Alt”键，在左侧框架中单击。 被选取的左侧框架在“框架”面板中被加黑显示的细线围住，而在文件窗口中被较细的虚线框围住。 步骤2：在“滚动”下拉列表框中选择“自动”，这样浏览器会自动根据窗口的大小来判断是否需要出现滚动条。 步骤3：保存框架网页，左侧框架中添加了滚动条。 步骤4：预览网页，效果如图6.2.7所示。 ?设置框架属性 例如，在浏览框架集网页index6.html时，如果浏览器窗口较小，则框架集中的内容只能显示一部分。此时，需要为框架添加滚动条，这样内容就可以显示出来了。 图6.2.7 （2）在index6.html的基础上设置边框的宽度为2，边框颜色自定。 步骤1：选中整个框架集。 步骤2：在框架集“属性”面板上将“边框”设置为“是”，“边框宽度”设置为2，“边框颜色”设置为“#0000FF”，如图6.2.8所示。 步骤3：预览网页。 图6.2.8 设置后的框架集“属性”面板 步骤1：在右侧框架中，选取文本“学校放假时间通知”，打开文本的“属性”面板。 步骤2：在“属性”面板上单击“浏览文件”按钮，选取要链接的文件“news1.html”。 ?设置框架中的链接目标 首先，为右侧框架中的新闻标题文本创建超级链接。例如，当单击“学校放假时间通知”链接时，在mainFrame框架中显示对应的链接内容，如图6.2.9所示。 图6.2.9 步骤3：在“属性”面板上的“目标”下拉列表框中选择框架名称“mainFrame”，如图6.2.10所示。 图6.2.10 在“属性”面板上设置超级链接的目标 步骤4：保存框架网页，浏览页面。单击“学校放假时间通知”链接时，对应的内容便会出现在窗口右边的框架中。 步骤5：重复以上步骤，为其他新闻标题指定相应的超级链接目标，对应文件依次为news2.h