网页制作教案.docx

1、网页制作教案Dreamweaver cs3 授课教案授课班级：12微机(2、3）班 授课教师：李敏 （一）学习领域初识Dreamweaver cs3学习单元第1章学习课时2课时主要行为（重点）操作界面部分行为开发工具多样性目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力界面的认识社会能力新环境的适应能力方法能力对照法 演示法教学方法演示法 讨论法教学活动教学过程及时间分配教学内容师生活动任务书在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。我的

2、第一张网页我叫张三丰，性别男，我是05网络技术班的同学，我爱计算机专业，我最爱的课就是网页设计，噍，这就是我设计的第一张网页。 下达任务，分析任务书组织教学（1分钟）组织学生、清点人数复习导课（4分钟）同学们，网页设计是一门非常有意思的课，它简单易学，但要学好它，还需要花上许多课外时间去多上机练习，多看别人设计的优秀网页；网页设计是一项新兴的职业，现在许多单位、部门都有网站，如我校不但有校园网，还有部门网站、班级网站，学好了网页设计，就多了一项就业的重要本领。告诉你，现在一名优秀的网页设计师，具有较高的待遇呢。问 答讲授新课（20分）Dreamweaver的基本概念1、了解Dreamweave

3、r与IE有什么区别？ Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。2、做网页只能使用Dreamweaver一种工具吗？ 常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强

4、大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。3、Dreamweaver最新版是多少？ Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。4、Dreamweaver与Firework、Flash有何关

5、系？ 它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。教师讲解演示、学生总结项目准备（5分）见第1章素材制定实施方案（5分）Dreamweaver中的文字处理与Word中的相似，也有字体、字号等概念。但有4点

6、需要大家区别：1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片2、字体只有1号到7号，7号最大，默认即3号3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替4、需要换行时用+，这时只是换行并没换段相互探讨，决定操作方法项目实施（35分）一、Dreamweaver的界面组成和基本使用1、启动、保存、关闭2、菜单与界面3、面板的使用 面板是对软件进行集中设置、制作的地方，最重要的面板是“属性”面板，如果不小心把它关闭了，单击菜单“窗口-属性”可以重新打开该面板。插入面板的功能与插入菜单相同，通过“窗口”菜单可以进行面板的打开或关闭。二、文字处理Dreamweaver中的文字处理

7、与Word中的相似，也有字体、字号等概念。但有4点需要大家区别：1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片2、字体只有1号到7号，7号最大，默认即3号3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替4、需要换行时用+，这时只是换行并没换段学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）1、Dreamweaver软件是干什么用的？2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？4、双击网页文件，会自动打开Dreamw

8、eaver软件吗？这点上与Word软件相同吗？学生评价、教师评价练习制作第一张网页作业1书面作业：要求：第一行写上作业日期、第几次，每题之间要空行，字迹清楚，不涂改。1、 Dreamweaver与IE有什么区别？2、 常用的网页制作软件有哪些？3、 Dreamweaver最新版是多少？4、 Dreamweaver与Firework、Flash有什么关系？5、 抄写Dreamweaver共20遍，并能默写和熟读。小组科学性（20）新颖性（20）趣味性（20）技巧性（20）内容（20）总分1234（二）学习领域初识Dreamweaver cs3学习单元第1章 学习课时2课时主要行为（重点）1、掌握

9、文字字体、大小、颜色、对齐、插入特殊字符等方面的设置2、掌握项目列表和编号列表的使用3、掌握设置网页的背景图像和在网页中插入图像4、常见HTML代码的含义部分行为文字字体、大小、颜色、对齐、插入特殊字符等方面的设置 常见HTML代码的含义目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力通过打开文件和调出属性面板命令，熟悉菜单栏的操作。通过链接选项改变链接文字的状态，熟悉CSS功能的应用方法。社会能力掌握不同软件的能力方法能力对比法 演示法教学方法任务驱动 演示法教学活动教学过程及时间分配教学内容师生活动任务书下达任务，分析任务书组织教学（1分钟）清点人数，做好记录复习导课（4

10、分钟）开始页面 启动Dreamweaver CS3后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等。 对于老用户可能不太习惯开始页面，可选择“编辑 首选参数”命令，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框，单击“确定”按钮完成设置。当用户再次启动Dreamweaver CS3后，将不再显示开始页面。 Dreamweaver CS3的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。 若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器”或“设计器”命令，页面则会显示不同的

11、界面风格。问 答讲授新课（20分）伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。教师讲解演示、学生总结项目准备（5分）见素材制定实施方案（5分）多文档的编辑界面 插入面板更完整CSS功能相互探讨，决定操作方法项目实施（35分）多文档的编辑界面 Dreamweaver CS3提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编

12、辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。插入面板 Dreamweaver CS3的“插入”面板在菜单栏的下方。更完整CSS功能 传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CS3就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“样式”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式，当用

13、户调整这些文字的属性时，会自动生成新的CSS样式。学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）练习文件学生评价、教师评价课后拓展小组科学性（20）新颖性（20）趣味性（20）技巧性（20）内容（20）总分1234（三）学习领域初识Dreamweaver cs3学习单元第一单元学习课时2课时主要行为（重点）通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练掌握创建站点根目录的过程。部分行为多站点管理目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力1.站点管理器 2.创建文件夹 3.定义新站点 社会能力创建本地站点的步骤 本地站点主要选项

14、的作用 方法能力演示法 对比法教学方法项目教学、任务驱动教学活动教学过程及时间分配教学内容师生活动任务书下达任务，分析任务书组织教学（1分钟）清查人数，组织课堂复习导课（4分钟）如果某网页中用到图片a1.jpg，后来你把图片的名字改为a2.jpg了，这样打开网页时还能正确显示该图片吗？如果我们在DW的站点管理器中更改图片文件名，则网页中有关该图片的文件名也为自动更新，这就是使用站点管理的最大好处。问 答讲授新课（20分）1、什么是站点？ 站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。建立站点时，我们一般在自已

15、的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。2、站点的典型文件结构3、如何建立一个空站点例：在D盘上建立自己帐号为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”操作步骤：第一步：在D盘上建立文件夹第二步：在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片第三步：在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录4、如何把一个已有目录定义为一个站点例：首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲

16、的步骤，把该目录定义为一个站点，站点名为“祖国腾飞”5、什么叫首页(主页)一个网站往往有许多网页组成，网页之间相互链接，其中第一页网页叫首页，也称主页。首页的文件名一般为index.htm，部分系统规定首页为default.htm。当首页命名符合系统要求时，在浏览网页时可以省略首页文件名，如 就表示 就表示 6、使用站点管理器定义完站点后，就可以使用站点管理器来管理站点了。显示站点面板：单击菜单“窗口-站点”。我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。练习一：下载“祖国腾飞”网站，解压缩，定义一个站点指向该

17、目录。在站点根目录中新建文件夹“files”和“other”，把根目录下除首页外的其他网页文件移动到“files”目录，其他文件移动到“other”目录。教师讲解演示、学生总结项目准备（5分）PPT课件制定实施方案（5分） 打开站点 编辑站点 复制站点 删除站点 导入和导出站点相互探讨，决定操作方法项目实施（35分）1.站点管理器 站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。2.创建文件夹 建立站点前，要先在站点管理器中创建站点文件夹。（1）在站点管理器的右侧窗口中单击选择站点。 （2）通过以下两种方法新建文件夹。 选择“文件 新建文件夹”命令。 用鼠标右

18、键单击站点，在弹出的快捷菜单中选择“新建文件夹”命令。 （3）输入新文件夹的名称。3.定义新站点 建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS3中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS3中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作

19、业布置（2）学生评价、教师评价小组科学性（20）新颖性（20）趣味性（20）技巧性（20）内容（20）总分1234（四）学习领域初识Dreamweaver cs3学习单元第一单元学习课时2课时主要行为（重点）网页文件头设置部分行为通过刷新命令，熟练掌握如何使用该命令制作网页自动刷新效果。目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力网页文件头的相关工具和管理社会能力开发不同的网站方法能力对比法 教学方法演示法 讨论法教学活动教学过程及时间分配教学内容师生活动任务书下达任务，分析任务书组织教学（1分钟）清查人数，组织人数；复习导课（4分钟） 今天，我们来学习网页文件头的相关工

20、具，方便我们更好的管理网站。问 答讲授新课（20分）1. 插入搜索关键字2. 插入作者和版权信息3. 设置刷新时间4、设置描述信息 5、设置页面中所有链接的基准链接6、设置当前文件与其他文件的关联性教师讲解演示、学生总结项目准备（5分）教材中所有素材页面欣赏。项目实施（35分）1.插入搜索关键字 在万维网上通过搜索引擎查找资料时，搜索引擎自动读取网页中标签的内容，所以网页中的搜索关键字非常重要，它可以间接地宣传网站，提高访问量。但搜索关键字并不是字数越多越好，因为有些搜索引擎限制索引的关键字或字符的数目，当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。一般情况下，关

21、键字是对网页的主题、内容、风格或作者等内容的概括。2.插入作者和版权信息 要设置网页的作者和版权信息，可选择“插入记录 HTML 文件头标签 Meta”命令，启用“META”对话框。 3.设置刷新时间 要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。 （1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录 HTML 文件头标签 刷新”命令，启用“刷新”对话框。 （2）在“刷新”对话框中设置刷新时间。4.设置描述信息 搜索引擎也可通过读取 标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索

22、到网页。设置网页说明信息的具体操作步骤如下。 （1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录 HTML 文件头标签 说明”命令，启用“说明”对话框。 （2）在“说明”对话框中设置说明信息。 5.设置页面中所有链接的基准链接 准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基准链接，但其他网页的链接与此页的基准链接无关。设置基准链接的具体操作步骤如下。 （1）选中文档窗口中的“代码”视图，将鼠标指针放在标签中，选择“插入记录 HTML 文件头标签 基础”命令，弹出“基础”对话框。 （2）在“基础”对话框中设置“Href”和“目标”两个选项。

23、6.设置当前文件与其他文件的关联性 部分的标签可以定义当前文档与其他文件之间的关系，它与 部分中的文档之间的 HTML 链接是不一样的，其具体操作步骤如下。 （1）选中文档窗口中的“代码”视图，将光标放在标签中，选择“插入记录 HTML 文件头标签 链接”命令，弹出“链接”对话框。 （2）在“链接”对话框中设置相应的选项。学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）课堂练习题 作业学生评价、教师评价课后拓展上机题 小组科学性（20）新颖性（20）趣味性（20）技巧性（20）内容（20）总分1234（五）学习领域文本与文档学习单元第2章学习课时2课时主要行为（重点

24、）网页中文本等元素对象部分行为网页中文本元素插入、项目列表创建目标群体12微机(2、3)班教学环境多媒体机房行为能力分析专业能力1 输入文本对象2 格式化文本3 创建项目列表4 列表的制作社会能力网页中文本格式方法能力学会文本属性的设置教学方法演示法 讨论法教学活动教学过程及时间分配教学内容师生活动任务书“奥运页面”制作“西湖页面”制作下达任务，分析任务书组织教学（1分钟）组织学生、清点人数复习导课（4分钟）网页元素有哪些二 引入新课：文本是网页元素一种，那么怎样实现文本元素插入问 答讲授新课（20分）第1节一、特殊字符的输入1、输入 等特殊英文字符单击“插入”工具栏上的“字符”面板。2、输入

25、等中文符号采用输入法中的软键盘3、输入空格（推荐使用全角空格）单击“插入”菜单-“特殊符号”-“不换行空格”按“Ctrl+Shift+Space”组合键单击“插入”工具栏上的“字符”面板上的“不换行空格”按钮。把中文输入法切换到全角模式，输入全角空格4、插入日期和时间。单击“插入”工具栏上的“常用”面板上的“日期”按钮。练习一：输入以下内容，以“1.htm”保存在桌面上。特殊符号： 中文符号：现在时间：2006-02-22第2节二、列表的制作列表分为无序列表（项目列表）和有序列表（编号列表）；各个列表项之间没有顺序级别之分时选无序列表，否则选有序列表 。制作方法：第一步：先输入各个项目，每个项

26、目成为一段（一个项目输入完成后，要按回车键，不能使用SHIFT回车）第二步：选中要转换为项目列表的所有段落第第四步：如果要实现多级(嵌套)的项目列表，可单击“属性”面板上的“缩进”命令练习二：输入以下内容，以“2.htm”保存在桌面上。 电脑专业 o 网络技术 1. 网络1班 2. 网络2班 o 信息技术 3. 信息1班 4. 信息2班 o 电脑维护 美术专业 工艺绘画 广告设计 操作提示：第一步：输入“电脑专业”等11行，每行按回车，不能用SHIFT+回车第二步：全部选中，单击“属性”面板中的无序列表按钮第三步：选中“网络技术电脑维护”7个段落，选“属性”面板中的缩进按钮第四步：同样方法让“

27、网络1班”等班级缩进第五步：选中“网络1班、网络2班”，单击“属性”面板中的有序列表按钮，使其变为有序列表有时设置好项目符号后，再打进去的字也变成项目符号了，解决这个问题的方法是，在设置项目符号前，先把后面的字输入几字，再去设置项目符号。 教师讲解演示、学生总结项目准备（5分）见第3、4章素材制定实施方案（5分）1、 导入文本2、 编辑文本3、 项目列表4、网页编辑相互探讨，决定操作方法项目实施（35分）输入以下内容，以“a.htm”保存在桌面上。 飘雨的季节 困惑的心情 羞涩的蓓蕾 年轻的你我 蓝色的小屋 i. 飘雨的季节 ii. 困惑的心情 iii. 羞涩的蓓蕾 iv. 年轻的你我 v. 蓝色的小屋 a. 飘雨的季节 b. 困惑的心情 c. 羞涩的蓓蕾 d. 年轻的你我 e. 蓝色的小屋 5. 飘雨的季节 6. 困惑的心情 7. 羞涩的蓓蕾 8. 年轻的你我 蓝色的小屋学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）文字的属性设置合理。学生