实验项目三HTML基本标记及表格.ppt

实验内容 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用;实验目的 1、能熟练完成项目一HTML中基本标记的应用实例 2、能熟练完成项目二表格的应用实例;实验重点 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用;实验难点 1、表格属性的应用; （一）演示二个项目效果图 1、项目一　基本标记的应用实例 2、项目二　表格属性应用实例;2、图片插入的应用实例效果图;（三）演示并与学生一起完成三个子项目 1、页面中文字插入的应用实例的实验步骤 （1）打开已经输入的html文件的基本结构的记事本； （2）在title/title之间输入网页标题“HTML表格及元素的添加”； （3）我们将文件保存到D盘，文件夹名为网页设计，文件名为H2_01.html，文件类型为所有文件； （4）打开D盘网页设计文件夹中的H2_01.html文件，大家可以看到标题栏上有“HTML表格及元素的添加”的标题；; （5）打开“查看”菜单“源代码”，在body/body中输入文字“御茶园茶业gt;网上商城”； （6）再一次保存，然后“刷新”页面；大家先完成在页面中添加文字这部分内容，老师来检查完成情况。 （7）打开“查看”菜单“源代码”，在文字“御茶园茶业”前加上font size=14b，后面加上/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标记中输入“ce