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

《基于web标准的网页设计与制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

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

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

5、色彩的基本知识色彩的HSB模式：HSB是指颜色分为色相、饱和度、明度三个要素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳丽。饱和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。色彩的三要素色相、明度和饱和度构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何一种色彩都具有明度、纯度、饱和度三大属性。(1).色相色相指色彩的相貌。如：红、黄、蓝、绿等。(2

6、).明度明度指色彩的明暗程度。(3).饱和度（纯度）纯度指色彩的纯净程度，纯度越高，色相感越强。色相(Hue)（1）色相(Hue)基本色相为：红、橙、黄、绿、蓝、紫六色。在各色中间加插一两个中间色，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫,形成十二基本色相。色相的计算机数值表示以颜色在色相环上的度数值来表示如红色是0度，橙色是60度，黄色是120度，那么用色相值0表示红色，60表示橙色，因此色相的取值应该是0－360，但计算机中是用八位2进制数表示色相的，所以取值只能是0－240，这样还要把原来的色相值乘以2/3明度(Brightnes

7、s)（2）明度(Brightness)明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。明度越低，颜色越暗饱和度(Saturation)（3）饱和度(Saturation)也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。纯度网页例图（4）色彩的特质色彩的特质指的是色彩和色彩组合所能引发的特定情绪反映。我们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和情绪。热冷暖凉亮暗艳