2.7 设计框架网页_Dreamweaver CS3 Ajax网页设计入门与实例详解-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.7 设计框架网页

一个浏览器窗口通常只能显示一个网页的内容。但是，通过框架可以将浏览器窗口划分成若干个窗格，在每个窗格中都可以显示一个网页，从而获得在一个浏览器窗口同时显示多个网页的特殊效果。此外，通过为超链接指定目标框架，可以为各个框架之间建立内容之间的联系，以实现页面导航的功能。

2.7.1 创建框架网页

框架网页又称为框架集，它是一种特殊的HTML网页，可以用来将浏览器视窗分割成不同的区域，这些区域称为框架，每一个框架都可以独立地显示一个不同的HTML网页。

1.框架网页的基本结构

一个框架集用<frmaeset>标记定义，组成框架集的各个框架用<frame>标记定义。框架网页的基本结构如下：

        <html>
        <head>
        <title>框架网页标题</title>
        </head>
        <frameset cols="col1,col2,..."rows="row1,row2...>
        <frame src="URL"… />
        <frame src="URL"… />
        ……
        </frameset>
        <noframes>
        <body>
        <p>此网页使用了框架，但您的浏览器不支持框架。</p>
        </body>
        </noframes>
        </html>

其中<frameset>标记表示一个框架集，用于组织多个框架和嵌套框架集。在框架网页中，应将<frmaeset>标记置于<head>标记之后，以取代<body>标记的位置。

<frameset>标记的cols和rows属性指定如何将浏览器窗口分割成不同的框架，这些属性的取值可以是像素数（n）、相对于浏览器窗口的百分比（n%）和相对尺寸（n*）。rows属性不能与cols属性同时使用。

例如，若要通过框架将浏览器窗口划分为3列，其中第一列占浏览器窗口宽度的30%，第二列为200像素，第三列为浏览器窗口的剩余部分，应将cols属性设置为“30%, 200, *”。

若将cols属性设置为“*, *, *”，则表示将窗口划分成3个等宽的框架。若将cols属性设置为“*, 2*, 3*”，则表示左边的框架占窗口宽度的1/6，中间的框架占窗口宽度的1/3，右边的框架占窗口宽度的1/2。若将rows属性设置为“60, *”，则表示上面的框架高度为60像素，下面的框架为浏览器窗口的剩余部分。

<frame>标记在<frameset>元素内表示单个框架，其src属性指定在该框架中显示的网页的URL。若要同时包含纵向分隔框架和横向分隔框架，则应使用嵌套框架。

<noframes>标记用于包含那些不支持frameset元素的浏览器使用的HTML内容。

2.在Dreamweaver中快速创建框架网页

在Dreamweaver CS3中，可以使用【新建文档】对话框快速创建各种常用布局的框架集网页。下面结合一个例子来加以说明。

例2-22 创建框架网页，用于同时显示三个网页，效果如图2-72所示。

图2-72 框架网页

设计步骤

1 在Dreamweaver中，选择【文件】→【新建】命令。

2 在【新建文档】对话框左侧单击【示例中的页】，从【示例文件夹】列表中选择【框架集】，从右边的列表中选择【上方固定，左侧嵌套】，如图2-73所示。

图2-73 创建“上方固定，左侧嵌套”的框架网页

3 单击【创建】按钮，此时弹出【框架标签辅助功能属性】对话框，把上框架、左框架和右框架的标题分别设置为topFrame、leftFrame和mainFrame（这将设置框架的title属性），然后单击【确定】按钮，如图2-74所示。

此时将在文档窗口中打开框架集网页，它由三个框架组成，每个框架内分别显示一个不同的空白网页，如图2-75所示。如果看不到框架边框，可选择【查看】→【可视化助理】→【框架边框】，使该菜单项带上对号标记。

图2-74 设置框架的标题

图2-75 由三个框架组成的框架集

4 把框架网页的标题设置为“框架网页”，然后在三个框架中分别输入文字信息。

保存所有文件。在这个例子中，需要保存4个文件，包括框架集、上部框架内的网页、左侧框架内的网页和右侧框架内的网页。在标准工具栏上单击【全部保存】按钮，然后执行以下操作。

● 当弹出【另存为】对话框并且文档窗口的四周出现虚线标记时，表明当前保存的是框架网页，选择站点根目录下的chap02文件夹，在【文件名】框中输入page2-22-main.html，然后单击【保存】按钮，如图2-76所示。

图2-76 保存框架网页

● 当弹出【另存为】对话框并且左侧边框四周显示虚线标记时，表明当前保存的是左侧框架内显示的网页，把文件名指定为page2-22-left.html，并加以保存。

● 当弹出【另存为】对话框并且右侧边框四周显示虚线标记时，表明当前保存的是右侧框架内显示的网页，把文件名指定为page2-25-right.html，并加以保存。

● 当弹出【另存为】对话框并且上方边框四周显示虚线标记时，表明当前保存的是上部框架内显示的网页，将文件名设置为page2-22-top.html，并加以保存。

6 单击上边框与下框架之间的分隔线，并从属性检查器的【边框】列表中选择【是】（这会把外部框架的frameborder属性设置为yes），如图2-77所示。

图2-77 设置框架集的边框属性

7 单击左边框与右边框之间的分隔线，并从属性检查器的【边框】列表中选择【是】（这会把嵌套框架的frameborder属性设置为yes）。

8 切换到代码视图，以查看框架网页的源代码，结果如下。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>框架网页</title>
        </head>
        <frameset rows="56,＊" cols="＊" framespacing="0" frameborder="yes" border="0">
        <frame src="page2-22-top.html" name="topFrame"
          scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
        <frameset cols="80,＊" frameborder="0" border="0" framespacing="0">
        <frame src="page2-22-left.html" name="leftFrame"
          scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
        <frame src="page2-22-right.html" name="mainFrame" id="mainFrame" title="mainFrame" />
        </frameset>
        </frameset>
        <noframes>
        <body></body>
        </noframes>
        </html>

9 保存所有文件，然后在浏览器中查看框架网页的效果。

2.7.2 设置框架集的属性

在HTML语言中，<frameset>标记用于定义如何划分浏览器窗口，通过设置该标签的属性可以指定框架集的显示方式。在Dreamweaver CS3中，可以利用属性检查器或标签检查器来设置框架集的属性。

1.<frameset>标记的常用属性

<frameset>标记的常用属性如下。

● cols属性：指定框架的列宽，可为像素数（n）、百分比（n%）和相对尺寸（n*）。

● rows属性：指定框架的行高，可为像素数（n）、百分比（n%）和相对尺寸（n*）。

● border属性：指定边框的宽度，以像素为单位。

● bordercolor属性：指定边框的颜色。

● frameborder属性：指定框架周围是否显示三维边框，可取的值有：“1”、“0”、“no”、“yes”；若设置为“1”或“yes”，则显示边框；若设置为“0”或“no”，则不显示边框；默认值为“no”。

● framespacing属性：指定各框架之间的间隔。

2.利用属性检查器设置框架集的属性

在Dreamweaver CS3中，可以用属性检查器对框架集的属性进行设置，操作方法如下。

选择【查看】→【可视化助理】→【框架边框】命令，使该命令项中出现一个复选标记。

2 在文档窗口的设计视图中，单击框架集内两个框架之间的边框，以选择该框架集。此时，在此框架集周围显示一个选择轮廓，如图2-78所示。

在属性检查器中单击右下角的展开箭头，以显示框架集的更多属性。

4 根据需要更改以下边框选项。

图2-78 利用属性检查器设置框架集的属性

● 在【边框】下拉列表框中，确定在浏览器中查看文档时在框架周围是否应当显示边框（frameborder属性）。若要显示边框，可选择【是】；若要使浏览器不显示边框，可选择【否】；若要允许浏览器确定如何显示边框，则选择【默认值】。

● 在【边框宽度】框中，指定框架集内所有边框的宽度（border属性）。

● 在【边框颜色】框中设置边框的颜色（bordercolor属性），可以使用颜色选择器选择一种颜色，或者直接键入十六进制的颜色值。

5 若要设置选定框架集的各行和各列的框架的大小，可单击【行列选择范围】区域中的选项卡，然后在【值】文本框中输入高度或宽度（rows属性或cols属性）。

6 若要指定分配给每个框架的空间大小，可从【单位】列表框中选择下列选项之一。

● 若选择【像素】，则将选定列或行的大小设置为一个绝对值。

● 若选择【百分比】，则指定选定列或行应相当于其框架集的总宽度或总高度的百分比。以【百分比】为单位的框架分配空间是在以【像素】为单位的框架之后，但在将单位设置为【相对】的框架之前。

● 若选择【相对】，则指定在为【像素】和【百分比】框架分配空间后，为选定列或行分配其余可用空间；剩余空间在大小设置为【相对】的框架中按比例划分。

3.利用标签检查器设置框架框的属性

利用标签检查器可以对框架集的更多属性进行设置，操作方法如下。

1 通过按F9键打开标签检查器面板。

2 在文档窗口中选择框架集，然后在标签检查器中对框架集的属性进行设置，如图2-79所示。

图2-79 利用标签检查器设置框架集的属性

2.7.3 设置框架的属性

一个框架集由若干个框架组成，每个框架可以显示一个页面。在HTML语言中，通过设置<frame>标记的属性可以指定在框架内显示哪个页面，也可以控制该框架的显示效果。在Dreamweaver CS3中，可以利用属性检查器或标签检查器对框架的属性进行设置。

1.<frame>标记的常用属性

● src属性：指定在该框架中显示的网页。

● name属性：指定框架的名称。

● border属性：指定边框的宽度。

● bordercolor属性：指定边框的颜色。

● frameborder属性：指定框架周围是否显示边框，其取值可以是：“1”或“yes”（显示边框）、“0”或“no”（不显示边框）。

● frameheight属性：指定框架内容与上下边框的间距。

● framewidth属性：指定框架内容与左右边框的间距。

● scrolling属性：指定是否为框架添加滚动条，其取值可以是：“yes”（添加）、“no”（不添加）或“auto”（在需要时自动添加）。

● norisize属性：若指定了该项，则不能调整框架的大小

2.利用属性检查器设置框架的属性

在Dreamweaver CS3中，可以利用属性检查器对框架的常用属性进行设置，方法如下。

选择【查看】→【可视化助理】→【框架边框】命令，确保该菜单项包含复选标记，使框架边框可见。

2 在文档窗口的设计视图中，按住Alt键同时单击一个框架，以选择该框架。

单击属性检查器右下角的展开箭头，以显示框架的更多属性，如图2-80所示。

图2-80 利用属性检查器设置框架的属性

4 在【框架名称】文本框中键入框架名称（name属性）。这是链接的target属性或脚本在引用该框架时使用的名称。

5 根据需要，对以下选项进行设置。

● 在【源文件】文本框中，指定在框架中显示的源文档的路径（src属性）。也可以通过单击文件夹图标找到一个文件并加以选择。

● 在【滚动】列表框中选择在框架中是否显示滚动条（scrolling属性），可供选择的项有：【是】、【否】、【自动】和【默认】。大多数浏览器默认为【自动】，这意味着只有在浏览器窗口中没有足够空间来显示当前框架的完整内容时才显示滚动条。

● 若选择【不能调整大小】复选框，则在frame标记中设置norisize属性，这将使访问者无法通过拖动框架边框在浏览器中调整框架大小。

● 在【边框】列表框中，指定在浏览器中查看框架时显示或隐藏当前框架的边框（frameborder）。可供选择的项有：【是】（显示边框）、【否】（隐藏边框）和【默认值】。大多数浏览器默认为显示边框，除非父框架集已将【边框】设置为【否】。

● 在【边框颜色】文本框中，为所有框架的边框设置边框颜色（bordercolor属性）。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。

● 在【边距宽度】文本框中，以像素为单位设置左边距和右边距的宽度（framewidth属性），即框架边框和内容之间的空间。

● 在【边距高度】框中，以像素为单位设置上边距和下边距的高度（frameheight属性），即框架边框和内容之间的空间。

例2-23 创建一个框架网页，把浏览器窗口分成上、左、右三个部分，在上部显示一个标题，在左侧框架列出一些超文本链接，当单击这些链接时在右侧框架中显示相应的网页，如图2-81和图2-82所示。

图2-81 在左侧框架中单击某个链接

图2-82 在右侧框架中显示相应网页的内容

设计步骤

1 在Dreamweaver中打开Ajax站点，然后创建一个由上、左、右三个框架组成的框架网页，并把右侧框架命名为mainFrame，把框架网页的标题设置为“HTML网页欣赏”。

2 在chap02 文件夹中保存所有文件，把框架网页保存为page2-23-index.html，把上部、左侧和右侧框架中的网页分别保存为page2-23-title.html、page2-23-content.html及page2-23-welcome.html。

3 在上部框架的网页中插入一幅图像，在右侧框架的网页中输入一段文字。

4 在左侧框架的网页中插入一个单列表格，在各个表格行中分别输入“page2-01”、“page2-02”、“page2-03”等。

5 创建链接。选取“page2-01”，在属性检查器的【链接】框中输入“page2-01.html”，并从【目标】列表框中选择mainFrame框架，用同样的方法，创建更多的链接。

6 对框架集和框架的属性进行设置，使各个框架之间显示边框，并使左框架自动显示滚动条。

7 在浏览器中打开框架网页，通过在左侧框架中单击链接来查看不同的网页。

本周热推：

PHP求职宝典网络攻防工具新编计算机组装与维修大数据改变世界人工智能：商业化落地实战