第十二项目单元框架应用设计3讲义教材.pptVIP

第十二项目单元 框架应用设计;项目12 框架应用设计;任务1 设计一个框架页;单个框架是指在网页上定义的一个区域，框架的作用就是把浏览器的窗口划分为若干个区域，每个区域可以分别显示不同的网页。 框架由两个主要部分—框架集和单个框架组成。框架集就是框架的集合。 框架集的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。 框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。;图1显示了框架和框架集之间的关系。图中，一个框架集中包含了三个框架。; 如果某个页面被划分为两个框架集，那么它实际上包含的是三个独立的文件： 一个框架集文件和两个框架内容文件。 框架内容文件就是显示在页面框架中的内容。 框架通常被用来定义页面的导航区和内容区域。; 创建框架 在一个空白文档的基础上构建框架，有如下两种方法。 1. 第一种方法： 新建一个页面，选择菜单“查看”→“可视化助理”→“框架边框”命令，如图2所示，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框，如图3所示，说明新建的页面中已经附带了框架。;用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个框架。 例如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分。;原始表格;框架允许嵌套，比如要创建图5所示的框架，可以先通过上述的方法水平一分为二，但是接着不能直接拖拽边框，否则会得到图4中水平垂直分割文档所示的框架。; 如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。如图6所示。;2. 第二种方法： 单击需要分割框架的窗口，将光标放置到窗口中。如果已经存在框架，则需要单击某个框架窗格，将光标放入该窗口内。 打开“修改”菜单，选择“框架页”，打开相应的子菜单。如图7所示。选择相应的分割框架命令，拆分如图8所示的框架。;拆分左框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在左边框架内，如图9所示。;??分右框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在右边框架内，如图10所示。;拆分上框架：将文档窗口拆分为上下两个框架，当前文档窗口中的内容被放置在上面框架内，如图11所示。;拆分下框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在下面框架内 ，如图12所示。 重复上述操作，继续拆分窗口，即可创建嵌套框架。; 创建预定义框架集 Dreamweaver预定义了多种框架集形式。使用预定义框架集，可以快速简便地创建框架。 选择菜单“窗口”→“插入”，在插入面板上选择“框架”标签，切换到框架插入面板。预定义框架集图标的蓝色区域代表当前的框架，如图13所示。 插入面板中提供了13种框架模板，主要分为垂直框架、水平框架和嵌套的框架集三种。;1. 垂直框架 垂直框架网页模板提供了一种左右分栏的页面模式 目录：页面左方创建一个目录框架，右面为主要框架。目录框架中的超链接目标指向主要框架，在目录框架中打开超链接会改变主要框架中的显示内容。如图14所示。 垂直拆分：创建独立的左部和右部两个框架，相当于两个独立的页面。;2. 水平框架 水平框架网页是按照上下来布局的，依次为：标题、页脚、上下的层次结构。 标题：第一个模板是“标题”框架模板。页面的上方创建了一个导航标题框架，下面创建了一个主框架。标题框架中的超链接的目标框架是主框架，打开标题框架中的超链接会改变主框架中的内容。如图15所示。; 页脚：第二个模板是“页脚”框架页面模板。页面的上方创建了一个主要框架，下面创建了一个页脚框架。页脚框架中的链接的目标框架是主框架，打开页脚框架中的超链接会改变主框架中的内容。如图16所示。 ; 创建NOFRAMES; 在Dreamweaver中，可以单独保存某个框架文档、框架集文档，也可以将整个框架集（包括框架集文档本身以及其中的各个框架文档）保存。当在文档窗口中构建框架时，Dreamweaver会为新生成的框架文档以及框架集文档临时命名，例如，UntitledFrameset_1、UntitledFrameset_2等。 ; 2.存储框架文档 单击要保存的框架窗格，将光标放置到该窗格中，即选中要保存的框架文档。选择菜单“文件”→“存储框架”命令，即可保存框架文档。若想将框架文档以另外的名称保存，选择菜单“文件”→“另存框架为”命令。;1.设置框架的属性 框架的属性包括框架的名称、框架源文件、框架的空白边框、框架的滚动特性、框架的重设大小特性以及框架的边框特性等，利用框架的属性面板可以完成这些属性的设置