一键复制
作为一位杰出的教职工，总归要编写教案，教案是教学活动的总的组织纲领和行动方案。写教案的时候需要注意什么呢？有哪些格式需要注意呢？以下是小编为大家收集的教案范文，仅供参考，大家一起来看看吧。
网页设计与制作教案篇一
第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布
第一节 站点的规划与创建
【教学目的与要求】 一、规划站点 二、创建一个站点 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2课时
【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、规划站点
web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。
本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。
1、规划站点结构 注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）
2、规划站点的浏览机制 一般可采用以下的方法： 创建返回主页的链接 显示网站专题目录 显示当前位置 搜索和索引
反馈（将网页创作者或网站管理员公布在网页上，或创建一个e-mail超级链接，以使用户能快速地将信息反馈到网站中）二、创建一个站点 步骤：
1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令）
2、选择一种站点模板或向导 3、单击“确定”按钮 三、站点的基本操作
1、打开站点：“文件”---“打开站点” 2、删除站点：
方法一：在windows资源管理器中删除一个站点
方法二：在frontpage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令
3、站点的设置
“工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第二节 利用表格进行网页布局
【教学目的与要求】
一、插入表格 二、单元格的基本操作 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识： 插入表格 重点知识：单元格的基本操作 【教学组织过程】2课时 2课时
1．上讲回顾 2．教授新知 【授课内容】
一、插入表格
1、单击常用工具上的“插入表格”按钮 2、单击“表格”---“插入”---“表格”命令
3、使用表格工具栏（“查看”—“工具栏”---“表格”命令）
4、由文本转换（“表格”—“转换”—“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记。
二、单元格的基本操作
1、选择单元格（“表格”—“选定”—“单元格”）ctrl：可选择不相邻的单元格 shift：选择多个相邻的单元格
2、插入单元格（“表格”—“插入”—“单元格”）
3、合并单元格（“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮）
4、拆分单元格（“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮）
三、填充单元格
1、文本与图像填充（“插入”—“图片”）
2、对齐文本与图像（“表格”—“属性”—“单元格”，“水平对齐方式”、“垂直对齐方式”）
3、修改单元格背景（“表格”—“属性”—“单元格”，“背景”）4、调整边框颜色（“表格”—“属性”—“单元格”，“边框”）
5、改变单元格尺寸（“表格”—“属性”—“单元格”，“指定宽度”、“指定高度”）
四、修改表格的行与列 1、选择行与列
2、插入行与列（“表格”—“插入”—“行或列”）
3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”）4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令）【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第三节 利用框架设计网页布局
【教学目的与要求】 一、认识框架网页 二、创建框架网页 三、框架网页的保存和打开 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：认识框架网页 重点知识：创建框架网页 【教学组织过程】2课时 2课时 1．上讲回顾 2．教授新知 【授课内容】
一、认识框架网页 1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架）
框架具有以下特性：
每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。每个框架窗口可以赋予一个名字，以便其他url作为目标调用。2、框架的使用场合（如邮箱、论坛）
通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。
框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节
二、创建框架网页 1、框架网页的创建
“文件”—“新建”—“网页”，选择“框架网页”选项卡 2、框架网页模板（10种）“设置初始网页” “新建网页”
三、框架网页的保存和打开
框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。1、框架网页的保存
“文件”—“保存文件”或“框架”—“保存网页” 2、框架网页的打开 “框架”—“在新窗口中打开网页”
四、框架网页的属性
1、框架网页的属性 “文件”—“属性” “框架间距”、“显示边框”
2、框架的属性 “框架”—“框架属性”
五、调整框架布局 1、调整框架窗口的大小（用鼠标拖动或在“框架属性”对话框中调整）2、框架的拆分
方法一：“框架”—“拆分框架”（按行或按列拆分）方法二：用鼠标拖动拆分（按ctrl键）3、框架的删除 “框架”—“删除框架” 六、目标框架
当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。
选择要设置超链接的文字或图像，“插入”—“超链接”，单击“目标框架”、“更改目标框架” 【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第四节 使用导航栏
【教学目的与要求】
一、定义导航结构 二、认识导航栏属性 三、创建导航栏 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：定义导航结构 重点知识：认识导航栏属性 【教学组织过程】2课时2课时 1．上讲回顾 2．教授新知 【授课内容】
一、定义导航结构
在网页内添加导航栏之前，先建立该站点的导航结构 “视图”—“导航”按钮 二、认识导航栏属性 “插入”—“导航栏”按钮
“父层”：创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。
三、创建导航栏（要在浏览器中才可看到实际导航栏效果）四、创建共享边框
用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。
右击编辑窗口，单击“共享边框”命令 练习二、利用框架设计一个企业网站的布局 要求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第五节 网页布局功能的应用
【教学目的与要求】 一、创建布局表格 二、绘制布局表格 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】： 基础知识：创建布局表格 重点知识：绘制布局表格 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、创建布局表格 1、创建布局表格
打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格
如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。
3、设置表格属性 插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。
提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。
练习三、使用布局功能设计学校网站
要求包括有以下内容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等 【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第六节 网页布局设计
【教学目的与要求】
一、文本的美化（“格式”—“字体”）
二、运用边框与阴影（“格式”—“边框与阴影”）1、设置边框 2、设置阴影
【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：文本的美化（“格式”—“字体”）
重点知识：运用边框与阴影（“格式”—“边框与阴影”）1、设置边框 2、设置阴影
【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、文本的美化（“格式”—“字体”）1、输入文本
2、美化文本（设置文本字体、字号）注：字符的大小共有6级，其中默认级别是3。3、设置文本效果 4、改变文本颜色 5、设置字符间距
二、运用边框与阴影（“格式”—“边框与阴影”）1、设置边框 2、设置阴影
三、使用列表（“格式”—“项目符号和编号方式”）1、添加项目列表。
项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种：实心黑点、空心圆圈和实心方块。
2、添加编号列表
在网页中的内容存在顺序关系时，可应用编号列表。3、添加定义列表
定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。（格式工具栏的“样式”—“定义的术语”，输入要词汇、术语，按回车键）
4、设置嵌套列表
要建立组合列表，可以先生成第1级列表，然后再生成第2级列表，依此类推。
建立组合列表的具体操作步骤如下：（1）先生成第1级列表（2）将光标移动到拥有第2级列表的第1级列表项目的末尾，然后按回车键。将出现一个空的列表行。
（3）单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“增加缩进”图标。（4）此时再按照建立列表的方法构造第2级列表。
（5）输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。（6）第2级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。
嵌套列表可以转变为可折叠大纲，这样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下：（l）按生成复合列表的方法构造好这个复合列表所有的列表级次。
（2）选择“格式”菜单中的“项目符号和编号方式”命令，打开“项目符号和编号方式”对话框，或者在列表中单击右键，从弹出的菜单中选择“列表属性”命令。
（3）在打开的对话框中，选中“启用可折叠大纲”复选框。（4）单击“确定”按钮。
练习四、设计一个介绍阳江风景及特产的网页
要求：设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第七节 网页装饰设计
【教学目的与要求】
一、添加图像 二、处理图像 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：添加图像 重点知识：二、处理图像 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、添加图像
在浏览器中，能处理的图片格式只有gif、jpeg格式和png格式等少数几种图片。
1、gif格式图片
gif格式最多能支持256种颜色（8位颜色）。可以具有透明、动画等特殊效果。
2、jpeg格式文件
jpeg格式可以处理高达1670万种颜色（24位颜色），所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。
插入本地计算机上的图像（“插入”—“图片”—“来自文件”，“从计算机选择一个文件”）插入web上的图像（“插入”—“图片”—“来自文件”，“从web浏览器来选择网页或文件”）
二、处理图像
1、剪裁图像（“图片”工具栏—“剪裁”按钮）
2、设置透明背景（“图片”工具栏—“设置透明色”按钮）三、添加文本（“图片”工具栏—“文本”按钮）四、保存图像
注：默认情况下，当前站点的图像文件保存在images文件夹中 五、运用特殊效果
1、调整图片的亮度和对比度 2、图片的翻转与旋转 3、图片的冲蚀和黑白处理 4、凹凸效果
六、设置图片对齐方式（“图片属性”—“外观”—“布局”—“对齐方式”）七、使用水平线
水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，则会使用图形来代替水平线以匹配主题。
1、插入水平线 2、设置水平线属性
八、修改网页背景（“格式”—“背景”）1、调整背景色彩 2、调整背景图案
九、创建交换图像（dw 2004）
1、插入交换图像（“插入”—“图像对象”—“鼠标经过图像”）“原始图像”、“鼠标经过图像”、“按下时，前往的url” 2、预览交换图像：f12 【课程小结】a 【作业】 1．5 课后练习书本课后练习作业
第八节 创建超链接
【教学目的与要求】 一、与当前站点的链接 二、与空白网页的链接 三、与电子信箱的链接 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：创建热点 重点知识：与电子信箱的链接 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、与当前站点的链接（“插入”—“ 超链接”，“搜索”当前站点的文件夹位置）
二、与空白网页的链接（“插入”—“ 超链接”，“创建一网页并链接到该网页”）
三、与电子信箱的链接（“插入”—“ 超链接”，“制作发送电子邮件的超链接”）
四、与web的链接（“插入”—“超链接”，“使用web浏览器来选择网页或文件”，alt+tab，则网页地址自动添加到url中）
五、修改链接颜色（“网页属性”—“背景”，“颜色”—“超链接”、“已访问的超链接”、“当前超链接”）
六、使用图像地图 1、创建热点 在图片中创建热点的具体操作步骤如下：
选中要建立热点的图片。图片被选中后，四周将出现8个控制方块，并且“图片工具栏”被激活。
在“图片工具栏”中，选择热点的形状的图标。可以选择长方形、圆形或多边形。
将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。
用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合热点绘制完毕，图片中将出现该热点的边框。打开“插入超链接”对话框，建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。
练习五、设计一个介绍一年四季风景的网站 要求：
用到嵌套列表、框架、超链接、图像热点等技术。【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第九节 表单设计
【教学目的与要求】
一、认识表单 二、生成表单 三、表单内容编辑 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：认识表单 重点知识： 表单内容编辑 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、认识表单
表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。
二、生成表单
1、表单的创建与表单字段的添加 “插入”—“表单” 2、表单向导
“文件”—“新建”—“网页”--“常规”——“表单网页向导” 三、表单内容编辑 1、单行文本框 2、滚动文本框 3、复选框 4、单选按钮 5、下拉菜单 6、按钮 7、图片 8、标签
9、隐藏的表单字段
四、验证性表单字段（“验证有效性按钮”）五、表单处理程序
右击表单，选择“表单属性”命令，提供了保存表单数据的三种不同处理方式：
1、发送到文件（单击“选项”按钮”，进行设置）2、发送到数据库 3、讨论表单处理程序 4、注册表单处理程序
5、自定义isapi、nsapi、cgi或asp脚本 练习六：制作表单
制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮 【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第十节 层及应用（dw 2004）
【教学目的与要求】
一、层概述 二、创建层 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：层概述 重点知识：创建层 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、层概述
层（layer）是一种 html 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 html 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。
二、创建层
方法一：“插入”—“布局对象”—“层”
方法二：“插入”工具栏—“布局”—“ 描绘层”，按住鼠标拖动 方法三：“插入”工具栏—“布局”，拖动“ 描绘层”按钮到文档窗口（按ctrl键，可绘制多层）
三、通过拖动周围的黑色调整柄控制层的大小 四、拖动层左上角的选择柄可以移动层的位置。
五、单击层标记可以选中一个层。（显示层标记的方法：“编辑”—“首选参数”—“分类”—“不可见元素” 六、显示层面板（“窗口”—“层”）1、层的隐藏与显示 2、层数 3、层重叠
七、层和表格之间的转换（在转换为表格之前，请确保层没有重叠。）“修改”—“转换”—“层到表格”
若要将表格转换为层，请选择“修改”—“转换”—“表格到层” 【课程小结】
【作业】
1．5 课后练习书本课后练习作业、第十一节 行为
【教学目的与要求】
一、行为概述 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识：行为概述 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、行为概述
行为是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。
下面给出一些常见事件的一些解释
onclick 单击
ondbclick 双击
onkeypre按键
onmousedown鼠标按下
onmouseout鼠标移出
onmouseover鼠标移上
onmouseup鼠标抬起。
实例：dreamweaver中网页折叠菜单的制作 第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入”，再选取“表格”，在“行”中输入1，在列中输入2，在单击“确定”。
把宽和高分别设为200px和30px 在两个单元格内分别输入 内容
第二步，在单元格内插入一个层。把宽和高分别设为100px和90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个单元格中输入内容
在层的属性栏中将“可视”设为“隐藏”，这样在打开网页时便看不见这个层
在“行为目标”中选择一个合适的浏览器，一般是选择“ie ”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层”，在弹出的窗口中选择 “layer1”，就是我们刚才添加的那个层了，再单击“显示”
接着单击“事件”下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”（onmouseover）。
再单击“+”按钮，选取“显示或隐藏层”，还是选取“layer1”，不过这次我们点击的是“隐藏”（hide）了，再确定。然后选择“事件”，单击“当鼠标移开”(onmouseout)。【课程小结】
【作业】
1．5 课后练习书本课后练习作业
第十二节 html语言基础
【教学目的与要求】
一、html语言概述 二、html文件基本架构 【教学方法与手段】
多媒体教学：借助多媒体手段，进行课堂理论教学；
启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；? 【教学重点与难点】：
基础知识： html语言概述 重点知识：html文件基本架构 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】
一、html语言概述
当我们畅游internet时，我们透过浏览器所看到的网站，是由html(hypertext markup language)语言所构成。html(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(tag)，将影像、声音、图片、文字等连结显示出来。
html标记是由 所括住的指令，主要分为 : 单标记指令、双标记指令(由，所构成)。html网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后( 为文件后缀保存)将html网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(server)上，对外发布信息。
二、html文件基本架构
文件开始 标头区开始...标题区 标头区结束
本文区开始 本文区内容第2篇：网页设计与制作教案
《网页设计与制作教案》
教师：系部：信息技术工程系专业：计算机应用班级：计机
湄洲湾职业技术学院
2008-2009学年第一学期
唐 俊 奇
电子信息
07（1）信息07（1）08（2）
-11.3 网页中所使用的技术
1.3.1 html语言和xml语言
1、html语言
øhtml只使用sgml中很小一部分标记
øhtml语言（hyper text markup language 超文本标记语言）
øhtml是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如frontpage、dreamweaver等实际上是自动生成html源代码的工具
2、xml语言
xml（extensible markup language）1.3.2 动态网页
1.3.3 多媒体技术的应用 1.3.4 web服务器端程序
1.4 制作网页的基本方法
1.4.1 制作网页的基本步骤
1、确定网页的内容
2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法
1.4.2 制作网页时要注意的问题
1、网页的标题要简洁，明确。
2、在文本中要使用水平线，以分割不同部分。
3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明，以便关闭图像时查看。
6、网页中引用的资料及商标（或图标），不能侵犯版权。 【课后小结】
通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。
第二讲 html的基本标志与格式标志
【教学内容】
讲解html基本标志对和格式标志。【教学目的】
使学生标志对与格式标志对的使用。【教学重点】
格式标志的使用。【教学难点】
-3* 使学生掌握超级链接标志的使用。【教学重点】
* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入。【教学难点】
* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《web网站设计》joel sklar著 高等教育出版社。
3、《html网页制作教程》材义语编著 铁道出版社。【新课内容】
2.2 插入文字
2.2.1 划分段落 格式
段落内容 2.2.2 插入标题文字 格式
标题内容 2.2.3 字号属性
设置基准字号： 网页内的其他文字，采用下面的格式来定义......size的有效范围是1（最大）到7（最小）。如果在size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性 两种方式
字符串 2.2.5 字体属性
2.2.6
文本修饰
......，文字以粗体显示。......，文字显示为斜体。......，显示下划线。
......，中心线贯穿文字。......，强调文字，通常用斜体。
......，特别强调的文字，通常用黑体。
-5 2.3.2 图片的属性
2.4 建立超级链接
2.4.1 指向一个目标
1、建立超级链接
字符串
2、为图片建立超级链接
3、链接到邮件和多媒体文件 链接到邮件
请与我联系 2.4.2 使用锚点
ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。ø建立锚点：
ø锚点文字 ø使超级链接指向已定义的锚点。ø文字 ø文字 2.4.3 新窗口和基准链接
1、打开新窗口
target="window-name">开一个新窗口
2、基准链接
在 与 之间设定
2.4.4 图像地图
图像地图的格式为：......2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志
-72.6 表单的应用
表单在web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。
2.6.1 创建表单
2.6.2 用定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮
2.6.3 定义下拉式菜单 你选修的课程：
计算机
英语
逻辑学
心理学 2.6.4 定义多行文字输入区域 请输入你的详细介绍：
文字
2.7 框架窗口
框架把窗口划分成几个子窗口，各个子窗口可以调入各自的html文档，最后形成充满整个窗口的网页。2.7.1 框架的定义 2.7.2 框架属性设置
bordercolor="#008000“ >
2.7.3 子窗口属性设置
2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。
网页设计与制作教案篇二
《信息技术》第三册
新课程标准教案
制作第一个网页(网页诞生了)
[教学目的]
1．通过浏览几个精彩网页，激发学生制作网页的学习兴趣。
2．熟练掌握启动frontpage 2000，熟悉frontpage2000文件菜单和常用工具的使用方法，新建“只有一个网页的站点”的操作步骤，从中认识frontpage2000的主界面，理解创建网站的意义．
3．网页的基本步骤，了解创建网页的过程学会在网页中输入文字、编辑文字、插入图片的方法，培养学生搜集、处理信息的能力。
4．作网页，培养学生学习制作网页的兴趣
[教学重点]
创建网站的过程，制作、编辑网页的基本方法。frontpage2000的窗口组成，[教学难点]
保存网页文件的方法，创建网站的意义
[教法设计]
演示、练习、讲授、启发引导、任务驱动
[导入新课]
在因特网上，我们可以用ie浏览器获取万维网中各种有价值的信息。同时看到许多
组织机构甚至个人都在万维网上拥有自己的网页。
让学生打开“网上邻居”的“网页”文件夹，浏览从网上下载的几个精彩网页。
你们有没有想过自己制作一个网页呢?把自己想要表述的内容，自己喜欢的作文、图片通过网页展示给同学或更多的朋友观看、欣赏、浏览。
[讲授新课]
制作第一个网页
网页制作不是一件简单的事情，而是按一定的顺序一步步进行的。请同学们回忆制作网页前应作哪些准备工作?
现在开始创建网页．我们选用功能强大，操作简单的工具frontpage 2000来制作。
一．启动frontpage 2000
进入到frontpage 2000界面后，比比看，这个软件与以前学过的word 2000与excel2000有什么相同与不同之处呢?(展示两软件界面的图片)
相同之处是：窗口相似，都有常见的标题栏、菜单栏和工具栏。不同的是：多了一个如教材的图2—2—2所示：1．编辑模式标签卡2．视图框。
二．建立只有一个网页的站点
为什么不新建一个网页，而要新建一个站点呢?
新建frontpage 2000中“个人站点”来启发引导．
一般来讲，网页文件总是存放在特定的站点中便于管理。因此，第一次制作网页之前需建立一个存放网页文件的专用站点。
教材p76试试看
对于初学者，通常选用“只有一个网页的站点”，今后根据需要可以向网站中添加新的网页。
看书p76页图2-2-6，仔细观察文件夹列表中唯一的一个网页名称是什么?(它是什么文件?)
index．htm被命名为主页，即进入网站时看到的第一个网页。
三．在主页面编辑模式下插入文字，插入图片。
我们知道文字，图片，动画是网页组成的基本元素。
教案设计：陡埠中学
彭荣兵
《信息技术》第三册
新课程标准教案
今天我们就在空白的主页中加入文字和图片，制作一个简单的网页。
打开主页文件，在右边主页页面编辑窗，中完成如下任务：
1．将准备好的介绍班集体的文字(主题和正文)插入(复制，粘贴)到页面中。
2．从计算机e盘里找到存储的“集体照”图片插入到网页中。
复习word中学过的文字编辑、排版，插入图片的方法。
问题：
学生插入图片后将其移动到合适的位置及调整图片大小．
1．老师引导，讲解；2．学生演示；3．学生相互讨论。
四．预览网页
编辑工作完成后就能观看制作的效果了．可以保存之后在ib浏览器中观看，也可以直接通过预览模式标签卡预览、浏览．请同学们参考教材的图示切换“预览”标签卡，预览制作的网页。
评选出网页制作的“速度奖”、“设计奖”、“美观奖”。
五、保存制作的网页
网页制作完成，需要将它保存下来．请同学们按照教材p78页上的操作步骤将网页文件分别存放在images和_private文件夹中。
今天用网页制作工具frontpage 2000创建了一个只有一个网页的站点，在主页中加入了文字和图片，制作了一个简单的网页．这只是网页制作的第一步，精彩的网页还要不断地加工、美化和修饰，例如：配上美丽的背景，加上好看的花边和配上动听的音乐，使之变得更完美。
本着以学生为主体的原则，我在本课的教学中设计先让学生浏览网上下载的精彩网页，借以激发他们学习制作网页的兴趣，然后从启动frontpage 2000开始，直至网页制作完成，老师只是一步步的启发引导，起着主导的作用，大部分时间都是学生自己动手动脑操作，整堂课课堂气氛活跃，收到了较好的教学效果。
教案设计：陡埠中学
彭荣兵
网页设计与制作教案篇三
第一节 制作简单的网页
（一）教学对象分析
学生在学习本内容前，已经学习了利用word制作简单的网页，并且初步掌握了制作网页的一般流程及基本操作，具有进一步学习的能力。
（二）教学目标
1、了解frontpage的界面组成及基本功能。
2、掌握在frontpage中编辑文字、插入图像的方法。
3、掌握在frontpage中设置电子邮件超链接的方法。
4、培养学生在获取信息的能力，使学生学会利用计算机和网络搜集与准备网页素材。
5、培养学生的知识迁移能力。
（三）教学重点
利用frontpage制作简单的网页
（四）教学方法和手段
教学方法：以学生自学为主，教师辅导为辅。教学手段：多媒体网络教学。
（五）教学过程
1、创设情境，导入新课：
展示几幅优秀的网页作品，激发学生学习专业网页制作软件的愿望。frontpager 功能主要体现在：
1、网页编辑功能。
2、网站管理功能。
一、启动frontpage .启动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标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
......，强调文字，通常用斜体。
......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。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 不支持框架的网页
很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。
网页设计与制作教案篇五
《网页制作》教案
潘有寅
一、说教材：
(一)教材分析：现在网络快速发展，广大的学生接触，使用internet的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用internet更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：在引导下学生学，练 dreamweaver制作网页的基本方法；第二课：让学生自己构思创意一个与自身相关的内容丰富的，页面美观的网页。
(二)教学目标：根据对教材的分析及学生实际情况，制定如下的教学目标：
(1)知识目标：
1、有关建设第一个网页的理念思想构成。
2、熟悉用dreamweaver制作网页的基本方法
3、超级链接是网页实现互相链接的基本方法
(2)能力目标：
1、培养学生的自学能力
2、创意构思能力
3、能制作出具有多重链接、多种素材、内容丰富的网页。
(3)情感目标：
1、教育学生正确认识和理解信息技术相关文化，伦理和社会问题，负责地使用信息技术。
(三)教学的重、难点：
根据对教材的分析及网页制作过程中的 实际情况，我认为要出制作内容丰富的网页，关键是要知道为什么要做网页，明确你做网页的目标。从培养学生运用信息技术综合能力这点出发，我认为如何引导学生进行思考定位、以及通过网页的制作这过程使学生对互联网有更深入的了解和运用，应该做为本节的难点内容。
二、说教法：
我采用了主体式教学模式，首先我创设了一个学习情景，让学生在情景中积极地完成任务，在任务完成阶段，我是一名帮助者、引导者，教学时注意观察学生，及时总结共性问题，个性问题留给小组学生讨论，不断激发学生的学习兴趣，以达到最佳教学效果。教学方式上①我采用了“任务驱动”教学方式，强调“实践出真知”的科学思想，授课时出示明确的，可操作性强的教学任务②分层教学，分类指导即两分：考虑学生计算机水平的差异，我把学生分为a、b两层，不同层次学生完成的学习目标不同，不同层次的学生教师指导方法不同。a层学生只要求完成知识目标，及能力目标第一个，b层学生同时要求能力目标的2、3 项。
三、说学法：
以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体，引导学生按以下两种方式来完成任务：①自学自练：通过学生自己在计算机进行操作从中获取对知识的正确理解，探求问题解决的方法；②协作学习：在实际操作中遇到的问题鼓励学生共同研究讨论、解决，使学生可以看到问题的不同侧面和不同的解决途径，开阔学生的思路，从而对知识产生新的理解。
四、说教学过程
教学环节
教师主导
学生主体
设计意图
导入新课：
同学们，互联网近年发展迅猛，大家都离不开网络了，那么同学们平时上网看的都是别人做的网页，如果自己也可以在网上看到自己制作网页，那中动手的满足感该有多好啊。这节的学习的目标就是网页的制作，准备共用两课时完成这部分内容，第一课时：自学自练dreamweaver制作网页的基本方法；第二课时： 自己设计制作网页。学生回答，明确学习目标 通过展示教师制作的学校网页，激发学生的学习兴趣，同时给出学习目标，让学生明确学习任务，做到有的放矢。
讲授新课第一课时： 再具体操作之前，同学们应先了解有关网页的一些相关知识。
阅读内容、分析，总结激发学生主体参与意识，培养学生阅读归纳知识的能力 理念的构成，寻找可模仿的同龄人制作的网页。找出网页内在的逻辑关系及理念。先模仿再创造。观察，调动的兴趣，明确学习的途径，方法，坚定学习成功的信心。通过展示学生们制作的班级网页，进一步激发学生的学习兴趣，同时坚定学生的学习信心，告诉学生通过自己的自学自练就可实现学习目标，进而培养学生的自学习惯。
总结或补充
1、网页制作方法很多，我们要学习的只是其中的一种；
2、无论哪种方法制作的网页，生成文 件扩展名均为html或htm，即对应是html语言
3、当浏览网页时，看到的不是语言代码而是语言代码所描述 的形象。总结 理解、记忆在上课的最佳时间内，让学生了解有关网页的相关知识，这利于学生的记忆
教师指导(分类指导)共性问题做小结
自学、自练协作学习培养学生自学能力，阅读、分析、解决问题实际操作，使学生成为学习的主体，学习的主人 小结 1解决操作中的共性问题
2指出超级链接是实现多网页链接的的基本方法：
3、保存文件为htm或html格式并预览 学生总结并提出问题，理解超级链接，预览自己的练习作品
解决操作中的问题，为下步学习扫清障碍，将本节的重点问题突出，通过预览对网页设计有一个初步设想
展示第二课时目标：
设计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以自己准备素材)
明确下课时学习任务，主动思考
通过一下课时的目标展示，使学生可以有更多时间去构思、创意，促动学生主动的去思考、去学习，引导学生习惯于创新，展示独特创意。
第二课时
展示第二课时目标：
计一个网页，内容丰富，突出主题，展示个性
多种素材综合运用(可以使用自己的准备素材)
明确任务
明确目标、任务，理清设计思路
指导(分类)
设计自己的网页
培养学生实际操作能力，综合运用知识能力在这过程中学生将会将上节自学的内容及以上学习综合运用，这对培养学生综合能力是相当有好处的。
通过局域网展示网页
学生推荐、自荐、评论
激发学生向上进取的学习态度，也可以使学生横向学习
课堂小结及课后要求
小结：找优缺点
思考、总结
进步引导学生学习
课后思考
1、让你的网页互相网上也被全世界人所浏览，那你该怎样实现
2、用dreamweaver制作的网页与我们平时所见的网页效果一样吗？
全班互动学习进一步拓展学生的学习思路，学习空间，加强自学、互学的能力
五、说板书设计：
考虑到信息技术学科教学的实际特点，所以在板书设计上我主要体现了以下三个特点。
突出简要内容
突出课时目标
设置“共性问题”、“总结解决”版面
板书设计 网页制作
第一课时：
网页文件说明
1、常见的网页制作工具
2、网页文件的扩展名为htm或html
3、浏览器所显示的不是语言代码而描述的形象
二、理念构成1、目标：熟悉用dreamweaver制作网页的基本方法
2、分类指导
共性问题
总结解决 第二课时目标
设计网页，内容丰富，突出主题，展示个性多种素材综合运用(可以自己准备素材)第二课时：
一、目标：
1、设计网页，内容丰富，突出主题，展示个
2、种素材综合运用(可以使用自己准备的素材)
二、设计制作：
共性问题
总结解决
三、展示、讨论
四、课后思考
网页设计与制作教案篇六
html第一节课
1.本课程主要目标
使用div+css布局网页
使用css美化网页
制作精美的商业网站 2.整体课程内容
3.本课程授课目标
3.1了解html整体课程 3.2 会使用html标签
3.3 了解并会使用 css 层叠样式表 3.4 div+css 做网页 3.5完成一个完整的网页 4.本章目标
会使用html的基本结构创建网页 使用文本相关标签排版文本信息 使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 5.本章重点
本阶段的重点是让学员熟悉html的基本结构、html中的一些基本标记以及标记的属性，以及html中的链接。6.本章难点
html基本标记及其属性 7.授课思路
以提问和演示的方式 边讲边演示
7.课程知识点讲解 7.1什么是html
超文本标记语言，是英文hyper text markup language的缩写 什么是超文本
就是指页面内可以包含图形、动画、声音、表格、链接等非文字元素。
什么是标记
就是我们要学的标签 也就是说标记语言是由一套标签组成的html发展史
7.2html基本结构
7.3用记事本创建网页的步骤
答：
1、打开记事本
2、输入html代码
3、保存为*.html文件，注意格式问题
4、打开网页预览效果 8.标签
8.1 标题标签
h1 h2 h3 h4 h5 h6 由大到小 标题内容
讲课思路：先演示h1的效果，在边演示边讲解h1-h6的变化，以及他们都是加粗字体
提问：有没有h7，然后演示，结果：和正常字体一样
8.2段落标签
p 格式
段落内容
讲课思路：先演示两段。
提问 ： 与正常见到的段落有什么不同
答；首行没有缩进，没有换行 可以先用空格代替 缩进学完样式后就会使用 接下来讲换行标签
8.3换行标签
代表换行
第一个但标签 书写方式 与双标签的区别 个数 及 /的位置
讲完换行标签后与段落标签对比，告诉他们根据空隙的大小区别什么是段落（间隙大）、什么是换行（间隙小）
8.4水平线标签
水平线标签
第二个单标签 是一条水平线
先演示 然后告诉他们可以改颜色---引出属性
解释什么是属性 就是用来修饰标签的 属于标签的性质 要写在标签里 书写写法 属性名="具体值" 并演示给他们
8.5 加粗、斜体标签
加粗的字 斜体的字
挑选部分字体演示
8.6 特殊符号
效果：不会显示在页面上 作用：1网页的作者 2注释部分代码 试用于找错的时候
空格 > >
首先敲一个空格 提问：是否有效果 再敲多个空格 提问；是否有效果 展示并引出空格特殊符号 " ©
先敲一个
问他们是否会显示在页面 然后再说出替代的 特殊符号
最后提问 有没有注意过版权符号 提示他们网站的最下面版权部分 最后演示写法
8.7 图片标签 思路---------标签与标签的属性----可以回顾 已经学习的标签 与 a标签的区别 双标签 单标签 标签属性
图像首先说明是单标签 然后介绍第一个属性 src 路径介绍：相对路径 上一级../ 上上级../../ 下一级 同级名/ 绝对路径
file:///c:/users/administrator/desktop/chapter01/ 第二个属性：alt 演示图片不显示的情况 第三个属性：title 书写并将鼠标放到图片，查看效果
第四个属性：width 单独设置宽度时的效果 高度成比例缩放
第五个属性：height 单独设置高度时的效果 宽度成比例缩放
如果想要具体的大小 则要同时设置宽和高
8.8 链接标签
先写一对 标签 然后再在里面写上href属性 告诉他们与图片的src属性相似，都是地址路径 再告诉他们>
演示相关链接 其中要注意，告诉他们没有在标签中间写内容 网页是不会显示任何内容的并演示
target="在哪里打开新链接（_self:本身窗口 _blank:新窗口打开链接）”> 文字 图片
讲解target 属性：是跳转位置，是本页面还是新的页面 并演示给他们
锚链接
结合之前的超链接 锚点就是大船停泊时抛出的锚，只有锚固定了，船舶才能停住 同理
只有设置锚点了超链接才能找到指定位置
锚点的写法 也是先写 只不过这次的属性是 name="" 就是给你的锚点起个名字
而且这时超链接的>
