特殊字符的插入和文字特殊标记的掌握文字和图片的链.ppt

,实验内容 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用,实验目的 1、能熟练完成项目一HTML中基本标记的应用实例 2、能熟练完成项目二表格的应用实例,实验重点 1、字体标志的应用 2、特殊字符的插入和文字特殊标记的掌握 3、文字和图片的链接 4、在页面中插入图片 5、表格属性的应用,实验难点 1、表格属性的应用,（一）演示二个项目效果图 1、项目一 基本标记的应用实例 2、项目二 表格属性应用实例,2、图片插入的应用实例效果图,（二）演示项目一中三个子项目效果图 1、页面中文字插入的应用实例效果图,3、按钮图标的制作实例,（三）演示并与学生一起完成三个子项目 1、页面中文字插入的应用实例的实验步骤 （1）打开已经输入的html文件的基本结构的记事本； （2）在之间输入网页标题“HTML表格及元素的添加”； （3）我们将文件保存到D盘，文件夹名为网页设计，文件名为H2_01.html，文件类型为所有文件； （4）打开D盘网页设计文件夹中的H2_01.html文件，大家可以看到标题栏上有“HTML表格及元素的添加”的标题；,（5）打开“查看”菜单“源代码”，在中输入文字“御茶园茶业网上商城”； （6）再一次保存，然后“刷新”页面；大家先完成在页面中添加文字这部分内容，老师来检查完成情况。 （7）打开“查看”菜单“源代码”，在文字“御茶园茶业”前加上，后面加上，设置文字为粗体，并且字号设置成14px； （8）保存后刷新页面；,（9）打开“查看”菜单“源代码”，在文字“网上商城”前加上，在后面加上，设置文字为粗体，并且字号设置为14px，颜色为橙色； （10）刷新后第一个子项目已完成。效果如下图：,2、图片插入的应用实例的实验步骤 （1）前三步同上。 （2）在中插入表格标记； （3）在表格标记中插入行标记； （4）在行标记中插入标记； （5）在标记中，输入“background=图片地址” height=180px； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_02.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_02.html文件，预览网页效果； （8）打开“查看”菜单“源文件”； （9）在标记中输入“cellPadding=0 cellSpacing=0 border=0 width=710”； （10）再一次保存页面。,3、按钮图标的制作实例实验步骤： （1）前三步同上。 （2）先做一个按钮； （3）在表格标记中插入行标记； （4）在行标记中插入标记； （5）在中输入“茶艺用品”标记中，输入background=“图片地址” align=middle width=80 height=22； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_03.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_03.html文件，预览网页效果； （8）打开“查看”菜单“源文件”；,（9）在标记中输入“cellPadding=0 cellSpacing=0 border=0”； （10）在文字“茶艺用品”的前面加上，在后面加上 （11）刷新网页； (12）其它几个按钮的代码同（5）至（10）步，只是文字内容有变化。 强调：先设计好，表格中的列数，即的个数。,第一个项目实验步骤 第二个项目实验步骤,（四）演示项目二的效果图 根据我提供的HTML文件，大家修改得出最终效果。,（五）提供代码、学生填空、纠错完成实验内容。 1、嵌套表格的部分步骤及代码（图片素材在d:wysjimages目录下）。 （1）前三步同上。 （2）在中插入表格标记； （3）在表格标记中插入行标记； （4）在行标记中插入标记； （5）在标记中，输入“background=图片地址” height=25； （6）将文件保存到D盘，文件夹名为网页设计，文件名为H2_04.html，文件类型为所有文件； （7）打开D盘网页设计文件夹中的H2_04.html文件，预览网页效果； （8）打开“查看”菜单“源文件”；,（9）在标记中输入“cellPadding=0 cellSpacing=1 border=0 width=100% bgcolor=”#ff9933”； （10）再一次保存页面。 （11）在之间插入 今日推荐 更多 ,2、表格应用实例的部分代码，请大家填写并纠正错误。代码如下： , 填空 市场价格： 1085 (元/盒) 商城价格： 651 (元/盒) ,分析错误： 1、 2、 填空 市场价格： 3、填空 源代码应该是： , 产品名称：富贵吉祥, 市场价格：1085 (元/盒) 商城价格：651 (元/盒) , 重复这段代码，修改链接和相关文字得到最终效果。,（六）源代码：,实验小结： 1、本次课我们能够完成了二个实验项目，对HTML的基本标记及表格的相关属性有更深的认识，但有一部分知识