文字版网页设计平时作业

实验报告

课程名称网页设计与制作基础

实验项目名称网页设计实验报告

班级与班级代码10法学3班

实验室名称（或课室） 201 、211 专业法学

任课教师方清华

学号：

姓名：

实验日期：

广东商学院教务处制

姓名实验报告成绩

评语：

指导教师（签名）

年月日说明：指导教师评分后，实验报告交院（系）办公室保存。

目录

1、实验一 (4)

2、实验二 (5)

3、实验三 (6)

4、实验四 (7)

5、实验五 (8)

6、实验六 (9)

7、实验七 (10)

实验一网页的认识

实验目的

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

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

3、配置网站运行环境。

实验环境

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

实验重点及难点

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

◆熟悉HTML的结构、语法。

◆创建与管理站点

实验内容

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

文件夹）。

2、从网上（如网页制作大宝库等）下载

网页制作时需要的小图片、动画及flash等网页制作素材。

3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、

色彩搭配等方面来分析网页。

4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为

“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明）

如下图所示。

5、使用Dreamweaver建立一个本地站点

截图如下：

实验结论

1、通过这次实验，我对HTML的结构有初步了解，懂得怎样建立本地

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

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

实验目的

1、掌握头区标记的应用，包括title、meta和base等标记

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

换行标记，标题标记，分节标记，水平线标记，文本居中标记等；

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

义字符等；

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

5、掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链

接、下载文件链接以及电子邮件链接等；

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

标记；

7、掌握音频和视频标记，包括链接音频或视频文件、设置网页背

景音乐标记，内嵌音频或视频播放插件等；

8、掌握动态元素标记。

实验环境

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

实验重点及难点

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

实验内容

1、在网站下创建文件夹sy2，编辑网页sy2-1.htm，实现如下页面：

2、对网页sy2-1.htm按要求进行编辑并另存为sy2-2.htm

●标题文字大小用

标记；

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

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

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

50%，水平线的粗细为20个像素，颜色为棕色；

效果如图所示。

3、对网页sy2-2htm按要求进行编辑并另存为sy2-3.htm，

●插入背景图片：背景.jpg

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

●为网页添加背景音乐：江村即事.mp3，要求循环播放

效果如图所示。

4、对网页sy2-4.htm按要求进行编辑并另存为sy2-5.htm，效果如

图所示。

●改“目录”下的列表符号类型为方框。

●给“【注释】”下的条目加数字编号

●以标题为热点创建空超链接

●以图片为热点创建空超链接

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

5、对网页sy2-5.htm按要求进行编辑并另存为sy2-6.htm。

●以标题和图片为热点的超链接均指向

/view/1121590.htm（使用绝对路径，在新窗口中打开）

●以“大历十才子”为热点的超链接指向dlscz.html(已建立)。（使

用相对路径，在当前窗口中打开）

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

字母。

●以“基本信息”下的“七言绝句”为热点文本创建书签超链接，

指向/view/1121590.htm的书签名为1的书签。（使用绝对路径，在新窗口中打开）

●以“上海辞书出版社”打热点创建指向editor@的超链

接。

上海辞书出版社

●页面20秒后跳转/view/1121590.htm#2

●页面显示改用GB2312编码标准。

实验结论

在“Dreamweaver基本操作”这个实验中，用DreamweaverCS3这个软件的时候，我学会如何设置字体，如：修改字体大小、颜色和样式等；而且，在实验中我也学到了怎么插入图片和背景，相关图片和文字超链接的设置等。