第6章 网页的布局

第6章网页的布局第6章网页的布局6.1共享边框和导航栏6.2网页的主题6.3框架网页实训六第6章网页的布局6.1共享边框和导航栏在网页设计中，网页布局是非常重要的。一个好的布局可以使网页搭配合理，重点突出。FrontPage2002提供了很多可以用来设置、管理网页布局的方法，比如前面介绍过的表格以及本章要介绍的共享边框、框架网页等。第6章网页的布局共享边框是Web站点中用于在所有网页上显示站点共用信息的区域。共享边框中的导航栏组件在创建和管理Web站点及网页的过程中有着相当重要的作用，因为在FrontPage2002中，站点的创建和链接管理是通过共享边框来实现的。在共享边框中除了可以创建标准的导航栏之外，还可以包含其他希望在站点中统一出现的信息。例如，可以将版权信息、网站简介、联系方式等添加到共享边框中，以便显示在站点中的所有网页上。第6章网页的布局6.1.1在网站中创建和使用共享边框1.在站点中创建共享边框共享边框是作用于整个Web站点或与站点相关联的网页上的，因此，要创建共享边框，可以打开已有的Web站点或新建一个Web站点，然后再将共享边框应用到站点中去。第6章网页的布局创建共享边框的步骤如下。(1)打开要创建共享边框的Web站点。(2)单击“格式”菜单→“共享边框…”命令，打开“共享边框”对话框，如图6-1所示。(3)在“共享边框”对话框中的“应用于”标签下选择“所有网页”单选框。(4)选择上、下、左、右4个复选框。第6章网页的布局图6-1在站点中创建共享边框第6章网页的布局(5)如果要在共享边框中包含站点导航栏，可以选择“包含导航按钮”复选框。(6)单击“确定”按钮。这时在Web站点中所有网页的相同位置上，会同时出现所创建的共享边框，如图6-2所示。如果选择了“当前网页”复选框，那么共享边框只出现在当前的网页上。第6章网页的布局图6-2网页中的共享边框第6章网页的布局2.在网站中使用共享边框创建了共享边框之后，就使站点中的网页具有了创建一致外观的快捷方法。通过共享边框，能够快速地将信息添加到站点中的所有网页中。通常在共享边框中添加以下内容，以使每个网页都有统一的标题外观。第6章网页的布局①网页横幅。②公司徽标。③版权声明。④导航栏，使站点访问者能够访问Web站点的主要页面。⑤ Web站点更新的日期和时间。⑥反馈所用的电子邮件地址，如站点管理员的地址。注意，在使用网页横幅以及导航栏之前，必须在“导航”视图中建立站点的导航结构，否则将不能显示导航栏，网页横幅也将是不可见的。第6章网页的布局6.1.2在站点中编辑共享边框1.更新或删除共享边框中的信息共享边框中的信息可以随时更新或删除，并且十分的简便，具体步骤如下。(1)在普通“网页”视图中，打开需要修改共享边框的网页。(2)在共享边框区域中单击鼠标。共享边框区域是用虚线框起来的区域。单击该区域后，虚线框会变成实线框。第6章网页的布局(3)更改共享边框区域中的内容。例如，键入或删除文本，删除或添加图片。(4)单击“保存”图标，所做的更改将出现在该共享边框的所有网页上。第6章网页的布局2.为网页设置不同的共享边框使用共享边框可以创建具有统一风格的Web站点，但有时希望在站点中不同的网页上设置不同的共享边框。为此，可以选中要修改的网页，单击“格式”菜单→“共享边框…”命令；在“共享边框”对话框中，选择“当前网页”单选框，并选择或者取消选择相应边框的复选框；然后单击“确定”按钮，即可改变或者取消网页上的共享边框。第6章网页的布局6.1.3创建导航栏导航栏是一组用于Web站点导航的超链接。例如，典型的导航栏会包含指向Web站点的主页及其主要网页的超链接。可以在Web站点中的每个网页上显示一个导航栏，这样站点访问者就可以快速方便地浏览Web站点的主要网页。使用FrontPage2002创建导航栏主要包括3个方面：建立导航结构；创建导航栏；设置导航属性。第6章网页的布局1.建立Web站点的导航结构为了建立导航栏，必须首先建立站点的导航结构。因为导航结构决定了导航栏上包含的超链接，而网页标题则决定超链接上的链接标签。利用“导航”视图可以方便地在站点内创建导航结构，并且可以有效地控制和修改站点的结构。第6章网页的布局建立站点导航结构的步骤如下。(1)新建一个“空白站点”。单击“视图”菜单→“导航”命令，或单击“视图”栏中的“导航”图标，打开站点的“导航”视图，如图6-3所示。第6章网页的布局图6-3创建站点的导航结构第6章网页的布局(2)单击“常用”工具栏上的“新建普通网页”图标，在站点中创建主页和若干个网页。(3)在“导航”视图中，按照预先规划好的站点结构和层次，拖动“网页”图标，建立导航结构的树形目录。第6章网页的布局2.创建Web站点的导航栏当建立了Web站点的导航结构之后，就可以使用FrontPage2002来创建导航栏，并且FrontPage2002还将维护其创建的导航栏。例如，当在站点中添加或者删除了网页，FrontPage将相应地更新导航栏(重新计算导航栏中的超链接)。第6章网页的布局创建导航栏的步骤如下。(1)单击“格式”菜单→“共享边框…”命令，打开“共享边框”对话框，如图6-1所示。(2)在“共享边框”对话框中，选择“应用于所有网页”单选框。(3)选择上、左、下3个复选框以及“包含导航按钮”复选框。(4)单击“确定”按钮。这时，FrontPage2002将共享边框添加到了站点内的所有网页内，并且在共享边框内包含了站点导航栏。第6章网页的布局3.设置导航栏属性创建了导航栏之后，就可以使用“导航栏属性”对话框，设置导航栏所包含的链接、导航栏的样式等属性。设置导航栏属性的步骤如下。(1)在普通“网页”视图中，用鼠标右键单击“导航栏”，然后单击快捷菜单上的“链接栏属性…”命令，打开“链接栏属性…”对话框，如图6-4所示。第6章网页的布局图6-4设置导航栏属性第6章网页的布局(2)设置“常规”选项卡。在“常规”选项卡中，当单击“要添加到网页的超链接”标签下的某个单选按钮时，即改变超链接的类型，进而可以改变导航栏中超链接的层次。第6章网页的布局当选择“父层”单选框时，导航栏中会显示链接到所有父层网页上的超链接；当选择“子层”单选框时，导航栏中会显示链接到所有子层网页上的超链接。需要说明的是，在设置导航栏属性时，“主页”是处于最上层的。“最上层”是和主页同级的层，而“父层”、“同一层”、“前一层与后一层”、“子层”等都是相对的概念，对不同级别的网页其含义也不同。在网页中添加基于导航结构的链接栏时，可以选择需要显示的超链接，这些超链接和网页在导航结构中的位置有关。第6章网页的布局(3)设置“样式”选项卡。“样式”选项卡主要用于设置导航栏的外观样式，如图6-5所示。在导航栏中也可以不使用文本按钮导航栏，而使用图标按钮导航栏。FrontPage2002提供了几十种导航栏的样式，可以通过选择不同的导航栏样式，以改变导航栏的外观。第6章网页的布局图6-5设置导航栏样式第6章网页的布局●可以像设置其他任何文本类型一样为使用文本的导航栏设置文本的格式。●在“方向和外观”标签下，可以选择将导航栏水平或者垂直地放置在网页上，如图6-6所示。●可以在每个网页上添加多个导航栏，以便导航到不同级别的网页。第6章网页的布局4.修改或删除导航栏导航栏的形式是由导航结构决定的，因此，修改导航结构就会改变导航栏的链接。可以对导航结构作如下修改。1)改变站点的导航结构修改站点的导航结构需要在“导航”视图中进行。首先单击要改变的网页，然后按住鼠标左键将其拖到新的位置上。第6章网页的布局图6-6共享边框中的导航栏第6章网页的布局2)将现有网页添加到当前导航结构中在“文件夹列表”中，单击要添加到当前导航结构中的网页，然后再将其拖到导航视图结构中所需的位置上。如果“文件夹列表”没有显示，可以单击“视图”菜单→“文件夹列表”命令，或单击“切换窗格”图标，也可以打开“文件夹列表”。第6章网页的布局3)修改导航栏上网页的标题网页上的标题将成为导航栏中相应的图标标题。如果网页没有设置标题，FrontPage2002就会默认以网页的文件名作为标题。在“导航”视图中，用鼠标右键单击要修改标题的网页，再单击快捷菜单上的“重命名”命令，即可修改网页标题。第6章网页的布局4)在现有网页下添加新网页用鼠标右键单击现有网页，然后单击“常用”工具栏上的“新建普通网页”图标，即可添加一个新网页。5)添加外部超链接的网页在“导航”视图中，用鼠标右键单击要添加外部超链接的网页，再单击快捷菜单上的“添加已有的网页…”命令，就可以打开“插入超链接”对话框，选择要插入的外部超链接的网页。第6章网页的布局6)从导航结构中临时删除某些网页(1)在“导航”视图中，用鼠标右键单击不想包含的网页。(2)单击快捷菜单上的“已加入导航栏”。这时选中的网页变成灰色，将被排除在导航结构之外，如图6-7所示。这种方法适用于需要临时更改导航结构的情况。当需要恢复原始导航结构时，再次单击“已加入导航栏”按钮即可。第6章网页的布局图6-7从导航结构中删除网页第6章网页的布局7)从导航结构中删除网页单击要删除的网页，再按Delete键，打开“删除网页”对话框，如图6-8所示。当选择“将本网页从导航结构中删除”复选框，则不会将网页从Web站点中删除。要从站点中彻底删除网页，可以选择“从站点中删除此网页”单选框。第6章网页的布局图6-8选择删除方法第6章网页的布局8)删除导航栏要删除导航栏，可以在普通“网页”视图中单击导航栏，再按Delete键。注意，如果在“导航”视图中更改了任意一个导航结构(例如，顺序或网页标题)，那么Web页中的导航栏将会反映这些更改。如果从共享边框中删除了导航栏，该导航栏将会从所有使用该共享边框的网页中删除。第6章网页的布局6.2网页的主题FrontPage的主题是指一系列经过专业设计的网页元素。主题为项目符号、字体、图形、导航栏和其他网页元素定义了配色方案、样式等。FrontPage提供了一个包含50多个主题的主题库，因此，使用主题能够方便、快速地创建具有专业水准的Web站点。第6章网页的布局由于主题控制着站点内网页的外观，所以选择了某种主题，就意味着确定了站点的某种风格。不过，FrontPage2002在主题的使用上是非常灵活的，可以将主题应用在整个Web站点上，也可以将主题应用在站点的部分网页中。另外，FrontPage2002的主题是允许修改的，可以根据个人的爱好对主题进行修改，比如配色方案、图片、导航栏等。第6章网页的布局6.2.1在网页中使用FrontPage2002的主题主题可以应用到整个Web站点，也可以只用在站点中的部分网页上或者在单个网页上。1.将主题应用到整个Web站点(1)打开或者新建一个站点。(2)单击“格式”菜单→“主题…”命令，打开“主题”对话框，如图6-9所示。第6章网页的布局(3)在“将主题应用到”标签下选择“所有网页”单选框。(4)在“主题列表”中单击要应用的主题，这时在“主题示例”下可预览所选择的主题。第6章网页的布局图6-9选择使用主题第6章网页的布局(5)选择“鲜艳的颜色”复选框，主题中将使用鲜艳的颜色方案。(6)选择“动态图形”复选框，可以使导航栏中的按钮以及项目符号等元素具有动态效果。(7)选择“背景图片”复选框，网页中将使用主题中定义的背景图片。(8)选择“应用CSS”复选框，网页将使用主题中定义的样式表。第6章网页的布局(9)单击“确定”按钮，站点中的所有网页都使用了该主题，如图6-10所示。如果只希望将主题应用于当前网页，可以选择“所选的网页”单选框。第6章网页的布局图6-10应用“中国书画”主题的网页第6章网页的布局2.将主题应用到站点的部分网页中将主题应用到站点的部分网页中，可以在文件夹视图或文件夹列表中进行，步骤如下：(1)在文件夹视图中或者文件夹列表中选择要应用主题的网页。(2)如果要选择多个网页，可以按住Ctrl键单击要选择的网页。第6章网页的布局(3)单击“格式”菜单→“主题…”命令，打