网页设计与制作项目9框架

9.2
网页制作
步骤5 选择【文件】|【保存全部】命令项，将整个 框架集页面命名为“lydjindex.html”，作为“旅游度假” 栏目首页保存在站点根目录中。因为mainFrame框架中的 Untitled-1.html页面之前没有保存，紧接着会提示保存， 将Untitle-1.html页面重新命名为lydjmain.html保存在 站点根目录中。 步骤6 鼠标点击进入顶部topFrame框架页面，选择 【文件】|【保存框架】命令项，或者直接按“Ctrl+S” 组合键，将topFrame框架页面命名为“top.html”，保存 在站点根目录中。
9.2
网页制作
步骤6 打开【页面属性】对话框，将 indexmain.html页面的上下边距和左右边距都设为0。 步骤7 在indexmain.html中插入表格，设置表格宽 度为608像素，制作如图9-17所示的页面内容。 步骤8 在工作区设计视图中打开left.html页面，设 置页面的上下边距和左右边距都设为0。在页面中插入表 格，设置表格宽度为288像素，对齐方式为右对齐，制作 “旅游度假”子栏目导航。
采用框架布局的“乐途网”首页效果图
9.1
网页展示：使用框架布局“旅游度假”页面
“旅游度假”页面 的框架结构如图所示。 页面用框架集分成了四 个部分，顶部topFrame 框架用于显示网站导航， 中间左侧leftFrame框架 用于显示“旅游度假” 子栏目导航，中间右侧 mainFrame框架用于显示 子栏目内容，底部 bootomFrame框架用于显 示站点版权等信息。
9.2
网页制作
步骤4 在设计视图中打开top.html页面，选择“乐 途网”导航中的“旅游度假”图标，在【属性】面板中设 置链接为lydjindex.html，链接目标设置为_parent，保 证单击“旅游度假”栏目链接时，lydjindex.html页面会 显示在整个浏览器窗口中，而不是显示在某个框架中，如 图所示。
项目9 高效灵活的网页布局——框架的应用
电子工业出版社
知识要点
1 2认识框Leabharlann 及框架集掌握框架网页的创建方法
3
掌握框架及框架集的基本操作
4
掌握框架及框架集的属性设置方法
9.1
网页展示：使用框架布局“旅游度假”页面
运行Dreamweaver CS6，创建站点，使用框架布局制作 “旅游度假”页面，页面效果图如图所示。
9.2
网页制作
步骤9 以设计视图打开bottom.html页面，设置页面 的上下边距和左右边距都设为0。在页面中插入表格，设 置表格宽度为890像素，对齐方式为左对齐。读者在制作 这个页面时，可以将之前制作好的底部表格直接复制粘贴 到bottom.html页面中，以提高页面制作效率。 步骤10 将页面全部保存，在浏览器中浏览 lydjindex.html，就会看到显示的页面效果。
9.2
网页制作
创建和保存框架页面
9.2.1
步骤1 运行Dreamweaver CS6，按照前面章节所介绍的 方法创建“乐途网”站点，选择【新建】菜单命令，在站点 根目录中新建一个空白的HTML页面文件，默认名称为 Untitled-1.html。 步骤2 在【设计】视图中打开Untitled-1.html页面， 选择【插入】|【HTML】|【框架】|【上方及下方】菜单命 令项，在页面中插入框架。这时会弹出【框架标签辅助功能 属性】对话窗口。网页面窗口被分成了上中下三个部分，顶 部为topFrame框架，中间灰色部分为mainFrame框架，底部 为bottomFrame框架。在【框架标签辅助功能属性】对话框 中可以为每个框架设置一个标题。单击【确定】按钮，返回 到【设计】视图，Untitiled-1.html页面被自动放置在 mainFrame框架中。
9.3.2
创建框架网页
1．通过【插入】菜单来创 建框架页面 步骤1 首先新建空白网页 文档。 步骤2 选择菜单栏中的【 插入】|【HTML】|【框架】命 令，在弹出的子菜单中选择相 应的选项即可创建框架网页， 如图所示。
9.3.2
创建框架网页
2．手动创建框架
步骤1 新建空白网页文档， 选择【查看】|【可视化助理】|【 框架边框】命令项，将框架的边框 在编辑窗口四周显示出来，如图所 示。 步骤2 用鼠标拖动水平或者 垂直的框架外边框到适当的位置， 释放鼠标，就可以将框架拆分。如 果将拆分框架所生成的框架边框拖 动到下图所显示的框架边框之外， 则取消框架的拆分。
“旅游度假”页面框架结构
9.1
网页展示：使用框架布局“旅游度假”页面
当用户点击左侧leftFrame框架中的链接时，所链接的页面内 容会在mainFrame框架位置显示，顶部站点导航、底部版权信息以 及左侧栏目导航内容保持不变，只有mainFrame框架中的内容发生 变化，而整个“旅游度假”页面没有被重新加载。如果mainFrame 框架中显示的页面内容超出显示范围时，会在框架右侧及底部显 示垂直滚动条和水平滚动条。下图所示为当点击左侧栏目“北京” 链接时所显示的页面内容。
9.2
网页制作
步骤2 用同样的方法设置“广西｜桂林”等子页面 的超级链接。当用户在left.html页面中单击“首都｜北 京”、“广西｜桂林”等文本时，对应子页面的内容就 会显示在右侧mainFrame框架中。 步骤3 在left.html中，鼠标单击选择“旅游度假 ”文字右侧的图片，在【属性】面板中设置图像链接为 lydjmain.html，目标为mainframe，如图所示。
9.3.2
创建框架网页
步骤3 按住“Alt”键，将鼠标移动到框架边框 线上，当鼠标指针变为双向箭头形状时，按住鼠标左 键不放，拖动到合适位置释放鼠标，就可以对拆分后 的框架进行再次拆分。
9.3.2
创建框架网页
3．创建嵌套框架集
步骤1 将鼠标定位到需要 创建嵌套框架集的框架中，如右 图所示。
步骤2 在【插入】|【HTML 】|【框架】菜单项中选择要插 入的框架集。如右图所示。“旅 游度假”框架集网页其实就是嵌 套框架集。
9.2
网页制作
步骤3 鼠标单击中间mainFrame框架内的Untitled1.html页面，将光标放到该页面中，选择【插入】| 【HTML】|【框架】|【左对齐】菜单命令项，将窗口中间 框架又分成左右两个框架。其中左侧为leftFrame框架， 右侧灰色部分为mainFrame框架，mainFrame框架中的页面 仍然是Untitled-1.html。 步骤4 单击【确定】按钮关闭对话框，完成“旅游 度假”栏目框架网页的创建，接下来对框架网页进行保存。
9.3.3 框架及框架集的基本操作
1．保存框架和框架集文件
框架及框架集都是HTML文档，因此这些文件必须一起 保存。在Dreamweaver中用户可以单独保存一个框架集文件， 也可以保存某个框架文件，还可以保存所有打开的框架文 件和框架集文件。 （1）保存框架集的所有文件 要保存所有文件，包括框架集文件和框架文件，可以 执行【文件】|【保存全部】菜单命令。这时Dreamweaver 将逐个保存网页中的所有框架。
9.2
网页制作
步骤2 在设计视图中，对gnly.html页面的表格结 构进行修改，注意保持表格宽度与lydjmain.html页面表 格宽度一致。“首都｜北京”子页效果如图所示。
9.2
网页制作
步骤3 设置好CSS后，将页面保存。用同 样的方法快速制作“广西｜桂林”、“江苏｜ 苏州园林”等子页面。
9.2
网页制作
9.2.2 设置框架及框架集属性
步骤1 选择【窗口】|【框架】命令项，快捷键为 “Sift+F2”，打开【框架】面板。 步骤2 在【框架】面板中，用鼠标点击框架集边框， 选择在页面中插入的“上方及下方”框架集，显示框架集 【属性】面板。 步骤3 这里设置边框为“否”，边框宽度为0。在 【属性】面板的右侧“行列选定范围”中，用鼠标点击选中 topFrame框架，将“行”值设置为190，鼠标选中 bottomFrame框架，将“行”值设置为60。
9.3.1 认识框架和框架集
框架网页是一种特殊的HTML网页，框架的作用就是 把浏览器窗口划分成若干个区域，每个区域都可以分别 显示不同的网页。框架网页由两个主要部分组成：框架 集和单个框架。框架集是在一个文档内定义一组框架结 构的HTML网页，该网页文件中定义了要显示的框架数、 框架的大小、载入框架的网页源和其他可定义的属性。 单个框架是指在网页上定义的一个区域，每个框架就是 不同的HTML文档。框架集和框架之间的关系就是包含与 被包含的关系。
9.2
网页制作
9.2.4
制作“北京”等子页面
用户在left.html页面中单击“首都｜北京”超级 链接后，子页beijing.html的内容将在右侧 mainFrame框架中显示。 子页beijing.html的制作方法与lydjmain.html相 同，可以利用lydjmain.html页面快速创建 gnly.html。 步骤1 在工作区中以设计视图打开制作好的 lydjmain.html页面。选择【文件】|【另存为】 命令项，将lydjmain.html页面另存为 beijing.html页面，保存在站点 “letuweb\ch9”中。
9.2
网页制作
9.2.2 设置框架及框架集属性
步骤4 在【框架】面板中，用鼠标点击框架集边框， 如图9-8所示，选择在页面中间插入的“左对齐”框架集。 步骤5 在框架集【属性】面板右侧“行列选定范围 ”中选择“leftFrame”框架，设置边框为“否”，边框 宽度为0， “列”值设置为282。 步骤6 在【框架】面板中选择“topFrame”框架， 在【属性】面板中设置顶部框架的属性。 步骤7 在【框架】面板中选择“mainFrame”框架， 在【属性】面板中设置内容显示主框架的属性。