基于web标准的网页设计与制作

《基于web标准的网页设计与制作》由会员分享，可在线阅读，更多相关《基于web标准的网页设计与制作（272页珍藏版）》请在金锄头文库上搜索。

1、中国高等院校计算机基础教育课程体系规划教材 唐四薪 编著 清华大学出版社 2009年11月 基于Web标准的网页设计 配套网站： 第讲 网页设计艺术 唐 四 薪 网页设计的基本问题 v从艺术的角度看 v网页设计属于平面设计的问题 布局的问题（三种布局方式） 配色的问题 v从技术的角度看 运用html，css等解决网页布局和美观的问题 所以网页设计中很多技术问题都是为了使网页看起来 美观 网页的布局 网页版面布局的方法 v框架布局 将浏览器窗口分割成几部分，每部分放一个不同的 网页（示例） v表格布局 将网页元素装填入表格内实现布局，表格相当于网 页的骨架，因此表格布局的步骤是先画表格，再往 表

2、格里填内容。 vDIVCSS布局 用盒子布局，利用网页元素本身的盒子模型，通过 盒子在页面上的排列和嵌套进行布局。 布局的含义 v 网页版面布局是网页设计中的一项重要内容。版面指的是 浏览器看到的完整的一个页面。因为每个人的显示器分辨 率不同，所以同一个页面的分辨率可能出现800*600像素 ，1024*768像素等。 v 布局，就是以最适合浏览的方式将图片和文字摆放在页面 的不同位置。网页版面布局是指定网页内容在浏览器中的 显示方式，例如徽标的位置、导航栏的显示、主要内容的 排版等。经常用到的版面布局结构主要有以下几种： 常见网页的版式 v 131式 v 121式 v 艺术版式 v1-3-1

3、式 v示例 Logo banner 导航条（Navigator) Bottom(版权信息） 栏目1 栏目2 栏目3 用表格实现 用CSS布局 实现 表格布局的原则 v各栏目之间必须相对独立，方法是把每个栏目装 在一个单独的表格中，这样修改一个栏目时不会 对其他栏目产生影响 v各栏目之间必须用占位表格(或CSS边界）留出一 定的空隙 v栏目采取纵列的形式排列 用CSS布局实现1-3-1布局 中间几列的盒子必 须用一个大盒子包 含起来，否则这几 列无法实现居中 网页的配色 网页的配色 v网页不只是传递信息的媒介，同时也是网络上的 艺术品。如何让浏览者以轻松惬意的心态吸收网 页传递的信息，是一个值得

4、研究的课题。 v任何网页创意使用的视觉元素总的归纳起来不外 乎三种：文字、图像、色彩。三者选用搭配的适 当，编排组合的合理，将对网页的美化起到直接 的效果。 色彩的基本知识 v 色彩的RGB模式 ： RGB是表示红色、绿色、蓝色又称为三原色光，英文为R(Red)、 G(Green)、B(Blue)，在电脑中，RGB的所谓“多少”就是指亮度， 并使用整数来表示。 通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255 。 红、黄、蓝是三原色，其它色彩都可以用这三种颜色调和而成。 网页中色彩表达除了用颜色名称表达外，就是用这三种颜色的数 值表示：红色color(255,0,0)、十六

5、进制表示为(ff0000) 如： “bgcolor=#ffffff”表示背景色为白色 色彩的基本知识 v色彩的HSB模式 ： v HSB是指颜色分为色相、饱和度、明度三个要 素。英文为H(Hue)、S（Saturation）B（ Brightness)饱和度高色彩较艳丽。饱和度低色彩 就接 近灰色。亮度高色彩明亮，亮度低色彩暗淡 ，亮度最高得到纯白，最低得到纯黑。一般浅色 的饱和度较低，亮度较高，而深色的饱和度高而 亮度低。 色彩的三要素 v 色相、明度和饱和度构成色彩的三要素。自然界中的颜 色可以分为非彩色和彩色两大类。非彩色指黑色、白色 和各种深浅不一的灰色，而其它所有的颜色均属于彩色 ，

6、任何一种色彩都具有明度、纯度、饱和度三大属性。 (1). 色相 色相指色彩的相貌。如：红、黄、蓝、绿等。 (2).明度 明度指色彩的明暗程度。 (3).饱和度（纯度） 纯度指色彩的纯净程度，纯度越高，色相感越强。 色相(Hue) （1）色相(Hue) 基本色相为：红、橙、黄、绿、蓝、紫六色。在各色中间加插 一两个中间色，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿 蓝、蓝绿、蓝、蓝紫、紫、红紫,形成十二基本色相。 色相的计算机数值表示 v以颜色在色相环上的度数值来表示 v如红色是0度，橙色是60度，黄色是120度，那么 用色相值0表示红色，60表示橙色，因此色相的取 值应该是0360，但计算

7、机中是用八位2进制数表 示色相的，所以取值只能是0240，这样还要把 原来的色相值乘以2/3 明度(Brightness) v （2）明度(Brightness) 明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现 体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。 明度越低，颜色越暗 饱和度(Saturation) v（3）饱和度(Saturation) 也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混 合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色 或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。 纯度网页例图 v（4）色彩的特质 色彩的特质指的是色彩和色彩组合所能引发的特

8、定情绪反映。我 们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和 情绪。 热冷暖凉 亮暗 艳 淡 原色 v 也叫“三原色“。即红、黄、蓝三种基本颜色。自然界中的 色彩种类繁多，变化丰富，但这三种颜色却是最基本的原 色，原色是其他颜色调配不出来的。除白色外，把三原色 相互混合，可以调和出其他种颜色。 根据三原色的特性做出相应的色彩搭配，有最迅速最 有力最强烈的传达视觉信息效果。 红色网页例图 蓝色网页例图 间色 v 又叫“二次色“。它是由三原色调配出来的颜色，是由2种 原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色 ；红与蓝调配出紫色，橙、绿、紫三种颜色又叫“三间色“ 。在调配时

9、，由于原色在份量多少上有所不同，所以能产 生丰富的间色变化 v 间色是由三原色中的两原色调配而成的，因 此在视觉刺激的强度相对三原色来说缓和不少。 属于较易搭配之色。 间色尽管是二次色，但仍有很强的视觉冲击 力，容易带来轻松、明快、愉悦的气氛。 间色配色网页 复色 v也叫“复合色“。复色是由原色与间色相调或由间 色与间色相调而成的“三次色“，复色是的纯度最 低，含灰色成份。复色包括了除原色和间色以外 的所有颜色。 复色网页示例 复色网页配色说明 v 以上4种颜色中深绿色和赭石色为复色，之所以还 选择其它2颜色，为的是更好的配合说明复色的特性， 如果没有另外两种非复色搭配，页面配色就可能出现肮

10、脏等不舒服的感觉。 v 复色是由两种间色或原色与间色混合而成，因此色 相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不 当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之 感，属于不好搭配之色。但有时复色加深色搭配能很好 的表达神秘感、纵深感空间感；明度高的多复色（参看 明度的网页例图）多用来表示宁静柔和、细腻的情感， 易于长时间的浏览。 网页选色的考虑 v 从 以上例子可看出三原色视觉冲击力最强，也最是刺目的 ，容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的 配色，大面积大范围使用要慎重。 v 间色是由三原色 中的两色调配二次，间于原色和复色之间， 属于中性色，视觉冲击力次之，颜色的刺激缓

11、和不少，给人 舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使 用 得比较多的颜色。 v 复色是由两种间色或原色与间色相混合而产生的颜色，呈灰 色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配 好了，能体现出高层次高素 养的成熟特性魅力，也称为高级 灰，是很经看的颜色。 色彩的4种角色 v 主色调 页面色彩的主要色调、总趋势，其他配色不能超过该主要 色调的视觉影响 v 辅色调 仅次与主色调的视觉面积的辅助色，是烘托主色调、支持 主色调、起到融合主色调效果的辅助色调。 v 点睛色 在小范围内点上强烈的颜色来突出主题效果，使页面更加 鲜明生动。 v 背景色 衬托环抱整体的色调，协调、支配整

12、体的作用。 网页中色彩的角色示例 色彩搭配的方案 v同类色搭配 v邻近色搭配 v互补色搭配 v对比色搭配 同类色 v 比邻近色更加接近的颜色，色环中距离为0 60度的颜色。它主要指在同一色相中不同的颜色 变化。例如，红颜色中有紫红、深红、玫瑰红、 大红、朱红、桔红等等种类，黄颜色中又有深 黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区 别。它起到色彩调和统一，又有微妙变化的作 用。 同类色搭配 邻近色 v 是在色环上任一颜色同其毗邻之色。邻近色 也是类似色关系，只是范围扩大了一点。例如红 色和黄色，绿色和蓝色，互为邻近色。 邻近色搭配 补色 v补色(分离补色）： 色轮上的任意颜色，以及它的补色的两边

13、颜色，当使 用在同个版面上的时候被称为“分离补色”。分离补色的运 用可以造成很强烈的对比。 补色搭配 对比色 v 对比色是指在色环中的直接位置相对的颜色，如果想要使 网站中的色彩强烈突出、富有冲击力的话，可以选择对比 色搭配。 对比色搭配 对比色搭配 对比色搭配 色彩的对比 v 对比与调和就是形式美的变化与统一规律 v 在一定条件下，不同色彩之间的对比会有不同的效果。在 不同的环境下，多色彩给人一种印象，色彩单一给人另一 种印象。 很多人都以为色彩对比主要是红绿、橙蓝、黄紫色的 对比，实际色彩对比范畴不局限于这些。是指各种色彩的 界面构成中的面积、形状、位置以及色相、明度、纯度之 间的差别，使

14、网页色彩配合增添了许多变化、页面更加丰 富多彩。 色相对比 v是指因色相之间的差别形成的对比。当主色相确 定后，必须考虑其他色彩与主色相是什么关系， 要表现什么内容及效果等，这样才能增强其表现 力。不同色相对比取得的效果有所不同，两色越 接近，对比效果越柔和。越接近补色，对比效果 越强烈。 色相对比 纯度对比 v是指不同色彩之间纯度的差别而形成的对比。色 彩纯度可大致分为高纯度、中纯度、低纯度三 种。未经调和过的原色纯度是最高的，而间色多 属中纯度的色彩，复色其本身纯度偏低而属低纯 度的色彩范围。纯度的对比会使色彩的效果更明 确肯定。 纯度对比 补色对比 纯度对比 面积对比 v 同一种色彩，面

15、积越大，明度、纯度越强，面积越小，明 度、纯度越低。面积大的时候，亮的色显得更轻，暗的色 显得更重。这种现象称为色彩的面积效果。面积对比是指 页面中各种色彩在面积上多与少、大与小的差别，影响到 页面主次关系。 v 面积的对比,可以是中高低明度差的面积变化及中高低 纯度差的面积变化。 面积对比 色彩调和 v两种或两种以上的色彩合理搭配，产生统一和 谐的效果，称为色彩调和。 色彩调和的几种基本方法 v同种色的调和 相同色相、不同明度和纯度的色彩调和。使之产生秩 序的渐进，在明度、纯度的变化上，弥补同种色相的 单调感 v类似色的调和 在色环中,色相越靠近越调和。主要靠类似色之间 的共同色来产生作用。

16、 v 对比色的调和 调和方法有： 1、提高或降低对比色的纯度； 2、在对比色之间插入分割色（金、银、黑、白、灰 等）； 3、采用双方面积大小不同的处理方法； 4、对比色之间加入相近的类似色。 v 渐变色的调和 渐变色实际是一种调和方法的运用。是颜色按层次逐 渐变化的现象。色彩渐变就像两种颜色间的混色，可以有 规律地在多种颜色中进行。暗色和亮色之间的渐变会产生 远近感和三维的视觉效果。 色彩调和的经验 v 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心 思想。 v 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色 凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一 调配的目的。 v 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、 黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说 越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才 对比色调和页面分析例子方法。 v 不是一种色彩面积用得越多或者越少、纯度、明度