Dreamweaver网页设计之：框架5142

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第 7 章 框架,在设计网页页面布局的时候，一般我们可以通过表格来进行排版，但还有一类网页可以使用框架来设计。利用框架设计的页面，可以将不同的信息内容分类显示在不同的区域内，那样可以简化操作，使页面布局合理，访问者浏览查看也更方便。,学习目标,理解框架和框架集的概念；,掌握使用框架设计网页的方法。,本章内容,认 识 框 架 网 页,创 建 框 架 集,为 框 架 添 加 内 容,保 存 框 架 和 框 架 集,框 架 和 框 架 集 的 选 择,编 辑 框 架 或 框 架 集,设 置 框 架 和 框 架 集 属 性,利 用 HTML 创 建 网 页 框 架,认 识 框 架 网 页,框架是在同一个浏览窗口中显示多个网页的技术，框架网页是一种特殊的网页。框架将窗口划分为不同的部分，各部分中都有各自的网页，总体构架出一个框架集。此外，通过为超链接指定目标框架，可以在框架之间建立起以内容为媒介的联系，因而实现页面导航的功能。,认 识 框 架 网 页,框架（Frames）技术由框架集（Frameset）和框架（Frame）两部分组成。,框架不是文件，它是浏览器窗口中的一个区域，是存放文档的容器，可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。,框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。,返回,创建框架集,1、插入预置框架样式,单击【插入】工具栏【布局】类别中的【框架】按钮，在弹出的下拉菜单中选择所需的框架类型，即可在页面上插入相应的框架，并弹出【框架标签辅助功能属性】对话框，可为框架指定框架名称。,框架下拉菜单,创建框架集,2、直接新建预定义框架文件,执行“文件/新建”命令，再弹出的“新建文档”对话框“类别”列表框中选择“框架集”选项，在右侧选择预定义的框架集类型。,新建文档对话框,创建框架集,3、自定义框架样式,先选择【查看】|【可视化助理】|【框架边框】命令，在页面中显示出框架的边框，然后将光标放置在框架的的边框线上，当指针变为双指的箭头时，按住鼠标左键拖动边框到欲建框架的位置。,创建框架集,4、创建嵌套框架,先在页面中创建一个框架，将插入点置于要创建嵌套的框架区域，再次执行创建框架的操作。,返回,为框架添加内容,当窗口被分割为几个框架以后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面赋给一个框架。也可在框架中打开已有的HTML文档，具体操作步骤如下。,（1）在文档窗口中，将光标放置在某一框架内。,（2）选择“文件 在框架中打开”命令，打开一个已有文档。,返回,保存框架和框架集,框架集文件和与之相关的框架文件必须先保存，才能在浏览器中预览整个框架网页内容。可以分别保存框架集页面或框架页面，也可以同时保存所有打开的框架文件和框架集页面。,保存框架集文件,选择框架集，然后选择【文件】|【保存框架页】命令。,保存框架中显示的文档,在框架中单击，然后选择【文件】|【保存框架】命令。,保存所有文件,选择【文件】|【保存全部】命令。,返回,框架和框架集的选择,在对框架或框架集进行操作之前，必须先选择框架或框架集。,选择框架,按住Alt键同时鼠标左键单击欲选择的,框架,；,“窗口框架”，启用框架控制面板，在面板中用鼠标左键单击欲选择的,框架,。,选择框架集,在框架面板中鼠标左键单击框架集的,边框,在文档窗口中鼠标左键单击框架的,边框,。,返回,1、编辑框架,对框架页面的编辑与对普通页面的编辑相同，包括输入文本、插入图像、添加表格和表单的方法都是相同的。此外，还有一种比较简便的编辑框架的方法，即先创建好整个框架集中各部分框架页面，然后将其在框架集中对应的窗口打开。,编辑框架或框架集,2、调整框架的大小,通常调整框架的大小的方法有两种，即通过拖动框架的边框或指定想要的确切设置来调整框架的大小。,（1）拖动框架的边框调整框架大小,将光标放在要调整的框架边框上，当光标变为“,”形状时，按住鼠标左键，并拖动。,（2）通过属性面板可精确调整框架大小。,编辑框架或框架集,3、拆分框架,在框架网页中不但可以调整框架的大小，还可以设置网页中显示的框架的多少。在框架网页中可以任意地拆分框架。,先将光标置于要拆分的框架窗口中，然后选择“修改 框架集”命令，弹出其子菜单，其中有4种拆分方式。,先将光标置于要拆分的框架窗口中，然后单击“插入”面板“布局”选项卡中“框架”按钮右侧的黑色箭头，在弹出的菜单中选择一种拆分框架的方式，将框架窗口再划分。,选定要拆分的框架集，按住键的同时，将鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠标拆分框架。,编辑框架或框架集,4、删除框架,当加入了一条边线后，发现加错了，如何去掉这条线,一种方法是修改HTML代码，把相关的语句删除；,还有一种方法是用鼠标把要删除的边线拖曳到父框架的边框上，这条边线就被删除了。,编辑框架或框架集,返回,设置框架和框架集属性,框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。,框架集属性确定框架的大小和框架之间的边框宽度和颜色等。,在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。,1、设置框架的属性,在【框架】面板中单击某一框架区域，即可在页面中选择此框架，然后可在属性检查器中设置其属性。,设置框架及框架集的属性,2、设置框架集的属性,单击框架的边框，选择框架集，然后在属性检查器中设置此框架集的属性。,框架集的属性检查器,设置框架及框架集的属性,返回,1、指定框架结构,在框架集网页中，除了基本的HTML、HEAD等标记符以外，主要包括框架集标记符,FRAMESET,（必须有结束标记符,）和框架标记符FRAME（没有结束标记符）。,由于框架是按照行或列排列的，所以在建立框架结构时，使用FRAMESET标记符的,rows,属性或,cols,属性分别可以构造出横向分隔框架和纵向分隔框架。,利用HTML创建网页框架,2框架的初始化,框架初始化是指为各个框架指定初始显示的页面，此时应使用,FRAME,标记的,src,属性，将该属性的值指定为要在框架中显示的页面即可。,利用HTML创建网页框架,3框架的嵌套,如果网页设计者需要创建一些复杂的框架集，即同时包含横向和纵向的框架，此时可以使用框架嵌套。框架嵌套是使用FRAMESET标记的嵌套来实现的。,利用HTML创建网页框架,4、边框效果,（1）框架边框的设置,border,属性可以用于设置边框的宽度，其值为像素数。,（2）框架滚动条的设置,使用FRAME标记符的,scrolling,属性可以控制是否在框架内加入滚动条，其值可以取为yes、no、auto。,（3）设置边框的不可移动属性,使用FRAME标记符的,noresize,属性，该属性不需要任何取值，即：,（4）设置框架空白,FRAME标记符的,marginwidth,和,marginheight,属性可以控制框架边框与数据之间的距离，这个属性的取值都是像素数。,利用HTML创建网页框架,5指定超链接的目标框架,控制超链接的目标文件在哪一个框架内显示的方法是在a标记符内使用target属性，格式为：,超链接内容,利用HTML创建网页框架,返回,解决浏览器无法显示框架的问题,在Dreamweaver中允许指定在不支持框架的浏览器中编辑内容。选择【修改】|【框架页】|【编辑无框架内容】命令，然后在文档窗口中像处理普通文档一样输入或插入提示内容。,课堂实践与练习：制作论坛框架,小结,框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。利用框架设计的页面，可以将不同的信息内容分类显示在不同的区域内，使页面布局合理，访问者浏览查看也更方便。,框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。,创建一个框架页面大致需要5个步骤，分别是：创建框架、指定框架页、修改框架样式、保存框架、链接框架。,演讲完毕，谢谢观看！,