《K1373-3-30chencaihtml网页设计实习报告》由会员分享，可在线阅读，更多相关《K1373-3-30chencaihtml网页设计实习报告（17页珍藏版）》请在金锄头文库上搜索。
1、 静态网页设计与制作报告题 目: 静态网页设计与制作 所 属 学 院: 应用信息系 班 级: K1373-3-31 姓 名: 学 号: 20139730331 指 导 教 师: 叶 小婷 翟亚红 2016年11月6日目 录一、 摘要3二、 项目概述31、网页制作开发背景32、设计内容33、设计目的3三、 需求分析41、基本工具需求42、基本要素需求43、网页视觉设计与审美需求4四、 总体设计51、页面布局52、模块分析6五、详细设计6 1、首页制作6 （1）页头的制作6 （2）首页制作7 2、主体部分制作9 （1）项目分类制作9 （2）图片制作10 （3）登录制作113、尾部制作12 （1）消
2、费介绍制作12 （2）页尾制作13六、测试151、功能测试15（1）链接测试15（2）表单测试15（3）设计语言测试152、可用性测试 ：16（1）导航测试16（2）图形测试16七、 总结171、 摘要 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。2、 项目概述1、网页制作开发背景Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可
3、以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。2、设计内容本设计是利用DreamWave软件建立一个名为哇米网站，是一个精品高端、时尚便捷的用户点餐平台,在这个网站上可以为我们提供外卖订餐等多项服务的本地化生活平台,在网站可以找到吃喝玩乐各项娱乐服务，方便快捷。3
4、、设计目的掌握Dreamweaver软件的使用。掌握html语言中的表格和框架等的使用。掌握web应用开发技术的基础语言-html语言和CSS语言。学会网站设计的基本要点，和网站框架以及各种标签。3、 需求分析1、基本工具需求 DreamweaverCS6、，用DreamweaverCS6中HTML进行页面布局、页面CSS编码编辑、排版、设计等功能，可以利用Photoshop制作图片和对图片进行修改。2、基本要素需求运用图片是设计与制作网页必不可少的部分，图片的运用能够给人更加直观的信息，图片的要求与页面的内容有关，我做的网页是点餐、订餐网站，因此所用的图片都是一些美食相关图片，图片比较单一。
5、不过为了节省时间老师提前给了我们图片，因而更能够设计出较好的网页。3、网页视觉设计与审美需求人们对美的需求是不断深入的，网页设计也同样如此。如何使访客更好的接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对平面设计美学的一种继承和延伸，两者的表现形式和目的具有一定的相似性。起初，我编排完的网页内容杂乱，缺乏规范性设计，利用html、css设计的加注脚本特效的网页，由于缺乏技术性，致使页面效果不美观。在老师指导下同时也经过一周的调整和修改，查找课本资料和从网上搜集知识，基本上使得网页看起来主次分明、有条理，也颇有美感了。4、 总体设计1、页面布局哇米网站的页面布局大致分为上、中、下
6、三部分，上部分是包含页头和首页这两部分，中部分左边包括各种项目分类简介，中间以及为图片，右边为登录界面。下部分这包括了联系方式和相关链接网址。最底则下是页尾部分。且页面设计基本按照下图板块所示设计如图1. 图1网页布局图2、模块分析在需求分析的基础上，经过我们的讨论分析，确定网站由以下几个模块组成：页头、首页、项目分类、照片、登录、消费介绍、页尾。如表1所示：页头首页项目分类照片登录消费介绍页尾哇米 网页 表1项目分析模块表五、详细设计1、首页制作 （1）页头的制作 页头部部分是1个DIV层中嵌套无序列表，其结构如下：之后对这部分进行大小、颜色排列和ciss的定义设置：制作之后效果如下所示：2
7、、首页制作 首页导航栏的制作同样是由div一个大盒子嵌套四个div，然后分别有img标签、H标签、制作图片、文本、文本框和按钮框。在制作首页选项时由一个div盒子嵌套无序列表。其结构如下：之后对这部分进行大小、颜色排列和ciss的定义设置：制作之后效果如下所示：2、主体部分制作（1）项目分类制作 项目的分类共分为五类，有商圈、餐厅、菜系、人均消费、热门标签。每一类都是有一个div盒子嵌套一个无序列表.制作的。其结构如下：之后对这部分进行大小、颜色排列和ciss的定义设置：制作之后效果如下所示：（2）图片制作 图片部分由一个div盒子嵌套span标签，图片都在span标签内由标签制作。其结构如下
8、：之后对这部分进行大小、位置排列和ciss的定义设置：制作之后效果如下所示：（3）登录制作 登录这部分由一个div嵌套三个div和一无序列表制作的。其结构如下：之后对这部分进行大小、位置排列和ciss的定义设置：制作之后效果如下所示：3、尾部制作（1）消费介绍制作同样这部分由盒子div嵌套div制作的，其结构如下：之后对这部分进行大小、位置排列和ciss的定义设置：制作之后效果如下所示：（2）页尾制作这部分由盒子div嵌套div和无序列表制作的。结构如下：之后对这部分进行大小、颜色排列和ciss的定义设置：制作之后效果如下所示：六、测试1、功能测试（1）链接测试链接是Web应用系统的一个主要特
9、征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试。（2）表单测试当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。在这种情况下，我们必须测试提交操作的完整性，以校验提
10、交给服务器的信息的正确性。例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。（3）设计语言测试Web设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML等。当在分布式环境中开发时，开发人员都不在一起，这个问题就显得尤为重要。除了HTML的版本问题外，不同的脚本语言，例如Java、JavaScript、ActiveX、VBScript或Perl等也要进行验证。2、可用性测试 ：（1）导航测试
11、导航描述了用户在一个页面内操作的方式，在不同的用户接口控制之间，例如按钮、对话框、列表和窗口等；或在不同的连接页面之间。通过考虑下列问题，可以决定一个Web应用系统是否易于导航：导航是否直观？Web系统的主要部分是否可通过主页存取？Web系统是否需要站点地图、搜索引擎或其他的导航帮助？在一个页面上放太多的信息往往起到与预期相反的效果。Web应用系统的用户趋向于目的驱动，很快地扫描一个Web应用系统，看是否有满足自己需要的信息，如果没有，就会很快地离开。很少有用户愿意花时间去熟悉Web应用系统的结构，因此，Web应用系统导航帮助要尽可能地准确。导航的另一个重要方面是Web应用系统的页面结构、导航
12、、菜单、连接的风格是否一致。确保用户凭直觉就知道Web应用系统里面是否还有内容，内容在什么地方。Web应用系统的层次一旦决定，就要着手测试用户导航功能，让最终用户参与这种测试，效果将更加明显。（2）图形测试在Web应用系统中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的功能。一个Web应用系统的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。（3）内容测试内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。信息的正确性是指信息是可靠的还是误传的。例如，在商品价格列表中，错误的价格可能引起财政问题甚至导致法律纠纷；信息的准确性是指是否有语法或拼写错误。这种测试通
13、常使用一些文字处理软件来进行，例如使用Microsoft Word的“拼音与语法检查”功能；信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般Web站点中的所谓“相关文章列表”。（4）整体界面测试整体界面是指整个Web应用系统的页面结构设计，是给用户的一个整体感。例如：当用户浏览Web应用系统时是否感到舒适，是否凭直觉就知道要找的信息在什么地方？整个Web应用系统的设计风格是否一致？对整体界面的测试过程，其实是一个对最终用户进行调查的过程。一般Web应用系统采取在主页上做一个调查问卷的形式，来得到最终用户的反馈信息。 对所有的可用性测试来说，都需要有外部人员(
14、与Web应用系统开发没有联系或联系很少的人员)的参与，最好是最终用户的参与。七、总结通过这次的学习，激发了我对网页设计的兴趣，这门课教会了我很多东西，培养了我很多，而我认为这其中最重要的便是自学能力。前言的学习相对比后台容易些，但是认识一个陌生的事物是需要花费很多精力和时间的，但是就是在我解决了一个个疑惑后，我发现，每一次的解决都让我对这个新事物有了一个深层的理解，而解决疑惑的过程其实是就是培养能力的过程。同时也要多用多写记住标签。而且页面的制作需要制作者有一个全面的大局观，要分析内容和布局的比例，不同的栏目有不同的比重。在学习网页制作的时间里，我学会了怎么去制作一个网页，当然在制作的过程中不可避免的遇到了各种各样的问题，但还是在老师和同学的帮助下一一解决。虽然最
