网页中表格布局及框架的应用.ppt

1、p创建表格p表格的基本属性p编辑表格回顾内容表格布局表格布局及及框架的应用框架的应用主讲人：赵毅布局表格创建框架（框架集及框架标记）框架超链接的设置内嵌框架标记的应用认识表格布局认识表格布局p如何实现图文内容的布局，达到如右图所示页面的效果？p分析右图所示页面，应该用什么进行布局？使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制如何使用表格进行布局如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 如何使用表格进行布局如何使用表格进行布局 超值变形金钢超值变形金钢2.5折折!人们为啥对电视吼叫人们

2、为啥对电视吼叫 布局模式布局模式l在在Dreamweaver中使用表格布局网页：中使用表格布局网页：返回认识框架认识框架广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框边框框架集页面框架集页面(FrameSet.htm)创建框架创建框架l在在Dreamweaver中使用框架布局网页：中使用框架布局网页：框架的一般格式框架的一般格式Your browser does not handle frames!lnoframes标记是双标记。标记是双标记。1.可为那些不支持框架的浏览

3、器显示文本。如果浏览可为那些不支持框架的浏览器显示文本。如果浏览器能处理框架，就不会显示出器能处理框架，就不会显示出noframes中的文本。中的文本。2.noframes必须位于必须位于 frameset之内。之内。l使用框架的弊端：使用框架的弊端：1.开发人员必须同时跟踪更多的开发人员必须同时跟踪更多的HTML文档文档 2.很难打印整张页面很难打印整张页面 框架集标记框架集标记l框架结构标记：框架结构标记：，这是双标记。，这是双标记。lframeset定义如何将窗口分割为框架。定义如何将窗口分割为框架。l每个每个 frameset 定义了一系列行或列。定义了一系列行或列。属性属性值描述描述

4、colspixels定义框架集中列的数目和尺寸。定义框架集中列的数目和尺寸。%*rowspixels定义框架集中行的数目和尺寸。定义框架集中行的数目和尺寸。%*框架集标记语法详解框架集标记语法详解 边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页框架标记框架标记l框架标记框架标记是单标记。是单标记。lframe定义了放置在每个框架中的定义了放置在每个框架中的HTML文档。文档。属性属性取取值描述描述frameborder0、1规定是否定是否显示框架周示框架周围

5、的的边框。框。longdescURL规定一个包含有关框架内容的定一个包含有关框架内容的长描述的描述的页面。面。marginheightpixels定定义框架的上方和下方的框架的上方和下方的边距。距。marginwidthpixels定定义框架的左框架的左侧和右和右侧的的边距。距。namename规定框架的名称。定框架的名称。noresizenoresize规定无法定无法调整框架的大小。整框架的大小。scrollingyes、no、auto规定是否在框架中定是否在框架中显示示滚动条。条。srcURL规定在框架中定在框架中显示的文档的示的文档的 URL。框架标记语法详解框架标记语法详解rows_c

6、ols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框的宽度的宽度如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？页面文件？如何创建多个复杂的窗口如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口如何创建多个

7、复杂的窗口如何创建多个复杂的窗口3、新建多框架HTML页面“Frame_Sets.html”.设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超文本链接锚标签文本链接锚标签target属性所引用属性所引用返回框架超链接的应用框架超链接的应用 在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中的的超超链链接接页面出现在另一个框架窗口中，如何实现？页面出现在另一个框架窗口中，如何实现？使用使用target目标窗口属性目标窗口属性如何设置窗口链接的显示位置如何设置窗口链接的显示位置ltarget目标窗口属性na

8、me“显示的窗口名”target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口里。的框架窗口里。target属性指定了所链属性指定了所链接的文件出现在名称接的文件出现在名称为为“rightframe”的的框架窗口里框架窗口里如何设置窗口链接的显示位置如何设置窗口链接的显示位置ltarget目标窗口属性四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件“right.html”返回内联框架标记内联框架标记l用于创建内联框架（即行内框架）。用于创建内联框架（即行内框架）。l 属性属性

9、值描述描述alignleft、right、top、middle、bottom不不赞成使用。成使用。请使用使用样式代替。式代替。规定如何根据周定如何根据周围的元素来的元素来对齐此框架。此框架。frameborder1、0规定是否定是否显示框架周示框架周围的的边框。框。heightpixels、%规定定 iframe 的高度。的高度。longdescURL规定一个定一个页面，面，该页面包含了有关面包含了有关 iframe 的的较长描述。描述。marginheightpixels定定义 iframe 的的顶部和底部的部和底部的边距。距。marginwidthpixels定定义 iframe 的左的左

10、侧和右和右侧的的边距。距。nameframe_name规定定 iframe 的名称。的名称。scrollingyes、no、auto规定是否在定是否在 iframe 中中显示示滚动条。条。srcURL规定在定在 iframe 中中显示的文档的示的文档的 URL。widthpixels、%定定义 iframe 的的宽度。度。内联框架标记内联框架标记实例演示实例演示内嵌框架的应用图片流览器 1 2 3 4 5 l使用表格实现网页布局。l框架集、框架的基础知识及实际应用。l使用框架结构实现多窗口展示页面l内嵌框架的标记及实际应用。小结实验：框架应用实验：框架应用top.htmlleft.htmlright1.html或或right2.htmlframe_sets.html编写如下图所示效果对应的编写如下图所示效果对应的html代码代码