《Dreamweaver网设计》教案.docx

1、Dreamweaver网设计教案第1章网页设计基础教学目标与要求熟记站标、导航条、广告条、按钮等网页构成要素，以及网页、网站、IP地址、域名、网址等概念；了解网页的本质和网页的布局类型和HTML文档的基本结构，熟练掌握网站建设的基本流程。教学重点重点：站标、导航条、广告条、网页、网站、IP地址、域名、网址等概念，以及网站建设的流程教学难点难点：IP地址、域名、网址，HTML文档的基本结构及其常见标签教学方法提问、启发、图示、情景教学、案例、课堂讨论教学课时2课时第1章网页设计基础教学提示导入课程：大家会输入文字、制作和处理图像、设计动画，如何把这些作品放到internet中，让更多的人去查阅和

2、欣赏呢？-DW就可以制作网页。1.网页的构成要素和组成元素 网页的构成要素：站标、导航条、广告条、标题栏和按钮； 网页的组成元素：文字、图片、动画（gif、flash）、表单（交互功能）、音频、视频、超链接、表格、框架、导航等。2.网页相关知识简介 基本概念： 网页的本质 网页、网站、主页、互联网 动态网页、静态网页 IP地址、域名、网址（url）、浏览器等概念 网页布局 网页布局的相关概念 常见的布局类型 网站管理与网页制作相关软件 制作和管理网页工具； 制作和优化网页图像工具； 制作网页动画工具； 其中Dreamweaver、fireworks、flash这三个软件合称为网页“三剑客”。

3、其他小工具软件。 HTML语言 HTML的概念 HTML文档的基本结构 几个常见的html标签：html、head、title、style、script、link、meta、body、img、p、font等。 XHTML语言简介 脚本语言简介3.网页的设计理念和配色方案 网页的设计理念 色彩的三要素 网页中的色彩心理与网页表现 色彩搭配应遵循的原则4.网站的开发流程1 网站需求分析2 设计制作网站页面3 空间和域名申请4 测试和发布网站5 网站推广5.典型网站分析 页面结构 色彩运用以提问的方式引入课程采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结构成要素和组成元素。打开一个搜狐主页，

4、保存成不同的类型，让大家看保存的效果，加深对网页本质的理解；先打开一个网页的源文件，结合网络常识，详细讲解网页的定义，然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。以注册和登录邮箱为例，对比讲解动态网页和静态网页的特点和区别。以平顶山学院和搜狐网站的IP地址与域名为例，简要讲述这两个概念。通过查看分析知名网站的网址引入url的定义和组成，其它概念略讲。提醒学生理解并记忆上述概念。打开一网页（详细讲解网页布局效果的教程）让学生讨论、分析总结布局类型。根据学生特点简要讲解ps、flash、fw等软件在网页设计中的功能。打开搜狐主页的源代码，让学生认识一下html语言及其结构，然后分别用记

5、事本和dw创建2个最简单的网页，让学生细看其源代码，并详细讲解8个基本标签及其结构关系，最后根据时间酌情讲解其它几个常见标签。简要讲解这两个概念，然后创建一个网页，复制无缝循环的代码并粘贴到网页的body标签，让学生了解脚本语言的功能。让学生欣赏插入后的效果，吸引学生dw的相关代码。结合上网的经验，让学生总结网页的设计理念。色彩的三要素和心理表现学生在上学期的ps课程中学习过，采用提问法，进行复习；然后打开几个典型网站，分析其配色方案，最后总结网页中色彩运用的原则。根据设计的先后顺序和学生一起分析总结网站的开发流程，并用图加以解释，重点讲解网站的需求分析，以加深学生对重点知识的掌握。采用课堂讨

6、论教学法，打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。作业布置：1.察看并对比分析大型网站（如中国网、着名学校网、着名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、着名出版社网、cctv网站、sohu、yahoo、IBM、微软等）的风格、色彩搭配与布局。2.察看的同时下载自己需要的文章、图片、软件等资源。.课后习题。提问小结：通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。第2章Dreamweaver基础知识教学目标与要求熟悉Dreamweaver8工作界面，熟记几个常用的工具按钮和

7、菜单命令；熟练掌握站点的创建步骤，能快速规范地创建站点；能够快速创建、打开、保存网页文档；能熟练设置页面的属性。教学重点1.创建站点并组织站点的结构;2.在站点中创建网页3.页面的属性设置教学难点HTML基础教学方法举例为主，适当讲授操作要领，提问以测试课题效果。教学课时2课时第2章Dreamweaver基础知识教学提示我们一贯都是浏览网页，想自己动手做网站吗？用什么工具做网站？怎样做呢？-Dreamweaver网页制作工具。2.1熟悉Dreamweaver8工作界面2.2网站创建与管理2.2.1站点的定义、组成和结构2.2.2网页文档与文件夹命名规则2.2.3创建本地站点的步骤2.2.4组织

8、站点结构2.3网页文档基本操作新建、保存、预览、打开、关闭2.4基本页面属性设置制定文档标题和边距、网页背景颜色和背景图像，为网页设置文本属性、链接属性和跟踪图像的属性，总结页面的使用的技巧：抛出问题，引入新课启动dw，详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用，区分标签检查器、标签选择器、标记选择符3个概念及其作用详细讲解站点的定义、组成、结构，以及文件和文件夹的命名规则。演示站点的创建过程和步骤，着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原则。分别演示这几个操作通过dw设计视图分别创建1个网页，分别演示文档标题和边距、背景颜色和背景图像、文本和链接属性，以及跟

9、踪图像的属性的设置方法和步骤，帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。作业：习题一第1，2,3题小结：本次课内容操作性很强，经过学生自己上台操作，发现大多数学生都能创建并组织好一个站点，还能快速地设置网页的属性，达到了教学目标的要求。第3章网页中的基本元素教学目标与要求1.熟练操作网页中的文本；2.熟练插入各种格式的图像并设置其属性；3.了解图像切片的作用；4.熟练制作图像切片，并插入到dw中教学重点1.文本对象的插入和格式设置；2.GIF、PNG和JPEG三种图像格式的异同点和使用环境；3.用fireworks制作网页切片的方法；教学难点1.设置文本标题；段落的

10、设置效果；2.GIF、PNG和JPEG三种图像格式的异同点和使用环境；3.Dreamweaver8.0中使用图像的一些基本方法和技巧；4.在dreamweaver中插入用fireworks制作的切片教学方法课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课题效果，实验式教学。教学课时4课时第3章网页中的基本元素教学提示复习上节内容：1 如何创建站点？2 如何站点结构的组织3.1网页中文本的操作.认识文本按钮及属性面板 思考题：根据以前所学知识说出文本的编辑和设置属性各包括几个方面？.插入文本和对象 将文本（英文、中文、数字）添加到文档中的3种方法。 插入特殊字符 水平线 插入日期：菜单法；插

11、入栏按钮法 对插入的文本也可以执行删除、搜索、替换、检查拼写（文本检查拼写shift+f7）等操作。.设置文本格式字符的样式包括的方面及其设置方法.设置文本标题标题的含义与作用3.设置段落效果1.设置段落格式.缩进段落对齐段落（4种对齐方式）.分段与换行的相关操作和区别：.创建项目列表.网页图像的运用.网页中图像格式简介1.图像在网页中的作用和网页中常用图像格式有：GIF、JPEG、PNG。2.三种图像格式的特点和在网页中的使用场合。在Web页上显示图片之前，通常需要考虑下列三个问题：.在网页中使用图像1.插入图像：2.插入图像占位符：注意图像占位符的命名规则和作用3.创建鼠标经过图象（轮换图

12、像）4.在dw中图像的编辑功能仅适用于GIF和JPEG图像格式。 在属性检面板中编辑图像，上述设置也可通过菜单实现：修改-图像 用fireworks优化图像。热点工具的使用和图像热区的添加.设置图文混排的效果：7.制作电子相册：命令创建网站相册3.2.3切片在fw中的创建和在dw使用打开大图片网页时，总是等待很长时间，怎样处理才能减少图片的下载时间呢？-做成切片。1.切片的定义和作用2.切片在fw中的创建方法和步骤3.在DW中插入FireworksHTML（切片）的方法和步骤将FireworksHTML插入到Dreamweaver中的方法。方法1：将切片从Fireworks复制到剪贴板上，然后

13、直接粘贴到Dreamweaver文档代码视图中的相应位置处。方法2：直接将FireworksHTML插入到Dw中的操作步骤.网页多媒体的运用3.3.1在网页中使用视频flash1.网页中常见的视频文件格式和插入方法；2.常见的flash文件格式和插入方法；flash文件（.fla格式）、flash影片文件（.swf格式）、flash模板文件（swt格式）、flash元素文件（.swc格式）、flash视频文件（.flv格式）3.3.2在网页中使用音频添加声音需要考虑的因素：添加的的、文件大小、声音品质和在不同浏览器中的差异。1.音频文件的格式和相应的特点： 网页中常见的音频格式有： mid/m

14、idi格式：。 wav和aif（aiff）文件2.在网页中插入音频文件的2种方式： 链接到音频文件 嵌入声音文件3.4dw扩展插件1.安装扩展插件2.使用扩展插件使用扩展插件主要有2个步骤：1 先安装插件2 然后启动dreamweaver，在相应的位置找到调用扩展的命令即可。3.在“类型”栏中显示扩展的类型含义：类型含义对象在dw界面的“插入”工具栏调用该扩展插件命令在dw的“命令”菜单中调用扩展行为在dw的“行为”面板中调用扩展4.常用扩展插件的安装和使用Pagetransitions有超级链接时，页过渡（进入/退出）效果命令要选定整个页面（即body标签），再在命令菜单中找到该命令即可实现

15、（效果见实例站点中guodong1.html、guodong2.html、guodong3.html）Typewriter.mxp模拟打字行为先把要添加该效果的对象放入AP元素中，然后在行为面板中找到yaromat|typewriter即可实现，文字的打印效果就显示在AP元素中。(guodong1.html中打印文字）Sound.mxp插入背景音乐对象要选定整个页面（即body标签），再在“常用”插入栏中找到sound按钮即可实现Marquee.mxp滚动文字插件对象要选定整个页面（即body标签），再在“常用”插入栏中找到marquee按钮即可实现InsertGreeting.mxp插入问候

16、语对象把光标定位在页面的合适位置，然后选择“插入”栏中的“CNInsertGreeting”按钮即可实现Calander.mxp对象把光标定位在页面的合适位置，然后选择“插入”栏中的“calander”按钮即可实现Persistentlayers滚动链接的AP元素行为先把要添加该效果的对象放入AP元素中，然后在行为面板中找到ribberszeewolde|Persistentlayers即可实现，一般用来显示广告信息。（guodong1.html中的”送给你了“）以提问的方式复习上次课内容结合WORD，通过复习的方式，总结dw中文本的操作；先简要演示一下各种文本符号的插入方法，然后输入一首小诗

17、，调整其格式；接着复制一篇文章粘贴到dw中；最后导入一篇word文档；先简要讲述一下文本格式、标题、段落的设置的含义和步骤，然后让学生走上讲台对上述插入的文本设置相应的字符格式、标题级别、段落效果，并选择个别段落创建项目列表，以加深印象。通过比较法讲解各图像格式的特点举例：在文档中插入各种图像对象，并设置其格式属性。演示制作图像热区和图文混排的效果；演示制作电子相册以问题的形式引入切片的定义和作用。本内容尽量调整在机房讲解。详细讲解并演示切片在fw中制作和在dw中插入的方法与步骤。用比较法总结网页中出现的视频文件的格式及其特点，举例讲解视频文件的插入方法和属性设置；用比较法总结网页中出现的fl

18、ash文件的格式及其特点，重点讲解flash按钮、flash文本和flash视频的插入方法和属性设置；用比较法总结网页中常见的音频文件格式及其特点。举例演示音频文件的插入和属性设置，重点讲解背景音乐的插入和设置。重点讲解页面过度效果、sound、marquee和滚动链接的AP元素4个插件的用法和设置先演示这几个常用扩展插件的安装和使用方法，然后让学生上台操作，教师指点操作过程和方法扩展这本分内容安排到行为之后讲解作业：1.填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体_（如粗体或斜体）和_。（2）若要插入更多的特殊字符，请选择_|_|_或在_栏中

19、选择_图标，选择一个字符，然后单击【确定】。（3）在计算机领域中，图像分为_和_2大类。（4）GIF图像采用的是_压缩格式。2.选择题（1）在网页中连续输入空格的方法是_。A连续按空格键 B按下Ctrl键再连续按空格键C转换到中文的全角状态下连续按空格键D按下Shift键再连续按空格键（2）网页通常可以支持的图像格式有_。AGIFBBMPCAVIDPSDEPNGFJPEG。3.简答题（1）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式最好？(2)如何创建鼠标变换图像和图像热点？4.操作题：搜集自己的喜爱的图片，制作一

20、个电子相册。小结：本章内容较多，但交简单，需要边讲解边对比总结，通过对比总结和学生上台操作演示，从学生上机的作业来看，授课效果很好。第4章使用表格与布局表格布局网页教学目标与要求1.了解表格和布局表格在网页布局中的作用；2.掌握表格和布局表格的插入方法和基本编辑方法；3.掌握表格和布局表格、单元格和布局单元格的属性设置；4.通过对表格和布局表格的学习，提高学生学习网页制作的兴趣，增强学生的审美观教学重点1 表格的插入方法、基本编辑方法与应用；2 布局表格和布局单元格的绘制方法、属性设置与应用教学难点1.表格和单元格的属性设置与应用；2.布局表格和布局单元格的绘制与属性设置教学方法多媒体演示，案

21、例教学，任务驱动，引导教学；提问式教学。教学课时2学时第4章使用表格与布局表格布局网页教学提示用表格控制文字、图片、动化等对象的位置，使网页的布局紧凑又整齐美观。常用的页面设计布局类型有：表格、布局表格和AP元素三种，本章着重讲解如何使用表格和布局表格布局页面。4.1.表格模式1.dw中表格的3种模式2.模式切换的操作方式：查看-表格模式-标准模式/布局模式/表格扩展模式。3.模式的区别与注意事项： 只有在“设计”视图中才可切换到“布局”模式； 在不同模式下，工具栏的各个按钮作用不同； 在布局模式中不能像布局表格的空白区域插入内容，只能创建布局单元格，布局单元格才是承载具体内容的容器。4.2使

22、用表格布局网页1表格的作用2.表格的组成部分表格的行、列、单元格、边距、间距、边框3.表格的标记 标记、标记、标记 三者的对应位置关系4.表格的基本操作 表格的插入、选择、删除、大小调整； 单元格的选择、合并、拆分、大小调整； 表格在“扩展表格”模式和“标准”模式下的应用5.嵌套表格 表格嵌套的作用 创建嵌套表格的操作方法。6.导入和导出表格数据、7.表格布局网页的应用实例8.表格布局的缺点4.3布局表格布局网页1.绘制布局表格绘制布局表格的注意事项：2.绘制布局单元格绘制布局单元格的注意事项：3.设置布局表格和布局单元格的属性和参数4.在布局单元格中添加内容5.课堂实例用布局表格布局网站主页

23、展示一个布局合理、美观的网页，激起学生的学习兴趣。简要讲解并3种表格模式的作用，重点演示不同模式下按钮的使用回顾word和excel中讲过的有关表格的概念和基本操作，引入dw中表格的概念和基本操作。重点讲解表格的属性设置含义。插入一个表格，并在每个格中插入不同的内容，然后切换到代码视图，让学生识记三个标签。逐一演示表格的各个基本操作。重点讲解创建嵌套表格的原因打开一个示例网页，让学生上讲台比照着制作出相同效果讨论总结表格布局的缺点重点演示并总结绘制布局表格和布局单元格的注意事项。演示设置布局表格和单元格的属性；在设置好属性的布局单元格中添加文章、图像和多媒体。先和学生一起分析左侧网页的操作思路

24、和主要步骤，然后让学生上台操作，以加深印象。作业：课堂作业：1.叙述3种模式的概念及切换方法。2.说出表格和布局表格的作用3.叙述“表格扩展模式”的作用4.什么是间隔图像？书面作业：课后习题。小结：通过与学生熟悉的word中表格的操作对照讲解，本章的讲解显得较轻松；让学生上台操作，提高了学生的学习积极性和主动性，教学效果较好。第5章使用框架布局网页教学目标与要求了解框架网页的概念；熟练创建、保存框架网页，并设置框架和框架集的属性；框架中超级链接的创建和目标属性设置教学重点熟练创建保存框架网页，并设置框架和框架集的属性；框架中超级链接的创建和目标属性设置教学难点框架网页的概念和保存；框架中超级链

25、接的创建和目标属性设置教学方法多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。教学课时2学时第5章框架网页教学提示5.1框架和框架集的概念、结构和应用1.基本概念 框架网页、框架集、框架 框架和框架集的关系2框架网页的结构3.认识框架面板：4.框架网页的应用：通常用于导航。5.框架网页的优缺点5.2创建和保存框架与框架集5.2.1使用预设的框架集1.创建新的空预设框架的具体操作步骤。修改框架名称必须以字母开头，可以包含数字、下划线（_）；但不允许是javascript中的保留字（如top或navigator）、连字符（-）、句点、空格和；而且区分大小写。2.创建预

26、设的框架集并在某一框架中显示现有文档5.2.2创建和编辑框架1.创建框架2.删除框架3.建立嵌套的框架集4.保存框架和框架集5.3设置框架及框架集的属性1.选择框架：通过“框架”面板来选择框架和子框架。2.设置框架属性 框架的背景颜色可以在页面属性中进行设置 在框架的属性面板中进行设置框架的的名称、源文件、链接、边距、滚动、边框和能否调整大小等。3.设置框架集属性：边框、边框大小和边框颜色。5.4设置框架集中的超级链接5.4.1在框架网页中建立超链接5.4.2框架网页中设置超级链接的目标打开方式1.相对链接目标：_blank、_top、_parent、_self2.绝对链接目标：mainfra

27、me、Leftframe、Rightframe、Topframe。5.6课堂实例制作一个框架网页通过看看和分析知名网站使用框架的布局效果，引入框架和框架集的概念举例演示框架的创建和保存操作打开框架面板，查看并总结框架和框架集的属性设置及其含义演示框架中的超级链接效果举例演示框架网页的设计与制作作业：1.使用框架的优点是什么？2.课后习题小结：本章介绍了框架网页的创建、保存和属性设置，着重讲解了框架网页的中超级链接的创建和目标设置，内容较少，授课效果较好。第6章AP元素的创建和使用教学目标与要求理解AP元素的作用；熟记AP元素的命名原则和特点；掌握绘制AP元素和插入AP元素的方法和区别；熟练设置AP元素的属性；灵活、合理地使AP元素随心所欲的布局页面内容。