0603-静态网页制作Dreamweaver-制作系部网站后台管理主界面.

1、Dreamweaver网页设计教案河北工业职业技术学院静态网页制作(Dreamweaver )课程教案首页授课教师张亚静班级16网络订单1班学时授课日期主题或任务制作系部网站后台管理主界面课型考试授课地点O多媒体教室O企业O专业教室实训室知识目标:1、了解框架的作用 2、掌握框架和框架集的属性技能目标:1.能够通过框架技术完成后台登录主界面的布局教学目标2.熟练通过表格、JavaScript结合CSS+DIV技术，完成后台主界面中各框架页面的制作3.培养学生实际项目开发的能力素质目标:1、培养学生团队合作意识2、培学生的设计和创意能力，提升学生对于网页设计的热情1、管理框架框架和框架集的概念操

2、作框架和框架集2、制作计算机系部网站后台管理主界面重点学习内容利用框架设计实现系部网站后台难点重占.八、利操作框架和框架集利用框架设计实现系部网站后台管理主界面整体布局难点:管理主界面整体布局利用CSS设置表格样式实现系部网站后台管理主界面各框架页面的制作教学方法O理论讲授 O小组讨论项目教学任务驱动O参观教学O模拟教学 实验实训O演示教学O其他素材资源O文本素材O实物展示PPT幻灯片O音频素材O视频素材O动画素材图形/图像素材O网络资源O其他教学设计1、通过教师演示“计算机系后台管理主界 面”，采用项目驱动法引导学生明确本项目 单元学习目标2、 本项目单兀设计到框架技术、JavaScri p

3、t 及CSS+DIV的综合运用，有一定的难度和复杂度，因此教师在讲授过程中一定要确保学生思路清晰，明确每个关键步骤的实施目 标。学习评价行为表现 O课堂作业 O测验测试制作作品O其他作业题目1）完成教材“考核评价”部分的相关内容2）以“计算机系部网站”为任务驱动，完成后台主界面的制作3）实践项目环节，以“三木企业网站”以小组为单位完成后台登录主界面的制作双语教学Frameiframecolu mnrow style网络技术教研室主任签字:系（部）：计算机技术系教研室:.年月日学习单元十制作系部网站后台管理主界面授课内容：制作系部网站后台管理主界面 学时：2学时（90分钟） 教学目标:知识目标:

4、了解框架的作用 掌握框架和框架集的属性技能目标:能够通过框架技术完成后台登录主界面的布局 熟练通过表格、JavaScript结合CSS+DIV技术，完成后台主界面 中各框架页面的制作 培养学生实际项目开发的能力情感目标:培养学生团队合作意识培养学生的设计和创意能力，提升学生对于网页设计的热情教学内容:1、管理框架框架和框架集的概念 操作框架和框架集2、制作计算机系部网站后台管理主界面利用框架设计实现系部网站后台管理主界面整体布局 实现系部网站后台管理主界面各框架页面的制作教学重点:操作框架和框架集 利用框架设计实现系部网站后台管理主界面整体布局教学难点:利用框架设计实现系部网站后台管理主界面整

5、体布局教学方法和策略:教学方法: 采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣 教学策略: 通过分组讨论、竞争的方式激发学生的学习热情教学设计思路:通过教师演示项目“计算机系部后台主界面”，采用项目驱动法引导学生 明确本项目单元学习目标本项目单元设计到框架技术、JavaScript及CSS+DIV的综合运用，有一定 的难度和复杂度，因此教师在讲授过程中一定要确保学生思路清晰，明确 每个关键步骤的实施目标。授课内容提纲: 一、复习旧课导出新课课程回顾:1、课程回顾【约10分钟】(1)教师综述在上一学习单元的课程中，我们完成了表格和表单知识的学习，实现了网站后台管理登录页面的制作。(2

6、)禾U用项目互动提问回顾知识点创建表单的方式有几种?常用表单控件有哪些?可以利用CSS对表单的哪些样式设置?3)互动总结教师通过与学生互动沟通，进行知识的归纳:创建表单的方法有两种， 设计视图通过插入菜单完成， 或者通过代码实现;常用表单空间有文本框、单选按钮、复选框、文件域、按钮等;主要采用Color、bgcolor、border等属性修饰表单的外观样式。学生在教师的 引导下进行知 识回顾。按教师的引导 进行分组，每组 尽量包含学习 差异比较大的 学生，平衡各组 的实力。学生根据教师 提出的问题进 行组内和组之 间的讨论，归纳 出讨论结论。2、项目任务导入1)教师利用互动提问引入新知Drea

7、mweaver网页设计教案11网站后台登录页面制作完成后，接下来的任务就是管理员对网站进行管理，那么我们通过什么渠道呢?2）教师根据互动讨论进行总结需要建立一个后台管理页面，管理员通过它实现网站内容的资源管理。之前储备的知识已经不能完成后续功能的需求，需要引入新知识继续完成后台管理页面的制作。本项目单元要学习的新内容是 框架技术（点题），我们可以通过框架技术简单快捷地实现后台管理主界面的布局。3、教师首先简述本项目单元重点、难点，让学生有重点的听讲。教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。（1）操作框架和框架集（重点、难点）（2）利用框架设计实现系部网站后台管理主

8、界面整体布局（重点、难点）（3）各框架页面的制作（重点）4、本学习单元总体目标（教师总结）通过学完本项目单元，熟练通过操作框架和框架集及框架技术实现某学院系部网站后台主界面的布局及各框架页面的制作。二、新课讲解教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点教学目标(1)操作框架和框架集（重点、难点）利用框架设计实现系部网站后台管理主界面整体布局（重点、难点）各框架页面的制作（重点）教学内容1、管理框架框架和框架集的概念操作框架和框架集2、制作计算机系部网站后台管理主界面利用框架设计实现系部网站后台管理主界面整体布局学生通过互动 方式回答教师 提出的问题。认真听取教师 的总结，

9、明确本 项目单元的学 习任务。明确本项目单 元的总体学习 目标。带着目标 和任务学习。对学习目标形 成一个初步地、 大致地、总体的 知识轮廓。明确本项目单 元的学习的重 点和难点，有侧 重点地进行学 习。做好重点知识 的笔记。实现系部网站后台管理主界面各框架页面的制作（一）工作任务一：计算机系部网站后台登录页面场景设计：教师采用项目驱动法亠示【计算机系部网站后台管理主界面】项目案例，让学生对本项目单元实施完成后效果有一个总体认识，便于学生对知识形成体系，带着明确的任务学习。±n 4工通过教师展示的项目，加深对项目单元的学习目标的认识明确本项目单元的任务，带着任务去学习。新课讲解1:1

10、、知识准备（教师讲解）为了完成网站后台主界面的制作，教师讲解框架技术的知识，并在讲解中强化重点和难点。【约30分钟】1.项目引入思路:质量。(1)框架和框架集的概念框架：将浏览器窗口划分为若干个区域，每个区域对应一个独立的网页文件，多个网页同时显示在一个浏览器中。框架由框架集和单个框架构成。框架集：是框架的集合。框架集将浏览器横向或纵向分割成多个框架，并且定义了框架的个数、框架的名称、尺寸及框架对应的网页的URL 等。一个通过框架集生成的页面，如果分成了三个框架，加上框架集，将对应四个网页文档。框架集是定义框架结构的HTML页面，框架是框架集的单个区域，如下图所示。操作框架和框架集教师利用“计

11、算机系 网站后台主界面”项 目入手，以此来讲解 和学习框架技术。2.思路指导:通过框架管理后 台 管理主界面，并 能 CSS样式修饰和美化 表单。3.任务目标：完成后台管理主 界 面的布局和美化。框架1框架2框架3授课过程中注意学生的学习状态，对于有难度的知识要保证学生的学习兴趣和跟着教师的思 路认真听取教 师的讲解。时刻保持与教 师的互动。思路跟教师保 持一致，保证学 习效果。设置框架集属性也詢？血教师讲解操作过 程 中，强调学生对教师 归纳总结的关键 知 识点进行记录。射1輙m Plg(V)脱 W-打开“框架”面板选择“窗口” / “框架”命令，打开“框架”面板，通过“框架”面板方便 地实

12、现各个框架的选择，并显示不同框架的名称。创建框架和框架集 教师通过两种方法演示创建框架的过程。方法一：插入预定义框架集 方法二：创建框架集 教师归纳两种方法的特点。选择框架和框架集选择框架方法一：按住键盘上的“ Alt ”键，点击想要选择的框架，则选定框架。方法二：在“框架”面板中，点击框架的外围，则可以选择框架。选择框架集方法一：在设计视图下，点击框架集中任意两个框架的边界，则可选 定框架集。方法二：在“框架”面板中，点击框架集的外围，则可定框架集。设置框架和框架集属性设置框架属性设置框架中的链接_bla nk :在新窗口中打开链接的链接的目标文件 _pare nt：在当前框架的父框架打开链

13、接的目标文件 _self：在当前框架或自身窗口中打开链接的目标文件 _top :在新窗口中打开链接的目标文件 _bla nk:在当前窗口中打开链接的目标文件，并清除所有框架 mai nF rame、leftFrame、top Frame：创建框架时所指定的框架名称，如目标设置为指定的框架名称，则在指定框架中打开链接的目标文件。保存框架或框架集页面保存框架集方法一：选择【文件】【保存框架页】命令，则可保存框架集。方法二：选择【文件】【框架集另存为】命令，则可保存框架集。保存框架方法二:方法一：选择选择【文件】【文件】【保存框架】命令，则可保存框架。/【框架另存为】命令，则可保存框架。2、项目实施

14、一实施(1)设计实现系部网站后台管理主界面整体布局任务背景某学院计算机技术系网站后台登录界面已经设计完成，需要完成后台登录主界面的设计和制作，本任务采用框架技术完成页面的布局。任务要求通过设定框架集的属性，完成页面的框架集的设计。任务分析教师与学生采用互动的形式进行讨论。 教师进行总结：从后台管理主界面的实用性和简易性进行，可采用“预定义框架集”中的“上方及左侧嵌套”，来完成框架集的设计。任务详解 教师从分组中找到1-2名学生，利用框架技术完成系部网站后台管理CSS样式修饰表单 也是本学习单元的重点和难点，教师应 注意讲课的速度，及 时把握学生的学习情况。主界面整体布局。 教师在学生操作中进行

15、适时的补充，协助学生操作，子项目完成后进行子项目小结。(2)实现系部网站后台管理主界面各框架页面的制作任务背景框架集制作完成后，需要设计完成各框架页面的内容。任务要求通过表格布局各个框架页。尽管主流的布局采用 CSS+DIV技术实现，但是作为 组织和显示数据比较方便的表格，拟通过此项目强化表格的应用。任务分析由于后台管理主界面不直接面对普通用户，而是管理员使用的系统，因此设计 过程中以简单实用为原则，而不过分追求页面的特效和样式，设计效果图如图 所示。顶部框架通过在PS中处理一张图片，显示整个页面的用途。左侧框架是主界面的主体部分，包含了后台管理主界面的所有功能。而“折叠菜单”也是最常用的形式

16、之一。由于折叠菜单实现过程中包含了6-43JS和jQuery的技术内容，因此建议通过修改现有的网页特效实例来实现。 右侧框架主要是左侧“折叠菜单”各导航项链接内容的显示。因此在使用之初，列举了几个最常用的功能，方便管理员使用。 教师从分组中分别找出两组学生,各完成顶部页面和右侧页面的制作。 教师在学生操作中进行适时的补充,协助学生操作，学生制作完成后任务详解进行简单小结。教师操作演示左侧页面的制作过程,制作中顺便复习现有JavaScri pt单元项目归纳和总或jQuery特效的使用方法。测试查看页面在浏览器中的显示效果。结【约5分钟】1.项目单元小结通过互动提问的方式总结归纳本项目单元内容，再次强调重点和难点教师采用互动提 问 的方式进行知识 的 归纳和总结，并强调二、单元小结与项目单元任务重点和难点知识。以“制作计算机系部网站”后台登录页面和后台主界面项目任务为驱动,通过管理表格、管理表单、管理框架，结合CSS样式的知识完