网页设计10.ppt

《网页设计10.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第10章框架本章主要介绍框架和框架集的概念、框架页面的创建、框架的嵌套、框架集及框架页面的属性设置等内容，最后还涉及到框架的具体应用。10.1框架和框架集的概念单个框架是指在网页上定义的一个区域，框架的作用就是把浏览器的窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由两个主要部分—框架集和单个框架组成。框架集就是框架的集合。框架集的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。一般情况下，框架集文档中的内容不会显示在浏览器中，所以可以将框架集仅仅看成是一个可以容纳和组织

2、多个文档的容器。图10-1显示了框架和框架集之间的关系。图中，一个框架集中包含了三个框架。图10-1框架和框架集的关系如果某个页面被划分为两个框架集，那么它实际上包含的是三个独立的文件，一个架集文件和两个框架内容文件。框架内容文件就是显示在页面框架中的内容。框架通常被用来定义页面的导航区和内容区域。10.2创建框架10.2.1创建框架集在一个空白文档的基础上构建框架，有如下两种方法。1.第一种方法：新建一个页面，选择菜单“查看”→“可视化助理”→“框架边框”命令，如图10-2所示，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框，如图10-3所示，说明新建的页面中已经附带了框架。图

3、10-2创建框架集图10-3出现边框用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个框架。例如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分。另外，也可以拖拽窗口的四个角，这样可以直接把窗口分为四个区域。如图10-4所示。当窗口分割为几个框架之后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面导入到该框架中。原始表格水平分割文档水平垂直分割文档图10-4用拖曳的方法创建框架集垂直分割文档框架允许嵌套，比如要创建图10-5所示的框架，可以先通过上述的方法水平一分为二，但是接着不能直接拖拽边框，否则会得到图10-

4、4中水平垂直分割文档所示的框架。正确的方法是先在右下角的框架面板中点击右部的框架，然后再按下键拖拽边框。若右边框架面板关闭，则选择彩单“窗口”→“其它”→“框架”，即可显示框架面板。图10-5创建嵌套框架如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。如图10-6所示。图10-6删除框架2.第二种方法：单击需要分割框架的窗口，将光标放置到窗口中。如果已经存在框架，则需要单击某个框架窗格，将光标放入该窗口内。打开“修改”菜单，选择“框架页”，打开相应的子菜单。如图10-7所示。选择相应的分割框架命令，拆分如图10-8所示的框架。图10-7拆分框

5、架图10-8原始框架拆分左框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在左边框架内，如图10-9所示。图10-9拆分左框架拆分右框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在右边框架内，如图10-10所示。图10-10拆分右框架拆分上框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在上面框架内，如图10-11所示。图10-11拆分上框架拆分下框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在下面框架内，如图10-12所示。重复上述操作，继续拆分窗口，即可创建嵌套框架。图10-12拆分下框架10.2.2创建预定义框架集Dre

6、amweaver预定义了多种框架集形式。使用预定义框架集，可以快速简便地创建框架。选择菜单“窗口”→“插入”，在插入面板上选择“框架”标签，切换到框架插入面板。预定义框架集图标的蓝色区域代表当前的框架，如图10-13所示。插入面板中提供了13种框架模板，主要分为垂直框架、水平框架和嵌套的框架集三种。图10-13框架插入面板1.垂直框架垂直框架网页模板提供了一种左右分栏的页面模式，DreamweaverMX提供了两种垂直双框架网页模板“目录”模板和“垂直拆分”模式两种模式。目录：页面左方创建一个目录框架，右面为主要框架。目录框架中的超链接目标指向主要框架，在目录框架中打开超链接会改变主要

7、框架中的显示内容。如图10-14所示。垂直拆分：创建独立的左部和右部两个框架，相当于两个独立的页面。图10-14垂直框架2.水平框架水平框架网页是按照上下来布局的，DreamweaverMX提供了三种、、水平框架网页。依次为：标题、页脚、上下的层次结构。标题：第一个模板是“标题”框架模板。页面的上方创建了一个导航标题框架，下面创建了一个主框架。标题框架中的超链接的目标框架是主框架，打开标题框架中的超链接会改变主框架中的内容。如图10-15所示。