Download
1 / 25
250 likes | 327 Views
湖北职院计科系. 教学内容 1 、演示并讲解用表格布局制作的网页 2 、用表格制作网页. 教学目的 1 、掌握表格的插入 2 、掌握单元格的相关操作 3 、用表格布局制作一个网页 4 、表格嵌套与叠加. 教学重点 1 、表格的插入 2 、单元格的相关操作. 教学难点 1 、表格的插入 2 、单元格的相关操作 3 、用表格布局制作一个网页. 引言： 在网页设计中适当的使用表格将不同性质和部分加以区分，不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。.
E N D
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页
教学目的 1、掌握表格的插入 2、掌握单元格的相关操作 3、用表格布局制作一个网页 4、表格嵌套与叠加
教学重点 1、表格的插入 2、单元格的相关操作
教学难点 1、表格的插入 2、单元格的相关操作 3、用表格布局制作一个网页
引言： 在网页设计中适当的使用表格将不同性质和部分加以区分，不但能使整个网页看起来整齐而且可读性增高。下面我们介绍表格的各种属性设定、如何在表格加入文字、图片等对象、表格标题以及利用表格来配置版面。
（一）演示并讲解用表格布局制作的网页 1、演示学完HTML后要完成的如图3-1中国茶吧网站中的网上商城页面。 图3-1 中国茶吧网站中网上商城页面
2、演示本次课要完成的用表格制作如图3-2的页面内容。2、演示本次课要完成的用表格制作如图3-2的页面内容。
（二）用表格制作图3-2页面的上部分内容，如下图（二）用表格制作图3-2页面的上部分内容，如下图 1、表格的建立 语法说明如下表：
2、制作一个一行三列的表格 （1）格式如下： <table border=1> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>
（2）在表格中加入属性 代码如下： <table cellSpacing=1 cellPadding=0 width="100%" bgColor=#ff9933 border=0> <tr> <td background=index_show.files/eshop_bar01_Y.gif height=25> <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr><td align=middle width=30><imgsrc="index_show.files/eshop_list02_Y.gif" > </td> <td><font color=#ff6600>今日推荐</font></td> <td align=right><font color=#ff6600>>></font> <a href="#" target=_blank><font color=#ff6600>更多</font></a></td> <td width=10></td> </tr>
</table> </td> </tr> </table> （3）效果如图3-3所示：
（4）知识点讲解 cellSpacing=1：设定表格内框线宽度为1； cellPadding=0：设定表格内文字与表格框线之间的间距为0； bgColor=#ff9933：设定背景颜色为橙色，它是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果； border=“0”：表示将表格的外框隐藏不显示； Tr是table row缩写，用来声明这是表格中水平线的开始。
语法： 1、表格的标题与表头 大部分的表格都会在表格的上面加上标题文字，让人能够 知道该表格的功用。在HTML中是通过<caption>标记来设定， 语法：<caption valign=“value1” align=“value2”>tblname </caption> 功能：当表格的标题或批注使用。 1)<caption>为成对标记，必须置于<table>标记范围内。 2)Tblname参数代表该表格的标题名称。 3)Valign属性：用来设定标题位置，可以和align属性连用， value1值如下： Top：将标题置于表格的上方（默认值）。 Bottom：将标题置于表格的下方。
4)Align属性：设定标题对齐方式，和valign属性一起连用，value2值如下：4)Align属性：设定标题对齐方式，和valign属性一起连用，value2值如下： Left：将标题置于左方。 Center：将标题置于中央（默认值）。 Right：将标题置于右方。 2、跨行合并 我们可在<td>或<th>标记中加入colspan（栏展开）的属性来做储存单元的合并，这个属性可用来控制储存单元的数目。它表示该储存单元要占用栏的宽度。属性值用数字表示。 3、跨列合并 我们可在<td>或<th>标记中加入rowspan（列展开）的属性来做储存单元的合并，这个可用来控制储存单元的数目。表示该储存单元要占用列（储存单元）的高度。属性值用数字表示。
代码如下： <table cellSpacing=0 cellPadding=0 width="100%" border=0> <tbody> <tr> <td background=index_show.files/eshop_shade02.gif height=5></td></tr> <tr> <td height=10></td></tr></tbody></table> <table cellSpacing=0 cellPadding=0 border=0> <tbody> <tr> <td><a href=“#" target=_blank><img height=120 alt=富贵吉祥 src="index_show.files/20066151584775663.jpg" width=160></A></td></tr>
<tr> <td height=6></td></tr> <tr> <td background=index_show.files/line_h_H02.gif height=1></td></tr> <tr> <td height=2></td></tr> <tr> <tr><td><font color=#333333>商城价格：</font><font color=#0000ff>651</FONT> <font color=#999999>(元/盒)</font></td></tr><td><font color=#333333>产品名称：</font><a title=富贵吉祥 href=“#" target=_blank><font class=bold color=#ff6600>富贵吉祥</font></a></td></tr> <tr> <td><font color=#333333>市场价格：</font><font color=#ff0000><STRIKE>1085</strike></font> <font color=#999999>(元/盒)</font></td></tr>
<tr> <td height=2></td></tr> <tr> <td background=index_show.files/line_h_H02.gif height=1></td></tr> <tr> <td height=6></td></tr> <tr> <td align=middle><a href=“#" target=_blank><IMG alt=购买该产品 src="index_show.files/eshop_buy01.gif" border=0></a></td></tr></tbody></table> </td></tr> <tr><td><img src="index_show.files/f0103.gif"></td></tr> </tbody></tbody></td><td width=5></td> <td width=180></td></tr> </table>
【小结】 最简单的表格仅包括行和列。任何表格都有三个基本要素：表行、表头和表项，每个要素都有自己的标签。表格是一行一行建立的，在每一行中填入该行每一列的表格数据。通过这次课我们对表格和单元格的属性有一定的的认识和了解，根据上述内容，我们再通过理论和实践相结合，多练习，多操作，对网页的制作中表格的操作有更深的理解。
【作业】 按实验内容完成网上的操作，完成实验报告，在实验报告中要求记录如下内容： 1、表格的几种属性； 2、用十六进制、英文单词写出六种颜色； 3、根据上述所讲内容完成如图所示（截图）的页面。（素材在D:\yhf\项目三：HTML表格与单元格标记的使用\网上商城\表格部分）页面为D:\yhf\项目三：HTML表格与单元格标记的使用\网上商城\表格部分\index_show.html的首页。
