网页教案,针对初学者的教案
|
教学主题 |
||||||||||||
|
适用年级 |
高二年级 |
教学课时 |
1课时 |
|||||||||
|
教材分析 |
重点：静态网页和动态网页的组成方式及其工作过程 难点：动态网页的工作过程 |
|||||||||||
|
学习目标 |
了解网页、主页、网站的基本概念以及它们之间的关系，理解静态网页和动态网页的概念，了解静态网页和动态网页的技术，能解释其工作过程 |
|||||||||||
|
所需资源和环境 |
||||||||||||
|
数字化资源 |
1. 搜索引擎(www.google.com,www.baidu.com) 2. 若干演示网页（静态网页和动态网页） |
|||||||||||
|
常规资源 |
1. 教材《网络技术应用》第五章第1节；配套光盘 2. 教材配套教师用书 3. 《网页》学习任务单 |
|||||||||||
|
教学支撑环境 |
计算机网络教室、多媒体网络教室软件或液晶投影仪 |
|||||||||||
|
教学设计 |
||||||||||||
|
|
问题 |
目的 |
重点/难点/关键点 |
|||||||||
|
教学引导问题设计 |
什么是网站？什么是网页？什么是主页？ |
了解网站、网页、主页的含义 |
|
|||||||||
|
网站由什么构成的？ |
了解网站的各个组成部分 |
网站标志，页眉区，热点推荐区 |
||||||||||
|
我们平常在因特网上看到的网页是由什么组成的? |
让学生了解静态网页的组成代码——HTML |
了解HTML语言的结构及基本标签 |
||||||||||
|
静态网页是如何显示在浏览器中的？ |
掌握静态网页在浏览器中的工作过程 |
浏览器对HTML代码的解释过程 |
||||||||||
|
那些有交互操作的网页是由什么组成的？ |
让学生了解静态网页的构成 |
理解脚本语言 |
||||||||||
|
动态网页是如何在用户的交互下显示在浏览器中的？ |
掌握动态网页在浏览器中的工作过程 |
动态网页的执行过程 |
||||||||||
|
教学过程 |
||||||||||||
|
一、 新课引入： 凡是接触过因特网的同学，都应该访问过网站、看到过网页。大家所看到的网页，一般都有一些固定的格式的，比如说标题、网站标志等，而就网页的分类来说，一般来说可以分为两类，一类是不随用户的操作而变化的，叫做静态网页，另一类是随着用户的操作而变化的，这类网页叫动态网页。 今天我就来讨论一下关于网页的问题。 二、 教学内容： 通过搜索引擎搜索一些典型的网站，展示给学生。 1．网站、网页、主页的概念及三者关系 当今人们访问的国际互联网，是由一个个的网站组成的，而网站是由一张张具体的网页组成的，主页则相当于网站的起始页，起着引导连接作用，一般来说，用户可以通过主页访问到网站的大部分网页。 设问：什么是网站？什么是网页？什么是主页？ 活动：教师讲解网站、网页、主页的含义及三者间的关系。 2．网页页面结构 常见网站的页面结构一般由页面标题、网站标志（LOGO）、页眉区、导航栏、登录区、搜索区、推荐热点区、主要内容区、页脚区等组成。 3．静态网页的概念 静态网页是在服务器上以文件形式存放并以相同格式发送给客户的网页。 静态网页是用超文本标记语言写的文件。 设问：我们平常在因特网上看到的网页是由什么组成的? 活动：教师讲解静态网页的组成，超文本标记语言（HTML）的特点。 探索：学生操作，浏览一张网页时查看网页的源文件。 4．静态网页显示在浏览器中的原理 静态网页从服务器上以相同格式发送给客户的文件，但这个文件在到达浏览器后，浏览器需要查找文件中的HTML代码，然后将特定的HTML代码用特定的形式显示出来，形成用户所看到的网页。 设问：静态网页是如何显示在浏览器中的？ 活动：教师讲解浏览器对超文本标记语言的解释过程和效果。 5、动态网页的概念 动态网页是指在用户用户浏览过程中由计算机系统自动创建的网页，通常用于显示实时信息或按照用户交互显示特定的内容。 动态网页的特点：交互性、可自动更新、因地因时因人而变 动态网页的常见形式：计数器、聊天室、讨论区、BBS、校友录等。 构成动态网页的常见的两种情况：纯客户端方式构成的动态网页与客户端服务器模式构成的动态网页 设问：那些有交互操作的网页是由什么组成的？ 活动：教师讲解，常见的构成动态网页的两种情况，纯客户端方式构成的动态网页与浏览器/服务器模式构成的动态网页各自的组成方式与特点。 交流：如何利用系统调色板精确调色 6、动态网页显示的原理 纯客户端方式构成的动态网页：这种方式不需要与服务器交互，通常采用JAVA小程序和脚本语言形式直接嵌在网页中。它的动态表现在：用户通过各种由比如javascript、javaapplet等技术支持的操作网页的显示内容或形式。 |
|
|||||||||||
|
课后反思 |
|
|||||||||||
|
|
|
|||||||||||
|
教案设计者 |
|
单位/地址/邮编 |
|
|
||||||||
|
电子邮件 |
|
联系电话 |
|
|
||||||||
“网页”学习任务单
一、 网页相关概念
学生浏览网页，查看一个页面布局清晰、合理、有特色的网站，完成以下操作。
网站名称：
主页网址：
页面标题：
二、 静态网页与动态网页
1、 静态网页是用什么语言编写的?_________________________________________
2、 动态网页具有哪些特性? ____________________________________
3、 常见的动态网页技术有哪些? _____________________________________________
三、 实验:体验客户端动态网页效果
实验要求:
(1) 通过下面几个简短的动态网页的实例，了解一些实现客户端网页动态效果的简单方法。
(2) 通过对程序中某些对象属性的修改，掌握对网页动态效果简单的修改方法。
(3) 通过在网页代码中插入网页特效代码的体验活动，掌握制作动态网页的一种简易方法。
实验步骤示例：
1．输入如下的一段动态网页的源代码，在浏览器上观察并体验该代码段生成的网页动态效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 一个文字的动态效果</title>
</head>
<body>
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive>鼠标移上时将停止，移开时继续移动，不妨试一下</marquee>
</body>
</html>
2．描述以上代码所能实现的动态效果：
3．实际运用：根据表格中的要求，分别对代码中不同的属性值进行分析、修改，并通过浏览器观察个性的效果，比较修改前后的变化，根据自己的观察结果把表格填完整。
|
|
动态网页中的代码 |
代码所起的作用 |
|
1 |
onMouseOver=this.stop() onMouseOut=this.start() |
|
|
2 |
|
表示文字移动速度 |
|
3 |
direction=up（可改成：direction=right direction=left） |
|
|
4 |
height=116 width=188 |
|
|
5 |
|
表示移动文字背景色（可改成下列一些颜色：red,yellow,blue,silver等） |
4．实验评价：
|
|
评价指标 |
自我评价 |
|
|
活动质量 |
客户端网页中代码的作用分析，十分明确 |
6 |
|
|
客户端网页中代码的作用分析，较为清楚 |
5 |
|
|
|
客户端网页中代码的作用分析，大体了解 |
3 |
|
|
|
客户端网页中代码的作用分析，有待提高 |
2 |
|
|
四、 通过学习，你还有那些疑惑？
________________________________________
________________________________________
________________________________________
________________________________________
五、 通过学习，你对静态网页与动态网页的相关知识有哪些新的设想？
________________________________________
________________________________________
_________________________________________________________
_________________________________________________________