微信头像男生霸气冷酷-网络营销体系

网页的设计
教学目标：
、掌握网页元素和网页构件的使用：
、能进行简单的网页设计；
教学重点：
网页构件的使用；网页设计；
教学难点：
网页的设计；
课时：第课时
导入：
今天我们 进入第六章网页的设计与制作的学习，一个成功的网站不仅仅在于它的内容的多少，功能的交互功能多强，
设计也是关键的一项，它决定了网站的艺术美是否能吸引浏览者的眼球。
新课：
一、网页元素的组成
打开年全国中小学信息技术大赛中获奖作品《鄱阳湖白鹤》，让学生观看 并总结网页的组成元素有？文字、图片、
动画、声音、超链接等。
一般情况下，网页都应该具 备这三种元素，但是也有的网页只有其中的两种，甚至只有一种。如有的网页就是
为了展示一篇文章，那 么这个网页就没有必要放置图像；有的网页只用于显示一幅大尺寸的照片，也可以没有文字
说明；而有的 网页纯粹就是提供资料，就不必设置超链接，这样，这个网页就成为网络中某一个信息链的“终点”，
即 只有别的网页链接它。
过渡：同学们想不想自己也做个网站呢？想做网站前提则是先设计网站，规划网站的主题，画出草图。
二、网页设计
现在给大家分钟的时间设计一个学校网站的主页，内容包括网页的主题、

思考内容
怎样突出的网页的主题
网页的框架结构及特点
以什么色调为主及作用
图、文有何讲究
网页




网页




网页版式设计的视觉因素 为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从而影响人们的思想和行为，我们必须按照
人的视觉生理和心理特征，去设计我们的网页版式，以达到最佳的设计诉求。我们先来看一下人的视线移 动规律：
 人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。
 视线的变化习惯于从左到右，从上到下和顺时针方向运动。
 当视线沿既不水平，也不垂直的斜线方 向移动时，在水平方向上下约的范围视线为从左到右移动，
在垂直方向左右约的范围内，视线为从上到下 移动。
符合视觉规律
 文字横向编排
由于人眼的视线横向移动 比竖向移动快而且不易疲劳，因此将文字尽量横向排布，除非一些有特殊设计要
求的版式或书法字体的版 式。同时，页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使人们能连续不间断地
浏览页面。需要 注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。
 ．重要信息置于“最佳视觉区域”
在进行网页版式设计时，要考虑将最重要的信息或视觉流程 的停留上安排在注目价值高的位置，这就是“最佳
视觉区域”。由于人们习惯于将视线从左到右、从上到 下移动，因而视区中的不同位置注目程度不同。

版面中的不同区域会产生不同的注目程 度，给人的心理感受也不同。它们给人的心理感受也是不同的；上部有
轻快、上升、积极、愉悦之感；下 部有沉重、稳定、压抑、消沉之感；左侧感觉轻松、舒展、自由、主动；右侧感
觉庄重、局限、拘谨、被 动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程的停留点安排在页面的
“最佳视域”内 。

、避免视觉疲劳
 ．限制网页长度
尽可能将网页限制在屏以内 ，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面不宜过长，一般
控制在—屏，尽量 不超过屏。
 ．文字大小适中、行距合理
在网页设计时应提供浏览者定制字体大小的功能。
 ．位置的一致
减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。
 ．适量安排多媒体元素
网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多 媒体元素，并注意主次关系。
 ．合理配色
如果将大篇幅极亮的文字设计在极暗的背景上 ，容易因视觉长时间过分紧张而产生疲劳。因此应注意网页的配色，
使其适合浏览者长期浏览。

网页设计的构成要素
（一）、版式设计
网页的版式设计，就是将文字、 图形图像、色彩、动画、视频等网页界面的传达要素，根据特定的内容和主题，
在网页所限定的范围内， 运用造型元素和形式原理进行视觉的关联，从而将涉及意图以视觉形式表现出来。版式设
计将各元素组合 配置，使页面内容一目了然，并获得悦目的视觉效果。在设计时，需要运用统一、对比、对称、均
衡、节 奏、韵律等形式原理，来构造出和谐、流畅、自然的网页界面。（展示两幅体现出对比和调和的网页的页面，让学生体会。）
网页板式构成的类型：
、骨骼型 也称栏型，是一种规范的、理性的 设计形式，类似于报刊的板式。常见的骨骼型有竖向的和横向的
通栏、双栏、三栏、四栏等，这种版式给 人以和谐、理性的美。这种版式常用于公司网站的设计。（展示页面，学
生意会）
、国字型 口字型、同字型、回字形都归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、
导航以 及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，最下面是网站的一
些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活 。
（展示页面，学生根据设计理念分析优缺点，重点分析）
、框架型 有左右框架型、上下 框架型和综合框架型，这种版式常用语功能型的网站，如邮箱、论坛、博客等
（展示页面，学生意会）
、中轴型 沿页面的中轴将图片、文字做水平或垂直方向的排列，给人稳定、平静、含蓄、舒畅的感觉。 （展示
页面，学生意会）
、 “匡”型布局或“”型 布局可归于此类，“匡”型布局中，常见的类型有上面是标题与导航，左侧是展示图片