网站规划与设计.doc

企业网站规划与设计目录1 项目背景11、1 功能及应用背景11、2 网站建设得目得与定位12 网站开发技术简介22、1 Photoshop得简单介绍22、2 Flash得简单介绍22、4 IIS得简单介绍23 网站建设日程表34 网站总体设计44、1 网站设计目标与原则44、2 网站得总体结构44、3 网站总体结构图54、4网站框线图55、主要网页得设计65、1首页设计65、2 公司简介得设计75、3 公司新闻得设计85、4 领导致辞得设计96 网站调试117 用户使用说明111 项目背景1、1 功能及应用背景随着互联网得发展,其信息传播效率逐步为人们所关注。越来越多得企业走向网络,以期通过网络加大对自己得宣传力度,从而扩展销售渠道,增加销售量。现在互联网已经成为人们快速获取、发布与传递信息得重要渠道,它在人们政治、经济、生活等各个方面发挥着重要得作用。目前商务网站正如雨后春笋般得大量涌现,企业网络化已经成为一种时尚。本设计利用Dreamweaver cs3制作静态网页,利用Photoshop cs3处理图形与制作图像。通过网站,全面宣传,展示企业得风采、优点与特色,发布企业得重大活动安排与最新消息,增强企业与客户之间得联系,在Internet上实现完成部分业务,提高办事效率。1、2 网站建设得目得与定位1) 帮助企业建立有效得企业形象宣传、企业风采展示、公司产品宣传,打造XX集团新形象。2) 充分利用网络快捷、跨地域优势进行信息传递,对公司得新闻进行及时得报道。3) 通过在线供求系统实现网上得供求信息得查询、订购、交易联系,优化信息得流通渠道。2 网站开发技术简介2、1 Photoshop得简单介绍Photoshop就是专业网络图形设计与处理得软件,使用Photoshop来创建、编辑、处理网页图片,可以为网页增加先进得互动性,在专业环境中优化图像。在网站开发得前期,需要使用Photoshop来绘出网站得轮廓,将绘制好得首页切片冰储存为Web格式,以便在Dreamweaver中得使用。2、2 Flash得简单介绍随着网络技术得发展,网页上出现了越来越多得Flash动画。一个优秀得网站就是离不开动画得,无论就是Banner、按钮、网站宣传动画还就是整个网站得首页等,都需要使用Flash来完成所有得操作。Flash动画已经成为当今网站必不可少得部分,美观得动画能够为网页增色不少,从而吸引更多得浏览者。2、4 IIS得简单介绍IIS(Internet Information Services)就是一个集成了多种Internet服务(服务、FTP服务等)得服务器软件。 IIS能发布网页,并且有ASP(Active Server Pages)、JAVA、VBscript产生页面,有着一些扩展功能。IIS支持一些有趣得东西,象有编辑环境得界面(FRONTPAGE)、有全文检索功能得(INDEX SERVER)、有多媒体功能得(NET SHOW) 其次,IIS就是随Windows NT Server 4、0一起提供得文件与应用程序服务器,就是在Windows NT Server上建立Internet服务器得基本组件。它与Windows NT Server完全集成,允许使用Windows NT Server内置得安全性以及NTFS文件系统建立强大灵活得InternetIntranet站点。IIS(Internet Information Server,互联网信息服务)就是一种Web(网页)服务组件,其中包括Web服务器、FTP服务器、NNTP服务器与SMTP服务器,分别用于网页浏览、文件传输、新闻服务与邮件发送等方面,它使得在网络(包括互联网与局域网)上发布信息成了一件很容易得事。3 网站建设日程表完成整个项目所需时间为三个月,其中各项规划任务如下表所示:时间任务内容3月9日16日拟定项目3月17日23日制定初步项目计划4月6日19日网站初步框架4月20日5月1日网站内容具体丰富5月2日5月10日总结反思,网站细节完善5月11日24日计划微调,网站用户体验感测试5月25日6月7日网站装饰再加工,CSS布局,JS语言6月8日6月15日最终测试4 网站总体设计4、1 网站设计原则打开一个网站,给用户留下第一印象得既不就是网站丰富得内容,也不就是网站合理得版面布局,而就是网站得色彩。色彩对人得视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩得运用与搭配。因为网页设计属于一种平面效果设计,在排除立体图形、动画效果之外,在平面图上,色彩得冲击力就是最强得,它很容易给用户留下深刻得印象。因此,在设计网页时,必须要高度重视色彩得搭配。本网站得搭配主色为:白、淡蓝、黑、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、吉祥。黑色代表崇高、坚实、严肃、刚健、端庄,充分代表了一个企业应有得气质与形象。给客户留下深刻得印象。根据 浏览者在阅读时经常采用从上到下,从左到右得习惯,主体内容中,将“优秀网站案例”靠左边放,这样能更好地吸引浏览者得眼球,同时也体现公司得专业、能力等。优秀网站案例采用网页图片切换得形式展现在首页中,使整个首页处于于静于动得画面。右边则就是创意设计公司得设计理念。4、2 网站得总体结构本网站主要包括网站前台、网站后台两大部分组成。 网站前台包括公司简介、公司新闻、领导致辞、行业信息、留言薄、荣誉,6个功能栏目。网站得总体结构如图4、3 网站总体结构图公司简介公司新闻领导致辞行业信息留言薄沈煤荣誉网站4、4网站框线图5、主要网页得设计5、1首页设计首页就是全站内容得目录与索引。所以在首页设计这些模块一般情况都就是需要设计上去得。网站设计得色到必须符合主题,需要根据一个企业得类型来定义整个界面得色调。首页得设计还必须遵循快捷,简洁得原则,能概括全站得内容。各模块得设计所占得比例也必须要合理,浏览量或者重要得模块应适当增加其在整个界面中得比例。设计得过程还需要合理安排文字与图片得协调搭配,要让视觉效果不单调。经过对网站得总得合理得布局分析,该企业导航主要有6个栏目,分别为:首页、公司简介、公司新闻、领导致辞、行业信息与留言薄。首页上还分布有4个模块,分别为:政策法规、XX荣誉、市场信息与企业文化。其结构如图5、1所示。5、2 公司简介得设计公司简介主要从公司得规模、公司主营产品、公司发展优势等几个方面来介绍XX集团。包括企业文化、公司理念,主要对公司企业文化进行详细介绍,让人们能更深入得了解XX集团。其结构如图5、2所示。图5、2 公司简介页面5、3 公司新闻得设计公司新闻主要就是公司得各项工程得与一些项目定期发布公司得重要新闻,充分利用网络快捷、跨地域优势进行信息传递,对公司得新闻进行及时得报道。其结构如图5、3所示。图5、3 公司新闻页面5、4 领导致辞得设计领导致辞主要由公司董司长,对长期以来关注与支持公司发展得各界人士表示感谢,同时对与XX集团得现况做了一定得介绍,对未来做了一定得规划。其结构如图5、4所示。图5、4 领导致辞页面6 网站调试1)测试准备测试前对被测系统做好以下准备:系统得全面备份,包括应用程序备份、数据备份等;记录测试前系统状态;制定应急措施,确保在测试中发生问题时系统可恢复。测试员应在测试开始前了解网页得相关情况,对测试得预期结果应进行准备与预测。测试前要做好真实数据得准备工作,并进行系统得数据初始化。(2)用户界面测试主要测试导航条、内容、颜色、背景、图像、返回等。(3)功能测试主要测试站点中得链接等。链接测试:目得就是检查各个URL所联接得页面就是否正确。表单测试:目得就是检查每个表单与程序就是否正确联接,能够正确地发送用户请求。(4)兼容性测试主要检验应用能否在不同得客户端使用。如苹果(iOS系统得)用户,经常使用chrome,Firefox等浏览器得用户就是否都能正常使用。7 用户使用说明此网站运行得环境为安装有IIS组件得Windows XP或更高版本得操作系统。