《网页制作》教案 - 图文 

教法 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 过程安排 教学内容 教师活动 学生活动 设计意图 在学习过表格布局后，我们可展示框架页面以做一些常规的页面布局了，给学生，引发学但有些特殊效果我们却无法实生思考 导入新课 现。如图所示的网页：今天我(5min) 们来学习另一种页面布局技术——框架。 任务一 基本知识 (35min) 预习 并思考通过实例来框架页面布展示，引发局 学生思考特 殊效果如何实现，培养学生积极思考问题的能力 学生只有在一、基本概念：框架是一种网加强学生对框架认真听讲并布局的理解并进对概念进行牢固的掌握了页布局技术。 行简单操作 基本概念后才二、创建框架与框架集 消化理解 能为任务二的1、手动设计 学习打下基础 2、插入预定义框架 三、创建嵌套框架 四、选择框架和框架集 1、在编辑区中选择 2、在框架面板中选择 五、删除框架 六、保存框架与框架集文件 完成如下图所示的页面： 要求如下： （1） topFrame： 高：100px 表格：2x2，宽-788px，高-100px 高：100=75+25 宽：788=128+660 （2） 第一行：Logo+Banner 第二行：当前页位置信息+导航栏 导航栏：1x7表格 宽：660px 高：25px 字号：9pt 行高：14pt （3） mainFrame： 表格：2x2 宽：788Px，高：400Px 将学生分7组，并引导学生分组讨论如何完成如图所示的效果 讨论如何才能实现如图所示的效果并总结 通过实例，培养学生分析问题、解决问题的能力。 任务二 实例操作 (40min)

边框：5px，间距：5px 表格：3x1 宽：788px，高：45px 边框：0px，间距：0px 四、框架基本概念 二、创建框架与框架集 课堂小结 (5min) 三、创建嵌套框架 四、选择框架和框架集 五、删除框架 六、保存框架与框架集文件 设计一系列框架型页面，然后将之实现。要求结合超链接的相关知识。 本次主要讲述框架和框架集布局页面，运用实例学生加深了对框架的理解，运用起来得心教学反思 应手。14高31班学生学习氛围待加强 课后作业 (5min) 实训课题 实训目标 实训重点 实训难点 框架布局实例分析 实训课时 2课时 4、 能掌握布局表格和布局单元格的基本操作。 5、 能在布局模式下对页面进行整体布局。 掌握布局表格和布局单元格的基本操作。 项目的实现

实训方法 实训准备 上机实训 教案、素材、案例、教材、计算机机房 16、 对照实习报告的要求，完成上机任务； 任务完成后及时要求教师考评； 完善实习报告，填写实训总结； 实训过程 实训要求 17、 18、 4、遵守实训纪律，不游戏，不睡觉，不高声谈论。 操作要求及步骤 步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。 步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。 步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。 步骤4 选择［窗口］菜单栏中［框架］命令。 步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。 任务一 步骤6 页面下方出现了“topFrame”框架的［属性］面板。对“top Frame”框架进行编辑。 利用框架排版 步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］ 面板，对“mainFrame”框架进行编辑。 步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面 板，对“leftFrame”框架进行编辑。 步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。 步骤10 弹出保存整体文件的对话框，为文件命名为“index.html”。 步骤11 对各个框架部分进行保存，为各个框架进行命名。 步骤12 单击F12，在浏览器中预览效果。 创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存在的Dreamweaver文件来创建。 实验内容： 步骤1 选择［修改］菜单栏中的［框架集］命令。 步骤2 根据需要在其子菜单中选择任意一个分割命令。 步骤3 若要删除一个子框架，将其边框拖至页面或其父框架之外即可。 填写实训总结，并上交实习报告。 剩余时间，可进行自主练习，内容不限，但不可违反上机纪律 本次实训学生需要的掌握的内容较多，对于框架布局的位置要准确掌握，难度较大

任务二 创建框架集 完善报告 自主练习 实训总结

课题 知识目标 3.3添加动画 教学课时 2课时 1、掌握在网页中添加各种动态元素 2、掌握Flash属性设置 1、学会区分源文件和影片文件格式 2、掌握在网页中插入各种Flash元素 3、能为网页添加音视频元素。 通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。 教学目标 能力目标 情感目标 教学重点 教学难点 添加flash的具体操作 规划一个多媒体网站导航条 1.教学场所：多媒体教室 2.教学设备：安装有Dreamweaver cs5软件的计算机 3.教学资料：辅助课件、多媒体教学软件 讲解法、任务驱动教学法 学法 教学过程 小组讨论法 教学资源 教法 过程安排 教学内容 试想网页中只有文字和图片，那么网页跟杂志报纸还有什么区别呢？动态元素能够更加丰富页面的效果，是网页是一大特色。 注意：不要把动态元素和动态页面划上等号。 教师活动 将本次课的作品展示给学生，学生在欣赏精美网页的同时思考如何完成该作品 学生活动 欣赏作品并思考 设计意图 通过作品来展示，引发学生思考如何实现，培养学生积极思考问题的能力 导入新课 (5min) 任务一 基本知识 (35min) 一、flash文件基本知识 教授新知识，为任1、Flash源文件：*.fla 务二的完成做准2、Flash影片文件：*.swf 备 二、添加flash动画文件 Flash动画是一种基于矢量格式的多媒体动画元件，它体积小，其扩展名为.swf。 Flash动画被广泛应用于网页中。 操作步骤： 1.光标定位 2.插入flash文件 3.保存、预览 吸收动画新知识 让学生吸收新知识，为后面的实例操作打下基础

三、添加flash按钮 Dreamweaver中内置了一些flash按钮，用户可以很方便将他们添加到网页中。 注意：在页面中添加flash按钮和flash文本之前必须先保存网页。 操作步骤： 1.光标定位 2.插入flash按钮 3.设置按钮属性 4.保存、预览 四、添加flash文本 插入—媒体—Flash文本 五、为网页添加音频 插入—媒体—插件 要求：制作如下图所示网页，插入三行一列表格，插入Flash动画要求动画大小宽高为400*300，第二行插入图片，第三行输入文字并排版，最后得到的结果如下图所示： 任务二 拓展训练 (40min) 课堂小结 (5min) 课后作业 (5min) 一、添加多媒体元素使页面具有动态效果 二、插入Flash按钮和Flashpaper 三、插入播放器 用Flash按钮或文本制作一个导航条，然后为页面添加背景音乐。