项目1网平面构成的表达.doc

TOC \o 1-3 \h \z \u HYPERLINK \l _Toc312089143 项目1网页平面构成的表达 PAGEREF _Toc312089143 \h 1 HYPERLINK \l _Toc312089144 1.1 知识准备 了解网页及其页面 PAGEREF _Toc312089144 \h 1 HYPERLINK \l _Toc312089145 1.2 任务2运用点、线、面的相关知识制作网页Banner PAGEREF _Toc312089145 \h 19 HYPERLINK \l _Toc312089146 1.3 任务3 运用点、线、面的相关知识制作简单网页 PAGEREF _Toc312089146 \h 27 HYPERLINK \l _Toc312089147 相关操作知识 PAGEREF _Toc312089147 \h 40 HYPERLINK \l _Toc312089148 拓展探索 PAGEREF _Toc312089148 \h 41 HYPERLINK \l _Toc312089149 小结 PAGEREF _Toc312089149 \h 42 项目1网页平面构成的表达 平面构成是网页设计的重要理论依据和知识基础，如何运用有限的网页界面，最大限度的锁住浏览者的注意力呢？这其中除了要抓住浏览者的兴趣和实际需求外，视觉效果就显得尤为重要。怎样把图片，文字等众多内容合理又美观的呈现在同一界面内，就是我们本章要探索的问题。 学习本章后，你将能够： 1. 了解网页及其界面； 2. 掌握网页界面设计与平面构成的表现形式； 3. 掌握平面构成的设计原则； 4．学会平面构成在网页界面设计中的应用方法。 1.1 知识准备 了解网页及其页面 1.案例欣赏 下面为北京智奥光明广告设计公司的网站界面截图，如图1-1所示。 图1-1北京智奥光明广告设计公司的网站界面 2. 案例分析： 此网站为北京智奥光明广告设计公关策划责任公司网站界面，该网站浏览人群主要为，有设计需求的商家、设计师同行以及对网站设计有兴趣的爱好者等，为了使网站更醒目，吸引人眼球，设计师从以下几个方面设计了网页界面： （1） 表现形式：用平面构成原理中分割的方式进行页面设计，配以独特的企业Logo，色彩鲜明的图片和整洁大方的字体。 （2）色彩运用：色彩上使用极富华丽色彩感觉的红色和金色作为色彩的主色调，其中穿插强对比的绿色，使网页具有强烈的视觉效果。 （3）栏目设置：依据易用性原则，设置了网站的导航界面及各部分内容的链接。 （4）动态效果设计：当鼠标点击导航条或相关内容时，轻松进入链接，简单，明了，易于操作。 3. 理论概要 （1）网页及其界面 随着科技的发展，网站高效传播信息的功能被越来越多的人所熟识，许多企业或个人为了提高品牌效应，实现某种需求，开始建立具有各自特色的网站。网页是网站中的一页，当浏览者打开一个网站，首先映入眼帘的就是风格各异的网站界面，或简单清新，如图1-2所示；或庄重严肃，如图1-3所示；或色彩艳丽，如图1-4所示。让人赏心悦目的网页界面应该具有合理的排版布局，突出的文字效果，质量清晰的图片等几个要素。 图1-2 简单清新的某食品网页界面 图1-3 庄重严肃的某银行网页界面 图1-4 色彩艳丽的麦当劳网页界面 （2）网页界面设计与平面构成的表现形式 网页界面设计是指，在有限的网页界面空间内将多种元素运用均衡，统一，对比，节奏，留白等方式相结合，根据网站主题制作出具有某种功能并符合审美情趣的一种设计方式。 在网页设计中，我们主要通过视觉传达来表现网站的主题，而点、线、面是构成平面空间内容的基本要素，也是构成网页的基本视觉元素。平面构成就是研究点，线，面等元素的特性、构成规律、审美原理并加以合理运用的一种艺术表现形式。网页设计实际上就是经营好三者关系的设计，不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。 平面构成中的元素： 点 点是平面构成中的基本的要素，是构成一个图像的最小单元。它可以是一个简单符号，如图1-5所示，也可以是一个图形，如图1-6所示。 图1-5 以简单符号作为视觉要素的某奢侈品网页界面 图1-6 以简单图形作为视觉要素的某公司网页界面 所谓的点其实是相对于周围环境而言的一个相对概念。在几何形中，点只有位置没有任何形态和大小，在平面设计中，点必须有形态，大小，位置等视觉特征。点越小，点的感觉越强烈，多个点临近排列具有线的感觉，多个点靠拢排列具有面得感觉。也就是说当平面上只有一个点时，我们就会将视线集中在这个点上，如图1-7所示；当平面上有两个等大的且有一定距离的点时，我们就会将视线集中在两个点之间，从而形成线的感觉，如图1-8所示；当平面上有两个以