第10章 旅游网站框架网页设计(免费下载)课件

1、Dreamweaver CS5网页制作基础教程网页制作基础教程 本章将介绍在本章将介绍在Dreamweaver CS5中，中，创建和设置框架网页的基本方法。创建和设置框架网页的基本方法。 第第1010章章 旅游网站框架网页设计旅游网站框架网页设计学习目标学习目标 了解框架和框架集的概念和工作原理。了解框架和框架集的概念和工作原理。 掌握创建、编辑框架和保存框架网页的方法。掌握创建、编辑框架和保存框架网页的方法。 掌握设置框架和框架集属性的方法。掌握设置框架和框架集属性的方法。 掌握在框架中显示现有文档的方法。掌握在框架中显示现有文档的方法。 掌握设置框架中超级链接的方法。掌握设置框架中超级链接

2、的方法。 掌握创建浮动框架和编辑无框架内容的方法。掌握创建浮动框架和编辑无框架内容的方法。10.110.1设计思路设计思路在本章实例中，浏览器窗口将被划分成4区域。首先创建一个“上方固定，下方固定”的框架页，然后将中间的框架使用【拆分右框架】命令进行拆分，并对框架和框架集设置属性，最后对框架网页进行保存，并根据需要编辑无框架内容和插入浮动框架。 10.2 10.2 认识框架认识框架 框架和框架集的概念框架和框架集的概念 框架和框架集的工作原理框架和框架集的工作原理 框架集的嵌套框架集的嵌套 利用框架可以将浏览器窗口划分成多个区域，这些利用框架可以将浏览器窗口划分成多个区域，这些被划分出来的区域

3、称为框架，在每个框架中可以被划分出来的区域称为框架，在每个框架中可以显示不同的网页文档。这些框架可以有各自独立显示不同的网页文档。这些框架可以有各自独立的背景、滚动条和标题等。通过在这些不同的框的背景、滚动条和标题等。通过在这些不同的框架之间设置超级链接，还可以在浏览器窗口中呈架之间设置超级链接，还可以在浏览器窗口中呈现出有动有静的效果。现出有动有静的效果。 10.2.1 10.2.1 框架和框架集的概念框架和框架集的概念框架集是HTML文件，主要用来定义一组框架的布局和属性，包括显示在页面中框架的数目、框架的大小和位置、最初在每个框架中显示的页面的URL以及其他一些可定义属性的相关信息。框架

4、集文件本身不包含要在浏览器中显示的内容，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。当然，如果框架集文件含有“noframes（编辑无框架内容）”部分，其将会显示在浏览器中。 通常可以用框架来设置网页中固定的几个部分：一个框架显示包含导航控件的文档，而另一个框架显示包含内容的文档。如果一个网页左边的导航菜单是固定的，而页面中间的信息可以上下移动来展现所选择的网页内容，这一般就可以认为是一个框架型网页。也有一些站点在其页面上方放置了公司的Logo或图像，其位置也是固定的，而页面的其他部分则可以上下左右移动来展现相应的网页内容，这也可以认为是一个框架型网页。 10.

5、2.2 10.2.2 框架和框架集的工作原理框架和框架集的工作原理在一个框架集中的另一个框架集称为嵌套框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的网页实际上都使用嵌套的框架，在Dreamweaver CS5中大多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。有两种方法可在HTML中嵌套框架集：内部框架集可以与外部框架集在同一文件中定义，也可以在不同的文件中单独定义。这两种类型的嵌套均产生相同的视觉效果，如果没有看到代码，很难判断使用的是哪种类型的嵌套。 10.2.3 10.2.3 框架集的嵌套框架集的嵌套在Dream

6、weaver CS5中，每个预定义的框架集均在同一文件中定义其所有框架集。在Dreamweaver CS5中使用外部框架集文件的最常见情形是：使用【在框架中打开】命令在框架内打开一个框架集文件，但这可能导致设置链接目标时出现问题，通常最简单的方法是在单个文件中定义所有的框架集。 10.3 10.3 创建和保存框架网页创建和保存框架网页 创建框架网页创建框架网页 保存框架网页保存框架网页 在框架中显示现有文档在框架中显示现有文档 如果创建的框架网页所有文档都是新文档，需要先保存所有文档，同时需要在保存的框架中的文档内添加内容。如果已经将在各个框架中显示的文档预先制作好了，在创建框架网页时，就只需

7、要保存框架集文件，然后在各个框架中打开已预先制作好的文档即可。 选择【文件】/【新建】命令，打开【新建文档】对话框，在对话框中选择【示例中的页】/【框架页】/【上方固定，下方固定】选项。10.3.1 10.3.1 创建框架网页创建框架网页如果在【首选参数】对话框的【辅助功能】分类中选择了【框架】选项，会弹出【框架标签辅助功能属性】对话框。在菜单栏中选择【窗口】/【框架】命令可查看所命名的框架关系图。10.3.2 10.3.2 保存框架网页保存框架网页在浏览器中预览框架网页前，需要先保存框架集文件以及要在框架中显示的所有文档。既可以单独保存每个框架集文件和框架中的文档，也可以同时保存框架集文件和

8、框架中出现的所有文档。保存框架集文件：在【框架】面板中单击最外层框架集的边框选中最外层框架集，在菜单栏中选择【文件】/【保存框架页】命令。如果要将已保存过的框架集文件另存为新文件，需要选择【文件】/【框架集另存为】命令。如果以前没有保存过该框架集文件，这个命令与【文件】/【保存框架页】命令是等效的。 保存框架中显示的文档：在文档窗口的顶部框架“topFrame”内单击鼠标左键，然后在菜单栏中选择【文件】【保存框架】命令对顶部框架中的文档进行保存。如果要将已保存过的框架文件另存为新文件，需要选择【文件】/【框架另存为】命令。如果以前没有保存过该框架文件，这个命令与【文件】/【保存框架】命令是等效

9、的。 如果创建的框架网页所有文档都是新文档，需要先保存所有文档，同时需要在保存的框架中的文档内添加内容。如果已经将在各个框架中显示的文档预先制作好了，在创建框架网页时，就只需要保存框架集文件，然后在各个框架中打开已预先制作好的文档即可。 在文档窗口中将鼠标光标置于框架内，然后在菜单栏中选择【文件】/【在框架中打开】命令打开文档。在保存了框架集文件后，在浏览器中打开框架集文件时，这些在框架中打开的文档就成为在框架中显示的默认文档。 10.3.3 10.3.3 在框架中显示现有文档在框架中显示现有文档10.4 10.4 设置框架和框架集属性及框架中的链接设置框架和框架集属性及框架中的链接 选择框架

10、和框架集选择框架和框架集 设置框架集属性设置框架集属性 设置框架属性设置框架属性 设置框架网页中的超级链接设置框架网页中的超级链接 一、在【框架】面板中选择框架或框架集 10.4.1 10.4.1 选择框架和框架集选择框架和框架集二、在文档窗口中选择框架或框架集 三、选择不同的框架或框架集如果要在当前选定内容的同一层次级别上选择下一框架（框架集）或前一框架（框架集），需要在键盘上按住Alt键的同时按下左箭头键或右箭头键。使用这些键，可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。如果要选择父框架集（包含当前选定内容的框架集），可在键盘上按住Alt键的同时按上箭头键。如果要

11、选择当前选定框架集的第1个子框架或框架集（即在框架集文件中定义顺序中的第1个），在按住Alt键的同时按下箭头键。 使用【属性】面板可以查看和设置大多数框架集属性，包括框架集边框、框架大小等。 10.4.2 10.4.2 设置框架集属性设置框架集属性使用【属性】面板可以查看和设置大多数框架属性，包括边框、边距以及是否在框架中显示滚动条等。 10.4.3 10.4.3 设置框架属性设置框架属性如果要在一个框架中使用超级链接打开另一个框架中的文档，必须设置链接目标窗口打开方式。超级链接的target属性指定在其中打开所链接内容的框架或窗口。 10.4.4 10.4.4 设置框架网页中的超级链接设置框

12、架网页中的超级链接10.5 10.5 优化框架网页优化框架网页 使用框架存在的问题使用框架存在的问题 优化框架网页优化框架网页 如果确定要使用框架，它最常用于导航。一组框架中通常包含两个框架，一个含有导航条，另一个显示主要内容页面。按这种方式使用框架，它具有以下优点。(1)浏览者的浏览器不需要为每个页面重新加载与导航相关的图形。(2)每个框架都具有自己的滚动条，因此浏览者可以独立滚动这些框架。但是，Adobe公司并不鼓励在网页布局中使用框架，原因可归纳为以下几个方面。(1)可能难以实现不同框架中各元素的精确图形对齐。(2)对导航进行测试可能很耗时间。(3)框架中显示的每个页面的URL不显示在浏

13、览器地址栏中，因此浏览者可能难以将特定页面设为书签。10.5.1 10.5.1 使用框架存在的问题使用框架存在的问题(4)目前并非所有浏览器都对框架提供良好的支持，并且框架对于残障人士来说导航会有困难。(5)更主要的是，在许多情况下可以创建没有框架的网页，它可以达到与框架网页同样效果。例如，如果希望导航条显示在页面的左侧，可以在站点中的每一页的左侧处包含该导航条即可。在Dreamweaver CS5中，使用模板和库都可以实现这一目标，它们既具有类似框架布局的页面设计，又没有使用框架。(6)目前大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索，这是由于那些具体内容都被

14、放到“内部网页”中去了。为了让更多的浏览者能够正常访问到或者通过搜索引擎能够查询到含有框架的网页，在Dreamweaver CS5中可以从3个方面进行优化：设置框架网页标题、设置文件头标签中的关键字和说明、合理使用标记等。 10.5.2 10.5.2 优化框架网页优化框架网页浮动框架是一种特殊的框架形式，可以包含在许多元素当中。在菜单栏中选择【插入】/【标签】命令，打开【标签选择器】对话框，然后展开【HTML标签】分类，在右侧列表中找到“iframe”。10.6 10.6 创建浮动框架创建浮动框架单击【插入】按钮打开【标签编辑器-iframe】对话框，并进行参数设置。在文档窗口中选中插入的浮动框架，然后在菜单栏中选择【窗口】/【标签检查器】命令，打开【标签检查器】面板，对其中的相关参数进行修改即可。10.7 拓展训练根据操作要求创建框架网页，效果如图所示。(