《网页设计与制作基础》实验指导

实验一网页的认识

实验目的

1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；

2、利用记事本来编辑HTML文档并浏览；

3、熟悉HTML基本标记的使用。

实验环境

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

实验重点及难点

◆熟悉HTML的结构、语法。

◆熟悉HTML基本标记的使用。

实验内容

1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、

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

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

网页。

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

为主页。

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

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

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

实验二 Dreamweaver基本操作（一）

实验目的

1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；

2、熟悉网页文件的基本操作；

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

实验环境

WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连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，如下图所示。

●以标题和图片为热点的超链接均指向/view/1121590.htm（使用绝对

路径，在当前窗口中打开）。

●为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。

●在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。

●以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。

●以“邮件联系”为热点创建指向ggyx@的超链接。

实验三 Dreamweaver基本操作（二）

实验目的

1、熟练掌握在网页文件中多媒体对象的添加和设置；

2、熟练掌握在网页文件中表格的添加和设置；

3、熟练掌握在网页文件中表单的添加和设置。

实验环境

WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。实验重点及难点

◆多媒体对象的添加和设置。

◆表单及表单对象的添加及设置。

◆利用表格来归整表单。

实验内容

1、为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，

要求循环播放，结果另存为sy3-2.html。

2、在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文

件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。

3、打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html，制作一个留言簿表单，

效果如下图所示。

件中用表格来布局sy3-1.html网页文件中的留言簿，效果如下图所示。