静态网页制作教案.docx

静态网页制作教案.docx

《静态网页制作教案.docx》由会员分享，可在线阅读，更多相关《静态网页制作教案.docx（28页珍藏版）》请在冰点文库上搜索。

静态网页制作教案

授课教案

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年2月22日1-2节

课题

课前准备

教学目的

通过本次上机，收集学生对该门课程的看法、意见，并使学生初步了解html代码的输入和保存

教学重点

Html代码的输入和保存

教学难点

Html代码的输入和保存

教学方法

上机

教学内容提纲

一、请各位同学畅所欲言，谈谈对《网页制作》这门课程的看法和想法（专业联系、意义、自身兴趣、是否有过网页制作的学习经历或基础、期望的授课内容、方式或课程要求）保存在word文档中并提交

二、预习课本1.1节中html语言的【相关知识】，并自行练习制作【实例1】

教学后记

1、学生对这门课程的学习兴趣很浓，每位同学都谈了自己的基础情况及课程意见

2、基本能对照课本完成实例1的操作，对html的输入、保存有了初步的印象

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年2月24日3-4节

课题

第一章网页设计基础§1.1§1.2§1.3

教学目的

通过本次课的教学，使学生对与网页制作相关的Internet知识、网页术语、设计方式有较为清晰的认识，为以后的学习打下良好的基础

教学重点

Internet协议

网页设计相关术语

教学难点

让学生将技术较强的网络术语与现实的应用联系，理解它们对网站的重要性

教学方法

讲授

教学内容提纲

§1Internet概述　

一、Internet的用途

二、Internet的协议

三、Internet的地址

§2网页设计相关术语

网页、网站、主页、HTTP、HTML、URL

§3网页设计的工具

一、手工编码方式

二、可视化工具方式

三、编码和可视化工具结合

教学后记

1.课堂讲解细致，按计划完成教学任务

2.学生对这些内容有一定的基本了解，交流和沟通比较容易

3.教学互动性较好，达到了预期的教学效果

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月1日1-2节

课题

浏览器的使用及设置

教学目的

通过本次上机，让学生能够掌握浏览器的使用及设置，消化课堂内容

教学重点

Internet选项的设置

教学难点

掌握其设置在实际中的具体运用

教学方法

上机

教学内容提纲

一、界面的熟悉7）改变显示状态

二、基本操作8）编码的选择

1）输入URL9）查看源文件

2）后退、前进、停止、刷新、主页三、IE的设置

3）在网页之间实现跳转

4）使用和整理收藏夹

5）下载文件

6）保存图片、页面信息

教学后记

课堂氛围浓烈，绝大部分同学都能够认真操作并掌握了浏览器的使用及设置，达到了本次上机的目的

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月3日3-4节

课题

第二章HTML语言§2.1§2.2

教学目的

通过本次课的教学，使学生对HTML有个全面的理解，并能掌握部分重要标记，可以阅读一般网页的源文件

教学重点

部分重要HTML标记的掌握及熟练使用

教学难点

能够结合HTML编写制作网页

教学方法

讲授

教学内容提纲

§1了解HTML语言

一、标记及基本属性

二、HTML的基本结构

三、编辑和保存网页

四、网页基本标记

§2插入对象

一、文本标记

二、图像标记

三、插入音乐和动画

教学后记

1.就上机课出现的问题作集中演示讲解

2.先用课件展现内容，后在电脑上操作，效果较好

3.一开始接触html语言，学生掌握有一定难度，需放慢进度

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月8日1-2节

课题

HTML语言上机实践

教学目的

通过上机实践，掌握使用HTML代码直接制作网页和修改网页属性的方法，加深学生对HTML标签的记忆和理解

教学重点

文字、图像、音频、动画的插入；

网页属性的修改

教学难点

图像的存放及src属性设置

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

（一）HTML基本标记的使用：

Headbody等

（二）通过记事本编辑简单的网页，并能够修改简单的标签属性

（三）网页基本属性的修改：

bgcolor、background

（四）各类对象的插入

三、练习课本实例2、实例3

教学后记

学生能够很好地掌握HTML文档的结构标记，对body标签、font标签的基本用法较为熟练，但对于插入对象的属性编辑，尤其是图片属性的编辑还存在问题

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月10日3-4节

课题

第二章HTML语言§2.3§2.4

教学目的

通过教学，使学生理解不同的超链接类型，掌握超链接标签、列表标签的写法、用法

教学重点

各类超链接的制作

教学难点

锚点链接的制作

教学方法

讲授

教学内容提纲

§3URL和链接文件

一、超链接简介

二、文档路径类型

三、超链接的使用本地链接、url链接、邮件链接、锚点链接、其他链接

§4列表样式和表格

一、列表样式

有序列表、无序列表

教学后记

1.就上机课出现的问题作集中演示讲解：

路径、属性、扩展名

2.课堂教学过程设计合理，学生能够理解超链接标签的相关知识，掌握列表标签的属性修改，整体教学效果较好。

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月15日1-2节

课题

HTML语言上机实践

教学目的

通过上机练习，使学生掌握链接标签、列表标签的基本写法、用法，学以致用

教学重点

链接标签、列表标签的用法

教学难点

链接标签href属性的正确设置

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、本地链接、url链接、邮件链接、锚点链接、下载文件超链接、空链接

2、有序列表、无序列表的制作

三、练习课本实例5、实例6

教学后记

链接点的作用与链接目标路径不能区分，链接目标是文件或者程序时不懂制作，缺乏变通，电子邮件链接做成链接到自己的网络邮箱。

超链接制作存在一定难度，学生掌握一般，课上仍需进一步讲解

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月17日3-4节

课题

第二章HTML语言§2.4§2.5§2.6

教学目的

通过教学，使学生掌握表格标签、框架标签的基本写法、用法，学会设置文字和图像的滚动效果

教学重点

表格属性的修改；

框架标签的用法

教学难点

移动属性的设置

教学方法

讲授

教学内容提纲

§4列表样式和表格

三、表格

表格基本结构、表格属性设置

§5框架

一、框架语法

二、框架属性

§6滚动文本和图像

教学后记

1、对上机操作时集中出现的问题作演示讲解

2、按计划完成教学任务，学生课上能够积极思考，认真记录笔记，课堂氛围较好。

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月22日1-2节

课题

HTML语言上机实践

教学目的

通过上机练习，使学生掌握表格标签、框架标签的运用，学会设置文本和图像的滚动效果

教学重点

表格属性的修改；

框架的建立

教学难点

滚动文本和图像

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、表格的定义及属性设置

2、框架的建立

3、滚动文本和图像

三、练习课本实例7、实例9

教学后记

大部分学生对表格标签的写法、用法掌握较好，能够简单编写含有滚动字幕的网页，但对于框架的建立少数同学存在困难，经过单独指导后效果较好。

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月24日3-4节

课题

第三章Frontpage的应用§3.1

教学目的

熟悉网站开发的基本流程和制作步骤，掌握网页制作的版面布局和设计思想;

教学重点

网页制作的基本流程

教学难点

网页的版面布局设计

教学方法

讲授

教学内容提纲

§1网站制作前的准备

一、定位网站的主题和名称

二、定位网站的CI形象

三、规划网站

四、主要页面布局设计

五、搜集素材，制作主页及其他

内页

六、测试、上传

七、宣传推广

八、更新维护

教学后记

网站制作前的规划设计很大程度上决定着整个网站的优劣，认识到网站规划的重要性，将对今后具体的设计制作起很大帮助，课上注意培养学生这方面的思想、意识，并通过具体案例的讲解、剖析，加深学生对基本流程的理解

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月29日1-2节

课题

优秀网站鉴赏

教学目的

通过上机练习，让学生浏览不同主题的优秀网站，学习其设计亮点，加深对课堂理论的理解

教学重点

版面布局分析

教学难点

颜色的合理搭配

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、上网浏览各类不同主题的优秀网站，分析其版面布局、配色方案、栏目结构等，并评价网站给浏览者的整体感受

三、综合点评

教学后记

从提交的作业文档来看，通过浏览不同主题的优秀网站，学生在网站鉴赏水平上有了一定提高，能较合理的分析出网站的版面设计、配色方案和栏目结构等，发现并领会其设计亮点，达到了预期的上机目的

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年3月31日3-4节

课题

第三章Frontpage的应用§3.2§3.3

教学目的

通过本次课的教学，使学生熟悉Frontpage软件界面，掌握网页的基本操作以及图片、音频的使用

教学重点

站点的相关操作；

图片属性的设置；

音频使用的多种方法

教学难点

站点文件夹与普通文件夹的不同

教学方法

讲授

教学内容提纲

§2建立与编辑基本网页

一、Frontpage2000界面概述

二、站点的操作

三、网页的新建、保存、打开

四、基本网页的编辑

§3多媒体与超链接的使用

一、图片的使用

二、音频的使用

教学后记

1.相比与之前的html语言学习，利用网页制作软件来编辑网页，学生在理解程度和学习兴趣上都有了更大的提高

2.通过实例操作，学生接受很快，互动强，教学效果较好

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月7日3-4节

课题

第三章Frontpage的应用§3.3

教学目的

通过本次课的教学，使学生掌握向网页中添加视频的基本操作，学会创建和编辑各种超链接

教学重点

各类超链接的制作

教学难点

各类超链接的制作

教学方法

讲授

教学内容提纲

§3多媒体与超链接的使用

三、视频的使用

四、超链接的制作

1、在文本、图片上制作链接

2、链接到网页文件、书签、电子邮件、非网页文件、internet网站

五、编辑超级链接

综合实例制作：

绿色家园

教学后记

通过综合实例的演示制作，总结出设计技巧，使学生对目前所学的Frontpage2000的基本操作有更全面更深刻的认识，培养其综合运用知识的能力，课堂氛围浓烈，教学效果良好

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月12日1-2节

课题

Frontpage2000的基本操作

教学目的

通过本次上机，巩固站点操作，加强学生对在网页中插入文本、图片、音频、视频等对象的操作，学会设置页面属性

教学重点

站点的操作；图片属性的设置；

各类超链接的制作

教学难点

图片工具栏的灵活运用

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、站点的建立、修改、删除

2、网页的基本操作，各类对象的插入及属性修改

3、网页背景属性设置

4、多媒体对象的使用

5、各类超链接的制作

教学后记

1.学生对上机操作的热情很高，氛围较好

2.通过实际操作，大部分同学都掌握了课上知识，达到了上机要求

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月19日1-2节

课题

Frontpage2000的基本操作

教学目的

通过本次上机，使学生进一步巩固课堂所学，攻克操作中的难点，提高综合操作水平

教学重点

锚点链接制作；

图片热点运用

教学难点

图文混排

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、插入图片，并使用热点创建图象地图

2、定义锚点，跳转到指定页面的指定位置

三、模仿制作课上案例：

绿色家园

教学后记

学生对一些基本操作掌握较熟练，但对于站点建立的意义还较模糊，实例操作时灵活运用知识的能力也较欠缺，以后仍需加强练习。

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月21日3-4节

课题

第三章Frontpage的应用§3.4§3.5

教学目的

通过本次课的教学，使学生能够掌握网页中表格的插入和使用，理解框架的概念和制作

教学重点

如何插入表格、框架；

框架网页的基本操作及属性设置

教学难点

框架概念的理解及保存操作

教学方法

讲授

教学内容提纲

§4表格的使用

一、表格的用途

二、创建表格

三、填充表格

四、表格相关操作

五、表格属性

§5制作框架页面

一、创建框架网页：

二、拆分、删除框架

三、初始化框架网页

四、保存框架网页

五、设置超链接的目标框架

六、框架属性的设置

教学后记

1.基于以前对html中表格、框架的学习，再次提到相关知识点时，理解和接受都很快

2.请同学上台演示操作，课堂气氛和互动都较好

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月26日1-2节

课题

Frontpage2000的基本操作

教学目的

通过上机操作，使学生掌握FrontPage2000中插入表格和建立框架的操作

教学重点

表格、单元格的属性设置；

框架的插入、保存、属性设置；

目标框架的设置

教学难点

框架的正确保存；

初始网页的更改

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、插入表格，并设置表格、单元格属性

2、创建指定框架并设置初始网页，修改框架属性

3、创建框架间的链接，修改目标框架

三、模仿制作课上案例：

我的地盘、c语言教程

教学后记

学生已逐渐入门，对网页制作的方法有一定程度的掌握，遇到问题稍经指点便能独立解决，实例完成情况也较好

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年4月28日3-4节

课题

第三章Frontpage的应用§3.6§3.7

教学目的

通过本次课的教学，使学生掌握网页中表单的作用及编辑方法，能够使用组件和DHTML以丰富网页效果

教学重点

理解表单的作用，掌握各个表单对象的编辑

组件、DHTML的使用

教学难点

表单对象属性的正确设置

教学方法

讲授

教学内容提纲

§6表单的使用

一、什么是表单

二、表单的设计

三、处理表单结果

§7组件、DHTML的使用

一、悬停按钮

二、移动字幕

三、站点记数器

四、横幅广告管理器

五、动态HTML

六、网页过渡效果

教学后记

1、通过教学，学生理解了表单的基本作用，掌握了设计表单的方法

2、内容涉及很多动态效果，学生兴趣很浓，课堂气氛和互动都较好

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月3日1-2节

课题

Frontpage2000的基本操作

教学目的

通过上机操作，使学生掌握表单、组件的应用，学会使用动态html效果，修改网页过渡

教学重点

自定义表单；

组件、Dhtml效果制作

教学难点

表单对象属性的正确设置

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、建立表单，插入各项表单元素

2、使用组件：

字幕、悬停按钮、横幅广告管理器

3、使用动态HTML效果

4、修改网页过渡效果

三、模仿制作课上案例：

网络课程账号申请

教学后记

1.绝大部分同学都能完成上机任务，基本操作掌握较好。

2.在运用一些组件时，很多机子预览无法显示效果，需要下载安装java虚拟机，因此进一步提醒学生今后的网页设计中应慎用java程序效果

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月5日3-4节

课题

§3.8第四章Dreamweaver的使用§4.1

教学目的

通过本次课的教学，使学生能够理解css的作用和特点，掌握使用css的三种方法；熟悉Dreamweaver的操作界面，掌握Dreamweaver的基本文件操作

教学重点

Css的作用、语法及使用方法

Dreamweaver的站点操作

教学难点

Css三种操作方法的不同

教学方法

讲授

教学内容提纲

§8网页的修饰

一、什么是css

二、CSS的作用

三、基本语法

四、CSS的建立

五、CSS的使用方法

§4.1Dreamweave的基本操作

一、Dreamweaver8的工作界面

二、建立新站点的方法

三、设置站点参数

四、管理站点

五、基本文件操作

六、设置页面属性

教学后记

1、初次接触css样式表，学生理解和接受的程度都较一般

2、学生对于Dreamweave的学习热情很高，基本操作掌握很快

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月10日1-2节

课题

Dreamweaver的应用

教学目的

通过本次上机操作，使学生能理解和掌握使用css的三种方法；熟悉dreamweaver的界面，掌握其基本操作

教学重点

站点的新建，页面属性设置

教学难点

三种CSS的创建及操作方法

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、三种CSS的创建及操作方法

2、Dreamweave站点的相关操作

3、Dreamweave的文件操作

4、设置页面属性

三、模仿制作课上案例

教学后记

1.对CSS的理解程度不够，三种操作方法相互混淆，出现的问题较多，课上仍需进一步讲解

2.Dreamweaver操作界面较Frontpage复杂，部分学生对操作环境不能熟悉和适应，今后的教学应注重两者之间的联系比较

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月12日3-4节

课题

第四章dreamweaver的使用§4.2§4.3

教学目的

通过本次课的教学，使学生掌握在dreamweaver中插入文本、图像以及使用超链接的方法，学会利用表格进行页面布局，并能合理设置其属性

教学重点

文字、图像与超链接的插入与编辑

表格的使用及属性设置

教学难点

锚点链接、空链接、脚本链接的理解制作

表格布局思想

教学方法

讲授

教学内容提纲

§2插入文字、图像与链接

一、文本及其操作

二、图像及其操作三、超链接的操作

§3插入表格和其他对象

一、表格及其操作

1.插入表格

2.插入嵌套表格

3.编辑表格

4.设置表格属性

5.格式化表格

6.排序表格

教学后记

因有之前学习FP的基础，学生对本次课的内容理解和接受都很快，同时每个知识点的讲解配合了相应的实例，教学效果较好。

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月17日1-2节

课题

Dreamweaver的应用

教学目的

通过本次上机操作，提高学生对dreamweaver的使用水平和熟练度，使学生掌握有关表格的操作，强化利用表格进行页面布局的思想

教学重点

文字、图像与超链接的插入与编辑

表格的灵活使用

教学难点

培养学生设计能力：

利用表格进行页面布局

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、在网页中插入文本、图像、超链接等基本对象，并修改属性

2、插入表格及嵌套表格，并设置表格属性

3、格式化表格

三、模仿制作课上案例

教学后记

很多同学在操作时沿袭了使用Frontpage存在的坏习惯，喜欢将页面和图片保存为中文名称，容易出现图片不显示，链接不成功等问题，以后在课堂上需要再次反复强调这一点

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月19日3-4节

课题

第四章dreamweaver的使用§4.3§4.4

教学目的

通过本次课的教学，使学生掌握鼠标经过图像、导航条、flash对象、插件等其他网页对象的插入；能进一步理解框架的概念及作用，学会框架的相关操作

教学重点

框架的相关操作

教学难点

框架初始页面的设置；

框架间的链接制作

教学方法

讲授

教学内容提纲

§3插入表格和其他对象

二、在网页中插入其他对象

1、鼠标经过图像

2、插入导航条

3、插入flash对象

4、插入Applet、ActiveX和插件

§4框架、层与网页布局

一、框架

（一）使用预设方式创建框架

（二）设计框架集

（三）保存框架和框架集文件

（四）修改框架属性

（五）设置框架集的属性

（六）通过超级链接控制框架内容

教学后记

1.教学过程顺利，按计划完成了教学任务

2.学生上台参与实例操作，有效调动了课堂气氛

安徽商贸职业技术学院教师授课教案

课程名称

静态网页制作

上课时间

2011年5月24日1-2节

课题

Dreamweaver的应用

教学目的

通过本次上机，使学生能够掌握dreamweaver中更多网页对象的插入，提高运用框架的操作技巧

教学重点

框架的相关操作

教学难点

框架初始页面的设置；

框架间的链接制作

教学方法

上机

教学内容提纲

一、复习课堂教学内容

二、针对课堂内容，指导学生实践

1、鼠标经过图像、导航条、flash对象、插件的插入

2、使用预设方式创建框架，并设计框架集后保存

3、通过超级链接控制框架内容

三、模仿制作课上案例

教学后记

通过上机，学生能够熟练地在网页中插入各种对象，掌握框架网页的制作。

但部分同学对于框架的保存及链接显示的目标框架仍不够清楚，经过当面指导，有较好的效果

安徽商贸职业技