商务网站页面设计技术.docx
- 文档编号:15925410
- 上传时间:2023-07-09
- 格式:DOCX
- 页数:57
- 大小:821.38KB
商务网站页面设计技术.docx
《商务网站页面设计技术.docx》由会员分享,可在线阅读,更多相关《商务网站页面设计技术.docx(57页珍藏版)》请在冰点文库上搜索。
商务网站页面设计技术
第5章表格
5.1表格元素
图5.1
和内容单元格标记 | 。 二、语法格式 |
---|---|
图5.2
五、【上机实践】
(一)输入源程序E5_2.htm,并通过浏览器查看运行效果。
(二)分析主要代码的功能,并进行修改后重新运行,观察不同属性的设置对显示效果的影响。
5.3表格单元
一、标记功能
这2个标记需要放在
二、语法格式
这2个标记的起始标记必须有,但是结尾标记是可选的。
不过我们提倡开始标记和结尾标记同时使用。
三、主要属性
表5.3
属性名称
属性值
属性说明(或功能)
rowspan
Size
该属性用来指定单元格所占的行数,即在垂直方向合并多少单元格(缺省值为1)
colspan
Size
该属性用来指定单元格所占的列数,即在水平方向合并多少单元格(缺省值为1)。
nowrap
——
该属性用来指定单元格内容不允许换行,否则单元格内容会随着浏览器窗口的缩小而自动换行
Width、heigtht
Size
该属性分别用来指定单元格宽度和高度,单位用绝对像素值或总长度的百分比
Bgcolor、bordercolor
colorvalue
该属性用来设置单元格的背景色和边框色
Align
left、center、right
该属性用来设置单元格内容的水平对齐方式,left(左对齐)、center(居中)、right(右对齐)
valigen
top、middle、bottom
该属性用来设置单元格内容的垂直对齐方式,top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)
四、【示例5.3】
本例子的功能是:
说明HTML文档的
有关的代码可参见下面的源程序文件E5_3.htm,在浏览器中的显示效果如图5.3所示。
【源程序清单:
E5_3.htm】
单元格占2行,且水平居中对齐
且垂直顶部对齐
且不允许在单元格换行
--未使用了字符实体 的空单元格-->
--使用了字符实体 的空单元格-->
1、【示例解析】
本例演示了空白单元格的处理:
一般来说,浏览器遇到无内容的空白单元格时,会将整个空白单元格隐藏起来,导致边框也不能够显示出来。
此时,如为了达到与正常单元格同样的显示效果,就需要在空白单元格中加入表示“空白”的字符实体“ ”。
2、【效果展示】本示例的显示效果如图5.3所示。
图5.3
五、【上机实践】
(一)输入源程序E5_3.htm,并通过浏览器查看运行效果。
(二)分析主要代码的功能,并进行修改后重新运行,观察不同属性的设置对显示效果的影响。
5.4表格行编组(thead、tfoot、tbody)
一、标记功能
利用这些元素将一些特定功能的行赋予特殊的含义,并编成一组。
标记可将一些行定义为当前表格的题注,
如果表格中没有和
标记,则标记可以省略。表格行编组后,可以对组中各行的属性,如“对齐、背景色”等进行统一设置,也可减少代码的数量。
二、语法格式
标记的语法格式为: 若干…… 标记对,
这3个标记的起始标记必须有,但是结尾标记是可选的。
不过我们提倡开始标记和结尾标记同时使用。
每一个、
、标记必须至少包含一个三、主要属性
、
、标记的主要属性及其取值如表5.4所示。表5.4、
、标记的主要属性定义属性名称
属性值
属性说明(或功能)
align
left(左对齐)、center(居中)、right(右对齐)
该属性用来设置行编组所有单元格的水平对齐方式
valign
top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)
该属性用来设置行编组所有单元格的垂直对齐方式
Bgcolor
colorvalue
该属性用来设置行编组所有单元格的背景色
四、【示例5.4】
本例子的功能是:
说明表格行编组标记及主要属性的使用方法。
有关的代码可参见下面的源程序文件E5_4.htm,在浏览器中的显示效果如图5.4所示。
【源程序清单:
E5_4.htm】
1、【示例解析】
虽然在编写代码时,、
和3个标记必须按照先后顺序书写,但在显示时作为脚注的部分仍然会出现在表格的尾部。打印含有表格的页面时,如果一个表格的长度超出打印页面的范围,则浏览器打印工具会在每页表格的顶部和尾部都加上和
定义的题注和尾注。2、【效果展示】本示例的显示效果如图5.4所示。
图5.4表格行编组标记及主要属性的使用
五、【上机实践】
(一)输入源程序E5_4.htm,并通过浏览器查看运行效果。
(二)分析主要代码的功能,并进行修改后重新运行,观察不同属性的设置对显示效果的影响。
5.5表格列编组(col、colgroup)
一、标记功能
其内部可以包含列标记
二、标记语法
三、主要属性
表5.5
属性名称
属性值
属性说明(或功能)
span
Size
该属性对于
如果
width
绝对像素值或总长度的百分比
该属性对于
Align
left、center、right
该属性用来设置列组内单元格内容的水平对齐方式,left(左对齐)、center(居中)、right(右对齐)
valigen
top、middle、bottom
该属性用来设置列组内单元格内容的垂直对齐方式,top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)
四、【示例5.5】
本例子的功能是:
说明表格列编组标记及主要属性的使用方法。
有关的代码可参见下面的源程序文件E5_5.htm,在浏览器中的显示效果如图5.5所示。
【源程序清单:
E5_5.htm】
--这个表格的属性rules=groups,即只显示组分隔线-->
width="80%"bordercolor="blue"bgcolor="#C0C0C0"align=center> --下一行代码表示表格标题,位于底部--> --下一行代码表示前2列为一组,并分别设置了各列的宽度-->
--下一行代码表示前2列为一组,各列的宽度都为200px-->
语文 数学 英语 计算机
图5.5表格列编组标记及主要属性的使用
五、【上机实践】
(一)输入源程序E5_5.htm,并通过浏览器查看运行效果。
(二)分析主要代码的功能,并进行修改后重新运行,观察不同属性的设置对显示效果的影响。
5.6表格标题
一、标记功能
标题不会显示在表格内部,而是出现在表格的顶部或底部。
二、语法格式
它必须放在
三、主要属性
表5.6
属性名称
属性值
属性说明(或功能)
Align
left、center、right
该属性用来设置标题内容的水平对齐方式,left(左对齐)、center(居中)、right(右对齐)
valigen
top、bottom
该属性用来设置标题内容位于表格的顶端或底部。
top(靠顶端对齐)、bottom(靠底部对齐)
有关表格标题的例子请参见【示例5.5】,这里不再列举。
5.7本章小结
5.8作业题(参考答案见chp5_zy.htm)
1、设计一个3行3列表格,要求其背景、亮边框和暗边框分别用不同颜色表示,并且仅显示上边框。
参考效果图如下。
2、设计一个3行3列表格,要求使用背景图片,其亮边框和暗边框分别用不同颜色表示,并且仅显示上下边框。
参考效果图如下。
3、设计一个1行2列表格,要求每个单元格嵌套一个3行3列。
嵌套的表格要分别实现行列编组和标题功能,并仅显示行列分组线。
参考效果图如下。
第6章表单
6.1表单简介
一、表单功能
HTML表单在制作动态网站方面起着非
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商务 网站 页面 设计 技术