7、学习兴趣,从学生的反应看,授课效果很好。第2章Dreamweaver基础知识教学目标与要求熟悉Dreamweaver8工作界面,熟记几个常用的工具按钮和菜单命令;熟练掌握站点的创建步骤,能快速规范地创建站点;能够快速创建、打开、保存网页文档;能熟练设置页面的属性。教学重点1.创建站点并组织站点的结构;2.在站点中创建网页3.页面的属性设置教学难点HTML基础教学方法举例为主,适当讲授操作要领,提问以测试课题效果。教学课时2课时第2章Dreamweaver基础知识教学提示我们一贯都是浏览网页,想自己动手做网站吗?用什么工具做网站?怎样做呢?-Dreamweaver网页制作工具。
8、2.1熟悉Dreamweaver8工作界面2.2网站创建与管理2.2.1站点的定义、组成和结构2.2.2网页文档与文件夹命名规则2.2.3创建本地站点的步骤2.2.4组织站点结构2.3网页文档基本操作新建、保存、预览、打开、关闭2.4基本页面属性设置制定文档标题和边距、网页背景颜色和背景图像,为网页设置文本属性、链接属性和跟踪图像的属性,总结页面的使用的技巧:抛岀问题,引入新课启动dw,详细讲解插入栏、文档标签与“文档”工具栏、状态栏的作用,区分标签检查器、标签选择器、标记选择符3个概念及其作用详细讲解站点的定义、组成、结构,以及文件和文件夹的命名规则。演示站点的创建
9、过程和步骤,着重提出保存和站点文件夹的命名。详细讲解站点结构的组织方法和原贝农分别演示这几个操作通过dw设计视图分别创建1个网页,分别演示文档标题和边距、背景颜色和背景图像、文本和链接属性,以及跟踪图像的属性的设置方法和步骤,帮助学生掌握页面的设置过程。并总结页面设置和创建过程中的一些使用技巧。作业:习题一第1,2,3题小结:本次课内容操作性很强,经过学生自己上台操作,发现大多数学生都能创建并组织好一个站点,还能快速地设置网页的属性,达到了教学目标的要求。第3章网页中的基本兀素教学目标与要求1.熟练操作网页中的文本;2.熟练插入各种格式的图像并设置其属性;3.了解
10、图像切片的作用;4.熟练制作图像切片,并插入到dw中教学重点1.文本对象的插入和格式设置;2.GIF、PN&口JPEG三种图像格式的异同点和使用环境;3.用fireworks制作网页切片的方法;教学难点1.设置文本标题;段落的设置效果;2.GIF、PNG和JPEG三种图像格式的异同点和使用环境;3.Dreamweaver8.0中使用图像的一些基本方法和技巧;4.在dreamweaver中插入用fireworks制作的切片教学方法课堂讲授为辅,多媒体演示为主,适当举例,提问以测试课题效果,实验式教学。教学课时4课时第3章网页中的基本兀素教学提示复习上节内容:如何创建站点
14、建项目列表,以加深印象。通过比较法讲解各图像格式的特点举例:在文档中插入各种图像对象,并设置其格式属性。演示制作图像热区和图文混排的效果;演示制作电子相册3.在DW中插入FireworksHTML(切片)的方法和步骤将FireworksHTML插入到Dreamweave冲的方法。方法1将切片从Fireworks复制到剪贴板上,然后直接粘贴到Dreamweaver文档代码视图中的相应位置处。方法2:直接将FireworksHTML插入到Dw中的操作步骤3.3网页多媒体的运用3.3.1在网页中使用视频flash1.网页中常见的视频文件格式和插入方法;2.常见的
15、flash文件格式和插入方法;flash文件(.fla格式)、flash影片文件(.swf格式)、flash模板文件(swt格式)、flash兀素文件(.swc格式)、flash视频文件(flv格式)3.3.2在网页中使用音频添加声音需要考虑的因素:添加的的、文件大小、声音品质和在不同浏览器中的差异。1.音频文件的格式和相应的特点:网页中常见的音频格式有:mid/midi格式:。wav和aif(aiff)文件2.在网页中插入音频文件的2种方式:链接到音频文件嵌入声音文件3.4dw扩展插件1.安装扩展插件2.使用扩展插件使用扩展插件主要有2个步骤:以问题的形式引入切
16、片的定义和作用。本内容尽量调整在机房讲解。详细讲解并演示切片在fw中制作和在dw中插入的方法与步骤。用比较法总结网页中出现的视频文件的格式及其特点,举例讲解视频文件的插入方法和属性设置;用比较法总结网页中出现的flash文件的格式及其特点,重点讲解flash按钮、flash文本和flash视频的插入方法和属性设置;用比较法总结网页中常见的音频文件格式及其特点。举例演示音频文件的插入和属性设置,重点讲解背景音乐的插入和设置。先安装插件然后启动dreamweaver,在相应的位置找到调用扩展的命令即可。3.在“类型”栏中显示扩展的类型含义:类型含义
17、对象在dw界面的“插入”工具栏调用该扩展插件命令在dw的“命令”菜单中调用扩展行为在dw的“行为”面板中调用扩展4.常用扩展插件的安装和使用Pagetransitions有超级链接时,页过渡(进入/退出)效果命令要选定整个页面(即body标签),再在命令菜单中找到该命令即可实现(效果见实例站点中guodong1.html、guodong2.html、guodong3.html)Typewriter.mxp模拟打字行为先把要添加该效果的对象放入AP元素中,然后在行为面板中找到yaromat|typewriter即可实现,文字的打印效果就显示在AP元素中。(guodo
18、ng1.html中打印文字)Sound.mxp插入背景音乐对象要选定整个页面(即body标签),再在“常用”插入栏中找到sound按钮即可实现Marquee.mxp滚动文字插件对象要选定整个页面(即body标签),再在“常用”插入栏中找到marquee按钮即可实现InsertGreeting.mxp插入问候语对象把光标疋位在页面的合适位置,然后选择“插入”栏中的“CNInsertGreeting”按钮即可实现Calander.mxp对象把光标疋位在页面的合适位置,然后选择“插入”栏中的“calander”按钮即可实现重点讲解页面过度效果、sound、mar
21、最好?(2)如何创建鼠标变换图像和图像热点?4.操作题:搜集自己的喜爱的图片,制作一个电子相册。小结:本章内容较多,但交简单,需要边讲解边对比总结,通过对比总结和学生上台操作演示,从学生上机的作业来看,授课效果很好。第4章使用表格与布局表格布局网页教学目标与要求1.了解表格和布局表格在网页布局中的作用;2.掌握表格和布局表格的插入方法和基本编辑方法;3.掌握表格和布局表格、单元格和布局单元格的属性设置;4.通过对表格和布局表格的学习,提咼学生学习网页制作的兴趣,增强学生的审美观教学重点1表格的插入方法、基本编辑方法与应用;2布局表格和布局单元格的绘制方法、属性设置与应用教学
22、难点1.表格和单元格的属性设置与应用;2.布局表格和布局单元格的绘制与属性设置教学方法多媒体演示,案例教学,任务驱动,引导教学;提问式教学。教学课时2学时第4章使用表格与布局表格布局网页教学提示用表格控制文字、图片、动化等对象的位置,使网页的布局紧凑又整齐美观。常用的页面设计布局类型有:表格、布局表格和AP兀素二种,本章着重讲解如何使用表格和布局表格布局页面。4.1.表格模式1.dw中表格的3种模式2.模式切换的操作方式:查看-表格模式-标准模式/布局模式/表格扩展模式。3.模式的区别与注意事项:只有在“设计”视图中才可切换到“布局”模式;在不同模式下,工具栏的各个按钮作用
23、不同;在布局模式中不能像布局表格的空白区域插入内容,只能创建布局单元格,布局单元格才是承载具体内容的容器。4.2使用表格布局网页1表格的作用展示一个布局合理、美观的网页,激起学生的学习兴趣。简要讲解并3种表格模式的作用,重点演示不同模式下按钮的使用回顾word和excel中讲过的有关表格的概念和基本操作,引入dw中表格的概念和基本操作。重2.表格的组成部分表格的行、列、单元格、边距、间距、边框3.表格的标记table标记、tr标记、td标记三者的对应位置关系4.表格的基本操作表格的插入、选择、删除、大小调整;单元格的选择、合并、拆分、大小调整;表格在“扩展表格”模
24、式和“标准”模式下的应用5.嵌套表格表格嵌套的作用创建嵌套表格的操作方法。6.导入和导出表格数据、7.表格布局网页的应用实例8.表格布局的缺点4.3布局表格布局网页1.绘制布局表格绘制布局表格的注意事项:2.绘制布局单元格绘制布局单元格的注意事项:3.设置布局表格和布局单元格的属性和参数4.在布局单元格中添加内容5.课堂实例一一用布局表格布局网站主页点讲解表格的属性设置含义。插入一个表格,并在每个格中插入不同的内容,然后切换到代码视图,让学生识记三个标签。逐一演示表格的各个基本操作。重点讲解创建嵌套表格的原因打开一个示例网页,让学生上讲台比照着制作岀相同效果讨论总结
26、创建、保存框架网页,并设置框架和框架集的属性;框架中超级链接的创建和目标属性设置教学重点熟练创建保存框架网页,并设置框架和框架集的属性;框架中超级链接的创建和目标属性设置教学难点框架网页的概念和保存;框架中超级链接的创建和目标属性设置教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提问式教学。教学课时2学时第5章框架网页教学提示5.1框架和框架集的概念、结构和应用1.基本概念框架网页、框架集、框架框架和框架集的关系2.框架网页的结构3.认识框架面板:4.框架网页的应用:通常用于导航。5.框架网页的优缺点5.2创建和保存框架与框架集通过看看和分析知
27、名网站使用框架的布局效果,引入框架和框架集的概念521使用预设的框架集1.创建新的空预设框架的具体操作步骤。修改框架名称必须以字母开头,可以包含数字、下划线(_);但不允许是javascript中的保留字(如top或navigator)、连字符(-)、句点、空格和;而且区分大小写。2.创建预设的框架集并在某一框架中显示现有文档5.2.2创建和编辑框架举例演示1.创建框架框架的创2.删除框架建和保存3.建立嵌套的框架集操作4保存框架和框架集5.3设置框架及框架集的属性打开框架1.选择框架:通过“框架”面板来选择框架和子框架。面板,查看2.设置框架属性并总结框力rrHrt
28、框架的背景颜色可以在页面属性中进行设置架和框架集的属性在框架的属性面板中进行设置框架的的名称、源文件、链接、设置及其边距、滚动、边框和能否调整大小等。含义3.设置框架集属性:边框、边框大小和边框颜色。5.4设置框架集中的超级链接5.4.1在框架网页中建立超链接演示框架5.4.2框架网页中设置超级链接的目标打开方式中的超级1.相对链接目标:_blank、_top、_parent、_self链接效果2.绝对链接目标:mainframe、Leftframe、Rightframe、Topframe。5.6课堂实例制作一个框架网页举例演示框架网页的设计与制作仙.氓1TJi-n-BB*作业:1.使用
29、框架的优点是什么?2.课后习题小结:本章介绍了框架网页的创建、保存和属性设置,着重讲解了框架网页的中超级链接的创建和目标设置,内容较少,授课效果较好。第6章AP兀素的创建和使用教学目标与要求理解AP元素的作用;熟记AP元素的命名原则和特点;掌握绘制AP元素和插入AP元素的方法和区别;熟练设置AP元素的属性;灵活、合理地使AP元素随心所欲的布局页面内容。教学重点AP元素的作用;AP元素的插入和绘制;AP元素的属性设置;AP元素的特点;AP元素的应用教学难点AP元素的作用;AP元素的属性设置;AP元素的应用教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,提
31、P元素属性详解1.单个AP元素的属性:AP元素编号、左和上、宽和高、Z轴、背景图像、背景颜色、剪辑、可见性、溢出:抛岀问题,引入新课强调AP元素在页面布局中的作用演示AP元素的绘制要领;选择AP元素,让学生观察的属性,并详细讲解各属性的设2.多个AP元素的属性:置含义。6.1.4AP兀素的基本操作激活AP元素、选择AP元素、调整AP元素大小、移动AP演示AP元素的元素、对齐AP元素、吸附AP元素到网格各种操作6.1.5嵌套AP兀素6.1.6.AP兀素和表格的相互转换6.2课堂实例一一用AP兀素布局网站首页综合举例作业:课后习题上机作业:使用AP元素、表格和css排版网站首页小结:本章
32、着重讲解AP元素的创建、命名和属性设置,让学生亲自上台制作案例,加深了对新知识的印象。上机时发现学生基本都能完成操作任务,总体感觉授课效果较好。第7章超级链接教学目标与要求了解超级链接的路径和链接结构;熟记超级链接目标打开方式的设置含义;熟练掌握超级链接的4种创建方法;能快速完成5种特殊超级链接的创建方法和步骤。教学重点1.超级链接的各种创建步骤2.超级链接目标打开方式的设置含义3.超级链接的4种创建方法4.5种特殊超级链接的创建方法和步骤教学难点1.超级链接的路径2.超级链接目标打开方式的设置含义教学方法多媒体演示为主,适当举例,人体媒体结合式教学,课堂讲授,师生互动,
33、提问式教学。教学课时2课时第7章超级链接教学提示大家已经会创建不同内容的网页了,怎样把这些分散的网页组合成个统的整体,让浏览者只打开主页就能访问到其它各个面呢?-需要创建超级链接。7.1超级链接的定义和目标选项的含义1.超级链接的定义2.属性检查器的“目标”弹出菜单中各个选项的含义:_blank、_parent、_self、_top。3:创建一个完整的超级链接必须考虑的4个方面:链接的载体链接的目标链接的路径链接目标的打开方式7.2超级链接的路径在dreamweaver中有二种类型的链接路径:绝对路径、文档相对路径、站点根目录相对路径。抛岀问题,引入新课。(2分钟)打开几个典型
34、网站的主页,让大家分析超级链接的功能,进而引入超级链接的定义、分类和目标列表的设置。让学生讨论总结创建超级链接的注意事项(20分钟)通过举例和配图讲解链接路径的类型和在创建超级链接时路径的书写方法(20分钟)7.3超级链接的分类1按照链接路径的不同,网页中超链接一般分为内部链接、锚点链接、外部链接3种类型。2按照使用对象的不同,网页中的链接又可以分为以下几种:文本超链接、图像超链接、电子邮件链接、锚点链接、软件下载链接、多媒体文件链接、空链接等。7.4超级链接的创建方法1.使用属性检查器中链接后的文本框创建各种各样的超级链接;2.使用属性检查器中的浏览文件图标创
35、建各种各样的超级链接;3.使用“指向文件”图标创建超级链接;4.使用菜单中的“超级链接”命令创建超级链接;7.5几种特殊的超级链接详解1锚记链接2.创建脚本链接3给图像热区加上超级链接4.创建电子邮件超链接5.创建空链接7.6超级链接的基本操作:更新、修改、检查7.7超级链接的结构7.8总结创建超级链接的5点建议采用讨论法,让学生讨论总结超级链接的分类。(8分钟)举例讲解各种方法下超级链接的创建方法和创建步骤,并总结各种方法的使用情况(25分钟)借助上面讲过的创建方法,让学生上台操作实践,创建各种类型的超级链接。根据情况不部分内容调整到机房讲解。(30分钟)
41、ssAP兀素叠样式表教学目标与要求1.了解css的概念及样式类型2.熟练掌握css的属性设置、能熟练操作(创建、导入、导出)cssAP兀素叠样式表;3.css和表格、css和div的综合运用教学重点css的概念及样式类型;Css的创建及属性设置;css和表格的综合运用教学难点Css的创建及属性设置;css和表格、css和div的综合运用教学方法多媒体演示为主,课堂讲授,师生互动,案例教学。教学课时4课时第9章cssAP兀素叠样式表教学提示打开个没有应用样式设置的预先准备好的网页,先让学生观察设计视图中的效果,然后在IE中预览,让学生总结显示效果的变化,这是怎么回事呢?-没有使用
42、样式。9.1css基础1.css样式表的基本概念样式、cascading和cssCss可能改变的性质外部css样式表的扩展名是.css。2.css的5个优点:3.css面板打开css面板的3种方法css面板中的按钮和功能adobe建议用css面板作为创建和编辑css的主要工具。用户可以自己创建AP元素叠样式表,还可以dw附带的AP元素叠样式表4.样式表类型(理解即可)选择器有二种(常见)类型,可以创建4种不同选择器类型的样式:(1)自定义css规则(类样式),命名规则抛岀问题,引入新课打开几个典型的应用css的网页,让大家分析css的优点,进而引入css的定义、类型。
43、打开样式面板,演示各按钮的作用;打开css样式创建的对话框,通过创建过程的选择讲解css的类型。通过举例详细讲解css规则的各项设置内容。9.3创建新的CSS规则先演示css创建的具体步骤,然后让学生上台操作演练。(2)html标签样式表(3)对于高级样式(也称ID、伪类选择器)9.2CSS规则详解在“规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化页面。在定义某个CSS样式时,不需要对每一个项都进行设置,需要什么效果,就选择相应的项进行设置。先讲解应用的方法,然后通过大量举例讲解各种样式的创建和应用。举了4
44、个例子,分别是类样式、伪类样式、ID样式、标签样式。9.4应用CSS样式941各种样式表的应用应用自定义CSS样式,有下列3种方法对于html标签样式和高级样式,定义仅对该文档后,会自动应用到相应的文档中。对于外部的css样式表:在样式面板中选择附件样式表按钮,打开“链接外部样式表”对话框,可以链接外部的CSS样式文件。清除样式:选中要清除样式的对象,设置成“无”样式即可。使用范例css样式表9.4.2应用举例(参看课本p131-139示例)1.课堂实例一一用CSS格式化文本2.课堂实例一一用CSS控制表格3.用CSSE制列表4.用CSSg制背景5.用CSSB制区块6.
45、CSS样式滤镜的应用9.5编辑CSS规则和CSS羊式打开代码视图,观察各种样式在代码中的显示位置和显示方式。举特例讲解各种冲突解决的规则。让学生学会在代码视图中修改或删除不需要的样式。最后总结本章所学知识,让学生对样式表灵活运用。编辑CSS规则:在样式面板中直接双击进行修改。编辑CSS样式:在样式列表中选中需要编辑的规则的名称,直接单击“编辑样式”按钮,在弹出的“CSS规则定义”对话框中修改相应的设置。9.6CSS样式的三种存放方式(1)直接插入(叫内部标签):vtablestyle=“coloured;font-size:10pt”(2)嵌样
46、式(也叫嵌入式):位于html文件头(v/head标签)的style标签内。(3)链接到已创建的外部文件.css(统一风格):这类样式表要保存在站点的commor文件夹,而在html的v/head中引用。9.7关于冲突的CSS规则1、不冲突则共同显示。2、当内部的CSS规则和外部的CSS规则冲突时,内部规则优先显示。3、如果应用于同一文本的两种规则的属性发生冲突,贝U按就近原则显示。4、如果有直接冲突,则自定义CSS规则优先显示。作业:1、什么是cssAP元素叠样式表?简述使用css样式的优点。2、css的类型、背景、区块、方框、边框、列表、定位、扩展分别可以定义什么样的设置?
48、新资源面板7.资源定位8.管理资源面板10(1).3创建、管理和编辑库项目1.3种创建库项目的方法创建的库项目自动保存到站点的library文件夹中,右站点中没有,dreamweaver则会自动创建该文件夹。库项目的扩展名为bi。2.应用库项目:在文档中应用库项目的操作步骤3.管理库项目:主要有修改、重命名、重建、删除、从源文件中分离几个方面随堂练习:下列关于库的说法中不正确的一项是()A库是一种用来存储想要在整个网站上经常被重复使用或更新的页面兀素B库头际上是一段html源代码C在dreamweaver中,只有文字数字可以作为库项目,而图片脚本则不可作为库项目D库可以
50、意义、模板区域类型、模板的链接模版的作模板默认被保存在templetes文件夹中,模板的扩展名为:.dwt。用,10(2).2创建模板1.将现有的文档保存为模板演示操作2.通过“资源”面板创建新的空白模板的创3.使用新建文档对话框创建模板建,重点10(2).3使用模板的可编辑区域讲解可编1、插入可编辑区辑区域的定义可编辑区域的两种方法插入可编辑区域的命名规则:不可使用单引号、双引号、尖括号()、和与符号(&)、,、八注意:可将整个表格或某个单元格定义为可编辑区域,不可同时指定几个单格为可编辑区域;将AP元素定义为可编辑区域时,用户可以改变AP元素的位置,将根据已创AP元素上的内容定义为可编
51、辑区域时,才可以修改AP元素上的内建的模板容。2.删除可编辑区域10(2).4使用可选区域1.插入可选区域2.插入可编辑的可选区域3修改可选区域10(2).5使用重复区域10(2).6应用模板1.创建基于模板新页面2将模板应用到现有文档(自学,容易出现不一致区域,建议不采用)3将文档与模板分离10(2).7编辑模板10(2).8管理模板重命名模板、删除模板、重命名可编辑区域、选择可编辑区域创建新的网页,体会模板的作用注意模板使用的注意事项作业:1、说出使用模板的使用意义。2、模板默认被保存在哪个文件夹中,模板的扩展名是什么?3、模板共有几种模板区域类型?4、课后习题的页面。小结
52、:本章讲了模板的意义、创建、编辑和应用几个问题,学完本章应创建出风格一致第12章DW8站点的创建、设置与管理教学目标与要求1.学会编辑设置和管理站点2.理解站点面板的设置使用3.能打开、编辑、删除、上传站点。教学重点创建和管理站点与站点文件教学难点编辑、设置和管理站点教学方法任务驱动、引导教学,学生自学为主,教师讲授为辅,简单演示教学课时1课时第12章DW8站点的创建、设置与管理教学提示12.1安装和配置web服务器12.2创建和设置站点一、创建和设置本地站点:二、设置远端站点以下是几种连接服务器的方式方式1.通过ftp访问远端站点2.通过局域网访问远端站点3.通过RD前问远端站点4.通过Sourcesafe数据库访问远端站点5.通过WebbDA访问远端站点12.3、站点文件的管理:打开站