《工作手册式CMS建站教程》任务2 设计企业网站前台版面.pptxVIP

工作手册式

CMS建站教程

任务2设计企业网站前台版面

知识目标

熟悉网站版面的设计流程。

了解网站版面设计原则。

了解网站版面布局相关概念和绘制布局图的相关工具。

能力目标

能够根据网站的需求绘制网站版面布局图。

能够根据网站版面布局图，结合网站主题搜集相关素材设计出网站的整套版面。

培养审美能力和鉴赏能力。

培养细心严谨的工作态度。

任务描述

任务内容：根据网站需求分析结果，利用相关知识和相关工具设计出花公子蜂业科技有限公司门户网站的整套版面。

参与人员：网页设计师（美工）。

2.1知识准备

2.1.1网站版面设计流程

步骤1：构思。充分了解客户的需求、网站的定位、受众对象等，将想到的“构思”画出来，此过程不讲究细腻工整，也不必考虑细节部分，只要用几条线条勾画出轮廓即可。

步骤2：粗略布局。根据前面的构思，画出页面的粗略布局图，然后对照需求，看看结构是否合理，是否符合客户的需求。

步骤3：细化布局。根据粗略布局进一步细化，使得布局图上的版位体现网站的内容描述，细化后的布局图可以大体理解为网站界面原型图。

步骤4：搜集素材。根据版面布局的版位实际，使用互联网等手段搜集相关的素材，包括图片、文字，以及音、视频素材等。

步骤5：设计版面。使用相关工具对素材进行加工处理，最终设计出网站项目版面。

任务2设计企业网站前台版面

2.1知识准备

2.1.2网站版面设计原则

1．用户导向原则

2．KISS原则

3．布局控制原则

（1）Miller公式。

（2）分组处理。

4．视觉平衡原则

5．色彩的搭配和文字的可阅读性

6．一致性原则

7．个性化

（1）符合网络文化。

（2）塑造网站个性。

任务2设计企业网站前台版面

2.1知识准备

2.1.3网站版面布局

（1）网页布局。在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。

（2）网站版面布局图。通常是指根据网页布局使用线条勾画出来的框图，它是网页布局在宏观上的表现。

（3）绘制网站版面布局图的工具。常用的有Word、Photoshop、Forirework等，使用原型设计工具，如Axure、Mockup也能快速画出网站版面布局图，当然，设计者也可以用笔在纸上画出来。

任务2设计企业网站前台版面

www.islide.cc「让PPT设计简单起来！」

10

感谢观看！