Dreamweaver网页设计 第10章框架
Dreamweaver 网页设计 第10章 框架
【学习概述】 框架是比较常用的网页技术。使用框架技术 可以将不同的网页文档在同一个浏览器窗口中显 示出来。框架最常见的用途是导航,常见的例子 是:一组框架通常包括一个含有导航条的框架和 另一个要显示主要内容页面的框架,比如门户网 站的电子邮箱系统绝大多数就应用了框架技术 本章主要介绍了框架的概念、如何创建框架、编 辑框架、创建框架超级链接和浮动框架等内容 本章重点内容是框架的创建和应用,难点是浮动 框架
【学习概述】 框架是比较常用的网页技术。使用框架技术 可以将不同的网页文档在同一个浏览器窗口中显 示出来。框架最常见的用途是导航，常见的例子 是：一组框架通常包括一个含有导航条的框架和 另一个要显示主要内容页面的框架，比如门户网 站的电子邮箱系统绝大多数就应用了框架技术。 本章主要介绍了框架的概念、如何创建框架、编 辑框架、创建框架超级链接和浮动框架等内容。 本章重点内容是框架的创建和应用，难点是浮动 框架
10.1【课堂讲解】框架概述 10.1.1框架和框架集 框架是汹览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分 中所显示内容无关的文档 框架集是框架的集合,框架集也是网页文件,它定义了一组框架的布局 和属性,包括框架的数目、框架的大小和位 及在每个框架中初始 的页面的URL。框架集文 要在浏览器中显示的网页 内容( noframes部分除外);框架集文件只是向浏览器提供应如何 显示一组框架以及在这些框架中应显示哪些文档的有关信息。 注意:如果一个站点包含N个框架的单个页面,则它实际上至少由N+1个 单独的网页文 成:1个框架集文件和N个网页文档,这N个网页文 档包含这些框架内初始显示的内容。 如图10-1所示的框架结构代码如下
10.1 【课堂讲解】框架概述 10.1.1 框架和框架集 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分 中所显示内容无关的文档。 框架集是框架的集合，框架集也是网页文件，它定义了一组框架的布局 和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始 显示的页面的URL。框架集文件本身不包含要在浏览器中显示的 网页 内容（noframes 部分除外）；框架集文件只是向浏览器提供应如何 显示一组框架以及在这些框架中应显示哪些文档的有关信息。 注意：如果一个站点包含N个框架的单个页面，则它实际上至少由N+1个 单独的网页文档组成：1个框架集文件和N个网页文档，这N个网页文 档包含这些框架内初始显示的内容。 如图10-1所示的框架结构代码如下：
图10-1框架集和框架
图 10-1 框架集和框架
从上面代码可以看出框架集和框架的语法结构和部分属性 框架集语法 . ·注意:框架集标记 frameset必须成对出现。 框架集属性 d:指定该框架集标记的惟一id选择符。 ·cols:垂直切割框架。 rows:横向切割框架 frameborder:设定框架的边框,值为0或1,0为不显 示边框,1是显示边框。 · border:指定边框宽度。 bordercolor:指定边框颜色 framespacing:指定框架与框架间的空白的距离。 框架语法
从上面代码可以看出框架集和框架的语法结构和部分属性。 – 框架集语法 • ... • 注意：框架集标记frameset必须成对出现。 – 框架集属性 • id：指定该框架集标记的惟一id选择符。 • cols：垂直切割框架。 • rows：横向切割框架。 • frameborder：设定框架的边框，值为0或1，0 为不显 示边框，1 是显示边框。 • border：指定边框宽度。 • bordercolor：指定边框颜色。 • framespacing：指定框架与框架间的空白的距离。 – 框架语法 •
4框架属性 ·id:指定该框架标记的惟一i选择符 ·src:设定此框架中要显示的网页名称,每个框架对应 个网页。 name:设定该框架的名称 frameborder:设定框架的边框,值为0或1,0为不显 示边框,1是显示边框。 bordercolor:边框颜色。 scrolling:设定是否要显示滚动条,YES是要显示滚动 条,NO是不显示滚动条,AUTO是视情况而定是否该显 示滚动条。 noresize:设定不让访问者改变框架的大小,如果没有 设定该参数,访问者可以自由地改变框架的大小。 marginhight::表示框架高度部份边缘所保留的空间 marginwidth:表示框架宽度部份边缘所保留的空间
4 框架属性 • id：指定该框架标记的惟一id选择符。 • src：设定此框架中要显示的网页名称，每个框架对应一 个网页。 • name：设定该框架的名称 • frameborder：设定框架的边框，值为0或1，0 为不显 示边框，1 是显示边框。 • bordercolor：边框颜色。 • scrolling：设定是否要显示滚动条，YES是要显示滚动 条，NO是不显示滚动条，AUTO是视情况而定是否该显 示滚动条。 • noresize：设定不让访问者改变框架的大小，如果没有 设定该参数，访问者可以自由地改变框架的大小。 • marginhight：表示框架高度部份边缘所保留的空间。 • marginwidth：表示框架宽度部份边缘所保留的空间
10.12浮动框架 浮动框架的标记是 Iframe。浮动框架技术可以将一个网页文档嵌入在另 个网页文档中显示。可以直接嵌入在一个网页文档中,与网页文档 内容相互融合,成为一个整体;还可以在同一网页文档中嵌入多个网 页文档 在 Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手 动输入,如图102所示 Dreamweaver能够自动提示输入可用的属性 allowtransparency nbs 3 applica 3 framrborder marginwi dth 图102浮动框架源代码编辑模式 假设有如下浮动框架源代码: iframe src=d. html"name="meishi"width="460"marginwidth=5 height=200"marginheight="10"align="middle"scrolling=yes > 从上面代码可以看出浮动框架的语法结构和部分属性。 浮动框架基本语法 . 注意:浮动框架标记ame必须成对出现
10.1.2 浮动框架 浮动框架的标记是Iframe。浮动框架技术可以将一个网页文档嵌入在另 一个网页文档中显示。可以直接嵌入在一个网页文档中，与网页文档 内容相互融合，成为一个整体；还可以在同一网页文档中嵌入多个网 页文档。 在Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手 动输入，如图10-2所示，Dreamweaver能够自动提示输入可用的属性。 图 10-2 浮动框架源代码编辑模式 假设有如下浮动框架源代码： 从上面代码可以看出浮动框架的语法结构和部分属性。 浮动框架基本语法 ... 注意：浮动框架标记iframe必须成对出现
2浮动框架属性 src:文件位置。 name:对象的名称,命名后,以便在其他对象中使用 idε指定该浮动框架标记的惟一id选择符。 height:指定浮动框架的高度 width:指定浮动框架的宽度 noresize:指定浮动框架不可调整尺寸 frameborder:该属性规定是否显示浮动框架边框。设置为“0表 示不显示浮动框架边框;设置为“1表示显示浮动框架边框 border:该属性指定浮动框架边框的宽度 · bordercolor:该属性指定浮动框架边框的颜色。 aign:对齐方式,分为lef(居左)、 right(居右)、 center(居中)3种 framespacing:该属性指定相邻浮动框架帧之间的间距 hspace:浮动框架内的左右边界大小。 vspace:浮动框架内的上下边界大小 marginheight:浮动框架的左右边界大小。 marginwidth:浮动框架的上下边界大小
2 浮动框架属性 • src：文件位置。 • name：对象的名称，命名后，以便在其他对象中使用。 • id：指定该浮动框架标记的惟一id选择符。 • height：指定浮动框架的高度； • width：指定浮动框架的宽度。 • noresize： 指定浮动框架不可调整尺寸。 • frameborder：该属性规定是否显示浮动框架边框。设置为“0”表 示不显示浮动框架边框；设置为“1”表示显示浮动框架边框。 • border：该属性指定浮动框架边框的宽度。 • bordercolor：该属性指定浮动框架边框的颜色。 • align：对齐方式，分为left(居左)、right(居右)、center(居中)3种。 • framespacing：该属性指定相邻浮动框架帧之间的间距。 • hspace：浮动框架内的左右边界大小。 • vspace：浮动框架内的上下边界大小。 • marginheight：浮动框架的左右边界大小。 • marginwidth：浮动框架的上下边界大小
10.12浮动框架 浮动框架的标记是 Iframe。浮动框架技术可以将一个网页文档嵌入在另 个网页文档中显示。可以直接嵌入在一个网页文档中,与网页文档 内容相互融合,成为一个整体;还可以在同一网页文档中嵌入多个网 页文档。 在 Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手 动输入,如图10-2所示, Dreamweaver能够自动提示输入可用的属性。 示程平边 砣图10-4【可视化助理】—显示框架边框 (2)执行【修改】→>【框架页】中的【拆分左/右上/下框架】命令,即实 现了创建框架集操作。也可以按快捷键【At】的同时,拖动仼意一条框架 边框,可以在垂直如图10-5所示或水平位置如图10-6所示分割文档;按快 捷键At从一个角上拖动框架边框如图10-7所示,可以把文档划为4个框架。 通常用这种方法创建框架集最为自由、方便
10.1.2 浮动框架 浮动框架的标记是Iframe。浮动框架技术可以将一个网页文档嵌入在另 一个网页文档中显示。可以直接嵌入在一个网页文档中，与网页文档 内容相互融合，成为一个整体；还可以在同一网页文档中嵌入多个网 页文档。 在Dreamweaver中处理浮动框架时很多属性-值对要在“代码”视图下手 动输入，如图10-2所示，Dreamweaver能够自动提示输入可用的属性。 砨图 10-4 【可视化助理】－显示框架边框 （2）执行【修改】->【框架页】中的【拆分左/右/上/下框架】命令，即实 现了创建框架集操作。也可以按快捷键【Alt】的同时，拖动任意一条框架 边框，可以在垂直如图10-5所示或水平位置如图10-6所示分割文档；按快 捷键Alt从一个角上拖动框架边框如图10-7所示，可以把文档划为4个框架。 通常用这种方法创建框架集最为自由、方便
图106垂直分割文档 图10-5水平分割文档 图10-7在垂直和水平位置分割文档 创建预定义的框架集步骤如下 (1)要创建预定义的框架集方法很多:可以执行【插入】->【HTML】->【框架】命 令子菜单中的预定义框架集,如图10-8所示。也可以是在“插入”栏的“布局”类别中 单击“框架”按钮()上的下拉箭头,然后选择预定义的框架集,如图10-9所示。还可 以通过执行【文件】一>【新建】命令打开“新建文档”对话框,在“类别”项中选择 “框架集”,再从“框架集”列表中选择所需的框架集来创建框架集,如图10-10所示
图 10-5 水平分割文档 图 10-6 垂直分割文档 图 10-7 在垂直和水平位置分割文档 创建预定义的框架集步骤如下： （1）要创建预定义的框架集方法很多：可以执行【插入】->【HTML】->【框架】命 令子菜单中的预定义框架集，如图10-8所示。也可以是在“插入”栏的“布局”类别中， 单击“框架”按钮（）上的下拉箭头，然后选择预定义的框架集，如图10-9所示。还可 以通过执行【文件】->【新建】命令打开“新建文档”对话框，在“类别”项中选择 “框架集”，再从“框架集”列表中选择所需的框架集来创建框架集，如图10-10所示