chapter4表格框架层.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网页设计与制作,网页元素的定位,表格、框架、层,学习目标,理解页面版式设计的基本原则。,理解和掌握,如何在网页中利用表格、布局、层和框架来规划和设计页面。,掌握构造表格和设置表格属性的方法。熟练掌握应用表格设计网页布局的方法。,了解和掌握使用框架设计网页布局的方法。,了解和掌握使用层设计网页布局的方法。,什么是页面版式,设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。,在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。,版式在网页界面中的作用,网页界面的版式设计，是指将文字、图形图像、色彩、动画、视频多媒体等网页对象的传达要素，根据特定内容和主题，在网页限定范围内将设计意图以视觉形式表现出来。,版式在网页界面中的作用,从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。,在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。,版式的实用功能,主次分明、重点突出,应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握。,导航清晰、便于浏览,网页应该具有一致风格的导航系统，为用户浏览提供方便,布局合理、逻辑性强,应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯,。,版式的审美功能,统一，是指设计作品的整体性、一致性。,分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。,对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。,版式布局的样式,“同”字型结构布局,“,T”,字型结构布局,标题正文型,左右框架型,上下框架型,综合框架型,封面型,Flash,型,变化型,布局的过程,1.,设定页面尺寸,分辨率,800 x600,像素，页面显示尺寸为,780 x428,像素；,分辨率,1024x768,像素，页面显示尺寸为,1007x600,像素。,2.,放置功能模块,3.,布局细化与调整,表格的组成,表格标记符,table,表格标题,caption,表格行,tr,（,table row,）,表格数据,td,（,table data,）,表格表头,th,（,table heading,）,注：,td,和,th,的结束标记符都可以省略，并且可以不包含任何内容。,表格的构造,在,TH,或,TD,标记符中使用,rowspan,属性进行行合并,在,TH,或,TD,标记符中使用,colspan,属性进行列合并,构造表格的步骤,1.,使用,table,标记符包括所有表格内容，如果需要标题，则在,后使用,caption,标记符。,2.,从第一行开始，使用,tr,标记符分隔每一行。,表格有多少行，就应该有多少个,tr,标记符。,3.,在每一行内，一次用,th,或,td,标记符标记每个单元格的内容。如果碰到跨行的单元格，则用,rowspan,属性进行标记；如果碰到跨列的单元格，则用,colspan,属性进行标记。,4.,按照步骤,3,顺序一行一行处理，直到表格结束。如遇空单元格，只需使用空的,th,或,td,标记符即可。,表格与布局表格的基本操作,插入表格,1.,表格大小,边框粗细、单元格边距、单元格间距的设置,2.,页眉与辅助功能,表格与布局表格的基本操作,选择表格对象,1.,选择表格,2.,选择单个单元格,3.,选择整行或整列,4.,选择相邻的多个单元格,5.,选择不相邻的单元格,表格与布局表格的基本操作,表格的属性,1.,表格名称（表格,Id,）,2.,行和列,3.,宽和高,4.,边框,5.,填充和间距,6.,对齐：左对齐、右对齐、,居中对齐,7.,背景颜色和图像,表格与布局表格的基本操作,调整表格结构,1.,插入单行或单列,2.,插入多行或多列,3.,删除行或列,4.,单元格的拆分与合并,表格与布局表格的基本操作,设置单元格属性,1.,设置单元格宽度与高度,2.,对齐设置,3.,将单元格转换为表头,表头是特殊的单元格，它和单元格的区别在于其中的文字自动变成粗体，而且位于单元格中央。,表格与布局表格的基本操作,嵌套表格,利用多个嵌套的表格，外部的大表格负责整体的布局，内部的小表格负责各个板块的排版。,表格与布局表格的基本操作,导入表格化数据,文件导入表格式数据,从,Excel,文件中导入数据，可先把,Excel,工作表文件保存为,.txt,文件。,套用现成格式,命令格式化表格,表格与布局表格的基本操作,水平细线,有时我们需要在网页上加入一条细线，可以使用更加通用的表格来实现它。,1.,插入表格,2.,创建间隔图像,间隔图像,实际就是一张透明的,GIF,格式的图片。,编辑首选参数布局模式站点的间隔图像创建,该图像的文件名默认为,spacer.gif,3.,插入间隔图像,布局视图排版,布局视图,要使用布局视图，必须首先切换到布局视图中,！,绘制布局表格和布局单元格,1.,绘制布局表格,2.,绘制布局单元格,注意：,布局单元格不能在布局表格之外，同一个布局表格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。,调整布局表格和布局单元格,1.,选择布局表格和布局单元格,2.,调整布局表格和布局单元格大小,3.,移动布局表格和布局单元格,4.,修改布局表格和布局单元格属性,表格的应用技巧,强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！,1.,使用表格还是单元格,2.,使用百分比还是像素,3.,使用一个大表格还是多个横向表格,表格布局的综合应用,设置各种细线效果,1.,表格框线,制作要点：,将,table,标记符的,bgcolor,属性设置为要显示的颜色，将,table,标记符的,cellspacing,属性设置为细线的粗细（通常为“,1”,），将单元格或表格行的,bgcolor,属性设置为不同于表格,bgcolor,的值。,表格布局的综合应用,设置各种细线效果,2.,横竖分隔线,制作要点：,将,table,标记符的,cellspacing,属性和,cellpadding,属性都设置为“,0”,，将要作为细线的单元格的,bgcolor,属性设置为细线的颜色，将该单元格的,width,属性,（,竖线）或,height,属性,（,横线）设置为细线的粗细（通常为“,1”,），注意该单元格中不能有任何内容（包括空格）。,表格布局的综合应用,表格布局的综合实例,什么是框架,在同一个浏览器窗口中同时显示多个网页的交互式结构。,通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。,通常，一个框架,Web,页由框架集、组内各框架、各框架内的网页组成。,框架的基本操作,创建框架集（指定框架结构）,在框架集网页中不包含任何可显示的内容，而只是包含如何组织各个框架的信息和框架中的初始页面信息。,插入,框架,框架的基本操作,在,框架集网页中，除了基本的,html,，,head,等标记符以外，主要包括框架集标记,符,frameset,（,必须有结束标记符）和框架标记符,frame,（,没有结束标记符）,框架结构,框架集,定义框架的结构,框架,具体定义每个页面,框架的基本操作,一个典型的框架集网页如下：,框架集网页,注意：在,html,文档中，如果包含了,frameset,标记符，,则不能再包含,body,标记符，反之亦然。,框架的基本操作,框架集的定义,Rows,定义行结构框架,Cols,定义列结构框架,Rows,和,cols,的取值：,像素数,%,百分数,N*,（,其中,N,是,1,的整数）,框架的基本操作,Rows,和,cols,的取值：,N*,当属性值为,N*,时，表示框架的大小为由前两种方法指定框架大小后浏览器剩余的部分。,指定属性值时，值之间用“，”号隔开并且不能有空格，根据值的个数和设置来确定框架数目和位置。,如：,cols=“30%,*”,表示左边框架占浏览器窗口宽度的,30%,，右边框架占剩余部分（也就是,70%,）,如果取值包括多个,N*,，,那么,N*,表示框架之间的比例关系。,如：“,1*,，,2*,，,3*”,表示最左,(,上,),边的框架占窗口宽度,(,高度,),的,1/6,，中间的框架占窗口宽度,(,高度,),的,1/3,，最右,(,下,),边的框架占窗口宽度,(,高度,),的,1/2,。,框架的基本操作,框架的初始化,在,frame,标记符中使用,src,属性可以指定框架中最初显示的页面。,框架的基本操作,超链接的目标框架,所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。,框架的基本操作,设置目标框架,使用,指定框架名称,特殊的框架名称,_blank,表示打开新的窗口,_top,表示返回顶层窗口,在超链接标记符,A,中指定,target,属性，取值,为具体的框架名称。,什么是层,层是,一种,HTML,页面元素，它可以自由移动，显示或隐藏，同时还可以相互嵌套，叠加，在很大程度上弥补了表格排版的不足。,层可以包含文本、图像或其他任何可在,HTML,文档正文中放入的内容。,什么是层,DW,中的层是指具有绝对或相对位置的,div,标签，这里说的层属于,DW,的,布局概念，而不是,layer,标签。,层可以包含文本、图像或其他任何可在,HTML,文档正文中放入的内容。,DW,中默认使用,div,标签来创建层。,什么是层,layer,和,ilayer,两种标签也可以创建层，但是只有,Netscape Navigator 4,支持，,IE,不支持，,Netscape,在,较新的浏览器中也不再支持；在,DW,中可以识别，但不使用。,div,和,span,标签之间的区别在于：,不支持层的浏览器在,div,标签的前后放置额外的换行符。,也就是说，,div,标签是块级别的元素，而,span,标签则是内联元素。,层的基本操作,层的,创建,为了便于选择层，最好在页面中显示层锚记。,F2,显示层面板，是文档中层的可视图。,层的调整与移动,调整层大小、移动层,单击层的边框选中,层的基本操作,在层中添加内容,可在层中插入文字、图像、表格等对象,创建嵌套层,使用菜单命令：插入,|,布局对象,|,层,嵌套层的明显标志是子层图标出现在母层中。,使用工具：直接绘制嵌套层，需要进行设置。,首选参数,|,层,|“,如果在层中则使用嵌套”,层的基本操作,层面板 可对层进行全面管理,显示,/,隐藏层：单击左侧的眼睛图标,修改层名称：给层添加行为时需要给层命名,修改,Z,轴顺序：,Z,轴作用是排定各个层之间的叠加顺序。,Z,轴数值大的层就在数值小的层上面，覆盖数值小的层。,创建嵌套层：在面板中按住,ctrl,的同时拖动某个层的名称到其他层的名称之上。,层的基本操作,设置层的属性,层编号：每个层都必须有自己惟一的层编号,可见性：,default,（,默认）,inherit,（,继承）,visible,（,可见）,hidden,（,隐藏）,使用层排版,层在,排版上的作用主要体现在：,先用层创建网页的轮廓，然后再将层转换为表格。,防止重叠：层排版最终要转换为表格，层就不能有嵌套，不可以相互叠加。窗口,|,层,|,防止重叠,层的对齐,层转换为表格 修改,|,转换,|,层到表格,层上的行为,层有两个很重要的特性：能够拖动，能显示或隐藏。利用这两个特性可以实现很多动态特效。,拖动层：利用层可以移动的特点，允许浏览者自己拖动网页上的层。,显示和隐藏层,总结与提高,在,DW,的,新网页上输入文字时，不能随便控制文字的输入位置。可先在新页面上插入一张居中对齐的表格，最好设定为奇数列，并且数值不要太大，然后在单元格中输入文字就可以控制了。,要使图片和表格接触的地方不留空隙，仅在表格属性面板中把外框线设为,0,是不行的，还需要把单元格的两个属性设置为,0,。,（即,cellspacing,=“0”,和,cellpadding,=“0”,）,总结与提高,解决,DW,中表格里的背景不能预览问题。只要把背景图设置在,里就,可以显示了。如果设置在,里就不能预览。,按住,Alt,键的同时在文档编辑窗口内单击某个框架，即可选中该框架；单击框架边框，即可选中框架集。,在框架页面中显示被选中的框架时，其边框都由圆点直线包围。,总结与提高,若要从另一个层中开始绘制层时自动嵌套层，要选择,【,层,】,首选参数中的,【,嵌套,】,选项。,如果已启用,【,防止重叠,】,选项，那么在移动层时将无法使层相互重叠。,在把层转换为表格之前，必须使层不发生重叠。原因是表格布局具有,Z,轴的特性。,上机实训,1.,制作如图所示的页面。,上机实训,2.,制作如图所示的页面。,