第5讲框架.ppt

第5讲 使用框架创建多页面布局 主要内容 5.1 框架简介 框架技术是页面布局设计技术之一。 框架技术可以将浏览器分割成多个小窗口，在每个小窗口中可以显示不同的网页。 5.2 框架的基本结构 框架的基本结构主要分为框架集和框架两个部分（ frameset 、 frame）。 5.3 框架的设置 常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要。 5.3.1 窗口的水平分割 rows属性可定义一个水平分割的窗口框架。 案例讲解 !--程序5-2-- html head title采用整数设置窗口的水平分割/title /head frameset rows=50%,50% frame frame /frameset /html 5.3.2 窗口的垂直分割 cols属性可定义一个垂直分割的窗口框架。 垂直分割案例 5.3.3 窗口的嵌套分割 在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图所示，实现“厂”字型框架需要对窗口进行嵌套分割。 窗口的嵌套分割 5.3.4 框架的边框 在frameset标记中，可运用border属性控制分割窗口框架的边框。 基本语法： frameset border=n“ 语法说明： n为整数，代表此窗口框架的宽度，单位为像素(px)。 框架的边框 5.3.5 框架的隐藏 frameborder属性 用于控制窗口框架的周围是否显示框架。 此属性可适于frameset、frame标记。 基本语法： frameset frameborder=0或1 语法说明： 0表示不显示边框，1表示显示边框，默认值为1。 5.4 子窗口的设置 指定子窗口显示网页 （src） 定义子窗口名称 (name) 控制子窗口滚动条 (scrolling) 调整子窗口的尺寸 (noresize) 设置子窗口的边距 (marginwidth、marginheight) 5.4.1 指定子窗口显示网页 src属性是用来指定要导入到某个子窗口的HTML文件的位置，语法如下： 基本语法： frame src=html文件的位置 语法说明： src属性—指定子窗口要显示的HTML文件 将设置子窗口显示名称为frame.html的网页。 frame src=frame.html。 指定子窗口显示网页 5.4.2 定义子窗口名称 name属性--指定窗口的名称，可指定超链接的链接目标(URL)显示到网页的某个子窗口。 基本语法： frame name=子窗口名称 frame name=“right” body p左窗口/pa href= target=right现代教育技术中心/a /body 定义子窗口名称案例 5.4.3 控制子窗口其它设置 1. scrolling属性：用于控制窗口框架中是否显示滚动条，此属性用于frame标记中。 基本语法： frame scrolling=yes或no或auto 语法说明： Scrolling :yes-显示滚动条，no-无滚动条，auto为自动。 2. noresize:调整子窗口尺寸 3. marginwidth:设置框架左右边缘的宽度（边距) 4. marginheight:设置框架上下边缘的宽度（边距) 以上属性均应用在frame标记上。 控制框架滚动条案例 html head title控制框架滚动条/title /head frameset rows=20%,70%,* frame scrolling=yes frame scrolling=no frame scrolling=auto /frameset /html 设置框架边距案例 !—edu_5-5_frameset_src.html -- html headtitle设置框架边距/title/head frameset cols=30%,* frame src=left.html marginheight=50 marginwidth=50 frame src=right.html /frameset /html 案例效果 5.5 浮动框架 浏览器窗口含有孤立的子窗口称为浮动框架。 插入浮动框架使用成对标记 基本语法： iframe src=url/iframe 语法说明 与框架frames