dreamweaver教学计划

无论是我们生活还是工作中，计划总是必不可少的。它能帮助我们认清前进的方向，能让我们更顺利的实现目标，那么你会拟写计划吗？下面是小编为大家整理的《dreamweaver教学计划》，欢迎阅读，希望大家能够喜欢。

第一篇：dreamweaver教学计划

Dreamweaver 8.0实例教学

Dreamweaver mx2004 实例教学(实例1--实例10)

实例1 站点的建立

了解和掌握怎么建一个网站,这是做网站的第一步,因此必须掌握。

要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1)启动Dreamweaver mx2004,如图1.1.1所示.

图1.1.1 启动后所示的界面

(2) 选择菜单栏的站点(S)→站点管理(M)命令,打开对话框,如图1.1.2所示.

图1.1.2 “站点管理”对话框

(3) 单击”站点管理”对话框的 新建(N) 出现”站点(S)和FTP与RDS服务器(F)”,选择其中的”站点(S)”出现对话框,如图1.1.3所示.

图1.1.3 “站点定义1”对话框

(4) 在文本框里可以为你的站点起个名字,然后按 下一步 出现对话框,如图1.1.4所示.

1.1.4

“定义站点2”对话框

(5) 在对话框中,根据自己所做的网站选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按 下一步 出现对话框,如图1.1.5所示.

图1.1.5

“站点定义3”对话框

(6) 选择系统推荐的选项,在文本框里可以填入你所建网站的保存路径,也可以不变系统默认的路径,然后按 下一步 出现对话框,如图1.1.6所示.

1.1.6

“站点定义4”对话框

(7) 根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用的上传方法,如果不想上传的话,就选择”无”,然后再按 下一步 ,出现对话框,如图1.1.7所示,按 完成 ,出现图1.1.8所示,再按 完成 这就完成了建一个站点的过程.

1.1.7

“站点定义5”对话框

图1.1.8

“站点定义6”对话框

实例2 布局表格

学会制作表格,能熟悉掌握表格的作用,在大部分网页都运用到了表格,它是做网页不可缺少技术,也要熟悉掌握.最终效果如图:.

现的主要应用布局表格和布局单元表格来制表格,同时在表格中插入图片和添加文本,或者flash等等,最终实现你所想的效果.

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

绘创作步骤

(1) 启动Dreamweaver mx 2004 软件. (2) 选择 文件 → 新建(N) …

Ctrl+N 命令,打开 新建文档 对话框,如图1.2.1所示,单击 创建(R) 按钮,创建一个空白HTML文档,如图1.2.2

图1.2.1

“新建文档”对话框

图1.2.2 新建空白HTML文档

(3) 选择菜单栏的 修改 → 页面属性(P)…

Ctrl+J 命令,弹出 页面属性 对话框,如图1.2.3所示,在 标题(T): 栏中输入文字作为标题,如现在输入”布局表格”,再按 确定 ,返回主界面.

图1.2.3

“页面属性”对话框 (4) 单击工具栏的按钮

,切换到”布局视图”工作界面,如图1.2.4所示.

图1.2.4

“布局视图”工作界面

(5)单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图1.2.5所示. 还可以根据你的需要来调整表格的大小.

图1.2.5

绘制布局表格

(5) 单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单元格,如图1.2.6所示.

1.2.6

绘制布局单元格

(6) 重复第(4)和(5)步的操作,绘制其它布局表格和布局单元格,如图1.2.7所示.

图1.2.7

绘制其它单元格

(7) 在布局单元格添加文本和图像,如图1.2.8所示.

图1.2.8

表格添加内容

(8) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.2.9所示.

1.2.9 浏览器中的效果

实例3 层的运用

学会使用层的技术,虽然现在的大部分的网页是没有用到层,但要制作一些比较特别的网页时,用层比用表格简单得多.

本例要用到层的技术,建层,改变层的属性等,制作一些布局比较简单的网页. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件.

按上例创建一个名为”层的运用”的网页,如图1.3.1所示.

图1.3.1 “层的运用”网页的建立

(3) 选择插入(I)→布局对象→层(Y)命令,插入一个层,如图1.3.2所示.

1.3.2 层的建立

(4)点击层的里面便可对层的内容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入(I)→图像(I)…

Ctrl + Alt +I打开对话框,如图1.3.3所示

图1.3.3

“打开”的对话框

(4) 选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图1.3.4所示.

图1.3.4 插入图片

(5) 重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”属性”修改层,最后效果如图1.3.5所示.

图 1.3.5 最终效果

(6) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中

,如图1.3.6所示

图1.3.6 在浏览器中的效果

4 显示隐实藏图层

制作显示隐藏图层的效果,使网页具有动态效果.如右图.

本例主要应用”显示隐藏图层”命令.单击”显示”按钮,页面中显示所有的图层,单击”隐藏”按钮,隐藏所有的图层. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 按上例创建一个名为”显示隐藏图层”的网页,如图1.4.1所示.

图1.4.1 “显示隐藏图层”网页的建立

(3) 在网页使用布局表格技术建立表格,如1.4.2所示. (4) 单击第一个单元表格内,单击插入(I)→布局对象(Y)→层(Y)命令,调整层的大小刚好等于

,单击层里面,选择插入(I)→图像(I)…

Ctrl +Alt +I 命令,出现对话 如图1.4.3所示,选择图像按.. (5)单击第二个单元表格,按步骤4,插入层和图像,并在第三和第四个单元表格内分别写上”显示”和”隐藏”.最后效果如图1.4.4所示.

图1.4.2 建立表格的网页

图 1.4.3 “打开”对话框

(6) 选择第三单元表格里的”显示”,单击窗口(W)→行为(E)…

Shift + F3,打开行为面板,如图1.4.5所示

(7) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示-隐藏层命令,打开显示隐藏层对话框,如图1.4.6所示. (8) 选中所有图层,单击按钮,为所有层添加显示行为,如图1.4.7所示,单击按钮,关闭显示-隐藏层对话框.

单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onClick选项,如图1.4.8所示. (10)重复6~9步的操作,选中第四单元表格里的”隐藏”,为那二层(即那二张图像)添加隐藏图层及相应触发事件,如图1.4.9.所示.

1.4.4

插入图像的网页

图

1.4.5 行为面板

图1.4.6 “显示-隐藏层”对话框

图

图1.4.7 设置显示层行为

图1.4.8 设置触发事件

图1.4.9设置隐藏层行为

(11)选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.4..10和1.4.11所示

图1.4.10 单击”显示”的效果

图1.4.11 单击”隐藏的效果

实例5 插入背景音乐

使网页更加活泼生动.如右图所示.

本例主要让你了解本软件的基本功能,习怎么在网页中添加音乐. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

学创作步骤

(1) 启动Dreamweaver MX 软件. (2) 按上例创建一个名为”背景音乐”的网页,如图1.5.1所示.

图1.5.1 “背景音乐”网页的建立

(3) 按上例在网页中插入图像居中,再插入一个层,并在层里输入文字”让我唱支歌!”调整层的 大小和位置.如图1.5.2所示. (4) 按上例单击窗口(W)→行为(E)…

Shift + F3,打开行为面板. (5) 单击”添加行为”按钮,在弹出的下拉菜单中选择播放声音命令,打开播放声音对话框,如图1.5.3所示.

单击播放声音文本框后的图1.5.4所示)单击按钮.

按钮,在弹出选择文件对话框中选中一个音乐文件(见

图1.5.2 插入图像和层的效果.

图1.5.3 “播放声音”对话框

图1.5.4 “选择文件”对话框

(7) 单击所示. 面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onLoad选项,如图1.5.5

选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.5.6所示.

图1.5.5 设置触事件

图1.5.6

浏览器中的效果

实例6 插入背景图像

使网页在颜色方面不是那么单调.效果如右图所示.

本例主要学习如果把一张图片作为网页的背景图像,使网页更加好看. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 按上例创建一个名为”插入背景图像”的网页,如图1.6.1所示.

如图1.6.1 ”插入背景图像”网页的建立

(3) 在网页中输入文字,并在网页下面的中,改变文字的大小和位置,如图1.6.2所示. (4) 在网页空白处按右键,选择页面属性(T)…出现对话框,如图1.6.3所示, (5) 单击页面属性对话框中的出现选择文件对话框,如图1.6.4所示.按. (6) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中

,如图1.6.5所示.

图1.6.2 在网页中输入文字

图1.6.3 页面属性的对话框

图1.6.4 选择文件对话框

图1.6.5

在浏览器中的效果

实例7 文本超链接

制作具有超链接的网页.如右图所示.

本例学习如何设置超链接,它是制作网站的最基本技术,因为现在的网站可以说没有一个不用到它,因此学会它是非常有必要的. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 按上例创建一个名为”超链接”的网页,如图1.7.1所示.

图1.7.1 ”超链接”的网页建立

(3) 按上例的步骤制作同样的网页,并在诗的下面加多一行字”更多的诗”,效果如图1.7.2所 示. (4)选择最后一行字”更多的字”点击右键,选择创建链接(L)出现选择文件对话框,如图1.7.3所示.然后选择你选定的网页,即当点击文字”更多的诗”时所显示的网页,你应该先做好它.最后按.

1.7.2

添加字后的网页

图1.7.3 选择文件的对话框

(5) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.7.4所示..当你点击”更多的字”时,网页就会转到你所链接的网页.

图1.7.4

在浏览器中的效果

实例8 图像热点链接

制作出具有图像链接的网页,即当你点击图像中的某一处时,网页会转到它所链接的网页去,最后如右图所示.

本例所用到的技术跟上例差不多,上例是文本的超链接,而本例是图像的一小处的超链接.特别是介绍照片中很多人的其中一个是谁时,就能用到这种技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 按上例创建一个名为”图像热点链接”的网页,如图1.8.1所示.

图1.8.1 ”图像热点链接”的网页的建立

(3) 按以上几例所讲到的技术在网页中插入图片,并调整图片的大小和位置,结果如图1.8.2所示. (4) 选择图片,点击下面的,鼠标就变成一个”+”,然后在图片中选择区域的大小,如图1.8.3所示. (5) 在后面的文本框里填入你要链接的文件或者点击下面右边的,出现

, 如图1.8.4所示,并在后面写上”了解我更多”..

图1.8.2 插入图片后的网页

图1.8.3

选择图片的区域

图1.8.4 选择文件对话框

(6) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.8.5所示..当你鼠标移到刚才你所选的区域时,就会显示”了解我更多”点击它网页就会转到你所链接的网页.

图1.8.5 在浏览器中的效果

实例9 弹出信息

制作一些能自动跳出信息的网页.如右图所示.

本例主要应用了”添加行为”的技术,跟例5有点相像,也是用到”添加行为”技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 选择文件(F)→打开(Q)…

Ctrl + 0命令,打开打开对话框(见图1.9.1),选择上例的网 页,如图1.9.2所示.

图1.9.1 “打开”对话框

(3) 按上例单击窗口(W)→行为(E)…

Shift + F3,打开行为面板.如图1.9.3所示. (4) 单击”添加行为”按钮,在弹出的下拉菜单中选择 弹出信息命令,打开弹出信息对话框 并文本框里写入”欢迎光临本站”.按确定退出. 如图1.9.4所示

(5) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.9.5所示.

图1.9.3 “行为”面板

图1.9.2 打开上例的网页

图1.9.4 “弹出信息”对话框

图1.9.5 在浏览器中的效果

实例10 自动跳转链接

制作”自动跳转链接”效果的网页.

本例主要实现网站首先自动跳转功能,当用户浏览网页时,系统会自动进入新的网址. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 选择文件(F)→打开(Q)…

Ctrl + 0命令,打开打开对话框(见图1.10.1),选择例8的网 页,如图1.10.2所示.

图1.10.1 “打开”对话框

(3) 单击文档窗口左下角标签栏中的标签,选择窗口(W)→行为(E)…

Shift + F3命令,打开行为面板,如图1.10.3所示 . (4) 单击”添加行为”按钮,在弹出的下拉菜单中选择 转到URL命令,打开转到URL对话框,并在URL后面的文本里输入一个网站如,如图1.10.4所示.单击确定. (5) 单击行为面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onload项,即设置触发事件为当用户浏览系统自动进入相应的网址,如图1.10.5所示, (6) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.10.6所示.

图1.10.3 行为面板

1.10.2 打开例8的网页

图图1.10.5 设置触发事件

1.10.4 “转到

URL”对话框

图

1.10.6 在浏览器中的效

第十三课 Dreamweaver MX2004 实例教学(实例21--实例30) 实例21 页面配色方案 ................................................................... 40 实例22 CSS的使用 ........................................................................ 44 实例23 自动格式化表格 ............................................................... 48 实例24 使用表格间隔图像 ........................................................... 52 实例25 单元格自动延伸 ............................................................... 55 实例26 炽热文字 ........................................................................... 58 实例27 显示当前日期 ................................................................... 61 实例28 显示登陆时间 ................................................................... 64 实例29 状态栏中跳动的文字 ....................................................... 67 实例30 左右移动的图片 .............................. 错误!未定义书签。

实例21 页面配色方案

制作”页面配色方案.如右图所.

”设定配色方案”命令来改变网页背景颜色以及文本链接的颜色. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 新建一个名为”页面配色方案”的网页,如图1.21.1所示. 图1.21.1

”页面配色方案”的网页

(3) 按以上所讲的知识,在网页中手稿表格,并在表格中插入图片和文字,如图1.21.2所示 (4) 选择命令(C)→设置配色方案(T)…命令,打开设置配色方案对话框,如图1.21.3所示. (5) 在对话框的列表框中选择适当的颜色,在列表框中选择指定的配色方案,如图1.21.4所示, (6) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.21.5所示.

图1.21.2

插入表格

图1.21.3 “设置配色方案”对话框

图1.21.4 选择适当的配色方案

图1.21.5

观看在浏览器中的效果

实例22 CSS的使用

制作”CSS的使用”效果.如右图所示.

本例主要学习如何使用CSS,CSS在很多网页中都有使用,因为有了它,制作网页就更加方便简单. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 新建一个名为”CSS的使用”的网页,如图1.22.1所示.

图1.22.1

”CSS的使用”的网页建立

(3) 插入一个有二行二列的表格,调整表格的大小和位置,并在每个单元表格内写入一首诗,如 图1.22.2所示. 提示:由于每首诗的字体和位置都没有调整好,还有每个单元表格的背景也没有设置好,如果一个一个单元表格轮着来调整的话,那就很浪费时间,因此使用了CSS,它就一个模板直接套在每个单元表格就可以了. (4) 在表格中按右键选择CSS样式(C)→新建(N)…弹出对话框,如图1.22.3所示.

图122.2

表格和文字的插入

图1.22.3

“新建CSS样式”对话框

(5) 在“新建CSS样式”对话框的后面输入”gushi”作为名称,其它不用改变.按确定,弹出 保存对话框,如图1.22.4所示. (6) 在对话框中,输入gushi作为文件名,按确定.弹出CSS样式定义对话框,如图1.22.5所示. (7) 在的列表框中,选择设置的分类,然后在右边的中设置想要的效果,现在把那些诗设置字体为隶书,大小为18号,居中,表格背景为灰色.按确定. (8) 在网页中右击一个单元表格,选择样式(C)→gushi,那表格里的文字格式就变成刚才你设置的格式了,如图1.22.6所示.把其它的单元表格也应用到CSS,这样就轻易把全部都变成了自己设置的格式了. (9) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.22.7所示.

图1.22.4 保存对话框

图1.22.5

CSS样式定义对话框

1.22.6

应用了CSS(gushi)的效果

图1.22.7

观看在浏览器中的效果

实例23 自动格式化表格

制作”自动格式化表格”效果.如右图所示

本例主要应用”格式化表格”命令,学习如何应用. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1) 启动Dreamweaver MX 软件. (2) 选择文件(F)→打开(O)…

Ctrl +O命令,打开打开对话框(见图1.23.1),打开网页”课程表”, 如图1.23.2所示.

图1.23.1

“打开”对话框

(3) 单击表格边框选中表格,选择命令(C)→格式化表格(F)…命令,打开格式化表格对话框,从格式列表框中选中AltRows:Green&Yellow选项,如图1.23.3所示. (4) 单击确定按钮,对选中的表格应用所选样式,如图1.23.4所示. (5) 选择 文件(F) → 另存为(A)…

Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.23.5所示.

图1.23.2所示

打开”课程表

1.23.3

“格式化表格”对话框

图1.23.4 自动格式化表格

第二篇：《Dreamweaver中网页布局的方法》教学设计

授课班级:高一(3)授课教师:曹雪丽 授课时间：2004.5.12

教材分析: 1.教学目标

教学目标既是教学的出发点和归宿又是师生双边活动的中介，因此，我参照《高中新课程标准》和高中学生现有的知识水平和认识特点确定了以下三个目标： A：知识目标

(1)、让学生认识到网页布局对整个网页元素的组织编排的重要性。(2)、让学生掌握在Dreamweaver中实现网页布局的基本方法。

B：能力目标：让学生能动手完成一个简单的网页布局的设计。C：情感目标：

(1)培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。 (2)培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。

2.教学重点、难点、关键 重点：插入表中表 难点、关键：表格的属性设置 学情分析：

本节课的内容面向的对象是高中二年级的学生，对于学习这部分内容他们有三大优势：第一，除信息技术课外许多课都在网络课室上。因此，他们对网络很熟悉且很热爱，有一定的网络知识。第二，他们有WORD部分关于表格和简单的网页制作基础。第三，一部分同学有一些Dreamweaver的基础，可在学生中起积极的促进作用。 设计理念：

本节课的设计理念是以诱思探究学科教学论为理论依据，以充分发挥学生的主体地位为出发点，以培养学生自主学习能力全面提高学生素质为目的。是一节“诱思探究”理论的探索课。为此，在课前教师为学生准备了网络布局学习资源网站，学生自己也已经以小组为单位确立了要本组要建立的网站的主题。整节课的内容安排是以从学生“动手”中发现问题，又在学生的“动手”中解决问题为主脉展开的。同时又通过评价环节中学生的之间的互评、点评将本节推向高潮，达到突出重点，攻破难点的目的。 学习目标分析：

借助以前积累的知识、经验及学习资源网自主探索，小组协作进而归纳、研究出网页布局的内在规律性。 教学策略的选择与设计 1.教学方法：(1)诱思导学法 (2)任务驱动—体验探究法

(3)分层教学法(4)网络探究教学法 (5)激励教学法 2.学法指导：形象探究法、经验探究法、体验探究法、协作式学习法。 3.资源的设计与选择： 结合本节内容设计了一个学习资源网站、传奇电子教室系统、Dreamweaver网页编辑软件等。 教学过程设计：

教学设计过程及设计思想 教学环节 教师活动 学生活动 设计思想 时间 新 课 的 引 入 ⌒ 教 师 监 控 ︶

1， 相邻两同学为一组分别在浏览器中打开两个不同的网页作品相互欣赏评价，同时准备回答：

问题1：这两个网页有什么不同?你认为哪个更好一些?为什么? 2， 在Dreamweaver中打开该网页并逐一删除页面元素同时继续提问： 留在页面上的是什么? 1，回答问题1 带着问题2观察老师的操作

2，回忆Word中表格的插入方法及技巧

我以“诱思探究导学法”为指导思想,主要体现“诱”和“导”两个环节。首先是“诱疑”使学生“生疑”;然后要“导向”，比如这里教师的操作：在Dreamweaver中删除页中的页面元素后出现的表格，让学生的思维沿着正确方向发展，最终达到“释疑”的目的。 2 分 钟

点评：“诱思探究导学法”一句话，诱发思维动机，导正思维航向。这是突现教师基本功的地方，要“诱”得巧，“导”得妙。

新

课

学

习

新

课

学

习

布置 任务 ⌒ 教 师 监 控 ︶

[任务1]能根据资源网的指导学会表中表的使用，并完成本节的例题的表格制作。(必做题)

[任务2]能在布局的基础上插入图片及文字，完成一个如例题的简单网页制作。(提高题)

[任务3]能通过属性的设计美化网页。(先做题) 1，学生可根据自己的具体情况选择合适的任务。 2，各组长明确任务。

在任务设计时我注意到这样两个因素;一是：为了一切学生，在设置任务时要充分考虑到学生的个别差异。体现分层教学的重要性。二是：以探索问题来引动和维持学习者学习的兴趣和动机。 2 分 钟 学 法 指 导 ⌒ 教 师 监 控 ︶

指导学生带着“任务”中的问题，利用教师准备的学习资源网自主学习，探索交流,小组互助，“助教”指导,量力而行完成操作任务。 1，明确学习资源的使用方法，采取各种方法完成任务

利用教学资源自主学习及优生做好“助教”的角色互帮互学，既能激发他们的学习积极性，给他们一个锻炼成长的机会，又能使更多的学生得到帮助，有利于全面提高学生动手动脑的能力，体现“因材施教”。 1 分 钟

点评：这两部分的目的在于

一、体现分层教学的重要性。

二、培养学生养成由简到繁、由易到难、循序渐进地解决问题的好习惯，同时学生之间的以教促教，以教帮教，以教带教的方法有利于学生的全面发展。 师

生 互

动

1，寻找学生在完成任务中会遇到第一个问题：“表格线互扰问题”并及时以该问题为切入点将学生的思维引入到本节的重点内容--表中表的使用。 2，引导学生发现例子中的新问题—各部分表格线的差异，将本节的内容推向另一个热点。

1，学生掌握表中表的使用方法

2，完成任务

3，注意到表格属性的功能。

我是这样设计本部分内容将重点放在以下两个方面：

第一、在本节课师生以“任务”为主线，在学生不断地发现问题，教师及时地鼓励准确地导向，调控学生主动地探究，利用各种方法例如：教师搭建的网上学习资源，平时建立的小组协作关系等去想办法解决问题。 25 分钟 师

生 互

动

3，评价小结是本节课的一个高潮部分。此时教师重点由上面技术点的引导转到学生心理素质及与人交往能力的导向上。这一点其实比单纯的学会上面的技术更为重要。在学生的自评中引导学生客观评价自己。不能过分谦虚而失去在同学们面前表现自己才干的机会又不能过分张扬引起同学们的反感影响自己的形象。

4，由学生推选代表主持评价以调动学生积极参与评价的积极性 第

二、充分利用评价方式对学生的激励作用一改过去由教师为权威做法。此时，教师把主动权交给学生，使他们更具参与意识引发学习的主动性，学会正确地、善意地、艺术地评价他人和自己。从中学到做人的道理。 12 分

钟

点评：让学生带着真实的任务学习，这是任务驱动的精髓。这一部分是本节的重要内容，也是教学设计的一个难点。是对教师综合运用“任务驱动—体验探究”;“分层教学”“表扬激励”等教学方法能力、如何引导学生选择确实可行的学习方法能力的考验。同时，通过评价的过程，潜移默化地巩固知识，提高解决问题、评判是否的能力。 知识迁移 学生活动

[问题1]用表格布局有什么优缺点，还有好方法吗? [问题2]在网络资源中是否有其它的方法呢? 采用小组形式讨论

这里的想法主要是培养学生学会反思。 3分钟

点评：为学有余力的学生创造继续发展的广阔天空，激发他们的兴趣，培养他们的创新精神。

课后反思： 成功的地方：

(1)课题引入时以诱发学生的思维动机，导正思维航向为目的， 为学生的自主学习打下基础。

(2)学习资源网站、小组互助、助教帮忙等形式为学生的自主学 习创造了条件对培养学生养成由简到繁、由易到难、循序渐 进地解决问题的好习惯起到积极的促进作用。

(3)评价方式的改革可达到引导学生客观评价自己不能过分谦虚而失去在同学们面前表现自己才干的机会又不能过分张扬引起同学们的反感影响自己的形象。在互评、点评中要引导学生正确看待别人对自己的评价学会宽以等人;学会巧妙地运用语言艺术对存在问题的同学提出批评。同时通过点评，互评各自的作品，巩固本节的知识点，达到强调重点，攻破难点的目的。

存在问题的地方：评价方式仍需大胆地放手，让评价的形式更加多样化，民主化。可充分发挥学生的主动作用让他们去设计评价手段、评价量表等，这对于主体作用的体现及学生的创造性思维的发展都会产生积极的影响。

网络

本节小结：由小组总结提交 结束 教师活动：

1. 分组欣赏网页作品。

2. 教师操作演示在网页中删除元素从而引入表格布局的方法。 设计思想

通过教师的诱和导达到诱发思维动机，导正思维航向的目的。 教师监控： 1。布置学习任务。

2.对学生进行学法指导。使用学习资源、小组互助、助教帮忙。

设计思想

1.创造开放式的教学环境，学生为主体，体验为红线，鼓励他们积极动脑、动手完成任务。2.教师的适时演示体现诱思探究法的思想宗诣。3.利用小组互助以教促教，以教帮教，以教带教的方法有利于学生的全面发展。 设计思想

通过评价的过程正确地、善意地、艺术地评价他人和自己。教会学生学会做人的道理。 网络

教师监控：小组互评及个案点评相结合强调难点，深化主题 开始

学生利用学习资源网站自主学习、探索交流、找出难点、小组互助，完成任务，深化主题。

教师寻找典型案例1表格线的互扰问题引出本节的重点表中表。典型案例2表格线的粗细问题引出难点属性问题

教师：提出问题1及问题2 设计思想 培养学

(二)教学过程流程图

第三篇：Dreamweaver教案

第一课 软件简介与设置 1.1课程介绍 本课程主要内容

①内容提要/学习目标 ②软件演示 ③实例操作步骤

本课程的三个特色栏目

①网页色彩搭配; ②HTML基础;

③名词解释

1.2 (软件)基础知识 内容提要：

①起始页的使用及相关设置;

②软件界面概览(菜单，工具，面板等); ③“插入”工具栏显示模式的切换; ④文档窗口的工具栏和状态栏; ⑤如何设置，存储和管理界面布局。

学习目标：

①了解Dreamweaver软件的作用，基本界面布局，以及各功能区的应用范围;

②了解控制软件界面和文档的基本方法。

第四篇：DreamWeaver教案（大全）

第一部分 网页基础

1、了解网页设计的相关知识：

Frontpage/网页四剑客/ Html/ Asp/ Java脚本语言等

2、熟悉Dreamweaver工作窗口

3、掌握常用工具的打开方法

文档/标准/插入/属性/CSS样式/行为/站点/资源/框架/层/时间轴等

4、掌握HTML网页源代码编写的基本语法结构 第二部分 HTML的使用

1、HTML是超文本标记/描述语言，它编写网页源代码，是网页设计的基础。

2、掌握HTML的语法规则

3、掌握常用标签的使用，实例演示

4、页面属性设置：修改→页面属性(Ctrl+J) 练习题：通过HTML设计简单网页 要求：1>新建站点

2>在站点中新建一个普通网页

3>在普通网页中添加常用网页元素 第三部分 文本的编辑与基本操作

1、熟悉网页的组成元素，其中文字是最基本的，是网页的主体，主要用来传达信息。

2、掌握文本的创建与编辑操作

3、设置网页文字效果

利用属性面板/插入面板

4、利用文本创建超链接

5、网页属性设置(页面属性/系统网页样式) 上机练习：

图文混排(包括文本编辑/文本格式/水平线/超链接/ 图片/表格等)

第四部分 网页图像

1、 图像点缀网页，形象直观、丰富多彩

2、 掌握图像在网页中的作用及常用图像格式

3、掌握在网页中创建各种图像的具体操作

4、编辑图像(设置图像属性)

热点链接及改变大小等

练习：变换图片效果(照片变换) 第五部分 层叠样式表(CSS)

1、了解CSS的含义、作用、分类

2、具体操作(样式面板)

创建CSS样式/编辑样式表/删除样式表/附加样式表/应用CSS样式 上机练习：

<1>新建样式(内部样式)

<2>新建一个外部样式表文件(.css) <3>新建CSS特殊样式(格式化超链接) <4>制作电子相册

第六部分 页面的版面布局

1、了解版面布局设计方案及要求

2、利用表格布局网页

掌握表格的创建、编辑、设置属性 上机练习：

用隐藏的表格进行整个网页布局

3、层的使用

<1>了解层的含义、作用 <2>层的操作(层面板)

创建/编辑/用层设计表格 上机练习： <1>在网页页面中应用描绘层实现图像和文字的精 <2>制作导航条(用导航条设计栏目)

准备好所需的按钮图片→插入面板→常用→导航条

4、使用框架布局页面

<1>了解框架的含义、作用、组成及HTML语法结构 <2>掌握创建框架的方法 <3>框架的基本编辑操作

选定/保存/删除/设置属性

第八部分 表单的使用(交互式表单)

1、了解表单的含义、作用、组成及HTML标签

2、认识各种表单对象并创建表单

3、使用行为验证表单

制作和验证客户表单或个人简历表单

4、提交表单

设置并上网申请站点→发布站点→预览效果 第九部分 生成动态特效(时间轴和行为)

一、时间轴

1、了解什么是时间轴及其作用

2、打开认识时间轴

3、使用时间轴创建动画

<1>创建层动画(文字/图像)：通过时间轴来改变图层的位置、大小、可见性及叠放顺序。 <2>创建图像动画(切换)

4、编辑时间轴

二、行为

1、了解行为及其包含的基本元素

2、掌握网页设计中常用事件及常用动作

3、掌握为具体为对象附加行为的操作方法

举例：为网页中经常暴发的事件，指定执行各种特 定的任务

第十部分 插入多媒体组件

1、了解什么是多媒体

2、掌握在网页中应用Flash动画、声音文件、视频文

件、日期等

3、网页中使用计数器(免费申请获取代码→网站上传

→预览)

第十一部分 模板与库的应用

一、模板：

1、了解模板的定义、组成、作用、特点

2、认识模板面板

3、模板操作 创建(.dwt)/编辑/应用/更新/模板与文档分离/管理

二、库

1、了解库的概念、作用

2、了解什么是库项目、掌握库项目的创建/编辑/应用/更新/文档与库项目分离

第五篇：Dreamweaver网页设计+授课教案

Dreamweaver教案一( 一课时)

教学目的：初步了解Dreamweaver的操作

教学重点：Dreamweaver的界面

教学难点：各个面板的调用

一、 引入

为什么要用Dreamweaver而不用Frontpage?

Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点 ，赢得了网页制作人员的喜爱。

例一：m1.htm和f1.htm的大小比较

例二：frontpage安装程序和dreamweaver安装程序的大小比较

例三：frontpage运行和dreamweaver启动比较

二、 Dreamweaver的安装

三、 Dreamweaver的界面

1.文档窗口：主菜单、工具栏、底部启动条、文档编辑区

2.对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符

3.启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理

4.属性面板：随目前对象不同而内容不同

四、 作业

1.写出Dreamweaver对象界面中所有对象的名称

2.新建一个空白网页，写出空白网页的HTML代码

Dreamweaver教案二(一课时)

教学目的：回忆原来学过的网页的文字知识，熟悉 Dreamweaver的操作，熟悉属性面板的 1

使用，掌握页面属性、文本属性的设置

教学难点：向导图片、预格式化、图片的路径

教学重点：常用属性

一、 复习引入

1.输入文本

2.回车键的作用

3.如何输入换行符：Shift+ENTER，或者是对象面板à符号

4.换行符对应的HTML标记

二、 设置页面属性

1.打开页面属性对话框：右击页面，选择页面属性(page properties)

2.设置标题显示(Title)：

3.设置页面背景(Background image)：选择背景图像，注意路径

4.设置背景颜色Background：

5.设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一 旦对具体的文字设置颜色，这个设置就不起作用了

6.设置链接的各种颜色(Visited Links、Active Links、Links)

7.设置页面边界(Left Top )：使内容与边框没有空隙

8.设置文档字符集(Document Encoding)：gb2312

9.设置向导图片(Tracing Image)：用于设计时，下面的滑动条用于设置这个图片的透明度( Transparent)

三、 设置文本属性

1.格式(Format)：

(1) 样式：段落(Paragraph)，标题(Heading1) 、„„预先格式化的(preformatted)

*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现自动换行

(2) 字体：Default Font

(3) 大小：Size

(4) 颜色：

(5) 其它：加粗、倾斜

(6) 对齐：

2.链接(Link)：链接到文件，链接到地址，

*相关(Relate to)：文档(Document)，站根目录(SiteRoot)

3.目标(Target)：打开链接的目标_blank、_self、_parent、_top

4.项目符号、编号和缩进

四、 作业

根据示例网页，制作一个网页

Dreamweaver 教案三(两课时)

教学目的：掌握网页中图片的相关操作

教学重点：dreamweaver中设置图片的属性

教学难点： 图像处理软件的使用

一、复习引入 1.网页的页面背景颜色和文本颜色在HTML代码中是如何表示的?RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256╳256╳256=16777216种 颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显 示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 2.网页中运用颜色原则

l 切忌采用过多的颜色;

l 背景颜色不要太深;

l 要保持整个网页的色调统一;

l 要围绕网页主题选择颜色

二、网页中的图像格式 *BMP：位图格式 1. GIF：Graphics Interchange Format可交换的图像格式 特点： l 只支持256种颜色 l 支持透明效果 l 可以交错下载 l 可以实现动画效果 l 文件所占用空间小 l 不能支持渐变色彩 l 更改图片大小要从原文件改起 2. JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点： l 支持24位图像 l 有损压缩 3. GIF与JPEG比较

三、插入图像 1. 插入图像：InsertàImage;对象面板 2. 图像 属性： l 宽(W)高(H)：默认为图片的大小，可以设置 其它尺寸，但图片会变形 l 源文件(Src)： l 对齐(align)： l 链接(Link)：链接到的图片 l 替代(Alt)：图像注释，当浏览器不能正常显 示图片时所出现的文字提示 l 地图(Map)：制作映射图 l 垂直边距(V space)：与上边界的距离 l 水平边距(H space)与左边界的距离 l 目标(Target)：当链接项有设置时发生作用 l 低品质源(Low Src)：低分辨率副本文件 l 边框(Border)： l 编辑(Edit)：启动图像处理软件来对图像进行 编辑 l 重设大小(Reset size)：当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项

四、使用图 像处理软件

1、 转换图像格式：打开，另存为

2、 更改图像尺寸：

3、 更改图像品质：另存为

五、作业 l 下列文件均放于同一文件夹下： 1. 在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一 张风景的。 2. 将找到的图片放置在背景为蓝色的页面上 3. 改变第一 张GIF图片的大小 4. 设置第二张GIF图片的替代文字为“试一试” 5. 设 置第三张GIF图片的链接为第三张JPEG图片 6. 设置第四张GIF图片的垂直边距为5，水平 边距为9 7. 对第一张JPEG图片设置映射4个，分别链接到第

二、

三、

四、五张JPEG图片 8. 运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低 品质源 l 不看电脑，写出下列RGB值对应什么颜色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF

Dreamweaver教案四(三课时)

教学目的：掌握dreamweaver中表格的应用 教学难点：表格对应的HTML代码

教学重点：表格的编辑

一、 复习引入

1. 文字的定位：空 格、回车

2. 图片的定位：垂 直边距、水平边距

二、 表格

1. 插入表格：插入 (Insert)à表格(table)，或者在对象面板

2. 行数(row)

3. 列数(column)

4. 边距(cell padding)：单元格中的内容与单元格边框之间的距离

5. 间距(cell spacing)：单元格之间的距离

6. 宽度(width) ：可以是像素(pixel)或百分比为单位(percent)

7. 边框(boder) ：

8. 属性面板：只有 在选定整个表格时才出现表格属性

9. 在表格中也可以 通过右击，调出的快捷菜单中选择表格来对表格进行设置

10. 清除行高和列宽按钮

11. 改变列宽单位按钮

12. 背景颜色：

13. 边框颜色：设置整个表格的格线颜色

14. 背景图像：

三、 表格所对应的HTML代码

1.表格：

2.行：

3.列：

四、 选定

1. 单击表格左上角 或边框线

2. 在表格内单击表 格任一处，右击，选择表格(table)à选定表格(select table)

3. 选择所有单元格

4. 在文档窗口的左 下角选择标记

5. 选定行

6. 选定单元格

五、 表格的编辑

1. 表格的嵌套

在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。

2. 复制剪切粘贴

3. 插入行、列，删 除行列

4. 合并单元格，拆 分单元格

5. 改变行、列、表 格的大小：拖放，属性面板精确定义

6. 表格模板：命令 (command)à格式化表格(format table)

六、 导入表格数据

1. 文件导入导入表格数据

2. 数据文件

3. 定界符

4. 表格宽度

5. 单元格边距和间距

6. 格式化首行

7. 边框

七、 学习网页制作的方法

1. 学习网页制作， 要先模仿

2. 在浏览到合适的 网页时，用“另存为”保存，再用dreamweaver来打开

八、 作业

1. 将数据文件1.txt转为表格

2. 模仿此页制作页面

Dreamweaver教案五(两课时)

教学目的： 掌握框架

教学难点： 框架的编辑

教学重点： 框架的HTML代码

一、 复习引入

回忆：Frontpage中的框架应用

二、 框架的应用

1. 重复出现在不同 网页文档中的元素：网页标题、导航栏等等

三、 建立框架

1. 将对象面板切换 到框架页(Frame)

2. 插入不同的框架 ，一个区域对应于一个页面

3. 在框架中打开原 有网页：文件(File)à在框架中打开(Open in Frame)

四、 保存框架

1. 选择文件(File )/保存所有框架(Save Frameset)，先保存框架文件，接着会出现提示，逐个保存框架中的网页

2. 保存时注意名称

五、 框架编辑

1. 框架面板：窗口 (Windows)à其它(Other)à框架(Frame)调出框架面板

2. 选定框架组：单 击整个框架组的边框;或在框架面板中单击整个框架的边框

3. 框架属性：名称 、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等

4. 拆分框架：按 Alt键，拖动边框;修改(Modify)à框架页(Frameset)à拆分左/右/上/下(split frame top/bottom/left/right)

*注意区别：插入一个新的框架与拆分框架的区别

5. 链接打开的目标

六、 框架所对应的HTML代码

1. 框架组：

2. 通过设置：rows 或cols来设定是横的还是竖的，是顶部还是底部

3. 框架组属性： frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距

4. 框架项：

5. 框架属性：src 指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小

6. 无框架提示