网页制作教案

Dreamweaver cs3 授课教案 授课班级：12微机(2、3）班 授课教师：李敏 （一） 学习领域 初识Dreamweaver cs3 学习单元 第1章 学习课时 2课时 主要行为（重点） 操作界面 部分行为 开发工具多样性

目标群体 12微机（2、3）班 教学环境 多媒体机房 行为能力分析 专业能力 界面的认识

社会能力 新环境的适应能力 方法能力 对照法 演示法 教学方法 演示法 讨论法 教学活动 教学过程及时间分配 教学内容 师生活动

任务书 在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。 注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。

下达任务，分析任务书 我的第一张网页 我叫张三丰，性别男，我是05网络技术班的同学，我爱计算机专业，我最爱的课就是网

页设计，噍，这就是我设计的第一

张网页。

组织教学（1分钟） 组织学生、清点人数 复习导课（4分钟） 同学们，网页设计是一门非常有意思的课，它简单易学，但要学好它，还需要花上许多课外时间去多上机练习，多看别人设计的优秀网页；网页设计是一项新兴的职业，现在许多单位、部门都有网站，如我校不但有校园网，还有部门网站、班级网站，学好了网页设计，就多了一项就业的重要本领。告诉你，现在一名优秀的网页设计师，具有较高的待遇呢。 问 答

讲授新课（20分） Dreamweaver的基本概念 1、了解Dreamweaver与IE有什么区别？ Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。 2、做网页只能使用Dreamweaver一种工具吗？ 常用的网页制作软件有Dreamweaver和教师讲解演示、学生总结 FrontPage。Dreamweaver由美国 Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。 3、Dreamweaver最新版是多少？ Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。 4、Dreamweaver与Firework、Flash有何关系？ 它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。 项目准备（5分） 见第1章素材 制定实施方案（5分） Dreamweaver中的文字处理与Word中的相似，也有字体、字号等概念。但有4点需要大家区别： 1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片 2、字体只有1号到7号，7号最大，默认即3号 3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替 4、需要换行时用+，这时只是换行并没换段 相互探讨，决定操作方法

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

4、需要换行时用+，这时只是换行并没换段

项目评价（18） 评价标准（附表） 作业布置（2） 1、Dreamweaver软件是干什么用的？ 2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？ 3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？ 4、双击网页文件，会自动打开Dreamweaver软件吗？这点上与Word软件相同吗？ 学生评价、教师评价

练习制作第一张网页 作业1 书面作业： 要求：第一行写上作业日期、第几次，每题之间要空行，字迹清楚，不涂改。 1、 Dreamweaver与IE有什么区别？ 2、 常用的网页制作软件有哪些？ 3、 Dreamweaver最新版是多少？ 4、 Dreamweaver与Firework、Flash有什么关系？ 5、 抄写Dreamweaver共20遍，并能默写和熟读。

小组 科学性（20） 新颖性（20） 趣味性（20） 技巧性（20） 内容（20） 总分

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

任务书 下达任务，分析任务书

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

讲授新课（20分） 伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。 教师讲解演示、学生总结 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。

项目准备（5分） 见素材 制定实施方案（5分） 多文档的编辑界面 插入面板 更完整CSS功能 相互探讨，决定操作方法

项目实施（35分） 多文档的编辑界面 Dreamweaver CS3提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。 插入面板 学生操作完成项目，教师巡回指导

3.伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。 Dreamweaver CS3的“插入”面板在菜单栏的下方。

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

项目评价（18） 评价标准（附表） 作业布置（2） 练习文件 学生评价、教师评价

课后拓展

小组 科学性（20） 新颖性（20） 趣味性（20） 技巧性（20） 内容（20） 总分

1 2 3 4

（三） 学习领域 初识Dreamweaver cs3