制作人：正元设计个人设计网站：/邮箱：**************
第九章网页制作
实验一用记事本建立简单的HTML文件
【实验目的】
学会用HTML语言建立一个简单的网页。
【实验内容】
建立一个网页，布局自定，包括自我介绍、图片、自己的电子信箱地址等，要求在标题与正文之间插入一条水平线。
(实验中所用到的图片、音乐等素材均可在计算中心配备的计算机中找到，具体路径为C:\DATA)
【实验步骤】
1、启动“记事本”和“IE浏览器”，并纵向平铺两窗口；
2、在“记事本”窗口输入下面的代码：
<html>
<head>
<title>欢迎光临悠悠小屋</title>
</head>
3、保存该文件到D:\myweb文件夹中，取名为“yoyo.htm”；（注意，文件的扩展名一定
为.htm或html；如果没有myweb文件夹，请建立之）
4、在IE浏览器的地址栏输入d:\myweb\yoyo.htm；显示如图9-1；
图9-1 网页头部代码与相应显示
5、在“记事本”窗口输入以下语句：
<body>
<h2 align="center"><font color="blue" face="楷体" >
欢迎进入悠悠网</font>
<p><img border="0" src="d:\myweb\woman.gif" Width="138" height="169">
</p></h2>
6、保存记事本文件，并刷新IE浏览器窗口，显示如图9-2；（请先将C:\data中的woman.gif
文件复制到D:\myweb下）
图9-2 字体与图片代码与相应显示
7、在“记事本”窗口输入以下语句(注意被超链接的文件地址书写格式)：
<hr>
<p align="center"><font face="幼圆" size="3" color="#3366FF">我叫悠悠，这里是我的家，欢迎大家来这里听歌喝茶（当然也有coffee了）！</font></p>
<p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/there for me.mp3">《There for me》</a></p>
<p align="center">撒拉.布莱曼的<a href="file:///D:/Myweb/Music/moon/THe Winter of July.mp3">《The Winter of July》</a></p>
8、保存记事本文件，并刷新IE浏览器窗口，显示如图9-3；
图9－3 超链接代码与相应显示
9、在“记事本”窗口输入以下语句(注意发送电子邮件的超链接的书写格式)：
<p align="left"><font color="#808000" face="幼圆">还想听什么歌，告诉我啊！
<ahref="mailto:******************">******************
</a></font></p>
</body>
</html>
10、保存记事本文件，并刷新IE浏览器窗口，显示如图9-4；
图9－4 邮件超链接代码与相应显示
11、自此，该网页设计结束，点击超链接，检查链接是否正确，如果不正确，检查被链
接文件是否在其设定的目录内。
实验二使用FrontPage 2000设计个人网页
【实验目的】
通过本实验，使学生掌握利用FrontPage 2000建立简单个人网页的方法。
【实验内容】
1、创建有框架网页；
2、插入图片，并设置图片的超级链接；
3、设置背景图案和背景音乐；
4、插入活动字幕；
5、设置悬停按钮；
6、设置邮件地址超链接。
【实验步骤】
1、创建有框架网页。
（1）启动FrontPage 2000；
（2）单击“文件”－>“新建”－>“网页”；
（3）在弹出的“新建”对话框中，选择“框架网页”选项卡；
（4）单击“目录”图标－>“确定”，如图9－5；
图9－5 新建框架网页
（5）单击左侧和右侧框架的“新建网页”按钮，建立两个新页面；
（6）单击“保存”按钮；
（7）在弹出的“另存为”对话框中，给左边的框架取名为“left”，给右边的框架取名为“right”，给整个框架取名为“index”，如图9－6；
图9－6 框架网页的保存
（8）在左侧框架任意位置右击，在弹出的快捷菜单中，选择“框架属性”；
（9）在弹出的“框架属性”对话框中，将“可在浏览器中调整大小”前的对勾去掉，并在“显示滚动条”下拉列表中选择“不显示”，如图9－7；
图9－7 “框架属性”设置
（10）单击“框架网页”按钮，在弹出的“网页属性”对话框中，去掉“显示边框”前的对勾，如图9－8；
图9－8 “网页属性”对话框
（11）在右窗口输入网页介绍文字，其字体、段落格式的设置同WORD，略；
2、插入图片，并设置图片的超级链接
（1）在左窗口任意位置单击，点击“插入”－>“图片”－>“来自文件”；
（2）在弹出的窗口中选择已经编辑好的图片（C:\DATA目录中）；
（3）单击图片，出现“图片”工具栏；
（4）选择“图片”工具栏中的“长方形热点”工具按钮；
（5）在图片的“网页介绍”四个字区域自左上至右下拖动鼠标，拖出热点区域；
（6）松开鼠标，在弹出的“插入超链接”对话框中，选择文件RIGHT.HTM；
3、设置背景图案和背景音乐。
（1）单击右框架任意位置，单击“格式”－>“背景”，在弹出的“网页属性”对话框中，选择已存在的图片，如图9-9；
图9-9 设置背景图案
（2）右击左窗口，在弹出的快捷菜单中，选择“网页属性”；
（3）在“网页属性”对话框中，选择“常规”选项卡，单击“浏览”按钮选择背景音乐文件；
（4）如果希望音乐循环播放，则选择“不限次数”，如图9－10；
图9－10 设置背景音乐
4、插入活动字幕
（1）在需要插入活动字幕的位置单击，设置插入点；
（2）单击“插入”－>“组件”－>“字幕”，弹出“字幕属性”对话框，如图9－11；
图9－11 “字幕属性”对话框
（3）在“文本”编辑框中输入显示的活动字幕；
（4）适当设置“方向”、“速度”、“表现方式”，单击“确定”，如图9－12；
图9－12 “字幕属性”输入
5、设置悬停按钮。
（1）选择相应文字，如邮件地址；
（2）选择“格式”－>“动态HTML”，显示“DHTML 效果”工具条，如图9－13；
图9－13 “DHTML 效果”工具条
（1）在“选择一种事件”下拉列表中，选择“鼠标悬停”；
（2）在“应用”下拉列表中选择“格式”；
（3）在“选择设置”下拉列表中选择“字体”；
（4）在“字体”对话框中适当设置，使得鼠标在此处悬停时，产生变化；
6、设置邮件地址超链接。
（1）选中邮件地址，在选中区域右击；
（2）在弹出的快捷菜单中，选择“超链接”；
（3）在弹出的“插入超链接”对话框中，选择“链接到”－>“电子邮件地址”；
（4）在电子邮件文本框中输入自己的电子邮件地址，如图9－14；
自此，一个简单的个人网页已经初具规模，读者可以依照本节的练习，完成其它超链接，如“音乐欣赏”、“个人心语”等。
有一点需要学生注意，虽然图片和音乐可以为网页添色
不少，但也影响了该网页的浏览速度，因此，读者尽量选取体积小的GIF、JEPG格式的图片文件、压缩比较高的音频文件，如WMA、MP3格式的文件。
图9－14 设置邮件地址超链接。