Dreamweaver课件：第9章-框架和框架集

第9章建立框架网页内容提要框架网页的基本原理创建框架和框架集框架文件的结构和保存框架的属性和操作具体的框架实例学习目标了解框架及框架集熟悉框架及框架集的创建掌握框架及框架集的基本操作掌握框架及框架集的属性设置学会使用框架进行简单的页面布局使用链接控制框架内容9.1理解框架网页的基本原理9.1理解框架网页的基本原理所谓“框架”，就是将浏览器窗口划分为若干个区域。框架网页并不是一个真正意义上的网页，它主要记录在框架网页中所包含的框架数量以及拆分方式等信息，每一个单独的框架将由具有实际内容的网页填充。在上述框架网页内共有三个框架，因此需要三个相对应的网页，因此，框架网页加上三个独立的网页，共有四个网页。框架常用于站点导航系统。网页1和网页2中上方的标题和左侧导航按钮是相同的。标题和导航按钮分别对应在两个独立的网页中。右下方的内容也分别对应于独立的网页，利用框架的链接属性，当访问者可以单击菜单项要浏览其他内容时，导航菜单和标题则几乎不发生任何变化。由此可见，框架网页不但是页面布局的解决方案，也是避免重复劳动的一种方法。9.1理解框架网页的基本原理网页1网页29.2新建框架网页9.2新建框架网页在Dreamweaver中可以通过两种方式插入框架集。一种是自己直接拆分，另外一种是插入预先定义的框架集。Dreamweaver预先定义的框架集存放在“插入”工具栏“布局”选项中的“框架”按钮中，用户可以随意选择自己需要的框架集类型。9.2新建框架网页建立框架的目的就是将窗口分成大小不同的子窗口,在不同的窗口中显示不同的文档内容.9.2新建框架网页新建框架网页操作步骤：（1）建立站点及网页（2）插入预先定义的框架集（3）自己直接拆分框架集拆分上框架效果图9.2新建框架网页9.3增加、调整和删除框架9.3增加、调整和删除框架增加、调整和删除框架操作步骤：9.3增加、调整和删除框架（1）准备工作（2）增加框架（3）删除框架（4）调整框架•提示:用户还可以划分已有框架，在当前框架集文件中创建新的框架集。在其他框架集中的框架集被称为“嵌入式框架集”。要创建嵌入式框架集，需要先将光标停放在已有框架内。按住Alt键单击一下，然后在文档窗口中拖动框架边框（不要松开Alt键），将框架纵向或横向划分。效果图9.4保存框架和框架集中的文件9.4.1按对应关系保存框架集和框架集中的文件保存框架集和框架集中的文件操作步骤：9.4保存框架和框架集中的文件（1）保存框架和框架集（2）保存单个框架页面效果图一般在保存框架时,先保存框架集,再保存框架9.4.2打开和关闭框架中的文件打开和关闭框架中的文件与打开和关闭网页文件相类似。但要注意的是利用“文件”|“打开”命令，如果选取的是框架集文件，则可同时打开该框架集和其中的框架页面。如果选取的是单个框架页面，则只能打开该页面。9.4保存框架和框架集中的文件课堂案例1-运动休闲网案例学习目标:使用”新建”命令建立框架集.使用”页面属性”改变页面边距.使用”插入”面板”常用”选项卡中的按钮制作完整的框架网页.案例知识要点:使用上方固定框架制作的网页的结构图效果.使用属性面板改变框架的大小.使用”表格”和”图像”按钮插入表格和图像制作完整的框架网页效果.9.5使用框架面板9.5使用框架面板框架和框架集都是独立的HTML文档。要修改框架或框架集，必须先选取要修改的框架或框架集。选择的方法包括在文档窗口中直接选择或使用框架面板进行选择。要在文档窗口中直接选择框架，可以按住Alt键在框架内单击。要在文档窗口中直接选择框架集，可以在框架的边框上单击。在“框架”面板中，框架集有明显的三维边框，而且框架有灰色线条并显示框架名。9.5使用框架面板9.5使用框架面板9.5使用框架面板查看框架显示“框架”面板效果图9.6修改框架属性9.6修改框架属性设置框架的属性主要通过其属性面板进行。按住Alt键单击框架，可查看框架属性。9.6修改框架属性“框架名称”：决定用来作为超级链接目标和脚本引用的当前框架名。框架名可以是一个单词，也允许下划线，但是不允许用短横（-）、句点（.）和空格等，也不要使用中文。“源文件”：决定框架的源文档，可输入文件名或单击文件夹图标浏览并选择文件。还有一种方法可以在框架中打开文件：先将光标停放在框架中，然后选择“文件”|“在框架中打开”。“滚动”：决定在没有足够空间显示当前框架中的内容时是否使用滚动条。该下拉列表有四个选项，大多数浏览器默认值为“自动”。“不能调整大小”：使当前框架不能重调大小，防止用户拖动框架边框。“边框”：控制当前框架的边框。其选项为“是”、“否”和“默认”。本选择可以覆盖为框架集定义的边框设置。“边框颜色”：设置所有和当前框架相邻的边框的颜色。本设置可以覆盖框架集的边框颜色“边界宽度”：设置左右边距的宽度（单位为象素）。左右边距是指框架边框和内容之间的空间。“边界高度”：设置上下边距的高度（单位为象素）。上下边距是指框架边框和内容之间的空间。9.6修改框架属性•提示：在默认情况下，Dreamweaver将设置默认的框架边距宽度和高度值。这样可能会使网页内容和边框之间存在距离。因此，要消除该边距，可以将“边界宽度”和“边界高度”两个值均设置为0。这样，再到浏览器中预览时，框架和内容之间就没有距离了。9.6修改框架属性9.6修改框架属性修改框架属性操作步骤：9.6修改框架属性（1）建立站点并建立新页面（2）建立框架（3）载入框架页面（4）设置框架属性•提示：修改框架属性可以先通过“框架”面板选取相应框架，然后在“属性”面板中设置相关属性。9.7设置框架集的属性9.7设置框架集的属性要查看框架集属性，单击框架边框。要查看所有的框架集属性，可单击“属性”面板右下角的扩展箭头。“边框”：控制当前框架集内框架的边框。有三个选项：选择“是”可以三维和灰度显示边框选择“否”可以显示扁平和灰度边框选择“默认”可以由浏览器确定如何显示边框。“边框宽度”：指定当前框架集中边框的宽度。“边框颜色”：设置当前框架集中所有边框的颜色。本设置可以被单个框架指定的边框颜色所覆盖。“值”：指定所选择的行或列的大小。“单位”：指定所选择的行或列是以象素为单位的固定大小，还是显示为浏览器窗口的百分比，抑或扩展或缩小以填充窗口中的剩余空间。“行列选定范围”：识别选定行或列的选择。单击左边的标签可选择行，单击上面的标签可选择列。框架集“属性”面板课堂案例2-家具天地网案例学习目标:使用”修改”菜单设置页面边距.使用”属性”面板设置框架集的属性.案例知识要点:使用”页面属性”命令设置页面边距.使用属性面板设置框架的大小.9.8通过超级链接控制框架显示的内容课堂案例3-旅游信息服务案例学习目标:使用”属性”面板为图片添加链接,使网页更加完美.案例知识要点:使用”链接”选项设置链接效果.使用”目标”选项设置框架.9.8框架中的链接给每一个框架定义不同标题创建框架中的链接利用”链接”和”目标”选项创建._top_parent定义NOFRAMES内容操作步骤：9.8通过超级链接控制框架显示的内容效果图①单击“修改”|“框架集”|“编辑无框架内容”。②Dreamweaver将清除文档窗口，正文区域上方出现“无框架内容”标志，而状态栏上也将显示noframes标签。•提示：在文档窗口中创建无框架内容。由于低版本浏览器能正常显示的元素不多，所以创建无框架内容时建议只使用文本、基本表格和图像。编辑无框架内容noframes标签9.8通过超级链接控制框架显示的内容实例（8）：定义NOFRAMES内容③在文档窗口中输入中文字符“对不起,您使用的浏览器不支持框架，所以无法正确显示。④再次选择“修改”|“框架页”|“编辑无框架内容”返回框架组文档的普通视图。•提示：使用上述方法可以方便的定义NOFRAMES内容，给低版本的浏览器用户提供提示。编辑无框架内容9.9浮动框架-实现单元格到框架的转换iframe/iframe属性alignHeightWidthNameScrollSrcFrameborder背景透明:allowtransparency=“true”