网页美工设计教案

第1章网页平面构成本章知识重点：1.平面构成的基本知识2.网页设计中的平面构成3.构成设计在网页设计中的运用网页美工设计1.1平面构成概述平面构成是设计的基础，平面构成主要是研究在二维空间内基本形态的创造和画面的构成方式，是在二维的平面空间里按照一定的主题要求，方法原理，对设计元素进行各种视觉信息形式的设计与组成，使组成效果具有较强烈的视觉信息和美感的创造活动。构成是一个近代造型概念，其含义是指将不同或相同形态的几个以上的单元重新组合成为一个新的单元，构成对象的主要形态，包括自然形态、几何形态和抽象形态。并赋予其视觉化的、力学化的观念。平面构成探讨的是二度空间的视觉文法。其构成形式主要有重复、近似、渐变、变异、对比、集结、发射、特异、空间与矛盾空间、分割、肌理及错视等等。1.1.1平面构成设计的元素概念元素：点、线、面、体。视觉元素：将概念元素体现在实际设计中，包括大小、形状、色彩、肌理等。关系元素：把视觉元素在画面上进行组织、排列，形成一个画面的依据完成视觉传达的目的。包括方向、位置、空间、重心等。实用元素：是指设计所表达的内容、目的和功能。1.1.2平面构成的形式美（1）总法则:变化统一（2）对比与调和（3）对称与均衡（4）节奏与韵律1.1.3平面构成的骨骼及基本形式任何一幅构成作品，都是按照一定的规律将基本形组合起来的，这种管辖编排形象的方式称为骨骼。在基本形的组合中，排列和组合往往都需要框架，这个框架就称为骨骼。基本形和骨骼的关系就是骨与肉的关系，极为重要。骨骼的样式分为规律性骨骼和非规律性骨骼。规律性包括重复、近似、渐变、发射、特异等，具有很强的规律性。非规律性包括密集、对比、节奏、韵律、分割、肌理、空间等。1.2网页中的平面构成1.2.1网页设计中的平面构成网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。网页（Webpage）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。是万维网中的一页，通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。1.2.2构成设计在网页设计中的运用网页的视觉传达设计是指将各要素组合的形式法则及艺术规律，对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编排来实现的。它既包括一般构成规律的应用，也有其具自身特点的艺术语言。构成设计在网页设计中的运用主要体现在以下几个方面：（1）版式设计（2）导航设计（3）文字的编排与设计（4）图片的编排与设计第二章网页的色彩搭配本章知识重点：1.色彩构成的基本原理2.网页配色的原理3.网页常用配色分析2.1色彩构成原理2.1.1色彩的形成在网页设计中，色彩具有先声夺人的力量，色彩是网页设计中最直接、最有力的表现形式，既可以表现网站风格，树立网站形象，又给人留下深刻的印象。人们不仅发现、观察、创造、欣赏着绚丽缤纷的色彩世界，还通过日久天长的时代变迁不断深化对色彩的认识和运用。“色彩是破碎的光，……太阳光与地球相撞破碎分散，因而使整个地球形成美丽的色彩。”人类最基本的视觉经验得出结论：没有光就没有色。白天使人们能看到五色的物体，但在漆黑无光的夜晚就什么也看不见了。倘若有灯光照明，则光照到哪里，便又可看到物像及其色彩了。2.1.2色彩的对比色彩对比指各色彩之间存在的矛盾、对立、差别。色彩诱人魅力，主要在于色彩对比的妙用。色彩对比强烈，视觉刺激力会很强；色彩对比弱，易产生协调的效果；如果没有对比，会出现混沌、模糊、乏味的效果。因此色彩对比是网页配色的必要环节与过程。色彩对比通常以色相对比考虑居多（图2-2），同时还有色彩的明度对比、纯度对比、面积对比等。在网页配色中，无论是色相对比、明度对比和纯度对比，都是基于色彩面积的对比，也就是色彩的比例问题。因为色彩如果没有相当的面积，就很难感受到其色相。因此，形态作为视觉色彩的载体，总有其一定的面积，面积是色彩不可缺少的特性。2.2网页配色的原理2.2.1色彩的基本知识在千变万化的色彩世界中，人们视觉感受到的色彩非常丰富，可分为无彩色系和有彩色系两大类。有彩色系，包括在可见光谱中的全部色彩，它以红、橙、黄、绿、蓝、紫等为基本色。无彩色系，指由黑色、白色及黑白两色相融而成的各种深浅不同的灰色系列。色彩的三属性包括色相、明度、纯度。2.2.2色彩的心理感觉心理感受是视觉对色彩的反应，随内外环境而改变。视觉感受色彩的明度及色相的影响，会产生冷暖、轻重、远近、胀缩、动静等不同感受。色彩心理效应的产生，色彩产生的视觉效应，但却能影响人们的心理感受，并作用于感情，甚至长时间影响人们的精神世界。就色彩本质而言，色彩本身并没有任何感情色彩，而是在人们在生活中积累的普遍经验的作用下，形成人们对色彩的心理感受，因此，人们的色彩心理感受也成为了表达色彩特性的另一种语言。（1）不同颜色的心理感受（2）色彩的冷暖感冬天看到黄色的光，会有温暖感，夏天看到蓝色的水会有凉爽感。冷暖感本身属于触感，然而即使不去用手摸而只是用眼睛看也会感到暖和冷，这是由于生活经验积累而产生的。色彩的冷暖感被称为色性，而冷暖感主要取决于色调。暖色，如黄色，橙色，红色，紫色等都属于暖色系列。（3）色彩的软硬感软硬感与冷暖感类似，色彩的软硬感与明度有关系。明度低的色彩给人以坚硬、冷漠的感觉。相反，明度高的色彩给人以柔软、亲切的感觉。软色调给我们以明快，柔和，亲切的感觉。（4）色彩的轻重感色彩的轻重在不同的领域方面起着不同的作用。例如，工业、钢铁等重工业领域可以用重一点的色彩；纺织、文化等科学教育领域可以用轻一点的色彩。（5）色彩的动静感动静感的出现是人们在生活中，喧闹和安静的气氛下产生出的心理感受。色彩的动静感是人的情绪在视觉上的反映。红、橙、黄色给人以兴奋感，青、蓝色给人以沉静感，而绿和紫属中性，介乎两种感觉之间。白和黑及纯度高的色给人以紧张感。2.2.3网页设计中色彩的基本原则网页设计要求页面的新颖、整洁，文字优美流畅，浏览者在浏览网页时，留下的第一印象就是页面的色彩设计，色彩可以产生强烈的视觉效果，使页面更加生动，它的好坏直接影响阅读者的观赏兴趣。因此，网页的色彩设计应把握以下几个方面：色彩的个性鲜明性。网页的色彩设计要具有自己独特的风格，彰显鲜明的个性，容易引人注目，使得大家对你的网站印象深刻。色彩的合理性。网页设计的色彩搭配要遵从艺术设计的规律，同时，还要考虑人的生理特点，合理的色彩搭配给人一种和谐、愉快的感觉，避免采用大面积纯度较高的单一色彩，这样容易造成视觉疲劳。2.2.4色彩均衡网页设计要让人看上去舒适、协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。一般网站不可能单一的运用一种颜色，所以色彩均衡问题是设计者必须要考虑的问题。对称是一种绝对的平衡，色彩对称和图案的对称形式是一样的，有左右对称，回旋对称，放射对称等。中规中矩的色彩对称作品给人以庄重、大方、稳重、严肃、安定、平静等感觉，但运用不当也易产生平淡、呆板、单调、缺少活力等不良印象。2.3网页常用配色分析2.3.1常用的网页色彩模式RGB模式RGB模式是所有基于光学原理的设备所采用的色彩方式。R代表红色，G代表绿色，B代表蓝色，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB模式是一种加色模式。RGB图像虽然只使用三个颜色通道，但每个通道有8位的色彩信息（0~255的亮度值），可描述的色彩数目为2563=1678万种颜色。由于网页（WEB）是基于计算机浏览器开发的媒体，所以颜色以光学颜色RGB（红、绿、蓝）为主。RGB模式是网页设计使用比较广泛的色彩模式。CMYK模式CMYK模式与RGB模式相反，该模式是一种减色模式。CMYK代表印刷上用的四种颜色，C代表青色，M代表洋红色，Y代表黄色，K代表黑色。理论上，纯青色(c)、洋红(M)和黄色(Y)色素能够合成吸收所有颜色并产生黑色。但在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，由于这个原因，这些颜色叫做减色。Lab模式Lab颜色模型是在1931年国际照明委员会(CIE)制定的颜色度量国际标准的基础上建立的。1976年，这种模型被重新修订并命名为CIEL。a和b。Lab模式由三个信道组成，L信道表示亮度，它控制图片的亮度和对比度，a通道包括的颜色从深绿(低亮度值)到灰色(中亮度值)到亮粉红色(高亮度值)，b通道包括的颜色从亮蓝色(低亮度值)到灰色到焦黄色(高亮度值)。HSB模式这是一种从视觉的角度定义的颜色模式。2.3.2网页色彩搭配的技巧网页设计中的色彩运用诠释在整体风格的统一性。作为展示给浏览者的页面，色彩是呈现的第一视觉冲击力，色彩的搭配、区域分布、提示性功能等，都是可以通过色彩来进行视觉上的空间划分。此类设计色彩同样也要根据适用的人群，整体风格来进行展示。2.3.3三种以上的色彩搭配网页设计面对三种以上的色彩搭配时，如图2-18，首先应该确定主色调，也就是页面色彩，有利于体现网站主题。其次是确定辅色调，也就是仅次与主色调的视觉面积的辅助色，是烘托主色调、支持主色调、起到融合主色调效果的辅助色调。再处理局部点睛色，在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。页面设计时还应考虑背景色，即衬托环抱整体的色调，协调、支配整体的作用。第三章网页编排设计本章知识重点：1.文字设计要点2.网页文字设计方法3.网页布局基础结构3.1字体编排与编排的基本形式3.1.1网页文字的形式概述文字是人类思想感情交流的必然产物。随着人类文明的进步，它由简单变得复杂，逐步形成了科学的规范化的程式。它既具有人类思想感情的抽象意义与韵调和音响节律，又具有结构完整而变化无穷的鲜明形象。尤其是象形文字，更是抽象与具象的紧密结合。3.1.2文字的设计要点1正确对于不同汉字或拉丁字母的构成，笔画都是法定的，只要有一处笔画不符，轻则字义不同，重则不成其字。因此字形要确切无误，不能对笔画任意减少或者改变，以保证其信息传达的准确性。2字体不宜过多如写汉字，不宜三笔隶书，二笔仿宋；写拉丁字母也不宜把楷、小楷等组在一起；印刷体与手写体不能在一字中混合运用。另外，在字体的运用中，不要在一个网页或者站点上使用超过3种字体，如图3-1所示。3字体和内容相符每一种字体都有它的表情，如黑体有醒目严肃之感，楷体有端庄刚直的表情。仿宋有清秀自由的意境。因此，选择某种字体问题为设计美术字之基调时，应该按文字内容的精神而定。只有这样才能表里如一，发挥出文字最大的感染力。至于变形文字，可不拘一格。笔画的长短、肥瘦、曲直也可自由规范，只要根据文字固有结构变化即可，甚至还可进一步按透视法。立体投影、空心变化等手法加强其装饰意义。4字体匀称结构严谨字与字之间看起来要大小相称；字的笔画有繁有简，要合理安排。字的结构要做到多样统一，均匀稳定，疏密有致，变化有序。3.1.3文字字体与版式设计1文字的大小(1)文字的大小决定形象放大标题会给人有力量、活跃、自信的印象；缩小则表现出纤细和缜密的印象。另外，文字大小的对比也会左右印象。标题文字的大小与正文之比叫做跳动率。跳动率越大，画面越活跃；反之，越稳重。（2）粗细印象优先将标题的文字变大，粗细效果会加倍。例如，大而粗的文字最有精神，大而细的文字都市性印象最强。另一方面，将文字变小，粗细效果会减弱。虽然细而小的文字有优美的感觉，但如果使用细而大的文字，效果会更加明显。总之，文字越大，越能强化粗细的印象。如图3-2所示。2字体的粗细网页设计者可以用字体更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。粗体字