• / 160
  • 下载费用:20 金币  

第6章 网页的布局

关 键 词:
第六章 网页的
资源描述:
第6章 网页的布局 第6章 网页的布局 6.1 共享边框和导航栏 6.2 网页的主题 6.3 框架网页 实训六 第6章 网页的布局 6.1 共享边框和导航栏 在网页设计中,网页布局是非常重要的。一个好 的布局可以使网页搭配合理,重点突出。FrontPage 2002提供了很多可以用来设置、管理网页布局的方法 ,比如前面介绍过的表格以及本章要介绍的共享边框 、框架网页等。 第6章 网页的布局 共享边框是Web站点中用于在所有网页上显示站点 共用信息的区域。共享边框中的导航栏组件在创建和 管理Web站点及网页的过程中有着相当重要的作用, 因为在FrontPage 2002中,站点的创建和链接管理是通 过共享边框来实现的。在共享边框中除了可以创建标 准的导航栏之外,还可以包含其他希望在站点中统一 出现的信息。例如,可以将版权信息、网站简介、联 系方式等添加到共享边框中,以便显示在站点中的所 有网页上。 第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站点的主要网页。使用FrontPage 2002创建导航栏 主要包括3个方面:建立导航结构;创建导航栏;设置 导航属性。 第6章 网页的布局 1. 建立Web站点的导航结构 为了建立导航栏,必须首先建立站点的导航结构 。因为导航结构决定了导航栏上包含的超链接,而网 页标题则决定超链接上的链接标签。利用“导航”视图 可以方便地在站点内创建导航结构,并且可以有效地 控制和修改站点的结构。 第6章 网页的布局 建立站点导航结构的步骤如下。 (1) 新建一个“空白站点”。单击“视图”菜单→“导航 ”命令,或单击“视图”栏中的“导航”图标 ,打开站 点的“导航”视图,如图6-3所示。 第6章 网页的布局 图6-3 创建站点的导航结构 第6章 网页的布局 (2) 单击“常用”工具栏上的“新建普通网页”图标 ,在站点中创建主页和若干个网页。 (3) 在“导航”视图中,按照预先规划好的站点结构 和层次,拖动“网页”图标,建立导航结构的树形目录 。 第6章 网页的布局 2. 创建Web站点的导航栏 当建立了Web站点的导航结构之后,就可以使用 FrontPage 2002来创建导航栏,并且FrontPage 2002还将 维护其创建的导航栏。例如,当在站点中添加或者删 除了网页,FrontPage将相应地更新导航栏(重新计算导 航栏中的超链接)。 第6章 网页的布局 创建导航栏的步骤如下。 (1) 单击“格式”菜单→“共享边框…”命令,打开“共 享边框”对话框,如图6-1所示。 (2) 在“共享边框”对话框中,选择“应用于所有网页 ” 单选框。 (3) 选择上、左、下3个复选框以及“包含导航按钮” 复选框。 (4) 单击“确定”按钮。 这时,FrontPage 2002将共享边框添加到了站点内 的所有网页内,并且在共享边框内包含了站点导航栏 。 第6章 网页的布局 3. 设置导航栏属性 创建了导航栏之后,就可以使用“导航栏属性”对话 框,设置导航栏所包含的链接、导航栏的样式等属性 。设置导航栏属性的步骤如下。 (1) 在普通“网页”视图中,用鼠标右键单击“导航栏 ”,然后单击快捷菜单上的“链接栏属性…”命令,打开“ 链接栏属性…”对话框,如图6-4所示。 第6章 网页的布局 图6-4 设置导航栏属性 第6章 网页的布局 (2) 设置“常规”选项卡。在“常规”选项卡中,当单 击“要添加到网页的超链接”标签下的某个单选按钮时 ,即改变超链接的类型,进而可以改变导航栏中超链 接的层次。 第6章 网页的布局 当选择“父层”单选框时,导航栏中会显示链接到所 有父层网页上的超链接;当选择“子层”单选框时,导 航栏中会显示链接到所有子层网页上的超链接。需要 说明的是,在设置导航栏属性时,“主页”是处于最上 层的。“最上层”是和主页同级的层,而“父层”、“同一 层”、“前一层与后一层”、“子层”等都是相对的概念, 对不同级别的网页其含义也不同。在网页中添加基于 导航结构的链接栏时,可以选择需要显示的超链接, 这些超链接和网页在导航结构中的位置有关。 第6章 网页的布局 (3) 设置“样式”选项卡。“样式”选项卡主要用于设 置导航栏的外观样式,如图6-5所示。 在导航栏中也可以不使用文本按钮导航栏,而使 用图标按钮导航栏。FrontPage 2002提供了几十种导航 栏的样式,可以通过选择不同的导航栏样式,以改变 导航栏的外观。 第6章 网页的布局 图6-5 设置导航栏样式 第6章 网页的布局 ● 可以像设置其他任何文本类型一样为使用文本的 导航栏设置文本的格式。 ● 在“方向和外观”标签下,可以选择将导航栏水平 或者垂直地放置在网页上,如图6-6所示。 ● 可以在每个网页上添加多个导航栏,以便导航到 不同级别的网页。 第6章 网页的布局 4. 修改或删除导航栏 导航栏的形式是由导航结构决定的,因此,修改 导航结构就会改变导航栏的链接。可以对导航结构作 如下修改。 1) 改变站点的导航结构 修改站点的导航结构需要在“导航”视图中进行。首 先单击要改变的网页,然后按住鼠标左键将其拖到新 的位置上。 第6章 网页的布局 图6-6 共享边框中的导航栏 第6章 网页的布局 2) 将现有网页添加到当前导航结构中 在“文件夹列表”中,单击要添加到当前导航结构 中的网页,然后再将其拖到导航视图结构中所需的位 置上。 如果“文件夹列表”没有显示,可以单击“视图”菜单 →“文件夹列表”命令,或单击“切换窗格”图标 , 也可以打开“文件夹列表”。 第6章 网页的布局 3) 修改导航栏上网页的标题 网页上的标题将成为导航栏中相应的图标标题。 如果网页没有设置标题,FrontPage 2002就会默认以网 页的文件名作为标题。 在“导航”视图中,用鼠标右键单击要修改标题的网 页,再单击快捷菜单上的“重命名”命令,即可修改网 页标题。 第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章 网页的布局 由于主题控制着站点内网页的外观,所以选择了 某种主题,就意味着确定了站点的某种风格。不过, FrontPage 2002在主题的使用上是非常灵活的,可以将 主题应用在整个Web站点上,也可以将主题应用在站 点的部分网页中。另外,FrontPage 2002的主题是允许 修改的,可以根据个人的爱好对主题进行修改,比如 配色方案、图片、导航栏等。 第6章 网页的布局 6.2.1 在网页中使用FrontPage 2002的主题 主题可以应用到整个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) 单击“格式”菜单→“主题…”命令,打开“主题” 对话框,如图6-10所示。 (4) 在“主题”对话框中选择“所选的网页”单选框。 其余同上。 注意,这些网页将不再使用Web站点的默认主题设 置(如果有)。任何应用到Web站点的主题更改都不会影 响这些网页。 第6章 网页的布局 6.2.2 在站点中体现主题 在站点中应用了主题之后,还需要再添加各种网页 元素 (比如网页横幅、站点导航栏等)来体现主题。 下面就以应用FrontPage 2002的“诗歌”主题制作“校 园文化广场”为例,介绍如何在网页中体现“主题”。 第6章 网页的布局 该例的制作过程如下。 1. 创建站点并应用主题 (1) 新建一个“空白站点”,并创建若干个网页。分 别将网页标题修改为校园文化广场、学生组织、星座 讲坛……如图6-11所示。 第6章 网页的布局 图6-11 例题的结构 第6章 网页的布局 (2) 单击“格式”菜单→“主题…”命令,打开“主题” 对话框,如图6-12所示。 (3) 在“主题”对话框中选择“所有网页”单选框,并 在“主题”列表框中选择“诗歌”主题。 (4) 单击“确定”按钮,主题便应用到了站点中所有 的网页,如图6-13所示。 第6章 网页的布局 图6-12 选择“诗歌”主题 第6章 网页的布局 图6-13 选择“诗歌”主题的网页 第6章 网页的布局 2. 添加“网页横幅” (1) 在普通“网页”视图下,单击“插入”菜单→“网页横 幅…”命令,打开“网页横幅属性”对话框,如图6-14所示 。 (2) 在“网页横幅文本”标签下的文本框中键入“校园 文化广场”,单击“确定”按钮,网页横幅便出现在网页上 。 第6章 网页的布局 图6-14 设置网页横幅属性 第6章 网页的布局 3. 创建导航栏 (1) 在普通“网页”视图中,单击“插入”→“导航…” 命令,打开“插入Web组件”对话框,如图6-15所示。 (2) 在“插入Web组件”对话框中的“组件类型”列表 框中选择“链接栏”,在“选择栏类型”列表框中选择“基 于导航结构的链接”。单击“下一步”按钮,打开第2个“ 插入Web组件”对话框,如图6-16所示。 第6章 网页的布局 图6-15 创建导航栏 第6章 网页的布局 图6-16 选择导航栏样式 第6章 网页的布局 (3) 在第2个“插入Web组件”对话框中的“选择链接 栏样式”列表框中,选择“使用页面主题”。单击“下一步 ”,打开第3个“插入Web组件”对话框,如图6-17所示。 第6章 网页的布局 图6-17 选择导航栏方向 第6章 网页的布局 (4) 在第3个“插入Web组件”对话框的“选择方向列 表框”中,选择“插入横向连接的链接栏”,然后单击“完 成”按钮,打开“链接栏属性”对话框,如图6-18所示。 第6章 网页的布局 图6-18 设置导航栏属性 第6章 网页的布局 (5) 在“链接栏属性”对话框中的“要添加到网页的 超链接”标签下,选择“主页下面的子页”单选框,在“其 他网页”标签下,选择“主页”复选框。单击“确定”按钮 ,导航栏便创建完成,如图6-19所示。 第6章 网页的布局 图6-19 应用主题的实例 第6章 网页的布局 6.2.3 修改和删除主题 在FrontPage 2002中通过修改主题,可以在站点中 体现个性化的特点。对主题的修改主要是对主题的配 色方案、文本和图片等进行修改。 1. 修改主题 (1) 打开任意一个应用了主题的网页。 (2) 单击“格式”菜单→“主题…”命令,打开“主题” 对话框,如图6-20所示。 第6章 网页的布局 图6-20 修改主题样式 第6章 网页的布局 (3) 在“主题”对话框中,单击“修改”按钮。 (4) 这时在“修改”按钮之上出现了“颜色”、“图形” 及“文本”3个修改按钮,分别用来修改主题中的颜色、 图形和文本。 第6章 网页的布局 ■ 修改主题中的颜色 ① 在“主题”对话框中,单击“颜色”按钮,打开“修 改主题”对话框。 ② 在“配色方案”选项卡下的“颜色方案”列表框中 选择一种方案,如图6-21所示。 ③ 如果要自定义配色方案,可以单击“颜色盘”选 项卡,如图6-22所示。 第6章 网页的布局 图6-21 修改主题的颜色 第6章 网页的布局 图6-22 设置配色方案 第6章 网页的布局 ④ 如果要单独设置主题中各个元素的颜色,可以 单击“自定义”选项卡,如图6-23所示。 ⑤ 完成后单击“确定”按钮,返回“主题”对话框。 ■ 修改主题中的图形 ① 在“主题”对话框中单击“图形”按钮,打开“修改 主题”对话框。 ② 在“图片”选项卡中,可以设置主题中的背景图片 、横幅图片、导航按钮图片等,如图6-24所示。 第6章 网页的布局 图6-23 自定义各元素的颜色 第6章 网页的布局 图6-24 修改主题中的图片 第6章 网页的布局 ③ 在“字体”选项卡中,可以设置图片上的字体。 ④ 完成后单击“确定”按钮,返回“主题”对话框。 ■ 修改主题中的文本 ① 在“主题”对话框中单击“文本”按钮,打开“修改主 题”对话框。 ② 在“项目”下拉列表框中,可以选择修改网页标题 以及正文的字体,如图6-25所示。 ③ 全部内容修改完之后,在“主题”对话框中单击“确 定”按钮。这时,FrontPage要求将修改后的主题保存为 该主题的副本。 第6章 网页的布局 图6-25 修改主题中的文本 第6章 网页的布局 ■ 修改横幅文本 修改横幅文本是指修改横幅文本的内容。 单击“插入”菜单→“网页横幅…”命令,打开“网页 横幅属性”对话框,在“网页横幅”文本框中键入或者更 改网页文本。 第6章 网页的布局 2. 删除主题 使用主题的最大弱点就是缺乏个性。要克服这个 弱点,最好的办法是不使用主题,或者从站点中删除 主题。 1) 从当前网页中删除主题 (1) 在普通“网页”视图中打开要删除主题的网页。 (2) 单击“格式”菜单→“主题…”命令,打开“主题”对 话框,如图6-9所示。 第6章 网页的布局 (3) 在“将主题应用到”标签下选择“所选的网页”复选框。 (4) 在“主题列表”框中单击“无主题”。 (5) 单击“确定”按钮,主题即被删除。 2) 从Web站点的所有网页中删除主题 (1) 单击“格式”菜单→“主题…”命令,打开“主题”对话框。 (2) 在“将主题应用到”标签下单击“所有网页”复选框。 (3) 在“主题列表”框中单击“无主题”。 第6章 网页的布局 6.3 框 架 网 页 框架网页是一种特殊的HTML网页。框架网页的 最大特点是能够将浏览器窗口分割成若干个子窗口, 并且可以在浏览器窗口中同时显示静态和动态的网页 信息。框架网页通常用于目录、文章或信息列表。在 一个框架中单击超链接会在另一个框架中显示相应的 网页。此外,框架网页还能够包含内置导航并显示一 致的框架结构和布局。下面是一个使用框架网页的实 例(如图6-26所示)。 第6章 网页的布局 图6-26 在网页中使用框架 第6章 网页的布局 在这个例子中,左边是目录框架,它的作用是导 航;右边是主框架。单击左边目录框架中的超链接时 ,会在右边的主框架中打开该超链接指向的网页,因 此,右边主框架中显示的内容是动态的,是随左边导 航位置的改变而改变的。在浏览器中,当主框架中的 网页改变时,并不需要更新整个页面,而只需更新右 边主框架中的网页。 第6章 网页的布局 一个框架网页是由若干个框架(被称为框架集)组成 的。在框架集中,各个框架是相互独立的,每一个框 架都显示具有独立内容的网页。事实上,框架网页并 不是一个真正意义上的网页,它不包含任何可见的内 容,而只是作为一个容器,用来指定要显示的其他网 页及其显示方式。 第6章 网页的布局 6.3.1 创建框架及框架的属性设置 创建一个框架网页可以使用两种方法。一种方法 是直接使用HTML语言来创建,这种方法在前面已经 做过介绍;另一种方法是使用FrontPage 2002中的框架 模板来创建。下面就来介绍如何使用框架模板创建框 架网页。 第6章 网页的布局 (1) 打开或者新建一个Web站点。 (2) 单击“文件”菜单→“新建”→“网页或站点…”命令 。 (3) 在“新建网页和站点”任务窗格中选择“网页模板” ,打开“网页模板”对话框。 (4) 在“网页模板”对话框中单击“框架网页”选项卡, 如图6-27所示。 第6章 网页的布局 图6-27 使用模板创建框架网页 第6章 网页的布局 (5) 在“框架网页”选项卡中选择“目录”框架网页。 这时,在预览窗口可以看到“目录”框架网页的基本外 观和简要说明,如图6-27所示。 (6) 单击“确定”按钮。这时,出现如图6-28所示的 网页。 (7) 在这两个框架中都包含有“新建网页”按钮和“设 置初始网页…”按钮。 第6章 网页的布局 如果单击“新建网页”按钮,框架中会出现一个新建 的空白网页。 如果单击“设置初始网页…”按钮,这时就会打开“ 插入超链接”对话框。可以从对话框的列表中选择一个 现成的网页,然后单击“确定”按钮,这个网页就会链 接到当前的框架网页中。 第6章 网页的布局 图6-28 新建的框架网页 第6章 网页的布局 6.3.2 在框架中创建初始网页 所谓初始网页是指,站点访问者浏览到包含框架 的框架网页时,最初显示在该框架中的网页。在新建 的框架网页中,FrontPage 2002提供了“新建网页”和“设 置初始网页…”两个按钮,用来在新框架网页中创建初 始网页。 第6章 网页的布局 1. 创建一个新网页并设为初始网页 在框架网页中,单击“新建网页”按钮,这时就会出 现一个新建的空白网页。编辑这个网页的方法和编辑 普通网页的方法没有什么区别,只是在框架中直接编 辑新网页十分不方便。在FrontPage 2002中,允许将框 架中的网页重新显示在普通的网页窗口中,并对其进 行编辑。完成编辑后,关闭普通网页窗口,编辑好的 网页将自动显示在原始的框架中。 第6章 网页的布局 创建一个新网页并设为初始网页的步骤如下。 (1) 在如图6-28所示的框架网页中,单击左边窗口 中的“新建网页”按钮。这时打开一个空白网页,在它 的四周有深蓝色的方框包围,表明这是当前正在编辑 的框 架,如图6-29所示。 (2) 将光标定位在当前的框架窗口中,然后单击鼠 标右键。 第6章 网页的布局 (3) 在弹出的快捷菜单上选择“在新窗口中打开网页” 命令,这时该框架中的网页出现在普通网页窗口中。然 后就可以像编辑普通网页一样对它进行编辑了。 (4) 在新窗口中完成编辑之后,单击“文件”菜单→“ 关闭”命令,则编辑好的网页自动显示在原始框架中。 (5) 可以按照同样的方法,编辑右边的框架网页。 第6章 网页的布局 图6-29 创建编辑初始网页 第6章 网页的布局 2. 选择一个已创建的网页并设为初始网页 (1) 要将一个已经创建好的网页设为初始网页,可 以先 在框架中单击“设置初始网页”按钮,打开“插入超 链接”对话框,如图6-30所示。 第6章 网页的布局 图6-30 将已创建的网页设为初始网页 第6章 网页的布局 (2) 从当前文件夹的已创建网页列表中选择一个网 页,单击“确定”按钮,选中的网页将显示在框架中。在 列表框中查找并打开所需的网页,将其设为初始网页。 或者通过单击“搜索Web”图标 ,通过网络浏览到 要使用的网页,单击“确定”按钮,即可将一个已创建好 的网页设为初始网页。 第6章 网页的布局 3. 保存框架网页 保存框架网页与保存普通网页有所不同,在保存 框架网页时,不仅要将各框架中的网页保存起来,同 时还要将整个框架网页保存起来。 第6章 网页的布局 保存框架网页的步骤如下。 (1) 在普通“网页”视图中,打开要保存的框架网页 ,再单击网页底部的“普通”图标 。 (2) 单击框架中要保存的网页,再单击“框架”菜单 →“另存为网页”命令。 在“另存为”对话框中会显示框架网页布局的缩略图 。用深蓝色的框突出显示的框架,表明是要保存的当 前网页,如图6-31所示。 第6章 网页的布局 图6-31 保存左边框架中的网页文件 第6章 网页的布局 (3) 在“文件名”框中,为要保存的框架网页键入适 当的文件名,以区别于其他普通网页。 注意,文件名要能够将该网页标识为框架内的网页 ,而不是框架网页本身。例如“文档A”等。 (4) 在“保存类型”框中,选择Web页为保存类型。 第6章 网页的布局 (5) 单击“保存”后,“另存为”对话框会自动再次打 开,并要求保存刚才保存过的框架中显示的其他网页 。如图6-32所示的框架网页会出现3次“另存为”对话框 ,提示键入各个文件的文件名,需要分别键入3个不同 的文件名,如图6-33所示。 第6章 网页的布局 图6-32 保存右边框架中的网页 第6章 网页的布局 图6-33 保存框架网页 第6章 网页的布局 6.3.3 设置框架网页的属性 框架网页具有多种属性,如边框、滚动条、可调 整性等。设置框架属性的步骤如下。 (1) 在普通“网页”视图中,选择要设置属性的框架 网页。 (2) 单击“框架”→“框架属性…”命令,打开“框架属 性”对话框,如图6-34所示。 第6章 网页的布局 图6-34 设置框架属性 第6章 网页的布局 在“框架属性”对话框中,可以设置如下属性。 名称:这个名称是指框架网页中单个框架的名称。 一般地,FrontPage 2002的框架模板会自动提供默认的框 架名称。也可以在名称文本框中指定或者修改框架网页 的名称。名称对于指定超链接的框架目标非常重要。 初始网页:指定或者修改框架中初始显示的网页。 可以在文本框中键入网页的URL,或者使用“浏览…”按 钮选择和确定网页。 第6章 网页的布局 框架大小:可以分别设置框架的“列宽”和“高度”, 并且有“相对”、“百分比”、“像素”3种单位表示。建议 选择“百分比”,以便适应各种不同分辨率的显示器。 边距:设置框架内网页元素与框架之间的距离, 以像素为单位,一般情况下直接使用默认值即可。 可在浏览器中调整大小:用于设置是否可以在浏 览器中调整框架的大小。 显示滚动条:有3种属性值,分别如下。 第6章 网页的布局 ● 需要时显示:当框架中的内容大于当前的窗口尺 寸时,浏览器自动显示滚动条。如果框架的高度大于 宽度,则滚动条将上下滚动;如果框架宽度大于高度 ,则滚动条将左右滚动。 ● 不显示:无论在什么情况下,即使框架中的网页 内容超出框架窗口,浏览器都不显示滚动条,这样会 造成超出框架窗口的内容不可见。 ● 始终显示:浏览器始终显示滚动条,即使所有内 容能够在当前网页中完全显示时也不例外。 第6章 网页的布局 一般情况下,可以将滚动条设置为“需要时显示”。 (3) 设置完所有的框架属性后,单击“确定”按钮, 即可将属性应用到框架中。可以在框架中分别设置各 个框架的属性。 如果要设置框架的间距,可以在“框架属性”对话框 中单击“框架网页…”按钮,打开“网页属性”对话框,并 单击“网页”选项卡,如图6-35所示。 第6章 网页的布局 图6-35 设置框架的边框属性 第6章 网页的布局 在“网页”选项卡中,可以进行如下设置。 框架间距:设置框架之间的边框间距,以像素为 单位。 显示边框:设置在浏览器中框架之间是否显示可 见边框。 如果要隐藏框架,可以清除“显示边框”复选框,并 将“框架间距”设置为零。 注意,在“网页”选项卡中设置的属性对所有框架 都有效。 第6章 网页的布局 6.3.4 拆分框架和删除框架 1. 拆分框架 在创建了框架之后,还可以根据需要在已有的框 架基础上进行拆分。 例如,对一个“目录”框架网页,拆分的步骤如下。 (1) 新建一个“目录”框架网页。 (2) 将光标定位在右边的框架窗口中,单击“框架” 菜单→“拆分框架”命令,打开“拆分框架”对话框,如图 6-36所示。 第6章 网页的布局 图6-36 拆分框架 第6章 网页的布局 (3) 选择“拆分成行”单选按钮,这时右边框架被拆 分为上下两个框架,如图6-37所示。 另外,还可以使用鼠标拆分框架。例如,将鼠标 放在两个框架之间的边框上,当光标变成黑色的双向 箭头时,按下鼠标左键并同时按下Ctrl键拖动鼠标到需 要的位置后,释放鼠标左键,这时便出现了新的框架 。 第6章 网页的布局 图6-37 拆分框架网页 第6章 网页的布局 2. 删除框架 在框架的编辑过程中,可以删除不需要的框架。 要删除框架,必须先选中要删除的框架,然后单击“框 架”菜单,再单击“删除框架”命令,即可将框架删除。 第6章 网页的布局 6.3.5 目标框架的控制 使用框架的目的,就是希望当单击某个框架中的 超链接时,目标网页会在其他框架中打开,从而避免 刷新整个页面。在FrontPage 2002中,这一功能是通过 定义超链接的目标框架来实现的。 第6章 网页的布局 1. 理解目标框架 为认识FrontPage 2002中的目标框架,先来创建一 个如图6-28所示的“目录”框架网页。分别在左边的框架 和右边的框架中单击“新建网页”按钮,新建两个空白 网页。然后在任意一个框架中单击鼠标右键,在快捷 菜单中选择“网页属性…”命令,打开“网页属性”对话框 (如图6-38所示)。在“网页属性”对话框中,再单击“更 改目标框架”按钮,打开“目标框架”对话框(如图6-39所 示)。 第6章 网页的布局 图6-38 “网页属性”对话框 第6章 网页的布局 图6-39 “目标框架”对话框 第6章 网页的布局 在“目标框架”对话框中的“当前框架网页”标签下, 显示的是当前框架网页的缩略图。单击左边的框架,则 在“目标设置”标签下的文本框中显示出“contents”(目录) ,而单击右边的框架时,则显示为“main”(主体)。这两 个框架的名称是由FrontPage的框架模板默认提供的。 在“目标框架”对话框的“公用的目标区”标签下,还 包含了“网页默认值”、“相同框架”、“整页”、“新建窗 口”、“父框架”等目标框架。 第6章 网页的布局 网页默认值:是当前框架中网页默认的目标框架 。它可以在“框架属性”对话框中自定义。通常,最后 一次定义的目标框架名称将被作为默认值。如果没有 自定义,FrontPage将使用框架模板默认的目标框架名 称,如“main”、“contents”等。 相同框架:在这个目标框架中建立的超链接,将 和目标网页使用同一个框架。所指向的目标网页,将 覆盖并显示在这个框架中。 第6章 网页的布局 整页:在这个目标框架中建立的超链接所指向的 网页,将被浏览器加载到整个窗口中。 新建窗口:当单击由这个目标框架建立的超链接 时,浏览器将会打开一个新窗口。 父框架:父框架中的超链接所指向的网页会在浏 览器中覆盖该链接所在的网页。 第6章 网页的布局 2. 使用目标框架的综合实例——目录导航 下面通过一个实例的制作过程,介绍如何在框架 中定义站点导航,使用目标框架。 制作一个框架网页,要求实现如下功能:当在浏 览器中单击目录中任意章节的导航按钮时,能够在右 边的主框架网页中显示该章节的内容,如图6-40所示 。 第6章 网页的布局 图6-40 一个应用框架的实例 第6章 网页的布局 创建的步骤如下。 (1) 创建一个Web站点,并在该站点中制作若干个 网页,各网页的标题名称如图6-41所示。 (2) 在“导航”视图中创建一个“目录”框架网页,如 图6-41所示。 (3) 在左边的框架中建立目录的导航栏。 第6章 网页的布局 图6-41 实例图的站点结构 第6章 网页的布局 ① 在左边的目录框架中,单击“新建网页”按钮, 新建一个空白网页。 ② 在新建的网页中单击“插入”菜单→“导航…”命 令,打开“插入Web组件”对话框。 ③ 在“组件类型”列表框中,选择“链接栏”选项, 在“选择栏类型”列表框中选择“基于导航结构的链接栏” 选项,然后单击“下一步”按钮,如图6-42所示。 第6章 网页的布局 图6-42 在框架中创建导航栏 第6章 网页的布局 ④ 在“选择栏样式”下拉列表框中选择需要的导航 栏样式,单击“下一步”按钮,如图6-43所示。 ⑤ 在“选择方向”列表框中选择“垂直”方向,单击“ 完成”按钮。这时,将打开“链接栏属性”对话框。 ⑥ 在“链接栏属性”的“常规”选项卡中,在“要添加 到网页的超链接”标签下选择“主页下面的子页”单选框 ,并在“其他网页”标签下选择“主页”复选框。 这时在左边的目录框架中出现“将此网页添加到导 航视图中,以便在此处显示超链接”的提示,如图6-44 所示。 第6章 网页的布局 图6-43 设置导航栏样式 第6章 网页的布局 图6-44 在框架中建立导航栏 第6章 网页的布局 ⑦ 在目录框架中单击鼠标右键,在快捷菜单上单 击“网页属性…”命令,打开“网页属性”对话框,如图6- 38所示。 ⑧ 在“网页属性”对话框中单击“更改目标框架”按 钮,打开“目标框架”对话框。 ⑨ 在“当前框架网页”标签下单击缩略图右边的“主 框架网页”,如图6-39所示。 ⑩ 这时在“目标设置”文本框中,显示“main”名称 ,单击“确定”按钮,退出“目标框架”对话框,再单击“ 确定”按钮,返回普通“网页”视图。 第6章 网页的布局 (4) 建立目标网页。 ① 在普通“网页”视图中,单击右边主框架网页中 的“新建网页”按钮,新建一个空白网页。 ② 在这个新建的空白网页上单击鼠标右键,打开 “网页属性”对话框。 ③ 在“网页属性”对话框中单击“更改目标框架”按 钮,打开“目标框架”对话框。 ④ 在“当前框架网页”标签下,单击缩略图右边的“ 主框架网页”。 第6章 网页的布局 ⑤ 这时在“目标设置”文本框中,显示“main”名称 。单击“确定”按钮。 ⑥ 再单击“网页属性”对话框中的“确定”按钮,返 回目录框架网页中。 第6章 网页的布局 (5) 保存框架网页。 ① 在左边的目录框架中,单击“常用”工具栏上的“保 存”图标,打开“另存为”对话框。 ② 在“另存为”对话框中的“文件名”文本框中将文件 名改为new_page_A,然后单击“保存“按钮。 这时又打开“另存为”对话框,接着FrontPage 2002 要求保存“主框架”网页。 ③ 将文件名改为new_page_B,然后单击“保存”按钮 。 第6章 网页的布局 ④ 这时“另存为”对话框再次打开,要求保存“框架 集”。在“文件名”文本框中键入new_page_AB,单击“保 存”按钮。 ⑤ 将普通“网页”视图切换到“导航”视图,然后将框 架网页添加到“导航”视图中,如图6-45所示。至此,实 例的制作过程就全部完成了。 在普通“网页”视图中单击“用浏览器预览”图标,打 开浏览器窗口,就能够通过导航按钮查看每个章节的 内容,如图6-46所示。 第6章 网页的布局 图6-45 实例的导航视图 第6章 网页的布局 图6-46 制作完成后的实例 第6章 网页的
展开阅读全文
  麦档网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:第6章 网页的布局
链接地址:https://www.maidoc.com/p-15678663.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

[email protected] 2018-2020 maidoc.com版权所有  文库上传用户QQ群:3303921 

麦档网为“文档C2C模式”,即用户上传的文档所得金币直接给(下载)用户,本站只是中间服务平台,本站所有文档下载所得的金币归上传人(含作者)所有。
备案号:蜀ICP备17040478号-3  
川公网安备:51019002001290号 

本站提供办公文档学习资料考试资料文档下载


收起
展开