网页设计与制作项目教程单元4-表格与表格布局网页的制作.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《网页设计与制作项目教程单元4-表格与表格布局网页的制作.pptx》由用户(三亚风情)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 项目 教程 单元 表格 布局
- 资源描述:
-
1、汤智华汤智华 主编主编王爱红王爱红 主审主审【教学导航】【教学导航】教学目标教学目标(1 1)学会正确地插入表格,并合理地设置表格的属性)学会正确地插入表格,并合理地设置表格的属性(2 2)学会正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性)学会正确地在表格中插入嵌套表格,并合理地设置嵌套表格的属性(3 3)掌握单元格的合并、拆分的操作方法,行、列的插入和删除的操作方法)掌握单元格的合并、拆分的操作方法,行、列的插入和删除的操作方法(4 4)学会正确地设置表格中行和列的属性)学会正确地设置表格中行和列的属性(5 5)学会正确设置表格、单元格的背景图像和背景颜色)学会正确设置表格、单元格
2、的背景图像和背景颜色(6 6)学会正确地在表格中输入文字)学会正确地在表格中输入文字(7 7)学会正确地在表格中插入图像)学会正确地在表格中插入图像(8 8)学会制作流行的细线表格的方法)学会制作流行的细线表格的方法(9 9)学会设置滚动文本效果的方法)学会设置滚动文本效果的方法(1010)能使用表格布局网页,能正确理解适合表格布局的含义)能使用表格布局网页,能正确理解适合表格布局的含义本单元重点本单元重点(1 1)插入表格、设置表格的属性)插入表格、设置表格的属性(2 2)合并或拆分单元格)合并或拆分单元格(3 3)设置表格、单元格的背景图像和背景颜色)设置表格、单元格的背景图像和背景颜色(
3、4 4)在表格中输入文字、插入图像)在表格中输入文字、插入图像(5 5)制作流行的细线表格)制作流行的细线表格(6 6)使用表格布局网页)使用表格布局网页本单元难点本单元难点(1 1)在表格中插入嵌套表格,并设置嵌套表格的属性)在表格中插入嵌套表格,并设置嵌套表格的属性(2 2)设置滚动文本效果)设置滚动文本效果教学方法教学方法任务驱动法、分组讨论法任务驱动法、分组讨论法4.1 4.1 表格表格一、创建表格一、创建表格1 1为什么要应用表格为什么要应用表格 日常生活中,为了清晰地显示数据或信息,常常使用表格对数据日常生活中,为了清晰地显示数据或信息,常常使用表格对数据或信息进行统计,同样在制作
4、网页时,为了使网页中的元素有条理地或信息进行统计,同样在制作网页时,为了使网页中的元素有条理地显示,也需要使用表格对网页进行规划。显示,也需要使用表格对网页进行规划。【说明】【说明】表格标签既适合制作表格,也可用适当用于网页布局。表格标签既适合制作表格,也可用适当用于网页布局。虽然,使用表格进行网页布局的方法已被摒弃。虽然,使用表格进行网页布局的方法已被摒弃。2 2创建表格的基本语法创建表格的基本语法 创建表格的基本语法格式如下:创建表格的基本语法格式如下:单元格内的文字单元格内的文字 运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-14-1所示。所示。图图4-1 表格的定
5、义方法表格的定义方法二、二、标记标记 大多数大多数HTMLHTML标记都有相应的属性,用于为元素提供更多的信息,标记都有相应的属性,用于为元素提供更多的信息,标记也不例外,标记也不例外,HTMLHTML语言为其提供了一系列的属性,用于控语言为其提供了一系列的属性,用于控制表格的显示样式。制表格的显示样式。(1 1)borderborder属性:在属性:在标记中,标记中,borderborder属性用于设置表格的边框,属性用于设置表格的边框,默认值为默认值为0 0。(2 2)cellspacingcellspacing属性:属性:cellspacingcellspacing属性用于设置单元格与单
6、元格边框之属性用于设置单元格与单元格边框之间的空白间距,默认为间的空白间距,默认为2px2px。(3 3)cellpaddingcellpadding属性:属性:cellpaddingcellpadding属性用于设置单元格内容与单元格边属性用于设置单元格内容与单元格边框之间的空白间距,默认为框之间的空白间距,默认为1px1px。(4 4)widthwidth与与heightheight属性:默认情况下,表格的宽度和高度靠其自身的属性:默认情况下,表格的宽度和高度靠其自身的内容来支撑。内容来支撑。(5 5)alignalign属性:用于定义元素的水平对齐方式,其可选属性值为属性:用于定义元素的
7、水平对齐方式,其可选属性值为leftleft、centercenter、rightright。(6 6)bgcolorbgcolor属性:用于设置表格的背景颜色。属性:用于设置表格的背景颜色。(7 7)backgroundbackground属性:用于设置表格的背景图像。属性:用于设置表格的背景图像。三、三、标记标记 通过对通过对标记应用各种属性,可以控制表格的整体显示样式,标记应用各种属性,可以控制表格的整体显示样式,但是制作网页时,有时需要表格中的某一行特殊显示,这时就可以为但是制作网页时,有时需要表格中的某一行特殊显示,这时就可以为行标记行标记定义属性,其常用属性如下。定义属性,其常用属
8、性如下。(1 1)heightheight:设置行高度,常用属性值为像素值。:设置行高度,常用属性值为像素值。(2 2)alignalign:设置一行内容的水平对齐方式,常用属性值为:设置一行内容的水平对齐方式,常用属性值为leftleft、centercenter、rightright。(3 3)valignvalign:设置一行内容的垂直对齐方式,常用属性值为:设置一行内容的垂直对齐方式,常用属性值为toptop、middlemiddle、bottombottom。(4 4)bgcolorbgcolor:设置行背景颜色,预定义的颜色值、十六进制:设置行背景颜色,预定义的颜色值、十六进制#R
9、GB#RGB、rgb(r,g,b)rgb(r,g,b)(5 5)backgroundbackground:设置行背景图像,:设置行背景图像,urlurl地址。地址。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-24-2所示。所示。图图4-2 行标记行标记的常用属性的常用属性四、四、标记标记(1 1)widthwidth:设置单元格的宽度,常用属性值为像素值。:设置单元格的宽度,常用属性值为像素值。(2 2)heightheight:设置单元格的高度,常用属性值为像素值。:设置单元格的高度,常用属性值为像素值。(3 3)alignalign:设置单元格内容的水平对齐方式,常
10、用属性值为:设置单元格内容的水平对齐方式,常用属性值为leftleft、centercenter、rightright。(4 4)valignvalign:设置单元格内容的垂直对齐方式,常用属性值为:设置单元格内容的垂直对齐方式,常用属性值为toptop、middlemiddle、bottombottom。(5 5)bgcolorbgcolor:设置单元格的背景颜色,常用属性值为预定义的颜色:设置单元格的背景颜色,常用属性值为预定义的颜色值、十六进制值、十六进制#RGB#RGB、rgb(r,g,b)rgb(r,g,b)。(6 6)backgroundbackground:设置单元格的背景图像,
11、常用属性值为:设置单元格的背景图像,常用属性值为URLURL地址。地址。(7 7)colspancolspan:设置单元格横跨的列数(用于合并水平方向的单元:设置单元格横跨的列数(用于合并水平方向的单元格),常用属性值为正整数。格),常用属性值为正整数。(8 8)rowspanrowspan:设置单元格竖跨的行数(用于合并竖直方向的单元:设置单元格竖跨的行数(用于合并竖直方向的单元格),常用属性值为正整数。格),常用属性值为正整数。与与标记不同的是,可以对标记不同的是,可以对标记应用标记应用widthwidth属性,用于指属性,用于指定单元格的宽度,同时定单元格的宽度,同时标记还拥有标记还拥有
12、colspancolspan和和rowspanrowspan属性,用于属性,用于对单元格进行合并。对单元格进行合并。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4-34-3所示。所示。图图4-3 单元格的合并(垂直相邻)单元格的合并(垂直相邻)五、五、标记标记 应用表格时经常需要为表格设置表头,以使表格的格式更加清晰,应用表格时经常需要为表格设置表头,以使表格的格式更加清晰,方便查阅。方便查阅。设置表头非常简单,只需用表头标记设置表头非常简单,只需用表头标记替代相应的单元替代相应的单元格标记格标记即可。即可。运行完整的案例代码,得到效果如图运行完整的案例代码,得到效果如图4
13、-54-5所示。所示。图图4-5 表头标记表头标记th(使用前)(使用前)六、表格的结构六、表格的结构 为了使搜索引擎更好地理解网页内容,在使用表格进行布局时,为了使搜索引擎更好地理解网页内容,在使用表格进行布局时,可以将表格划分为表格标题、头部、主体和页脚等结构,用于定义网可以将表格划分为表格标题、头部、主体和页脚等结构,用于定义网页中的不同内容,划分表格结构的标记如下。页中的不同内容,划分表格结构的标记如下。(1 1):用于定义表格标题。:用于定义表格标题。标签必须标签必须紧随紧随标签之后。您只能对每个表格定义一个标题。通常这个标标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中
14、于表格之上。题会被居中于表格之上。(2 2):用于定义表格的头部,必须位于:用于定义表格的头部,必须位于 标记中,一般包含网页的标记中,一般包含网页的logologo和导航等头部信息。和导航等头部信息。(3 3):用于定义表格的页脚,位于:用于定义表格的页脚,位于标记中标记中标记之后,一般包含网页底部的企业信息等。标记之后,一般包含网页底部的企业信息等。(4 4):用于定义表格的主体,位于:用于定义表格的主体,位于标记中标记中标记之后,一般包含网页中除头部和底部之标记之后,一般包含网页中除头部和底部之外的其他内容。外的其他内容。4.2 4.2 表格布局表格布局 由于表格布局只适用形式单调,内容
15、也比较简单的网页,因此这由于表格布局只适用形式单调,内容也比较简单的网页,因此这里只需了解即可。里只需了解即可。其布局方法是:在相应的单元格中插入各种元素即可,无论是文其布局方法是:在相应的单元格中插入各种元素即可,无论是文字、图像等元素。字、图像等元素。4.3 CSS4.3 CSS控制表格样式控制表格样式 定义无序或有序列表时,可以通过标记的属性控制列表的项目符定义无序或有序列表时,可以通过标记的属性控制列表的项目符号,但是这种方式实现的效果并不理想,这时就需要用到号,但是这种方式实现的效果并不理想,这时就需要用到CSSCSS中一系中一系列的列表样式属性。列的列表样式属性。一、一、CSSCS
16、S控制表格边框样式控制表格边框样式 使用边框样式属性使用边框样式属性borderborder设置表格边框时,要特别注意单元格边设置表格边框时,要特别注意单元格边框的设置。框的设置。运行案例代码,得到效果如图运行案例代码,得到效果如图4-74-7所示。所示。接着,给单元格单独设置相应的边框样式,具体代码如下:接着,给单元格单独设置相应的边框样式,具体代码如下:td,thborder:1px solid#F00;/td,thborder:1px solid#F00;/*为单元格单独设置边框为单元格单独设置边框*/保存文件,刷新网页,效果如图保存文件,刷新网页,效果如图4-84-8所示。所示。图图4
17、-7 CSS控制表格边框样式控制表格边框样式01 图图4-8 CSS控制表格边框样式控制表格边框样式02 最后,去掉单元格之间的空白距离,制作细线边框效果,具体代最后,去掉单元格之间的空白距离,制作细线边框效果,具体代码如下所示:码如下所示:tabletable width:400px;width:400px;height:150px;height:150px;border:1px solid#F00;/border:1px solid#F00;/*设置设置tabletable的边框的边框*/border-collapse:collapse;/border-collapse:collapse;
展开阅读全文