一章网页设计概述教案
西安文理学院招生网-高考结束时间
教案首页
授课题目（章节或主题）：
第一章 网页设计概述
教案目的与要求：
了解网页设计基础知识，掌握网页的构成要素，理解网页设计的特征与原则。
教案重点：
网页的构成要素
教案难点：
网页设计的特征与原则
教案过程：
一、组织教案：5分钟
二、引入新课：5分钟
三、讲授新课：85分钟
四、课堂练习：80分钟
四、小结：5分钟
1 6
第一章 网页设计概述
L1、组织教案：调试设备、准备素材；清点学生人数，做好考勤
L2、导入新课：通过展示网页案例，引入新课
L3、讲授新课：
一、网页的基本功能与特性
（一）、功能
1、信息传播
新闻信息、商业信息、文化信息——文字、声音、图像、视频、动画
2、交流与反馈
留言板、BBS论坛
3、经管与控制
网上商城（如：淘宝、当当、卓越亚马逊等购物经管）、OA系统
软控制（如：工作流程控制、经管控制）
硬件控制（如：Modem、路由器的控制）
（二）、特性
1、传播性
2、审美性
3、技术性
二、网页的构成要素
网页作为一种新兴媒体，包含的要素有
（一）、内容要素：
文字、图形、声音、视频、动画等，以及Java、Active控件等制作特殊效果及交互功
能（表单）的元素。
（二）、形式要素：
标志（logo）、通栏广告（banner）、
图标、背景、条幅广告、弹出窗口、浮动图（层）、
导航栏、信息栏、登录栏、调查反馈栏、搜索查询栏
、版权栏
2 6
（三）、构成要素：
页面、框架、表格、行、列、单元格、层、时间线
（四）、技术要素：
超链接、源代码、脚本语言、数据库
三、网页设计的特征与原则
网页界
面设计应时刻围绕“信息传达”这一主题来开展。根本上来讲它是一种以功能
性为主的设计。
（一）、特征
1、设计以功能为主
2、形象明确、易于接受
3、形式简洁
（二）、原则
1、内容先导原则
·Web站点需要传输的最重要的消息是什么？
·哪一种多媒体方式能最有效地说明它？
·在信息列表中，哪个信息需要特别关注？
·哪个信息需要反复强调？
·实现这个方法的最好途径是什么？
·这个消息与其他部分怎样平衡？
2、内容决定形式原则
·什么样的访问方式将使用户的数目最多？
·他们将使用什么样的计算机？
·他们是家庭用户还是办公用户？
·他们用的是什么浏览器？
·用以选择文件格式、软件、插件和浏览器支持的最小配置是什么？
·能确定用户需要的最小配置吗？
3、有效性与审美性结合原则
3 6
·要考虑带宽的问题。
·要注重色彩的搭配问题。
·要考虑适应不同浏览器，不同分辨率的情况。
·要让浏览者容易找到要找的东西，使网页内容便于阅读。
·站点内容要精、专，及时更新。
·提供交互性。
·简单即为美。
针对不同的用户群，有着不同的服务方向，但有一点是可以肯定的，需要恰当的设计
——
没有好的或坏的设计，只有是否合适、是否恰当的设计。这成为了目前网页设计的
一种规范。
延伸阅读：
人们经常问我：“如果想确保网站容易使用最重要的是什么？”
答案很
简单既不是“重要的内容要放在两次点击之内”，也不是“采用用户的语言”，甚至
也不是“保持一致”
。
而是……
“别让我思考！”
多年来．我一直在跟人们说这是我的可用性第一定律。看过的网页越多我就越坚信这
一点。 <
br>这是最最重要的原则——它是在Web设计中判断什么有用什么没用的终极法则．如
果你只能记住
一条可用性原则那么就记住这一条！
它意味着设计者应该尽量做到当我看一个页面时它应该是不言而喻、一目了然、自我
解释的。
4 6
我应该能明白它——它是什么？怎样使用它？——而不需要花费精力进行思考。
不过我们说的到底有多不言而喻？
呃，充分的不言而喻，就好像你隔壁的邻居，她对你的网站
主题毫无兴趣，也几乎不
知道如何使用后退按钮，但她仍然可以看一眼你的主页，然后说：“噢这是XX
X”，（如果运
气好的话她会说：“噢这是XXX。真是太好了！”当然这是另外一回事了。)
这样来看：
当我看到一个不需要思考的网页时，脑袋里面浮现的会是：“嗯这是XXX，那是
XXX，
我想要的东西在这里。”
当我看到一个需要思考的网页时，头脑里面浮现的东西都会加上一个问号。
创建一个网站的时候，你要做的就是去掉这些问号。
四、网站设计制作的基本流程
（一）、 前期策划和内容组织
1、 网站需求分析
2、 网站整体风格定位
3、 网站内容组织
（二）、 网站页面的设计制作
1、 寻找网页的创意
2、 利用图像软件设计效果图
3、 利用网页编辑软件制作网页
4、
利用网页动画软件制作动画
（三）、 网站页面的技术实现
1、
网页制作中的其他常用工具
2、 网页特效的具体技术实现
5 6
L4课堂练习：
1、鉴赏优秀网页的设计
2、上网分析不同网站网页的构成要素
L5、教案小结：
6 6
教案首页
授课题目（章节或主题）：
第一章 网页设计概述
教案目的与要求：
了解网页设计基础知识，掌握网页的构成要素，理解网页设计的特征与原则。
教案重点：
网页的构成要素
教案难点：
网页设计的特征与原则
教案过程：
一、组织教案：5分钟
二、引入新课：5分钟
三、讲授新课：85分钟
四、课堂练习：80分钟
四、小结：5分钟
1 6
第一章 网页设计概述
L1、组织教案：调试设备、准备素材；清点学生人数，做好考勤
L2、导入新课：通过展示网页案例，引入新课
L3、讲授新课：
一、网页的基本功能与特性
（一）、功能
1、信息传播
新闻信息、商业信息、文化信息——文字、声音、图像、视频、动画
2、交流与反馈
留言板、BBS论坛
3、经管与控制
网上商城（如：淘宝、当当、卓越亚马逊等购物经管）、OA系统
软控制（如：工作流程控制、经管控制）
硬件控制（如：Modem、路由器的控制）
（二）、特性
1、传播性
2、审美性
3、技术性
二、网页的构成要素
网页作为一种新兴媒体，包含的要素有
（一）、内容要素：
文字、图形、声音、视频、动画等，以及Java、Active控件等制作特殊效果及交互功
能（表单）的元素。
（二）、形式要素：
标志（logo）、通栏广告（banner）、
图标、背景、条幅广告、弹出窗口、浮动图（层）、
导航栏、信息栏、登录栏、调查反馈栏、搜索查询栏
、版权栏
2 6
（三）、构成要素：
页面、框架、表格、行、列、单元格、层、时间线
（四）、技术要素：
超链接、源代码、脚本语言、数据库
三、网页设计的特征与原则
网页界
面设计应时刻围绕“信息传达”这一主题来开展。根本上来讲它是一种以功能
性为主的设计。
（一）、特征
1、设计以功能为主
2、形象明确、易于接受
3、形式简洁
（二）、原则
1、内容先导原则
·Web站点需要传输的最重要的消息是什么？
·哪一种多媒体方式能最有效地说明它？
·在信息列表中，哪个信息需要特别关注？
·哪个信息需要反复强调？
·实现这个方法的最好途径是什么？
·这个消息与其他部分怎样平衡？
2、内容决定形式原则
·什么样的访问方式将使用户的数目最多？
·他们将使用什么样的计算机？
·他们是家庭用户还是办公用户？
·他们用的是什么浏览器？
·用以选择文件格式、软件、插件和浏览器支持的最小配置是什么？
·能确定用户需要的最小配置吗？
3、有效性与审美性结合原则
3 6
·要考虑带宽的问题。
·要注重色彩的搭配问题。
·要考虑适应不同浏览器，不同分辨率的情况。
·要让浏览者容易找到要找的东西，使网页内容便于阅读。
·站点内容要精、专，及时更新。
·提供交互性。
·简单即为美。
针对不同的用户群，有着不同的服务方向，但有一点是可以肯定的，需要恰当的设计
——
没有好的或坏的设计，只有是否合适、是否恰当的设计。这成为了目前网页设计的
一种规范。
延伸阅读：
人们经常问我：“如果想确保网站容易使用最重要的是什么？”
答案很
简单既不是“重要的内容要放在两次点击之内”，也不是“采用用户的语言”，甚至
也不是“保持一致”
。
而是……
“别让我思考！”
多年来．我一直在跟人们说这是我的可用性第一定律。看过的网页越多我就越坚信这
一点。 <
br>这是最最重要的原则——它是在Web设计中判断什么有用什么没用的终极法则．如
果你只能记住
一条可用性原则那么就记住这一条！
它意味着设计者应该尽量做到当我看一个页面时它应该是不言而喻、一目了然、自我
解释的。
4 6
我应该能明白它——它是什么？怎样使用它？——而不需要花费精力进行思考。
不过我们说的到底有多不言而喻？
呃，充分的不言而喻，就好像你隔壁的邻居，她对你的网站
主题毫无兴趣，也几乎不
知道如何使用后退按钮，但她仍然可以看一眼你的主页，然后说：“噢这是XX
X”，（如果运
气好的话她会说：“噢这是XXX。真是太好了！”当然这是另外一回事了。)
这样来看：
当我看到一个不需要思考的网页时，脑袋里面浮现的会是：“嗯这是XXX，那是
XXX，
我想要的东西在这里。”
当我看到一个需要思考的网页时，头脑里面浮现的东西都会加上一个问号。
创建一个网站的时候，你要做的就是去掉这些问号。
四、网站设计制作的基本流程
（一）、 前期策划和内容组织
1、 网站需求分析
2、 网站整体风格定位
3、 网站内容组织
（二）、 网站页面的设计制作
1、 寻找网页的创意
2、 利用图像软件设计效果图
3、 利用网页编辑软件制作网页
4、
利用网页动画软件制作动画
（三）、 网站页面的技术实现
1、
网页制作中的其他常用工具
2、 网页特效的具体技术实现
5 6
L4课堂练习：
1、鉴赏优秀网页的设计
2、上网分析不同网站网页的构成要素
L5、教案小结：
6 6