html制作网页必看入门知识二.ppt

回顾 HTML标签区分大小写吗？ HTML的基本结构并说明各部分的含义。 页面链接有几种？分别用在什么场合？ 超链接的基本格式及其各部分的含义。 预习检查 请叙述表格是由哪两部分组成？ 创建一个表格必须需要哪些标签？ 本章任务 制作“宝贝分类”页面 制作“公告栏”页面 本章目标 会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰 表格的基本语法 如何创建表格 跨多列的表格 跨多行的表格 如何创建跨行跨列的表格 小结1 编写如下图所示效果对应的html代码 如何设置表格的尺寸和边框 如何设置背景 如何设置对其方式 为什么要使用填充属性 单元格里的内容太靠近边线，怎么办？ 什么是填充属性和间距属性 如何使用填充、间距属性 如何设置表格的填充属性 小结2 编写如下图所示效果对应的HTML代码 如何使用表格进行布局 如何使用表格进行布局 小结3 编写如下图所示效果对应的html代码 沃克科技 第二章 表格基础 为什么使用表格 表格应用场合 论坛 门户网站 购物网站 论坛中应用表格 门户网站应用表格 购物网站应用表格 表格的基本结构 行 列 单元格 在 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 TD 牛奶/TD /TR TR TD甜点/TD TD开心粉/TD /TR /TABLE rowspan =“n” 属性表示跨多少行？ 查看源代码 TABLE border=1 TR TD手机充值、IP卡 /TD TD colspan=2办公设备、文具/TD /TR TR TD rowspan=2各种卡的总汇/TD TD铅笔/TD TD彩笔/TD /TR TR TD打印/TD TD刻录/TD /TR /TABLE 查看源代码 第一行第一个格子跨了2行 此格子跨了3列 练习答案 练习代码 什么是表格的美化修饰 背景图片 背景色 表格的高度 表格的宽度 文字对 齐方式 根据理解,下面表格应该从哪些方面进行美化修饰？ TABLE width=“400” height=“200” border=“15” bordercolor=red TR TD colspan=4 品牌商城/TD /TR TR TD colspan=2 笔记本电脑/TD TD colspan=2 办公设备、文具、耗材/TD /TR TR TD 惠普/TD TD 华硕/TD TD 打印机/TD TD 刻录盘/TD /TR /TABLE width用来设置表格的宽度 height用来设置表格的高度 border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 查看源代码 TABLE background=“images/type_back.jpg” width=“360 height=120 border=2 TR TD colspan=6nbsp;/TD /TR TR bgcolor=#EBEFFF TD colspan=3 笔记本电脑/TD