网页实训报告

《网页实训报告》由会员分享，可在线阅读，更多相关《网页实训报告（13页珍藏版）》请在装配图网上搜索。

1、焦作大学实训报告课程：网页设计与制作学院（系）：信息工程专业：应用专业学号：作 者：题 目 我的居室指导教师：2011 年 12 月随着现代社会信息化产业的深入发展,人们越来越重视对信 息资源的开发、利用和管理,根据得到的信息进行决策。这就要 求现代化管理人员每天都要处理大量信息,而计算机的诞生、发 展就为处理大量信息带来了方便,随着计算机的不断发展,网络 技术和数据库技术的普遍应用 ,用户的功能更加细致、完善,并且 提 高了 系 统 开发 的 效 率。这就 要 求系 统 开 发者 要 以 最快 的 速 度开 发出功能最完善的系统,而现在普遍使用的面向对象法使信息系 统 的 应 用 深 入 到

2、 社 会 的 各 个 领 域 。在 面 向 对 象 的 设 计 中 ，在 各 行 各 业 中 离 不 开 信 息 处 理 ，计 算 机 被 广 泛 应 用 于 B/ S 系 统 环 境 。计 算机的好处在于它能够进行信息管理。使用计算机进行信息控 制，不仅提高了工作效率，而且大大的提高了安全性。互联网已 成 为人 们 日 常生 活 的 重要 组 成 部分 ，网页 设计 和 网 站建 设 也 成为 21 世纪 人才 必备 的计 算机 现代 化技 能之 一。 高级 的网 页制 作人 才是企业梦寐以求的时代骄子。网页是按照网页文档规范编写的文档，能将文字、图像、声 音 等 各 种 多 媒 体 文 件

3、 组 合 在 一 起 ，是 一 种 超 文 本 文 档 ，该 文 档 可 用 WW W 方 式 在 网 上 传 播 ， 并 可 悲 浏 览 器 识 别 并 显 示 成 We b 页 面网 页 制 作应 该 说 是技 术 和 艺术 结 合 的工 作 。网页本 身 是 计算 机 技 术 的 产 物 ，计 算 机 技 术 当 然 在 其 中 起 着 重 要 作 用 ；网 页 又 好 比是随时可以更新的动态电子杂志、美学、设计、内容编排等方 面的因素也在发挥这作用。目录1.1 开 发 背 景随着我国经济的发展,各行各业在竞争中求生存的形式 越来越严峻,各单位纷纷以提高人员效率、重组人员结构 为手段,对

4、人力资源进行合理优化来提高经济效率,减少 单位开支。在科技日益发的今天,这种落后的处理方式已 远远满足不了目前的实际需要了。2 使 用技 巧网页制作应该说是技术和艺术结合的工作。网页本身 是计算机技术的产物，计算机当然在其中起着重要的作 用；网页又好比是随时可以更新的动态电子杂志，美学 设计、内容编排等方面的因素也在发挥着作用。网 页 的创作 ，一般 来说 ，基本上可 以 分 为站 点 的规 划 网页的设计和网页的制作三步。1）站点的规划在制作一个网站是，先要设计主题和风格，如网站要 表现哪方面的内容，以什么样的方式表现，制作的目的 是什么等。这样，在后面的工作中才会有的放矢。在还 没有着手之

5、前，只需要有一个基本的设想就可以了，并 不需要方方面面都考虑得很周全、很细致。在确定了主题与风格之后，下一步的工作，就是要找 相关的资料，俗话说，巧妇难为无米只炊。网页的主要 作用是作为一种载体来传达信息。包含文字内容、图像 还可以收集一些自己喜欢的音乐或视频等。对于一个经 常制作网页的作者来说，平时就应该注意储备一些资料 以备制作各种不同的网页时使用。将收集好的资料妥善保存，最好分门别类，有条有理 这样再要使用的时候，可以信手拈来，为以后繁重的制 作工作提供方便，节约时间。2）网页的设计设计是 网页制作 过程中非 常重 要的 一个 环节。一 般 包 含创意的设计、框架的设计、布局的设计、色彩

6、的设计 等。框架设 计决定了 网页的整 体布 局，选择 什 么样 的 框 架 要由具体的内容来决定。布局设计是根据每个页面的信息量和表达方式来确 定如何将各种形式的素材合理地安排在有限页面空间 内。3 制 作过 程在本次实训课上我制作的是有关“我的居室”的网站。这个网站包含五个网页，它们是：首页、个人信息、作 品展示、联系方式。下面由我来介绍我制作的网站。首先在制作网页之前要创建本地站点。在菜单栏中选择“站点”“管理站点”命令，打 开“管理站点”对话框。点击“新建”按钮，选择弹出 菜单中的“站点”命令。然后就是对站点的设置。完成 后按确定按钮即可。在“首页”中我向网页中插入一个层，在层中插入用

7、 fireworks 8制作的图片做背景。在背景上输入文本和用 fireworks 8 制作的按钮放入网页中。3、下面就是制作 网站的流程：创建站点：主要用到dreamweaver 软件，先用IIS 创建本地服务器站点，一来能随时看到制作效果，二来 动态网站所必须。美工人员属于艺术类或IT类，不懂内 容架构，只管配色与制作图片，他们将网站策划交过来 的效果图作进一步修饰，然后将其切片，插入到 dreamweaver 中，生成 html 文件。因为 dreamweaver 图 片制作能力不强，制成的网页的不漂亮，必须用 fireworks 做好，然后切片插入，再用热区功能创建链接。制作首页和网页

8、主页 (Home Page )主页(Home Page)它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。也就是说， 主页是一个网站的门面，要想设计出一个优秀的网站， 就必须有一个“要让浏览者想不看都难”的主页，它必须引 人入胜，能吸引每一个来访者的注意力，引发人们的好 奇心，能让人产生一种深入探索你的网站的冲动。优秀 的主页是一个好的网站必须具备的第一要素。制作首页和网页的步骤：启动dreamweaver ，打开以上建立的站点。使用文件面板创建网站首页：A:在文件面板中，选择以上建立的站点，右键单击，新建一个网页文件，命名为Index.html.B：在文件面板中该文件名上

9、右击鼠标，选择“设成首页”，以区别于其他网页文件。在文件面板中双击首页文件、设置页面属性。在首页文件Index.h tml 的页面属性中，设置左边距和 上边距为0像素。之后就根据自己规划好的布局和自己 准备的素材去设计自己的首页。1.1. 实训意义：网 页设计与制作综合实训是教学过程中 重要的实践 性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合 运用理论知识分析和解决实际问题的能力,实现由理论知 识向操作技能的培养过程.因此加强实践教学环节,搞好 实训教学,对实现本专业的培养目标,提高学生的综合素 质有着重要的作用.4 测 试网站测试流 程

10、 、 要 求及测试 报告 一个网站基本完 工后，需要通过下面三步测试才可以交活。 一、 制 作 者测试，包括美工测试页面、程序员测试功能。在做完 后第 一时间内 由制 作者 本人 进行测试 。 a) 页 面 包 括首 页、二级页面、三级页面的页面在各种常用分辨率下有 无错位；图片上有没有错别字；各连接是否是死连接； 各栏 目图片与 内容 是否 对应 等 b) 功 能 达到 客户 要求 ； 数据库连接正确；各个动态生成连接正确；传递参数格 式、内容正确；试填测试 内容没有报错；页 面显示正确 二、 全面测试 根据 交工标准和客户要求，由专 人进 行 全面测试 也是包括页面和程序两方面，而 且要结

11、合起来 测，保证填充足够的内容后不会导致页面变形。另外要 检查 是否有错别字，文字内容是否有常识错误。 三、 发 布测试 网站发布到主服务器之后的测试，主 要是防止环 境不同导致的错误功能模块需要单独的测试用例的设计导出，对于应 用程序模块需要设计者提供基本路径测试法的测试用 例。1、链 接测试 链接是 Web 应用系统的一个主要特征，它 是在页面之间切换和指导用户去一些不知道地址的页面 的 主要手段。链接测试可分为三 个方面： 1）测试所有链接是否按指示的那样确实链接到了该链接 的页面；2）测试所链接的页面是否存在；3）保证 Web 应用系统上没有孤立的页 面，所谓孤立页 面是 指没有链 接

12、指 向该 页面 ，只有 知 道 正确 的 URL 地址 才能 访问。 链接 测 试 可以 自 动进 行 ，现在 已 经有 许 多 工 具可以采用。链接测试必须在集成测试阶段完成，也就 是说 ，在整个 Web 应用 系 统的所 有页 面开 发完成之 后进 行链接测试。 Xenu 主要测试链接的正确性的工具可惜的是对于动态生成的页面的测试会出现一些错误。 4、设计语言测试 Web 设计语言版本的 差异可以引起客 户端或服务器端严重的问题，例 如使用哪种版本的 HTML 等二 、性能测 试 网 站 的 性能 测 试 性 能测 试对于网 站 的运行而言异常重要网站的性能测试主要从三个方面进 行：连接速

13、度测试、负荷测试 （Load） 和压力测试 压力测 试 (Stress), 压 力 测 试 连 接 速 度 测 试 指 的 是 打 开 网 页 的响应速度测试。负荷测试指的是进行一些边界数据的 测 试 ，压 力 测 试 更 像 是 恶 意 测 试 ，压 力 测 试 倾 向 应 该 是 致使整个系统崩溃三 、接 口 测 试 在 很 多 情 况 下 ，web 站 点 不 是 孤 立四 、可 用 性 测 试 可 用 性 /易 用 性 方 面 目 前 我 们 只 能 采用手工测试的方法进行评判，而且缺乏一个很好的评 判 基 准 进 行 ， 此 一 方 面 需 要 大 家 共 同 讨 论 。1、导 航

14、测 试 导 航 描 述 了 用 户 在 一 个 页 面 内 操 作 的 方 式 在不同的用户接口控制之间，例如按钮、对话框、列表 和 窗 口 等 ； 或 在 不 同 的 连 接 页 面 之 间 2、 图 形 测 试 在 Web 应 用 系 统 中 ，适 当 的 图 片 和 动 画 既 能 起 到 广 告 宣 传 的 作 用 ，又 能 起 到 美 化 页 面 的 功 能 3、内 容 测 试 内 容 测 试 用 来 检 验 Web 应 用 系 统 提 供 信 息 的 正 确 性 、准确 性和相关性五 、 兼 容 性 测 试 需 要 验 证 应 用 程 序 可 以 在 用 户 使 用的机器上运行。如

15、果您用户是全球范围的，需要测试 各 种 操 作 系 统 操 作 系 统 、浏 操 作 系 统 览 器 、视 频 设 置 和 modem 速 度 。 最 后 ， 还 要 尝 试 各 种 设 置 的 组 合 。1、 平 台 测 试 市 场 上 有 很 多 不 同 的 操 作 系 统 类 型 ， 最 常 见的有 Windows、Unix、Macintosh 、Linux 等。Web 应 用 系 统 的 最 终 用 户 究 竟 使 用 哪 一 种 操 作 系 统 ，取 决 于 用 户系 统的配置 。这 样 ，就 可能 会发 生兼 容性 问题，同 一 个应用可能在某些操作系统下能正常运行，但在另外的 操

16、作系统下 可 能会运行 失 败 。 因此， 在 Web 系统发 布 之前，需要在各种操作系统下对 Web 系统进行兼 容性测 试。2、浏览器测试 浏览器是 Web 客户端最核心的构件， 来 自不 同厂商的 浏览 器对 Java ， JavaScript 、 ActiveX 或 不 同 的 HTML 规 格 有 不 同 的 支 持 。 另 外 ， 框 架 和 层 次 结构风格在不同的浏览器中 也有不同的显示，甚 至根本 不 显 示 。 不 同 的 浏 览 器 对 安 全 性 和 Java 的 设 置 也 不 一 样。 测 试 浏览器 兼容 性的 一 个方法 是 创建一 个兼 容 性 矩 阵。在

17、这个 矩阵中，测 试不 同厂商、不 同版 本的浏 览 器 对 某 些构件和 设置的 适 应 性 。 采用 测试工具 ： 通 过白 盒 测试 白盒测试或 者黑盒 测试 黑 盒 测试 导出的 测试用 例，采 用相应的工具进行测试，可 以采用 OpenSTA 进行 测试 ， 白盒测试 黑盒 测 试 此测试 工 具可以 采用 不同 的 浏览器进行测试。3、组合 测试 最后需要进行组合测试。 600x800 的分辨 率 在 MAC 机 上 可 能 不 错 ，但 是 在 IBM 兼 容 机 上 却 很 难 看 。在 IBM 机 器 上 使 用 Netscape 能 正 常 显 示 ，但 却 无 法使 用

18、Lynx 来浏 览 。 如 果 是内 部 使 用 的 web 站 点， 测试可能会轻松一些。如果公司指定使用某个类型的浏览器 ， 那 么只需在 该浏览器 上进 行测 试。如 果所 有 的 人 都 使 用 T1 专 线 ， 可 能 不 需 要 测 试 下 载 施 加 。 有 些 内 部 应用程序，开 发部门可能 在系统需求中声明不支持某些 系统而只支持一些那些已设置的系统。但是，理想的情 况是 ， 系 统能在所 有机器上 运行 ，这 样就不 会限 制 将 来 的发展 和 变动。 六、安全测 试 Web 应 用 系 统的安 全 性 测试 区 域主 要 有： 1、 目 录 设 置 Web 安 全 的

19、第 一 步就 是正确 设置目录。每 个目录下应该 有 index.html 或 main.html 页 面 ， 这 样 就 不 会 显 示 该 目 录 下 的 所 有 内 容。如果没有执行这条规则。那么选中一幅图片，单击 鼠 标 右 键 ， 找 到 该 图 片 所 在 的 路 径 com/objects/images。然后在浏 览器 地址 栏中手工 输入该路径，发 现该站点所有 图片的列表。这 可能没什么关 系 。 但 是 进 入 下 一 级 目 录 com/objects ， 点 击 jackpot 。 在 该 目 录 下 有 很 多 资 料 ， 其 中 有 些 都 是 已 过 期页面。如果

20、该公司每个月都要更改产品价格信息，并 且保存过期页面。那 么只要 翻看 了一下这些记录， 就 可以估计他们的边际利润以及他们为了争取一个合同还 有多 大的降价 空间 。 如 果某个客 户在 谈判 之前查看 了这 些信息，他们在谈判桌上肯定处于上风。2登 录 现在的 Web 应用系统基本采用先注册，后 登陆 的方式。因此，必须测试有效和无效的用户名 和密码， 要 注意到是否大小写敏感，可以试多少次的限制，是否可 以不登陆而直接浏览某个页面等。3Session Web 应 用 系统是否 有超 时的 限制 ，也就 是 说 用户登陆后在一定时间内 （例如 15 分钟）没有点击任 何页 面 ， 是否需

21、要 重 新登 陆 才能正 常 使用。4日 志 日记文件为了保证 Web 应用系统的安全性，日 志文件是至关重要的.需要测试相关信息是否写进了日 志文件、是否可追踪。5 加 密 当使用了安全套接字时，还要测试加密是否正 确，检查信息的完整性。6 安 全 漏 洞 服务 器 端 的脚本常常构成安全漏洞，这些 漏洞又常常被黑客利用。所以，还要测试没有经过授权 就不能 在服务器端放置和 编辑脚本的问题。 目前网络 安全问题日益重要，特别对于有交互信息的网站及进行 电子商务活动的网站尤其重要。目 前我们 的测试没有涵 盖网 站的安全 性的 测试，我 们拟定 采用 工具 来测定。 七 代码合法性 测试 代码

22、合法性测试 主 要包括 2 个部 分 ： 程序代码合法性检查与显示代码合法性检查。首先我要做的就是要选择好题目和网站的风 格，之后我就分步骤准备在制作网站前所要做好的准备 工作。我浏览了中国各个有名网站的一些特点，借鉴这 些网站的优秀之处，不好的地方在自己的网站上加以改 良，从而使自己的网站更加美观。回顾这次课程设计，至今我仍感慨颇多。的却，从 选题到开始制作，从理论到实践，在实训机房日子里， 可以说得是苦多于甜，但是可以学到很多很多的的东西 同时不仅可以巩固了以前所学过的知识，而且学到了很 多在书本上所没有学到过的知识。在选择好题目和网站的风格之后，我就开始了实训 项目的进程，按照实训方案的

23、规定，先是将网站的总体 策划以书面的形式展现出来，通过老师审核之后，在相 应的时间段找相关的素材，搜集与主题相关的文字、图 像等。再是设计网站的内容结构、目录结构和链接结构 设计首页及其页面的版式结构。然后创建本地网站，建 立网站的目录结构。制作首页、二级子页、内容页，创 建超级链接。最后就是测试与浏览网页，如果还有什么 不理想的地方再改进再预览，如此反复，最后达到最好 效果！在此次网站的设计与制作过程中，难免会遇到过各 种各样的问题，这毕竟是第一次独自设计网站、制作网 站。但值得高兴的是：在设计的过程中发现了自己的不 足之处，对以前所学过的知识理解得不够深刻，掌握得 不够牢固，没有能完全达到

24、自己预期的效果，还好通过 老 师 的 细 心 指 导 才 能 达 到 最 终 效 果 三天的网页设计与制作的实训课程结束了，回顾这 次课程设计实训，至今我仍感慨颇多。的确，从选材到 开始制作，从理论到实践，在两周的实训日子里，可以 说得是苦多于甜，但是可以学到很多很多的的东西，同 时不仅可以巩固了以前所学过的知识，而且学到了很多 在书本上所没有学到过的知识。更懂得并亲身体会到了 理论与实际相结合的重要性，只有理论知识是远远不够 的，把所学的理论知识与实践相结参考文献1 佟 勇 臣 . 动 态 网 页 设 计 基 础 教 程 M. 科 学 出 版 社 20072 蔡 催 平 ， 尚 俊 杰 .网 络 程 序 设 计 ASPM. 北 京 ： 清 华 大 学 出 版 社 ， 2004.2