网页实训报告

焦作大学实训报告课程：《网页设计与制作》学院(系)：信息工程专业：应用专业学号：作者：题目：我的居室指导教师：2011 年12月前言随着现代社会信息化产业的深入发展,人们越来越重视对信息资源的开发、利用和管理,根据得到的信息进行决策。

这就要求现代化管理人员每天都要处理大量信息,而计算机的诞生、发展就为处理大量信息带来了方便,随着计算机的不断发展,网络技术和数据库技术的普遍应用,用户的功能更加细致、完善,并且提高了系统开发的效率。

这就要求系统开发者要以最快的速度开发出功能最完善的系统,而现在普遍使用的面向对象法使信息系统的应用深入到社会的各个领域。

在面向对象的设计中，在各行各业中离不开信息处理，计算机被广泛应用于B/S系统环境。

计算机的好处在于它能够进行信息管理。

使用计算机进行信息控制，不仅提高了工作效率，而且大大的提高了安全性。

互联网已成为人们日常生活的重要组成部分，网页设计和网站建设也成为21世纪人才必备的计算机现代化技能之一。

高级的网页制作人才是企业梦寐以求的时代骄子。

网页是按照网页文档规范编写的文档，能将文字、图像、声音等各种多媒体文件组合在一起，是一种超文本文档，该文档可用WW W方式在网上传播，并可悲浏览器识别并显示成We b页面网页制作应该说是技术和艺术结合的工作。

网页本身是计算机技术的产物，计算机技术当然在其中起着重要作用；网页又好比是随时可以更新的动态电子杂志、美学、设计、内容编排等方面的因素也在发挥这作用。

目录1.1 开发背景随着我国经济的发展,各行各业在竞争中求生存的形式越来越严峻,各单位纷纷以提高人员效率、重组人员结构为手段,对人力资源进行合理优化来提高经济效率,减少单位开支。

在科技日益发的今天,这种落后的处理方式已远远满足不了目前的实际需要了。

2 使用技巧网页制作应该说是技术和艺术结合的工作。

网页本身是计算机技术的产物，计算机当然在其中起着重要的作用；网页又好比是随时可以更新的动态电子杂志，美学、设计、内容编排等方面的因素也在发挥着作用。

网页的创作，一般来说，基本上可以分为站点的规划、网页的设计和网页的制作三步。

1）站点的规划在制作一个网站是，先要设计主题和风格，如网站要表现哪方面的内容，以什么样的方式表现，制作的目的是什么等。

这样，在后面的工作中才会有的放矢。

在还没有着手之前，只需要有一个基本的设想就可以了，并不需要方方面面都考虑得很周全、很细致。

在确定了主题与风格之后，下一步的工作，就是要找相关的资料，俗话说，巧妇难为无米只炊。

网页的主要作用是作为一种载体来传达信息。

包含文字内容、图像。

还可以收集一些自己喜欢的音乐或视频等。

对于一个经常制作网页的作者来说，平时就应该注意储备一些资料，以备制作各种不同的网页时使用。

将收集好的资料妥善保存，最好分门别类，有条有理，这样再要使用的时候，可以信手拈来，为以后繁重的制作工作提供方便，节约时间。

2）网页的设计设计是网页制作过程中非常重要的一个环节。

一般包含创意的设计、框架的设计、布局的设计、色彩的设计等。

框架设计决定了网页的整体布局，选择什么样的框架要由具体的内容来决定。

布局设计是根据每个页面的信息量和表达方式来确定如何将各种形式的素材合理地安排在有限页面空间内。

3 制作过程在本次实训课上我制作的是有关“我的居室”的网站。

这个网站包含五个网页，它们是：首页、个人信息、作品展示、联系方式。

下面由我来介绍我制作的网站。

首先在制作网页之前要创建本地站点。

在菜单栏中选择“站点”—>“管理站点”命令，打开“管理站点”对话框。

点击“新建”按钮，选择弹出菜单中的“站点”命令。

然后就是对站点的设置。

完成后按确定按钮即可。

在“首页”中我向网页中插入一个层，在层中插入用fireworks 8制作的图片做背景。

在背景上输入文本和用fireworks 8制作的按钮放入网页中。

3、下面就是制作网站的流程：创建站点：主要用到dreamweaver软件，先用IIS 创建本地服务器站点，一来能随时看到制作效果，二来动态网站所必须。

美工人员属于艺术类或IT类，不懂内容架构，只管配色与制作图片，他们将网站策划交过来的效果图作进一步修饰，然后将其切片，插入到dreamweaver中，生成html文件。

因为dreamweaver图片制作能力不强，制成的网页的不漂亮，必须用fireworks做好，然后切片插入，再用热区功能创建链接。

制作首页和网页主页（Home Page）主页（Home Page)它是一个网页，是进入一个网站的开始画面，就同“瘟酒吧”的蓝天白云一样。

也就是说，主页是一个网站的门面，要想设计出一个优秀的网站，就必须有一个“要让浏览者想不看都难”的主页，它必须引人入胜，能吸引每一个来访者的注意力，引发人们的好奇心，能让人产生一种深入探索你的网站的冲动。

优秀的主页是一个好的网站必须具备的第一要素。

制作首页和网页的步骤：启动dreamweaver，打开以上建立的站点。

使用文件面板创建网站首页：A：在文件面板中，选择以上建立的站点，右键单击，新建一个网页文件，命名为Index.html.B:在文件面板中该文件名上右击鼠标，选择“设成首页”，以区别于其他网页文件。

在文件面板中双击首页文件、设置页面属性。

在首页文件Index.html的页面属性中，设置左边距和上边距为0像素。

之后就根据自己规划好的布局和自己准备的素材去设计自己的首页。

1.1.实训意义：网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求.在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用.4 测试网站测试流程、要求及测试报告一个网站基本完工后，需要通过下面三步测试才可以交活。

一、制作者测试，包括美工测试页面、程序员测试功能。

在做完后第一时间内由制作者本人进行测试。

a) 页面包括首页、二级页面、三级页面的页面在各种常用分辨率下有无错位；图片上有没有错别字；各连接是否是死连接；各栏目图片与内容是否对应等b) 功能达到客户要求；数据库连接正确；各个动态生成连接正确；传递参数格式、内容正确；试填测试内容没有报错；页面显示正确二、全面测试根据交工标准和客户要求，由专人进行全面测试也是包括页面和程序两方面，而且要结合起来测，保证填充足够的内容后不会导致页面变形。

另外要检查是否有错别字，文字内容是否有常识错误。

三、发布测试网站发布到主服务器之后的测试，主要是防止环境不同导致的错误功能模块需要单独的测试用例的设计导出，对于应用程序模块需要设计者提供基本路径测试法的测试用例。

1、链接测试链接是Web 应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。

链接测试可分为三个方面：1）测试所有链接是否按指示的那样确实链接到了该链接的页面；2）测试所链接的页面是否存在；3）保证Web 应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL 地址才能访问。

链接测试可以自动进行，现在已经有许多工具可以采用。

链接测试必须在集成测试阶段完成，也就是说，在整个Web 应用系统的所有页面开发完成之后进行链接测试。

Xenu------主要测试链接的正确性的工具可惜的是对于动态生成的页面的测试会出现一些错误。

4、设计语言测试Web 设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML 等二、性能测试网站的性能测试性能测试对于网站的运行而言异常重要网站的性能测试主要从三个方面进行：连接速度测试、负荷测试(Load)和压力测试压力测试(Stress), 压力测试连接速度测试指的是打开网页的响应速度测试。

负荷测试指的是进行一些边界数据的测试，压力测试更像是恶意测试，压力测试倾向应该是致使整个系统崩溃三、接口测试在很多情况下，web 站点不是孤立。

四、可用性测试可用性/易用性方面目前我们只能采用手工测试的方法进行评判，而且缺乏一个很好的评判基准进行，此一方面需要大家共同讨论。

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

如果您用户是全球范围的，需要测试各种操作系统操作系统、浏操作系统览器、视频设置和modem 速度。

最后，还要尝试各种设置的组合。

1、平台测试市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux 等。

Web 应用系统的最终用户究竟使用哪一种操作系统，取决于用户系统的配置。

这样，就可能会发生兼容性问题，同一个应用可能在某些操作系统下能正常运行，但在另外的操作系统下可能会运行失败。

因此，在Web 系统发布之前，需要在各种操作系统下对Web 系统进行兼容性测试。

2、浏览器测试浏览器是Web 客户端最核心的构件，来自不同厂商的浏览器对Java，JavaScript、ActiveX、或不同的HTML 规格有不同的支持。

另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。

不同的浏览器对安全性和Java 的设置也不一样。

测试浏览器兼容性的一个方法是创建一个兼容性矩阵。

在这个矩阵中，测试不同厂商、不同版本的浏览器对某些构件和设置的适应性。

采用测试工具：通过白盒测试白盒测试或者黑盒测试黑盒测试导出的测试用例，采用相应的工具进行测试，可以采用OpenSTA 进行测试，白盒测试黑盒测试此测试工具可以采用不同的浏览器进行测试。

3、组合测试最后需要进行组合测试。

600x800 的分辨率在MAC 机上可能不错，但是在IBM 兼容机上却很难看。

在IBM 机器上使用Netscape 能正常显示，但却无法使用Lynx 来浏览。

如果是内部使用的web 站点，测试可能会轻松一些。

如果公司指定使用某个类型的浏览器，那么只需在该浏览器上进行测试。

如果所有的人都使用T1 专线，可能不需要测试下载施加。

有些内部应用程序，开发部门可能在系统需求中声明不支持某些系统而只支持一些那些已设置的系统。

但是，理想的情况是，系统能在所有机器上运行，这样就不会限制将来的发展和变动。

六、安全测试Web 应用系统的安全性测试区域主要有：1、目录设置Web 安全的第一步就是正确设置目录。