《《Dreamweaver网页设计》教案.pdf》由会员分享，可在线阅读，更多相关《《Dreamweaver网页设计》教案.pdf（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第 1 1 章章网页设计基础网页设计基础熟记站标、导航条、广告条、按钮等网页构成要素，以教学目标与要求及网页、网站、IP 地址、域名、网址等概念；了解网页的本质和网页的布局类型和 HTML 文档的基本结构，熟练掌握网站建设的基本流程。教学重点重点：站标、导航条、广告条、网页、网站、IP 地址、域名、网址等概念，以及网站建设的流程难点：IP 地址、域名、网址，HTML 文档的基本结构及其常见标签提问、启发、图示、情景教学、案例、课堂讨论2 课时教学难点教学方法教学课时第第 1 1 章章网页设计基础网页设计基础教学提示导入课程：大家会输入文字、制作和处理图像、以提问的方式引入课程设计动画，如何把
2、这些作品放到 internet 中，让更多的人去查阅和欣赏呢？-DW 就可以制作网页。1.网页的构成要素和组成元素网页的构成要素：站标、导航条、广告条、标题栏和按钮；采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结构成要素和组成元素。网页的组成元素：文字、图片、动画（gif、打开一个搜狐主页，保存成flash）、表单（交互功能）、音频、视频、超链接、表格、框架、导航等。2.网页相关知识简介基本概念：网页的本质网页、网站、主页、互联网动态网页、静态网页IP 地址、域名、网址（url）、浏览器等概念网页布局不同的类型，让大家看保存的效果，加深对网页本质的理解；先打开一个网页的源文件，结合网络
3、常识，详细讲解网页的定义，然后略讲网站和主页的概念。并提醒同学理网页布局的相关概念常见的布局类型网站管理与网页制作相关软件制作和管理网页工具；制作和优化网页图像工具；制作网页动画工具；解并记忆这些概念。以注册和登录邮箱为例，对比讲解动态网页和静态网页的特点和区别。其中 Dreamweaver、fireworks、以平顶山学院和搜狐网站flash 这三个软件 合称 为网页的 IP 地址与域名为例，简“三剑客”。其他小工具软件。HTML 语言HTML 的概念HTML 文档的基本结构要讲述这两个概念。通过查看分析知名网站的网址引入 url 的定义和组成，其它提醒学生理解并几个常见的 html 标签：
4、html、概念略讲。head、title、style、script、link、meta、body、img、p、font等。XHTML 语言简介脚本语言简介3.网页的设计理念和配色方案网页的设计理念色彩的三要素网页中的色彩心理与网页表现色彩搭配应遵循的原则规划网站准备素材4.网站的开发流程第二阶段：创建站点，设计制作各级页面第二阶段：创建站点，设计制作各级页面 网站需求分析定义站点设置页面属性 设计制作网站页面制作页面记忆上述概念。打开一网页（详细讲解网页布局效果的教程）让学生讨论、分析总结布局类型。根据学生特点简要讲解ps、flash、fw 等软件在网页设计中的功能。打开搜狐主页的源代码，让学
5、生认识一下 html 语言及其结构，然后分别用记事本和 dw 创建 2 个最简单的网页，让学生细看其源代码，并详细讲解 8 个基本标签第一阶段：网站需求分析第一阶段：网站需求分析 空间和域名申请 测试和发布网站 网站推广第三阶段：申请空间和域名第三阶段：申请空间和域名第四阶段：测试和发布网站第四阶段：测试和发布网站第五阶段：网站推广第五阶段：网站推广5.典型网站分析页面结构色彩运用及其结构关系，最后根据时间酌情讲解其它几个常见标签。简要讲解这两个概念，然后创建一个网页，复制无缝循环的代码并粘贴到网页的body 标签，让学生了解脚本语言的功能。让学生欣赏插入后的效果，吸引学生 dw 的相关代码。
6、结合上网的经验，让学生总结网页的设计理念。色彩的三要素和心理表现学生在上学期的 ps 课程中学习过，采用提问法，进行复习；然后打开几个典型网站，分析其配色方案，最后总结网页中色彩运用的原则。根据设计的先后顺序和学生一起分析总结网站的开发流程，并用图加以解释，重点讲解网站的需求分析，以加深学生对重点知识的掌握。采用课堂讨论教学法，打开几个典型的网页让同学们讨论总结网站的构成要素、组成元素、布局结构和配色方案。作业布置：1.察看并对比分析大型网站（如中国网、着名学校网、着名医院网、官方网、科技网、娱乐休闲运动网、儿童网、体育网、着名出版社网、cctv 网站、sohu、yahoo、IBM、微软等）的
7、风格、色彩搭配与布局。2.察看的同时下载自己需要的文章、图片、软件等资源。.课后习题。小结：通过提问、启发、图示、情景教学、课堂讨论等教学方法的综合运用，提高了学生的学习兴趣，从学生的反应看，授课效果很好。提问第第 2 2 章章 Dreamweaver Dreamweaver 基础知识基础知识熟悉 Dreamweaver 8 工作界面，熟记几个常用的工具按教学目标与要求钮和菜单命令；熟练掌握站点的创建步骤，能快速规范地创建站点；能够快速创建、打开、保存网页文档；能熟练设置页面的属性。教学重点教学难点教学方法教学课时1.创建站点并组织站点的结构;2.在站点中创建网页 3.页面的属性设置HTML
8、基础举例为主，适当讲授操作要领，提问以测试课题效果。2 课时第第 2 2 章章 Dreamweaver Dreamweaver 基础知识基础知识我们一贯都是浏览网页，想自己动手做网站教学提示抛出问题，引入新课吗？用什么工具做网站？怎样做呢？-启动 dw，详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用，区分标签检查器、标签选2.1熟悉 Dreamweaver 8 工作界面择器、标记选择符 3 个概2.2网站创建与管理念及其作用详细讲解站点的定义、组2.2.1站点的定义、组成和结构成、结构，以及文件和文2.2.2网页文档与文件夹命名规则件夹的命名规则。演示站点的创建过程和2.2.3 创建本
9、地站点的步骤步骤，着重提出保存和站2.2.4 组织站点结构点文件夹的命名。2.3 网页文档基本操作详细讲解站点结构的组织方法和原则。新建、保存、预览、打开、关闭分别演示这几个操作2.4基本页面属性设置通过 dw 设计视图分别创制定文档标题和边距、网页背景颜色和背建 1 个网页，分别演示文景图像，为网页设置文本属性、链接属性档标题和边距、背景颜色和背景图像、文本和链接和跟踪图像的属性，总结页面的使用的技属性，以及跟踪图像的属巧：性的设置方法和步骤，帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。Dreamweaver 网页制作工具。作业：习题一第 1，2,3 题小结：本次课
10、内容操作性很强，经过学生自己上台操作，发现大多数学生都能创建并组织好一个站点，还能快速地设置网页的属性，达到了教学目标的要求。第第 3 3 章章网页中的基本元素网页中的基本元素1.熟练操作网页中的文本；教学目标与要求2.熟练插入各种格式的图像并设置其属性；3.了解图像切片的作用；4.熟练制作图像切片，并插入到 dw 中1.文本对象的插入和格式设置；教学重点2.GIF、PNG 和 JPEG 三种图像格式 的异同点和使用环境；3.用 fireworks 制作网页切片的方法；1.设置文本标题；段落的设置效果；教学难点2.GIF、PNG 和 JPEG 三种图像格式的异同点和使用环境；3.Dreamwe
11、aver 8.0 中使用图像的一些基本方法和技巧；4.在 dreamweaver 中插入用 fireworks 制作的切片教学方法教学课时课堂讲授为辅，多媒体演示为主，适当举例，提问以测试课题效果，实验式教学。4 课时第第 3 3 章网页中的基本元素章网页中的基本元素复习上节内容：教学提示以提问的方式复习上次课内1如何创建站点？容2如何站点结构的组织结合 WORD，通3.13.1 网页中文本的操作网页中文本的操作过 复 习 的 方.认识文本按钮及属性面板式，总结dw 中思考题：根据以前所学知识说出文本的编辑和设置属性文本的操作；各包括几个方面？先简要演示一.插入文本和对象下各种文本符将文本（英
12、文、中文、数字）添加到文档中的3 种方号 的 插 入 方法。法，然后输入一首小诗，调插入特殊字符整其格式；接水平线着复制一篇文插入日期：菜单法；插入栏按钮法章粘贴到 dw对插入的文本也可以执行删除、搜索、替换、检查拼中；最后导入写（文本检查拼写shift+f7）等操作。一篇 word 文.设置文本格式档；字符的样式包括的方面及其设置方法先简要讲述一.设置文本标题下文本格式、标题的含义与作用标题、段落的3.设置段落效果设置的含义和步骤，然后让1.设置段落格式学生走上讲台.缩进段落对上述插入的对齐段落（4 种对齐方式）文本设置相应.分段与换行的相关操作和区别：的字符格式、.创建项目列表标题级别、段
13、.网页图像的运用网页图像的运用落效果，并选.网页中图像格式简介择个别段落创 1.图像在网页中的作用和网页中常用图像格式有：建项目列表，GIF、JPEG、PNG。以加深印象。2.三种图像格式的特点和在网页中的使用场合。通过比较法讲在 Web 页上显示图片之前，通常需要考虑下列三个问题：解各图像格式的特点举例：在文档1.插入图像：中插入各种图2.插入图像占位符：注意图像占位符的命名规则和作用像对象，并设3.创建鼠标经过图象（轮换图像）置 其 格 式 属4.在 dw 中图像的编辑功能仅适用于 GIF 和 JPEG 图像格式。性。在属性检面板中编辑图像，上述设置也可通过菜单实演示制作图像现：修改-图像
14、热区和图文混用 fireworks 优化图像。排的效果；演热点工具的使用和图像热区的添加示制作电子相.设置图文混排的效果：册.在网页中使用图像7.制作电子相册：命令创建网站相册3.2.3 切片在 fw 中的创建和在 dw 使用以问题的形式引入切片的定打开大图片网页时，总是等待很长时间，怎样处理才能减少图义和作用。本内容尽量调整 在 机 房 讲1.切片的定义和作用解。详细讲解2.切片在 fw 中的创建方法和步骤并演示切片在3.在 DW 中插入 Fireworks HTML（切片）的方法和步骤fw 中制作和将 Fireworks HTML 插入到 Dreamweaver 中的方法。在 dw 中插入
15、方法 1：将切片从 Fireworks 复制到剪贴板上，然后直接粘贴的 方 法 与 步到 Dreamweaver 文档代码视图中的相应位置处。骤。方法 2：直接将 Fireworks HTML 插入到 Dw 中的操作步骤用比较法总结.网页多媒体的运用网页多媒体的运用网页中出现的3.3.1 在网页中使用视频 flash视频文件的格式及其特点，1.网页中常见的视频文件格式和插入方法；举例讲解视频2.常见的 flash 文件格式和插入方法；flash 文件（.fla 格式）、flash 影片文件（.swf 格式）、flash文件的插入方法 和 属 性 设模板文件（swt 格式）、flash 元素文件
16、（.swc 格式）、flash置；视频文件（.flv 格式）用比较法总结3.3.2 在网页中使用音频网页中出现的添加声音需要考虑的因素：添加的的、文件大小、声音品质flash 文件的和在不同浏览器中的差异。格 式 及 其 特1.音频文件的格式和相应的特点：点，重点讲解片的下载时间呢？-做成切片。flash 按钮、flash 文本和mid/midi 格式：。flash 视频的wav 和 aif（aiff）文件插入方法和属2.在网页中插入音频文件的 2 种方式：性设置；链接到音频文件用比较法总结嵌入声音文件网页中常见的3.4dw3.4dw 扩展插件扩展插件音频文件格式1.安装扩展插件及其特点。2.
17、使用扩展插件举例演示音频使用扩展插件主要有 2 个步骤：文件的插入和属性设置，重 先安装插件 然后启动 dreamweaver，在相应的位置找到调用扩展的点讲解背景音乐的插入和设命令即可。置。网页中常见的音频格式有：3.3.在“类型”栏中显示扩展的类型含义：在“类型”栏中显示扩展的类型含义：类型对象命令行为含义在 dw 界面的“插入”工具栏调用该扩展插件在 dw 的“命令”菜单中调用扩展在 dw 的“行为”面板中调用扩展重点讲解页面过 度 效 果、sound、marquee 和滚动链接的 AP4.4.常用扩展插件的安装和使用常用扩展插件的安装和使用Pagetransitions有超级链接时，页
18、过渡（进入/退出）效果Typewriter.mxp模拟打字行为命令元素 4 个插件要选定整个页面（即 body 标签），的用法和设置再在命令菜单中找到该命令即先演示这几个可实现（效果见实例站点中常用扩展插件guodong1.htmlguodong2.htmlguodong3.html）、的安装和使用、方法，然后让学生上台操作，教师指点先把要添加该效果的对象放入操作过程和方AP 元素中，然后在行为面板中找法到 yaromat|typewriter 即可实扩展这本分内现，文字的打印效果就显示在 AP 容安排到行为元素中。(guodong1.html 中打之后讲解印文字）Sound.mxp插入背景音
19、乐Marquee.mxp件Insert对象要选定整个页面（即 body 标签），再在“常用”插入栏中找到sound 按钮即可实现要选定整个页面（即 body 标签），再在“常用”插入栏中找到marquee 按钮即可实现把光标定位在页面的合适位置，然后选择“插入”栏中的“CNInsert Greeting”按钮即可实现把光标定位在页面的合适位置，然 后 选 择“插 入”栏 中 的“calander”按钮即可实现先把要添加该效果的对象放入AP 元素中，然后在行为面板中找到ribberszeewolde|对滚动文字插 象Greeting.m 对xpCalander.mxp象插入问候语对象Persis
20、tentlayers滚动链接的AP 元素行为Persistent layers 即可实现，一 般 用 来 显 示 广 告 信 息。（guodong1.html 中的”送给你了“）作业：作业：1.填空题（1）使用属性检查器或【文本】菜单中的选项可以设置或更改所选文本的字体特性。可以设置字体_ _（如粗体或斜体）和_。（2）若要插入更多的特殊字符，请选择_|_|_或在_栏中选择_图标，选择一个字符，然后单击【确定】。（3）在计算机领域中，图像分为_和_2 大类。（4）GIF 图像采用的是_压缩格式。2.选择题（1）在网页中连续输入空格的方法是_。A连续按空格键 B按下 Ctrl 键再连续按空格键
21、C转换到中文的全角状态下连续按空格键 D按下 Shift 键再连续按空格键（2）网页通常可以支持的图像格式有_。AGIF BBMP CAVI DPSD EPNG FJPEG。3.简答题（1）网页中常用的图像格式有哪些？各有什么特点？如果在网页中添加动画格式的浮动广告，采用何种格式？为什么？电子相册，应该用哪种格式最好？(2)如何创建鼠标变换图像和图像热点？4.操作题：搜集自己的喜爱的图片，制作一个电子相册。小结：小结：本章内容较多，但交简单，需要边讲解边对比总结，通过对比总结和学生上台操作演示，从学生上机的作业来看，授课效果很好。第第 4 4 章章使用表格与布局表格布局网页使用表格与布局表格布
22、局网页1.了解表格和布局表格在网页布局中的作用；2.掌握表格和布局表格的插入方法和基本编辑方法；教学目标与要求3.掌握表格和布局表格、单元格和布局单元格的属性设置；4.通过对表格和布局表格的学习，提高学生学习网页制作的兴趣，增强学生的审美观教学重点教学难点1表格的插入方法、基本编辑方法与应用；2布局表格和布局单元格的绘制方法、属性设置与应用1.表格和单元格的属性设置与应用；2.布局表格和布局单元格的绘制与属性设置教教学学方课法多媒体演示，案例教学，任务驱动，引导教学；提问式教学。时2 学时第第 4 4 章章使用表格与布局表格布局网页使用表格与布局表格布局网页用表格控制文字、图片、动化等对象的位
23、置，使网页的布局紧凑又整齐美观。常用的页面设计布局类型有：表格、布局表格和 AP 元素三种，本章着重讲解如何使用表格和布局表格布局页面。4.1.表格模式1.dw 中表格的 3 种模式2.模式切换的操作方式：查看-表格模式-标准模式/布局模式/表格扩展模式。3.模式的区别与注意事项：只有在“设计”视图中才可切换到“布局”模式；在不同模式下，工具栏的各个按钮作用不同；在布局模式中不能像布局表格的空白区域插入内容，只能创建布局单元格，布局单元格才是承载具体内容的容器。4.2 使用表格布局网页1表格的作用2.表格的组成部分表格的行、列、单元格、边距、间距、边框3.表格的标记标记、标记、标记三者的对应位
24、置关系4.表格的基本操作表格的插入、选择、删除、大小调整；单元格的选择、合并、拆分、大小调整；表格在“扩展表格”模式和“标准”模式下的应用5.嵌套表格表格嵌套的作用创建嵌套表格的操作方法。教学提示展示一个布局合理、美观的网页，激起学生的学习兴趣。简要讲解并 3 种表格模式的作用，重点演示不同模式下按钮的使用回顾word 和excel 中讲过的有关表格的概念和基本操作，引入 dw 中表格的概念和基本操作。重点讲解表格的属性设置含义。插入一个表格，并在每个格中插入不同的内容，然后切换到代码视图，让学生识记三个标签。逐一演示表格的各个基本操作。重点讲解创建嵌套表格的原因打开一个示例网页，让学生上讲台
25、比照着制作出相同效果讨论总结表格布局的缺点重点演示并总结绘制布局表格和布局单元格的注意事项。演示设置布局表格和单元格的属性；在设置好属性的布局单6.导入和导出表格数据、7.表格布局网页的应用实例8.表格布局的缺点4.3 布局表格布局网页1.绘制布局表格绘制布局表格的注意事项：2.绘制布局单元格绘制布局单元格的注意事项：3.设置布局表格和布局单元格的属性和参数4.在布局单元格中添加内容5.课堂实例用布局表格布局网站主页元格中添加文章、图像和多媒体。先和学生一起分析左侧网页的操作思路和主要步骤，然后让学生上台操作，以加深印象。作业：作业：课堂作业：1.叙述 3 种模式的概念及切换方法。2.说出表格
26、和布局表格的作用3.叙述“表格扩展模式”的作用4.什么是间隔图像？书面作业：课后习题。小结：小结：通过与学生熟悉的 word 中表格的操作对照讲解，本章的讲解显得较轻松；让学生上台操作，提高了学生的学习积极性和主动性，教学效果较好。第第 5 5 章章使用框架布局网页使用框架布局网页了解框架网页的概念；熟练创建、保存框架网页，并设置教学目标与要求框架和框架集的属性；框架中超级链接的创建和目标属性设置教学重点熟练创建保存框架网页，并设置框架和框架集的属性；框架中超级链接的创建和目标属性设置框架网页的概念和保存；框架中超级链接的创建和目标属性设置多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授
27、，师生互动，提问式教学。2 学时教学难点教学方法教学课时第第 5 5 章章框架网页框架网页教学提示通过看看和分1.基本概念析知名框架网页、框架集、框架网站使框架和框架集的关系用框架2框架网页的结构的布局3.认识框架面板：效果，引4.框架网页的应用：通常用于导航。入框架5.框架网页的优缺点和框架5.2 创建和保存框架与框架集集的概5.2.1 使用预设的框架集念举例演1.创建新的空预设框架的具体操作步骤。修改框架名称必须以字母开头，可以包含数字、下划线（_）；示框架但不允许是 javascript 中的保留字（如top 或 navigator）、连的创建和保存字符（-）、句点、空格和；而且区分大小
28、写。操作2.创建预设的框架集并在某一框架中显示现有文档打开框5.2.2 创建和编辑框架架面板，1.创建框架查看并2.删除框架总结框3.建立嵌套的框架集架和框4.保存框架和框架集架集的属性设5.3 设置框架及框架集的属性置及其1.选择框架：通过“框架”面板来选择框架和子框架。含义2.设置框架属性演示框框架的背景颜色可以在页面属性中进行设置架中的在框架的属性面板中进行设置框架的的名称、源文件、链超级链接、边距、滚动、边框和能否调整大小等。接效果3.设置框架集属性：边框、边框大小和边框颜色。举例演5.4 设置框架集中的超级链接示框架5.4.1 在框架网页中建立超链接网页的5.4.2 框架网页中设置超
29、级链接的目标打开方式设计与制作1.相对链接目标：_blank、_top、_parent、_self5.1 框架和框架集的概念、结构和应用2.绝对链接目标：mainframe、Leftframe、Rightframe、Topframe。5.6 课堂实例制作一个框架网页作业：作业：1.使用框架的优点是什么？2.课后习题小结：小结：本章介绍了框架网页的创建、保存和属性设置，着重讲解了框架网页的中超级链接的创建和目标设置，内容较少，授课效果较好。第第 6 6 章章 AP AP 元素的创建和使用元素的创建和使用理解 AP 元素的作用；熟记 AP 元素的命名原则和特点；掌教学目标与要握绘制 AP 元素和插
30、入 AP 元素的方法和区别；熟练设置 AP求元素的属性；灵活、合理地使 AP 元素随心所欲的布局页面内容。教学重点教学难点教学方法AP 元素的作用；AP 元素的插入和绘制；AP 元素的属性设置；AP 元素的特点；AP 元素的应用AP 元素的作用；AP 元素的属性设置；AP 元素的应用多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。教学课时2 课时第第 6 6 章章 APAP 元素的创建和使用元素的创建和使用在浏览网页时，注意到滚动的广告图片了吗？-它是使用 AP 元素做出来的效果。6.1 应用 AP 元素布局网页6.1.1AP 元素的概述1、AP 元素的应用：布局
31、网页；制作简单动画；设计特效等。2、AP 元素的定义、AP 元素的特点、AP 元素的分类、AP 元素的优缺点、AP 元素面板。教学提示抛出问题，引入新课强调 AP 元素在页面布局中的作用演示 AP 元素的绘制要领；选择 AP 元素，让学生观察的属性，并详细讲解各属性的设置含义。演示 AP 元素的6.1.2 创建 AP 元素1.在首选参数对话框中设置 AP 元素的参数，可设置AP 元素嵌套和显示 AP 元素锚记。2.插入 AP 元素与绘制 AP 元素3.绘制 AP 元素和插入 AP 元素的差别4.AP 元素的 html 代码5.AP 元素的绝对定位（一般是默认设置）和相对定位各种操作综合举例6.
32、1.3.AP 元素属性详解1.单个 AP 元素的属性：AP 元素编号、左和上、宽和高、Z 轴、背景图像、背景颜色、剪辑、可见性、溢出：2.多个 AP 元素的属性：6.1.4AP 元素的基本操作激活 AP 元素、选择 AP 元素、调整 AP 元素大小、移动AP 元素、对齐 AP 元素、吸附 AP 元素到网格6.1.5 嵌套 AP 元素6.1.6.AP 元素和表格的相互转换6.2 课堂实例用 AP 元素布局网站首页作业：作业：课后习题上机作业：上机作业：使用 AP 元素、表格和 css 排版网站首页小结：小结：本章着重讲解 AP 元素的创建、命名和属性设置，让学生亲自上台制作案例，加深了对新知识的
33、印象。上机时发现学生基本都能完成操作任务，总体感觉授课效果较好。第第 7 7 章超级链接章超级链接了解超级链接的路径和链接结构；熟记超级链接目标打开方教学目标与要求式的设置含义；熟练掌握超级链接的 4 种创建方法；能快速完成 5 种特殊超级链接的创建方法和步骤。1.超级链接的各种创建步骤教学重点2.超级链接目标打开方式的设置含义3.超级链接的 4 种创建方法4.5 种特殊超级链接的创建方法和步骤教学难点教学方法1.超级链接的路径2.超级链接目标打开方式的设置含义多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学。教学课时2 课时第第 7 7 章章超级链接超级链接大家已
34、经会创建不同内容的网页了，怎样把这些分散的网页组合成一个统一的整体，让浏览者只打开主页就能访问到其它各个面呢？-需要创建超级链接。7.1 超级链接的定义和目标选项的含义1.超级链接的定义2.属性检查器的“目标”弹出菜单中各个选项的含义：_blank、_parent、_self、_top。教学提示抛出问题，引入新课。（2 分钟）打开几个典型网站的主页，让大家分析超级链接的功能，进而引入超级链接的定义、分类和目标列表的设置。让学生讨论3：创建一个完整的超级链接必须考虑的4个方面：总结创建超级链接的链接的载体链接的目标链接的路径链接目标的打开方式注意事项（20 分钟）通过举例和配图讲解链接路径的类型
35、和在创建超级链接时路径的书写方法（20 分钟）采用讨论法，让学生讨论总结超级链接的分类。（8 分钟）举例讲解各种方法下超级链接的创建方法和创建步骤，并总结各种方法的使用情况（25 分钟）借助上面讲过的创建方法，让学生上台操作实践，创建各种类型的超级链接。根据情况不部分内容调整到机房讲解。（30 分钟）简要讲述超级链接的修改与更新操作。（157.2 超级链接的路径在 dreamweaver 中有三种类型的链接路径：绝对路径、文档相对路径、站点根目录相对路径。7.3 超级链接的分类按照链接路径的不同，网页中超链接一般分为内部链接、锚点链接、外部链接 3 种类型。按照使用对象的不同，网页中的链接又可
36、以分为以下几种：文本超链接、图像超链接、电子邮件链接、锚点链接、软件下载链接、多媒体文件链接、空链接等。7.4 超级链接的创建方法1.使用属性检查器中链接后的文本框创建各种各样的超级链接；2.使用属性检查器中的浏览文件图标创建各种各样的超级链接；3.使用“指向文件”图标创建超级链接；4.使用菜单中的“超级链接”命令创建超级链接；7.5 几种特殊的超级链接详解1锚记链接2创建脚本链接3给图像热区加上超级链接4创建电子邮件超链接5创建空链接分钟）结构较为简单（15 分钟）总结并提出建议。（10分钟）7.6 超级链接的基本操作：更新、修改、检查7.7 超级链接的结构7.8 总结创建超级链接的 5 点
37、建议作业：作业：1.叙述超级链接的定义 2.说出超级链接的路径3.说出超级链接的 4 种创建方法。小结：小结：本章内容较多，超级链接的路径较难理解；其他内容相对容易，且操作性较强，易掌握，学生基本都能创建各种类型的超级链接，总体感觉授课效果还好。第第 8 8 章交互（行为、图章交互（行为、图 APAP 元素和时间轴的综合运用，以及元素和时间轴的综合运用，以及javascriptjavascript）1.熟练地应用行为，能够随心所欲地制作出具交互功能的网页；2.掌握时间轴的概念和基本用法；教学目标与要求3.通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣，培养大家的动手
38、操作能力。4.了解 java 脚本的基本用法教学重点1.行为的概念和创建，2.使用 DW 内置的行为 3.AP 元素、行为和时间轴的综合运用1.使用 DW 内置的行为；2.高级行为的应用；3.AP 元素、行为和时间轴的综合运用多媒体演示为主，适当举例，人体媒体结合式教学，课堂讲授，师生互动，提问式教学；任务驱动、引导教学、理论与操作紧密结合。教 学 课 时4 课时教学难点教 学 方 法第第 8 8 章交互章交互（行为、（行为、图图 APAP 元素和时间轴的综合运用，元素和时间轴的综合运用，以以 教学提示及及 jsjs）问题：大家已经会在网页中的特殊效果如：弹出消息、检查表单、设置导航文本、鼠标
39、的花瓣、棉花糖、下雪了、礼花绽放等，这样的动态网页是如何制作的呢？使用行为就可以实现。8.1.18.1.1 初步认识行为初步认识行为1、DW 行为的引出2、行为的概念3、与行为相关的三个重要部分：对象、事件和动作。4、认识行为面板抛出问题，导入新课举出几个典型的带有行为的网页显示行为的应用，进而引出行为的作用和相关概念（25 分钟）举例讲解行为的创建步骤。（10 分钟）演示常用的 DW内置行为的操作 步 骤 和 要领，部分调整在机房讲解；8.1.28.1.2 行为的创建、修改和更新行为的创建、修改和更新创建行为的三个步骤修改行为更新行为8.1.38.1.3 使用使用 DWDW 内置的行为内置的
40、行为 dw8.0 自带的行为主要有:1.弹出消息 2、“播放声音”实例?3、跳转菜单和跳转菜单开始 4、打开浏览器窗口5、交换图象与恢复交换图象 6、控制 shockshave 或 flash（30 分钟）7、设置导航栏图像 8、设置文本9、显示弹出菜单（下拉菜单）10、显示和隐藏 AP 元素11、拖动 AP 元素 12、滚动链接的 AP 元素8.1.48.1.4 高级行为的应用高级行为的应用1、插入滚动字幕示例：文本自动向上循环滚动，鼠标放到上面还会暂停2、下载安装扩展插件3、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。举例：花瓣、棉花糖。8.2AP 元素、行为和时间轴的
41、综合运用1.时间轴面板2、时间轴和图 AP 元素的综合运用（1）滚动字幕（2）网页浮动动画本部分为选讲内容。举例讲解高级行为的应用；重点讲解 4 种扩展插件的安装和应用效果。（30 分钟）举典型实例演示 AP 元素和行为综合应用效果（40 分钟）引 入 特 效 代码，举例讲解（3）设置文字的阴影效果（4）幻灯片效果（5）控制图像播放动画（6）制作滚动的折叠菜单（7）具有预览功能的电子相册效果js在Dw中的应用。（20 分钟）8.38.3 在网页中应用在网页中应用 javascriptjavascript1.认识代码片段面板2.应用代码片段3.应用举例作业作业：课后习题、题小结：小结：通过举例，
42、详细讲解了AP 元素、时间轴和行为的综合运用。本节的内容较多，步骤也繁琐。通过视频演示和实际操作演示，加深对行为的理解，加强了学生的实际操作能力。希望同学们下去自己多多练习。学完本章，大家应该能灵活的制作出较为简单的具有特殊效果的动态网页。第第 9 9 章章 cssAPcssAP 元素叠样式表元素叠样式表1.了解 css 的概念及样式类型教学目标与要求2.熟练掌握 css 的属性设置、能熟练操作（创建、导入、导出）cssAP 元素叠样式表；3.css 和表格、css 和 div 的综合运用教学重点css 的概念及样式类型；Css 的创建及属性设置；css 和表格的综合运用Css 的创建及属性设
43、置；css 和表格、css 和 div 的综合运用多媒体演示为主，课堂讲授，师生互动，案例教学。4 课时教学难点教学方法教学课时第第 9 9 章章 cssAPcssAP 元素叠样式表元素叠样式表打开一个没有应用样式设置的预先准备好的网页，先让学生观察设计视图中的效果，然后在 IE 中预览，让学生总结显示效果的变化，这是怎么回事呢？-没有使用样式。9.1css 基础1.css 样式表的基本概念 样式、cascading 和 css Css 可能改变的性质教学提示抛出问题，引入新课打开几个典型的应用 css 的网页，让大家分析 css 的优点，进而引入css 的定义、类 外部 css 样式表的扩展
44、名是.css。2.css 的 5 个优点：3.css 面板 打开 css 面板的 3 种方法 css 面板中的按钮和功能adobe 建议用 css 面板作为创建和编辑 css 的主要工具。用户可以自己创建 AP 元素叠样式表，还可以 dw 附带的 AP 元素叠样式表4.样式表类型（理解即可）选择器有三种（常见）类型，可以创建 4 种不同选择器类型的样式：（1）自定义 css 规则（类样式），命名规则（2）html 标签样式表（3）对于高级样式（也称 ID、伪类选择器）型。打开样式面板，演示各按钮的作用；打开 css 样式创建的对话框，通过创建过程的选择讲解 css 的类型。通过举例详细讲解 c
45、ss 规则的各项设置内容。先演示 css 创建的具体步骤，然后让学生上台操作演9.2 CSS 规则详解在“规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化页面。在定义某个 CSS样式时，不需要对每一个项都进行设置，需要什么效果，就选择相应的项进行设置。练。先讲解应用的方法，然后通过大量举例讲解各种样式的创建和应用。举了 4 个例子，分别是类样式、伪类样式、ID 样式、标签样式。打开代码视图，观察各种样式在代码中的显示位置和显示方式。举特例讲解各种冲突解决的9.3 创建新的 CSS 规则?9.4 应用 CSS 样式9.4.1 各种样式表的应用应用自定义
46、CSS 样式，有下列 3 种方法对于 html 标签样式和高级样式，定义仅对该文档后，会自动应用到相应的文档中。对于外部的 css 样式表：在样式面板中选择附件样式表按钮，打开“链接外部样式表”对话框，可以链接外部的 CSS样式文件。清除样式:选中要清除样式的对象,设置成“无”样式即可。使用范例 css 样式表9.4.2 应用举例（参看课本 p131-139 示例）1.课堂实例用 CSS 格式化文本2.课堂实例用 CSS 控制表格3.用 CSS 控制列表4.用 CSS 控制背景5.用 CSS 控制区块6.CSS 样式滤镜的应用规则。让学生学会在代码视图中修改或删除不需要的样式。最后总结本章所学
47、知识，让学生对样式表灵活运用。9.5 编辑 CSS 规则和 CSS 样式编辑 CSS 规则：在样式面板中直接双击进行修改。编辑 CSS 样式：在样式列表中选中需要编辑的规则的名称，直接单击“编辑样式”按钮，在弹出的“CSS 规则定义”对话框中修改相应的设置。9.6 CSS 样式的三种存放方式（1）直接插入（叫内部标签）：（2）嵌样式（也叫嵌入式）：位于 html 文件头（标签）的 style 标签内。（3）链接到已创建的外部文件.css（统一风格）：这类样式表要保存在站点的 common 文件夹，而在 html 的中引用。9.7 关于冲突的 CSS 规则1、不冲突则共同显示。2.当内部的规则和
48、外部的规则冲突时，内部规则优先显示。3、如果应用于同一文本的两种规则的属性发生冲突，则按就近原则显示。4、如果有直接冲突，则自定义 CSS 规则优先显示。作业：作业：1、什么是 cssAP 元素叠样式表？简述使用 css 样式的优点。2、css 的类型、背景、区块、方框、边框、列表、定位、扩展分别可以定义什么样的设置？3 制作实例.小结：小结：本章前一部分理论较多，且窗体的节的相关概念较难理解；后一部分操作性较强，易掌握，学生基本都能完成操作任务，总体感觉授课效果还好。第第 1010 章（章（1 1）管理和使用站点资源与库项目）管理和使用站点资源与库项目教学目标与要求教学重点教学难点教 学 方
49、 法灵活使用和管理站点资源、库和模板，提高网页制作的速度和效率。资源面板的使用库的管理、创建和编辑任务驱动、引导教学，学生自学为主，教师讲授为辅，简单演示教 学 课 时1 课时第第 1010 章（章（1 1）管理和使用站点资源与库项目）管理和使用站点资源与库项目10(1).1 资源和库的概念和作用10(1).2 站点资源面板教学提示举例说明源库1.打开资源面板的方式 2.站点资源的资源分类 3 站点资源的类资型 4.查看和选取资源 5.添加资源 6.刷和新资源面板7.资源定位 8.管理资源面板项目的意义演示项的10(1).3 创建、管理和编辑库项目1.3 种创建库项目的方法创建的库项目自动保存
50、到站点的 library 文件夹中，若站点库中没有，dreamweaver 则会自动创建该文件夹。库项目的扩展名目为.lbi。2.应用库项目：在文档中应用库项目的操作步骤创建和应3.管理库项目：主要有修改、重命名、重建、删除、从源文件中用分离几个方面随堂练习：下列关于库的说法中不正确的一项是()A 库是一种用来存储想要在整个网站上经常被重复使用或更新的页面元素 B 库实际上是一段 html 源代码 C 在 dreamweaver 中,只有文字数字可以作为库项目,而图片脚本则不可作为库项目D 库可以是 email 地址一个表格或版权信息等.作业：作业：课后习题小结：小结：知识总结：本章主要介绍了