网页设计教案1
运动操-游戏专用电脑
xxx
理实一体课程教师教案本
( 2009 —
2010 学年 第二学期)
xxx教案
课程名称 网页设计与制作
第一章 初识Dreamweaver8
§1、Dreamweaver8工作界面介绍
§2、Dreamweaver8新功能
第二章 Dreamweaver8基本操作
§1、利用Dreamweaver8创建站点
第 1 周
8 课时分配
授课教师 xxx
课题名称 课题序号
1-8
授课日期
课题总课时
2010年 2 月 24 日 至 2010年
2月 26 日
讲课:2 示范:4 练习:2 结合生产:理实一体化
授课班级 07计网大专(1)班 授课班级人数
39
教学目的
1、了解Dreamweaver 8的工作界面
2、了解Dreamweaver 8的新功能
3、了解如何利用Dreamweaver
创建站点
1、了解Dreamweaver 8的工作界面
重点与难点
2、了解Dreamweaver 8的新功能
3、了解如何利用Dreamweaver
创建站点
1、Dreamweaver 8的工作界面介绍
示范内容
2、Dreamweaver站点建立
实训课题图
或操作工序
安排
课程日安排(分课题操作教学安排)
课程名称
课题名称
授课课时
网页设计与制作
第一章 初识Dreamweaver8
§1、Dreamweaver8工作界面介绍
§2、Dreamweaver8新功能
4
授课教师
授课日期
xxx
2010年 2月 24 日
讲课:1 示范:3 练习: 结合生产:理实一体化
教学目的
1、了解Dreamweaver 8的工作界面
2、了解Dreamweaver
8的新功能
教学重点 了解Dreamweaver
8的工作界面
教学难点 了解Dreamweaver 8的工作界面
设备
(材料、工
具准备)
教程、试题汇编、计算机
工艺
规程
操作
要领
讲解
与
示范
巡回重点
及
注意事项
本单元主要介绍了Dreamweaver 8的工作界面,主要介绍了菜单栏、插入栏、文档工具栏、
文档窗口、属性面板、状态栏和功能面板组,以及Dreamweaver
8的一些新功能,其它对
于工作界面的掌握为本单元的重点。
布置
作业
掌握并熟悉Dreamweaver 8的工作界面
教学后记
及
改进措施
第 页
教 案 纸
教学环节及时间分
配、备注
师生活
动
教学内容
第一章 初识
Dreamweaver8
1、Dreamweaver8
工作界面介绍
2、Dreamweaver8
新功能
共四节课
第一节课
(45分
钟)
第二节课
(45分
钟)
1、 让学生初步认识Dreamweaver
8这个网页设计软件,介绍
Dreamweaver 8这个软件的主要功能:
Dreamweaver 8的可视化编辑功能
Dreamweaver 8
还提供了全面的编码环境
Dreamweaver
8还使用户可以使用服务器技术生成动态的、数据库
驱动的Web应用程序 (15分钟)
2、 让学生浏览一些优秀的网页,了解网页的基本结构。 (5分钟)
以上是这节课的讲解内容
3、详细向学生介绍Dreamweaver
8的工作界面(该部分为示范讲解操
作课)
Dreamweaver
8的工作界面,主要介绍了菜单栏、插入栏、文档工
具栏、文档窗口、属性面板、状态栏和功能面板组
1)菜单栏:
Dreamweaver 8中的菜单共有10个,即文件、编辑、查看、插入
、
修改、文本、命令、站点、窗口和帮助。(20分钟)
文件:主要用于对网页文档进行基本操作与管理
编辑:主要用来对网页文档进行编辑操作
查看:主要用来控件工作界面的显示方式
插入:该菜单包含了丰富的内容,利用它可以向网页文档中插入各
种网页元素
修改:具有对页面元素修改的功能
文本:主要用于设置所选文本的段落属性和文本属性 命令:主要用于录制、编辑命令、清理代码等一些操作,还可以设
置配色方案、创建网站相册等。
站点:主要用于对站点进行各种管理与编辑操作
窗口:主要用来显示和隐藏控制面板以及切换文档窗口
帮助:该菜单提供了各种帮助信息
4、 课堂小结(5分钟)
继续详细向学生介绍Dreamweaver
8的工作界面(该部分为示范讲解操
作课)
1、 2)插入栏
插入栏包含用于创建
和插入对象的按钮。插入栏中包含以下几个类
别:常用、布局、表单、文本、HTML、应用程序、Fl
ash元素、收藏夹。
(20分钟)
常用:该类别使用户可以创建和插入最常用的对象 布局:该类别可以插入表格、div标签、层和框架。还可以从三个
表格视图中进行选择:标准、扩
展和布局。
表单:该类别包含用于创建表单和插入表单元素的按钮
文本:该类别允许用户可以插入各种文本格式设置标签和列表格式
设置标签
HTML:该类别使用户可以插入用于水平线、文件头内容、表格、框
架和脚本的HTML标签
应用程序:该类别使用户可以插入动态元素
Flash元素:该类别使用户可以插入Flash元素
收藏夹:该类别使用户可以将插入栏中最常用的按钮分组和组织到
某一公共位置
第三节课
(45分
钟)
第四节课
(45分
钟)
3)文档工具栏
文档工具栏使用户可以
在文档的不同视图间快速切换:代码视图、
设计视图、同时显示代码和设计视图的拆分视图。文档工具栏
中还包含
一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选
项。(20分钟)
文档工具栏中包含:
显示代码视图
显示代码视图和设计视图
显示设计视图
文档标题:允许用户为文档输入一个标题,它将显示在浏览器的标
题栏中
没有浏览器检查错误:使用户可以检查跨浏览器兼容性
验证标记:使用户可以验证当前文档或选中的标签
文件管理:显示“文档管理”弹出式菜单
在浏览器中预览调试:允许用户在浏览器中预览或调试文档
刷新设计视图:在“代码”视图中进行更改后刷新文档的“设计”
视图
视图选项:允许用户为“代码”视图和“设计”视图设置选项
可视化助理:使用户可以使用不同的可视化助理来设计页面
2、 课堂小结(5分钟)
继续详细向学生介绍Dreamweaver
8的工作界面(该部分为示范讲解操
作课)
1、 4)文档窗口(15分钟)
文档窗口显示当前文档
可选择下列任一视图:
“设计”视图
“代码”视图
“代码和设计”视图
5)属性面板(15分钟)
属性面板使用
户可以检查和编辑当前选定页面元素的最常用属性。
属性面板的内容根据选定的元素会有所不同。
6)状态栏(10分钟)
文档窗口底部的状态栏提供与用户正创建的文档有关的其他信息。
它包含:
标签选择器
选取工具
手形工具
缩放工具
设置缩放比率
窗口大小
文档大小和估计下载时间
2、
课堂小结(5分钟)
继续详细向学生介绍Dreamweaver
8的工作界面(该部分为示范讲解操
作课)
1、 7)功能面板组(25分钟)
Dreamweaver 8的一些
辅助功能面板罗列在工作界面的右侧,默认
情况下显示了CSS、应用程序、标签检查器、文件四个功能
面板。
“CSS样式”面板:
使用“CSS样式”面板可以跟踪影响当前所选页面元素的C
SS规则
和属性或影响整个文档的规则和属性。
“文件”面板:
“文件”面板用于查看和管理Dreamweaver 站点中的文件。
2、
Dreamweaver 8的新功能(15分钟)
Dreamweaver 8主要新增的功能有:
“缩放工具”和辅助线
可视化XML数据绑定
新的CSS样式面板
CSS布局的可视化
代码折叠
“编码”工具栏
后台文件传输
Flash视频支持
3、 课堂小结(5分钟)
1、“时间分配”中4节及以上连排的课程,要
标明课时分配及每课时的时间分配;其他课程标明时间分配。
“时间分配”为预设时间,实施过程中根据
情况适当微调。
2、教学重点和难点及解决措施、板书、辅助手段等内容在“备注”栏中注明。
第 页
xxx教务处编印
课程日安排(分课题操作教学安排)
课程名称 网页设计与制作 授课教师 xxx
课题名称
授课课时
第二章
Dreamweaver8基本操作
§1、利用Dreamweaver8创建站
点
4
授课日期 2010年 2月 26 日
讲课:1 示范:1
练习:2 结合生产:理实一体化
教学目的 了解如何利用Dreamweaver 创建站点
教学重点 利用Dreamweaver 创建站点
教学难点 利用Dreamweaver
创建站点
设备
(材料、工
具准备)
教程、试题汇编、计算机
工艺
规程
讲解
与
示范
操作
要领
利用菜单栏上的“站点”菜单下的“新建站点”命令来完成站点的建立
巡回重点
及
注意事项
利用菜单栏上的“站点”菜单下的“新建站点”命令来完成站点的建立
布置
作业
试题汇编:1.1-1.2
教学后记
及
改进措施
第
页
教 案 纸
教学环节及时间分
配、备注
师生活
动
教学内容
第二章
Dreamweaver8基本
操作
§1、利用
Dreamweaver8创建
站点
共四节课
第一节课
第二节课
(90分
钟)
第三节课
(45分
钟)
第四节课
1、 复习上一节课学的内容(5分钟)
1)Dreamweaver 8的工作界面主要由哪几个部分组成?
2)Dreamweaver 8的插入栏主要由哪个类别组成?
3)Dreamweaver 8的新功能主要有哪些?
2、 介绍Dreamweaver
8中站点的作用(5分钟)
Web站点是一组具有共享属性的链接文档和资源。Dreamweaver 8
是一个站点
创建和管理工具,因此使用它不仅可以创建单独的文档,还
可以创建完整的Web站点
以上是讲解部分
3、 Dreamweaver 8 站点的创建(该部分为讲解示范操作部分)
1)建立并设置本地根文件夹(10分钟)
建立一个网站,首先要创建一个本地站点,并在本地计算机中对网
站进行设计、制作和调试等
操作,然后再上传到服务器中。建立本地站
点的第一步就是在硬盘中建立一个本地根文件夹。
2)定义站点(20分钟)
若要设置Dreamweaver 站点,操作步骤如下:
1.选择菜单栏中“站点”>“新建站点”。
2.单击“高级”选项卡,切换到高级模式下,选择分类列表中的
“本地信息”选项,然后设置本地信息的各项参数。
站点名称:用于输入站点的名称
本地根文件夹:用于输入本地磁盘中用来存储站点文件的文件
夹名称
自动刷新本地文件列表:选择此项后,每次将文件复制到本地
站点时,系统将自动刷新本地文件列表
默认图像文件夹:用于输入站点的默认图像文件夹路径
链接相对于:用于更改所创建的到站点其他页面的链接的相对
路径
HTTP地址:用于输入已完成的Web站点将使用的URL地址
使用区分大小的链接
检查:选择些项后在DW检查链接时可以确
保链接的大小写与文件名的大小写匹配,此选项用于文件名区
分大小写
的UNIX系统
启用缓存:选择该项后,可以创建高速缓存,可以提高链接和
站点管理任务的速度
3.单击确定按钮,完成本地站点的创建
4、
根据上面讲解示范的步骤,给十分钟让学生自己试着创建(10分
钟)
5、
讲解并示范书上第13页的“实例一”(10分钟)
6、 讲解示范完后让学生自己练习(10分钟)
7、 为学生讲解本课堂的重点难点及要注意的事项(10分钟)
8、
课堂小结(10分钟)
1、
总结前两节课的内容,并将需要注意事项跟学生讲解清楚(5分钟)
2、
讲解并示范试题汇编“第一单元基本操作”的第一题(20分钟)
3、
示范操作完成后,让学生自行练习,并将不懂的地方提出来,并跟
大家讲清楚(20分钟)
1、 讲解并示范试题汇编“第一单元基本操作”的第二题(20分钟)
(45分
钟)
2、
示范操作完成后,让学生自行练习,并将不懂的地方提出来,并行
跟大家讲清楚(20分钟)
3、 课堂小结(5分钟)
1、“时间分配”中4节及以上连排的课程
,要标明课时分配及每课时的时间分配;其他课程标明时间分配。
“时间分配”为预设时间,实施过程中
根据情况适当微调。
2、教学重点和难点及解决措施、板书、辅助手段等内容在“备注”栏中注明。
第 页
xxx教务处编印