湖北职院计科系.

湖北职院计科系

实验内容 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\ 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>

分析错误： 1、<TD><a ><img height=120 alt=富贵吉祥 src=""d:\wysj\images\ 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>

<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、知识点一定要熟练。

湖北职院计科系.

Similar presentations

Presentation on theme: "湖北职院计科系."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

湖北职院计科系.

Similar presentations

Presentation on theme: "湖北职院计科系."— Presentation transcript:

Similar presentations

About project

反馈