Dreamweaver网页制作教案.docx

《Dreamweaver网页制作教案.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作教案.docx（42页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 相识Dreamweaver一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问。【学习步骤】1、Dreamweaver的功能Dreamweaver可以像一般的字处理软件一样编辑Internet上以HTML格式保存的全部文件，也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特别效果。Dreamweaver可用于管理站点，它像文件夹一样创立和翻开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织构造，使整个站点条理清晰。2、Dreamweaver的窗口（1） 标题栏（2）

2、菜单栏（3） 工具栏（4） 视图栏（5） 文件夹列表（6） 工作区3.网页工作区的三个视图方式选项它们分别是“一般”、“HTML”“预览”，它们之间的互相切换特别简洁实现的。一般视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表达，在此方式下，可以像在Word中那样干脆进展各种编辑操作，实现网页编辑的全部功能。HTML视图事实上是一个文本编辑器，其中给出了一般视图方式下所件网页的HTML代码。在这里可以用菜单吩咐进展复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比拟简洁区分各种语法成分。为了在制作网页过程中可以随时查看网页的实际效果，Dream

3、weaver供应了预览视图方式。4.安装dreameaver的方法 安装及注册5.关闭dreameaver6.保存网页的方法三、小结Dreamweaver的根本学问 建立一个简洁的站点一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；建立一个简洁的站点；进展简洁的网页编辑。【学习步骤】1、创立空白站点。执行菜单吩咐“文件”“新建”“站点”，就会出现8中站点向导。出于简洁，可选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“确定”即建成一个空站点。2、建立一个简洁的文字网页建立了

4、一个站点之后，就应当在站点中参加网页了。创立空白网页执行菜单吩咐“文件”“新建”“网页”，就会出现一对话框，选择“一般网页”模板并单击“确定”即建立了一个新的空白页面。网页工作区的三个视图方式选项它们分别是“一般”、“HTML”“预览”，它们之间的互相切换特别简洁实现的。一般视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表达，在此方式下，可以像在Word中那样干脆进展各种编辑操作，实现网页编辑的所有功能。HTML视图事实上是一个文本编辑器，其中给出了一般视图方式下所件网页的HTML代码。在这里可以用菜单吩咐进展复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的

5、颜色显示，这样比拟简洁区分各种语法成分。为了在制作网页过程中可以随时查看网页的实际效果，Dreamweaver供应了预览视图方式。输入文本网页中最根本的也是最重要的局部就是网页中由文本构成的内容，因此制作网页首先要从文本输入开场。3、设置网页中文字的字体、颜色、大小和效果在文本开场处按下鼠标左键，不放手拖到完毕处，选择要设置的文本块。执行菜单吩咐“格式字体”。在“字体”对话框中，单击“字体”选项卡。在字体选择窗口中，选定所须要的字体，再确定文本的字型、大小、颜色、效果等。按“确定”即可。4、 网页编辑（1） 将图片插入网页（2） 将剪贴画插入网页（3） 参加GIF动画（4） 保存嵌入式图形文件

6、（5） 运用图片工具栏（6） 设置图片属性（7） 设置网页背景（8） 设置超链接（9） 应用框架（10） 表单的运用5、小结简洁站点的建立过程 设计限时自动关闭的网页一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver设计限时自动关闭的网页。【学习步骤】设计页面时，常常会从一个页面翻开一个子窗口以供阅读者查看。通常，这种子窗口中的内容一经阅读者看过，对于阅读者而言就不再须要，而他们常常会遗忘关掉这些小窗口，致使很多的阅读器窗口翻开着，耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动

7、关闭的形式。1. 在本地站点中生成一个Smlple文件夹。2. 在Smlple文件夹中，生成名为Index.html以及名为firstpage.html的文件。3. 双击Index.html，翻开该文档，进入到文档的设计视图窗口中。4. 单击菜单View/Head Content，显示文档的头部区域。5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，翻开Inset Script对话框。如图所示，在Language下拉列表框中选择javascript选项，并在Coctento文本框中输入“setTimeout(self.close()，15

8、000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以依据须要将之修改为自己须要的时间毫秒数。设置时间6. 在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“#”，将其设置为一个空链接。7. 在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下Ctrl+T组合键，翻开快速标记编辑器，进入到快速标记编辑器的编辑标记形式。然后在“”前输入“onclick=selfclose()”。 如图所示，设置完毕，单击OK按钮，确认操作。这样在Index.html被作为子窗口翻开后，单击该链接就可

9、以立即关闭该子窗口。8. 保存Index.html文件，并退出index.html的Dremweaver窗口。9. 如今开场设计fristpage.html页面。在本地站点的Smlple文件夹中，双击 fristpage.html，翻开该文档，进入到文档的设计视图窗口中。10. 在文档中输入“单击这里翻开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“#”，将之设置为空链接。11. 可以通过为该链接应用Open Browser Window行为来设置单击链接时翻开Index.html窗口，不过更便利的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端

10、的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，翻开快速标记编辑器，进入到快速标记编辑器的 编辑标识形式。再在“”前输入“onclick=window.open(index.html,null,width=200px，height=200px)”（如图所示）。设置完毕，按下回车键，确认操作。设置单击链接时翻开12.上述操作就完成了本例的设置。可以单击菜单用，保存所做的工作。然后按下F12键，在阅读器中预览页面效果。三、小结 用Dreamweaver设计限时自动关闭的网页用Dreamweaver做会挪动的文字一、学习目的理解Dreamweaver，学会利用Dreamwea

11、ver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver做会挪动的文字。【学习步骤】一、根本语法 . 啦啦啦，我会挪动耶！ 文字挪动属性的设置：方向 #=left, right 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 方式 #=scroll, slide, alternate 啦啦啦，我一圈一圈围着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 循环 #=次数；若未指定则循环不止(infinite) 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 速度 啦啦啦，我走得好快哟！ 对齐方式(Align) #=top,

12、 middle, bottom 啦啦啦，我会挪动耶！对齐上沿、中间、下沿。二 、小结 用Dreamweaver做会挪动的文字 用Dreamweaver创立导航条一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver创立导航条。【学习步骤】一个网站的不同页面运用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也便利了阅读者在不同页面间的跳转。用Dreamweaver可作出各种比拟困难的导航条。网页上的导航条可由一个或几个局部组成，每个局部均由各种图像构成，可以链接到不同的网页页面。

13、在Dreamweaver中每局部中最多可设四个状态下的图像。一开场是一个初始图像，当鼠标挪动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次挪动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、阅读的速度。导航条制作方法：挪动光标到须要导航条的地方，单击主菜单栏的“InsertNavigation Bar”子吩咐，或干脆单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框，如下图，此时我们可以进展各种设置来实现上述功能：在“Element Name”项后的文本框填入这个

14、部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每局部中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标挪动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击

15、后当鼠标再次挪动到这个部位上时显示的图像。留意：Element Name项和 Up Image项是必需的，全部的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。三 、小结 用Dreamweaver创立导航条 用Dreamweaver创立导航条一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver创立导航条。【学习步骤】当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠

16、标挪动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目的。 接着是“Options”项，若选中“Preload Images”选框，则阅读者阅读页面时，全部图像将在页面下载的同时全部下载，整个页面翻开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按依次下载，整个页面翻开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over Whi

17、le Down Image项改为鼠标挪动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次挪动到这个部位上时显示的图像。最下面是“ Insert”项，选框中有Horizontally(程度)和Vertically(垂直)两个选项。选中Horizontally为导航条程度绽开，选中Vertically 为导航条垂直绽开。 Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。当一个部位设置完成后，要添加其他部位，可点击对话框上方的“”按钮，可按上面的步骤进展新部位的设置。要删

18、去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“”按钮即可。另外，运用设置导航条图像中的高级功能，可变更文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,全部导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：在“Behaviors”面板中的“Actions”标签页，单击其上面的“”号按钮，在弹出的菜单中选择“Set Nav Bar Image”吩咐，弹出Set Nav Bar Image 对话框中(见图2)，选择“Advanced”标签页，对高级属性进展设置。其中，若选择“Ove

19、r Image or over while Down Image”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框中选择要显示的图片，同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片途径；若选择“Down Image”项，则当阅读者单击所选图像后,显示另外的图片。图2存盘后，按F12键测试所作导航条。三、小结 用Dreamweaver创立导航条用Dreamweaver创立状态栏一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学

20、问；用Dreamweaver创立状态栏。【学习步骤】状态栏制作方法：设置阅读器状态栏中的文本信息,这一功能可在阅读网页面时,在阅读器窗口底下状态栏中显示相关信息。其方法:选择“Behaviors”面板中的Actions标签页的“Set Text of Status Bar”吩咐,在弹出的Set Text of Status Bar对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运行的效果。当然可用JavaScript语言在Message文本框中参加些函数,让文本显示功态的效果。三、小结用Dreamweaver创立状

21、态栏用Dreamweaver的模板创立网页一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver的模板创立网页。【学习步骤】1、创立模板页面最简洁的方法是将一个网页另存为模板文件，通过执行吩咐： as Template，DreamWeaver会在网站根书目中建立一个模板文件夹Templates来保存该模板。当然，也可以新建一个模板：WindowTemplates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板；再单击Open Template

22、按钮翻开该模板，保存后自动存放于网站模板文Templates中。新建、翻开的模板页面和一般的网页没什么两样，同样可以参加表格、层、图片、动画、脚本，设置页面属性等。举例：这里以制作一个模板为例来说明。在该页面中，我们盼望左侧的网站标识图和底部的导航图出如今每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不一样。为了保持页面整齐，我们用表格来布置这些元素。精确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。2、设定可

23、编辑区域设定模板可编辑区域，一般来说有两种方法。新建可编辑区域：选择吩咐：ModifyTemplateNew Editable Region。在某一空白区域中单击后执行该吩咐即可将该区域变为可编辑区域。标记某一区域为可编辑区域：选择吩咐：ModifyTemplateMark Selectin as Editable Region。假如某区域已经有一些文字，并且盼望在以后新建的超文本文件中局部保存其内容，先选中该区域再执行标记吩咐即可。取消可编辑状态：选择吩咐：ModifyTemplateUnmark Editable Region。执行该吩咐后会弹出一个对话框，其中有当前已有的可编辑区域列表，

24、选中要取消的区域名称，确认即可。举例：在大片空白区中随意单击一下，执行ModifyTemplateNew Editable Region吩咐，在弹出对话框中输入名称：Main；选中左下角本页说明下面的文字，执行ModifyTemplateMark Selectin as Editable Region吩咐，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。三、小结 用Dreamweaver的模板创立网页 运用模板一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver的模板创立网页。

25、【学习步骤】1、依据模板新建页面吩咐： From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进展修改的局部。空白的Main编辑区可干脆进展插入表格、文字、图片等操作，Exp编辑区保存有原来的文字，修改或重新编辑均可。2、对一个已经有内容的页面应用模板吩咐：ModifyTemplateApply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（Choose Editable Region for Orphaned Content）。要是不想保存则可以选择“（none）”。举例：我

26、们先新建一个一般页面，输入：“CIW电脑工作室”，执行ModifyTemplateApply Template to Page吩咐，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出如今主编辑窗口中。3、更新模板以全面更新站点基于某一模板建立了一些页面后，对模板进展修改后保存时，就会自动弹出一个对话框，列出全部运用了该模板的页面，询问是否要更新。另外一种方法是执行ModifyTemplateUpdate Pages吩咐。从Update Pages对话框中选择一个站点或站点的某一种模板（同一站点中可以运用多个模板），单击右侧

27、的Start按钮，软件会自动搜寻与模板相关联的网页并进展更新。特别便利！举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，如今不想要它，同时还想将全部页面中的该图片均删除。就可以翻开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即可。留意：新建和运用模板前需定义站点。方法是，执行吩咐：SiteDefine Sites；指定站点名称和本地根书目（Local Root）。模板运用的是相对途径，假如没有指定网站在本地的位置，软件就不能精确找到并保存模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而相应变

28、更。三、小结 用Dreamweaver的模板创立网页用Dreamweaver 中插入背景音乐一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver 中插入背景音乐。【学习步骤】一、干脆插入法1.翻开一张须要插入背景音乐的网页，在菜单中找到这样的吩咐： Windows - Behaviors，调出“Behaviors”行为面板，如下图所示(Dreamweaver MX 的面板)：2.点击“+”号按钮，选择“play sound”吩咐，如下图：假如此吩咐呈反白色，不行用，请在此吩咐下拉列表中选择“Sho

29、w Even For”吩咐，在此子菜单里选择“ IE 4.0 ”以上的版本，因为IE 4.0 以上的版本才支持此种格式的音乐插入方法。3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要阅读器支持的音乐文件格式(如mid、wav、AIFF、AU) 4.插入之后网页里会显示一个“plugin”插件图标，但我们还须要作进一步的调整。因为 Dreamweaver 自动插入了一段限制代码，便利我们定制激活背景音乐。但此功能不须要用到，那么就要把它删除。代码有两段，分别如下：代码一： 代码二： 5.完成插入，此时的背景音乐还不能自动播放，点选插件图标，按“ctrl + F3

30、”快捷键，调出属性面板，点击右下角的“Parameters”按钮，在弹出的窗口中进展修改，把参数“AutoStart”后面的“Value”缺省值“false”改成“true”（如下图所示），这样就到达翻开页面背景音乐就响起的效果。我们知道，音乐的播放是有时间长短的，假如盼望它重复播放，可以把上图中的“Loop”参数值改成“true”。在 Dreamweaver 中插入背景音乐的几种方法屡次收到喜爱太平洋网络学院的网友的信件，信中提问如何在 Dreamweaver 中插入背景音乐，如今让我一次性向大家介绍几种背景音乐的插入方法，让更多的人去驾驭它。6.之前翻开删除代码时我们看到了插入音乐的 HT

31、ML 标记为 ，为了让大家对它有更加深化的理解，接下来引用一段 太平洋网络学院 - 设计教室 - HTML 局部中的“HTML语言剖析”中的一段，介绍一下标记的参数：三、小结 用Dreamweaver 中插入背景音乐 用Dreamweaver 中插入背景音乐一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver 中插入背景音乐。【学习步骤】 是用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其参数设定较多。如下： src=your.

32、mid设定 midi 档案及途径，可以是相对或肯定。autostart=true是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。 loop=true是否自动反复播放。LOOP=2 表示重复两次，true 是， false 否。HIDDEN=true是否完全隐藏限制画面，true 为是，no 为否 (内定)。STARTTIME=分:秒设定歌曲开场播放的时间。如 STARTTIME=00:30 表示从第30秒处开场播放。 VOLUME=0-100设定音量的大小，数值是0到100之间。内定则为运用系统本身的设定。WIDTH=整数 和 HIGH=整数设定限制面板的高度和宽度

33、。(若 HIDDEN=no) ALIGN=center设定限制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom CONTROLS=smallconsole设定限制面板的外观。预设值是 console。 console 一般正常面板 smallconsole 较小的面板 playbutton 只显示播放按钮 pausecutton 只显示暂停按钮 stopbutton 只显示停顿按钮 volumelever 只显示音量调整按钮 二、代码法： 是用来插入背景音乐，

34、但只适用于 IE，其参数设定不多。src=your.mid设定 midi 档案及途径，可以是相对或肯定。autostart=true是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。loop=infinite是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复屡次。此种方法就是干脆把标记放于网页文件的之间，设置好mid文件的途径就行。参数的设置如文中讲解。三、插件法有些人始终没有舍弃 FrontPage 或许就因为在一些元素的插入中，Dreamweaver 没有供应功能，或者不便利。但我们知道，Dreamweaver 支持插件，声音插入插件为我们供

35、应了便利。插件下载：sound.mxp下载后双击文件，就可以干脆安装了，安装完成你可以在“对象”面板的“Common”栏看到一个喇叭图标。干脆点击此按钮，就弹出如下图所示的插入窗口：Forever：设置无限循环播放Never：不循环播放，即只播放一次NO of times：设置播放的次数点击“Browser”按钮选择好声音文件之后，按确定完成制作。三、小结 利用代码法和插件法在Dreamweaver 中插入背景音乐用Dreamweaver在主页中制作连续的背景音乐一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dr

36、eamweaver在主页中制作连续的背景音乐。【学习步骤】一、保持背景音乐的连绵不断，效果很好，现介绍如下，供制作个人主页的挚友们参考： 首先运用标签 framesetframe.frame.frameset 将主页 (index.html) 屏幕分成上下两个帧，为了不破坏页面布局，将上帧的高度设为 0；然后，在主页上帧放置的超文本文件(back_music.htm)中设置网站的背景音乐，最好不要设置播放界面；最终，在主页的下帧放置网站主页的主要内容(main.htm)。 这样一来，主页下帧的页面就成为主页实际的活动页面，上帧的页面在访问者的整个阅读过程中始终保持静止不动，设置的背景音乐也就不

37、会中断了。 主页文件 index.html: html headtitle连绵不断的背景音乐/title/head frameset frameborder=0 rows=0,* frame src=back_music.htm scrolling=no noresize frameborder=0 frame src=main.htm frameborder=0 noframes body pplease browse the web pages with browser that supperts frames. /p /body /noframes /frameset /html 上帧文

38、件 back_music.htm(背景音乐为当前书目下的liang_zhu.mid,只播放一次)： html headtitle/title/head body !-背景音乐:- embed src=./liang_zhu.mid hidden=true autostart=true loop=0 /body /html 三、小结 用Dreamweaver在主页中制作连续的背景音乐 DreamweaverMX制作导航下拉菜单一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；DreamweaverMX制作导航下拉菜单。【

39、学习步骤】Dreamweaver从出道以来，其简便易用而又功能强大的“行为”(Behavior)始终是大家所关注的热点之一。在Dreamweaver MX(DW MX)中，对这一功能又有了扩大与改良。 在DW MX中，行为指的是为了响应某一事务(Event)而实行的一个操作(Action)。其中Event 指的是阅读器的事务，比方窗口刷新、鼠标挪动等。而 Action 指的是后台响应事务的 JavaScript 代码，可以完成相应的操作，比方播放声音、翻转图片等。 用DW MX制作导航下拉菜单是网页中常常运用的特效之一。(如图)主要应用了DW MX中的“Show-Hide Layers”行为。

40、 首先制作好导航条(图1中的“产品中心”那一栏)，随后添加一个层，作为下拉菜单将要显示的位置，并填入下拉菜单的对应栏目。 接下来，翻开“Behaviors”面板，同时选中“产品中心”链接(留意，这个时候不可以选中刚刚建好的层，否则无法应用“Show-Hide Layers”行为)，单击“+”号，选择“Show-Hide Layers”，就可以看到我们刚刚建好的层在选择项中，可以设定为隐藏或者显示(如图)。行为的妙用主要表达在：假如我们要实现下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显示；而鼠标分开链接时，使层隐藏。依据这种思想，我们首先为这个层设立两个Action，一个选择Hide

41、，一个选择Show。然后，调整Event，将Hide Layer的Event设为OnMouseOut，即为鼠标分开链接；而将Show Layer的Event设为OnMouseOver，即为鼠标选中链接。按“F12”预览，就可看到我们期盼的效果。这样，平常我们觉得很神奇的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上接着应用 “S”行为，实现鼠标点选链接时出现图片翻转效果。 行为不是一个个孤立的特效，可以由多个行为组合叠加实现困难的功能，除了DW MX默认设置好的行为外，我们还可以从上下载更多更酷的第三方行为，我们只需将它们干脆复制到DreamweaverMXConfigurationB

42、ehaviorsActions书目下即可，从而使DW MX的这一闪光点更加眩目。三、小结 用DreamweaverMX制作导航下拉菜单 用Dreamweaver做弹出窗口 一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver做弹出窗口。【学习步骤】1.翻开一个页面，设置页面属性。左边界，顶部边界为 0 ，在标题处输入标题名称。2. 在页面中插入图片。也可以是文字， Flash 动画等。小窗口页面就准备好了。 给一个页面添加弹出小窗口： 1. 翻开须要添加弹出小窗口页面，例如一个网站的首页，在标签选

43、择器中选择“ body ”标签。 2. 翻开行为面板，点击“ + ”按钮添加行为。 3. 选择“翻开阅读器窗口”。 4. 在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。 5. 按 F12 ，在阅读器中发布的效果如下图。 三、小结 用Dreamweaver做弹出窗口 Dreamweaver 页面制作 一、学习目的理解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的根本学问；Dreamweaver 页面制作。【学习步骤】一、下边的简洁网页为例，叙述一下制作过程。简洁网页如下图： 在开场制作之前，我们先对这个页面进展一下分析。看看这个页面用到了那些东西。网页顶端的标题“我的主页”是一段文字。网页中间是一幅图片。最下端的欢送词是一段文字。网页背景是一深紫红颜色。知道了这个网页的构