重、难点指导 一、本章节重难点 重点：网站配色、版面设计、PS页面制作。 难点：PS页面制作。 二、重难点指导 (一)网站配色 色彩是网站设计很难把握的重要方面，也是确定网站风格的重要 前提，它决定着给浏览者的第一印象。页面的整体色调或活泼或庄重、 或雅致或热烈，在用色上也有繁简之分，不同的网站或同一网站的不 同部分，配色都不尽相同。 要学好网站配色，搭配出漂亮美观的网页界面，就要了解色彩的 原理、色彩的情感属性，熟知一些配色技巧等。 1.色彩原理 色彩有三个属性：色相、明度、纯度（饱和度）。其中色相是指 颜色的相貌、名称，即该色是蓝色还是红色。 图】同一张图片的不同色相
重、难点指导 一、本章节重难点 重点：网站配色、版面设计、PS 页面制作。 难点：PS 页面制作。 二、重难点指导 （一）网站配色 色彩是网站设计很难把握的重要方面，也是确定网站风格的重要 前提，它决定着给浏览者的第一印象。页面的整体色调或活泼或庄重、 或雅致或热烈，在用色上也有繁简之分，不同的网站或同一网站的不 同部分，配色都不尽相同。 要学好网站配色，搭配出漂亮美观的网页界面，就要了解色彩的 原理、色彩的情感属性，熟知一些配色技巧等。 1. 色彩原理 色彩有三个属性：色相、明度、纯度（饱和度）。其中色相是指 颜色的相貌、名称，即该色是蓝色还是红色。 图 1 同一张图片的不同色相
而明度则指色彩的明暗程度，体现颜色的深浅。如图所示： 图2色彩的明度示例 纯度是指某一色相在同一明度下从灰色到纯色的变化。即颜色的 鲜艳程度，如图所示： 图3色彩的纯度示例 2.色彩的情感属性 由于社会、民族、信仰以及个人等因素，每种色彩看上去都带有 一定的情感属性。例如红色、橘红代表喜庆，黑色、灰色代表伤感凝 重等。在制作网页时我们要结合项目实际充分考虑这些因素才能设计 出用户满意的界面
而明度则指色彩的明暗程度，体现颜色的深浅。如图所示： 图 2 色彩的明度示例 纯度是指某一色相在同一明度下从灰色到纯色的变化。即颜色的 鲜艳程度，如图所示： 图 3 色彩的纯度示例 2. 色彩的情感属性 由于社会、民族、信仰以及个人等因素，每种色彩看上去都带有 一定的情感属性。例如红色、橘红代表喜庆，黑色、灰色代表伤感凝 重等。在制作网页时我们要结合项目实际充分考虑这些因素才能设计 出用户满意的界面
3.配色技巧 (1)整个页面的色彩不应多于3种。从经验上讲，一个页面从 头到脚一般不要超过三种颜色。过多的色彩不但会刺激视觉，影响浏 览者的情绪，也会使整个页而失去平衡，没了美感。 (2)结合主题确定主色调。色彩要根据主题来确定，不同的主 题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色 体现女性的柔情等。 (3)同种色彩搭配时，可以先选定一种色彩，然后调整其透明 度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起 米色彩统一，具有层次感 (4)邻近色彩搭配时，可以在色环上选取相邻的颜色，如绿色 和蓝色、红色和黄色等。采用邻近色搭配可以使网页避免色彩杂乱， 易于达到页面和诺统一的效果。 (5)巧妙使用对比色。对比色可以突出重点，产生强烈的视觉 效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设 计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点 晴的作用。 (6)文字与网页的背景色对比要突出。文字内容的颜色与网页 的背景色对比要突出，底色深，文字的颜色就应浅，以深色的背景衬 托浅色的内容（文字或图片）：反之，底色淡，文字的颜色就要深些， 以浅色的背景衬托深色的内容（文字或图片）
3. 配色技巧 （1）整个页面的色彩不应多于 3 种。从经验上讲，一个页面从 头到脚一般不要超过三种颜色。过多的色彩不但会刺激视觉，影响浏 览者的情绪，也会使整个页面失去平衡，没了美感。 （2）结合主题确定主色调。色彩要根据主题来确定，不同的主 题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色 体现女性的柔情等。 （3）同种色彩搭配时，可以先选定一种色彩，然后调整其透明 度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起 来色彩统一，具有层次感。 （4）邻近色彩搭配时，可以在色环上选取相邻的颜色，如绿色 和蓝色、红色和黄色等。采用邻近色搭配可以使网页避免色彩杂乱， 易于达到页面和谐统一的效果。 （5）巧妙使用对比色。对比色可以突出重点，产生强烈的视觉 效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设 计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点 睛的作用。 （6）文字与网页的背景色对比要突出。文字内容的颜色与网页 的背景色对比要突出，底色深，文字的颜色就应浅，以深色的背景衬 托浅色的内容（文字或图片）；反之，底色淡，文字的颜色就要深些， 以浅色的背景衬托深色的内容（文字或图片）
(二)版式设计 1.理解网页版式设计的含义 网页的版式设计是指如何将要表现的内容合理而美观的摆放在 网页界面上。同样的内容不同的摆放手法效果却大不相同。犹如我们 每个人的脸上都长有一张嘴巴、一个鼻梁、一双眼晴和两只耳朵，但 我们每个人的长相却不相同，嘴巴大一点、厚一点、眼睛小一点、离 得远一点，就早就千变万化的面孔 图4版式含义示意图 2.常用的网页设计版式 ●T型布局 ·口型布局 ·三型布局 ●对称对比布局 ·POP布局 ·特殊布局 3.设计网页版式的一般方法 在进行版面设计时，我们要充分考虑主题思想和预展现内容，分 清主次、精简有序地分布在有限的可视区域。为了更好的进行设计
（二）版式设计 1. 理解网页版式设计的含义 网页的版式设计是指如何将要表现的内容合理而美观的摆放在 网页界面上。同样的内容不同的摆放手法效果却大不相同。犹如我们 每个人的脸上都长有一张嘴巴、一个鼻梁、一双眼睛和两只耳朵，但 我们每个人的长相却不相同，嘴巴大一点、厚一点、眼睛小一点、离 得远一点，就早就千变万化的面孔。 图 4 版式含义示意图 2. 常用的网页设计版式 ⚫ T 型布局 ⚫ 口型布局 ⚫ 三型布局 ⚫ 对称对比布局 ⚫ POP 布局 ⚫ 特殊布局 3. 设计网页版式的一般方法 在进行版面设计时，我们要充分考虑主题思想和预展现内容，分 清主次、精简有序地分布在有限的可视区域。为了更好的进行设计
我们可以先使用线框简图在电脑里或纸上描画一个草图，在慢慢修 剪，已达到最有效果。 ©⊙④ Sack Jshmtan -Bele oteaze Blore 市 90s Haie Jack.Joheian In Betien Dresms ae Videos 24A3n4 的制hn4 m Dreams Hy Tap Ratad 的4P州时 Bomane Pangaikes 324k34 Racenty Piynd Gand Paapla Sac.3ohmton 5e Between Bveams Tap 25 Mat到r Na0t种 Jac.Johmian 3n Between Dreams M 图5网页线框图 (三)PS页面制作 当网页版式线框图确定下来后，就可以依据线框图设计制作页面
我们可以先使用线框简图在电脑里或纸上描画一个草图，在慢慢修 剪，已达到最有效果。 图 5 网页线框图 （三）PS 页面制作 当网页版式线框图确定下来后，就可以依据线框图设计制作页面
了，制作工具可以选择我们比较熟悉的PS。 1.使用PS进行页面制作，需要弄清几个概念 (1)页面尺寸 页面尺寸也即网页宽高。现在用户电脑的分辨率以1024*768居 多，页面宽度一般应控制在960px-1003px,如果超过1003px,浏览 器将会出现左右滚动条，不够关观。因为滚动条的宽度一般为20px。 在制作首页时，还应考虑页面的高度。一般情况下，中小型网站的首 页不宜超过3屏，最好能控制在1~1.5屏，简洁明快。 (2)留白 留白是指为保障页面元素和谐美观，排版时故意留下的“空白区 域”，注意它不是指白色，而强调的是空白，不使用的空闲区域。虽 然留白区域看起来未使用，但实际上留白区域的作用相当大，给予设 计呼吸的空间，提供了布局上的平衡。留白区域的环绕与陪衬，更能 良好的村托出中心区域的表现。 信息那业教术学 酒闲程焦德 中4 +广兴准大学生国强数世是西过连组m特，一， ·看量生理解得准神内4国=回学 ；选十年大实性两联形年有”相物”：一 :关千4年单秋内鞋的法都一一-一1a行计用 内 重A工 ·学带学修，门作生你m 。9思2 图6网页留白示意图 因此在网页设计制作时要特别注意留白之间的距离，如上、中
了，制作工具可以选择我们比较熟悉的 PS。 1. 使用 PS 进行页面制作，需要弄清几个概念 （1）页面尺寸 页面尺寸也即网页宽高。现在用户电脑的分辨率以 1024*768 居 多，页面宽度一般应控制在 960px-1003px，如果超过 1003px，浏览 器将会出现左右滚动条，不够美观。因为滚动条的宽度一般为 20px。 在制作首页时，还应考虑页面的高度。一般情况下，中小型网站的首 页不宜超过 3 屏，最好能控制在 1~1.5 屏，简洁明快。 （2）留白 留白是指为保障页面元素和谐美观，排版时故意留下的“空白区 域”，注意它不是指白色，而强调的是空白，不使用的空闲区域。虽 然留白区域看起来未使用，但实际上留白区域的作用相当大，给予设 计呼吸的空间，提供了布局上的平衡。留白区域的环绕与陪衬，更能 良好的衬托出中心区域的表现。 图 6 网页留白示意图 因此在网页设计制作时要特别注意留白之间的距离，如上、中
下之间的距离，左、中、右之间的距离，甚至网页上每个模块与模块 之间的距离，模块内容距离边界的距离，文字与文字之间的行高等， 都要保持一定的距离。 (3)参考线的应用 参考线是可在图中精确对齐物体的辅助线。在PS中善于利用参 考线可以让我们更快捷、更准确的设计版式模块，根据线框图的框架， 我们可以在PS中利用参考线快速勾勒出网页的框架结构。如图： L0G0网站名称 异抗区 产品宣传区 新闻动态 经营范围 颜权信息 图7参考线使用示意图 推荐参考教程： http://www.poluoluo.com/jzxy/txtx/photoshop/wysj/Index.html
下之间的距离，左、中、右之间的距离，甚至网页上每个模块与模块 之间的距离，模块内容距离边界的距离，文字与文字之间的行高等， 都要保持一定的距离。 （3）参考线的应用 参考线是可在图中精确对齐物体的辅助线。在 PS 中善于利用参 考线可以让我们更快捷、更准确的设计版式模块。根据线框图的框架， 我们可以在 PS 中利用参考线快速勾勒出网页的框架结构。如图： 图 7 参考线使用示意图 推荐参考教程： http://www.poluoluo.com/jzxy/txtx/photoshop/wysj/Index.html