网页设计Dreamweaver教案.docx

网页设计Dreamweaver教案.docx

《网页设计Dreamweaver教案.docx》由会员分享，可在线阅读，更多相关《网页设计Dreamweaver教案.docx（19页珍藏版）》请在冰豆网上搜索。

网页设计Dreamweaver教案

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期2月28日3、4节

授课题目（章节）：

第一章

教具：

多媒体机房

基本教材：

Dreamweaver网页设计实用教程

课时安排：

2

教学目的（分掌握、熟悉、了解三个层次）：

掌握DreamweaverCS6基础知识

掌握如何将Photoshop设置为图像文件的外部编辑器。

掌握创建网页并插入文档

教学重点*、难点#

创建网页并插入文档

通过打开“新建文档”对话框来设置新文件的各项参数

教学主要内容与教学方法：

教学主要内容

通过3个工作任务向大家介绍DreamweaverCS6的基本操作。

Dreamweaver是一款功能强大的可视化的网页编辑与管理软件。

利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。

DreamweaverCS6最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。

教学方法：

演示法、讲授法

课程作业或思考题：

教材第28页

参考资料或常用网址：

教学后记：

学生能大致了解基础知识，学生能大致了解网站的一些原理，使学生对网站的认识上了一个阶梯。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期3月14日3、4节

授课题目（章节）：

第二章

教具：

多媒体机房

基本教材：

Dreamweaver网页设计实用教程

课时安排：

2

教学目的（分掌握、熟悉、了解三个层次）：

掌握如何创建网站。

掌握以FTP连接方式并定义远程站点

教学重点*、难点#

控制站点结构，管理站点中的每个文件

定义远程站点

教学主要内容与教学方法：

教学主要内容：

将通过“以FTP连接方式定义远程站点”和“建立MyTestm网站”共2个工作任务向大家介绍如何创建、设计网站。

在完成对站点文件的编辑后，可以用DreamweaverCS6将本地站点上传到Internet上。

在“站点管理”对话框中选择已建立的站点，在弹出的“设置站点对象”对话框中选择“服务器”，添加服务器。

教学方法：

演示法

课程作业或思考题：

教材第53页

参考资料或常用网址：

教学后记：

多媒体课件的运用、学生多种感官的参与和生动丰富的教学方式，充分调动了学生学习的兴趣，教师系统讲解保证每一个学生达到了本课基本要求。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期3月21日3、4节

授课题目（章节）：

第二章

教具：

多媒体机房

基本教材：

Dreamweaver网页设计实用教程

课时安排：

2

教学目的（分掌握、熟悉、了解三个层次）：

掌握建立网站。

掌握设计、规划站点并对站点进行编辑

教学重点*、难点#

管理站点文件

规划与设计站点

教学主要内容与教学方法：

教学主要内容：

1.创建本地文件夹、

2.定义本地站点、

3.管理站点文件、

4.打包上传

5.远程与本地站点同步。

教学方法：

演示法

课程作业或思考题：

教材第53页

参考资料或常用网址：

教学后记：

使用多媒体教学为学生提供大量的动画、影象、音乐、图片等多媒体素材，直观形象，激发学生学习本节课的兴趣和动力，利用多媒体进行教学，创设了情景，让形象的画面理解自然过渡到对教学内容的理解，这种教学活动自始至终调动了学生多种感官的参与，使学生的情绪始终处于亢奋状态，思维的积极性得到了充分的发挥。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期3月28日3、4节

授课题目（章节）：

第三章

教具：

多媒体机房

基本教材：

Dreamweaver网页设计实用教程

课时安排：

2

教学目的（分掌握、熟悉、了解三个层次）：

了解什么是文本与超链接；

掌握各种超级链接

掌握输入特殊字符的方法

使用“查找和替换”命令

教学重点*、难点#

创建及编辑链接

用特殊键盘输入特殊字符

教学主要内容与教学方法：

教学主要内容：

通过5个工作任务向大家介绍什么是文本与超链接。

文本是页面里不可缺少的东西，文本的格式化可以充分体现文档所要表达的重点，比如：

在页面里制作一些段落的样式；文档中构建丰富的字体；超级链接是网页中最为重要的部分，单击文档中的超级链接，即可跳转至相应的位置。

在添加文本字符时，要在页面中插入诸如£€¥©®™等字符，使用DreamweaverCS6不费吹灰之力就将这些特殊字符插到页面中，借助输入法的特殊键盘输入特殊字符，单击软键盘上的符号，或者此时在键盘上敲对应的键，就可以输入符号。

教学方法：

演示法

课程作业或思考题：

教材第83页

参考资料或常用网址：

教学后记：

采用案例教学，给学生展示最后设计好的作品，课堂气氛很好。

给出相应的实例和要求，让学生参与到讲解中。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期4月4日3、4节

授课题目（章节）：

第三章

授课题目（章节）：

第三章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握创建多级列表的方法

为网站图标创建图像链接

为超链接文本设置动态下划线

教学重点*、难点#

列表属性

为超链接文本设置动态下划线

教学主要内容与教学方法：

在本任务中，要完成创建多级列表的任务，需要先熟悉添加编号与项目列表、更改编号与项目列表、创建多级列表等内容，进而找到符合实际情况的操作方法。

选取列表项目文字，单击属性面板上的按钮，生成项目列表，选取次级项目文字，单击“属性”面板上的“文本缩进”按钮，生成次级列表。

重复上述操作，最后生成多级列表。

在页面中插入作为链接对象的图像。

单击选择该图像，打开其“属性”面板，在“属性”面板的“链接”域中设置链接文件。

在“属性”面板的“目标”下拉菜单中选择打开链接的窗口，同样有_blank、new、_parent、_self、_top五个选项。

教学方法：

演示法

课程作业或思考题：

教材第53页

参考资料或常用网址：

教学后记：

在整个教学过程中教学重点主要都是围绕着如何创建多级列表，特别是在讲解列表属性时每个步骤都做了强调，对于在操作过程中易犯的错误给予讲解。

学生能比较好的掌握教学内容

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期4月12日5、6节

授课题目（章节）：

第四章

授课题目（章节）：

第四章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握应用图像与多媒体在Dreamweaver的应用

掌握设置背景图案

教学重点*、难点#

多媒体在Dreamweaver的应用

在“页面属性”对话框中选择图像，或者在文本框中直接输入背景图像文件的路径和名称。

教学主要内容与教学方法：

通过3个工作任务向大家介绍图像与多媒体的应用。

毋庸置疑，图像的恰当应用能够美化页面，试想，如果没有图像的点缀，只是枯燥的纯文本页面，纵使它有丰富的内容，也难得有人去欣赏。

Dreamweaver能够插入并编排页面中图像，并且使用其外置的编辑器对页面中的图像进行编辑，整个操作过程，高效且便捷。

将汽车图片设置为背景图案

（1）选择菜单命令“修改”|“页面属性”，打开“页面属性”对话框。

（2）单击对话框中“背景图像”域后面的“浏览”按钮选择图像，或者在文本框中直接输入背景图像文件的路径和名称。

（3）在页面中插入背景图像。

课程作业或思考题：

教材第111页

参考资料或常用网址：

教学后记：

让学生上台操作展示，充分体现了以学生为本，强调学生的自我操作，强调学生的自我学习，发挥学生的主体

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期4月19日5、6节

授课题目（章节）：

第四章

授课题目（章节）：

第四章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握设置多种图像效果

掌握插入Flash对象的方法

教学重点*、难点#

滤镜效果

插入Flash元素

教学主要内容与教学方法：

使用Dreamweaver简便地制作出精美的图像效果。

此外，使用同样的方法，选择其他的滤镜效果，或设置其他的参数，可打造出更多精彩Web图像效果。

图像名称：

在该域中指定翻转图像的名称。

原始图像：

在该域中指定默认显示的图像。

鼠标经过图像：

在该域中指定当鼠标经过时显示的图像。

在制作此任务时，需要先插入Flash元素，需要准备大小相同的几个图像，本例准备了10个大小相同的图像，并把它们存储在站点根目录相应的文件夹下；之后，将使用Flash元素检查器编辑Flash元素的属性一；最后，将设置和图像有关的各选项。

教学方法：

演示法

课程作业或思考题：

教材第111页

参考资料或常用网址：

教学后记：

采取案例教学法，让学生先看到题，再针对题中的教学环节展开讲解知识点，教学效果很好。

本课的教学活动循序渐进、螺旋上升,符合学生的认知规律。

教学策略丰富、实用而新颖、独特，突破了学生的认知障碍，突破了难点，优化了课堂

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期4月26日5、6节

授课题目（章节）：

第五章

授课题目（章节）：

第五章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握CSS样式（层叠式样式）的应用

教学重点*、难点#

CSS样式面板、创建CSS样式、附加外部CSS样式表

教学主要内容与教学方法：

通过3个工作任务向大家介绍CSS样式（层叠式样式）的应用。

CSS样式常用来同时控制多个文档的格式，并且当CSS样式发生变化或更新时，所有链接该样式（即使用该样式格式化）的文档都将随之自动更新。

教学方法：

演示法、讨论法

课程作业或思考题：

教材第139页

参考资料或常用网址：

教学后记：

充分调动了学生学习的积极性，本课教学真正体现了“以学生为中心”的教学思想。

整节课我都有意识地在情境、合作、活动中让学生体验学习的乐趣，使他们愿学、乐学，同时让他们在感知、感悟的过程中都有所体会，能充分大胆地表露自己的想法，真正做到乐中学，学中乐。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期5月5日5、6节

授课题目（章节）：

第五章

授课题目（章节）：

第五章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握如何改变鼠标正式形状

掌握设置特效字体

教学重点*、难点#

规则定义

滤镜的语法格式

教学主要内容与教学方法：

利用Dreamweaver的CSS样式改变了页面中的鼠标效果。

此任务涉及到设置CSS样式参数的知识，其包括设置类型、背景、区块、方框、边框、列表、定位及扩展参数等内容。

创建基本页面。

单击CSS样式面板上的“新建CSS样式”按钮，打开“新建CSS规则”对话框，在该对话框中进行如下设置：

在“选择器类型”域中选择“类（可应用于任何标签）”。

在“选择器名称”域中输入新建CSS样式的名称“.cursor”。

在“规则定义”域中选择“仅对该文档”。

完成后单击“确定”按钮

利用Glow滤镜制作了光晕字效果；利用DrowShadow滤镜制作了阴影字效果；通过为单元格添加Mask滤镜制作遮罩字；使用Blur滤镜制作了动感字。

教学方法：

演示法、任务驱动法

课程作业或思考题：

教材第139页

参考资料或常用网址：

教学后记：

适当选取教学策略，促进了学生的整体提高。

培养习惯，要悉心引导，严格要求，点点滴滴到位。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期5月10日5、6节

授课题目（章节）：

第六章

授课题目（章节）：

第六章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握制作表格和框架

掌握制作线框、间隔和粗线框表格

教学重点*、难点#

设计版面布局

单元格“属性”面板

教学主要内容与教学方法：

通过3个工作任务讲解表格和框架的制作。

如果创建好站点，就可开始着手设计网站了。

表格和框架是Dreamweaver中两个设计版面布局的工具，希望通过这些任务的实例操作，使学生能够掌握表格和框架的功能操作。

通过对Dreamweaver的表格操作的学习，掌握插入表格、添加内容、选择表格、编辑表格、数据排序、导入/导出数据等相关操作。

教学方法：

演示法、讨论法

课程作业或思考题：

教材第191页

参考资料或常用网址：

教学后记：

下大力气提高学生的代码理解能力。

为学生构建完整的知识体系，完整的知识体系对学生计算机思维潜力的养成有至关重要的作用，也为他们将来进一步学习网页设计有很大的帮忙。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期5月17日5、6节

授课题目（章节）：

第六章

授课题目（章节）：

第六章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握页面布局

掌握层的创建、层的基本操作

教学重点*、难点#

设置框架

层与表格的相互转换

教学主要内容与教学方法：

制作一本电子书，首先要新建HTML页面，通过插入命令选择框架集，进行页面布局，保存顶部及左右侧框架，进而设置框架名称，进行标题栏的创建等操作。

通过学习视图布局、网格辅助线及框架的使用，使页面布局工作变得简单而又轻松。

利用“Div标签”来定义网页面的内容中的逻辑区域的标签，使网页的排布更具条理；其次，通过Dreamweaver的“层操作”功能，进行层的创建、层的基本操作、层与表格的相互转换等操作。

在“属性”面板上设置框架名称，Dreamweaver已经为预定义框架设置了名称，例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时要用到，其他属性默认示。

教学方法：

演示法

课程作业或思考题：

教材第191页

参考资料或常用网址：

教学后记：

结合学生实际状况，制定有效地教学策略，充分备好课，上课时做到精讲多练。

Div盒子模型是CSS控制页面时一个十分重要的知识点，其定位方法则是重中之重。

本节课围绕该问题而展开，以任务驱动的形式带领学生在不断地发现问题，分析问题，解决问题。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期5月30日3、4节

授课题目（章节）：

第七章

授课题目（章节）：

第七章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握更改网页的颜色、背景和字体大小

掌握创建嵌套模板

教学重点*、难点#

“行为”面板的操作

设置可编辑区域

教学主要内容与教学方法：

进行“行为面板”的操作，通过内置行为的操作来设置效果、打开浏览器窗口、弹出消息、调用JavaScript等项目的操作。

编辑一份在线的杂志，报头形式不需改变，而标题和内容要时时更新。

把每日要更新的内容设为可编辑区，允许编辑，而把报头、栏目标题、版权信息等设为锁定区，不允许编辑。

这样使整个网页保持相对一致的风格，便于给浏览者留下好的印象。

（1）创建一个基于基础模板的文档。

选择菜单命令“文件”|“另存为模板”，或者单击“插入”面板“常用”分类下的“创建嵌套模板”按钮。

（2）打开“另存模板”对话框，在“另存为”文本框中输入模板的名称，然后单击“保存”按钮，将新建的文档保存为模板。

在新模板中加入其他的内容和可编辑区域

教学方法：

演示法、任务驱动法

课程作业或思考题：

教材第232页

参考资料或常用网址：

教学后记：

要提高授课的效率，注重授课的艺术，活跃课堂气氛，激发学习兴趣，采用灵活多变的教学方法。

在教学过程中，应注意案例与知识教学互相渗透，寓实际案例教育于知识教育之中，让学生认识到学网页设计的重要性，鼓励学生树立远大的理想，努力学好网页设计。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期5月31日7、8节

授课题目（章节）：

第七章

教具：

多媒体机房

基本教材：

Dreamweaver网页设计实用教程

课时安排：

2

教学目的（分掌握、熟悉、了解三个层次）：

掌握插入重复区域

掌握修改及更新模板

教学重点*、难点#

把重复区域被插入到模板中

更新模板

教学主要内容与教学方法：

在创建好模板后，还需要对其进行编辑，在本任务中，需要了解创建可编辑区域、创建可选区域、创建重复区域等相关知识。

（1）将插入点放入文档中想要插入重复区域的地方。

选择“插入”|“模板对象”|“重复区域”命令。

或单击如图所示的插入栏中“常用”类的“重复区域”按钮。

（2）在“名称”文本框中为模板区域输入惟一的名称。

但不能对一个模板中的多个重复区域使用相同的名称。

单击“确定”按钮，重复区域被插入到模板中，如图所示。

在制作本任务的过程中，通过打开“资源”面板，在“模板”列表里选择要修改的模板，在“更新面板”对话框中进行设置，即可修改和更新模板。

教学方法：

演示法

课程作业或思考题：

教材第232页

参考资料或常用网址：

教学后记：

在教学的设计中要充分为学而教，以学生如何有效获取知识，提高潜力的标准来设计教学。

创造条件让学生能够探究他们自己的一些问题，充分调动了学生学习的积极性。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期6月13日3、4节

授课题目（章节）：

第八章

授课题目（章节）：

第八章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握如何使用表单

掌握制作综合表单

教学重点*、难点#

表单标签

表单数据

教学主要内容与教学方法：

利用表单可以帮助Internet服务器从用户处收集信息，例如收集用户资料、获取用户订单，也可以实现搜索接口。

在Internet上也同样存在大量的表单，让你输入文字，让你进行选择。

表单在网页中主要负责数据采集功能。

一个表单有三个基本组成部分：

表单标签：

这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：

包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮：

包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作

制作的是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。

教学方法：

演示法

课程作业或思考题：

教材第261页

参考资料或常用网址：

教学后记：

本节课的重点是表单将数据传送到服务器上，而难点是让学生真正理解。

为了让学生更快上手，我使用案例导入教学，理解相对简单，这样设计可使学生更容易接受。

教研室主任意见：

**学院教案

课程名称：

网页设计Dreamweaver

任课教师（职称）：

授课对象及时间：

20**级**班2018-2019学年第二学期12月25日3、4节

授课题目（章节）：

第八章

授课题目（章节）：

第八章

基本教材：

Dreamweaver网页设计实用教程

基本教材：

Dreamweaver网页设计实用教程

教学目的（分掌握、熟悉、了解三个层次）：

掌握文本框等表单对象

掌握复选框等表单对象

教学重点*、难点#

表单属性设置

教学主要内容与教学方法：

文本框

是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

代码格式：

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：

密码框

是一种特殊的文本域，用于输入密码。

当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：

教学方法：

演示法、问题引导法

课程作业或思考题：

教材第261页

参考资料或常用网址：

教学后记：

充分发挥师生双方在教学中的主动性和创造性，在教学中努力体现网页设计的实践性和综合性，进行了启发式、问题引导式教学。

多用启发性语言组织课堂教学，努力向“互动式教学模式”发展。

教研室主任意见：