2.5 项目实训
2.5.1 项目实训一：“第1个HTML”网页
1．实训目的
通过本案例的学习，可以初步了解HTML语言，了解HTML语言中常用标记的书写格式和作用；掌握输入HTML代码、建立HTML文档和显示HTML网页的方法。
2．实训案例效果（图2-13）
图 2-13
3．实训设计过程
（1）输入HTML代码。在Windows记事本或Adobe Dreamweaver CS6的代码视图中（如图2-1所示）输入以下代码：
<HTML>
<HEAD>
<TITLE>我的第1个HTML网页</TITLE>
</HEAD>
<BODY BGCOLOR=#EEff66>
<CENTER><H1>第1个HTML网页</H1></CENTER>
<IMG SRC="img/jsj1.GIF" >
<B>制作网页--HTML语言简介</B>
<BR>
<PRE>
HTML文件是标准的ASCII文件，它看起来像是加入了许多被称为链接签(tag)的特殊字符串的普遍文本文件。从结构上讲，HTML文件由元素组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。大多数元素是“容器”，即它们有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag)，元素的结束标记叫做结尾链接签(end tag)，在起始链接签和结尾链接签之间的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明。
</PRE> </BODY> </HTML>
（2）浏览网页。浏览网页有以下三种方法。
方法一：双击HTML文档图标，可以调出浏览窗口，同时打开该网页。
方法二：在Adobe Dreamweaver CS6的代码视图中，单击在Ixplore预览选项（快捷键F12），即可浏览网页。
方法三：打开浏览器窗口，在菜单栏中单击“文件”→“打开”命令。单击“打开”对话框中的“浏览”按钮，弹出“Microsoft Internet Explorer”对话框，选择HTML文件，单击“打开”按钮，退出“Microsoft Internet Explorer”对话框。此时，在打开的下拉框内将出现选中的文件目录和名称，单击“确定”按钮，即可在浏览器中打开所选择的网页。
（3）修改和保存网页代码。在浏览器窗口中，单击“查看”→“源文件”命令，弹出Windows记事本窗口，并在该窗口中显示出该网页的HTML代码。
提示
也可以在Adobe Dreamweaver CS6的代码视图中修改网页代码。
修改完代码之后，在菜单栏中单击“文件”→“保存”命令，即可保存修改后的代码。 在网页上单击鼠标右键，弹出快捷菜单，单击该菜单的“刷新”命令，即可看到修改后的网页。
2.5.2 项目实训二：“中国诗词佳句-作者”网页
1．实训目的
通过该案例的学习，可以进一步了解网页中其他一些文本标记，合理使用这些标记，可以使网页的显示效果更加出色，可以进一步掌握网页使用文本的方法。
2．实训案例效果（图2-14）
图 2-14
3．实训设计过程
在Adobe Dreamweaver CS6代码视图中，输入以下代码：
<HTML> <HEAD> <TITLE>中国诗词佳句-作者</TITLE> </HEAD> <BODY BGCOLOR="#FFFF00"> <H1 ALIGN="CENTER"><FONT COLOR="#FF0000">中国诗词佳句-作者</FONT></H1> <P><FONT COLOR="#0000FF">我国是一个诗词王国，自《诗经》以来，诗作有多少？作者有多少？无法回答。只能说如浩海烟云，难以计数。仅以《全唐诗》而言，作家二千余人，作品五万余首之多。这是我国的文化瑰宝，民族的奇珍。</FONT> <!--下面是正文内容--> <P>下面介绍几句著名的诗句，把鼠标移到诗句之上，可以看到该诗句的作者姓名、朝代和诗句源于的作品名称。 <P TITLE="赵壹—东汉人，源于《长歌行》">1.少壮不努力，老大徒伤悲 <P TITLE="李白—唐朝人，源于《将进酒》">2.天生我材必有用，千金散尽还复来 <P TITLE ="王维—唐朝人，源于《九月九日忆山东兄弟》">3.每逢佳节倍思亲 <P TITLE ="陆游—宋朝人，源于《游山西村》">4.山重水复疑无路，柳暗花明又一村 </BODY> </HTML>
将该HTML文件保存在站点根文件夹的相应文件夹中。用浏览器打开该网页，即可看到“中国诗词佳句-作者”网页的显示效果。
2.5.3 项目实训三：“图像边框”网页
1．实训目的
通过该案例的学习，可以进一步了解网页中插入GIF动画和图像的方法，给图像和GIF动画添加边框的方法，背景平铺图像和给图像添加文字说明的方法，以及调整图像和文本相对位置的方法。
2．实训案例效果（图2-15）
图 2-15
3．实训设计过程
在Adobe Dreamweaver CS6代码视图中，输入以下代码：
<HTML> <READ> <TITLE>图像的大小和边框</TITLE> </HEAD> <BODY BACKGROUND="img/BJT1.gif"> <IMG SRC="img/M3.gif" HEIGHT=120 WIDTH=120 BORDER=6> <IMG SRC="img/M3.gif" HEIGHT=90 WIDTH=90 BORDER=4> <IMG SRC="img/M3.gif" HEIGHT=50 WIDTH=50 BORDER=2> <IMG SRC="img/M1.jpg" HEIGHT=120 WIDTH=120 BORDER=6> <IMG SRC="img/M1.jpg" HEIGHT=90 WIDTH=90 BORDER=4> <IMG SRC="img/M1.jpg" HEIGHT=50 WIDTH=50 BORDER=2 > </BODY> </HTML>
将该HTML文件保存在站点根文件夹的相应文件夹中。用浏览器打开该网页，即可看到“图像边框”网页的显示效果。
2.5.4 项目实训四：“链接技术演示”网页
1．实训目的
通过该案例的学习，可以掌握在网页中加入超文本链接的方法，创建图像或动画链接的方法。
2．实训案例效果（图2-16）
图 2-16
3．实训设计过程
在Adobe Dreamweaver CS6代码视图中，输入以下代码：
<HTML> <HEAD> <TITLE> 文字、图像和动画链接</TITLE> </HEAD > <BODY> <H3 ALIGN=CENTER>文字、图像和动画链接</H3> <P ALIGN="CENTER"><A HREF="HTML1.HTM">链接到“第1个HTML网页” </A> <P ALIGN="CENTER"><A HREF="HTML2-1.HTM">链接到“中国诗词佳句-作者”网页 </A> <P ALIGN="CENTER"><A HREF="HTML3-1.htm">链接到“图像边框” </A> <P ALIGN="CENTER"><A HREF="HTML4-1.html">链接到“图像切换” </A> <A HREF="HTML2-1.HTM"><IMG SRC="img/L2.JPG"></A> <A HREF="HTML3-1.HTM"><IMG SRC="img/L3.GIF"></A> </BODY> </HTML>
将该HTML文件保存在站点根文件夹的相应文件夹中。用浏览器打开该网页，即可看到“链接技术演示”网页的显示效果。
2.5.5 项目实训五：“最新消息公告”网页
1．实训目的
通过该案例的学习，掌握表格标记和滚动标记的基本运用方法和技巧，学会制作公告牌、公告文字向上滚动、当鼠标经过时停止滚动、当鼠标移开时继续滚动的方法。
2．实训案例效果（图2-17）
图 2-17
3．实训设计过程
在Adobe Dreamweaver CS6代码视图中，输入以下代码：
<HTML> <head> <TITLE>最新消息公告</TITLE> </head> <table width="400" height="220" cellspacing="3" cellpadding="8" bgcolor="#CCCCFF" align="center"> <tr> <td height="36" bgcolor="#CCFFFF" align="center"> <font style="font-size:16px" face="黑体"><b>最新消息公告</b></font> <tr> <td valign="top" bgcolor="#FFFFFF"> <marquee scrollamount=2 direction="up" id="gonggao" onMouseOver= "gonggao.stop()" onMouseOut="gonggao.start()"> <font style="font-size:14px"><a href="#">1.Java补考在2012年4月7日上午10:00进行</a></font> <P> <font style="font-size:14px"><a href="#">2.“网页制作”成绩已经在网上公布</a></font> <P> <font style="font-size:14px"><a href="#">3.“多媒体技术”课程于2012年4月7日上午10:30开始</a></font> <P> <font style="font-size:14px"><a href="#">4.“网络技术最新动向”讲座在2012年4月7日上午11:00开始</a></font> <P> <font style="font-size:14px"><a href="#">5.“VB程序设计”备课会在2012年4月7日下午2:00开始</a></font><P> <font style="font-size:14px"><a href="#">6.请教师将教学计划于2012年4月7日以前交教务处</a></font><P> </marquee> </table>
</HTML>将该HTML文件保存在站点根文件夹的相应文件夹中。用浏览器打开该网页，即可看到“最新消息公告”网页的显示效果。
2.5.6 项目实训六：“图像切换”网页
1．实训目的
通过该案例的学习，可以掌握在网页中插入Flash动画和其他视频、音频的方法。
2．实训案例效果（图2-18）
图 2-18
3．实训设计过程
在Adobe Dreamweaver CS6代码视图中，输入以下代码：
<html> <head> <title>图像切换</title> </head> <body> <h3 align=center>图像切换</h3>. < embed src ="flash/图像切换.SWF" width="300" height="200"></embed> <embed src="flash/图像切换.SWF" width="300" height="200"></embed> </body> </html>
将该HTML文件保存在站点根文件夹的相应文件夹中。用浏览器打开该网页，即可看到“图像切换”网页的显示效果。