Chap 2-8 Html语言——框架.ppt

《Chap 2-8 Html语言——框架.ppt》由会员分享，可在线阅读，更多相关《Chap 2-8 Html语言——框架.ppt（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 网页设计教程网页设计教程 2022/12/212Html语言语言框架框架框架概念框架概念建立框架建立框架标记标记标记标记框架的格式控制框架的格式控制框架的链接框架的链接2022/12/213框架概念框架概念框架框架n框架是将浏览器窗口划分为不同的部分，每框架是将浏览器窗口划分为不同的部分，每部分装载不同的网页，从而获得在一个浏览部分装载不同的网页，从而获得在一个浏览器窗口同时显示多个页面的特殊效果。此外，器窗口同时显示多个页面的特殊效果。此外，通过为超链接指定目标框架，可以为框架之通过为超链接指定目标框架，可以为框架之间建立内容之间的联系，可以实现页面导航间建立内容之间的联系，可以实现页面导

2、航的功能。的功能。2022/12/214左框架右框架下框架上框架2022/12/215建立框架建立框架建立框架网页的步骤可以简单归纳如下：建立框架网页的步骤可以简单归纳如下：n决定网页的框架数目、大小及位置。决定网页的框架数目、大小及位置。n制作框架的内容。制作框架的内容。n设置框架的格式，例如设置框架的上下界大设置框架的格式，例如设置框架的上下界大小、框线大小、框线颜色、是否显示卷轴等。小、框线大小、框线颜色、是否显示卷轴等。n针对不支持框架的浏览器设计网页内容。针对不支持框架的浏览器设计网页内容。在此，我们必须用到在此，我们必须用到在此，我们必须用到在此，我们必须用到、几个标记：几个标记：

3、几个标记：几个标记：2022/12/216建立框架建立框架 和和标记标记 框框架架的的建建立立使使用用、两两个个标标记记。它它与与 一一 般般 的的 HTMl文文 件件 并并 无无 大大 的的 区区 别别，只只 是是 将将标标记记取取代代标标记记，用用来来声声明明框框架架网网页页的的定定义义及及各各个个框框架架的的间间距距、维维数数、属属性性等等。标记用来声明其中框架页面的内容。其基本结构为：标记用来声明其中框架页面的内容。其基本结构为：注意：注意：在框架集页中不能有在框架集页中不能有BODY标记符。标记符。2022/12/217用途：用途：标记用来定义标记用来定义个框架组的属性个框架组的属性

4、格式为：格式为：n其中属性值为：其中属性值为：n row 设定横向分割的框架数目：设定横向分割的框架数目：n cols 设定纵向分割的框架数目：设定纵向分割的框架数目：n border 设定边框的宽度；设定边框的宽度；n bordercolor 设定边框的颜色：设定边框的颜色：n frameborder 设定有无边框；设定有无边框；n framespacing 设置各窗口间的空白。设置各窗口间的空白。标记标记2022/12/218rows和和cols属性属性n例如：建立三个横向框架的页面例如：建立三个横向框架的页面nn其中：其中：nx:表表 示示 框框 架架 的的 绝绝 对对 大大 小小，单单

5、 位位 是是 像像 素素 数数，如如row=50,80,60：ny:表表示示框框架架相相对对于于浏浏览览器器窗窗口口大大小小的的百百分分比比数数，如如row=80,50,10表表示示第第2个个横横向向框框架架的的大大小小为为浏浏览览器器当当前窗口的前窗口的50：nz*:*表表示示自自动动分分配配，几几个个*表表示示将将窗窗口口等等分分为为几几份份；若若在在*前前加加数数字字，表表示示等等分分数数字字之之几几；row=2*，1*，3*，表表示示第第l、2、3个个框框架架分分别别为为整整个个浏浏览览器器窗窗口口的的26、16、36。属性说明：属性说明：2022/12/219标标记记用用于于给给各各

6、个个框框架架指指定定页页面面的的内内容容，也也就就是是，它它将将各各个个框框架架和和包包含含内内容容的的那那个个文文件件联联系系在在一一起起。是是一一个单标记，格式为：个单标记，格式为：标记标记2022/12/2110srcsrc 表示该框架对应的源文件：表示该框架对应的源文件：name name 指指定定框框架架名名。框框架架名名由由字字母母开开头头，下下划划线线开开头头的的名名字字无无效效，例如例如flame flame frame ，也就是说，源文件可以是某个网址上的文件，只需写上也就是说，源文件可以是某个网址上的文件，只需写上URLURL；border border 设定边框的宽度；设

7、定边框的宽度；bordercolorbordercolor 设定边框的颜色；设定边框的颜色；frameborderframeborder 设定有设定有(yes)(yes)无无(no)(no)边框：边框：marginwidthmarginwidth 设置框架内容与左右边框的空白设置框架内容与左右边框的空白marginheightmarginheight 设置框架内容与上下边框的空白设置框架内容与上下边框的空白scrolling scrolling 设置是设置是(yes)/(yes)/否否no/no/自动自动(auto)(auto)加入滚动条；加入滚动条；noresizenoresize 设置不允

8、许窗口改变大小，默认设置是允许窗口改变大小设置不允许窗口改变大小，默认设置是允许窗口改变大小标记属性标记属性2022/12/2111 建立横向排列的框架建立横向排列的框架 例如：建立横向排列的框架例如：建立横向排列的框架2022/12/2112设定框架的颜色设定框架的颜色n利利用用和和标标记记可可以以设设置置边边框框的的外外观观，如如大大小小、颜颜色色。两两个个标标记记所所不不同同的的是是，标标记记设设置置的的是是整整个个框框架架的的属属性性，而而只能设置它所控制的框架。只能设置它所控制的框架。n设定无边框设定无边框n格式为：格式为：frameset 0 或或frame 0其中取值其中取值ye

9、s或或1（默认）表示生成立体的边框，（默认）表示生成立体的边框，no或或0表示表示无边框。无边框。设置框架属性设置框架属性(1)(1)2022/12/2113n设定边框颜色设定边框颜色n利用利用和和标记的标记的bordercolorbordercolor属性给边框着色。属性给边框着色。n格式为：格式为：或或 颜色可取颜色名或十六进制颜色值。颜色可取颜色名或十六进制颜色值。固定边框固定边框n在在默默认认情情况况下下，浏浏览览者者可可以以用用鼠鼠标标拖拖动动边边框框改改变变页页面面大大小。使用小。使用的的noresizenoresize属性可以固定边框的位置。属性可以固定边框的位置。n格式为格式为

10、 设置框架属性设置框架属性(2)(2)2022/12/2114设置框架属性设置框架属性(3)(3)页面空白区域的设置页面空白区域的设置n设置框架内容与左右边框的空白设置框架内容与左右边框的空白n标标记记的的marginwidthmarginwidth属属性性可可设设置置框框架架内内容容和和左左右右边边框框之间的空白。之间的空白。n格式为：格式为：frame =x x x为像素数，取为像素数，取1 1以上的值。以上的值。n设置框架内容与上下边框的空白设置框架内容与上下边框的空白n标标记记的的marginheightmarginheight属属性性可可设设置置框框架架内内容容和和上上下下边边框框之

11、间的空白。之间的空白。n格式为：格式为：frame =x2022/12/2115设置框架属性设置框架属性(4)(4)页面空白区域的设置页面空白区域的设置n设置各窗口间的空白设置各窗口间的空白n中中的的framespacingframespacing属属性性可可以以设设置置各各个个窗窗口口间间的的空白空白.n格式为：格式为：frameset=x x为像素数，取为像素数，取1以上的值。以上的值。2022/12/2116 页面空白区域的设置页面空白区域的设置 例如例如:页面空白区域的设置页面空白区域的设置2022/12/2117设置框架的链接设置框架的链接使使用用的的target属属性性就就可可以以

12、控控制制目目标标文文件件在在哪哪个个框框架架内内显显示示。当当单单击击热热点点文文本本时时，目目标标文文件件就就会会出出现现在在target指指定定的的框框架架内内。Target属性的值可以为框架名。属性的值可以为框架名。格式为：格式为：热点文本热点文本2022/12/2118_blankn格式：格式：热点文本热点文本 n作用：链接的目标文件被载入一个新的没有名字的浏览器窗口。作用：链接的目标文件被载入一个新的没有名字的浏览器窗口。_selfn格式：格式：热点文本热点文本 n作用：链接的目标文件被载入当前框架窗口中，代替正在显示的作用：链接的目标文件被载入当前框架窗口中，代替正在显示的热点文本

13、所在的那个文件。热点文本所在的那个文件。_topn格式：格式：热点文本热点文本 n作用：链接的目标文件被载入整个浏览器窗口。作用：链接的目标文件被载入整个浏览器窗口。_parentn格式：格式：热点文本热点文本 框架名的四个特殊值框架名的四个特殊值2022/12/2119index.htmindex.htm文件内容文件内容 框架间的链接框架间的链接 e1.htm内容为内容为：打开一个新窗口显示打开一个新窗口显示当前框架窗口显示当前框架窗口显示整个窗口显示整个窗口显示a1.htma1.htm内容为：内容为：框架间的链接框架间的链接例如例如:框架间的链接框架间的链接2022/12/2120设置动态

14、字幕设置动态字幕 使用使用标记可以设置动态字幕标记可以设置动态字幕基本格式基本格式为为 字幕文字字幕文字 2022/12/2121align align 设置字幕和垂直文本对齐设置字幕和垂直文本对齐bgcolorbgcolor 设置字幕的背景颜色设置字幕的背景颜色width width 设置字幕的宽，设置字幕的宽，x x为像素数或相对于窗口宽的百分比为像素数或相对于窗口宽的百分比height height 设置字幕的高，设置字幕的高，y y为像素数为像素数loop loop 设置字幕的循环次数设置字幕的循环次数i,-1i,-1或或infiniteinfinite为无限循环为无限循环behavi

15、or behavior scrollscroll设设置置文文字字单单向向流流动动，sideside设设置置文文字字到到达达边界停止，边界停止，alternatealternate文字到达边界后反向流动文字到达边界后反向流动hspacehspace 水平方向空白像素数水平方向空白像素数vspacevspace 垂直方向空白像素数垂直方向空白像素数scroollamountscroollamount 字母移动速度字母移动速度scrolldelayscrolldelay 移动每步的延时移动每步的延时属性说明属性说明 2022/12/2122标标标标 记记记记 说说说说 明明明明：若若浏浏览览器器不不支支持持框框架架，则则显显示示标记之间的网页内容。标记之间的网页内容。标记谢谢！谢谢！