《网页设计与制作基础》实验指导书(2010-2011-2)

实验一网页的认识

实验目的

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

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

实验环境

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

实验重点及难点

◆熟悉使用浏览器进行浏览、搜索、下载。

◆熟悉HTML的结构、语法。

实验内容

1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。

2、从网上（如网页制作大宝库https://www.360docs.net/doc/9712272620.html,等）下载网页制作时需要的小图片、动画及flash等网页

制作素材。

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

4、通过浏览百度分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。

5、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即

事》，如下图所示。

实验二网页的基本元素（一）

实验目的

1、掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节

标记，水平线标记，文本居中标记等；

2、掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；

3、掌握列表格式标记，包括无序列表标记，有序列表标记等；

4、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电

子邮件链接等；

5、掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；

6、掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或

视频播放插件等；

7、掌握动态元素标记。

实验环境

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

实验重点及难点

熟练掌握各种常用标记并利用其来实现网页的排版。

实验内容

1、通过记事本编辑网页sy2-1.htm，实现如下页面：

2、通过记事本编辑网页sy2-2.htm，实现如下页面：

●标题文字大小用

标记；

●作者信息文字大小为4，字体为幼圆，颜色为红色；

●古诗文字大小为4，字体为隶书，颜色为蓝色；

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

为20个像素，颜色为棕色；

4、通过记事本对网页sy2-3.htm按要求进行编辑并另存为sy2-4.htm，效果如图所示。

●插入背景图片背景.jpg

●在古诗左下方插入作者的照片司空曙.jpg

●为网页添加背景音乐江村即事.mp3

●给标题设置超链接，链接到网页江村即事_百度百科.htm；

●给图片设置超链接，链接到网页司空曙_百度百科.htm。

实验三网页的基本元素（二）实验目的

1、掌握使用表格标记来创建和设置表格；

2、熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。实验环境

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

实验重点及难点

◆不规则表格的创建。

◆使用表格来布局表单。

实验内容

1、用记事本编辑制作一个网页sy3-1.htm，效果如图所示。

2、用记事本编辑网页sy3-2.htm，实现如下页面。

3、用记事本编辑网页sy3-3.htm，实现如下页面。

4、用记事本编辑网页sy3-4.htm，实现如下页面。

5、对sy3-4.htm进行适当的修改并另存为sy3-5.htm，实现如下页面。

实验四 Dreamweaver基本操作

实验目的

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

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

3、熟练掌握在网页文件中各种网页基本元素（文本、图像、超链接、多媒体对象、表格以

及表单等）的添加和设置。

实验环境

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

实验重点及难点

◆各种超链接的创建。

◆背景音乐的添加。

实验内容

1、使用Dreamweaver建立一个本地站点，放在磁盘的最后一个盘符里并命名为“我的第一

个网站”，包含以下几个文件和文件夹：index.htm；图片文件夹（images）；音乐文件夹（sound）等，把index.htm设定为网站首页。

2、在站点“我的第一个网站”中新建一个名为“我的心情”的网页文件，从提供的网页原

始素材“人生最美是淡然.doc”中把文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、在网页文件“我的心情”中设置背景音乐“安妮的仙境.mp3”，并为该网页加上背景颜

色，在其标题后插入一幅图片“淡然.jpg”，为标题中“淡然”两字加上超链接，使其链接到“淡然_百度百科.htm”中，效果如下图所示。

4、在站点“我的第一个网站”中新建一个名为“我的音乐”的网页文件，在该网页文件中

建立一个如图所示的表格，并在表格下方添加文字“同时让我们回去童年快乐时光吧！”

和插入Flash影片“拔萝卜”。

5、在站点“我的第一个网站”中新建一个名为“留言簿”的网页文件，在该网页文件中建

立一个如图所示的表单。

实验五 Dreamweaver网页布局设计（一）

实验目的

1、熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；

2、熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能；

实验环境

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

实验重点及难点

◆利用布局表格来规划网页的设计。

◆利用框架来来设计网页。

实验内容

1、在站点“我的第一个网站”中利用表格来布局表单新建一个名为“最新留言簿”的网页

文件，效果如图所示。

2、在站点“我的第一个网站”中利用布局表格来新建一个名为“又一个留言簿”的网页文

件，效果如图所示

3、利用布局表格来规划在站点“网页设计与制作”中的主页，效果如下图所示。

4、利用框架集和框架来规划在站点“我的第一个网站”中的首页文件index.html，其中分

别为目录内容“我的心情”、“我的音乐”、“请您留言”建立超链接，分别链接到网页文件“我的心情.html”、“我的音乐.html”、“留言簿.html”,此外为目录内容“和我联系”建立电子邮件链接

实验六 Dreamweaver网页布局设计（二）

实验目的

1、熟悉层的基本操作并能利用层来定位页面元素；

2、掌握模板的创建、编辑和应用。

实验环境

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

实验重点及难点

◆灵活利用层来实现网页元素的精确定位。

◆利用模板生成多个风格一致的网页。

实验内容

1、建一个站点，放在磁盘最后一个盘符里，命名为“中国四大名园”，包含以下几个文件

和文件夹：主页（index.htm）；图片文件夹（images）；音乐文件夹（sound）等。

2、在“中国四大名园”站点中，利用Dreamweaver软件使用层的定位技术对index.htm进

行设计编辑，效果如下图所示。

3、在“中国四大名园”站点中建立网页文件“拙政园.html”，效果如下图所示。

4、根据网页文件“拙政园.html”生成模板文件“名园.dwt”。

5、根据模板文件“名园.dwt”创建网页文档“颐和园.html”、“避暑山庄.html”和“留园.html”，

分别为“中国四大名园”站点中的主页文件index.htm的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”建立超链接，分别链接到网页文件“拙政园.html”、“颐和

园.html”、“避暑山庄.html”和“留园.html”。

实验七 Dreamweaver高级应用（一）

实验目的

1、了解行为、事件和动作的含义以及认识行为面板，掌握行为的编辑方法以及具体应用。

2、了解时间轴、帧和关键帧以及通道的含义，掌握利用时间轴制作动态效果的网页。

实验环境

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

实验重点及难点

◆利用行为实现网页的交互效果。

◆利用时间轴实现网页的动态效果。

实验内容

1、建一个站点，放在磁盘最后一个盘符里，命名为“行为和时间轴”，包含以下几个文件

和文件夹：主页（index.htm）；图片文件夹（images）。

2、在站点“行为和时间轴”中新建一个网页“图像交换.html”，在网页中实现交换图像和

恢复交换图片的功能，即当鼠标指针位于图像“海豚.jpg”时，会自动变为“狗.jpg”；

而当鼠标指针离开图像“狗.jpg”时，图像会自动变回“海豚.jpg”。

3、打开网页“图像交换.html”时，首先弹出一个浏览器窗口，显示一则倡议书。

4、在站点“行为和时间轴”中新建一个网页“弹出信息.html”，可以实现一打开该页面就

弹出一个信息窗口，效果如下图所示。

5、当鼠标指针移向网页“弹出信息.html”中的生日蛋糕图片时，在状态栏显示“您许愿了

吗？”。

6、在站点“行为和时间轴”中新建一个网页“直线.html”，可以实现一打开该页面，一只

蝴蝶就从页面左上角按直线飞到右下角。

7、在站点“行为和时间轴”中新建一个网页“曲线.html”，可以实现一打开该页面，一只

蝴蝶就从页面左上角按曲线飞到右下角。

8、在站点“行为和时间轴”中新建一个网页“鱼儿游.html”，可以实现一打开该页面，一

条鱼儿在蓝色的海洋里欢快地游来游去。

9、在站点“行为和时间轴”的网页index.htm中设置超链接，如下图所示。

实验八 Dreamweaver高级应用（二）

实验目的

1、了解CSS 的基本知识；

2、熟悉“CSS样式”面板；

3、掌握样式表的创建和应用。

实验环境

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

实验重点及难点

◆熟悉样式表的类型。

◆利用样式表对页面进行美化。

实验内容

1、建一个站点，放在磁盘最后一个盘符里，命名为“CSS样式表”，包含文件index.html。

把word文档“旅行回来，我还是我”的内容复制到网页文件“index.html”。并在在网页文件“index.html”最后建立电子邮件超链接。

2、在网页文件“index.html”中新建CSS样式“.ziti”设置该网页。

3、把网页文件“index.html”中超链接的下划线变为删除线。

4、建立外部样式表font1.css，并使网页文件“index.html”应用该样式。

5、把word文档“禅意”的内容复制到网页文件“诗歌.html”，并通过“附加样式表”的方

法应用font1.css来设置网页文件“诗歌.html”。

实验九利用Dreamweaver软件完成网页制作

实验目的

1、运用所学知识设计制作出符合需求的网页。

实验环境

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

实验重点及难点

综合运用所学知识制作出符合要求的网页，能体现出一定的特色。

实验内容

1、制作一个个人网站，介绍自己。栏目可根据自己情况灵活设置。要求：网站能体现出个性

特征。提示：内容要健康积极；可搜索名人个人网站进行参考。