《网页制作教案》由会员分享，可在线阅读，更多相关《网页制作教案（28页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver cs3 授课教案授课班级：12微机(2、3）班 授课教师：李敏（一）学习领域初识Dreamweaver cs3学习单元第1章学习课时2课时主要行为（重点）操作界面部分行为开发工具多样性目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力界面的认识社会能力新环境的适应能力方法能力对照法 演示法教学方法演示法 讨论法教学活动教学过程及时间分配教学内容师生活动任务书在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。我的第一张网页我叫
2、张三丰，性别男，我是05网络技术班的同学，我爱计算机专业，我最爱的课就是网页设计，噍，这就是我设计的第一张网页。 下达任务，分析任务书组织教学（1分钟）组织学生、清点人数复习导课（4分钟）同学们，网页设计是一门非常有意思的课，它简单易学，但要学好它，还需要花上许多课外时间去多上机练习，多看别人设计的优秀网页；网页设计是一项新兴的职业，现在许多单位、部门都有网站，如我校不但有校园网，还有部门网站、班级网站，学好了网页设计，就多了一项就业的重要本领。告诉你，现在一名优秀的网页设计师，具有较高的待遇呢。问 答讲授新课（20分）Dreamweaver的基本概念1、了解Dreamweaver与IE有什么
3、区别？ 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中的文字处理与Word中的
7、相似，也有字体、字号等概念。但有4点需要大家区别：1、一般只推荐使用宋体和黑体，需要其它字体时建议做成图片2、字体只有1号到7号，7号最大，默认即3号3、网页制作时可能无法输入多个连续半角空格，应该用全角空格代替4、需要换行时用+，这时只是换行并没换段学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）1、Dreamweaver软件是干什么用的？2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？4、双击网页文件，会自动打开Dreamweaver软件
8、吗？这点上与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分）伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。3.伸缩自如的功能面板 在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头，单击箭头便可隐藏或展开面板。如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。教师讲解演示、学生总结项
12、目准备（5分）见素材制定实施方案（5分）多文档的编辑界面插入面板更完整CSS功能相互探讨，决定操作方法项目实施（35分）多文档的编辑界面 Dreamweaver CS3提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。插入面板 Dreamweaver CS3的“插入”面板在菜单栏的下方。更完整CSS功能 传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地
13、整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CS3就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“样式”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。学生操作完成项目，教师巡回指导项目评价（18）评价标准（附表）作业布置（2）练习文件学生评价、教师评价课后拓展小组科学性（20）新颖性（20）趣味性（20）技巧性（20）内容（20）总分1234（三）学习领域初识Dreamweaver cs3学习单元第一单元学习课时2课时主要行为（重点）通
14、过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练掌握创建站点根目录的过程。部分行为多站点管理目标群体12微机（2、3）班教学环境多媒体机房行为能力分析专业能力1.站点管理器2.创建文件夹3.定义新站点社会能力创建本地站点的步骤 本地站点主要选项的作用 方法能力演示法 对比法教学方法项目教学、任务驱动教学活动教学过程及时间分配教学内容师生活动任务书下达任务，分析任务书组织教学（1分钟）清查人数，组织课堂复习导课（4分钟）如果某网页中用到图片a1.jpg，后来你把图片的名字改为a2.jpg了，这样打开网页时还能正确显示该图片吗？如果我们在DW的站点管理器中更改图片文件名，则网页中有关该图片的文件名也为自动更新，这就是使用站点管理的最大好处。问 答讲授新课（20分）1、什
