网页教案-11.doc

课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第9章 CSS美化授课时间第10周周一 5-6节教学时数2授课地点综-301授课班级11计应1班人数60课 题第9章 CSS美化2教学目标知识目标：1、掌握链接CSS的建立及使用2、握链接CSS的使用能力目标：1、掌握链接CSS的建立及使用2、握链接CSS的使用教学重点1、掌握链接CSS的建立及使用2、握链接CSS的使用教学难点握链接CSS的使用授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一1）选择器的嵌套任务驱动：演示实操分组5二2继承简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发，讲解CSS的继承。以操作为主结合多媒体演示及答疑10三应用CSS到网页中在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。我们在这里主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家能够掌握以下几个方面的内容：内嵌式 （写在head头部信息中） 行内样式 （写到html标记里面） 链接式 （适合多个页面使用） 导入样式 各种方式的优先级问题 行内样式内嵌式 链接式提问集体讲授点评10四利用外部链接样式统一下述网页的风格：以操作为主结合多媒体演示及答疑10五提问集体讲授点评10作 业利用外部样式表统一“青岛教育网”页面风格45课后小结课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第9章 CSS美化授课时间第10周周四 1-2节教学时数2授课地点综-302授课班级11计应1班人数60课 题第9章 CSS美化教学目标知识目标：1、掌握链接CSS的建立及使用2、握链接CSS的使用能力目标：1、掌握链接CSS的建立及使用2、握链接CSS的使用教学重点1、掌握链接CSS的建立及使用2、握链接CSS的使用教学难点握链接CSS的使用授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一CSS综合练习，完成如下页面的美化，效果如下：提问集体讲授点评5二 提问集体讲授点评15三提问集体讲授点评10四任务驱动：演示实操分组10五更改CSS，实现下述风格任务驱动：演示实操分组5作 业完成上述综合练习45课后小结课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第10章 模板和库授课时间第11周周一 3-4节教学时数2授课地点综-302授课班级11计应1班人数60课 题第10章 模板和库教学目标知识目标：模板、库的创建、编辑、应用、修改，站点的更新。 如何合理的设置和定义模板的可编辑区域。能力目标：模板、库的创建、编辑、应用、修改，站点的更新。 如何合理的设置和定义模板的可编辑区域。教学重点模板、库的创建、编辑、应用、修改，站点的更新。教学难点如何合理的设置和定义模板的可编辑区域。授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一一般情况下： 网页较多 网站网页分为三级：首页目录页内容页 每个网页的头和尾是相同的可以利用已经做好的主页，快速实现分页的制作提问集体讲授点评5二在制作中，可利用模板来设计其相同部分，不同之处留为可编辑区域，待在具体制作网页时，再将具体内容填入可编辑区域。 1. 制作模板 1) 基本元素的制作 2) 插入模板区域n 创建可编辑区域n 创建重复区域2. 创建基于模板的网页文档 3. 修改模板并更新 提问集体讲授点评5三库是一种用来存储想要在整个网站上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。这些元素称为库项目 提问集体讲授点评5四 使用库的意义：如果使用了库，就可以通过改动库更新所有采用库的网页，不用一个一个的修改网页元素或者重新制作网页。使用库比使用模板，有更大的灵活性。 任务驱动：演示实操分组15五图像管理颜色管理链接管理Flash管理Shockwave管理视频管理脚本管理模板管理库管理任务驱动：演示实操分组15作 业利用模版设计自己的二级或三级网页45课后小结课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第11章 表单授课时间第11周周四 1-2节教学时数2授课地点综-302授课班级11计应1班人数60课 题第11章 表单教学目标知识目标： 创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表等多种表单元素的方法，以及各种表单对象属性的设置能力目标：掌握表单的基本概念掌握表单的前台，后台教学重点表单前台的制作教学难点表单前台的制作授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一了复习表单在网页制作中的地位案例综述 表单是一个专业网站必不可少的内容，也是一个网站是否具有交互功能的重要体现。 提问集体讲授点评5二表单的基本知识 表单包括两个部分： 一部分是客户端，通过HTML源代码实现，用于描述表单（如单选框，复选框，列表框，文本框等等）表单的外观； 包含： 表单 表单元素 另一部分则是客户端脚本或服务器端应用程序，它们是用于处理通过表达表单提交的信息。提问集体讲授点评15三提问集体讲授点评10四 在制作时先插入一个表单，做为这些对象的容器，然后再逐个地创建这些表单对象 表单对象在表单内的定位，我们则采用表格工具进行布局。 任务驱动：演示实操分组10五：任务驱动：演示实操分组5作 业完成该表单的制作 45课后小结课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第11章 表单授课时间第12周周一 34节教学时数2授课地点综-301授课班级11计应1班人数60课 题第11章 客户端表单验证教学目标知识目标： 创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表等多种表单元素的方法，以及各种表单对象属性的设置能力目标：掌握表单的基本概念掌握表单的前台的客户端验证教学重点表单的前台的客户端验证教学难点表单的前台的客户端验证授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一 表单是一个专业网站必不可少的内容，也是一个网站是否具有交互功能的重要体现。 提问集体讲授点评答疑5二Spry验证文本域 Spry验证表单是Dreamweaver CS3新增的功能。Spry验证表单在创建表单元素的同时又丰富了表单验证功能。 Spry验证文本域是一个文本域，该域用于在网站中输入文本时显示文本的状态，如有效或无效。 项目导向集体讲授10三11.4.4 Spry验证复选框 1.插入Spry验证复选框 将光标定位在需要插入验证选择的位置。 选择菜单栏“插入”|“Spry”|“Spry验证复选框 ”，或在“插入”面板的“Spry”类别中单击“Spry验证复选框 ”按钮。 完成“输入标签辅助功能属性”对话框，单击“确定”按钮。提问集体讲授点评答疑10四实例讲解完成下列表单的客户端验证项目导向集体讲授20五制作完整的前后台，前台客户端验证的表单提问集体讲授点评答疑作 业见课件45课后小结课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第12章使用层布局页面授课时间第12周周四 1-2节教学时数2授课地点综-301授课班级11计应1班人数60课 题第12章使用层布局页面教学目标知识目标：1、 理解并掌握层的特点 2、利用层来布局网页能力目标：1、理解并掌握层的特点 2、利用层来布局网页教学重点1、理解并掌握层的特点 2、利用层来布局网页教学难点掌握层在排版中的作用授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一DIV=division的缩写,层的意思 网页上面的一种标签。你可以把它看作是一个容器，用来放 等的提问集体讲授点评答疑5二AP DIV是absolute position div ，是div层定位的一种，是绝对定位。精确定位AP元素插入AP元素在AP元素中添加内容控制AP元素的大小AP元素的叠放次序普通div没有设置position属性的话默认为static状态。 项目导向集体讲授10三提问集体讲授点评答疑10四将AP元素转换为表格n 问题：不是所有的浏览器都支持AP元素。n 解决方法：使用AP元素创建网页布局，然后将AP元素转换为表格。项目导向集体讲授20五提问集体讲授点评答疑25作 业见课件45课后小结学会利用层结构进行页面布局课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第12章使用spry布局页面授课时间第13周周一 3-4节教学时数2授课地点综-301授课班级11计应1班人数60课 题第12章使用spry布局页面教学目标知识目标：1、了解spry的基本概念2、使用spry布局页面能力目标：1、了解spry的基本概念2、使用spry布局页面教学重点、使用spry布局页面教学难点、使用spry布局页面授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一Dreamweaver CS3中的Spry功能由四个部分组成： Spry构件。 Spry验证表单。客户端表单验证 Spry XML数据显示。 Spry特效。提问集体讲授点评答疑10二插入Spry菜单栏 “插入”栏|“Spry”类型|“Spry菜单栏”按钮或 菜单栏“插入”|“布局对象”|“Spry菜单栏”或 “插入”|“Spry”|“Spry菜单栏”命令。 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。 。项目导向集体讲授15三Spry选项卡式面板1插入选项卡式面板 “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ”或 “插入”|“Spry”|“Spry选项卡面板 ”命令。对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。 提问集体讲授点评答疑10四Spry折叠式1.插入“Spry折叠式” 选择菜单栏的“插入”|“Spry”|“Spry折叠式”，或“插入”|“布局对象”|“Spry折叠式”命令，或在“插入”面板的“Spry”类别中单击“Spry折叠式”按钮。 对于插入到网页中的“Spry折叠式”，单击左上角的蓝色区域即表示选择了该“Spry折叠式”，进行编辑操作。 项目导向集体讲授5五提问集体讲授点评答疑5作 业参见课件45课后小结掌握利用层来布局页面课程教学教案课程名称Dreamweaver网页制作实例教程课 型专业课任课教师贺桂娇教学进度第13章行为授课时间第13周周四 1-2节教学时数2授课地点综-301授课班级11计应1班人数60课 题第13章行为教学目标知识目标：n 行为的概念及添加方法n 常用行为的添加 能力目标：n 行为的概念及添加方法n 常用行为的添加 教学重点n 行为的概念及添加方法n 常用行为的添加 教学难点n 行为的概念及添加方法n 常用行为的添加 授 课 提 纲序号内 容教学方法与手段时间安排(90分钟)一事件与动作 行为是动作和触发该动作的事件的结合体1. 事件n 事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。 2. 动作 n 动作其实是一段网页上的