HTML网页设计技术教案.docx

HTML网页设计技术教案.docx

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

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分钟

训练

巩固

拓展

检验

组织学生讨论，对所展示的网站发表自己见解

启发诱导

难点提示

个别指导

个人操作

小组讨论

5分钟

总结

问题1：

如何上网浏览网站？

问题2：

如果不知道某个网站的网址，怎样获得该网站的网址或浏览该网站？

教师讲授

听讲

5分钟

作业

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

后记

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

教学内容

一、网页与网站的概念

网页：

我们在浏览器中看到的页面，它是一个单个的文件。

网页里可以有文字、表格、图像、声音、视频等等。

网站中的第一个页面成为首页或主页。

网站：

存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。

这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。

二、网页的设计

1、网页主题

　　网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。

　　主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩摈纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。

主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。

这方面如果处理不好，就会使站点来访问者在其中的各页面间移动时，可能会怀疑是否还在同'站点，因为那些页面看起来并不像属于同一站点。

页面主题可以帮助设计者解决这一难题。

统一的主题可以轻易地将不同设计者的不同风格统一起来，而又不会妨碍他们的设计思路和灵感。

　　确定主题时应遵循的原则

2、网页的文字

　　文字是网页最主要的表达形式，尽管图形和解构的表格五彩摈纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此：

所以，给浏览考一个亲和的文字界面是必要的。

3、网页的色彩

　　在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：

1．色彩助鲜明性

　　网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。

2．色彩的独特性

　　网站色彩的选择与搭配要与众不同，这样就可以使得访问者留下深刻的印象。

3．色彩的合适性

　　网站色彩的选择与搭配要与网站的内容气氛相适合。

4．色彩的联想性

　　不向的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露

出另外一种气息。

5．页面中各处用色的选择

首先确定主色。

主色是指页面中相对来说较大面积使用的色彩。

主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。

接下来是确定辅色。

辅色可以有多种，其应用范围包括输入框的颜色，表格边框颜色、表格的底色、小图标用色、文字颜色以及链接色等等。

4、网页版式和布局

1．版面设计的步骤

（1）画出页面的结构草图：

只需画出页面的大体结构。

注：

分辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；

（2）布局细化和调整：

将需要放置的功能模块安排在页面上，注意突出重点和平衡协调

（3）定格：

确定出完美的布局方案，定格为最后的版式

2．常见网页布局

（1）T型结构

（2）同字结构

（3）川字结构

（4）三字结构

（5）单一结构

三、网站的策划与创建原则

1、定位网站主题和名称

　　设计一个站点，首先遇到的问题就是定位网站主题。

所谓主题也就是你的网站的题材。

　　对于题材的选择，应注意：

（1）主题要小而精。

定位要小，内容要精。

调查结果也显示，网络上的“主题站”比“万全站”更受人们喜爱，就好比专卖店和百货商店，如果我需要买某方面的东西，肯定会选择专卖店。

（2）题材最好是你自己擅长或者喜爱的内容。

这样在制作时，才不会觉得无聊或者力不从心。

兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。

　　（3）题材不要太滥或者目标太高。

“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。

　　网站名称及域名的选择也是非常重要的。

和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。

一般的建议是：

（1）名称要正。

也就是要合法，和理，和情。

不能用反动的，色情的，迷信的，危害社会安全的名词语句。

（2）名称要易记。

根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。

另外，网站名称的字数应该控制在六个字（最好四个字）以内，比如“XX阁”“XX设计室”，四个字的可以用成语，如“一网打进”。

字数少还有个好处，一般友情链接的小logo尺寸是88X31，而六个字的宽度是78左右，适合于其他站点的链接排版。

　　（3）名称要有特色。

名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。

这里举几个例子：

音乐前卫，网页陶吧，天籁绝音。

在体现出网站主题的同时，能点出特色之处。

　　　域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。

2、网站的风格

　　网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。

难就难在没有一个固定的程式可以参照和模仿。

给你一个主题，任何两人都不可能设计出完全一样的网站。

　　风格（style）是抽象的。

是指站点的整体形象给浏览者的综合感受。

这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。

举个例子：

我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。

这些都是网站给人们留下的不同感受。

　　风格是独特的，是站点不同与其他网站的地方。

或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。

例如新世纪网络（）的黑白色,网易壁纸站的特有框架,即使你只看到其中一页，也可以分辨出是哪个网站的。

　　风格是有人性的。

通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。

是温文儒雅，是执著热情，是活泼易变,是放任不羁。

象诗词中的“豪放派”和“婉约派”，你可以用人的性格来比喻站点。

　　有风格的网站与普通网站的区别在于：

普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。

但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。

教案首页

本次课标题：

情境二html制作网页

（1）

授课日期

第7周周1

授课班级

课时

2

上课地点

1JD308

教

学

目

标

能力目标

知识目标

1、能够利用HTML标签设计静态网页的能力

2、HTML代码调试能力

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

2、HTML标签的使用

教

学

任

务

HTML标签的使用

案例：

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

重

点

难

点

重点：

HTML标签的使用

难点：

1、认识DreamweaverMX2004。

2、新增功能。

3、DreamweaverMX2004主窗口。

4、自定义工作环境。

作业或

考核

课后题

参

考

资

料

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

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

注：

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

教学设计

步骤

教学内容

教师活动

（方法与手段）

学生活动

时间分配

告知

（教学内容、

目的）

本次课主内容：

简单网页的制作过程

要达到的目的：

学会简单html网页文本元素编辑等

讲授

设问

听讲

5分钟

引入

（任务项目）

实例1：

 浏览优秀的网站的网页，完成简单html网页文本元素编辑等。

演示

启发

提问

讨论

个别回答

5分钟

操练

（掌握初步或基本能力）

对网页的信息内容进行分析、说明。

教师讲解

学生操作

个别回答

集体提示

15分钟

深化

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

Html文本元素制作

教师演示

要点提示

重点讲解

个别回答

集体讨论

15分钟

归纳

（知识和能力）

提示和技巧

讲授

集体思考

个别回答

10分钟

训练

巩固

拓展

检验

组织学生讨论，对所展示的网页发表自己见解

启发诱导

难点提示

个别指导

个人操作

小组讨论

5分钟

总结

教师讲授

听讲

5分钟

作业

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

后记

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

教学内容

　　在目前市面上众多的网页编辑软件中，有的重视效率，有的强调版面设计，而DreamweaverMX2004可以很方便地实现这两方面的完美结合。

另外，DreamweaverMX2004的网页动态效果与网页排版功能都优于一般同类软件，即使是初学者也能制作出相当水准的网页，所以DreamweaverMX2004是网页设计者的最佳选择。

新课内容：

一、DreamweaverMX2004简述

　　当今网页设计软件可以说是层出不穷，Macromedia推出的Dreamweaver就是一个广泛受到好评的网页设计软件。

它是一套针对专业网页设计师特别设计的可视化网页开发工具，利用它可以轻而易举地制作出跨越平台和跨越浏览器的充满动感的网页。

　　DreamweaverMX2004拥有出色的软件界面，其特别的控制面板使设计者们用起来得心应手。

DreamweaerMX还能与Macromedia公司的其他软件进行完美的合作。

DreamweaverMX2004最精彩之处便是其强大的多媒体处理功能，在设计DHTML（DynamicHTML）和CSS（CascadingStyleSheets）方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互性操作。

在这方面它超过了FrontPage2002Hotdog和HomeSite等著名网页设计软件，成为目前最为流行的网页设计工具。

二、新增功能

　　随着软件版本的不断提高，Dreamweaver的功能也在不断增加和完善。

Dreamweaver目前已经升级到MX2004版，在功能方面也增强了许多，下面介绍一下其新增功能。

1、设计方面的新增功能

（1）改善工作界面

　　DreamweaverMX2004提供了更规范化的工作界面及更好的面板管理：

DreamweaverMX2004将多个面板组成组，随时可以展开或集合，然后进一步把多个面板组放在一起，DreamweaverMX2004在此基础上将所有Dreamweaver关联窗口全部置入主窗口中（仅限Windows操作系统），该界面被称为MDI（MultipleDocumentInterface,多文档界面）。

（2）新增文档样式

　　在新建文档时，DreamweaverMX2004提供多种文档样式供用户选择，这些文档样式主要有B