实验八 综合实验

实验目的

? 掌握本地站点的创建和管理以及熟悉网页文件的基本操作； ? 善于运用各种网页布局设计方法；

? 熟悉在网页中基本的网页元素（如文字、图片、超链接、多媒体元素、表格和表单等）

的插入和相关的设置；

? 利用模板生成多个风格一致的网页； ? 通过行为实现网页的交互效果。

实验环境

? WindowsXP操作系统 ? Dreamweaver软件

实验内容

? 设计一个小型的校园跳蚤市场的网站（教材第9章）。

附录1 HTML标记的使用

实验目的

1、 掌握HTML文档的结构及其制作规范。

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

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

3、 掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等； 4、 掌握列表格式标记，包括无序列表标记，有序列表标记等；

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

子邮件链接等；

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

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

视频播放插件等； 8、 掌握动态元素标记。

9、 掌握使用表格标记来创建和设置表格； 10、 熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。

实验环境

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

实验重点及难点

? 熟练掌握各种常用标记并利用其来实现网页的排版。 ? 不规则表格的创建。 ? 使用表格来布局表单。

实验内容

1、 创建目录sy2。

? 本次实验中所有网页文件均放在目录sy2下；

? 图片、音频文件分别放在sy2的子目录media子目录的images和music子目录下。 2、 通过记事本编辑网页sy2-1.html，实现如下页面：

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

? ? ? ?

标题文字大小用

标记；

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

在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为20个像素，颜色为棕色；

4、 通过记事本对网页sy2-2.html按要求进行编辑并另存为sy2-3.html，效果如图所示。 ? 插入背景图片：背景.jpg

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

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

5、 通过记事本对网页sy2-3.html按要求进行编辑并另存为sy2-4.html，效果如图所示。 ? 改“目录”下的列表符号类型为方框。 ? 给“【注释】”下的条目加数字编号

? 以标题为热点创建空超链接 ? 以图片为热点创建空超链接

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

6、 建立一个新网页文件并命名为liuyanbu.html，内容如下图所示。

7、 通过记事本对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。 ? 以标题和图片为热点的超链接均指向http://baike.http://www.wodefanwen.com//view/1121590.htm（使用绝对

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

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

? 设置方向向左、方式为scroll、活动字幕的滚动速度为3像素、内容为“如有诉求，请

留言或邮件联系！谢谢！”的滚动字幕。 ? 以“留言”为热点创建指向liuyanbu.html的超链接。（使用相对路径，在新窗口中打开）。 ? 以“邮件联系”为热点创建指向ggyx@yahoo.com.cn的超链接。