240网站规划和设计大作业范例.docx

网站工程规划与设计目录
一、工程背景2(1)网站需求分析2
〔2)网站的目的及功能定位2二、网站开发平台2
三、网站建立日程表3
四、站点地图3
五、线框图3
设计标准4
七、网页UI设计5
4、主要页面的详细设计图6
九、网站测试6测试准备6
(1) 用户界面测试6〔3)功能测试6
〔4)兼容性测试6十、网站推广6
-、工程背景
(1)网站需求分析
随着不同国家之间交流越来越广泛，不同国家的饮食文化也随之传播，人们逐渐开场产 生了解不同国家饮食的需求。
近年来，舌尖上的中国的热播，通过对中华美食的多个侧面，来展现食物给中国人生活 带来的仪式、伦理等方面的文化。由此我们深受启发，准备让大家见识多个有代表性的国家 特色食材以及与食物相关、构成他们各自美食特有气质的一系列元素，从而了解世界饮食文 化的精致和源远流长。
出自对事物的热爱，对自然的敬畏，同时为了让大家更多地了解世界广阔的饮食文明， 我们决定制作六个最具有代表性的国家的饮食介绍，相信会获得各年龄阶层曾的青睐。
(2)网站的目的及功能定位
目的及功能：展示各国各地的美食，使群众全方位了解不同地区的饮食文化；为吃货的 旅行提供参考；介绍大学食堂趣闻，贴近生活，展现另类美食风采
目标人群：美食爱好者，各国文化爱好者，几乎辐射各年龄阶层二、网站开发平台
功能模块
技术和软件平台

操作系统
Windows 8

设计稿、图形处理
Photoshop CS6

动画设计制作
Flash CS5

网页制作平台
Dreamweaver

网站开发语言
HTML, CSS, JavaScript

网站测试平台
Chrome, Firefox

三、网站建立日程表完成整个工程所需时间为三个月，其中各项规划任务如下表所示:
时间
任务内容
3月9 H-16日
拟定工程
3月17日-23日
制定初步工程方案
4月6 H-19日
网站初步框架
4月20日—5月1日
网站内容具体丰富
5月2日—5月10日
总结反思，网站细节完善
5月11日-24日
方案微调，网站用户体验感测试
5月25日一6月7日
网站装饰再加工，CSS布局，JS语言
6月8日—6月15日
最终测试
四、站点地图
五、线框图〔1）首页布局

〔1）首页布局
CHINA
相关图
片
INDIA
相关图
片
JAPAN
相关图
片
ENGLAND
相关图
片

ENGLAND
相关图
片
ITALY
相关图
片
〔2）单页布局

〔2）单页布局
logo
CONTACT COUNTRIES ABOUT US SHARE
导航 一
面包席福
分类
内容特色
内容支持平台如微博，微信的图标
六、设计标准
〔1）视觉风格：网站整体风格将围绕“简约〃、“轻快〃这两个主题。
各国都别具一格，富有自己国家的特点，但仍然有相互联系，统一的整体效果。
① 颜色：首页设计以蓝紫灰为基调，运用米黄进展融合搭配，突出网站活泼清爽的风格。 另外运用flash和其他形式的动态技术效果，强调网站的特色同时也更能吸引浏览者的注 意。每个国家单独的一组网页的配色，我们决定采用每个国家国旗的主要颜色，如意大利为 绿、白、红，中国主要为红色等等
但不会使用纯度很高的颜色，否那么不适宜阅读。会使用偏灰色系的颜色，简约的现 代感，营造静谧的气氛，衬托食物的鲜艳，诱人。
超链接的各个时段的颜色也会统一，目前鼠标移上去和点击时统一为白色。
② 字体：为了美化页面，提高视觉效果，使用纤细，清新的字体，且面包屑、主导航 和页面上各个标题的字体都统一。目前使用的英文字体为yellowpeasdemo和 SIMPLIFICATypefaceo③图像：采用贴合国家气息的背景，背景尽量少繁复

而实物图片那么选择鲜艳，能够引起人们食欲的，明亮暖色调的图片。
④分辨率：所制作的网页将自动调整分辨率以适应显示器分辨率，不管在1024还是800的 分辨率下都可以配合用户到达较佳的视觉效果。
⑵布局设计
① 空间的合理利用：在网页的上端显示检索栏等信息，图片都先以小图标形式展现，鼠 标挪动致图片位置将展现细节图，划过处可进一步放大，即节约了空间，同时营造出一种简 洁现代的感觉。
② 动态效果：会在图片和一些特色小机关上赋予动态效果，如跳动，闪烁，放大缩小等。
③ 其他附加效果：超链接下划线的显隐，目录的跳转，后期可能会加上音乐播放器功能。
七、网页UI设计
我们将坚持以用户体验为中心设计原那么，界面直观、简洁，操作方便快捷，浏览者将 对界面上对应的功能一目了然。
保持页面内元素风格，版式一致。
使用一致的标记、标准缩写和颜色，显示信息含义明确。
显示有意义的出错信息，而不是单纯的程序错误代码。
减持高效地使用显示器的显示空间，保持语言的一致性与可选择性。
我们将遵循浏览者从上而下，自左向右浏览、操作习惯，尽量多做“减法〃运算，将 不常用的功能区块隐藏，以保持界面的简洁。
在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导 航构造。并且为页面导航加以设计规划。
八、主要页面的详细设计图九、网站测试
(1)测试准备
测试前对被测系统做好以下准备：系统的全面备份，包括应用程序备份、数据备份等; 记录测试前系统状态；制定应急措施，确保在测试中发生问题时系统可恢复。测试员应在测 试开场前了解网页的相关情况，对测试的预期结果应进展准备和预测。测试前要做好真实数 据的准备工作，并进展系统的数据初始化。
〔2)用户界面测试
主要测试导航条、内容、颜色、背景、图像、返回等。
(3)功能测试
主要测试站点中的链接等。
链接测试：目的是检查各个URL所联接的页面是否正确。
表单测试：目的是检查每个表单与程序是否正确联接，能够正确地发送用户请求。
〔4)兼容性测试
主要检验应用能否在不同的客户端使用。如苹果〔iOS系统的)用户，经常使用chrome, Firefox等浏览器的用户是否都能正常使用。
十、网站推广
(1) 微信公众平台、朋友圈、微博、QQ空间推广
(2) 论坛推广
我们可以注册几十个论坛，每个论坛注册假设干个帐号，把签名设为自己的网站及团队 图标。发表热门内容，自己顶自己的帖子。目前我们应用的论坛包括校内的极速之星、外网 的百度贴吧、天涯论坛、豆瓣等等网民较为聚集的地方。
〔3）电子邮件推广
我们会像宜家一样让用户进展自愿注册会员，浏览者自愿留下他的邮箱地址，定期或不 定期的发布一些电子刊物、会员通讯、专业效劳商的电子邮件广告等。可以减少广告对用户 的滋扰、增加潜在吸引人群定位的准确度、增强与客户的关系、提高品牌忠诚度等。