第9章 制作框架网页.ppt

《第9章 制作框架网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第九章制作框架网页2010.4.12在一个网页中，有时候并不是所有内容都需要改变，如网页导航栏、网页标题部分都是不需要改变的。如果在每个网页中都重要插入这些元素，就会浪费时间，在这种情况下使用框架就会解决以上问题。框架将浏览器窗口划分成几个部分，将一些不需要更新的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。框架是一种先进的网页技术，它比模板灵活，可以方便创建使用相同布局的多个页面。9.1框架网页概述使用框架可以将浏览器显示窗口分割成多个子窗口，每个窗口都是一个

2、独立的网页文档。框架集是指定义网页结构与属性的HTML页面，包含了显示在页面中框架的数目、尺寸、框架页面的来源以及其他一些相关信息。当一个页面被划分成若干个框架时，Dreamweaver就建立起一个未命名的框架集文件，同时为每个框架建立一个文档文件。也就是说一个包含有3个框架的网页实际上是由4个文件组成，即一个框架集文件和3个包含在框架中显示内容的文件。使用框架集设计网页时，为了使网页能在浏览器中正常工作，必须对四个页面都进行保存。使用框架具有以下优点：访问者的浏览器器不需要为每个页面重新加载与导航相关

3、的图形。每个框架都具有自己的滚动条，因此访问者可以独立滚动这些滚动条。9.2创建框架网页创建框架集的两种方法：预设方式自定义9.2.1使用预设方式创建框架网页操作步骤：选择“文件》新建”命令，弹出“新建文档”对话框，在“常规”选项卡中选择“框架集”选项，在右边的“框架集”列表中选择“上方固定，左侧嵌套”选项。单击确定按钮，新建一个框架网页。9.2.2自定义创建框架网页操作步骤：选择“修改》框架集”命令，在子菜单中选择拆分框架集命令，选项有“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分下框架”。9

4、.2.3保存框架网页每个框架包含一个文档，因此一个框架集会包含多个文件，在保存网页的时候，不能只保存一个文档，要将整个网页文档都保存下来。保存框架网页的具体操作步骤如下：选择“文件》保存全部”命令，整个框架边框会出现一个阴影框，同时弹出“另存为”对话框。因为阴影出现在整个框架集内侧，所以询问框架集的名称。将整个框架命名为index.htm，单击“保存”按钮。接下来出现第2个“另存为”对话框，因为右边框架内侧出现阴影，询问右边框架的文件名，将文件命名为right.htm，单击保存按钮。接下来出现第3个“另

5、存为”对话框，因为左边框架内侧出现阴影，询问左边框架的文件名，将文件命名为left.htm，单击保存按钮。接下来出现第4个“另存为”对话框，因为头部框架内侧出现阴影，询问头边框架的文件名，将文件命名为top.htm，单击保存按钮。9.3框架网页的选择要想修改框架的属性就要先选择框架，选择框架主要包括选择一个框架和选择框架集9.3.1选择一个框架选择“窗口》框架”命令，打开“框架”面板，在“框架”面板中单击要选择的框架，所选择的框架边框内侧会出现虚线。提示：按ALT键，在要选择的框架内单击鼠标左键也可将其

6、选择。9.3.2选择框架集在页面中，当鼠标指针靠近框架集的边框且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集。提示：在“框架”面板中单击框架集的边框，也可以选择整个框架集。此时，框架集的边框变成虚线。9.4设置框架和框架集的属性框架是框架集的组成部分，用来设置框架属性。框架集属性用来设置其各框架之间边框的颜色和宽度。9.4.1框架属性选中一个框架，打开其属性面板。框架属性面板中各选项说明如下：框架名称：用来作为链接指向的目标。源文件：确定框架的源文档。滚动下拉列表：确定当框架内的内容显示不下

7、的时候是否显示滚动条。不能调整大小：限定框架尺寸，防止用户拖动框架边框。边框：用来控制当前框架边框。边框颜色：设置与当前框架相信的所有框架的边框颜色。边框宽度：设置框架边框与内容之间的左右边距边框高度：设置框架边框与内容之间的上下边距9.4.2框架集的属性选中框架集，打开其属性面板边框：设置是否有边框边框宽度：设置整个框架集的边框宽度边框颜色：设置整个框架集的边框颜色行或列：属性面板中显示的是行或列，是由框架集的结果而定。9.5编辑框架知道了怎样建立、选择框架和框架的一些基本属性，就可以对框架进行设置背

8、景、拆分和改变大小等工作了。9.5.1拆分框架通过拆分框架，可以增加框架集的框架数量，在文档中插入框架实际上是建立嵌套框架。两种方法拆分右侧框架：将光标置于右侧框架中，单击“布局》框架”下拉列表中的“底部框架”。按ALT键选择右侧框架，然后向上拖动右侧框架的下边框。9.5.2为框架设置链接要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标。首先选中文字，在属性面板“链接”文本框中添加链接在属性面板中从“目标”下拉列表中选择mai