Dreamweaver教案.docx
《Dreamweaver教案.docx》由会员分享，可在线阅读，更多相关《Dreamweaver教案.docx（24页珍藏版）》请在冰豆网上搜索。
Dreamweaver教案
课程表
一
二
三
四
五
1
2
3
4
5
6
7
网页
网页
8
网页
网页
授课班级：
班
授课内容：
网页制作
合计：
4节课
学期授课进度表
周
次
课
次
课时
备注
第
一
周
1
定义本地站点
创建文字环绕图像网页
创建背景图像网页
4
第
二
周
1
创建鼠标经过图像网页
在网站中查找与替换
4
第
三
周
1
在网页中插入说明信息
清理Word生成的HTML代码
在网页中输入上下标
4
第
四
周
1
插入图像并设置属性
在Dreamweaver中插入Flash按钮
4
第
五
周
1
在Dreamweaver中插入Flash文本
创建图片超级连接
创建空地址连接
4
第
六
周
1
创建以新窗口的形式打开目标连接
制作描点连接
4
学期授课进度表
周
次
课
次
课时
备注
第
七
周
1
创建文件下载链接
制作E-mail链接并显示预定的主题
创建图象热点链接网页
4
第
八
周
1
在Dreamweaver中导入数据表格
创建细线表格
4
第
九
周
1
创建圆角表格
制作虚线表格美化网页
使表格背景色在鼠标经过时改变
4
第
十
周
1
制作立体表格效果
表格的亮边框和暗边框
4
第
十
一
周
1
给表格数据排序
制作阴影表格
制作网页中的竖线
4
第
十
二
周
1
运用表格排版布局首页
创建框架网页
4
学期授课进度表
周
次
课
次
课时
备注
第
十
三
周
1
设置框架中的链接
创建时间轴动画
利用层制作下拉菜单
4
第
十
四
周
1
利用层布局网页
创建库文件
4
第
十
五
周
1
应用库文件
创建模板
利用模板创建网页
4
第
十
六
周
1
修改和更新模板
利用标签提示加入背景音乐
4
第
十
七
周
1
制作完整的网站首页
（摆渡人网上书店）
4
第
十
八
周
1
期末考试
4
本学期学时分配
标准化试题统计表
本学科课程总时数
72
章节
A
B
C
D
E
F
本学期课程时数
72
本学期周学时数
4
本学期授课周数
18
本学期学时分配
理论讲授
30
技能
教学实习
42
技能
生产实习
复习考试
机动
教学大纲
名称
网页制作实例大讲堂
版本
时间
2007．1．
出版
单位
人民邮电出版社
使用教材
名称
网页制作实例大讲堂
版本
时间
2007．1．
编者
孙宇
出版
单位
人民邮电出版社
参考书
名称
网页设计与制作
版本
时间
2006、8
编者
刘雪松徐向阳
出版
单位
人民邮电出版社
变
动
说
明
学生名册
序号
姓名
性别
平时成绩
期中
期末
平均分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
学生名册
序号
姓名
性别
平时成绩
期中
期末
平均分
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
教案
计算机专业07年3月5日第1周第1次
章节
课题
定义本地站点
教
学
目
的
本章知识目标：
学会定义本地站点。
技能目标：
学会使用【站点】|【管理站点】命令
教
学
重
点
【站点】|【管理站点】命令
【修改】|【页面属性】命令
教
学
难
点
【站点】|【管理站点】命令
技
能
使学生掌握【站点】|【管理站点】命令的使用技能
课
型
新课
教法
（教具）
讲练结合
板
书
设
计
作
业
定义一个新站点
创建文字环绕图像网页
创建背景图像网页
课
后
小
结
班班完成情况良好
标准化试题及答案
分
类
章
节
题根及答案
时
间
级
别
教学内容
时间
方法
教
学
过
程
一、组织教学：
师生问候
检查一下机器是否正常，做好记录工作，了解一下学生的出勤情况，准备上课。
二、新课：
Dreamweaver8网页制作篇
内容导读
Dreamweaver8是专业的网页排版布局软件，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。
它将网页可视化布局、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
本章就通过大量实例讲述用Dreamweaver8进行网页的布局排版。
第1例定义本地站点
在使用Dreamweaver制作网页以前，最好先定义一个新站点，这是为了更好地利用站点对文件进行管理，也可以尽可能地减少错误，如路径出错、链接出错。
新手做网页时往往一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。
建议建立一个文件夹用于存放网站的所有文件，HTML文件放在根目录下。
如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再进行细分。
1．启动Dreamweaver8，选择【站点】|【管理站点】命令，弹出【管理站点】对话框，如图1-1所示。
2．在对话框中单击【新建】按钮，在弹出的菜单中选择【站点】选项，如图1-2所示。
3．选择以后弹出【…站点定义为】对话框，选择【基本】选项卡，将站点名称设置为“完美网页设计”，如图1-3所示。
4．单击【下一步】按钮，询问是否使用服务器技术，选择【否，我不想使用服务器技术】，因为本站点是一个静态站点，如图1-4所示。
5．
单击【下一步】按钮，询问用户如何使用该文件，在【您将把文件存储在计算机上的什么位置】选择存储文件的位置，如图1-5所示。
6．单击【下一步】按钮，询问如何连接到远程服务器，在【您如何连接到远程服务器】下拉列表中选择【无】选项，如图1-6所示。
7．单击【下一步】按钮，弹出如图1-7所示的对话框，表明初步设置已经完成。
8．单击【完成】按钮，弹出【管理站点】对话框，在对话框中显示新建站点，如图1-8所示。
9．单击【完成】按钮，在【文件】面板中显示站点中的内容，如图1-9所示。
第2例创建文字环绕图像网页
美化页面最简单直接的方法是在网页上添加图像。
而很大程度上，一个网页漂亮，通常就是指导网页上的图像漂亮。
图1-10所示是创建文字环绕图像效果，在文字中插入一个图像时，要设置图像的对齐方式即可创建文字环绕图像效果，具体操作步骤如下。
1．打开网页文档，如图1-11所示。
2．将光标放置在要输入文字的位置，输入文字，如图1-12所示。
3．将光标放置在插入图像的位置，选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，如图1-13所示。
4．在对话框中选择图像images/l.jpg，单击【确定】按钮，插入图像，如图1-14所示。
5．选中图像，在【属性】面板中将【对齐】设置为【右对齐】，如图1-15所示。
6．保存文档，按F12键浏览器中预览效果，如图1-10所示。
第3例创建背景图像网页
在浏览网页时，经常看到漂亮的网页背景，使用背景图像大大增强了网页的美观。
图1-16所示是创建背景图像效果，利用在【页面属性】对话框中选择【分类】列表中的【外观】选项中的【背景图像】，即可设置整个网页的背景图像，具体操作步骤如下。
1．打开网页文档，如图1-17所示。
2．选择【修改】|【页面属性】命令，如图2-18所示。
提示：
将光标放在页面中，单击【属性】面板中的页面属性按钮，也可以弹出【页面属性】对话框。
3．弹出【页面属性】对话框，在对话框中选择【分类】列表中的【外观】选项，如图1-19所示。
4．在对话框中单击【背景图像】文本框右边的【浏览】按钮，弹出【选择图像源文件】对话框，如图1-20所示。
5．在对话框中选择背景图像images/8.jpg，单击【确定】按钮，添加到【背景图像】文本框中。
单击【确定】按钮，如图1-21所示。
保存文档，按F12键在浏览器中预览效果，如图1-16所示。
三、学生练习（老师进行个别制导）
四、点评：
（针对学生完成作品的情况进行点评，指出创作中应该注意的地方。
）
五、作业：
定义一个新站点
创建文字环绕图像网页
创建背景图像网页
升级会员 