实验一 网页的认识

实验目的

1、 掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 2、 利用记事本来编辑HTML文档并浏览。 3、 熟悉HTML基本标记的使用。

实验环境

WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点

? 熟悉HTML的结构、语法。 ? 熟悉HTML基本标记的使用。

实验内容

1、 从网上（如网页制作大宝库http://www.dabaoku.com等）下载网页制作时需要的小图片、

动画及flash等网页制作素材。

2、 收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析

网页。

3、 通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设

为主页。

4、 制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，

内容为司空曙的《江村即事》，如下图所示。

5、 通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）

实验二 Dreamweaver基本操作（一）

实验目的

1、 熟悉Dreamweaver的工作环境并了解本地站点的建设和管理； 2、 熟悉网页文件的基本操作；

3、 熟练掌握在网页文件中文本、图像、超链接的添加和设置。

实验环境

WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。

实验重点及难点

? 文字的插入及设置。 ? 图像的插入及设置。 ? 各种超链接的创建。

实验内容

1、 使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几

个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。

2、 在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网

页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、 在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为

sy2-2.html，效果如图所示。

? 标题文字大小用

标记；

? 作者信息文字大小为24像素，字体为幼圆，颜色为红色； ? 古诗文字大小为24像素，字体为隶书，颜色为蓝色；

? 在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20

个像素，颜色为棕色；

4、 在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为

sy2-3.html，效果如图所示。

? 插入背景图片：Welcome-Popup-Background.gif ? 在古诗左下方插入作者的照片：司空曙.jpg

5、 在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文

件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。 ? 改“目录”下的列表符号类型为方框。 ? 给“【注释】”下的条目加数字编号 ? 以标题为热点创建空超链接 ? 以图片为热点创建空超链接

? 以“大历十才子”为热点创建空超链接

6、 在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件，以作实验三

制作留言簿备用。

7、 在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为

? ? ? ? ?

sy2-5.html，如下图所示。

以标题和图片为热点的超链接均指向http://baike.http://www.wodefanwen.com//view/1121590.htm（使用绝对路径，在当前窗口中打开）。

为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。 在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。 以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。 以“邮件联系”为热点创建指向ggyx@yahoo.com.cn的超链接。