基于Web标准的网页设计与制作.ppt

《基于Web标准的网页设计与制作.ppt》由会员分享，可在线阅读，更多相关《基于Web标准的网页设计与制作.ppt（272页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、将网页元素装填入表格内实现布局，表格相当于网页的骨架，因此表格布局的步骤是先画表格，再往表格里填内容。vDIVCSS布局布局用盒子布局，利用网页元素本身的盒子模型，通过盒子在页面上的排列和嵌套进行布局。布局的含义v网页版面布局是网页设计中的一项重要内容。版面指的是网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页面。因为每个人的显示器分辨浏览器看到的完整的一个页面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现率不同，所以同一个页面的分辨率可能出现800*600像素，像素，1024*768像素等。像素等。v布局，就是以最适合浏览的方式将图片和文字摆放在页面

3、布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。网页版面布局是指定网页内容在浏览器中的的不同位置。网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主要内容的显示方式，例如徽标的位置、导航栏的显示、主要内容的排版等。经常用到的版面布局结构主要有以下几种：排版等。经常用到的版面布局结构主要有以下几种：常见网页的版式v131式式v121式式v艺术版式艺术版式v1-3-1式式v示例示例Logo banner导航条（导航条（Navigator)Bottom(版权信息）版权信息）栏目栏目1栏目栏目2栏目栏目3用表格实现用表格实现用用CSS布局实布局实现现表格布局

4、的原则v各栏目之间必须相对各栏目之间必须相对独立独立，方法是把每个栏目装，方法是把每个栏目装在一个单独的表格中，这样修改一个栏目时不会在一个单独的表格中，这样修改一个栏目时不会对其他栏目产生影响对其他栏目产生影响v各栏目之间必须用占位表格各栏目之间必须用占位表格(或或CSS边界）留出一边界）留出一定的空隙定的空隙v栏目采取栏目采取纵列纵列的形式排列的形式排列用CSS布局实现1-3-1布局中间几列的盒子必中间几列的盒子必须用一个大盒子包须用一个大盒子包含起来，否则这几含起来，否则这几列无法实现居中列无法实现居中网页的配色网页的配色v网页不只是传递信息的媒介，同时也是网络上的网页不只是传递信息的媒

5、介，同时也是网络上的艺术品艺术品。如何让浏览者以轻松惬意的心态吸收网。如何让浏览者以轻松惬意的心态吸收网页传递的信息，是一个值得研究的课题。页传递的信息，是一个值得研究的课题。v任何网页创意使用的视觉元素总的归纳起来不外任何网页创意使用的视觉元素总的归纳起来不外乎三种：乎三种：文字文字、图像图像、色彩色彩。三者选用搭配的适。三者选用搭配的适当，编排组合的合理，将对网页的美化起到直接当，编排组合的合理，将对网页的美化起到直接的效果。的效果。色彩的基本知识v色彩的色彩的RGB模式模式：RGB是表示红色、绿色、蓝色又称为三原色光，英文为R(Red)、G(Green)、B(Blue)，在电脑中，RGB

6、的所谓“多少”就是指亮度，并使用整数来表示。通常情况下，RGB各有256级亮度，用数字表示为从0、1、2至255。红、黄、蓝是三原色，其它色彩都可以用这三种颜色调和而成。网页中色彩表达除了用颜色名称表达外，就是用这三种颜色的数值表示：红色color(255,0,0)、十六进制表示为(ff0000)如：“bgcolor=#ffffff”表示背景色为白色色彩的基本知识v色彩的色彩的HSB模式模式：vHSB是指颜色分为是指颜色分为色相色相、饱和度饱和度、明度明度三个要三个要素。英文为素。英文为H(Hue)、S（Saturation）B（Brightness)饱和度高色彩较艳饱和度高色彩较艳丽。饱和度

7、低色彩就接丽。饱和度低色彩就接 近灰色。亮度高色彩明亮，近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑。一般浅色的饱和度较低，亮度较高，而深纯黑。一般浅色的饱和度较低，亮度较高，而深色的饱和度高而亮度低。色的饱和度高而亮度低。色彩的三要素v色相色相、明度明度和和饱和度饱和度构成色彩的三要素。自然界中的颜构成色彩的三要素。自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其它所有的颜色均属于彩色，和各种深浅不一的灰色，而其它所有的颜色均属于彩色，任何

8、一种色彩都具有明度、纯度、饱和度三大属性。任何一种色彩都具有明度、纯度、饱和度三大属性。(1).色相色相色相指色彩的相貌。如：色相指色彩的相貌。如：红、黄、蓝红、黄、蓝、绿等。、绿等。(2).明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。(3).饱和度（纯度）饱和度（纯度）纯度指色彩的纯净程度，纯度越高，色相感越强。纯度指色彩的纯净程度，纯度越高，色相感越强。色相(Hue)（1）色相）色相(Hue)基本色相为：基本色相为：红、橙、黄、绿、蓝、紫红、橙、黄、绿、蓝、紫六色。在各色中间加插六色。在各色中间加插一两个中间色，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿一两个中间色，按光谱顺

9、序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫蓝、蓝绿、蓝、蓝紫、紫、红紫,形成十二基本色相。形成十二基本色相。色相的计算机数值表示v以颜色在色相环上的度数值来表示以颜色在色相环上的度数值来表示v如红色是如红色是0度，橙色是度，橙色是60度，黄色是度，黄色是120度，那么度，那么用色相值用色相值0表示红色，表示红色，60表示橙色，因此色相的取表示橙色，因此色相的取值应该是值应该是0360，但计算机中是用八位，但计算机中是用八位2进制数表进制数表示色相的，所以取值只能是示色相的，所以取值只能是0240，这样还要把，这样还要把原来的色相值乘以原来的色相值乘以2/3明度(Brig

10、htness)v（2）明度）明度(Brightness)明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现明度是色彩的第二属性。是指色彩的明暗程度，也叫亮度，体现体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。体现颜色的深浅。是全部色彩都具有的属性，明度越大，色彩越亮。明度越低，颜色越暗明度越低，颜色越暗饱和度(Saturation)v（3）饱和度）饱和度(Saturation)也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混也叫纯度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色白色或者或者

11、黑色黑色，使得它的纯度低，颜色趋于柔和、沉稳。，使得它的纯度低，颜色趋于柔和、沉稳。纯度网页例图 v（4）色彩的特质）色彩的特质 色彩的特质指的是色彩和色彩组合所能引发的特定情绪反映。我色彩的特质指的是色彩和色彩组合所能引发的特定情绪反映。我们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和们依靠光来分辨颜色，再利用颜色和无数种色彩的组合来表达思想和情绪。情绪。热冷暖凉亮暗艳淡原色v也叫也叫三原色三原色。即红、黄、蓝三种基本颜色。自然界中的。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色

12、是其他颜色调配不出来的。除白色外，把三原色色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。相互混合，可以调和出其他种颜色。根据三原色的特性做出相应的色彩搭配，有根据三原色的特性做出相应的色彩搭配，有最迅速最最迅速最有力最强烈有力最强烈的传达视觉信息效果。的传达视觉信息效果。红色网页例图 蓝色网页例图间色v又叫又叫二次色二次色。它是由三原色调配出来的颜色，是由。它是由三原色调配出来的颜色，是由2种种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫红与蓝调配出紫色，橙、

13、绿、紫三种颜色又叫三间色三间色。在调配时，由于原色在份量多少上有所不同，所以能产生在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化丰富的间色变化 v 间色是由三原色中的两原色调配而成的，因间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说此在视觉刺激的强度相对三原色来说缓和缓和不少。不少。属于较易搭配之色。属于较易搭配之色。间色尽管是二次色，但仍有很强的视觉冲击间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。力，容易带来轻松、明快、愉悦的气氛。间色配色网页复色v也叫也叫复合色复合色。复色是由原色与间色相调或由间。复色是由原色与间色相

14、调或由间色与间色相调而成的色与间色相调而成的三次色三次色，复色是的，复色是的纯度最纯度最低，含灰色成份低，含灰色成份。复色包括了除原色和间色以外。复色包括了除原色和间色以外的所有颜色。的所有颜色。复色网页示例复色网页配色说明v以上以上4种颜色中深绿色和赭石色为复色，之所以还选种颜色中深绿色和赭石色为复色，之所以还选择其它择其它2颜色，为的是更好的配合说明复色的特性，如果颜色，为的是更好的配合说明复色的特性，如果没有另外两种非复色搭配，页面配色就可能出现肮脏等没有另外两种非复色搭配，页面配色就可能出现肮脏等不舒服的感觉。不舒服的感觉。v 复色是由两种间色或原色与间色混合而成，因此色复色是由两种间

15、色或原色与间色混合而成，因此色相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之 感，属于不好搭配之色。但有时复色加深色搭配能很好感，属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感；明度高的多复色（参看的表达神秘感、纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、细腻的情感，明度的网页例图）多用来表示宁静柔和、细腻的情感，易于长时间的浏览。易于长时间的浏览。网页选色的考虑v 从从 以上例子可看出以上例子可看出

16、三原色三原色视觉冲击力最强，也最是刺目的，视觉冲击力最强，也最是刺目的，容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的配容易制造冲突、烦燥、不舒适的心情，所以是较难掌握的配色，大面积大范围使用要慎重。色，大面积大范围使用要慎重。v间色间色是由三原色是由三原色 中的两色调配二次，间于原色和复色之间，中的两色调配二次，间于原色和复色之间，属于中性色，视觉冲击力次之，颜色的刺激缓和不少，给人属于中性色，视觉冲击力次之，颜色的刺激缓和不少，给人舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使舒适、愉悦的心情，是较容易掌握的配色，也是在设计中使用用 得比较多的颜色。得比较多的颜色。v复色复色是由

17、两种间色或原色与间色相混合而产生的颜色，呈灰是由两种间色或原色与间色相混合而产生的颜色，呈灰色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配色阶，视觉冲击力更弱，柔和但是使人沉闷压抑。复色调配好了，能体现出高层次高素好了，能体现出高层次高素 养的成熟特性魅力，也称为高级养的成熟特性魅力，也称为高级灰，是很经看的颜色。灰，是很经看的颜色。色彩的4种角色v 主色调主色调页面色彩的主要色调、总趋势，其他配色不能超过该主要页面色彩的主要色调、总趋势，其他配色不能超过该主要色调的视觉影响色调的视觉影响v 辅色调辅色调仅次与主色调的视觉面积的辅助色，是烘托主色调、支持仅次与主色调的视觉面积的辅助色，是

18、烘托主色调、支持主色调、起到融合主色调效果的辅助色调。主色调、起到融合主色调效果的辅助色调。v 点睛色点睛色 在小范围内点上强烈的颜色来突出主题效果，使页面更加在小范围内点上强烈的颜色来突出主题效果，使页面更加鲜明生动。鲜明生动。v 背景色背景色 衬托环抱整体的色调，协调、支配整体的作用。衬托环抱整体的色调，协调、支配整体的作用。网页中色彩的角色示例色彩搭配的方案v同类色搭配同类色搭配v邻近色搭配邻近色搭配v互补色搭配互补色搭配v对比色搭配对比色搭配同类色v比邻近色更加接近的颜色，色环中距离为比邻近色更加接近的颜色，色环中距离为060度的颜色。它主要指在同一色相中不同的颜色度的颜色。它主要指在

19、同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩起到色彩调和统一调和统一，又有，又有微妙变化微妙变化的作用。的作用。同类色搭配邻近色v是在色环上任一颜色同其毗邻之色。邻近色是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围扩大了一点。例如红也是类似色关系，只是范围扩大了一点。例如红色和黄色，绿色和蓝色，互为邻近色。色和黄色，绿色和蓝色，互为邻近色。邻

20、近色搭配补色v补色补色(分离补色）：分离补色）：色轮上的任意颜色，以及它的补色的两边颜色，当使色轮上的任意颜色，以及它的补色的两边颜色，当使用在同个版面上的时候被称为用在同个版面上的时候被称为“分离补色分离补色”。分离补色的。分离补色的运用可以造成运用可以造成很强烈很强烈的对比。的对比。补色搭配对比色v对比色是指在色环中的直接位置相对的颜色，如果想要使对比色是指在色环中的直接位置相对的颜色，如果想要使网站中的色彩网站中的色彩强烈突出、富有冲击力的话强烈突出、富有冲击力的话，可以选择对比，可以选择对比色搭配。色搭配。对比色搭配对比色搭配对比色搭配色彩的对比v对比对比与与调和调和就是形式美的变化与

21、统一规律就是形式美的变化与统一规律 v在一定条件下，不同色彩之间的对比会有不同的效果。在在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。种印象。很多人都以为色彩对比主要是红绿、橙蓝、黄紫色的很多人都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指对比，实际色彩对比范畴不局限于这些。是指各种色彩的各种色彩的界面构成中的面积界面构成中的面积、形状形状、位置位置以及以及色相色相、明度明度、纯度纯度之之间的差别，使网页色彩配合增添了许多变化、页面更加丰间的差别，使

22、网页色彩配合增添了许多变化、页面更加丰富多彩。富多彩。色相对比 v是指因色相之间的差别形成的对比。当主色相确是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，力。不同色相对比取得的效果有所不同，两色越两色越接近，对比效果越柔和。越接近补色，对比效果接近，对比效果越柔和。越接近补色，对比效果越强烈越强烈。色相对比纯度对比v是指不同色彩之间纯度的差别而形成的对比。色是指不同色彩之间纯度的差别而形成的对比。

23、色彩纯度可大致分为高纯度、中纯度、低纯度三种。彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯色彩范围。纯度的对比会使色彩的效果更明确肯定。定。纯度对比补色对比纯度对比面积对比 v同一种色彩，面积越大，明度、纯度越强，面积越小，明同一种色彩，面积越大，明度、纯度越强，面积越小，明度、纯度越低。面积大的时候，亮的色显得更轻，暗的色度、纯度越低。面积大的时候，亮的色显得更轻，暗的色显得更重。这种

24、现象称为色彩的面积效果。面积对比是指显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别，影响到页面中各种色彩在面积上多与少、大与小的差别，影响到页面主次关系。页面主次关系。v面积的对比面积的对比,可以是中高低明度差的面积变化及中高可以是中高低明度差的面积变化及中高低纯度差的面积变化。低纯度差的面积变化。面积对比色彩调和v两种或两种以上的色彩合理搭配，产生统一和两种或两种以上的色彩合理搭配，产生统一和谐的效果，称为谐的效果，称为色彩调和色彩调和。色彩调和的几种基本方法v同种色的调和同种色的调和 相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进，在明

25、度、纯度的变化上，弥补同种色相的单调感 v类似色的调和类似色的调和在色环中在色环中,色相越靠近越调和。主要靠类似色之间色相越靠近越调和。主要靠类似色之间的共同色来产生作用。的共同色来产生作用。v对比色的调和对比色的调和调和方法有：调和方法有：1、提高或降低对比色的纯度；、提高或降低对比色的纯度；2、在对比色之间插入分割色（金、银、黑、白、灰、在对比色之间插入分割色（金、银、黑、白、灰等）；等）；3、采用双方面积大小不同的处理方法；、采用双方面积大小不同的处理方法；4、对比色之间加入相近的类似色。、对比色之间加入相近的类似色。v渐变色的调和渐变色的调和渐变色实际是一种调和方法的运用。是颜色按层次

26、逐渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果远近感和三维的视觉效果。色彩调和的经验v 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。思想。v 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做

27、到统一凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。调配的目的。v 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才对比色调和页面分析例子方法。对比色调和页面分析例子方法。v 不是一种色彩面积用得越多或者越少、纯度、明度越高就是不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主

28、体的主角色，主要是根据色彩相互之间的搭配关系来体现能突出主体的主角色，主要是根据色彩相互之间的搭配关系来体现的。的。v 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配，容易产生个性效果，那叫玩色彩了，限于色彩运用得非颜色搭配，容易产生个性效果，那叫玩色彩了，限于色彩运用得非常熟练的朋友，但不推荐初学者使用。常熟练的朋友，但不推荐初学者使用。网页的色彩搭配v颜色分非彩色与彩色两类：非彩色指黑、白、灰，其它颜色分非彩色与彩色两类：非彩色指黑、白、灰，其它为彩色。网页制作用彩色还是非彩色好呢？根据专业的为彩色。网页制作用彩色还是非彩色

29、好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色吸引人。我们通常的做法是：主要内容文字用非彩色(黑黑色色)，边框，背景，图片用彩色。，边框，背景，图片用彩色。这这 样页面整体不单调，样页面整体不单调，看主要内容也不会眼花看主要内容也不会眼花。v任何色彩都有饱和度和透明度的属性，属性的变化产生任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。不同的色相

30、，所以至少可以制作几百万种色彩。网页的色彩搭配非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是中庸色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。网页的色彩搭配颜色分：暖色系、中性系、寒色系v不同的颜色会给浏览者不同的心理感受不同的颜色会给浏览者不同的心理感受,如：绿色如：绿色-介于冷暖两中色彩的中间，显得和睦，宁静，健康，介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。安全的感觉。它和金黄，淡白搭配，可以产生优雅，它和金黄，淡白搭配，可以产生优雅，舒适的气氛舒适的气氛。v每种色

31、彩在饱和度，透明度上略微变化就会产生不同每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色的感觉。以绿色为例，黄绿色 有青春，旺盛的视觉意有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。境，而蓝绿色则显得幽宁，阴深。网页色彩的搭配v原理原理1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体

32、现女性站点的柔色体现女性站点的柔 性。性。4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。联。配色的基本技巧v技巧技巧1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如用蓝色和黄色,，整个页面色

33、彩丰富但不花稍。3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很跳。网页色彩的搭配v忌讳忌讳不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。边框和背景的颜色应相似，且边框的颜色较深，背景的颜色较浅一些网页配色方案柔和、明亮、温和柔和、洁净、爽朗 可爱、快乐、有趣 轻快、华丽、动感 狂野、充沛、动感 华丽、花哨、女性化 回味、女性化、优雅 高尚、自然、安稳 学习网页设计的建议v善于观察，发现细微的不同善于观察，发现细微的

34、不同v注重细节，追求完美注重细节，追求完美v重视网页的源代码，达到知其然，而且知其所以重视网页的源代码，达到知其然，而且知其所以然然v抓住重点，表格和抓住重点，表格和CSS的灵活运用是重点的灵活运用是重点v勤于实践，只有在自己做的过程中才能发现很多勤于实践，只有在自己做的过程中才能发现很多书本上没讲到的问题书本上没讲到的问题参考书籍vLearning Web Design(3rd)v别具光芒别具光芒DIV CSS网页布局与美化网页布局与美化v精通精通CSS+DIV网页样式与布局网页样式与布局v精通精通CSS高级高级Web标准解决方案标准解决方案vCSS设计彻底研究（温谦）设计彻底研究（温谦）v

35、网页设计与配色实例分析（黎芳）网页设计与配色实例分析（黎芳）中国高等院校计算机基础教育课程体系规划教材v唐四薪唐四薪 编著编著v清华大学出版社清华大学出版社v2009年年11月月基于基于Web标准的网页设计标准的网页设计配套网站：http:/本书目录v第一章第一章 网页设计概述网页设计概述 v第二章第二章 HTML、XHTML和和Web标准标准 v第三章第三章 HTML标记标记 v第四章第四章 CSS v第五章第五章 Fireworks v第六章第六章 网站开发和网页设计的过程网站开发和网页设计的过程 v第七章第七章 JavaScript 第一章 网页与网站基础本章要点v 网页和网站的关系网页

36、和网站的关系v Web服务器和浏览器服务器和浏览器v 动态网页和静态网页动态网页和静态网页v 域名与主机的关系域名与主机的关系v URL的结构的结构 internetvInternet是由遍布全世界的各种各样的网络通过是由遍布全世界的各种各样的网络通过TCP/IP协议连接成的一个松散结合的全球网，它协议连接成的一个松散结合的全球网，它使网络上的各台计算机（使网络上的各台计算机（Internet上称为主机，即上称为主机，即host）可以互相交换信息。）可以互相交换信息。vInternet为用户提供了各种各样的服务，如为用户提供了各种各样的服务，如WWW，Email，FTP，即时通信即时通信等。等

37、。Google earthWWWvWWW的含义是全球信息网（的含义是全球信息网（World Wide Web），简称为），简称为Web或或“万维网万维网”。它是一个基。它是一个基于超文本于超文本(hypertext)方式的方式的信息查询工具信息查询工具，通，通过过http协议传输超文本信息。是由欧洲核子物理协议传输超文本信息。是由欧洲核子物理研究中心（研究中心（CERN）研制的。）研制的。vWWW将位于全世界将位于全世界Internet上不同网址的相关上不同网址的相关数据信息有机地编织在一起，通过数据信息有机地编织在一起，通过浏览器浏览器（browser）提供一种友好的信息查询界面。）提供一种

38、友好的信息查询界面。WWW特点vWWW具有三个统一：具有三个统一：1.统统一一的的资资源源定定位位方方式式：URL（统统一一资资源源定位器，即网址）。定位器，即网址）。2.统统一一的的资资源源访访问问方方式式：HTTP（超超文文本本传传输协议）。输协议）。3.统统一一的的信信息息组组织织方方式式：HTML（超超文文本本标记语言）。标记语言）。网 页v网页即是网页即是超文本超文本，是通过超文本标记语言，是通过超文本标记语言HTML（HypeText Markup Language）书写的一种）书写的一种纯纯文本文件文本文件，v客户通过浏览器看到的包含了如文字、图像、声音和动客户通过浏览器看到的包

39、含了如文字、图像、声音和动画等多媒体信息的每一个页面，其本质是一个纯文本文画等多媒体信息的每一个页面，其本质是一个纯文本文件。件。v浏览器对该纯文本文件进行了解释，才生成了多姿多彩浏览器对该纯文本文件进行了解释，才生成了多姿多彩的网页，除文本外，其它媒体素材（图像、声音、动画的网页，除文本外，其它媒体素材（图像、声音、动画和影像等），都需要保存成单独的文件，通过和影像等），都需要保存成单独的文件，通过URL嵌入嵌入到网页文件中。到网页文件中。v可以看出，可以看出，WWW服务主要是通过一个个多媒体网页提服务主要是通过一个个多媒体网页提供给用户各种信息的供给用户各种信息的HTML超文本标记语言v超

40、文本标记语言超文本标记语言HTML作为一种语言，它具有语言的一作为一种语言，它具有语言的一般特征，即它是一种符号系统，具有自己的词汇（符号）般特征，即它是一种符号系统，具有自己的词汇（符号）和语法（规则）。和语法（规则）。v所谓标记，就是所谓标记，就是作记号作记号。如我们写文章时通常用大体字。如我们写文章时通常用大体字标记文章的标题，用换行空两格标记一个段落标记文章的标题，用换行空两格标记一个段落v所谓超文本，就是相比普通文本有超越的地方，如超文所谓超文本，就是相比普通文本有超越的地方，如超文本可以通过超链接转到指定的某一页，而普通文本只能本可以通过超链接转到指定的某一页，而普通文本只能一页页

41、翻，超文本还具有图像，视频，声音等元素，并一页页翻，超文本还具有图像，视频，声音等元素，并能和用户交互，这些都是普通文本无法达到的能和用户交互，这些都是普通文本无法达到的 HTML的历史v超文本标记语言超文本标记语言HTML是一种建立超文本是一种建立超文本/超媒体文档的语言，它用超媒体文档的语言，它用标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些标签标记文档中的文本及图像等各种元素，指示浏览器如何显示这些元素。元素。HTML的发展历程如图所示的发展历程如图所示 GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLGener

42、alized Markup LanguageStandard Generalized Markup LanguageHyper Text Markup LanguageeXtensible Markup LanguageHTML与编程语言的区别vHTML语言与编程语言有明显不同，首先它不是一种计语言与编程语言有明显不同，首先它不是一种计算机编程语言，而是一种描述文档结构的语言，或者说算机编程语言，而是一种描述文档结构的语言，或者说排版语言排版语言；v其次其次HTML是是弱语法语言弱语法语言，随便怎么写都可以，计算机，随便怎么写都可以，计算机尽力去理解执行，不理解的按原样显示，而编程语言是尽力去

43、理解执行，不理解的按原样显示，而编程语言是严格语法的语言，写错一点点计算机就不执行，报告错严格语法的语言，写错一点点计算机就不执行，报告错误；误；v再次再次HTML语言不像大多数编程语言一样需要编译成指语言不像大多数编程语言一样需要编译成指令后执行，而是每次由浏览器令后执行，而是每次由浏览器解释执行解释执行。网 站v一个网站对应磁盘上的一个一个网站对应磁盘上的一个文件夹文件夹，网站的所有，网站的所有网页和其他资源文件都会放在该文件夹下或其子网页和其他资源文件都会放在该文件夹下或其子文件夹下，文件夹下，设计良好的网站通常是将网页文档及设计良好的网站通常是将网页文档及其它资源分门别类地保存在相应的

44、文件夹中以方其它资源分门别类地保存在相应的文件夹中以方便管理和维护。便管理和维护。这些网页通过链接组织在一起，这些网页通过链接组织在一起，其中有个网页称为其中有个网页称为首页首页，常命名为，常命名为index.htm，必，必须放在网站的根目录下。须放在网站的根目录下。v网页中所需要的图片文件一般单独保存在该目录网页中所需要的图片文件一般单独保存在该目录下一个叫下一个叫images的文件夹下。的文件夹下。网站结构Wgzxwebindex.htmimagesstyle.cssabout.htmlh1.htmh2.htmh3.htm首首页页文文件件的的直直接接上上级级目目录录，是网站根目录是网站根目

45、录首首页页文文件件的的间间接接上上级级目目录，不是网站根目录录，不是网站根目录网站目录的建立v因此制作网站的第一步是在硬盘上新建一个文件夹，作为因此制作网站的第一步是在硬盘上新建一个文件夹，作为网站网站根目录根目录，以后把这个目录上传到服务器上就可以了。，以后把这个目录上传到服务器上就可以了。由于我们制作网站一般需要用到由于我们制作网站一般需要用到Dreamweaver，所以还要，所以还要配置网站在配置网站在Dreamweaver下的开发环境，在下的开发环境，在Dreamweaver中新建站点，任意取一个站点名，把刚才新建的那个文件中新建站点，任意取一个站点名，把刚才新建的那个文件夹作为站点文

46、件夹就可以了，这样站点目录内的夹作为站点文件夹就可以了，这样站点目录内的html文件文件之间的链接会使用相对之间的链接会使用相对Url的形式。的形式。v示范示范网站的特点v众多的网页众多的网页v确定的主题确定的主题v统一的风格、统一的风格、v便捷的导航、便捷的导航、v栏目的分层栏目的分层 网站制作的流程：网站制作的流程：p确定站点的核心内容确定站点的核心内容p网站的规划网站的规划p网站外观的设计网站外观的设计p网页具体制作网页具体制作p网站性能测试网站性能测试p网站发布网站发布p网站更新与维护。网站更新与维护。网页和网站的制作工具 pAdobe的的Dreamweaver CS3pMicroso

47、ft的的Expression WebVSWeb服务器和浏览器v网页被放置在网页被放置在Web服务器上服务器上v用户通过用户通过Url请求请求web服务器时，服务器时，web服务器把服务器把相应的网页传送到用户浏览器端相应的网页传送到用户浏览器端 vWeb服务器的作用：对于静态网页，服务器的作用：对于静态网页，web服务器服务器仅仅是定位到网站对应的目录，找到每次请求仅仅是定位到网站对应的目录，找到每次请求的网页传送给客户端。的网页传送给客户端。v对于动态网页，对于动态网页，web服务器找到该网页后要先对服务器找到该网页后要先对动态网页中的动态网页中的服务器端程序代码服务器端程序代码进行执行，生

48、进行执行，生成静态网页代码再传送给客户端浏览器。成静态网页代码再传送给客户端浏览器。Web服务器v由于由于web服务器对静态网页起的只是一个查找和服务器对静态网页起的只是一个查找和传输的作用，因此我们测试静态网页时可不安装传输的作用，因此我们测试静态网页时可不安装web服务器，直接找到该网站对应的目录双击网服务器，直接找到该网站对应的目录双击网页文件预览测试，页文件预览测试，v而测试或运行动态网页则一定要在本机上安装而测试或运行动态网页则一定要在本机上安装web服务器服务器(如如IIS)，因为动态网页要经过，因为动态网页要经过web服务服务器解释执行生成器解释执行生成html文档才能被浏览器解

49、释文档才能被浏览器解释 浏览器v浏览器：用户浏览网页所用浏览器：用户浏览网页所用v浏览器的本质：解释浏览器的本质：解释html代码生成我们看到的网代码生成我们看到的网页页 v目前常见的浏览器（按使用量多少排列）有：目前常见的浏览器（按使用量多少排列）有：IE6、IE7、IE8、Firefox 3、Safari 4、Google Chrome 2、Opera 10及及Netscape Navigator 9浏览器的logo IE7&IE8 Firefox 3Netscape Navigator 9Opera 10 Safari 4 Google Chrome 2静态网页和动态网页v静态网页是静态

50、网页是不包含服务器端代码不包含服务器端代码的的html文件，文件，web服务器只是负责把静态网页发送给浏览器，服务器只是负责把静态网页发送给浏览器，由浏览器解释执行由浏览器解释执行v动态网页中含有服务器端代码，需要先由动态网页中含有服务器端代码，需要先由web服服务器对这些服务器端代码进行解释执行生成客户务器对这些服务器端代码进行解释执行生成客户端代码后再发送给客户端浏览器端代码后再发送给客户端浏览器 动态网页的特征v同一个网页根据每次请求的不同，可每次显示不同一个网页根据每次请求的不同，可每次显示不同的内容同的内容v因为要显示不同的内容，所以往往需要因为要显示不同的内容，所以往往需要数据库数