第十二项目单元 框架应用设计 项目12 框架应用设计•教学重点：掌握框架的设计方法，框架创建、框架属性设置、在框架中实现超级链接 •教学难点：在框架中如何实现超级链接•教学目标：•专业能力：掌握框架的设计方法，框架创建、框架属性设置、在框架中实现超级链接 •社会能力：独立思考、紧跟课堂教学培养服从意识•方法能力：通过分析网页布局培养自学分析能力•教学内容： 任务1 设计一个框架页案例导入： 案例分析：1、在dw8中打开页面2、框架应用效果 主要步骤：1、设计框架集中其他各页2、在框架中设置超级链接3、保存框架文件相关知识点： 单个框架是指在网页上定义的一个区域，框架的作用就是把浏览器的窗口划分为若干个区域，每个区域可以分别显示不同的网页框架由两个主要部分—框架集和单个框架组成框架集就是框架的集合框架集的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等• 框架和框架集的概念 图1显示了框架和框架集之间的关系图中，一个框架集中包含了三个框架图1 框架和框架集的关系 如果某个页面被划分为两个框架集，那么它实际上包含的是三个独立的文件：• 一个框架集文件和两个框架内容文件。
• 框架内容文件就是显示在页面框架中的内容• 框架通常被用来定义页面的导航区和内容区域 • 创建框架 在一个空白文档的基础上构建框架，有如下两种方法 1. 第一种方法： 新建一个页面，选择菜单“查看”→“可视化助理”→“框架边框”命令，如图2所示，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框，如图3所示，说明新建的页面中已经附带了框架图2 创建框架集图3 出现边框 •用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个框架•例如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分• 另外，也可以拖拽窗口的四个角，这样可以直接把窗口分为四个区域如图4所示• 当窗口分割为几个框架之后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面导入到该框架中 原始表格水平分割文档水平垂直分割文档图4 用拖曳的方法创建框架集垂直分割文档 •框架允许嵌套，比如要创建图5所示的框架，可以先通过上述的方法水平一分为二，但是接着不能直接拖拽边框，否则会得到图4中水平垂直分割文档所示的框架图5 创建嵌套框架 • 如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。
如图6所示图6 删除框架 2. 第二种方法： 单击需要分割框架的窗口，将光标放置到窗口中如果已经存在框架，则需要单击某个框架窗格，将光标放入该窗口内 打开“修改”菜单，选择“框架页”，打开相应的子菜单如图7所示选择相应的分割框架命令，拆分如图8所示的框架图7 拆分框架图8 原始框架 •拆分左框架：将文档窗口拆分为左右两个框架当前文档窗口中的内容被放置在左边框架内，如图9所示图9 拆分左框架 •拆分右框架：将文档窗口拆分为左右两个框架当前文档窗口中的内容被放置在右边框架内，如图10所示图10 拆分右框架 •拆分上框架：将文档窗口拆分为上下两个框架，当前文档窗口中的内容被放置在上面框架内，如图11所示图11 拆分上框架 •拆分下框架：将文档窗口拆分为上下两个框架当前文档窗口中的内容被放置在下面框架内 ，如图12所示•重复上述操作，继续拆分窗口，即可创建嵌套框架图12 拆分下框架 • 创建预定义框架集 Dreamweaver预定义了多种框架集形式使用预定义框架集，可以快速简便地创建框架 选择菜单“窗口”→“插入”，在插入面板上选择“框架”标签，切换到框架插入面板。
预定义框架集图标的蓝色区域代表当前的框架，如图13所示 插入面板中提供了13种框架模板，主要分为垂直框架、水平框架和嵌套的框架集三种图13 框架插入面板 1. 垂直框架 垂直框架网页模板提供了一种左右分栏的页面模式•目录：页面左方创建一个目录框架，右面为主要框架目录框架中的超链接目标指向主要框架，在目录框架中打开超链接会改变主要框架中的显示内容如图14所示•垂直拆分：创建独立的左部和右部两个框架，相当于两个独立的页面图14 垂直框架 2. 水平框架•水平框架网页是按照上下来布局的，依次为：标题、页脚、上下的层次结构•标题：第一个模板是“标题”框架模板页面的上方创建了一个导航标题框架，下面创建了一个主框架标题框架中的超链接的目标框架是主框架，打开标题框架中的超链接会改变主框架中的内容如图15所示图15 水平框架（标题） • 页脚：第二个模板是“页脚”框架页面模板页面的上方创建了一个主要框架，下面创建了一个页脚框架页脚框架中的链接的目标框架是主框架，打开页脚框架中的超链接会改变主框架中的内容如图16所示 图16 水平框架（页脚）•上下的层次结构：创建三个自顶向下的信息层次结构。
顶部和底部的框架是常规的超链接，链接的目标框架是中间的框架，打开顶部和底部框架中的超链接会改变主框架中的内容如图16所示 • 创建NOFRAMES图17 编辑非框架内容1、 如果浏览器不支持框架，则不显示框架集和框架文档内2、 选择菜单“修改”→“框架页”→“编辑无框架内容”命令，则文档窗口即变成一个普通的文档窗口，可以在其中编辑无框架信息，如图17所示3、 再次选择菜单“修改”→“框架页”→“编辑无框架内容”命令，则返回到原先的框架集文档窗口中 • 在Dreamweaver中，可以单独保存某个框架文档、框架集文档，也可以将整个框架集（包括框架集文档本身以及其中的各个框架文档）保存当在文档窗口中构建框架时，Dreamweaver会为新生成的框架文档以及框架集文档临时命名，例如，UntitledFrameset_1、UntitledFrameset_2等图18 保存为对话框• 存储框架和框架集文件1.存储框架集文档 单击框架边框，选中框架集文档选择菜单“文件”→“存储框架集”命令，即可保存框架集文件若想将框架集文档以另外的名称保存，选择菜单“文件”→“另存储框架为”命令。
出现“保存为”对话框，如图18所示 2.存储框架文档 单击要保存的框架窗格，将光标放置到该窗格中，即选中要保存的框架文档选择菜单“文件”→“存储框架”命令，即可保存框架文档若想将框架文档以另外的名称保存，选择菜单“文件”→“另存框架为”命令3.存储框架集中所有的文档 当框架集中包含多个框架，不便于逐个保存时，可以一次性保存框架集中所有 的文档选择菜单“文件”→“全部保存”命令，即可保存所有的框架文档 1.设置框架的属性框架的属性包括框架的名称、框架源文件、框架的空白边框、框架的滚动特性、框架的重设大小特性以及框架的边框特性等，利用框架的属性面板可以完成这些属性的设置 首先选中框架按住〈Alt〉键，然后单击文档窗口中要选中框架的窗格中的任意位置，即可选中该框架属性面板则如图19所示图19 选中框架时的属性面板• 设置框架和框架集的属性 • 框架名称：输入框架的名称框架的名称必须是一个单词，其中可以出现短下划线符号“_”，但是不能出现连字号“-”，句点“.”以及空格框架的名称可以以字母开头，但是不能用数字开头并且不能使用JavaScript保留关键字，例如top或navigator之类。
图20 文件操作对话框• 源文件：设置该框架源文件的URL单击右方的文件夹窗口，然后从磁盘上选择框架文件，或是利用指向文件的图标来提取URL地址• 另一种指定框架源的方式：首先，在文档窗口中单击框架窗格，将光标放入该窗格中，然后选择菜单“文件”→“在框架中打开”命令，这时会弹出文件操作对话框，提示用户从磁盘上选择要放入该框架中的文件如图20所示 滚动条：在该下拉列表中，设置该框架中出现滚动条的方式1）自动：当框架文档内容超出了框架大小时，出现滚动条可以通过拖动滚动条，显示框架内容2）是：无论框架文档中的内容是否超出框架的大小，都会显示框架滚动条3）否：即使框架文档中的内容超出框架的大小，也不会显示框架滚动条4）默认：大多数浏览器当作自动方式 不可重设大小：选中该复选框，则设置无法通过拖动框架的边框（即框架和其它框架之间的分隔条）来改变框架的大小清除该复选框，则可以通过拖动该框架同其他框架之间的分隔条来改变其大小• 边框颜色：在该颜色井中，设置框架边框的颜色• 边距宽度：设置当前框架左右边框同框架内容的间距• 边距高度：设置当前框架上下边框同框架内容的间距。
边框：选择该下拉列表中不同的选项，可以控制是否显示当前框架的边框1）是：选择该选项，则该框架与四周的框架相处显示分隔条2）否：选择该选项，则该框架与四周的框架相邻处不显示分隔条3）默认：选择该选项，大多数浏览器将之默认为（是）方式 只有将与当前框架相邻的所有框架都设置为不显示时，框架间的边框才会真正不显示 2．设置框架集的属性 框架集的属性决定了框架集的整体属性，例如框架的尺寸、框架的颜色、框架之间边框的宽度等 选中框架集，属性面板如图21所示：图21 选中框架集时的属性面板 •边框：在该下拉列表中，可以设置框架集中所有的框架的边框是否被显示其中各选项与框架属性中的边框属性相同 注意，对框架的属性设置会覆盖对框架集的属性设置例如，将某个框架设置为无边框，而其中某个框架设置为有边框，则实际将显示该框架的边框• 边框颜色：在该颜色井中，设置框架集边框的颜色• 同样对框架的属性设置将覆盖对框架集的属性设置例如，将某个框架集边框设置为红色，但是又将其中某个框架的边框颜色设置为蓝色，则实际显示中该框架集除该框架之外的所有框架边框都为红色，而该框架边框显示为蓝色。
• 边框宽度：设置框架集中所有框架的边框宽度在该文本框中输入框架边框宽度值，单位为像素输入0则不显示边框• 值和单位：在框架集的属性面板中的值和单位区域，可以设置框架集中不同框架的宽度和高度 • 行列：要设置框架的大小，在行列选择区中单击行/列选择标签选择行/列然后，在值域中输入一个数字，设置选定行或列的大小，并在单位下拉菜单上选择量度单位量度单位有三个选项：• 像素：以像素为单位设置行高或列宽以该方式设置的框架大小是固定的，不随浏览器窗口大小改变而改变对于一些要保持一样大小的框架（如导航栏），经常选择该选项• 百分数：选择该项，表示当前框架同当前框架集的大小成百分比这种方式设置的框架大小将随浏览器窗口大小变化而改变• 相对：表示在值文本框中输入的数值是当前框架同其他框架之间的大小比例• 注意，在设置框架大小时，三种单位的优先级从高到低分别为：像素、百分比、相对例如，如将某个框架大小设置为以百分比为单位，然后又用像素为单位设置了其他框架的大小，则Dreamweaver会以像素为单位设置框架的大小 在显示框架集文档的窗口中，可以分别为每个框架文档设置标题，也可以为框架集文档本身设置标题。
首先将光标放置在要设置标题的框架窗口中，或选中该框架图22 页面设置对话框若要设置框架集标题，则需要选中整个框架集选择菜单“修改”→“页面属性”命令，弹出页面属性设置对话框如图22所示在标题文本框中，设置相应的标题名称也可以直接在工具栏上的“标题”文本框中设置框架和框架集的标题3．设置框架和框架集的标题 • 设置框架文档的标题主要是为了便于管理，但在浏览框架集文档时，浏览器标题栏上只显示框架集文档的标题，而不显示每个框架文档的标题如果用浏览器直接打开某个框架文档，则浏览器标题栏上会显示该框架文档的标题 小结：本项目主要介绍了框架属性设置、框架应用、框架超级链接设置 ，通过学习让学生掌握应用框架设计网站结构实验：完成实验17 。