《HTML网页设计技术》教案.docx

《HTML网页设计技术》教案.docx

《《HTML网页设计技术》教案.docx》由会员分享，可在线阅读，更多相关《《HTML网页设计技术》教案.docx（83页珍藏版）》请在冰豆网上搜索。

《HTML网页设计技术》教案

《HTML网页设计技术》

教案首页

本次课标题：

说课

授课日期

第6周周1

授课班级

课时

1

上课地点

教

学

目

标

能力目标

知识目标

1.本课程的任务、性质、目的

2.本课程的教学内容介绍与要求

3.本课程的能力培养及教学要求

4.本课程的考核要求

1.熟悉本课程的地位与前后课程的衔接关系

2.了解本课程所涉及的网页设计技能

教

学

任

务

能描述本课程在课程体系中的地位及作用

重

点

难

点

重点：

1.熟悉简介本课程的教学内容

难点：

1.本课程的性质、目的、任务

2.本课程的能力培养要求

作业或

考核

能概述本课程的课程要求及教学内容

参

考

资

料

网页设计[M].电子工业出版社,2010

《CSS+DIV网页设计开发技术与实例应用》，电子工业出版社，2011

注：

表格内容统一用5号宋体填写。

教学设计

步骤

教学内容

教师活动

（方法与手段）

学生活动

时间分配

告知

（教学内容、

目的）

1、了解课程主要内容、考核方法

2、熟悉网站开发步骤

讲授

设问

听讲

5分钟

引入

（任务项目）

说课

浏览经典网页

演示

启发

提问

讨论

个别回答

5分钟

操练

（掌握初步或基本能力）

1、Dreamweaver开发平台，

2、指导学生配置熟悉平台环境

3、创建网页并浏览

教师讲解

学生操作

个别回答

集体提示

15分钟

深化

（加深对基本能力的体会）

通过案例点评、小组讨论及教材理论知识的讲解，使学生了解站点创建、网页设计的含义、特点、依据、内容

教师演示

要点提示

重点讲解

个别回答

集体讨论

15分钟

归纳

（知识和能力）

第一个网页的创建和浏览步骤

讲授

集体思考

个别回答

10分钟

训练

巩固

拓展

检验

组内自评选出一个全班展示，组间互评，认识了解Dreamweaver开发平台，简单网页并浏览。

启发诱导

难点提示

个别指导

个人操作

小组讨论

5分钟

总结

归纳本次课所讲的内容，总结要实现的能力目标和知识目标，重点是站点的创建

教师讲授

听讲

5分钟

作业

根据教学内容制定预习计划

后记

学生能大致了解本门课程的目的、性质及任务，以及教学内容，能明确课程考核方式

教学内容

一、概述

（一）课程性质（课程性质和价值）

本课程是高职计算机软件技术专业的一门主干专业课程。

通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。

同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。

（二）课程基本理念

本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”，教学时各模块既有独立性，又有关联性。

独立性是指各模块设计案例、组织教学、突出重点时应该相互独立，学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系，在重难点设计上应该加以配合，如HTML语言模块着重基本代码的熟记和编写，对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。

《HTML网页设计技术》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。

本课程作为软件技术专业的一门主干专业课程，此时学生已经具备一定的计算机基础知识和动手能力，能较快地掌握网页设计的各种知识，并运用所学知识做出具有特色的网站，使学生能够得到全面的培养，成为社会所需专用人才。

（三）课程框架结构、学分和学时分配、对学生选课的建议

本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，将网页设计职业岗位能力中用到的知识如：

网页基础知识、DreamWeaver的使用、HTML语言、JavaScript脚本语言、Flash、Fireworks进行整合并模块化。

教学时各模块既有独立性，又有关联性。

独立性是指各模块设计案例、组织教学、突出重点时应该相互独立，学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互补充关系，按理论实践一体化要求设计，强调动手做，强调解决问题。

它体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。

课程框架结构、学分和学时分配、对学生选课的建议

二、课程目标

总目标：

使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。

（一）教学目标：

1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；

2.理解服务器、客户端、浏览器的概念和作用；

3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；

4.熟练操作DreamWeaver；

5.理解CSS样式表的作用和意义；

6.深入理解HTML语言的各种功能和应用；

7.深入理解表格、框架、表单的作用；

8.深入理解层的作用；

（二）技能教学目标：

1.会使用Dreamweaver网页设计工具制作网页；

2.理解HTML语言中的标记设置颜色、文本格式和列表；

3.熟练掌握颜色值的配置和背景图案的设置方法，熟练掌握字符、链接颜色的设置方法；

4.熟练掌握网页设计中字符格式的设置方法，段落分段与换行的方法；

5.掌握HTML的语法结构，掌握HTML语言中标记的使用方法；

6.掌握在网页中添加CSS的方法。

掌握三种添加样式信息的方法，会使用CSS设置网页格式和列表的格式；

7.掌握在网页中嵌入图像的方法，掌握与嵌入图像相关标记的用法；

8.掌握与图像布局和位置相关的标记的概念和用法；

9.熟练掌握使用绝对和相对URL，创建超链接、图像链接；学会图像映射的建立方法；

10.熟练掌握表格的使用方法，会用表格布局并设计网页；

11.掌握框架制作网页的方法，会使用框架设计网页；

12.掌握制作表单的方法，会利用表单建立交互式页面；

（三）素质教学目标：

1.具有勤奋学习的态度，严谨求实、创新的工作作风；

2.具有良好的心理素质和职业道德素质；

3.具有高度责任心和良好的团队合作精神；

4.具有一定的科学思维方式和判断分析问题的能力；

5.具有较强的网页设计创意思维、艺术设计素质。

三、实施建议

（一）教学建议：

从《HTML网页设计技术》的实际问题出发，精心准备各种典型案例，构建课程的宏观教学设计。

例如，公司网站、网上鲜花直销、个人网站精选、书籍专卖等。

以若干个案例为载体，形成循序渐进、种类多样的项目群，构建完整的教学设计布局。

1、教学采用“四阶段教学法”，将“教、学、练、做”融为一体。

教学体现“教师为主导，学生为主体，训练为主线”的原则，课堂上可以采用“四阶段教学法”：

第1个阶段，案例引入，提出问题。

通过案例演示，提出问题，给出知识点，讲解案例应用背景，给学生一个切入点，建立感性认识。

目的是激发学生的学习兴趣、让学生感到学有所用，从而明确本次课的教学目标。

第2个阶段，学生自主学习，尝试解决问题。

充分利用我校以及互联网网络教学资源，引导学生自主学习，找到解决问题的方法和操作技能，培养学生的自主学习意识和学习方法。

学生在学习和尝试解决问题过程中，发现问题，提出问题，在问题的引导下学习相关的知识和操作技能。

第3个阶段，归纳总结，引申提高。

在每次课结束前，引导学生进行归纳总结。

对本次课的实际意义、重点、难点、容易出错处等及时进行总结。

并针对案例的不足之处，进行引申和提高。

注意在这个阶段，强调的是“引导”学生，而不是老师讲解。

第4个阶段，举一反三、学以致用。

案例源于生活，最终要应用于生活。

为了使学生能学以致用、举一反三、触类旁通，每次教学结束时及时布置相关的课后练习，使学生在课后进一步复习巩固，并且将课后作业纳入形成性考核的内容之一。

同时给出下一次课的学习内容，提示学生预习。

2、充分利用现代化教学手段，提高教学效果

教学中采用电子演示文稿、大屏幕多媒体联机演示、网络教学等各种先进的教学手段，使课堂教学生动活泼、引人入胜，提高了教学效果，同时提高了教学效率。

包括：

（1）利用多媒体教学系统广播教学。

把学生的共同问题（需要提示的重点）通过“广播教学”，边讲边演示，使学生即时看到操作效果。

（2）利用网络将课堂教学延伸到课外，学生根据需要通过网络学习有关的内容。

教师的课件和教学用资料都已都上传到教学资源下载中心，方便学生课外学习和复习。

（二）评价建议：

对学生学业评价提出建议，体现评价的发展功能。

1．突出过程评价，以职业岗位工作过程为考评基础，以全学期的教学情境进度为考核时间线，以一个完整的网站页面设计制作项目的驱动，在每个教学情境完成教学之后，要求学生运用该教学情境所学技能设计制作项目中的相关进度作业（作品），并对其作业（作品）进行考核。

从而形成阶段性过程考核成绩，该成绩作为总评成绩的重要组成部份（占60％）。

2．强调目标评价和理论与实践一体化评价，注重引导学生进行学习方式的改变。

3．强调课程结束后的综合评价，结合全教学过程的过程考核项目，对学生的最终过程考核作品，从策划能力、美工设计能力、制作技术应用能力三个方面进行综合评价。

从而充分发挥学生主动性和创造力，还要注重考核学生动手能力和在实践中分析问题、解决问题的能力。

4．建议在教学中注重团队协作能力的评分，课程结束时进行综合模块考核。

建议以学生自己制作的网站的实际水平作为学生的学习本课程的成绩。

教案首页

本次课标题：

情境一WWW技术基础

授课日期

第6周周1

授课班级

课时

1

上课地点

1JD308

教

学

目

标

能力目标

知识目标

1、初步认知静态网页

2、熟悉开发工具的使用

3、了解网站开发的前沿技术

1.静态页面的主要组成部分

2.开发工具的使用

教

学

任

务

开发工具的使用

案例：

电子银行静态页面的登陆与注册。

重

点

难

点

重点：

开发工具的使用

难点：

站点的建立

作业或

考核

站点的建立

参

考

资

料

网页设计[M].电子工业出版社,2010

《CSS+DIV网页设计开发技术与实例应用》，电子工业出版社，2011

注：

表格内容统一用5号宋体填写。

教学设计

步骤

教学内容

教师活动

（方法与手段）

学生活动

时间分配

告知

（教学内容、

目的）

要达到的目的：

1、了解网站和网页的基本概念；

2、掌握网页的版面设计；

3、掌握网站的策划与网站原则；

4、了解网站的开发过程。

讲授

设问

听讲

5分钟

引入

（任务项目）

实例1：

 浏览优秀的网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。

演示

启发

提问

讨论

个别回答

5分钟

操练

（掌握初步或基本能力）

对各个网站的信息内容、网页布局结构、色彩搭配进行分析、说明

教师讲解

学生操作

个别回答

集体提示

15分钟

深化

（加深对基本能力的体会）

网页布局

色彩搭配原则

教师演示

要点提示

重点讲解

个别回答

集体讨论

15分钟

归纳

（知识和能力）

提示和技巧

讲授

集体思考

个别回答

10分钟

训练