《网页设计与制作》课件-项目六 任务二 制作“新闻动态详细信息”（二）

Dreamweaver网页制作基础教程项目六制作新闻动态详细信息

任务二框架属性设置任务描述利用框架结构为构建好的校园网制作“校园新闻”网页。知识准备根据网站的外观需要，修饰框架集网页的外观及属性。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.2topFrame框架“属性”面板

在各个框架中导入源网页采用上述方法，依次在左侧框架leftFrame、右侧框架mainFrame和底部框架bottomFrame中导入网页index6_left.html、index6_main.html和index6_bottom.html。步骤1：执行下列操作之一，选择外框架集。·在文件窗口的设计视图中单击框架集中上、下两个框架之间的边框。·在“框架”面板中单击围绕外框架集的立体边框。被选中的框架集边框在“框架”面板中被加黑显示，如图6.2.3所示。设置框架集属性精确调整框架大小，使顶部框架的行高为210像素，底部框架的行高为130像素，左侧框架的列宽为202像素。操作步骤如下。图6.2.3在“框架”面板中选中外框架集此时打开的“属性”面板为整个框架集的“属性”面板，如图6.2.4所示。图6.2.4框架集“属性”面板当前框架集的分割形式缩略图步骤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.html～news5.html，将最后三个新闻标题指定为空链接。步骤1：选取文本“网易”，打开文本的“属性”面板。步骤2：在“属性”面板上“链接”文本框中输入链接网址，在“目标”下拉列表框中选择“_blank”，如图6.2.11所示。步骤3：保存并预览网页。

为“网易”添加超链接单击“网易”时，打开一个新窗口，链接到163网站。图6.2.11设置“网易”文本的“属性”面板知识拓展知识点1：修饰框架集网页外观框架集网页外观的修饰可以通过设置框架和框架集的属性来实现。每个框架和框架集都有自己的“属性”面板，使用“属性”面板可以查看和设置框架（或框架集）的属性。1．设置框架集属性利用框架集“属性”面板可以很方便地查看和设置框架集的属性，如图6.2.12所示。图6.2.12框架集“属性”面板边框：确定在浏览器中查看文件时在框架周围是否应显示边框。若显示边框，则选择“是”；若使浏览器不显示边框，则选择“否”。要允许浏览器确定如何显示边框，则选择“默认值”。边框宽度：设置框架集中所有边框的宽度。边框颜色：设置边框的颜色。值：用于设置选定框架集的各行和各列的框架大小。在“行列选定范围”右侧的缩略图上单击左侧或顶部的矩形，则会选中相应的框架，然后在“值”文本框中输入高度或宽度。单位：“单位”下拉列表框中有3个选项。“像素”将选定列或行的大小设置为一个绝对值，对于应始终保持相同大小的框架而言，此选项是最佳选择；“百分比”指定选定框架行（或列）占所属框架集高度（或宽度）的百分数；“相对值”指定在为“像素”和“百分比”框架分配空间后，为选定框架行（或列）分配其余可用空间。设置框架大小的最常用方法是将左侧框架设置为固定像素宽度，将右侧框架大小设置为相对大小，这样在分配像素宽度后，能够使右侧框架伸展以占据所有剩余空间。框架集“属性”面板上各项的含义如下。2．设置框架属性使用框架“属性”面板可以查看和设置框架属性。被选取的框架在“框架”面板中被加黑显示的细线围住，而在文件窗口中则被较细的虚线框围住。选中框架后，“属性”面板为选中框架的“属性”面板，如图6.2.13所示。图6.2.13框架的“属性”面板框架“属性”面板上各项含义如下。框架名称：用于修改当前选中框架的名称。源文件：设置或显示当前框架中的网页文件。滚动：指定在框架中是否显示滚动条。“滚动”下拉列表框中一共有4个选项，分别为是（显示滚动条）、“否”（不显示滚动条）、“自动”（当没有足够的空间显示当前框架的内容时自动显示滚动条）及“默认”（采用浏览器的默认值，大多数浏览器默认为“自动”）。不能调整大小：选中该复选框后，访问者将无法通过拖动框架边框在浏览器中调整框架大小。边框：在浏览器中查看框架时显示或隐藏当前框架的边框。为框架选择“边框”选项将重写框架集的边框设置。“边框”选项包括“是”（显示边框）、“否”（隐藏边框）和“默认值”三种。大多数浏览器默认显示边框，除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。边框颜色：为所有框架的边框设置边框颜色，此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。边界宽度：以像素为单位设置左边距和右边距的宽度（框架边框和内容之间的空间）。边界高度：以像素为单位设置上边距和下边距的高度（框架边框和内容之间的空间）。知识点2：设置框架中的链接目标选择不同的框架名称，链接文件将在不同的框架中打开，如图6.2.14所示。图6.2.14文本“属性”面板上设置链接目标mainFrame：在窗口的右侧框架mainFrame中显示所链接的文件内容。leftFrame：在窗口的左侧框架leftFrame中显示所链接的文件内容。topFrame：在窗口的上侧框架topFrame中显示所链接的文件内容。Dreamweaver中提供了4个默认的框架名称，利用这些可以将链接的网页在新窗口或其他的框架中打开。“目标”下拉列表框中的“_blank”、“_parent”、“_selt”、“_top”选项是保留关键字。这些关键字的执行效果已经被定义了，因此可以直接使用。由于一般在定义框架名称时以字母开头，因此这些关键字都是以下画线“_”开头以示区分，其含义如下。_blank（空白窗口）：在另一个新的窗口中显示链接内容，这样可以保留现有的窗口文件内容。_parent（父窗口）：在上一层的框架集中显示链接内容（此选项必须在框架集嵌套的情况下，才会产生效果）。_self（当前窗口）：在本身所在的框架中显示链接内容，这样会覆盖当前框架中的所有内容。该选项是默认值。_top（最高）：在整个浏览器窗口中显示链接内容，这样会覆盖当前框架中的所有内容。任务总结本任务学习的内容包括：确认链接目标的框架设置，使所有链接内容都出现在正确的区域内，以及通过设置框架和框架集属性来改变框架网页的外观等。保存、使用框架结构的网页文件对初学者来说有一定的难度，请读者反复练习，以达到熟练掌握的程度。课后习题一、填空题1．一个包含两个框架的框架集实际上存在__________个文件。2．按下__________键，在要选择的框架内单击鼠标左键可将其选中。3．框架是用__________标志，框架用frame标志。4．__________框架是一种较为特殊的框架形式，可以包含在许多元素当中，如层、单元格等。二、选