《Dreamweaver网页设计》教案.doc

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

2、人去查阅和欣赏呢？-DW 就可以制作网页。1.网页的构成要素和组成元素 网页的构成要素：站标、导航条、广告条、标题栏和按钮； 网页的组成元素：文字、图片、动画（gif、flash） 、表单（交互功能） 、音频、视频、超链接、表格、框架、导航等。2.网页相关知识简介基本概念： 网页的本质 网页、网站、主页、互联网以提问的方式引入课程采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结构成要素和组成元素。打开一个搜狐主页，保存成不同的类型，让大家看保存的效果，加深对网页本质的理解；先打开一个网页的源文件，结合网络常识，详细讲解网页的定义，然后略讲网站和主页的概念。并提醒同学理解并记忆这些概念。3

3、 动态网页、静态网页 IP 地址、域名、网址（url） 、浏览器等概念网页布局 网页布局的相关概念 常见的布局类型网站管理与网页制作相关软件 制作和管理网页工具； 制作和优化网页图像工具； 制作网页动画工具； 其中 Dreamweaver、 fireworks、 flash 这三个软件合称为网页“三剑客” 。 其他小工具软件。 HTML 语言 HTML 的概念 HTML 文档的基本结构 几个常见的 html 标签： html、head、title、style、script、link、meta、body、img、p、font 等。 XHTML 语言简介 脚本语言简介 3.网页的设计理念和配色方案

4、 网页的设计理念 色彩的三要素以注册和登录邮箱为例，对比讲解动态网页和静态网页的特点和区别。以平顶山学院和搜狐网站的 IP 地址与域名为例，简要讲述这两个概念。通过查看分析知名网站的网址引入url 的定义和组成，其它概念略讲。提醒学生理解并记忆上述概念。打开一网页（详细讲解网页布局效果的教程）让学生讨论、分析总结布局类型。根据学生特点简要讲解ps、flash、fw 等软件在网页设计中的功能。打开搜狐主页的源代码，让学生认识一下 html 语言及其结构，然后分别用记事本和 dw 创建 2 个最简单的网页，让学生细看其源代码，并详细讲解 8 个基本标签及其结构关系，最后根据时间酌情讲解其它几个常见

5、标签。简要讲解这两个概念，然后创建一个网页，复制无缝循环的代码并粘贴到网页的 body 标签，让学生了解脚本语言的功能。让学生欣赏插入后的效果，吸引学生 dw 的相关代码。结合上网的经验，让学生总结网页的设计理念。色彩的三要素和心理表现学生在上4 网页中的色彩心理与网页表现 色彩搭配应遵循的原则4.网站的开发流程 网站需求分析 设计制作网站页面 空间和域名申请 测试和发布网站 网站推广制作页面第二阶段：创建站点，设计制作各级页面规划网站 准备素材定义站点 设置页面属性第一阶段：网站需求分析第三阶段：申请空间和域名第四阶段：测试和发布网站第五阶段：网站推广5.典型网站分析 页面结构 色彩运用学期

6、的 ps 课程中学习过，采用提问法，进行复习；然后打开几个典型网站，分析其配色方案，最后总结网页中色彩运用的原则。根据设计的先后顺序和学生一起分析总结网站的开发流程，并用图加以解释，重点讲解网站的需求分析，以加深学生对重点知识的掌握。采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。作业布置：1.察看并对比分析大型网站（如中国网、著名学校网、著名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、著名出版社网、cctv 网站、sohu 、yahoo、IBM、微软等）的风格、色彩搭配与布局。2 .察看的同时下载自己需要的文章、图片、软件等资源

7、。.课后习题。提问小结：通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。5第 2 章 Dreamweaver 基础知识教学目标与要求熟悉 Dreamweaver 8 工作界面 ，熟记几个常用的工具按钮和菜单命令；熟练掌握站点的创建步骤，能快速规范地创建站点；能够快速创建、打开、保存网页文档；能熟练设置页面的属性。教学重点1.创建站点并组织站点的结构;2. 在站点中创建网页 3.页面的属性设置教学难点 HTML 基础教学方法 举例为主，适当讲授操作要领，提问以测试课题效果。教学课时 2 课时第 2 章 Dreamweaver 基础

8、知识 教学 提示我们一贯都是浏览网页，想自己动手做网站吗？用什么工具做网站？怎样做呢？- Dreamweaver 网页制作工具。2.1 熟悉 Dreamweaver 8 工作界面 2.2 网站创建与管理 2.2.1 站点的定义、组成和结构 2.2.2 网页文档与文件夹命名规则 2.2.3 创建本地站点的步骤2.2.4 组织站点结构2.3 网页文档基本操作 新建、保存、预览、打开、关闭2.4 基本页面属性设置 制定文档标题和边距、网页背景颜色和背景图像，为网页设置文本属性、链接属性和跟踪图像的属性，总结页面的使用的技巧：抛出问题，引入新课启动 dw，详细讲解插入栏、文档标签与“文档”工具栏、状态

9、栏的作用，区分标签检查器、标签选择器、标记选择符 3 个概念及其作用 详细讲解站点的定义、组成、结构，以及文件和文件夹的命名规则。演示站点的创建过程和步骤，着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原则。分别演示这几个操作通过 dw 设计视图分别创建 1 个网页，分别演示文档标题和边距、背景颜色和背景图像、文本和链接属性，以及跟踪图像的属性的设置方法和步骤，帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。6作业：习题一第 1，2, 3 题小结：本次课内容操作性很强，经过学生自己上台操作，发现大多数学生都能创建并组织好一个站点，还能快速地设置网页的属性，达

10、到了教学目标的要求。7第 3 章 网页中的基本元素教学目标与要求1.熟练操作网页中的文本；2.熟练插入各种格式的图像并设置其属性；3.了解图像切片的作用；4.熟练制作图像切片，并插入到 dw 中教学重点1.文本对象的插入和格式设置；2.GIF、PNG 和 JPEG 三种图像格式 的异同点和使用环境；3.用 fireworks 制作网页切片的方法； 教学难点1.设置文本标题；段落的设置效果；2.GIF、PNG 和 JPEG 三种图像格式的异同点和使用环境；3.Dreamweaver 8.0 中使用图像的一些基本方法和技巧；4. 在 dreamweaver 中插入用 fireworks 制作的切片

11、教学方法课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课题效果，实验式教学。教学课时 4 课时第 3 章网页中的基本元素 教学提示复习上节内容：1 如何创建站点？2 如何站点结构的组织3.1 网页中文本的操作. 认识文本按钮及属性面板 思考题：根据以前所学知识说出文本的编辑和设置属性各包括几个方面？. 插入文本和对象 将文本（英文、中文、数字）添加到文档中的 3 种方法。 插入特殊字符 水平线 插入日期：菜单法；插入栏按钮法 对插入的文本也可以执行删除、搜索、替换、检查拼写（文本检查拼写shift+f7）等操作。以提问的方式复习上次课内容结合 WORD，通过复习的方式，总结 dw中文本的操

12、作； 先简要演示一下各种文本符号的插入方法，然后输入一首小诗，调整其格式；接着复制一篇文章粘贴到 dw 中；最后导入一篇 word文档； 8. 设置文本格式 字符的样式包括的方面及其设置方法. 设置文本标题标题的含义与作用3. 设置段落效果 1 . 设置段落格式 .缩进段落对齐段落 （4 种对齐方式）.分段与换行的相关操作和区别：.创建项目列表.网页图像的运用.网页中图像格式简介1. 图像在网页中的作用和网页中常用图像格式有：GIF 、JPEG 、PNG。2.三种图像格式的特点和在网页中的使用场合。 在 Web 页上显示图片之前，通常需要考虑下列三个问题：.在网页中使用图像1.插入图像：2.插

13、入图像占位符：注意图像占位符的命名规则和作用3.创建鼠标经过图象（轮换图像）4. 在 dw 中图像的编辑功能仅适用于 GIF 和 JPEG 图像格式。 在属性检面板中编辑图像，上述设置也可通过菜单实现：修改-图像 用 fireworks 优化图像。热点工具的使用和图像热区的添加 .设置图文混排的效果：7.制作电子相册：命令创建网站相册3.2.3 切片在 fw 中的创建和在 dw 使用打开大图片网页时，总是等待很长时间，怎样处理才能减少图片的下载时间呢？-做成切片。1.切片的定义和作用先简要讲述一下文本格式、标题、段落的设置的含义和步骤，然后让学生走上讲台对上述插入的文本设置相应的字符格式、标题

14、级别、段落效果，并选择个别段落创建项目列表，以加深印象。通过比较法讲解各图像格式的特点举例：在文档中插入各种图像对象，并设置其格式属性。演示制作图像热区和图文混排的效果；演示制作电子相册以问题的形式引入92.切片在 fw 中的创建方法和步骤3.在 DW 中插入 Fireworks HTML（切片）的方法和步骤 将 Fireworks HTML 插入到 Dreamweaver 中的方法。方法 1：将切片从 Fireworks 复制到剪贴板上，然后直接粘贴到 Dreamweaver 文档代码视图中的相应位置处。方法 2：直接将 Fireworks HTML 插入到 Dw 中的操作步骤.网页多媒体的

15、运用3.3.1 在网页中使用视频 flash1.网页中常见的视频文件格式和插入方法；2.常见的 flash 文件格式和插入方法；flash 文件（.fla 格式） 、flash 影片文件（.swf 格式） 、flash模板文件（swt 格式） 、flash 元素文件（.swc 格式） 、flash 视频文件（.flv 格式）3.3.2 在网页中使用音频添加声音需要考虑的因素：添加的的、文件大小、声音品质和在不同浏览器中的差异。1.音频文件的格式和相应的特点： 网页中常见的音频格式有： mid/midi 格式：。 wav 和 aif（aiff）文件2.在网页中插入音频文件的 2 种方式： 链接到

16、音频文件 嵌入声音文件3.4dw 扩展插件1.安装扩展插件2.使用扩展插件切片的定义和作用。本内容尽量调整在机房讲解。详细讲解并演示切片在 fw中制作和在 dw 中插入的方法与步骤。用比较法总结网页中出现的视频文件的格式及其特点，举例讲解视频文件的插入方法和属性设置；用比较法总结网页中出现的 flash 文件的格式及其特点，重点讲解 flash 按钮、flash 文本和flash 视频的插入方法和属性设置；用比较法总结网页中常见的音频文件格式及其特点。举例演示音频文件的插入和属性设置，重点讲解背景音乐的插入和设置。重点讲解页面过度10使用扩展插件主要有 2 个步骤： 先安装插件 然后启动 dr

17、eamweaver，在相应的位置找到调用扩展的命令即可。3.在“类型”栏中显示扩展的类型含义：类型 含义对象 在 dw 界面的“插入”工具栏调用该扩展插件命令 在 dw 的“命令”菜单中调用扩展行为 在 dw 的“行为”面板中调用扩展4.常用扩展插件的安装和使用Page transitions有超级链接时，页过渡（进入/退出）效果命令要选定整个页面（即 body 标签） ，再在命令菜单中找到该命令即可实现（效果见实例站点中 guodong1.html、 guodong2.html 、 guodong3.html ）Typewriter.mxp模拟打字行为先把要添加该效果的对象放入 AP 元素中

18、，然后在行为面板中找到yaromat|typewriter 即可实现，文字的打印效果就显示在 AP 元素中。 (guodong1.html 中打印文字）Sound.mxp插入背景音乐对象要选定整个页面（即 body 标签） ，再在“常用”插入栏中找到 sound 按钮即可实现Marquee.mxp滚动文字插件对象要选定整个页面（即 body 标签） ，再在“常用”插入栏中找到 marquee 按钮即可实现Insert Greeting.mxp插入问候语对象把光标定位在页面的合适位置，然后选择“插入”栏中的“CN Insert Greeting”按钮即可实现Calander.mxp 对 把光标定位在页面的合适位置，然后选择效果、sound、marquee 和滚动链接的 AP 元素 4 个插件的用法和设置先演示这几个常用扩展插件的安装和使用方法，然后让学生上台操作，教师指点操作过程和方法 扩展这本分内容安排到行为之后讲解