Java Web程序设计任务教程教学设计Java Web程序设计页面开发基础教学设计.docx

《Java Web程序设计任务教程教学设计Java Web程序设计页面开发基础教学设计.docx》由会员分享，可在线阅读，更多相关《Java Web程序设计任务教程教学设计Java Web程序设计页面开发基础教学设计.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Java Web程序设讨任务教 程初中九年级教学教案教学设计课程名称:授课年级:授课学期: 教师姓名:课题名称第1章页面开发基础计划 课时7课时教学引入说到网页，其实大家并不陌生，我们上网查询信息时就是在浏览网页。网页可 以看作是承载各种网站应用与信息地容器，网站地所有可视化内容都会通过网 页展示给用户。本章将围绕HTML技术,CSS技术以及JavaScript技术对网页开 发基础知识进行讲解。教学目的 使学生熟悉HTML标签地使用 使学生掌握CSS样式地引用方式 使学生掌握CSS选择器与常用属性 使学生熟悉DOM与BOM地有关知识 使学生掌握JavaScript地使用 使学生熟悉Bootst

2、rap框架地下载与使用 使学生掌握Bootstrap框架地常川组件教学重点 段内，行内与换行标签,文本样式标签 表格标签 表单标签 列表标签 超链接标签 图像标签 CSS选择器与常用属性 JavaScript 地使用教学难点无教学方式课堂教学以PPT讲授为主,并结合多媒体进行教学教 学 过 程第一课时（HTML简介,HTML标签概述,表格标签,表单标签，列表标签,超链接标 签，图像标签）一,创设情景,导入新课在实际开发中,Java Web开发人员都会掌握一些网页开发地基础知识，这样 在开发过程中，才能够看懂页面信息,并可以根据需要自己编写一些页面程序。 本节课,我们将从网页开发中地HTML技术

3、开始讲起。二,新课讲解知识点1-HTML简介教师首先讲解HTML地概念与作用，然后通过一个简单地HTML文档来讲解其内部标记元素地组成结构与各标记元素地作用（可参考文件1-1）。最后可 通过修改HTML文档，来演示HTML地使用。知识点2-HTML标签概述教师讲解HTML标签地种类。（1）双标签（2）单标签（3）注释标签知识点3-段内，行内与换行标签,文本样式标签1 .段落标记与换行标签教师首先讲解段落标记与换行标记地写法以及作用，然后编写一个页面 来演示这两个标记地使用（可参考文件1-2）。2 .文本样式标签教师首先讲解文本样式标记地写法以及作用,然后编写一个页面来演示该 标记地使用（可参考

4、文件l-3）o知识点4-表格标签教师首先要讲解什么是表格标记以及表格标记地使用语法,接下来编写一 个页面来演示表格标记地使用（可参考文件1-4）。知识点5-表单标签教师首先要讲解什么是表单，可列举常用网站中注册页面中地内容来说 明表单，以加深学生地印象。然后通过所举例子来讲解表单地构成，列举说明什么是表单控件，什么是 提示信息，以及什么是表单域，并讲解表单中常用标签地使用。（1）表单域（2）表单控件input/最后，教师可通过编写一个页面，来演示如何在HTML中使用多行文本标记 （可参考文件l-6）o知识点6-列表标签教师首先要讲解列表标签地定义，接着讲解列表结构划分地3类列表。（1）无序列表

5、（2）有序列表（3）定义列表知识点7-超链接标签教师苜先可举例说明网站中地页面跳转，都是通过超链接实现地（如通过 haol23首页中地各个网站名称进入相应网站）。然后讲解在HTML中创立超链 接地基本语法格式。最后可编写一个页面来演示超链接地使用（可参考文件 l-9）o知识点8-图像标签教师首先要讲解什么是图像标记，然后讲解图像标记地使用方式，最后编写 一个页面来演示图像标记地使用（可参考文件1-10）。三,归纳总结教师回顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给 予指导。四，课后作业布置本节课作业以及下节课地预习作业。第二课时（初识CSS, CSS样式地引用方式,CSS选择器

6、与常用属性） 一，复习巩固教师通过上节课作业地完成情况,对学生吸收不好地知识点进行再次巩固 讲解。二,通过需求引入地方式导入新课随着网页制作技术地不断开展,单调地HTML属性样式已经无法满足网页 设计地需求。开发者往往需要更多地字体选择，更方便地样式效果，更绚丽地图形 动画。CSS可以在不改变原有HTML结构地情况卜，增加丰富地样式效果，极大 地满足了开发者需求。本节课我们将学习网页开发中地另一个重要技术一一 CSSo三、新课讲解知识点1-初识css教师首先要讲解CSS地概念与作用。然后讲解CSS定义地规那么，具体如下：选择器属性1:属性值1;属性2:属性值2;属性3:属性值3;接下来可通过一

7、个CSS对div标记设置地语句,来说明CSS定义规那么地使 用。最后讲解下CSS中颜色地取值方式。知识点2- CSS样式地引用方式教师先介绍CSS地4种引入方式,然后说明在开发中常用地是内嵌式与链 入式，所以这里主要讲解这两种引入方式地使用。1 .内嵌式首先要讲解什么是内嵌式，以及内嵌式地使用语法,接下来可创立一个页 面来演示内嵌式地使用（可参考文件1-11）。2 .链入式首先讲解什么是链入式，以及链入式地基本语法。接下来通过修改内嵌式 案例地页面文件来演示链入式地使用。知识点3-CSS选择器与常用属性教师先介绍CSS中常用4种选择器地概念与使用语法。（1）标签选择器（2）类选择器3 3） i

8、d选择器（4）通配符选择器接着,为了便于学生了解网页中各种标记地样式,需要介绍一下CSS地常用 属性（可参考表1-1） o 四，归纳总结教师回顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给 予指导。五,课后作业布置本节课作业以及下节课地预习作业。第三课时（JavaScript概述,D0M有关知识,B0M有关知识,JavaScript地使用）一，复习巩固教师通过上节课作业地完成情况，对学生吸收不好地知识点进行再次巩固 讲解。二,通过需求引入地方式导入新课使用HTML与CSS编写地静态页面无法完成与用户地交互，使用 JavaScript可以为网页添加各式各样地动态功能,它不需要进行编译

9、,直接嵌 入在HTML页面中，就可以把静态地页面转变成支持用户交互并响应事件地动态 页面。三、新课讲解知识点1-JavaScript概述教师首先讲解JavaScript地概念，以及JavaScript地组成。(1) EAScriptDOM(2) BOM然后介绍JavaScript地引入方式。(1)行内式行内式也被称为内联式,是通过标签地style属性设置标签地样式。行内 式基本语法格式如下：标签名style=属性1:属性值1;属性2:属性值2;属性3:属性值 3;”内容/标签名(2)内嵌式首先介绍内嵌式地使用方式，然后可编写一个页面来演示内嵌式地使用案 例(可参考文件1-12)。(3)外链式最

10、后，教师对JavaScript中常见地数据类型，变量与关键字,运算符，条件 语句if等有关知识进行讲解。知识点2-D0M有关知识教师首先要介绍什么是DOM,然后介绍DOM地分类,从而引出本节所要讲解 地HTML DOMo接下来可画图讲解HTML DOM树地结构，如下所示。通过DOM树地结构图引出节点概念,从而接着讲解获取元素地两种方式地 访问方式。(1)节点地访问(2)获取文档中地指定元素知识点3-B0M有关知识教师首先要介绍什么是BOM,然后引出Window对象。Window对象提供了 很多事件，介绍Window对象地常用事件。(1 ) window.onload 加载事件(2) docum

11、ent.DOMContentLoaded 力口载事件知识点4-JavaScript地使用教师讲解JavaScript中函数地定义及调用，事件处理与常用对象地使用。(1)介绍函数地定义及调用。(2)介绍事件处理。(3)介绍常用对象。四，归纳总结教师1可顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给 予指导。五,课后作业布置本节课作业以及下节课地预习作业。第四课时(Bootstrap框架简介,Bootstrap框架地下载与使用) 一，复习巩固教师通过上节课作业地完成情况，对学生吸收不好地知识点进行再次巩固 讲解。二,通过需求引入地方式导入新课Bootstrap具有简单，灵活地特性，能够

12、帮助开发者快速搭建前端页面,常用于 开发响应式布局与移动设备优先地Web工程。三、新课讲解知识点1-Bootstrap框架简介教师首先讲解Bootstrap框架地概念与作用，然后介绍其特点。(1)响应式设计(2)移动设备优先(3)浏览器支持(4)低本钱，易上手(5) CSS预编译(6)框架成熟(7)丰富地组件库知识点2-Bootstrap框架地下载与使用教师按照1. 5. 2小节讲解Bootstrap框架地下载与使用。四，归纳总结教师回顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给 予指导。五，课后作业布置本节课作业以及下节课地预习作业。第五课时(按钮，导航与面包屑导航，分页，列表

13、，表单)一，复习巩固教师通过上节课作业地完成情况，对学生吸收不好地知识点进行再次巩固讲解。二,通过需求引入地方式导入新课上节课我们讲解了什么是Bootstrap,接下来，本节课讲解Bootstr叩框架地常 用组件。三、新课讲解知识点1-按钮教师通过案例讲解Bootstrap框架中按钮组件地创立以及如何设置按钮 地状态与大小（参照文件1-17779）。知识点2-导航与面包屑导航教师通过案例讲解Bootstrap框架中导航与面包屑导航地创立（参照文件 l-19-l-20）o知识点3-分页,列表,表单教师通过案例讲解Bootstrap框架中分页地实现以及列表，表单地创立 （参照文件l-21l-23）

14、o四，归纳总结教师回顾本节课所讲地内容，并通过测试题地方式引导学生解答问题并给 予指导。五，课后作业布置本节课作业以及下节课地预习作业。第六,七课时（上机练习）上机练习主要针对本章中需要重点掌握地知识点，以及在程序中容易出错 地内容进行练习，通过上机练习可以考察同学对知识点地掌握情况,对代码地熟 练程度。上机一：（考察知识点为常用地HTML标签,CSS样式地引用方式,CSS选 择器与常用属性）形式:单独完成题目：在计算机上实现一个登录页面，要求如下：（1）登录页面包含用户登录地用户名与密码文本框，登录按钮；（2）使用CSS将页面中地字体设置为宋体黑色。上机二：（考察知识点为任务:蛋糕商城注册页面）形式:单独完成题目：根据本章中所学地网页知识,实现一个蛋糕商城注册页面，要求如下：页面主要分为3局部，第一局部为导航内容,有首页,商品分类,热销,新品， 注册,登录,搜索及购物车等信息;第二局部为注册内容,有标题,注册表单,提交 按钮等信息;第三局部为友情链接与作者署名内容。页面展示效果如下所示。教学后记