第12章框架.ppt

第12章 框架,被经常用于页面设计的方式，就是网页中的框架。它把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。同时，可以方便地实现导航作用，使结构清晰，并解决各个框架的干扰问题，使得网站的风格变得一致。,在实际的网页制作过程中，往往会将一个网站中页面相同的部分单独制作成一个页面，使得其成为框架的一个子框架，交为整个网站所公用。本章将针对网页中框架的相关内容，以及其具体的制作与应用，进行详细的讲述。主要包括以下几点： 框架的相关概念 框架的类别 框架的特点 框架的应用 框架的编辑,12.1 认识框架网页,所谓网页框架，是指用来分隔网页的窗格。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。接下来的内容，将带领大家认识框架网页。,12.1.1 框架网页特点,网页的精彩与否的不可忽略的因素，离不开网页的布局。使用框架组织页面的好处在于可以在一个窗口浏览到几个不同的页面，避免了来回翻页的麻烦。框架技术经常被用于实现页面文档的导航。下面具体介绍有关框架网页的特点。 1使用框架网页优点 在网页中使用框架，具有如下优点：（1）可方便访问者的浏览，它使得浏览器不需要为每个页面重新加载与导航相关的内容。（2）在因为内容太大，窗口中的范围无法完整显示是，每个框架具有独立的滚动条，便于访问者浏览与操作。,2使用框架网页缺点 在网页中使用框架，具有如下缺点：（1）可能难以实现不同框架中各元素的精确图形对齐。（2）对导航进行测试，需要花较长时间。（3）在没有提供服务器代码，可让访问者用来加载特定页面的带框架版本时，访问者将难以将特定页面设为书签，因为带有框架的页面的URL不会被显示在浏览器中。,3关于框架网页 在了解了有关框架网页的优、缺点之后，接着为大家介绍有关于其具体的架构。在设计框架时，往往会有将上方固定、下方固定、垂直拆分、左侧固定、右侧固定和水平拆分等相应的编排架构的类型与模板，具体如图1所示。 在Dreamweaver CS5中，系统一共提供了如图2所示的默认的框架模板。在实际的网页制作过程中，通过应用它们，来快速达到制作网页的目的。 图1 图2,12.1.2 框架网页种类,根据框架分布的不同，以及各框架作用的不同，可以将框架网页划分成多种不同类型。常用到的框架结构有：左侧框架、右侧框架、顶部框架、底部框架、上方和下方框架以及各种嵌套框架结构。具体内容如下： 1网页布局类型 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型和变化型。,2网页布局类型的选择应用 在了解网页布局的相关类型之后，实际的制作过程中，可以参照具体的需要进行相应类型的选择与应用。那么我们在应用时如何进行类型的选择呢？主要可以从下述内容进行考虑。 例如，如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。最后，还没有提到的就是变化型了，因为，只有不断的变化才会提高，才会不断丰富我们的网页！,12.1.3 框架网页的组成,框架网页不但是页面布局的解决方案，也是避免重复劳动的一种方法。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。在框架网页中，每个框架包括高度、宽度、滚动条和边框，以及指定框架与网页正文之间的距离的框架的内边距。 1框架结构 一个框架结构有两部分网页文件构成，分别是框架和框架集。,2框架应用 在了解了框架以及框架集的相关内容之后，接下来具体针对框架以及框架集的相关内容，着重将其在网页中的制作过程中的应用进行介绍。如图所示，是有不同类型的框架构成的网页，主要包括top框架、left框架、main框架、bottom框架。通过不同的框架，构成了框架集，同时也组成一个漂亮、完整，视觉良好的网页。,12.2 创建框架网页,建立框架的目的，在于将窗口分成大小不同的子窗口，在不同的窗口中，显示不同的文档内容。框架结构的网页经常被用于聊天室、论坛等。除了表格，框架也是一种实现网页布局的方式。运用框架可以实现导航性非常好的页面结构。这里具体向大家讲述有关框架网页的创建的相关内容。,12.2.1 框架网页的创建,框架网页可根据不同的框架类型，来进行分别创建。这里具体针对左侧框架、右侧框架、顶部框架、底部框架、下方和嵌套的左侧框架、下方和嵌套的右铡框架、左侧和嵌套的下方框架、右铡和嵌套的下方框架、上方和下方框架、左侧和嵌套的顶部框架、右侧和嵌套的上方框架、顶部和嵌套的左侧框架、上方和嵌套的右侧框架这些框架结构，进行其在网页制作过程中的实例应用的介绍。,12.2.2 框架网页的保存,框架网页制作完成后，需要将使用的框架，以及制作完成的网页进行保存。应用框架的网页，进行保存时，需要将整个框架集网页和其中的每个框架网页分别进行保存操作。系统会用虚线框提示正在保存的部分。具体操作是：,在Dreamweaver打开，并编辑制作了框架网页。单击“文件”|“保存全部”命令。在弹出的“另存为”对话框中，分别在“保存在”下拉列表框中选择路径，在“文件名”下拉列表框中输入文件名称，最后单击“保存”按钮，实现框架网页的保存操作，如图所示。,12.3 编辑框架网页,在掌握了框架网页的应用后，接下来需要对应用了框架的网页进行编辑以及相应的操作设置。关于框架网页的编辑，需要从网页是否空白页，以及框架的嵌入式，这二方面来着手进行对待。它们的具体操作，下面就针对此内容进行详细讲解。编辑框架网页与编辑普通的网页相同，也可以在框架网页中添加和格式化文本、设置网页的背景颜色和背景图片、在网页中插入图片和添加组件，还可以调整框架的大小等。 1在框架网页中添加和格式化文本 在框架网页中添加和格式化文本与在普通的网页中添加和格式化文本相同。,2拆分框架 在框架网页中不但可以调整框架的大小，还可以设置网页中显示的框架的多少。在框架网页中可以任意地拆分框架。 （1）拖动边框拆分框架 （2）将框架平均分成两行或两列 3删除框架 （1）将光标放在要删除的框架中； （2）选择“框架”|“删除框架”命令。,12.4 设置框架属性,框架属性确定框架集内各个框架的名称、源文件、边距、滚动、边框和能否调整大小。框架集属性控制框架的大小和框架之间边框的颜色和宽度。每个框架和框架集都有自己的属性检查器，使用属性检查器可以设置框架和框架集的属性。接下来，介绍的内容就是有关框架属性的。 1设置框架的大小 通常调整框架的大小的方法有两种，即通过拖动框架的边框或指定想要的确切设置来调整框架的大小。 （1）拖动框架的边框调整框架大小 （2）精确设置框架大小,2为框架网页设置背景颜色和背景图片 （1）设置框架网页的背景颜色 将光标放在要设置背景颜色的框架中； 单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，弹出“网页属性”对话框； 单击“背景”标签，打开“背景”选项卡； 单击“背景”右侧的按钮，从弹出的颜色面板中选择背景颜色； 单击“确定”按钮。 （2）设置框架网页的背景图片 设置框架网页的背景图片与设置框架网页的背景颜色类似。,3设置框架网页属性 设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和间距以及设置框架中滚动条的显示和隐藏。 （1）显示和隐藏框架边框 （2）显示和隐藏框架滚动条 4边框效果 （1）框架边框的设置 （2）框架滚动条的设置 （3）设置边框的不可移动属性 （4）设置框架空白 5指定超链接的目标框架 控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性，格式为： 超链接内容,12.5 本章小结,本章详细讲述了有关框架的相关内容，主要从框架的特点、类型和组成出发，来帮助大家认识框架网页。然后就是本章的重点内容，关于框架网页的创建的相关的内容介绍。有关于框架网页的编辑，以及框架属性的设置，这方面的内容是此章节的难点所在，大家需要进行了解并掌握。对于框架网页，它在超链接时的功能，以及相关内容，也是需要清楚明白的。,