《网页设计基础》教案
总学时：32
教师：贺苗苗
第一章第一节网站界面设计的认识
一、网站的主题定位
1、网站的主题选择
企业的性质决定网站的风格，企业的内容决定网站的主题。

2、网站题材选择的原则
①主题要小而精②题材最好是自己擅长或者喜爱的内容
③题材不要太滥或者目标太高
3、题材类别
二、页面的功能模块设计
1、网站名称（Logo）
2、广告条（banner）
3、主菜单（menu）
4、新闻（news）
5、搜索（search）
6、友情链接（links）
7、邮件和地址（mailand address） 8、版权（copyright）
首页的设计步骤：①确定首页的风格和功能模块
②设计首页的版面布局
③处理技术上的细节
三、网页界面设计（web interface design）------美观、用户便利、网站流程顺畅! 界面：字典上解释为两者间的界限、接点、共有连接的领域。

例子：人与车直接接触的空间，方向盘（即界面）；再如：人和门，门把手（即界面）。

过大过小都不好。

界面设计最重要的两点：①使用的便利性②美学的层面
四、界面设计相关用语
1、UI ( User Interface, 用户界面 )
即使用者界面的意思。

实现互动是用户界面最主要的目的。

2、HCI ( Human-computer Interaction,人与计算机的交互作用 )
即，以人怎样做能更容易的掌握计算机的使用技术为目标，结果可以使界面技术得到飞跃和发展。

3、GUI ( Graphical User Interface,图形用户界面 )
图形用户界面是相对于纯文本而言，通过图形构成用户与系统间的界面来实现的。

例如：在windows之前的DOS必须输入纯文本，而现在则不用。

五、网页界面的构成要素
1、①网页浏览器（工具栏、地址栏、状态栏、菜单栏）②导航要素（主菜单、子菜单、搜索栏、
历史记录等）③内容（图像、标志、文本等）
2、网页导航的构成要素
导航，是航海的意思。

就是在网站的每个页面间自由地来去，即引导用户在网站中达
到它所想到达的地方，这就是每个网站都包含导航要素的目的。

一般来说，在网页的上
端或左侧设置主要导航要素的情况比较普遍。

3、网页导航设计的原则
在网页使用的导航要素不应设计得太复杂，我们应把它设计的更直观、单纯、明了，
让用户一下子就能明白，这样才达到了设计的效果。

六、网页界面设计的特性
①使用的便利性（不要只是美）②一贯性 (例如菜单位置，不能上下乱串)
③创意性（要遵循规律）
七、作业
设计自己的个人主页。

要求：功能模块完整，网页导航明确
第二章第一节网站布局的基本方法
一、网页设计的布局
1、网页设计的布局概念
网页设计的布局就是把进入网页页面的诸多构成要素（文字、照片或图像、图表、菜单等）在网页浏览器里有效的安排起来。

2、网页布局设计特征
首先，要充分考虑网站的目的及用户的环境，而后再加入网页设计人员富有创意的构思，这样才能有较好的布局。

难点一在于：由户各自的环境不同：
800*600（像素）分辨率
1024*768（像素）分辨率
其次，明确网站的目标是什么;再次是手绘草稿阶段。

3、布局的主要构成原则
在构成布局时，基本上应该考虑：醒目性可读性明快性造型性创造性
醒目性------是用户把注意力集中到某网站并诱导其浏览时期看到的部分或内容。

可读性------使网站的内容更容易让人读懂。

明快性------准确、快速的转达网站的构成内容。

造型性------维持整体外形上的稳定性和均衡性。

创造性------体现网站的鲜明个性。

布局的主要构成原则：统一、协调、流动、强调、均衡等方面。

统一：就是整个网站的构成要保持一贯性，不要给用户带来混乱感，应经可能地让用户用起来更方便。

协调：就是把网站的每个构成要素有机的结合起来，让人感觉既美观又方便实用。

流动：就是能让用户的视线自然而然地往他想移动的方向移动，同时界面的使用功能可以根据用户的爱好和便利，马上连接到用户想要浏览的下一项内容。

强调：就是把要突出的设计或内容通过活用色彩，留白等方式，在不影响整体的设计和连贯性的前提下，把该部分内容最大限度地突出出来。

均衡：就是在排列每个要素时要按照一定的顺序，并照顾到使用上的便利性和视觉角度的稳定感。

二、根据画面上整体内容的位置决定布局
1、内容排列在画面左侧的页面布局
800*600（像素）分辨率
纵向有滚动条，所以网页的布局横向设计的尺寸要比800像素小一些，通常情况下把横向设为580~780像素。

1024*768（像素）分辨率
通常情况下把横向设为800~900像素。

纵向没有什么要求。

2、内容排列在画面水平中央位置的页面布局
以在画面水平中央位置的页面布局能制作出有均衡感的网站。

需要注意的是左右空间的处理，一般的处理方式就是留白或利用图片或色彩作为背景来填补。

不出现滚动条的情况下：
3、使用整个画面的一额面布局
作业：利用网页布局纸将三种网页布局表现出来，以A4纸打印上交。

第二章第二节网站布局的分割
一、纵向分割的格式
纵向分割的格式，通常在画面的左侧设置菜单，右侧设置正文，最右侧作一定位置的空白处里；把网站标志LOGO放置在左侧上端主菜单的上部。

也有把LOGO放置在画面的中央或右侧。

二、横向分割的格式
横向分割的格式，大体可分为两部分，在上端设置主菜单的情况较多，也可以在下面设置，横向分割的格式很适合对商品或企业的图片有很高质量要求的网站使用。

三、横向——纵向混合型的格式
大部分网站都是以这种分割方式来布局。

一般以纵向分割格式为主，在此基础上添加横向分割。

特别是在2段和3段的上下两端添加横向格式。

通常在横向的上端设置网站标志、主菜单、有用菜单。

四、布局和网格（Grid），留白
1、网格的活用
所谓网格就是格子的意思。

在编辑设计中，网格是指把图像或文本等几个构成要素按照一定的位置组成的有一定间隔的直线，通过它来安排各要素的位置。

在网页布局中运用网格的方法是：把网页用假象的格子划分开来，确定基准，按照这个基准安排网页设计的图像、文本等要素，这样可以构成秩序井然的画面。

2、在布局中活用留白
比起把分割好的空间都塞满东西，不如整体都留有适当的空白。

如果没有空白，用户会感到很无趣，甚至会产生讨厌心理。

作业：将三种网页分割格式在A4纸上表现出来。

第三章第一节网页设计中的有效配色
一、网页色彩设计的特征
1、网页色彩的特征
计算机显示器是由一个个被称为像素的小点构成的，利用电子束表示色彩。

光的三原色：R（红）G（绿）B（蓝）从0~255的256个单位。

0是完全无光的状态，255时最明亮的状态。

在网页设计中用00~FF来表示R（红）G（绿）B（蓝）。

例如：000000就是黑色；FFFFFF就是在有RGB最明亮的状态进行的色彩组合。

2、网页安全色彩
网页安全色彩为216种色彩：分别为以FF、CC、99、66、33、00为指定标准。

二、色彩的特性及利用联想作用的配色
1、色彩的联想作用和心理效果
例如：红色、朱黄、白色、黄色等给人温暖的感觉；绿色、蓝色、草绿色等给人清爽或者凉快的感觉。

不仅是温度感，颜色也给人重量感，有轻的颜色、重的颜色。

此外，颜色还有纯净、热情等若干心里效果。

（以幼儿园为例）
2、红色、粉红、朱黄、黄色
3、蓝色
蓝色给人冷的感觉，使人联想到大海、湖水、天空。

象征青春，由于工作服常常是蓝色，所以也象征劳动。

亮蓝色给人开放和活力之感，暗蓝色给人以沉重冷静之感。

常在冥想和安静时使用，象征正挚和信用。

4、草绿，淡绿
草绿象征自然、调和、健康、青春、成长、富饶等。

淡绿色有很强的中立性，给人安全
的感觉，让人感觉新鲜，给人希望，代表着清新和活力;深绿色给人严格和严肃的感觉。

5、黑色、灰色、白色
三、网页配色的基本方法
1、配色的基本方法
页面：可利用同一颜色，变换饱和度或明度，是最简单而有效的方法。

要强调的部分，可利用整体颜色的补色做对比。

文本：字的颜色和背景色要有明显差异，可读性和可识别性就越强。

主要在明度上做对
比，利用补色做差别。

白色和黑色很有用。

若字号很大，使用相近的色彩可识别性也不会受太大影响。

2、考虑平衡的配色
平衡的同时，不能太分散。

3、利用网页安全色彩的配色样式
作业：任选一网站，将其中两个页面的配色样式表现出来。

要求：A4纸打印上交。