K1373-3-30chencaihtml网页设计实习报告分析.doc

静态网页设计与制作报告 题 目: 静态网页设计与制作 所 属 学 院: 应用信息系 班 级: 　 K1373-3-31 姓 名:　 　 学 号: 20139730331 指 导 教 师: 叶 小婷 翟亚红 2016年11月6日 目 录 一、 摘要 3 二、 项目概述 3 1、网页制作开发背景 3 2、设计内容 3 3、设计目的 3 三、 需求分析 4 1、基本工具需求 4 2、基本要素需求? 4 3、网页视觉设计与审美需求? 4 四、 总体设计 5 1、页面布局 5 2、模块分析 6 五、详细设计 6 1、首页制作 6 （1）页头的制作 6 （2）首页制作 7 2、主体部分制作 9 （1）项目分类制作 9 （2）图片制作 10 （3）登录制作 11 3、尾部制作 12 （1）消费介绍制作 12 （2）页尾制作 13 六、测试 15 1、功能测试 15 （1）链接测试 15 （2）表单测试 15 （3）设计语言测试 15 2、可用性测试 ： 16 （1）导航测试 16 （2）图形测试 16 七、 总结 17 摘要 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 项目概述 1、网页制作开发背景 Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。 2、设计内容 本设计是利用DreamWave软件建立一个名为哇米网站，是一个精品高端、时尚便捷的用户点餐平台,在这个网站上可以为我们提供外卖订餐等多项服务的本地化生活平台,在网站可以找到吃喝玩乐各项娱乐服务，方便快捷。 ? 3、设计目的 掌握Dreamweaver软件的使用。掌握html语言中的表格和框架等的使用。掌握web应用开发技术的基础语言-----html语言和CSS语言。学会网站设计的基本要点，和网站框架以及各种标签。 需求分析 1、基本工具需求 Dreamweaver?CS6、，用Dreamweaver?CS6中HTML进行页面布局、页面CSS编码编辑、排版、设计等功能，可以利用Photoshop制作图片和对图片进行修改。 2、基本要素需求? 运用图片是设计与制作网页必不可少的部分，图片的运用能够给人更加直观的信息，图片的要求与页面的内容有关，我做的网页是点餐、订餐网站，因此所用的图片都是一些美食相关图片，图片比较单一。不过为了节省时间老师提前给了我们图片，因而更能够设计出较好的网页。 3、网页视觉设计与审美需求? 人们对美的需求是不断深入的，网页设计也同样如此。如何使访客更好的接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对平面设计美学的一种继承和延伸，两者的表现形式和目的具有一定的相似性。起初，我编排完的网页内容杂乱，缺乏规范性设计，利用html、css设计的加注脚本特效的网页，由于缺乏技术性，致使页面效果不美观。在老师指导下同时也经过一周的调整和修改，查找课本资料和从网上搜集知识，基本上使得网页看起来主次分明、有条理，也颇有美感了。 总体设计 1、页面布局 哇米网站的页面布局大致分为上、中、下三部分，上部分是包含页头和首页这两部分，中部分左边包括各种项目分类简介，中间以及为图片，右边为登录界面。下部分这包括了联系方式和相关链接网址。最底则下是页尾部分。且页面设计基本按照下图板块所示设计如图1. 图1网页布局图 2、模块分析 在需求分析的基础上，经过我们的讨论分析，确定网站由以下几个模块组