基于Web标准的网页设计-课程.PPT

中国高等院校计算机基础教育课程体系规划教材 唐四薪 编著 清华大学出版社 2015年7月 第〇讲 网页设计艺术 网页设计的基本问题 从艺术的角度看 网页设计属于平面设计的问题 布局的问题（三种布局方式） 配色的问题 从技术的角度看 运用html，css等解决网页布局和美观的问题 所以网页设计中很多技术问题都是为了使网页看起来美观 网页的布局 布局的含义 布局，就是以最合适浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如 徽标的位置、 导航栏的显示、 主要内容的排版等。 经常用到的版面布局结构主要有以下几种： 网页版面布局的方法 表格布局 将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。 DIV＋CSS布局 用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。 框架布局 将浏览器窗口分割成几部分，每部分放一个不同的网页（示例） 常见网页的版式 1－3－1式 1－2－1式 艺术版式 1-3-1式 示例 表格布局的原则 各栏目之间必须相对独立，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响 各栏目之间必须用占位表格(或CSS边界）留出一定的空隙 栏目采取纵列的形式排列 用CSS布局实现1-3-1布局 网页的配色 网页的配色 网页不只是传递信息的媒介，同时也是网络上的艺术品。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。 任何网页创意使用的视觉元素总的归纳起来不外乎三种：文字、图像、色彩。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接的效果。 色彩的基本知识 色彩的RGB模式 ： RGB是表示红色、绿色、蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB的所谓“多少”就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。 红、黄、蓝是三原色，其它色彩都可以用这三种颜色调和而成。网页中色彩表达除了用颜色名称表达外，就是用这三种颜色的数值表示：红色color(255,0,0)、十六进制表示为(ff0000) 如：“bgcolor=#ffffff”表示背景色为白色 色彩的基本知识 色彩的HSB模式 ： 　HSB是指颜色分为色相、饱和度、明度三个要素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳丽。饱和度低色彩就接 近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。 色彩的三要素 色相、明度和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。 (1). 色相 色相指色彩的相貌。如：红、黄、蓝、绿等。 (2).明度 明度指色彩的明暗程度。 (3).饱和度（纯度） 纯度指色彩的纯净程度，纯度越高，色相感越强。 色相(Hue) （1）色相(Hue) 　 基本色相为：红、橙、黄、绿、蓝、紫六色。在各色中间加插一两个中间色，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫,形成十二基本色相。 色相的计算机数值表示 以颜色在色相环上的度数值来表示 如红色是0度，橙色是60度，黄色是120度，那么用色相值0表示红色，60表示橙色，因此色相的取值应该是0－360，但计算机中是用八位2进制数表示色相的，所以取值只能是0－240，这样还要把原来的色相值乘以2/3 明度(Brightness) （2）明度(Brightness) 明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。明度越低，颜色越暗 饱和度(Saturation) （3）饱和度(Saturation) 也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。 纯度网页例图 （4）色彩的特质 色彩的特质指的是色彩和色彩组合所能引发的特定情绪反映。我们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和情绪。 原色 也叫三原色。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色