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、模块分析 在需求分析的基础上，经过我们的讨论分析，确定网站由以下几个模块组成：页头、首页、项目分类、照片、登录、消费介绍、页尾。如表1所示：