湖北职院计科系
实验内容 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用
实验目的 1、能熟练完成项目一HTML中基本标记的应用实例 2、能熟练完成项目二表格的应用实例
实验重点 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用
实验难点 1、表格属性的应用
（一）演示二个项目效果图 1、项目一 基本标记的应用实例 2、项目二 表格属性应用实例
（二）演示项目一中三个子项目效果图 1、页面中文字插入的应用实例效果图 2、图片插入的应用实例效果图 3、按钮图标的制作实例
（三）演示并与学生一起完成三个子项目 1、页面中文字插入的应用实例的实验步骤 （1）打开已经输入的html文件的基本结构的记事本； （2）在<title></title>之间输入网页标题“HTML表格及元素的添加”； （3）我们将文件保存到D盘，文件夹名为网页设计，文件名为H2_01.html，文件类型为所有文件； （4）打开D盘网页设计文件夹中的H2_01.html文件，大家可以看到标题栏上有“HTML表格及元素的添加”的标题；
（5）打开“查看”菜单“源代码”，在<body></body>中输入文字“御茶园茶业>网上商城”； （6）再一次保存，然后“刷新”页面；大家先完成在页面中添加文字这部分内容，老师来检查完成情况。 （7）打开“查看”菜单“源代码”，在文字“御茶园茶业”前加上<font size=14><b>，后面加上</b></font>，设置文字为粗体，并且字号设置成14px； （8）保存后刷新页面；
（9）打开“查看”菜单“源代码”，在文字“网上商城”前加上<font size=14 color=”#ff6600”><b>，在后面加上</font></b>，设置文字为粗体，并且字号设置为14px，颜色为橙色； （10）刷新后第一个子项目已完成。效果如下图：
2、图片插入的应用实例的实验步骤 （1）前三步同上。 （2）在<body></body>中插入<table></table>表格标记； （3）在<table></table>表格标记中插入<tr></tr>行标记； （4）在<tr></tr>行标记中插入<td></td>标记； （5）在<td>标记中，输入“background=图片地址” height=180px； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_02.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_02.html文件，预览网页效果； （8）打开“查看”菜单“源文件”； （9）在<table>标记中输入“cellPadding=0 cellSpacing=0 border=0 width=710”； （10）再一次保存页面。
3、按钮图标的制作实例实验步骤： （1）前三步同上。 （2）先做一个按钮； （3）在<table></table>表格标记中插入<tr></tr>行标记； （4）在<tr></tr>行标记中插入<td></td>标记； （5）在<td></td>中输入“茶艺用品”<td>标记中，输入background=“图片地址” align=middle width=80 height=22； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_03.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_03.html文件，预览网页效果； （8）打开“查看”菜单“源文件”；
（9）在<table>标记中输入“cellPadding=0 cellSpacing=0 border=0”； （10）在文字“茶艺用品”的前面加上<a>，在后面加上</a> （11）刷新网页； (12）其它几个按钮的代码同（5）至（10）步，只是文字内容有变化。 强调：先设计好，表格中的列数，即<td></td>的个数。 第一个项目实验步骤 第二个项目实验步骤
（四）演示项目二的效果图 根据我提供的HTML文件，大家修改得出最终效果。
（五）提供代码、学生填空、纠错完成实验内容。 1、嵌套表格的部分步骤及代码（图片素材在d:\wysj\images目录下）。 （1）前三步同上。 （2）在<body></body>中插入<table></table>表格标记； （3）在<table></table>表格标记中插入<tr></tr>行标记； （4）在<tr></tr>行标记中插入<td></td>标记； （5）在<td>标记中，输入“background=图片地址” height=25； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_04.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_04.html文件，预览网页效果； （8）打开“查看”菜单“源文件”；
（9）在<table>标记中输入“cellPadding=0 cellSpacing=1 border=0 width=100% bgcolor=”#ff9933”； （10）再一次保存页面。 （11）在<td></td>之间插入<table cellSpacing=0 cellPadding=0 width="100%" border=0> <tr> <td align=middle width=30> <IMG src=”图像地址”></td> <td><font color=#ff6600><b>今日推荐</b></font></td> <td align=right><font color=#ff6600>>></font> <a><font color=#ff6600>更多</font></a></td> <td width=10></td></tr></table>
2、表格应用实例的部分代码，请大家填写并纠正错误。代码如下： <html> <body> <TABLE cellSpacing=0 cellPadding=0 width=160 border=0> <TR> <TD><a ><img height=120 alt=富贵吉祥 src=""d:\wysj\images\20066151584775663.jpg"" width=160></a></TD> </TR> <TD height=6></TD></TR>
<TD background="d:\wysj\images\line_h_H02 <TD background="d:\wysj\images\line_h_H02.gif" height=1></TD></TR> <TR> <TD height=2></TD></TR> 填空 <TD><FONT color=#333333>市场价格：</FONT> <FONT color=#ff0000><STRIKE>1085</STRIKE></FONT> <FONT color=#999999>(元/盒)</FONT></TD></TR> <TD><FONT color=#333333>商城价格：</FONT> <FONT color=#0000ff>651</FONT> <FONT color=#999999>(元/盒)</FONT></TD></TR>
<TR> <TD background="d:\wysj\images\line_h_H02.gif" height=1></TD></TR> <TD height=6></TD></TR> <TD align=middle><A href="#" target=_blank><IMG alt=购买该产品 src="" border=0></A></TD></TR></TABLE> </body> </html>
分析错误： 1、<TD><a ><img height=120 alt=富贵吉祥 src=""d:\wysj\images\20066151584775663.jpg"" width=160></a></TD> 2、<TD height=2></TD></TR> 填空 <TD><FONT color=#333333>市场价格：</FONT> 3、<TD align=middle><A href="#" target=_blank><IMG alt=购买该产品 src="" border=0></A></TD></TR>填空 源代码应该是： <html> <body> <TABLE cellSpacing=0 cellPadding=0 width=160 border=0>
<TR> <TD><a ><img height=120 alt=富贵吉祥 src="d:\wysj\images\20066151584775663.jpg" width=160></a></TD> </TR> <TD height=6></TD></TR> <TD background="d:\wysj\images\line_h_H02.gif" height=1></TD></TR> <TD height=2></TD></TR> <TD><FONT color=#333333>产品名称：</FONT><A><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> <TD><FONT color=#333333>商城价格：</FONT><FONT color=#0000ff>651</FONT> <FONT color=#999999>(元/盒)</FONT></TD></TR> <TD height=2></TD></TR> <TD background="d:\wysj\images\line_h_H02.gif" height=1></TD></TR>
<TD height=6></TD></TR> <TD align=middle><A href="#" target=_blank><IMG alt=购买该产品 src="d:\wysj\images\eshop_buy01.gif" border=0></A></TD></TR></TABLE> </body> </html> 重复这段代码，修改链接和相关文字得到最终效果。
（六）源代码：
实验小结： 1、本次课我们能够完成了二个实验项目，对HTML的基本标记及表格的相关属性有更深的认识，但有一部分知识在课堂上没有练习，希望大家利用课余时间在下面多多学习，能灵活运用。 2、超级链接我们将在框架中深入学习。 3、这次课所学的内容我们将在框架中继续使用。
学生讨论结果： 1、图片路径一定要正确。 2、知识点一定要熟练。