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

如何使用表格进行布局 如何使用表格进行布局 布局模式 在Dreamweaver中使用表格布局网页： 认识框架 创建框架 框架的一般格式 frameset cols=25%, 25%,* noframes body Your browser does not handle frames! /body /noframes frame src=URL1 frame src=URL2 frame src=URL3 /frameset 框架集标记 框架结构标记：frameset，这是双标记。 frameset定义如何将窗口分割为框架。 每个 frameset 定义了一系列行或列。 框架集标记语法详解 框架标记 框架标记frame 是单标记。 frame定义了放置在每个框架中的HTML文档。 框架标记语法详解 如何创建多个复杂的窗口 如何创建多个复杂的窗口 框架超链接的应用 如何设置窗口链接的显示位置 如何设置窗口链接的显示位置 内联框架标记 iframe用于创建内联框架（即行内框架）。 iframe name=“ 内嵌框架名称” 属性名=“属性值” /iframe 内联框架标记——实例演示 创建表格 表格的基本属性 编辑表格 回顾内容 表格布局及框架的应用 主讲人：赵毅 wangyezhizuo2013@163.com 布局表格 创建框架（框架集及框架标记） 框架超链接的设置 内嵌框架标记的应用 认识表格布局 如何实现图文内容的布局，达到如右图所示页面的效果？ 分析右图所示页面，应该用什么进行布局？ 使用表格进行布局 用表格对网页的内容进行整体控制 使用表格布局下图，需要几行几列？ 需要7行2列 TABLE width=298 TR TD colspan=2IMG src=images/adv.jpg //TD /TR TR TD width=“122” rowspan=“6” align=“left” IMG src=images/wangyou.jpg width=116 height=142 //TD TD width=“285” A href=“#”超值变形金钢2.5折!/A /TD /TR TR TDA href=#人们为啥对电视吼叫 /A/TD /TR /TABLE 返回 广告栏顶部框架(top.htm) 导航栏左侧框架(left.htm) 详细内容页面右侧框架 (main.htm) 框架的边框 框架集页面(FrameSet.htm) 在Dreamweaver中使用框架布局网页： noframes标记是双标记。 可为那些不支持框架的浏览器显示文本。如果浏览器能处理框架，就不会显示出noframes中的文本。 noframes必须位于 frameset之内。 使用框架的弊端： 开发人员必须同时跟踪更多的HTML文档 很难打印整张页面 * % 定义框架集中行的数目和尺寸。 pixels rows * % 定义框架集中列的数目和尺寸。 pixels cols 描述 值 属性 frameset cols=“25%,50%,*” rows =“50%,*” border=“5” frame src=“the_first.html …… /frameset 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 第一个窗口要显示的网页 规定在框架中显示的文档的 URL。 URL src 规定是否在框架中显示滚动条。 yes、no、auto scrolling 规定无法调整框架的大小。 noresize noresize 规定框架的名称。 name name 定义框架的左侧和右侧的边距。 pixels marginwidth 定义框架的上方和下方的边距。 pixels marginheight 规定一个包含有关框架内容的长描述的页面。 URL longdesc 规定是否显示框架周围的边框。 0、1 frameborder 描述 取值 属性 HTML HEAD TITLErows_cols框架/TITLE /HEAD FRAMESET rows=25%,50%,* border=5 FRAME name=“top src=the_first.html FRAME name=middle src=the_second.html FRAME name=“bottom src=the_third.html /FRAMESET /HTML 将窗口分割成上中下3部分 窗口边框的宽度 如果要在浏览器中创建左中右三个窗口,该如何实现？ 每个窗口对应一个页面，以及一个框架集页面，总共