网页制作2 --Chapter2 Html表和层.pptVIP

Author:Jedda HTML表和层 回顾 使用基本标记 标题标记 段落级标记 块标记 字符级标记 列表 水平标尺标记 字体标记 在 HTML 文档中插入图像 目标 使用表 使用层 本章任务 制作“宝贝分类”页面 制作“公告栏”页面 本章目标 会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰 表格的基本语法 如何创建表格 跨多列的表格 跨多行的表格 如何创建跨行跨列的表格 小结1 编写如下图所示效果对应的html代码 如何设置表格的尺寸和边框 如何设置背景 如何设置对其方式 为什么要使用填充属性 单元格里的内容太靠近边线，怎么办？ 什么是填充属性和间距属性 如何使用填充、间距属性 如何设置表格的填充属性 小结2 编写如下图所示效果对应的HTML代码 如何使用表格进行布局 如何使用表格进行布局 小结3 编写如下图所示效果对应的html代码 层简介 使用多个层，可以将一个层放到另一个层的上面或下面。 Z 顺序决定元素的显示顺序。 层就像一个包含内容的框架，可以将它放置在所需的位置。 使用层 在Web页中插入层时，可以使用四种标记进行设置：div，span，layer和ilayer。 Internet Explorer 4.0和Netscape Navigator 4.0及以上版本都支持使用div和span标记创建的层。 只有Navigator 4.0版本支持使用layer和ilayer创建的层。 创建层 下面的代码是一个使用 DIV 标记的示例: DIV top = 25 ID=layer1 PFont color = limegreen size = 4B层 1 /B /FONT/P /DIV 使用表格和层进行页面布局 总结： 使用HTML标记创建表格，并通过相关的属性设置表格的格式。 COLSPAN和ROWSPAN属性用于设置跨列和跨行的单元格。 层就像一个包含内容的框架，可以将它放到HTML文档中所需的位置。 在HTML文件中插入多媒体。 使用表格布局下图，需要几行几列？ 需要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 查看源代码 跨2行，并放了一副图片 此单元格放了一副图片 此单元格跨了3列 练习答案 练习代码 Version 3.0 * * Version 3.0 为什么使用表格 表格应用场合 论坛 门户网站 购物网站 论坛中应用表格 门户网站应用表格 购物网站应用表格 表格的基本结构 行 列 单元格 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 TABLE border=1 TR TD 单元格内容 /TD …… /TR …… /TABLE TABLE.../ TABLE 定义表格 TD…/TD 定义列 TR…/TR 定义行 border用来设置表格边框尺寸大小 TABLE border=2 TR TD移动/TD TD联通/TD TD铁通/TD /TR TR TDIBM /TD TD惠普/TD TD华硕/TD /TR /TABLE 查看源代码 什么是跨行跨列的表格 跨3列 跨3行 下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列? TABLE border=2 TR TD colspan=3学生成绩表/TD /TR TR TD 英语/TD TD 数学/TD TD 语文/TD /TR TR TD95/TD TD98/TD TD89/TD /TR /TABLE COLSPAN=“n” 属性表示跨多少列？ 查看源代码 TABLE border=1 TR TD rowspan=“3” 早上菜谱 /TD TD 食物/TD TD 鸡蛋/TD /TR TR TD 饮料/TD T