文档库

最新最全的文档下载
当前位置:文档库 > 0603-静态网页制作(Dreamweaver)-制作系部网站后台管理主界面.

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

河北工业职业技术学院

《静态网页制作(Dreamweaver)》课程教案首页

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

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

系(部):计算机技术系教研室:网络技术教研室主任签字:

年月日

学习单元十二制作系部网站后台管理主界面

授课内容:制作系部网站后台管理主界面

学时:2学时(90分钟)

教学目标:

◆知识目标:

?了解框架的作用

?掌握框架和框架集的属性

◆技能目标:

?能够通过框架技术完成后台登录主界面的布局

?熟练通过表格、JavaScript结合CSS+DIV技术,完成后台主界面

中各框架页面的制作

?培养学生实际项目开发的能力

◆情感目标:

?培养学生团队合作意识

?培养学生的设计和创意能力,提升学生对于网页设计的热情

教学内容:

1、管理框架

?框架和框架集的概念

?操作框架和框架集

2、制作计算机系部网站后台管理主界面

?利用框架设计实现系部网站后台管理主界面整体布局

?实现系部网站后台管理主界面各框架页面的制作

教学重点:

?操作框架和框架集

?利用框架设计实现系部网站后台管理主界面整体布局

教学难点:

?利用框架设计实现系部网站后台管理主界面整体布局

教学方法和策略:

◆教学方法:

采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣

◆教学策略:

通过分组讨论、竞争的方式激发学生的学习热情

教学设计思路:

?通过教师演示项目“计算机系部后台主界面”,采用项目驱动法引导学生

明确本项目单元学习目标

?本项目单元设计到框架技术、JavaScript及CSS+DIV的综合运用,有一定

的难度和复杂度,因此教师在讲授过程中一定要确保学生思路清晰,明确

每个关键步骤的实施目标。

授课内容提纲:

一、复习旧课导出新课

1、课程回顾

(1)教师综述

在上一学习单元的课程中,我们完成了表格和表单知识的学习,实现了网站后台管理登录页面的制作。

(2)利用项目互动提问回顾知识点

●创建表单的方式有几种?

●常用表单控件有哪些?

●可以利用CSS对表单的哪些样式设置?

3)互动总结

教师通过与学生互动沟通,进行知识的归纳:

●创建表单的方法有两种,设计视图通过插入菜单完成,或者通过代码实现;

●常用表单空间有文本框、单选按钮、复选框、文件域、按钮等;

●主要采用Color、bgcolor、border等属性修饰表单的外观样式。

2、项目任务导入

1)教师利用互动提问引入新知课程回顾:

【约10分钟】

●学生在教师的

引导下进行知

识回顾。

●按教师的引导

进行分组,每组

尽量包含学习

差异比较大的

学生,平衡各组

的实力。

●学生根据教师

提出的问题进

行组内和组之

间的讨论,归纳

出讨论结论。

网站后台登录页面制作完成后,接下来的任务就是管理员对网站进行管理,那么我们通过什么渠道呢?

2)教师根据互动讨论进行总结

●需要建立一个后台管理页面,管理员通过它实现网站内容的资源管理。

●之前储备的知识已经不能完成后续功能的需求,需要引入新知识继续完成

后台管理页面的制作。

●本项目单元要学习的新内容是框架技术(点题),我们可以通过框架技术

简单快捷地实现后台管理主界面的布局。

3、教师首先简述本项目单元重点、难点,让学生有重点的听讲。

教师简述本项目单元的重点、难点,让学生有带着任务、有重点跟随老师授课。

(1)操作框架和框架集(重点、难点)

(2)利用框架设计实现系部网站后台管理主界面整体布局(重点、难点)

(3)各框架页面的制作(重点)

4、本学习单元总体目标(教师总结)

通过学完本项目单元,熟练通过操作框架和框架集及框架技术实现某学院系部网站后台主界面的布局及各框架页面的制作。

二、新课讲解

教师简述项目单元教学目标和教学内容,明确本项目单元教学重点和难点

教学目标

(1)操作框架和框架集(重点、难点)

(2)利用框架设计实现系部网站后台管理主界面整体布局(重点、难点)

(3)各框架页面的制作(重点)

教学内容

1、管理框架

?框架和框架集的概念

?操作框架和框架集

2、制作计算机系部网站后台管理主界面

?利用框架设计实现系部网站后台管理主界面整体布局●学生通过互动

方式回答教师

提出的问题。

●认真听取教师

的总结,明确本

项目单元的学

习任务。

●明确本项目单

元的总体学习

目标。带着目标

和任务学习。●对学习目标形

成一个初步地、

大致地、总体的

知识轮廓。

●明确本项目单

元的学习的重

点和难点,有侧

重点地进行学

习。

●做好重点知识

的笔记。

实现系部网站后台管理主界面各框架页面的制作

(一)工作任务一:计算机系部网站后台登录页面

场景设计:教师采用项目驱动法,展示【计算机系部网站后台管理主界面】项目案例,让学生对本项目单元实施完成后效果有一个总体认识,便于学生对知识形成体系,带着明确的任务学习。

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

1、知识准备(教师讲解)

为了完成网站后台主界面的制作,教师讲解框架技术的知识,并在讲解中强化重点和难点。

授课过程中注意学生的学习状态,对于有难度的知识要保证学生的学习兴趣和质量。

(1)框架和框架集的概念

●框架:将浏览器窗口划分为若干个区域,每个区域对应一个独立的网页文

件,多个网页同时显示在一个浏览器中。框架由框架集和单个框架构成。

●框架集:是框架的集合。框架集将浏览器横向或纵向分割成多个框架,并

且定义了框架的个数、框架的名称、尺寸及框架对应的网页的URL等。

●一个通过框架集生成的页面,如果分成了三个框架,加上框架集,将对应

四个网页文档。框架集是定义框架结构的HTML页面,框架是框架集的单

个区域,如下图所示。

(2)操作框架和框架集

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

●通过教师展示

的项目,加深对

项目单元的学

习目标的认识●明确本项目单

元的任务,带着

任务去学习。

新课讲解1:

【约30分钟】

1.项目引入思路:教师利用“计算机系网站后台主界面”项目入手,以此来讲解和学习框架技术。

2.思路指导:

通过框架管理后台管理主界面,并能CSS样式修饰和美化表单。

3.任务目标:

完成后台管理主界面的布局和美化。

●打开“框架”面板

选择“窗口”/“框架”命令,打开“框架”面板,通过“框架”面板方便地实现各个框架的选择,并显示不同框架的名称。

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

●创建框架和框架集

①教师通过两种方法演示创建框架的过程。

方法一:插入预定义框架集

方法二:创建框架集

②教师归纳两种方法的特点。

●选择框架和框架集

①选择框架

方法一:按住键盘上的“Alt”键,点击想要选择的框架,则选定框架。

方法二:在“框架”面板中,点击框架的外围,则可以选择框架。

②选择框架集

方法一:在设计视图下,点击框架集中任意两个框架的边界,则可选

定框架集。

方法二:在“框架”面板中,点击框架集的外围,则可定框架集。

●设置框架和框架集属性

①设置框架属性

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

②设置框架集属性

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

●跟着教师的思

路认真听取教

师的讲解。

●时刻保持与教

师的互动。

●思路跟教师保

持一致,保证学

习效果。

教师讲解操作过程中,强调学生对教师归纳总结的关键知识点进行记录。

●设置框架中的链接

①_blank:在新窗口中打开链接的链接的目标文件

②_parent:在当前框架的父框架打开链接的目标文件

③_self:在当前框架或自身窗口中打开链接的目标文件

④_top:在新窗口中打开链接的目标文件

⑤_blank:在当前窗口中打开链接的目标文件,并清除所有框架

⑥mainFrame、leftFrame、topFrame:创建框架时所指定的框架名称,如

目标设置为指定的框架名称,则在指定框架中打开链接的目标文件。

●保存框架或框架集页面

①保存框架集

方法一:选择【文件】/【保存框架页】命令,则可保存框架集。

方法二:选择【文件】/【框架集另存为】命令,则可保存框架集。

②保存框架

方法一:选择【文件】/【保存框架】命令,则可保存框架。

方法二:选择【文件】/【框架另存为】命令,则可保存框架。

2、项目实施一实施--

(1)设计实现系部网站后台管理主界面整体布局

●任务背景

某学院计算机技术系网站后台登录界面已经设计完成,需要完成后台登录主界面的设计和制作,本任务采用框架技术完成页面的布局。

●任务要求

通过设定框架集的属性,完成页面的框架集的设计。

●任务分析

①教师与学生采用互动的形式进行讨论。

②教师进行总结:从后台管理主界面的实用性和简易性进行,可采用“预定义框架集”中的“上方及左侧嵌套”,来完成框架集的设计。

●任务详解

③教师从分组中找到1-2名学生,利用框架技术完成系部网站后台管理主界面整体布局。

④教师在学生操作中进行适时的补充,协助学生操作,子项目完成后进CSS样式修饰表单也是本学习单元的重点和难点,教师应注意讲课的速度,及时把握学生的学习情况。

行子项目小结。

(2)实现系部网站后台管理主界面各框架页面的制作

●任务背景

框架集制作完成后,需要设计完成各框架页面的内容。

●任务要求

通过表格布局各个框架页。尽管主流的布局采用CSS+DIV技术实现,但是作为组织和显示数据比较方便的表格,拟通过此项目强化表格的应用。

●任务分析

由于后台管理主界面不直接面对普通用户,而是管理员使用的系统,因此设计过程中以简单实用为原则,而不过分追求页面的特效和样式,设计效果图如图6-43所示。

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

①顶部框架通过在PS中处理一张图片,显示整个页面的用途。

②左侧框架是主界面的主体部分,包含了后台管理主界面的所有功能。

而“折叠菜单”也是最常用的形式之一。由于折叠菜单实现过程中包含了JS和jQuery的技术内容,因此建议通过修改现有的网页特效实例来实现。

③右侧框架主要是左侧“折叠菜单”各导航项链接内容的显示。因此在

使用之初,列举了几个最常用的功能,方便管理员使用。

●任务详解

①教师从分组中分别找出两组学生,各完成顶部页面和右侧页面的制作。

②教师在学生操作中进行适时的补充,协助学生操作,学生制作完成后

进行简单小结。

③教师操作演示左侧页面的制作过程,制作中顺便复习现有JavaScript

或jQuery特效的使用方法。

测试查看页面在浏览器中的显示效果。

二、单元小结与项目单元任务

1.项目单元小结

●通过互动提问的方式总结归纳本项目单元内容,再次强调重点和难点单元项目归纳和总结【约5分钟】

教师采用互动提问的方式进行知识的归纳和总结,并强调

重点和难点知识。

●以“制作计算机系部网站”后台登录页面和后台主界面项目任务为驱动,

通过管理表格、管理表单、管理框架,结合CSS样式的知识完成了后台页

面的制作,使学生对于静态网站有一个全面的把握。再一次强调本项目单

元的重点和难点,尤其是CSS样式与表格和表单的配合使用提升网页效果。

2.项目单元任务

●完成教材“考核评价”部分表格题目的相关内容

●参照实践项目环节,以“三木企业网站”以小组为单位完成后台登录主界

面的制作

三、板书设计

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