网页制作综合实验报告

华北科技学院计算机学院综合性实验

实 验 报 告

课程名称 网页制作 实验学期 2012-2013 学年 第 二 学期 学生所在系部 年级 专业班级 学生姓名 学号 任课教师 实验成绩

计算机学院制

华北科技学院计算机系综合性实验报告

《 网页制作 》课程综合性实验报告

开课实验室： 2013 年 05 月 27 日 实验题目 一、实验目的 使用Dreamweaver、Firworks、Flash软件完成网站的制作。 二、设备和环境 微机、Dreamweaver、Firworks、Flash 水，生命之源泉 三、实验内容 • 任选一题： 一：公益网站，如雅安平安、珍惜水源等 二：班级网站，为你现在所在的班级制作一个网站 • 要求： 1、总体页面不少于5个页面。 2、运用表格技术、框架技术。有至少三种超链接。 3、有文字、有图片、有flash动画。 4、图片和flash至少各存在一个自己制作的内容，然后附有源文件，即png、fla后缀名的文件。 四、实验结果及分析 （要求写清楚具体的步骤，使用的主要技术，以及对课程的感想。页数可增加）  启动fireworks,创建一个空白文档，在弹出的“新建文档”对话框中，设定画布大小为758*1000像素，分辨率为按钮建立新文档。如下图所示：  在“属性”面板的“品质”下拉列表中，选择“JPEG—较高品质”选项。  选择“文件”|“导入”命令，在打开的导入对话框中选择要导入的图片文件“get.jpg”。  在画布上单击设定要导入图片的位置。然后选择“文件”|“保存”命令，将文件保存为index.png 。  选择“工具”面板中的“指针”工具，向画布上方移动图片位置，如下图所示： 第 1 页

华北科技学院计算机系综合性实验报告

 在“层”面板中，单击“新建/重置层”按钮，新建一个“层2”。然后使用“选取框”工具在画布右侧绘  在“层”面板中拖动“层2”到“层1”下方，如图：  选择“工具”面板中的“钢笔”工具，在画布底部绘制一个半椭圆形，并填充颜色为粉色。  使用“工具”面板中的“矩形”工具，在画布的右上方绘制一个矩形，填充颜色为白色，在层面板中设置

第 2 页

华北科技学院计算机系综合性实验报告

“文本”工具在白色矩形上输入文字“水，生命之源泉！”作为网站的站名，设置颜色为#74B736，字体为“方正侧绘制一个灰色矩形框。  选择矩形框，按CTRL+C组合键复制，在按CTRL+V组合键粘贴2次。 另外一个矩形，使三个矩形呈重叠的形状。全部选中三个矩形，选择“修改” |“平面化所选”命令，将三个矩形平面化，并合并到一个层中。  选择“文件”|“导入”命令，导入一张图片，放置在三个重叠矩形上。  在“工具”面板的“矢量”区选择“矩形”工具，在属性面板中设置填充颜色为“无”，笔触颜色为#F0F0 选择“工具”面板中的倾斜工具，选中其中一个矩形，移动中心点到矩形左下角的位置，然后向右下方旋 使用“工具”面板中的“文本”工具，在图片下方输入一些文字：“友情链接，留言给我”设置不同的颜色  选择“工具”面板中的“切片”工具。  在画布中拖动鼠标，划分出不同的区域，如图： 第 3 页

华北科技学院计算机系综合性实验报告

    划分好切片后，选择“文件”|“导出”命令。 在弹出的导出对话框中，输入文件名为“index”,保存类型为html和图像。 在ＤＲＥＡＭＷＥＡＶＥＲ中编辑网页 打开“文件”面板，打开首页文件ｉｎｄｅｘ．ｈｔｍｌ．打开首页文件编辑窗口。  选择“修改”｜“页面属性”命令，打开“页面属性”对话框。选择“标题／编码”选项，在 在标题栏中输入“：：：水，生命之源泉！”作为首页标题，在编码下拉列表中，选择“简体中文” 如上图。  选择“外观”选项，单击“背景图像”文本框后的“浏览”按钮，在弹出的对话框中选择 网页的背景图像。设置边距均为０像素。  单击右侧的图片ｉｎｄｅｘ．ｒ４－ｃ２．ｊｐｇ，在属性面板中复制该图片的“源文件 地址。  单击网页中的该图片，按ｄｅｌ键删除。在属性面板的“背景”文本框中粘贴该图片的“ 源文件“地址。  点击文件，新建ｈｔｍｌ，选择的顶部和嵌套的左侧框架，保存框架集，选择“文件  |全部保存”在顶部框架中输入如下 内容

第 4 页

华北科技学院计算机系综合性实验报告

 在左侧框架中，建立表格，点击菜单中的“插入|表格”，设置如图：  新建ｈｔｍｌ，命名为ｘｓｆｘ．ｈｔｍｌ．输入关于水资源的现状分析。如图：  新建ｈｔｍｌ，命名为ｇｙｘｄ．ｈｔｍｌ．选择“菜单|插入|图像对象|鼠标经过图像“  插入如图内容： 第 5 页

华北科技学院计算机系综合性实验报告

 新建ｈｔｍｌ，建立ｌｙｂ．ｈｔｍｌ，选择“插入|表单”，  单击“表单”按钮后，页面编辑区出现一个红色虚框。紧接着在表单中插入一个表格并输入 相应的文字。 将光标定位在“姓名”右边的单元格，单击表单工具的“文本字段”按钮，这样就出现了 一个文本字段表单域。  保持这个文本字段表单域处于选中状态，在属性面板中定义这个文本字段的名字为name  QQ,E-MAIL等的表单域添加方法同上，均为文本字段，在属性面板中分别命名如下：oicq Mail  将光标定位在性别右边的单元格，输入“男”,然后单击表单工具中的“单选按钮”，在属性 面板定义这个单选按钮名字为sex,选定值为男，初始状态选为已勾选。  在单元格中继续输入“女”，然后按同样方法添加一个单选按钮。  将光标定位在“选择头像”右边的单元格，插入3个头像，然后在每个头像后添加单选按钮  在属性面板中分别设置单选按钮的属性，名字统一定为TX。  将光标定义在留言内容右边的单元格，单击表单区域种的文本区域，在属性面板定义为liuyan， 字符宽度66，行数5.

第 6 页

华北科技学院计算机系综合性实验报告

 在最下边单元格，单击表单工具种的按钮，添加一个按钮表单域，在属性面板中命名为SUBMITL。 也就是“标签”为“提交”，动作为提交表单。按同样的方法设置“重置”按钮。完成的表单效果如图： 新建ｈｔｍｌ，命名为ｙｑｌｊ．ｈｔｍｌ．如图： 建立连接。顶部框架中的主页设置连接为index.html, 第 7 页

华北科技学院计算机系综合性实验报告

形势分析连接为xsfx.html 公益广告链接为gyxd.html 公益行动链接为 留言板设置连接为lyb.html友情链接设置连接为yqlj.html 在友情链接html中，腾讯公益链接 凤凰网链接 我图网链接 中国公益网链接  打开ＦＬＡＳＨ软件  建立图层１，在第一帧处插入关键帧，选择工具栏中的文字工具，在舞台中输入“保”，在第１０ 帧处插入关键帧输入“护”。按同样的方法输入所有文字“保护环境，人人有责”。 建立层２，按图层一的方法输入同样的文字，改变字体颜色。  在图层１第８０帧处输入这是我们的责任，选择“插入｜形状补间”，在第９０帧处插入“！”，选 则形状补间，在第１００帧处插入图片，在１１５帧处插入关键帧。 教价师评

评定项目 算法正确 程序结构合理 A B C D 评定项 界面美观，布操作熟第 8 页

华北科技学院计算机系综合性实验报告

语法、语义正确 实验结果正确 报告规范 分析完文字流题解正其他：

第 9 页