顶部468*60ad 顶部468*60ad 顶部468*60ad 顶部468*60ad

网页教案,针对初学者的教案

2008-03-08 12:41:33  来源:网页教学网 行云止水

教学主题

网页

Webjx.Com

适用年级 Webjx.Com

高二年级

教学课时

1课时

教材分析 网页教学网

重点:静态网页和动态网页的组成方式及其工作过程

网页教学网

难点:动态网页的工作过程

学习目标

了解网页、主页、网站的基本概念以及它们之间的关系,理解静态网页和动态网页的概念,了解静态网页和动态网页的技术,能解释其工作过程

所需资源和环境

Webjx.Com

数字化资源

1.       搜索引擎(www.google.com,www.baidu.com) 网页教学网

2.       若干演示网页(静态网页和动态网页)

常规资源

1.       教材《网络技术应用》第五章第1节;配套光盘

2.       教材配套教师用书 Webjx.Com

3.       《网页》学习任务单

教学支撑环境

计算机网络教室、多媒体网络教室软件或液晶投影仪 Webjx.Com

教学设计

  Webjx.Com

问题

网页教学网

目的

重点/难点/关键点

网页教学网

教学引导问题设计

网页教学网

什么是网站?什么是网页?什么是主页?

网页教学网

了解网站、网页、主页的含义

  网页教学网

网站由什么构成的? Webjx.Com

了解网站的各个组成部分

网站标志,页眉区,热点推荐区

我们平常在因特网上看到的网页是由什么组成的?

让学生了解静态网页的组成代码——HTML

Webjx.Com

了解HTML语言的结构及基本标签 网页教学网

静态网页是如何显示在浏览器中的?

掌握静态网页在浏览器中的工作过程

浏览器对HTML代码的解释过程

Webjx.Com

那些有交互操作的网页是由什么组成的? 网页教学网

让学生了解静态网页的构成

理解脚本语言

Webjx.Com

动态网页是如何在用户的交互下显示在浏览器中的?

掌握动态网页在浏览器中的工作过程

动态网页的执行过程

教学过程

一、              新课引入:

凡是接触过因特网的同学,都应该访问过网站、看到过网页。大家所看到的网页,一般都有一些固定的格式的,比如说标题、网站标志等,而就网页的分类来说,一般来说可以分为两类,一类是不随用户的操作而变化的,叫做静态网页,另一类是随着用户的操作而变化的,这类网页叫动态网页。

今天我就来讨论一下关于网页的问题。

二、              教学内容: Webjx.Com

通过搜索引擎搜索一些典型的网站,展示给学生。

网页教学网

1.网站、网页、主页的概念及三者关系

网页教学网

当今人们访问的国际互联网,是由一个个的网站组成的,而网站是由一张张具体的网页组成的,主页则相当于网站的起始页,起着引导连接作用,一般来说,用户可以通过主页访问到网站的大部分网页。

 

设问:什么是网站?什么是网页?什么是主页?

活动:教师讲解网站、网页、主页的含义及三者间的关系。

 

2.网页页面结构

常见网站的页面结构一般由页面标题、网站标志(LOGO)、页眉区、导航栏、登录区、搜索区、推荐热点区、主要内容区、页脚区等组成。

网页教学网

 

3.静态网页的概念

静态网页是在服务器上以文件形式存放并以相同格式发送给客户的网页。

Webjx.Com

静态网页是用超文本标记语言写的文件。

Webjx.Com

 

设问:我们平常在因特网上看到的网页是由什么组成的?

活动:教师讲解静态网页的组成,超文本标记语言(HTML)的特点。

探索:学生操作,浏览一张网页时查看网页的源文件。

Webjx.Com

 

4.静态网页显示在浏览器中的原理 Webjx.Com

    静态网页从服务器上以相同格式发送给客户的文件,但这个文件在到达浏览器后,浏览器需要查找文件中的HTML代码,然后将特定的HTML代码用特定的形式显示出来,形成用户所看到的网页。

Webjx.Com

 

设问:静态网页是如何显示在浏览器中的?

活动:教师讲解浏览器对超文本标记语言的解释过程和效果。

  Webjx.Com

5、动态网页的概念

网页教学网

动态网页是指在用户用户浏览过程中由计算机系统自动创建的网页,通常用于显示实时信息或按照用户交互显示特定的内容。 Webjx.Com

动态网页的特点:交互性、可自动更新、因地因时因人而变

动态网页的常见形式:计数器、聊天室、讨论区、BBS、校友录等。

Webjx.Com

构成动态网页的常见的两种情况:纯客户端方式构成的动态网页与客户端服务器模式构成的动态网页

 

Webjx.Com

设问:那些有交互操作的网页是由什么组成的?

    活动:教师讲解,常见的构成动态网页的两种情况,纯客户端方式构成的动态网页与浏览器/服务器模式构成的动态网页各自的组成方式与特点。

交流:如何利用系统调色板精确调色

 

Webjx.Com

6、动态网页显示的原理 Webjx.Com

纯客户端方式构成的动态网页:这种方式不需要与服务器交互,通常采用JAVA小程序和脚本语言形式直接嵌在网页中。它的动态表现在:用户通过各种由比如javascriptjavaapplet等技术支持的操作网页的显示内容或形式。

 

 

课后反思

 

  Webjx.Com

 

教案设计者

网页教学网

单位/地址/邮编

 

电子邮件

网页教学网

联系电话

Webjx.Com

  网页教学网

 

 

网页教学网

 

“网页”学习任务单

网页教学网

一、             网页相关概念

网页教学网

学生浏览网页,查看一个页面布局清晰、合理、有特色的网站,完成以下操作。 网页教学网

网站名称:                                      

Webjx.Com

主页网址:                                   网页教学网

页面标题:                                            网页教学网

 

二、             静态网页与动态网页

  Webjx.Com

1、  静态网页是用什么语言编写的?_________________________________________

Webjx.Com

2、  动态网页具有哪些特性?           ____________________________________

3、  常见的动态网页技术有哪些? _____________________________________________

 

网页教学网

三、             实验:体验客户端动态网页效果

Webjx.Com

实验要求:

(1)    通过下面几个简短的动态网页的实例,了解一些实现客户端网页动态效果的简单方法。

(2)    通过对程序中某些对象属性的修改,掌握对网页动态效果简单的修改方法。

Webjx.Com

(3)    通过在网页代码中插入网页特效代码的体验活动,掌握制作动态网页的一种简易方法。

网页教学网

实验步骤示例:

Webjx.Com

1.输入如下的一段动态网页的源代码,在浏览器上观察并体验该代码段生成的网页动态效果。 Webjx.Com

<html>

Webjx.Com

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 网页教学网

<title> 一个文字的动态效果</title>

Webjx.Com

</head>

 

<body>

<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive>鼠标移上时将停止,移开时继续移动,不妨试一下</marquee>

Webjx.Com

</body> Webjx.Com

</html>

2.描述以上代码所能实现的动态效果:                                       

Webjx.Com

                                                                           

网页教学网

3.实际运用:根据表格中的要求,分别对代码中不同的属性值进行分析、修改,并通过浏览器观察个性的效果,比较修改前后的变化,根据自己的观察结果把表格填完整。 网页教学网

 

动态网页中的代码

代码所起的作用

网页教学网

1

onMouseOver=this.stop() onMouseOut=this.start()

Webjx.Com

 

2

Webjx.Com

 

Webjx.Com

表示文字移动速度

Webjx.Com

3 网页教学网

direction=up(可改成:direction=right direction=left

  Webjx.Com

4

height=116 width=188

 

5 Webjx.Com

 

Webjx.Com

表示移动文字背景色(可改成下列一些颜色:red,yellow,blue,silver等)

4.实验评价:

  网页教学网

评价指标

Webjx.Com

自我评价 网页教学网

活动质量

客户端网页中代码的作用分析,十分明确

6

  Webjx.Com

客户端网页中代码的作用分析,较为清楚

5 网页教学网

 

客户端网页中代码的作用分析,大体了解

网页教学网

3

网页教学网

 

客户端网页中代码的作用分析,有待提高

2 Webjx.Com

 

  网页教学网

四、             通过学习,你还有那些疑惑?

 

Webjx.Com

________________________________________

Webjx.Com

________________________________________

________________________________________

网页教学网

________________________________________

  网页教学网

五、             通过学习,你对静态网页与动态网页的相关知识有哪些新的设想?

________________________________________

Webjx.Com

________________________________________

_________________________________________________________

_________________________________________________________

网页教学网

文章评论

共有 0 位网友发表了评论 查看完整内容