网页设计Dreamweaver教案.docx

1、网页设计Dreamweaver教案 *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期2月28日3、4节 授课题目（章节）：第一章教具：多媒体机房基本教材：Dreamweaver网页设计实用教程课时安排：2教学目的（分掌握、熟悉、了解三个层次）：掌握Dreamweaver CS6基础知识掌握如何将Photoshop设置为图像文件的外部编辑器 。掌握创建网页并插入文档 教学重点*、难点#创建网页并插入文档通过打开“新建文档”对话框来设置新文件的各项参数教学主要内容与教学方法：教学主要内容通过3个工作任务向大家介绍D

2、reamweaver CS6的基本操作。Dreamweaver是一款功能强大的可视化的网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。教学方法：演示法、讲授法课程作业或思考题：教材第28页参考资料或常用网址：教学后记：学生能大致了解基础知识，学生能大致了解网站的一些原理，使学生对网站的认识上了一个阶梯。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：2

3、0*级*班 2018-2019学年第二学期3月14日3、4节授课题目（章节）：第二章教具：多媒体机房基本教材：Dreamweaver网页设计实用教程课时安排：2教学目的（分掌握、熟悉、了解三个层次）：掌握如何创建网站。掌握以FTP连接方式并定义远程站点教学重点*、难点#控制站点结构，管理站点中的每个文件定义远程站点教学主要内容与教学方法：教学主要内容：将通过“以FTP连接方式定义远程站点”和“建立MyTestm网站”共2个工作任务向大家介绍如何创建、设计网站。在完成对站点文件的编辑后，可以用Dreamweaver CS6将本地站点上传到Internet上。在“站点管理”对话框中选择已建立的站点

4、，在弹出的“设置站点对象”对话框中选择“服务器”，添加服务器。教学方法：演示法课程作业或思考题：教材第53页参考资料或常用网址：教学后记：多媒体课件的运用、学生多种感官的参与和生动丰富的教学方式，充分调动了学生学习的兴趣，教师系统讲解保证每一个学生达到了本课基本要求。教研室主任意见：*学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 3月21日3、4节授课题目（章节）：第二章教具：多媒体机房基本教材：Dreamweaver网页设计实用教程课时安排：2教学目的（分掌握、熟悉、了解三个层次）：掌握建立网站。掌握设计、

5、规划站点并对站点进行编辑教学重点*、难点#管理站点文件规划与设计站点教学主要内容与教学方法：教学主要内容：1. 创建本地文件夹、2. 定义本地站点、3. 管理站点文件、4. 打包上传5. 远程与本地站点同步。教学方法：演示法课程作业或思考题：教材第53页参考资料或常用网址：教学后记：使用多媒体教学为学生提供大量的动画、影象、音乐、图片等多媒体素材，直观形象，激发学生学习本节课的兴趣和动力，利用多媒体进行教学，创设了情景，让形象的画面理解自然过渡到对教学内容的理解，这种教学活动自始至终调动了学生多种感官的参与，使学生的情绪始终处于亢奋状态，思维的积极性得到了充分的发挥。教研室主任意见： *学院教

6、案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 3月28日3、4节授课题目（章节）：第三章教具：多媒体机房基本教材：Dreamweaver网页设计实用教程课时安排：2教学目的（分掌握、熟悉、了解三个层次）：了解什么是文本与超链接；掌握各种超级链接掌握输入特殊字符的方法使用“查找和替换”命令教学重点*、难点#创建及编辑链接用特殊键盘输入特殊字符教学主要内容与教学方法：教学主要内容：通过5个工作任务向大家介绍什么是文本与超链接。文本是页面里不可缺少的东西，文本的格式化可以充分体现文档所要表达的重点，比如：在页面里制作一些

7、段落的样式；文档中构建丰富的字体；超级链接是网页中最为重要的部分，单击文档中的超级链接，即可跳转至相应的位置。在添加文本字符时，要在页面中插入诸如等字符，使用 Dreamweaver CS6不费吹灰之力就将这些特殊字符插到页面中，借助输入法的特殊键盘输入特殊字符，单击软键盘上的符号，或者此时在键盘上敲对应的键，就可以输入符号。教学方法：演示法课程作业或思考题：教材第83页参考资料或常用网址：教学后记：采用案例教学，给学生展示最后设计好的作品，课堂气氛很好。给出相应的实例和要求，让学生参与到讲解中。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象

8、及时间：20*级*班 2018-2019学年第二学期 4月4日3、4节授课题目（章节）：第三章授课题目（章节）：第三章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握创建多级列表的方法为网站图标创建图像链接为超链接文本设置动态下划线教学重点*、难点#列表属性为超链接文本设置动态下划线教学主要内容与教学方法：在本任务中，要完成创建多级列表的任务，需要先熟悉添加编号与项目列表、更改编号与项目列表、创建多级列表等内容，进而找到符合实际情况的操作方法。 选取列表项目文字，单击属性面板上的 按钮，生成项目列表，选

9、取次级项目文字，单击“属性”面板上的“文本缩进”按钮，生成次级列表。重复上述操作，最后生成多级列表。在页面中插入作为链接对象的图像。单击选择该图像，打开其“属性”面板，在“属性”面板的“链接”域中设置链接文件。在“属性”面板的“目标”下拉菜单中选择打开链接的窗口，同样有_blank、new、_parent、_self、_top五个选项。教学方法：演示法课程作业或思考题：教材第53页参考资料或常用网址：教学后记：在整个教学过程中教学重点主要都是围绕着如何创建多级列表，特别是在讲解列表属性时每个步骤都做了强调，对于在操作过程中易犯的错误给予讲解。学生能比较好的掌握教学内容教研室主任意见： *学院教

10、案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期4月12日5、6节授课题目（章节）：第四章授课题目（章节）：第四章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握应用图像与多媒体在Dreamweaver的应用掌握设置背景图案教学重点*、难点#多媒体在Dreamweaver的应用在“页面属性”对话框中选择图像，或者在文本框中直接输入背景图像文件的路径和名称。教学主要内容与教学方法：通过3个工作任务向大家介绍图像与多媒体的应用。毋庸

11、置疑，图像的恰当应用能够美化页面，试想，如果没有图像的点缀，只是枯燥的纯文本页面，纵使它有丰富的内容，也难得有人去欣赏。Dreamweaver能够插入并编排页面中图像，并且使用其外置的编辑器对页面中的图像进行编辑，整个操作过程，高效且便捷。将汽车图片设置为背景图案 （1）选择菜单命令“修改”|“页面属性”，打开“页面属性”对话框。 （2）单击对话框中“背景图像”域后面的“浏览”按钮选择图像，或者在文本框中直接输入背景图像文件的路径和名称。 （3）在页面中插入背景图像。课程作业或思考题：教材第111页参考资料或常用网址：教学后记：让学生上台操作展示，充分体现了以学生为本，强调学生的自我操作，强调

12、学生的自我学习，发挥学生的主体教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 4月19日5、6节授课题目（章节）：第四章授课题目（章节）：第四章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握设置多种图像效果掌握插入Flash对象的方法教学重点*、难点#滤镜效果插入Flash元素教学主要内容与教学方法：使用Dreamweaver简便地制作出精美的图像效果。此外，使用同样的方法，选择其他的滤镜效果，或设

13、置其他的参数，可打造出更多精彩Web图像效果。图像名称：在该域中指定翻转图像的名称。原始图像：在该域中指定默认显示的图像。鼠标经过图像：在该域中指定当鼠标经过时显示的图像。在制作此任务时，需要先插入Flash元素，需要准备大小相同的几个图像，本例准备了10个大小相同的图像，并把它们存储在站点根目录相应的文件夹下；之后，将使用Flash元素检查器编辑Flash元素的属性一；最后，将设置和图像有关的各选项。教学方法：演示法课程作业或思考题：教材第111页参考资料或常用网址：教学后记：采取案例教学法，让学生先看到题，再针对题中的教学环节展开讲解知识点，教学效果很好。本课的教学活动循序渐进、螺旋上升,

14、 符合学生的认知规律。教学策略丰富、实用而新颖、独特，突破了学生的认知障碍，突破了难点，优化了课堂教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期4月26日5、6节授课题目（章节）：第五章授课题目（章节）：第五章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握CSS 样式(层叠式样式)的应用教学重点*、难点#CSS样式面板、创建CSS样式、附加外部CSS样式表教学主要内容与教学方法：通过3个工作任务向大

15、家介绍CSS 样式(层叠式样式)的应用。CSS样式常用来同时控制多个文档的格式，并且当 CSS 样式发生变化或更新时，所有链接该样式(即使用该样式格式化)的文档都将随之自动更新。教学方法：演示法、讨论法课程作业或思考题：教材第139页参考资料或常用网址：教学后记：充分调动了学生学习的积极性，本课教学真正体现了“以学生为中心”的教学思想。整节课我都有意识地在情境、合作、活动中让学生体验学习的乐趣，使他们愿学、乐学，同时让他们在感知、感悟的过程中都有所体会，能充分大胆地表露自己的想法，真正做到乐中学，学中乐。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：

16、授课对象及时间：20*级*班 2018-2019学年第二学期5月5日5、6节授课题目（章节）：第五章授课题目（章节）：第五章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握如何改变鼠标正式形状掌握设置特效字体教学重点*、难点#规则定义滤镜的语法格式教学主要内容与教学方法：利用Dreamweaver的CSS样式改变了页面中的鼠标效果。此任务涉及到设置CSS样式参数的知识，其包括设置类型、背景、区块、方框、边框、列表、定位及扩展参数等内容。创建基本页面。单击CSS样式面板上的“新建CSS样式”按钮 ，打开“

17、新建CSS规则”对话框，在该对话框中进行如下设置：在“选择器类型”域中选择“类（可应用于任何标签）”。在“选择器名称”域中输入新建CSS样式的名称“.cursor”。在“规则定义”域中选择“仅对该文档”。完成后单击“确定”按钮利用Glow 滤镜制作了光晕字效果；利用DrowShadow 滤镜制作了阴影字效果；通过为单元格添加 Mask 滤镜制作遮罩字；使用Blur 滤镜制作了动感字。教学方法：演示法、任务驱动法课程作业或思考题：教材第139页参考资料或常用网址：教学后记：适当选取教学策略，促进了学生的整体提高。培养习惯，要悉心引导，严格要求，点点滴滴到位。教研室主任意见： *学院教案 课程名称

18、：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 5月10日5、6节授课题目（章节）：第六章授课题目（章节）：第六章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握制作表格和框架掌握制作线框、间隔和粗线框表格教学重点*、难点#设计版面布局单元格“属性”面板教学主要内容与教学方法：通过3个工作任务讲解表格和框架的制作。如果创建好站点，就可开始着手设计网站了。表格和框架是Dreamweaver中两个设计版面布局的工具，希望通过这些任务的实例操作

19、，使学生能够掌握表格和框架的功能操作。通过对Dreamweaver的表格操作的学习，掌握插入表格、添加内容、选择表格、编辑表格、数据排序、导入/导出数据等相关操作。教学方法：演示法、讨论法课程作业或思考题：教材第191页参考资料或常用网址：教学后记：下大力气提高学生的代码理解能力。为学生构建完整的知识体系，完整的知识体系对学生计算机思维潜力的养成有至关重要的作用，也为他们将来进一步学习网页设计有很大的帮忙。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期5月17日5、6节授课题目（章节）：第六

20、章授课题目（章节）：第六章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握页面布局掌握层的创建、层的基本操作教学重点*、难点#设置框架层与表格的相互转换教学主要内容与教学方法：制作一本电子书，首先要新建HTML页面，通过插入命令选择框架集，进行页面布局，保存顶部及左右侧框架，进而设置框架名称，进行标题栏的创建等操作。通过学习视图布局、网格辅助线及框架的使用，使页面布局工作变得简单而又轻松。利用“Div标签”来定义网页面的内容中的逻辑区域的标签，使网页的排布更具条理；其次，通过Dreamweaver的“层

21、操作”功能，进行层的创建、层的基本操作、层与表格的相互转换等操作。在“属性”面板上设置框架名称，Dreamweaver已经为预定义框架设置了名称，例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时要用到，其他属性默认示。教学方法：演示法课程作业或思考题：教材第191页参考资料或常用网址：教学后记：结合学生实际状况，制定有效地教学策略，充分备好课，上课时做到精讲多练。Div 盒子模型是 CSS 控制页面时一个十分重要的知识点，其定位方法则是重中之重。本节课围绕该问题而展开，以任务驱动的形式带领学生在不断地发现问题，分析问题，解决问题。教研室主任意见： *学院

22、教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 5月30日3、4节授课题目（章节）：第七章授课题目（章节）：第七章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握更改网页的颜色、背景和字体大小 掌握创建嵌套模板教学重点*、难点#“行为”面板的操作设置可编辑区域教学主要内容与教学方法：进行“行为面板”的操作，通过内置行为的操作来设置效果、打开浏览器窗口、弹出消息、调用JavaScript等项目的操作。编辑一份在线的杂志，报头形

23、式不需改变，而标题和内容要时时更新。把每日要更新的内容设为可编辑区，允许编辑，而把报头、栏目标题、版权信息等设为锁定区，不允许编辑。这样使整个网页保持相对一致的风格，便于给浏览者留下好的印象。 （1）创建一个基于基础模板的文档。选择菜单命令“文件”|“另存为模板”，或者单击“插入”面板“常用”分类下的“创建嵌套模板”按钮。 （2）打开“另存模板”对话框，在“另存为”文本框中输入模板的名称，然后单击“保存”按钮，将新建的文档保存为模板。在新模板中加入其他的内容和可编辑区域教学方法：演示法、任务驱动法课程作业或思考题：教材第232页参考资料或常用网址：教学后记：要提高授课的效率，注重授课的艺术，活

24、跃课堂气氛，激发学习兴趣，采用灵活多变的教学方法。在教学过程中，应注意案例与知识教学互相渗透，寓实际案例教育于知识教育之中，让学生认识到学网页设计的重要性，鼓励学生树立远大的理想，努力学好网页设计。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期5月31日7、8节授课题目（章节）：第七章教具：多媒体机房基本教材：Dreamweaver网页设计实用教程课时安排：2教学目的（分掌握、熟悉、了解三个层次）：掌握插入重复区域掌握修改及更新模板教学重点*、难点#把重复区域被插入到模板中更新模板教学主要内

25、容与教学方法：在创建好模板后，还需要对其进行编辑，在本任务中，需要了解创建可编辑区域、创建可选区域、创建重复区域等相关知识。 （1）将插入点放入文档中想要插入重复区域的地方。选择“插入”|“模板对象”|“重复区域”命令。 或单击如图所示的插入栏中“常用”类的“重复区域”按钮 。 （2）在“名称”文本框中为模板区域输入惟一的名称。但不能对一个模板中的多个重复区域使用相同的名称。单击“确定”按钮，重复区域被插入到模板中，如图所示。在制作本任务的过程中，通过打开“资源”面板，在“模板”列表里选择要修改的模板，在“更新面板”对话框中进行设置，即可修改和更新模板。教学方法：演示法课程作业或思考题：教材第

26、232页参考资料或常用网址：教学后记：在教学的设计中要充分为学而教，以学生如何有效获取知识，提高潜力的标准来设计教学。创造条件让学生能够探究他们自己的一些问题，充分调动了学生学习的积极性。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 6月13日3、4节授课题目（章节）：第八章授课题目（章节）：第八章基本教材：Dreamweaver网页设计实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握如何使用表单掌握制作综合表单教学重点*、难点#表单标签

27、表单数据教学主要内容与教学方法：利用表单可以帮助Internet服务器从用户处收集信息，例如收集用户资料、获取用户订单，也可以实现搜索接口。在Internet上也同样存在大量的表单，让你输入文字，让你进行选择。表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作制作

28、的是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。教学方法：演示法课程作业或思考题：教材第261页参考资料或常用网址：教学后记：本节课的重点是表单将数据传送到服务器上，而难点是让学生真正理解。为了让学生更快上手，我使用案例导入教学，理解相对简单，这样设计可使学生更容易接受。教研室主任意见： *学院教案 课程名称：网页设计 Dreamweaver任课教师（职称）：授课对象及时间：20*级*班 2018-2019学年第二学期 12月25日3、4节授课题目（章节）：第八章授课题目（章节）：第八章基本教材：Dreamweaver网页设计

29、实用教程基本教材：Dreamweaver网页设计实用教程教学目的（分掌握、熟悉、了解三个层次）：掌握文本框等表单对象掌握复选框等表单对象教学重点*、难点# 表单属性设置教学主要内容与教学方法：文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。代码格式：多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。代码格式：密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。代码格式：教学方法：演示法、问题引导法课程作业或思考题：教材第261页参考资料或常用网址：教学后记：充分发挥师生双方在教学中的主动性和创造性，在教学中努力体现网页设计的实践性和综合性，进行了启发式、问题引导式教学。多用启发性语言组织课堂教学，努力向“互动式教学模式”发展。教研室主任意见：