《网页设计原则》PPT课件.ppt

网站设计原则电子商务网站开发基础   电子商务教研室    王玉玉一网站的设计步骤u确定网站主题u收集素材：图片、音频、文字、视频、动画等u规划站点结构：网站的结构、栏目的设置、网站的风格、网站导航、颜色搭配、版面布局、文字图片应用等u网页设计及开发u网站上传及推广u网站的更新维护二网站结构规划u善于建立目录结构u 一般利用文件夹来管理文档首先为站点创建一个根文件夹（根目录），用于存放网站的所有内容，再在根文件夹内建立几个文件夹，再将文档分门别类地存储到相应的文件夹下若站点较大，可创建多级子文件夹，先按栏目分类，在栏目里再分类u目录层次不宜太深，一般不要超过三层链接关系清晰直观—“三次点击” ，通过三次点击找到相关信息） u维护文件目录，最好在Dreamweaver中进行，如文件的改名等，保证相关的链接正常二网站结构规划u使用合理的文件名称u 不要使用特殊符号命名，最好用字母和数字因有些服务器不认识这些特殊符号，会导致文件链接出错u不要用汉字作为文件名因为很多web服务器或浏览网页的用户使用英文的操作系统，对中文支持不好，称为乱码，中文的文件名会导致浏览错误或访问失败u所有文件名建议用小写。

因为Internet上大多数服务器的操作系统为UNIX类，对大小写是敏感的，同样会出现文件调用出错或链接不正常u文件名最好有一定的意义容易理解，便于日后的修改和维护二网站结构规划u网页的适应性u 即在不同系统、不同浏览器和不同分辨率的适应能力u网页的尺寸通常以像素为单位，显示器的分辨率通常为1024*768或800*600，网页宽度最好在760——770像素之间，这样在两种分辨率下都能达到较佳的视觉效果，一般不要超过780，一定不要让用户横向拖页面u向下拖动页面是唯一给网页增加更多内容的方法一般不要让访问者拖动页面超过三屏如果内容多，最好通过链接的形式方便浏览u避免滥用动态技术动态技术和图片、音乐文件相似，即体积大、浏览慢，所以不要用的太过多样和复杂二网站结构规划u规划站点的浏览机制u 网站导航要清晰u防止空链接、死链接u创建返回主页链接u显示网站简明目录结构（应该在主页或任何一个页面上，提供站点的简明目录结构，引导用户从一个页面快速进入到其他的页面）u反馈（网站发布后，多少会存在问题，从用户那里获得建议非常重要，应该提供联系途径，如公布管理员等版权信息，创建电子邮件链接等）网页设计原则电子商务网站开发基础   电子商务教研室    王玉玉一网页设计的基本原则u主题内容明确n主题选材要小而精n最好选择自己擅长或感兴趣的内容n选题不要太滥（到处可见），目标定位不宜太高u页面下载速度快u操作使用方便u链接无错误u网页特效宁少勿滥u保证页面兼容二网站风格设计u确信风格是建立在有价值的内容之上u需要彻底弄清网站要给人的印象是什么u在明确印象后开始努力建立和加强这种印象风格就是与众不同二网站风格设计u将网站标志logo，尽可能的放在每个页面上最突出的位置。

u突出网站标准色彩文字的链接色彩，图片的主色彩、背景色、边框等色彩尽量使用与标准色彩一致的色彩u突出网站的标准字体在关键的标题、菜单和图片里使用统一的标准字体u设计一条朗朗上口的宣传标语，把它放在网站的横幅里，或放在醒目的位置上以体现本网站的特色u相同类型的图像采用相同效果，比如阴影效果的方向、厚度、模糊度都一样u版面设计要一致u导航条的风格要一致u使用自己设计的花边、线条或点u展示网站的荣誉或成功作品u告诉网友关于个人真实的故事或想法u使用CSS可以更好地提高网页创作效率，同时可以方便地保持网页风格的统一u红色是一种容易给人造成视觉疲劳的颜色，给人以热情、活力的感觉在很多网站中，红色担任的角色都是情调色u橙色也是一种激奋的颜色，常用于某些时尚、新潮的网站中，在商业网站中也常用橙色，既能表现出青春的活力，也有沉稳老练的效果u黄色给人以明快、快活的感觉，也是站点配色中常用的颜色u绿色是具有黄色和蓝色两种成分的颜色在绿色中，将黄色的膨胀感与蓝色的收缩感相融合，将黄色的温暖感与蓝色的寒冷感相抵消，这样绿色是一种柔顺、恬静、优美的颜色，总能给人宁静和希望的感觉u蓝色的色感冷清，性格朴实而内向，是一种有助于人头脑冷静的颜色。

蓝色作为页面的主色，会给人凉爽、清新、专业的感觉，因此多用于商业网站● ●色彩的心理感觉色彩的心理感觉色彩的心理感觉色彩的心理感觉三网页色彩设计1、色彩的鲜明性网页的色彩要鲜艳，容易引人注目2、色彩的独特性要有与众不同的色彩，使得大家对你的印象强烈3、色彩的合适性就是说色彩和你表达的内容气氛相适合如用粉色体现女性站点的柔性 4、色彩的联想性不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联三网页色彩设计● ● 网页配色方案网页配色方案网页配色方案网页配色方案色环实质上就是在彩色光谱中所见的长色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色色环起，使红色连接到另一端的紫色色环通常包括通常包括 12 种不同的颜色种不同的颜色这这12 种不同的颜色被称为基本色种不同的颜色被称为基本色　　基色基色基色基色基色基色基色基色基色基色基色基色u“三原色”从定义上讲，三原色是能够按照一些数量规定合成其他任何一种颜 色的基色u在上小学时，你可能就知道了三原色：红红、、黄黄、、蓝蓝。

u但是如果你有喷墨打 印机的话，花点时间把它的盖子打开，看看它的墨盒你能看到红、黄、 蓝吗？不能！你可能看到的是四种墨色：蓝绿（青）色、红紫（洋红） 色、黄色和黑色基色基色基色基色基色基色基色基色基色基色基色基色u光的三原色光的三原色  RGB(红绿蓝红绿蓝)u美术三原色美术三原色   RYB（红黄蓝）（红黄蓝）u印刷三原色印刷三原色   CMY(青洋红黄青洋红黄)u在光学系统中，所有颜色由红、绿、蓝三种颜色按不同的灰度（亮度）混合而成于是在描述位图时有“8位色” “16位色” “32为色”，2的8次方亮度；2的16次方亮度；2的32次方亮度u印刷中，油墨是反色光的，所以组成的基础颜色和色光刚好相反（如同底片同相片的颜色对比）u而红黄蓝是美术三原色，是调不出来的而其它的颜色是可以用三原色调出来u这样就理解了RGB，光的三原色是设备显示的基础，光的三原色是设备显示的基础；CMY，油墨，油墨三原色是印刷中图像再现的色彩基础三原色是印刷中图像再现的色彩基础；而红、黄、蓝是在美术中调红、黄、蓝是在美术中调色的基本颜色，是人类色彩系统的理论三原色色的基本颜色，是人类色彩系统的理论三原色基色基色基色基色基色基色基色基色基色基色基色基色uPhotoshop软件等软件主要是用于制作网页、电脑作品（面向显示器）以及印刷作品（面向纸张），所以色彩系统采用的色谱环（红对青  黄对蓝）。

在coreldraw中，基础调色系统也是一样的，而coreldraw的混合器是面向美术的调色方式，所以其色环中的红色对绿色，这才是真正的“对比色”（互补色)美术三原色美术三原色   RYB（红黄蓝）（红黄蓝）光的三原色光的三原色  RGB(红绿蓝红绿蓝)u常见的网页配色方案有近似色、补充色、分离补色等u近似色近似色是色环上已给定的颜色临近的任何的一种颜色，如果您以橙色开始并想得到它的两个相似色，就选定红色和黄色使用相似色的配色方案可以提供颜色的协调和交融，类似于在自然界中所见到的那样u互补色互补色也称为对比色（反差最大）互补色在色环上相互正对如果想使网站中的色彩强烈突出、富有冲击力的话，可以选择对比色比如你正在组合一幅柠檬图片，用蓝色背景将使柠檬更加突出 u分离补色分离补色可由两种或三种颜色构成选择一种颜色，在色环的另一边找到它的互补色，然后使用该互补色两边的一种或两种颜色分离补色的搭配可以起到类似补充色的强烈对比作用，但有近似色的缓冲，可以使页面效果更加柔和三网页色彩设计● ● 网页色彩管理基础知识网页色彩管理基础知识网页色彩管理基础知识网页色彩管理基础知识u组色组色　　组色是色环上距离相等的任意三种颜色。

当组色被用作一个色彩主题时，会对浏览者造成紧张的情绪因为三种颜色形成对比u暖色暖色　　暖色由红色调组成比如红色、橙色和黄色它们给选择的颜色赋 予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并 从页面中突出出来的可视化效果u冷色冷色 　　　冷色来自于蓝色色调譬如蓝色、青色和绿色这些颜色将对色彩 主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果， 于是它们用作页面的背景比较好● ● 网页色彩管理基础知识网页色彩管理基础知识网页色彩管理基础知识网页色彩管理基础知识● ● 色相色相色相色相指色彩的相貌的统称● ● 明度明度明度明度指色彩的明暗程度或深浅程度● ● 纯度纯度纯度纯度指色彩的鲜浊程度，又称饱和度● ● 色彩的三属性色彩的三属性色彩的三属性色彩的三属性三网页色彩设计色彩对比 u两种以上的色彩，以空间或时间关系相比较，能比较出明显的差别，并产生比较作用，被称为色彩对比　　１、色相对比   因色相之间的差别形成的对比当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力将相同的橙色，放在红色或黄色上，我们将会发现，在红色上的橙色会有偏黄的感觉，因为橙色是由红色和黄色调成的，当他和红色并列时，相同的成份被调和而相异部份被增强，所以看起来比单独时偏黄，以其他色彩比较也会有这种现象，我们称为色名对比。

 除了色感偏移之外， 对比的两色， 有时会发生互相色渗的现象， 而影响相隔界线的视觉效果， 当对比的两色， 具有相同的彩度和明度时， 对比的效果越明显， 两色越接近补色， 对比效果越强烈２、明度对比   因明度之间的差别形成的对比柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度）　　明度对比 将相同的色彩，放在黑色和白色上，比较色彩的感觉，会发现黑色上的色彩感觉比较亮，放在白色上的色彩感觉比较暗，明暗的对比效果非常强烈明显，对配色结果产生的影响，明度差异很大的对比， 会让人有不安的感觉 ３、纯度(饱和度)对比 一种颜色与另一种更鲜艳的颜色相比时，会感觉不太鲜明，但与不鲜艳的颜色相比时，则显得鲜明，这种色彩的对比便称为纯度对比 ４、补色对比 将红与绿、黄与紫、蓝与橙等具有补色关系的色彩彼此并置，使色彩感觉更为鲜明，纯度增加，称为补色对比视觉的残像现象明显）５、冷暖对比 由于色彩感觉的冷暖差别而形成的色彩对比，称为冷暖对比红、橙、黄使人感觉温暖；蓝、蓝绿、蓝紫使人感觉寒冷；绿与紫介与其间），另外，色彩的冷暖对比还受明度与纯度的影响，白光反射高而感觉冷，黑色吸收率高而感觉暖。

u色彩的运用u先谈谈黑白灰色彩的应用，因为黑白灰色彩是万能色，可以跟任意一种色彩搭配当你为某种色彩的搭配苦恼的时候，不防试试用黑白灰当你觉得两种色彩的搭配不协调，试试加入黑色，或者灰色，或许会有意想不到的效果哦 u对一些明度较高的网站，配以黑色，可以适当地降低其明度　　白色是网站用的最普遍的一种颜色很多网站甚至留出大块的白色空间，作为网站的一个组成部分这就是留白艺术很多设计性网站较多运用留白艺术留白，给人一个遐想的空间，让人感觉心情舒适，畅快恰当的留白对于协调页面的均衡起到相当大的作用 u确定网站的主题色确定网站的主题色一个网站不可能单一的运用一种颜色，让人感觉单调，乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花俏一个网站必须有一种或两种主题色，不至于让客户迷失方向，也不到于单调，乏味所以确定网站的主题色也是设计者必须考虑的问题之一一个页面尽量不要超过4种色彩，用太多的色彩让人没有方向，没有侧重当主题色确定好以后，考虑其它配色时，一定要考虑其它配色与主题色的关系其它配色与主题色的关系，要体现什么样的效果另外哪种因素占主要地位，是明度，纯度还是色相u色彩的搭配1、网页标题网页标题是网站的指路灯，浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。

所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰明了，层次分明想往哪里走都不会迷失方向2、网页链接一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样现代人的生活节奏相当快，不可能浪费太多的时间在寻找你网站的链接上设置了独特的链接颜设置了独特的链接颜色色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标3、网页文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色让人一目了然当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章比如一个空白页的某一个部分用了很亮的一个大色块，是不是让你豁然开朗呢！此时他为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字 关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作关于文字的颜色：三种颜色以内；在背景图象上添加文本，一种较好的方法是使用相近色作为背景，补色作为文本色。

为背景，补色作为文本色为背景，补色作为文本色为背景，补色作为文本色 4、网页标志网页标志是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出我们将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来有时候为了更突出，也可以使用与主题色相反的颜色          重要信息可以运用不同颜色区块强调；重要信息可以运用不同颜色区块强调；重要信息可以运用不同颜色区块强调；重要信息可以运用不同颜色区块强调；          运用小色球或色块能造成集群化的效果，以协助视觉搜寻运用小色球或色块能造成集群化的效果，以协助视觉搜寻运用小色球或色块能造成集群化的效果，以协助视觉搜寻运用小色球或色块能造成集群化的效果，以协助视觉搜寻 　　● ● 网页配色方案网页配色方案网页配色方案网页配色方案uu1 1、用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，、用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，、用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，、用一种色彩这里是指先选定一种色彩，然后调整透明度或者饱和度，( (说得通俗些就是将说得通俗些就是将说得通俗些就是将说得通俗些就是将   色彩变淡或则加深色彩变淡或则加深色彩变淡或则加深色彩变淡或则加深) )，产生新的色彩，用于网页。

这，产生新的色彩，用于网页这，产生新的色彩，用于网页这，产生新的色彩，用于网页这样的页面看起来色彩统一，有层次感样的页面看起来色彩统一，有层次感样的页面看起来色彩统一，有层次感样的页面看起来色彩统一，有层次感uu2 2、用两种色彩先选定一种色彩，然后选择它的对比色、用两种色彩先选定一种色彩，然后选择它的对比色、用两种色彩先选定一种色彩，然后选择它的对比色、用两种色彩先选定一种色彩，然后选择它的对比色( (在在在在photoshopphotoshop里按里按里按里按ctrl+shift+I)ctrl+shift+I)如用蓝色和黄色，整个页面色彩丰富但不花稍如用蓝色和黄色，整个页面色彩丰富但不花稍如用蓝色和黄色，整个页面色彩丰富但不花稍如用蓝色和黄色，整个页面色彩丰富但不花稍uu3 3、用一个色系简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡、用一个色系简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡、用一个色系简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡、用一个色系简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝确定色彩的方法各人不同，我是在绿；或者土黄，土灰，土蓝。

确定色彩的方法各人不同，我是在绿；或者土黄，土灰，土蓝确定色彩的方法各人不同，我是在绿；或者土黄，土灰，土蓝确定色彩的方法各人不同，我是在photoshopphotoshop里按前景色方框，在跳出的拾色器窗中选择里按前景色方框，在跳出的拾色器窗中选择里按前景色方框，在跳出的拾色器窗中选择里按前景色方框，在跳出的拾色器窗中选择" "自定义自定义自定义自定义" "，然后，然后，然后，然后在在在在" "色库色库色库色库" "中选就可以了中选就可以了中选就可以了中选就可以了uu4 4、用黑色和一种彩色比如大红的字体配黑色的边框感觉很、用黑色和一种彩色比如大红的字体配黑色的边框感觉很、用黑色和一种彩色比如大红的字体配黑色的边框感觉很、用黑色和一种彩色比如大红的字体配黑色的边框感觉很“ “跳跳跳跳” ”   在在在在网页配色中，注意的是：网页配色中，注意的是：网页配色中，注意的是：网页配色中，注意的是：   1.1.不要将所有颜色都用到，尽量控制在三种色不要将所有颜色都用到，尽量控制在三种色不要将所有颜色都用到，尽量控制在三种色不要将所有颜色都用到，尽量控制在三种色彩以内   2.2.背景和前文的对比尽量要大，背景和前文的对比尽量要大，背景和前文的对比尽量要大，背景和前文的对比尽量要大，( (绝对不要用花纹繁复的图案作绝对不要用花纹繁复的图案作绝对不要用花纹繁复的图案作绝对不要用花纹繁复的图案作背景背景背景背景) )，以便突出主要文字内容，以便突出主要文字内容，以便突出主要文字内容，以便突出主要文字内容网页色彩搭配的技巧网页色彩搭配的技巧 ● ● 网页配色方案网页配色方案网页配色方案网页配色方案网页配色之黄金分割法 u制作网页时网页背景与前景的字体配色比较麻烦的。

如果背景颜色与字体颜色的搭配不合理，就会使网页效果大打折扣如果背景色与字体色的对比度太大，就会显得太刺眼；如果对比度太小，就会使网页风格变得过于沉闷u使用“网页配色之黄金分割法”之后，可以大大节省的时间　　u黄金分割法的基本原理是这样的：把颜色的对比度（背景与前景）调节在0.618比例附近的位置上u在PS里亮度是以百分比来划分的，在HSB模式里的B表示的就是亮度值 根据它的原理，就可以推算出采用百分数值来看，100%*0.618=62%当背景颜色的亮度值为0~38%时，字体颜色就加上62%，当背景颜色为62~100%时，字体颜色就减去62%例如：uHSB色彩模式把颜色分为色相、饱和度色相、饱和度(S) 、明度、明度(B)三个因素所谓饱和度相当于家庭电视机的色彩浓度，饱和度高色彩较艳丽饱和度低色彩就接近灰色明度也称为亮度，等同于彩色电视机的亮度，亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到纯白，最低得到纯黑u如果我们需要一个浅绿色，那么先将H拉到绿色，再调整S和B到合适的位置一般浅色的饱和度较低，亮度较高如果需要一个深蓝色，就将H拉到蓝色，再调整S和B到合适的位置一般深色的饱和度高而亮度低。

如下左图和中图这种方式选取的颜色修改方便，比如要将深蓝色加亮，只需要移动B就可以了，既方便又直观u如果要选择灰度，只需要将S放在0%，然后拉动B滑杆就可以如同灰度模式那样选择了如下右图注意，HSB方式得到的灰度，与灰度滑块K的数值是不同的我们在Photoshop中选择灰度时候，应以灰度滑块为准u再看一下Photoshop的拾色器，拾色器的显示方式其实就是HSB取色方式色谱就是色相，而大框就包含了饱和度和明度(横方向是饱和度，竖方向是明度) 网页色彩案例分析u黄色主色调（导航栏）n蓝（多）n红（极少）n黑（中）基色基色基色基色基色基色基色基色基色基色基色基色•蓝色主色调（大面积底色、多数文字）–黄–红（重点色）–黑基色基色基色基色基色基色基色基色基色基色基色基色u蓝、绿主色调（大面积底色）n黄n橙n红n紫基色基色基色基色基色基色基色基色基色基色基色基色u紫红主色调（导航栏、边框）n黄绿n黑色基色基色基色基色基色基色基色基色基色基色基色基色u玫瑰红n黑色n白色运用单一色（系）基色基色基色基色基色基色基色基色基色基色基色基色色块的集群化重要信息可以运用不同颜色区块加以强调。

运用小色球或色块能造成集群化的效果，以协助视觉搜寻在背景图象上添加文本，在背景图象上添加文本，在背景图象上添加文本，在背景图象上添加文本，一种较好的方法是使用相一种较好的方法是使用相一种较好的方法是使用相一种较好的方法是使用相近色作为背景，补色作为近色作为背景，补色作为近色作为背景，补色作为近色作为背景，补色作为文本色● ●色彩的对比色彩的对比色彩的对比色彩的对比基色基色基色基色基色基色基色基色基色基色基色基色网页色彩反例分析1、无主色调 2、色彩过多、过杂3、色彩搭配不合理基色基色基色基色基色基色基色基色基色基色基色基色网页版式的基本类型网页版式的基本类型网页版式的基本类型网页版式的基本类型 ● ● 骨骼形骨骼形骨骼形骨骼形页首通栏，下面综合页首通栏，下面综合页首通栏，下面综合页首通栏，下面综合运用多种分栏方式运用多种分栏方式运用多种分栏方式运用多种分栏方式 横向分栏版式横向分栏版式横向分栏版式横向分栏版式 四 网页版面布局设计● ● 分割型分割型分割型分割型 以图片吸引浏览者的以图片吸引浏览者的以图片吸引浏览者的以图片吸引浏览者的注意力，右下角的文注意力，右下角的文注意力，右下角的文注意力，右下角的文字也得以强调字也得以强调字也得以强调字也得以强调页面右侧使用斜线页面右侧使用斜线页面右侧使用斜线页面右侧使用斜线再次分割，打破了再次分割，打破了再次分割，打破了再次分割，打破了呆板的感觉呆板的感觉呆板的感觉呆板的感觉 ● ● 对称型对称型对称型对称型 ● ●中轴型中轴型中轴型中轴型 中轴版式，给人以中轴版式，给人以中轴版式，给人以中轴版式，给人以轻快、简洁之感轻快、简洁之感轻快、简洁之感轻快、简洁之感 一般采用相对对称的一般采用相对对称的一般采用相对对称的一般采用相对对称的手法，以避免呆板，手法，以避免呆板，手法，以避免呆板，手法，以避免呆板，左右对称的版式也较左右对称的版式也较左右对称的版式也较左右对称的版式也较常见。

常见● ● 曲线型曲线型曲线型曲线型 运用弧线在平稳运用弧线在平稳运用弧线在平稳运用弧线在平稳中寻求动感中寻求动感中寻求动感中寻求动感 ● ● 焦点型焦点型焦点型焦点型 利用大面积的留白，利用大面积的留白，利用大面积的留白，利用大面积的留白，使视觉中心的图形使视觉中心的图形使视觉中心的图形使视觉中心的图形成为焦点成为焦点成为焦点成为焦点● ● 将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的将对比强烈的图片或文字置于页面的视觉中心视觉中心视觉中心视觉中心● ● 利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心利用视觉元素引导浏览者视线向中心聚拢，形成向心的版式聚拢，形成向心的版式聚拢，形成向心的版式聚拢，形成向心的版式 ● ● 视觉元素向外辐射，形成离心的版式视觉元素向外辐射，形成离心的版式视觉元素向外辐射，形成离心的版式视觉元素向外辐射，形成离心的版式● ● 自由型版式打破规规矩矩，尽情挥洒设计自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计。

自由型的页面活自由型版式打破规规矩矩，尽情挥洒设计自由型的页面活泼、轻快、美观漂亮泼、轻快、美观漂亮泼、轻快、美观漂亮泼、轻快、美观漂亮● ● 一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量一般都是以图片为视觉中心制作的类似宣传海报，运用大量精美图像精美图像精美图像精美图像● ● 自由型自由型自由型自由型 导航栏则作为次要的设导航栏则作为次要的设导航栏则作为次要的设导航栏则作为次要的设计元素，自由摆布，起计元素，自由摆布，起计元素，自由摆布，起计元素，自由摆布，起到点缀、修饰、均衡的到点缀、修饰、均衡的到点缀、修饰、均衡的到点缀、修饰、均衡的作用 布局的安排布局的安排布局的安排布局的安排 点的布局点的布局点的布局点的布局● ● 艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中的点，是感觉上的点，当它可见时就具备了艺术设计中的点，是感觉上的点，当它可见时就具备了 一定的面积一个单独而细小的形象一定的面积。

一个单独而细小的形象一定的面积一个单独而细小的形象一定的面积一个单独而细小的形象 / /文字，相比较而言）文字，相比较而言）文字，相比较而言）文字，相比较而言）● ● 页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉页面中的点，由于大小、形态、位置的不同，产生的视觉 效果、心理作用也不同效果、心理作用也不同效果、心理作用也不同效果、心理作用也不同● ● 点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的点的排列所引起的视觉流动，引入了时间的因素，利用点的 大小、形状与排列距离的变化，可以使页面富于节奏韵律大小、形状与排列距离的变化，可以使页面富于节奏韵律大小、形状与排列距离的变化，可以使页面富于节奏韵律大小、形状与排列距离的变化，可以使页面富于节奏韵律 通过点的大小、主通过点的大小、主通过点的大小、主通过点的大小、主次引起浏览者的视次引起浏览者的视次引起浏览者的视次引起浏览者的视觉流动。

觉流动四 网页版面布局设计线的布局线的布局线的布局线的布局● ● 作作作作为为为为视视视视觉觉觉觉元元元元素素素素的的的的线线线线，，，，不不不不仅仅仅仅有有有有长长长长度度度度和和和和方方方方向向向向上上上上的的的的变变变变化化化化，，，，还还还还有有有有粗粗粗粗与与与与细细细细、、、、虚虚虚虚与与与与实实实实、、、、粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受粗糙和光滑等变化，这些变化给人的视觉和心理以不同的感受● ● 线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之线的布局安排主要体现为线的空间分割，分割是版式设计的主要手段之一以消极的直线分以消极的直线分以消极的直线分以消极的直线分割页面，使得画割页面，使得画割页面，使得画割页面，使得画面清晰、有条理面清晰、有条理面清晰、有条理面清晰、有条理随意的弧线增随意的弧线增随意的弧线增随意的弧线增加了画面的活加了画面的活加了画面的活加了画面的活泼、明快感泼、明快感泼、明快感泼、明快感布局的安排布局的安排布局的安排布局的安排 面的布局面的布局面的布局面的布局● ● 面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协面的布局主要体现为面的空间分割，经分割所产生的比例关系，是决定页面均衡、协调的重要因素。

调的重要因素调的重要因素调的重要因素● ●面的形状有以下几种：方、圆、三角、多边形等面的形状有以下几种：方、圆、三角、多边形等面的形状有以下几种：方、圆、三角、多边形等面的形状有以下几种：方、圆、三角、多边形等利用积极或消极的线将利用积极或消极的线将利用积极或消极的线将利用积极或消极的线将页面分割成大小不一的页面分割成大小不一的页面分割成大小不一的页面分割成大小不一的面，产生空间的对比和面，产生空间的对比和面，产生空间的对比和面，产生空间的对比和节奏感● ● 黄金分割黄金分割黄金分割黄金分割● ●等间距分割等间距分割等间距分割等间距分割● ●数学级数分割数学级数分割数学级数分割数学级数分割● ●判断分割判断分割判断分割判断分割将不同画面的方将不同画面的方将不同画面的方将不同画面的方形图以相同大小形图以相同大小形图以相同大小形图以相同大小组织排列，求得组织排列，求得组织排列，求得组织排列，求得秩序美感秩序美感秩序美感秩序美感 布局的安排布局的安排布局的安排布局的安排 ● ●线条和形状线条和形状线条和形状线条和形状● ● 直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓。

直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓直线条的艺术效果是流畅、挺拔、规矩、整齐，有轮有廓● ● 曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果曲线和弧形在页面上的重复组合可以呈现流畅、轻快，富有活力的视觉效果一般应用于青春、活泼的主页题材一般应用于青春、活泼的主页题材一般应用于青春、活泼的主页题材一般应用于青春、活泼的主页题材● ● 把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力巧妙地利用曲线巧妙地利用曲线巧妙地利用曲线巧妙地利用曲线作为导航栏，创作为导航栏，创作为导航栏，创作为导航栏，创意活泼又生动意活泼又生动意活泼又生动意活泼又生动布局的安排布局的安排布局的安排布局的安排 ● ● 为了兼容性，最好选用通用字体为了兼容性，最好选用通用字体。

为了兼容性，最好选用通用字体为了兼容性，最好选用通用字体● ●常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等常用的中文字体有宋体、黑体、楷体、仿宋、行书、隶书、魏碑等● ● 常用的英文字体有常用的英文字体有常用的英文字体有常用的英文字体有ArialArial、、、、Times New RomanTimes New Roman、、、、ImpactImpact等● ● 艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字艺术字能为网页添色不少，但也不能随便地套用各种艺术字体，可做成图形文字● ● 最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为最适合于网页正文显示的字体大小为1212磅左右磅左右磅左右磅左右● ● 内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通内容比较多的网站，如许多新闻性网站，由于一个页面中要安排的的内容较多，通常采用常采用常采用常采用9 9磅的字号。

磅的字号磅的字号磅的字号通过文字大小疏通过文字大小疏通过文字大小疏通过文字大小疏密的调整，突出密的调整，突出密的调整，突出密的调整，突出重点，层次分明重点，层次分明重点，层次分明重点，层次分明 四网页文字设计常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列常见的文字编排形式有两端对齐、居中对齐、左对齐或右对齐和绕图排列右侧文字采用左对右侧文字采用左对右侧文字采用左对右侧文字采用左对齐，参与页面分割，齐，参与页面分割，齐，参与页面分割，齐，参与页面分割，产生虚实相生的效产生虚实相生的效产生虚实相生的效产生虚实相生的效果果果果文字与图片穿插排文字与图片穿插排文字与图片穿插排文字与图片穿插排列，密集的文字形列，密集的文字形列，密集的文字形列，密集的文字形成块面，丰富了页成块面，丰富了页成块面，丰富了页成块面，丰富了页面层次面层次面层次面层次四网页文字设计五网页图形设计u图形的主体要清晰可见u图形的意义要简单明了，与网页主题紧密关联u图形内的文字要清楚容易辨认u图形内文字的装饰不要过分花哨，以免文字不易辨识五网页图形设计n在制作图片时，单张图片不要超过20KB，每个页面的图片总量不超过60KB(一般情况下)。

所有图片都必须减肥为小图片（100＊40）,一般可以控制在6KB以内，动画控制在15KB以下n图像大小属性，可以在IMG标签中保存这个属性这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页 n尽可能经常更换网站上的图片，人们更愿意点击的是图片而不是文本。