网页制作教案

第一篇：网页制作教案

第一节制作简单的网页

（一）教学对象分析

学生在学习本内容前，已经学习了利用Word制作简单的网页，并且初步掌握了制作网页的一般流程及基本操作，具有进一步学习的能力。

（二）教学目标

1、了解Frontpage的界面组成及基本功能。

2、掌握在Frontpage中编辑文字、插入图像的方法。

3、掌握在Frontpage中设置电子邮件超链接的方法。

4、培养学生在获取信息的能力，使学生学会利用计算机和网络搜集与准备网页素材。

5、培养学生的知识迁移能力。

（三）教学重点

利用Frontpage制作简单的网页

（四）教学方法和手段

教学方法：以学生自学为主，教师辅导为辅。教学手段：多媒体网络教学。

（五）教学过程

1、创设情境，导入新课：

展示几幅优秀的网页作品，激发学生学习专业网页制作软件的愿望。Frontpager 功能主要体现在：

1、网页编辑功能。

2、网站管理功能。

一、启动Frontpage i.ii.启动Frontpage Frontpage窗口组成

二、用Frontpage制作网页

1、输入文字

2、设置字体、字号

3、插入剪贴画

4、创建电子邮件超链接

三、保存网页

四、预览网页反馈操作情况情况

第二节插入表格

（一）教学目标

了解Frontpage中使用表格的作用。掌握在Frontpage中插入表格的方法。能熟练在表格中输入文字、插入图片。

（二）教学重点

在Frontpage 中利用表格组织网页结构。

（三）教学过程

导入新课，表格是网页中经常使用的一种形式，表格里不仅可以存放文字、图像等数据，还可以作为组织网页内容的框架，使网页整齐、美观。

新课讲授：

1、插入空表格

2、在表格中插入图片

3、设置图片属性

4、输入文字

5、设置表格属性

6、插入表格标题

7、保存网页、预览网页本课总结

第三节创建表单

（一）教学目标了解表单的功能。

掌握在Frontpage中创建表单的方法。掌握在Frontpage中插入表单域的方法。

（二）教学重点表单网页的结果处理。

（三）教学过程

复习

1、如何制作图文并茂的网页？

2、表格在网页中的主要作用？

3、在网页中插入表格有几种方法？导入新课、创设情境

展示几幅含有表单域的网页作品，例如调查表、申请表、提问：表单与表格的异同点？讲授新课

一、利用表单网页向导创建表单

1、建立表单

2、修改表单

3、处理表单结果

4、利用表单确认模板制作表单确认页面

二、制作网页背景反馈操作情况本课总结

课后任务：利用菜单栏中的命令在网页中插入表单域。

第四节利用框架制作首页

（一）教学目标了解框架的功能

掌握在Frontpage中使用框架的方法。掌握在Frontpage中建立超链接的方法。

（二）教学重点利用框架制作首页

（三）教学过程

复习：

1、如何制作表单页？

2、表单的主要作用？

导入新课、创设情境：展示模范的网页作品，激发学生学习的兴趣。讲授新课：

一、利用框架制作首页

1、新建框架网页

2、设置右框中的初始网页

3、保存网页

4、建立左框中的网页

二、建立超链接

二、制作网页背景保存网页、游览网页反馈操作情况本课总结

课后任务：练习其他几种超链接方式。宛善网页。

第五节站点管理

（一）教学目标了解站点的基本知识。

掌握利用Frontpage建立站点的方法。掌握向站点中导入网页的方法。

（二）教学重点导入超链接

（三）教学过程复习：

导入新课、创设情境：Frontpage不仅具有强大的网页编辑功能，而且具有强大的管理站点的功能。讲授新课：

一、建立站点

二、导入网页

三、导入超链接本课总结

第六节发布站点

（一）教学目标了解发布站点的一般流程

（二）教学重点

把站点发布到因特网上是本节的重点。

（三）教学过程复习：

导入新课、创设情境：展示因特网上的优秀个人网站。讲授新课：

一、把站点发布到本机

二、测试网站的表单功能

三、把网站发布到因特网上（介绍）本课总结

第一讲网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20

第一讲网页设计概述

【教学内容】

讲解网页设计的相关术语及网站制作的基本流程。【教学目的】

使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】

网页设计中的若干术语。【教学难点】

理解网页设计中的若干术语。【教学方式】

讲授式、讨论式、案例分析式。【教学参考】

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《Internet 网页工场》Wittime工作室重庆出版社。

3、《WEB网站设计》Joel Sklar著高等教育出版社。

4、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】

1.1 WWW和URL 1.1.1 Web的起源

Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构

Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式

在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式

协议://主机名或IP地址：端口号/路径名/文件名

1.2 IE5的使用

Web浏览器是浏览Internet资源的客户端软件

在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等

1.2.1 IE5的界面 1.2.2 IE5的使用

列表标志的使用。【教学方式】

讨论式、案例分析式、练习式。【教学参考】

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《WEB网站设计》Joel Sklar著高等教育出版社。

3、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】

2.1 HTML文档的基本结构

2.1.1 HTML语法

1、双标记

语法：

<标记>内容

2、单标记语法：<标记> 最常用的单标记是

3、标记属性语法

<标记

属性1 属性2 属性3 … > 例子

4、注释语句格式

例子

2.1.2 HTML文档的基本结构【课后小结】

通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。

第三讲 HTML的文本、图片与超级链接标志

【教学内容】

讲解HTML标准中的文本、图片与超级链接标志【教学目的】

* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。

< EM>......，强调文字，通常用斜体。

< STRONG>......，特别强调的文字，通常用黑体。

......，以等宽体显示西文字符。

......，使文字大小相对于前面的文字增大一级。

......，使文字大小相对于前面的文字减小一级。^......，使文字成为前一个字符的上标。_......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。2.2.6

文本修饰 2.2.7

预格式化文本使用预格式化标记

不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符

一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行文本强制换行

不换行 2.2.10 插入水平线使用

标记

属性：Width，Size，Align，Noshade，color 2.2.11 使用列表

1、无序列表

列表条目1
列表条目2......

2、有序列表

列表条目1
列表条目2......

3、定义列表

列表条目1: 条目1的说明
列表条目2: 条目2的说明 ……

...... 2.4.4 图像地图【课后小结】

本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。

第四讲 HTML表格、表单与框架标志

【教学内容】

讲解HTML中制作表格、表单与框架的标志。【教学目的】

使学生掌握简单表格、表单与框架的制作。【教学重点】

* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】

* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。

* 理解表单中相应元素对应标志及属性的含义。【教学方式】

案例分析式、项目教学【教学参考】

1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《WEB网站设计》Joel Sklar著高等教育出版社。

3、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】

2.5 插入表格

2.5.1 在网页中插入表格

表格的基本构成元素：表头，单元格，列，行

FrameSpacing=“2“

BorderColor=”#008000“ >

2.7.3 子窗口属性设置

2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分

（3）目录和标题，分为左上、左下、右三部分

（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

第一行第一列	第一行第二列
第二行第一列	第二行第二列

网页制作教案

第一篇：网页制作教案

第二篇：网页制作教案