网页美工设计课件

1、网页美工设计网页美工设计一 、网页概念 (web page)，是网站中的一页,通常是html格式。网页要使用网页浏览器来阅读。它是构成网站的基本元素，是承载各种网站应用的平台。通俗的说， 一个网站就是由多个网页组成的。苹果园网站首页北京首都机场首页二 、网页构成元素 网页构成元素主要包含导航栏、logo、banner、按钮、 文字等. 文字，就是网页的内容。 图片，就是网页的美观。 除此之外，网页的元素还包括动画、音乐、程序等等。 logo（标志）1、logo的位置通常在页面的左上角2 、图形、符号既要简练、概括，又要讲究艺术性。 3 、色彩要单纯、强烈、醒目。 导航条1、横排竖排,一排,两排

2、,多排,都可2 、图片式导航，很漂亮 3 、动态导航,体积小,变化效果丰富banner1、46860 为国际标准尺寸,但也可根据自己的画面定制大小.2 、好的banner要符合网站的风格 3 、 一个网页中若有多个banner,要动静结合4 、色彩不易多,图形要简洁明了,文字不易太长,一二句话即可按钮1、 也叫下压式按钮, 是一种能在被按下时产生事件的控件。 2 、每当按钮被按下时，就产生一个动作事件 3 、从某种意义上来说,只要通过点击能产生另一个动作的地方,都可以看作是一个按钮4 、它的设计形式多样化,导航条也是一种特殊的按钮文字1、文字就是页面中的内容2 、包括任何地方出现的文字三 、网

3、页构架设计 如果把网页比喻成人的话，先要有骨架，也就是网页的排版框架。 网页的分类主要有：分栏式结构，区块分布，平面图片设计，以及非规律的设计 。分栏式结构分栏式结构1是二分栏2是标准三分栏3是四分栏46是一些logo以及导航在下面的情况，79则是一般的变化 二分栏二分栏 三分栏三分栏 三分栏三分栏 四分栏四分栏 导航在下面导航在下面 导航在下面导航在下面 特殊效果的网页特殊效果的网页利用导航分栏利用导航分栏 区块分布区块分布 区块编排，是以颜色或线条，来划分一些区域的编排方式，其实也就是分栏结构的变异 。 区域编排的设计页面一般情况下不长，一屏或一屏半左右的长度，用于信息量少的企业站点，和专

4、业型站点或个人主页 区域编排的设计页面不适合门户站点和信息量很大的站点。 区域的设置可大可小，但是依据内容编排。在分栏式结构里面也可以套设区域结构 以颜色区分的以颜色区分的以颜色区分的以颜色区分的以线条区分的以线条区分的在分栏里套设区域结构的在分栏里套设区域结构的平面图片设计平面图片设计 平面图片设计是指在网页里面用整张图片分割的技法。 非常有视觉效果。 适合个人主页在内容很少的情况下选用。背景是整图片背景是整图片背景是整图片背景是整图片背景是整图片背景是整图片背景是整图片背景是整图片非规律设计非规律设计 非规律设计是指在网页里面用以上几种通常规律的结合 。 视觉效果强烈,不受版面分栏的约束,

5、设计比较随意,大胆。 适合内容较少的情况下选用。四 、网页色彩设计 根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 色彩基本知识1、颜色是因为光的折射而产生的。 2、.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。3、颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。 4、明度是指色彩的明暗程度. 纯度是色彩的饱和程度 色相是色彩的相貌,指色彩的类别5、任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。 色彩的象征1、色彩是人的视觉最敏

6、感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。2、色彩总的应用原则应该是“总体协调，局部对比” 。红色象征热情、活泼、热闹、革命、温暖、幸福、吉祥、危险红色象征热情、活泼、热闹、革命、温暖、幸福、吉祥、危险 橙色象征光明、华丽、兴奋、甜蜜、快乐橙色象征光明、华丽、兴奋、甜蜜、快乐. 黄色象征明朗、愉快、高贵、希望、发展、注意黄色象征明朗、愉快、高贵、希望、发展、注意. 绿色绿色 新鲜、平静、安逸、和平、柔和、青春、安全、理想新鲜、平静、安逸、和平、柔和、青春、安全、理想. 蓝色蓝色 深远、永恒、沉静、理智、诚实、寒冷深远、永恒、沉静、理智、诚实、寒冷. 紫色紫色 优雅、高贵、

7、魅力、自傲、轻率优雅、高贵、魅力、自傲、轻率. 白色白色 纯洁、纯真、朴素、神圣、明快、柔弱、虚无纯洁、纯真、朴素、神圣、明快、柔弱、虚无. 灰色灰色 谦虚、平凡、沉默、中庸、寂寞、忧郁、消极谦虚、平凡、沉默、中庸、寂寞、忧郁、消极. 黑色黑色 崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡崇高、严肃、刚健、坚实、粗莽、沉默、黑暗、罪恶、恐怖、绝望、死亡. 色彩的搭配技巧1、先选定一种色彩，然后调整透明度或者饱和度 2、用对比色3、用同一个色系4、用黑色与一种彩色搭配5、颜色控制在四色以内五 、网页整体风格 网页风格(style)是抽象的,是指站点的整体形象给浏览者的综合感受。 这个“整体形象”包括站点的ci（标志、色彩、字体、标语）、版面布局、浏览方式、交互性