网站规划与设计

1、企业网站规划与设计目录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 功能及应用背景随着互联网的发展，其信息传播效率逐步为人们所关注。越来越多的企业走向网络，以期通过网

2、络加大对自己的宣传力度，从而扩展销售渠道，增加销售量。现在互联网已经成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。目前商务网站正如雨后春笋般的大量涌现，企业网络化已经成为一种时尚。本设计利用Dreamweaver cs3制作静态网页，利用Photoshop cs3处理图形和制作图像。通过网站，全面宣传，展示企业的风采、优点与特色，发布企业的重大活动安排与最新消息，增强企业与客户之间的联系，在Internet上实现完成部分业务，提高办事效率。1.2 网站建设的目的和定位1) 帮助企业建立有效的企业形象宣传、企业风采展示、公司产品宣传，打造XX集团

3、新形象。2) 充分利用网络快捷、跨地域优势进行信息传递，对公司的新闻进行及时的报道。3) 通过在线供求系统实现网上的供求信息的查询、订购、交易联系，优化信息的流通渠道。2 网站开发技术简介2.1 Photoshop的简单介绍Photoshop是专业网络图形设计和处理的软件，使用Photoshop来创建、编辑、处理网页图片，可以为网页增加先进的互动性，在专业环境中优化图像。在网站开发的前期，需要使用Photoshop来绘出网站的轮廓，将绘制好的首页切片冰储存为Web格式，以便在Dreamweaver中的使用。2.2 Flash的简单介绍随着网络技术的发展，网页上出现了越来越多的Flash动画。一

4、个优秀的网站是离不开动画的，无论是Banner、按钮、网站宣传动画还是整个网站的首页等，都需要使用Flash来完成所有的操作。Flash动画已经成为当今网站必不可少的部分，美观的动画能够为网页增色不少，从而吸引更多的浏览者。2.4 IIS的简单介绍IIS（Internet Information Services）是一个集成了多种Internet服务（WWW服务、FTP服务等）的服务器软件。 IIS能发布网页，并且有ASP（Active Server Pages）、JAVA、VBscript产生页面，有着一些扩展功能。IIS支持一些有趣的东西，象有编辑环境的界面（FRONTPAGE）、有全文检

5、索功能的（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服务器，分别用

6、于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。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 网站设计原则打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理

7、的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。本网站的搭配主色为：白、淡蓝、黑、三种颜色。白色代表纯洁、纯真、朴素、神圣、明快。淡蓝色代表热情、活泼、热闹、温暖、幸福、吉祥。黑色代表崇高、坚实、严肃、刚健、端庄，充分代表了一个企业应有的气质和形象。给客户留下深刻的印象。根据 浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“优秀网站案

8、例”靠左边放，这样能更好地吸引浏览者的眼球，同时也体现公司的专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整个首页处于于静于动的画面。右边则是创意设计公司的设计理念。4.2 网站的总体结构本网站主要包括网站前台、网站后台两大部分组成。 网站前台包括公司简介、公司新闻、领导致辞、行业信息、留言薄、荣誉，6个功能栏目。网站的总体结构如图4.3 网站总体结构图公司简介公司新闻领导致辞行业信息留言薄沈煤荣誉网站4.4网站框线图5.主要网页的设计5.1首页设计首页是全站内容的目录和索引。所以在首页设计这些模块一般情况都是需要设计上去的。网站设计的色到必须符合主题，需要根据一个企业的类型

9、来定义整个界面的色调。首页的设计还必须遵循快捷，简洁的原则，能概括全站的内容。各模块的设计所占的比例也必须要合理，浏览量或者重要的模块应适当增加其在整个界面中的比例。设计的过程还需要合理安排文字和图片的协调搭配，要让视觉效果不单调。经过对网站的总的合理的布局分析，该企业导航主要有6个栏目，分别为：首页、公司简介、公司新闻、领导致辞、行业信息和留言薄。首页上还分布有4个模块，分别为：政策法规、XX荣誉、市场信息和企业文化。其结构如图5.1所示。5.2 公司简介的设计公司简介主要从公司的规模、公司主营产品、公司发展优势等几个方面来介绍XX集团。包括企业文化、公司理念，主要对公司企业文化进行详细介绍

10、，让人们能更深入的了解XX集团。其结构如图5.2所示。图5.2 公司简介页面5.3 公司新闻的设计公司新闻主要是公司的各项工程的和一些项目定期发布公司的重要新闻，充分利用网络快捷、跨地域优势进行信息传递，对公司的新闻进行及时的报道。其结构如图5.3所示。图5.3 公司新闻页面5.4 领导致辞的设计领导致辞主要由公司董司长，对长期以来关注和支持公司发展的各界人士表示感谢，同时对与XX集团的现况做了一定的介绍，对未来做了一定的规划。其结构如图5.4所示。图5.4 领导致辞页面 6 网站调试1）测试准备测试前对被测系统做好以下准备：系统的全面备份，包括应用程序备份、数据备份等；记录测试前系统状态；制定应急措施，确保在测试中发生问题时系统可恢复。测试员应在测试开始前了解网页的相关情况，对测试的预期结果应进行准备和预测。测试前要做好真实数据的准备工作，并进行系统的数据初始化。（2）用户界面测试主要测试导航条、内容、颜色、背景、图像、返回等。（3）功能测试主要测试站点中的链接等。链接测试：目的是检查各个URL所联