《Dreamweaver网页设计》第10章.ppt

1、Dreamweaver 网页设计,第10章框架,【学习概述】,框架是比较常用的网页技术。使用框架技术可以将不同的网页文档在同一个浏览器窗口中显示出来。框架最常见的用途是导航，常见的例子是：一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架，比如门户网站的电子邮箱系统绝大多数就应用了框架技术。本章主要介绍了框架的概念、如何创建框架、编辑框架、创建框架超级链接和浮动框架等内容。本章重点内容是框架的创建和应用，难点是浮动框架。,10.1【课堂讲解】框架概述,10.1.1框架和框架集 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的文档。 框架集是框架

2、的集合，框架集也是网页文件，它定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的 网页内容（noframes 部分除外）；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 注意：如果一个站点包含N个框架的单个页面，则它实际上至少由N+1个单独的网页文档组成：1个框架集文件和N个网页文档，这N个网页文档包含这些框架内初始显示的内容。 如图10-1所示的框架结构代码如下：, ,图 10-1 框架集和框架,从上面代码可以看出框架集和框架的语法结构和部分属性。 框架集语法 .

3、注意：框架集标记frameset必须成对出现。 框架集属性 id：指定该框架集标记的惟一id选择符。 cols：垂直切割框架。 rows：横向切割框架。 frameborder：设定框架的边框，值为0或1，0 为不显示边框，1 是显示边框。 border：指定边框宽度。 bordercolor：指定边框颜色。 framespacing：指定框架与框架间的空白的距离。 框架语法 ,4 框架属性 id：指定该框架标记的惟一id选择符。 src：设定此框架中要显示的网页名称，每个框架对应一个网页。 name：设定该框架的名称 frameborder：设定框架的边框，值为0或1，0 为不显示边框，1

4、是显示边框。 bordercolor：边框颜色。 scrolling：设定是否要显示滚动条，YES是要显示滚动条，NO是不显示滚动条，AUTO是视情况而定是否该显示滚动条。 noresize：设定不让访问者改变框架的大小，如果没有设定该参数，访问者可以自由地改变框架的大小。 marginhight：表示框架高度部份边缘所保留的空间。 marginwidth：表示框架宽度部份边缘所保留的空间。,10.1.2浮动框架 浮动框架的标记是Iframe。浮动框架技术可以将一个网页文档嵌入在另一个网页文档中显示。可以直接嵌入在一个网页文档中，与网页文档内容相互融合，成为一个整体；还可以在同一网页文档中嵌入

5、多个网页文档。 在Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手动输入，如图10-2所示，Dreamweaver能够自动提示输入可用的属性。,图 10-2 浮动框架源代码编辑模式,假设有如下浮动框架源代码： 从上面代码可以看出浮动框架的语法结构和部分属性。 浮动框架基本语法 . 注意：浮动框架标记iframe必须成对出现。,2 浮动框架属性 src：文件位置。 name：对象的名称，命名后，以便在其他对象中使用。 id：指定该浮动框架标记的惟一id选择符。 height：指定浮动框架的高度； width：指定浮动框架的宽度。 noresize： 指定浮动框架不可调整尺

6、寸。 frameborder：该属性规定是否显示浮动框架边框。设置为“0”表示不显示浮动框架边框；设置为“1”表示显示浮动框架边框。 border：该属性指定浮动框架边框的宽度。 bordercolor：该属性指定浮动框架边框的颜色。 align：对齐方式，分为left(居左)、right(居右)、center(居中)3种。 framespacing：该属性指定相邻浮动框架帧之间的间距。 hspace：浮动框架内的左右边界大小。 vspace：浮动框架内的上下边界大小。 marginheight：浮动框架的左右边界大小。 marginwidth：浮动框架的上下边界大小。,10.1.2浮动框架

7、浮动框架的标记是Iframe。浮动框架技术可以将一个网页文档嵌入在另一个网页文档中显示。可以直接嵌入在一个网页文档中，与网页文档内容相互融合，成为一个整体；还可以在同一网页文档中嵌入多个网页文档。 在Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手动输入，如图10-2所示，Dreamweaver能够自动提示输入可用的属性。,图 10-4 【可视化助理】显示框架边框,（2）执行【修改】-【框架页】中的【拆分左/右/上/下框架】命令，即实现了创建框架集操作。也可以按快捷键【Alt】的同时，拖动任意一条框架边框，可以在垂直如图10-5所示或水平位置如图10-6所示分割文档；按

8、快捷键Alt从一个角上拖动框架边框如图10-7所示，可以把文档划为4个框架。通常用这种方法创建框架集最为自由、方便。,图 10-5 水平分割文档,图 10-6 垂直分割文档,图 10-7 在垂直和水平位置分割文档,创建预定义的框架集步骤如下： （1）要创建预定义的框架集方法很多：可以执行【插入】-【HTML】-【框架】命令子菜单中的预定义框架集，如图10-8所示。也可以是在“插入”栏的“布局”类别中，单击“框架”按钮（）上的下拉箭头，然后选择预定义的框架集，如图10-9所示。还可以通过执行【文件】-【新建】命令打开“新建文档”对话框，在“类别”项中选择“框架集”，再从“框架集”列表中选择所需的

9、框架集来创建框架集，如图10-10所示。,图 10-8 菜单中预定义框架集,图 10-9 工具栏中预定义框架集,图 10-10 “新建文档”对话框创建框架集,（2）接着显示“框架标签辅助功能属性”对话框。可以在此对话框中给各个框架设置个有意义的标题名称，如图10-11所示。,图 10- 11“框架标签辅助功能属性”对话框,（3）单击“确定”按钮，就完成了框架集的创建。,10.2.2创建嵌套框架集 一个框架集嵌套在另一个框架集内称作嵌套框架集。一个框架集文件可以包含多个嵌套的框架集。创建嵌套框架集步骤如下： （1）在想要嵌套框架集的框架中定位光标。如图10-12所示为建立的顶端框架集，定位光标在

10、下框架中。,图 10-12 顶端框架集,（2）执行【修改】-【框架页】中的【拆分左/右/上/下框架】命令，或在“插入”栏的“布局”类别中，单击“框架”按钮（）上的下拉箭头，然后选择预定义的框架图标，也可以选择菜单插入框架，然后在子菜单中选择一种框架类型。 （3）如图10-13所示为在已有的框架集中嵌套了左侧框架集的效果。,图 10-13 框架集中嵌套左侧框架集效果,保存框架和框架集文件 框架由框架集和单个框架组成。 框架集是定义一组框架结构的网页。单个框架是指在网页上定义的一个区域。在上面创建的框架集中包括4个独立的文件：1个框架集文件和3个框架文件。要在浏览器中预览框架网页，必须先保存框架集

11、文件和框架文件。读者可以单独保存每个框架集文件和框架文件，也可以同时保存框架集文件和框架文件。步骤如下： （1）若要保存所有文件（包括框架集文件和框架文件），执行【文件】-【保存全部】命令。若是新创建框架集，则打开“另存为”对话框，如图10-21所示。,图 10- 21“另存为”对话框,（2）Dreamweaver首先要保存框架集文件，框架集边框显示虚线框。文件名默认为“UntitledFrame-1.html”，可以根据需要更改文件名，比如命名为“index.html”。 （3）单击“保存”按钮，接着要求保存框架文件，相应框架边框显示虚线框。本例命名3个框架分别为：“biaoti.html”

12、（对应topFrame）、“daohang.html”（对应leftFrame）、“neirong.html”（对应mainFrame）。,（4）本例操作完成后，形成4个HTML文件： 文件“index.html”（框架集文件） 文件“biaoti.html”（顶框架，对应topFrame） 文件“daohang.html”（左框架，对应leftFrame） 文件“neirong.html”（主框架，对应mainFrame） 其中框架集文件“index.html”也是HTML文件，源代码如下： 可见，它主要包括3个框架的源文件位置、框架大小、框架边框、框架可见性等信息。而文件“biaoti.h

13、tml”、文件“neirong.html”和文件“daohang.html”实际上就是普通的HTML网页。,若只保存框架集文件，可以执行【文件】-【保存框架页】命令，或执行【文件】-【框架页另存为】命令，把框架集另存为新文件。若只保存框架文件，在文档中相应框架内定位光标，然后执行【文件】-【保存框架】命令，或执行【文件】-【框架另存为】命令，把框架另存为新文件。,10.4实践检验,理论巩固 填空题 框架是指_。 框架集是指_。 浮动框架是指_。 简答题 （1） 简述如何在Dreamweaver中创建与保存框架。 （2） 简述如何在Dreamweaver中创建嵌套框架。 上机实战 （1）使用Dreamweaver创建框架并设置框架超级链接。 （2）使用Dreamweaver创建浮动框架并设置浮动框架超级链接。,Dreamweaver 网