网页美工设计课件.ppt

网页美工设计 一 网页概念 webpage 是网站中的一页 通常是HTML格式 网页要使用网页浏览器来阅读 它是构成网站的基本元素 是承载各种网站应用的平台 通俗的说 一个网站就是由多个网页组成的 苹果园网站首页 北京首都机场首页 二 网页构成元素 网页构成元素主要包含导航栏 LOGO Banner 按钮 文字等 文字 就是网页的内容 图片 就是网页的美观 除此之外 网页的元素还包括动画 音乐 程序等等 LOGO 标志 1 LOGO的位置通常在页面的左上角2 图形 符号既要简练 概括 又要讲究艺术性 3 色彩要单纯 强烈 醒目 导航条 1 横排竖排 一排 两排 多排 都可2 图片式导航 很漂亮3 动态导航 体积小 变化效果丰富 Banner 1 468 60为国际标准尺寸 但也可根据自己的画面定制大小 2 好的Banner要符合网站的风格3 一个网页中若有多个Banner 要动静结合4 色彩不易多 图形要简洁明了 文字不易太长 一二句话即可 按钮 1 也叫下压式按钮 是一种能在被按下时产生事件的控件 2 每当按钮被按下时 就产生一个动作事件3 从某种意义上来说 只要通过点击能产生另一个动作的地方 都可以看作是一个按钮4 它的设计形式多样化 导航条也是一种特殊的按钮 文字 1 文字就是页面中的内容2 包括任何地方出现的文字 三 网页构架设计 如果把网页比喻成人的话 先要有骨架 也就是网页的排版框架 网页的分类主要有 分栏式结构 区块分布 平面图片设计 以及非规律的设计 分栏式结构 1是二分栏2是标准三分栏3是四分栏4 6是一些LOGO以及导航在下面的情况 7 9则是一般的变化 二分栏 三分栏 三分栏 四分栏 导航在下面 导航在下面 特殊效果的网页 利用导航分栏 区块分布 区块编排 是以颜色或线条 来划分一些区域的编排方式 其实也就是分栏结构的变异 区域编排的设计页面一般情况下不长 一屏或一屏半左右的长度 用于信息量少的企业站点 和专业型站点或个人主页区域编排的设计页面不适合门户站点和信息量很大的站点 区域的设置可大可小 但是依据内容编排 在分栏式结构里面也可以套设区域结构 以颜色区分的 以颜色区分的 以线条区分的 在分栏里套设区域结构的 平面图片设计 平面图片设计是指在网页里面用整张图片分割的技法 非常有视觉效果 适合个人主页在内容很少的情况下选用 背景是整图片 背景是整图片 背景是整图片 背景是整图片 非规律设计 非规律设计是指在网页里面用以上几种通常规律的结合 视觉效果强烈 不受版面分栏的约束 设计比较随意 大胆 适合内容较少的情况下选用 四 网页色彩设计 根据专业的研究机构研究表明 彩色的记忆效果是黑白的3 5倍 也就是说 在一般情况下 彩色页面较完全黑白页面更加吸引人 色彩基本知识 1 颜色是因为光的折射而产生的 2 红 黄 蓝是三原色 其它的色彩都可以用这三种色彩调和而成 3 颜色分非彩色和彩色两类 非彩色是指黑 白 灰系统色 彩色是指除了非彩色以外的所有色彩 4 明度是指色彩的明暗程度 纯度是色彩的饱和程度色相是色彩的相貌 指色彩的类别5 任何色彩都有饱和度和透明度的属性 属性的变化产生不同的色相 所以至少可以制作几百万种色彩 色彩的象征 1 色彩是人的视觉最敏感的东西 主页的色彩处理得好 可以锦上添花 达到事半功倍的效果 2 色彩总的应用原则应该是 总体协调 局部对比 红色象征热情 活泼 热闹 革命 温暖 幸福 吉祥 危险 橙色象征光明 华丽 兴奋 甜蜜 快乐 黄色象征明朗 愉快 高贵 希望 发展 注意 绿色新鲜 平静 安逸 和平 柔和 青春 安全 理想 蓝色深远 永恒 沉静 理智 诚实 寒冷 紫色优雅 高贵 魅力 自傲 轻率 白色纯洁 纯真 朴素 神圣 明快 柔弱 虚无 灰色谦虚 平凡 沉默 中庸 寂寞 忧郁 消极 黑色崇高 严肃 刚健 坚实 粗莽 沉默 黑暗 罪恶 恐怖 绝望 死亡 色彩的搭配技巧 1 先选定一种色彩 然后调整透明度或者饱和度2 用对比色3 用同一个色系4 用黑色与一种彩色搭配5 颜色控制在四色以内 五 网页整体风格 网页风格 style 是抽象的 是指站点的整体形象给浏览者的综合感受 这个 整体形象 包括站点的CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值 存在意义 站