Dreamweaver网页制作教案.doc

认识Dreamweaver一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问。【学习步骤】1、Dreamweaver的功用Dreamweaver能够像普通的字处置软件一样编辑Internet上以HTML格式保管的一切文件，也就是网页；它支持动态HTML，能够在网页中产生动画；还能够在网页中插入各种插件，以产生特殊效果。Dreamweaver可用于管理站点，它像文件夹一样创立和翻开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织构造，使整个站点条理明晰。2、Dreamweaver的窗口（1）标题栏（2）菜单栏（3）工具栏（4）视图栏（5）文件夹列表（6）工作区3.网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现，在此方式下，能够像在Word中那样直接停止各种编辑操作，完成网页编辑的一切功用。HTML视图实践上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML言语中的不同成分均用不同的颜色显现，这样比拟容易辨别各种语法成分。为了在制造网页过程中可以随时查看网页的实践效果，Dreamweaver提供了预览视图方式。4.装置dreameaver的办法装置及注册5.关闭dreameaver6.保管网页的办法三、小结Dreamweaver的根本学问树立一个简单的站点一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；树立一个简单的站点；停止简单的网页编辑。【学习步骤】1、创立空白站点。执行菜单命令“文件”“新建”“站点”，就会呈现8中站点导游。出于简单，可选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“肯定”即建成一个空站点。2、树立一个简单的文字网页树立了一个站点之后，就应该在站点中参加网页了。创立空白网页执行菜单命令“文件”“新建”“网页”，就会呈现一对话框，选择“普通网页”模板并单击“肯定”即树立了一个新的空白页面。网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现，在此方式下，能够像在Word中那样直接停止各种编辑操作，完成网页编辑的所有功用。HTML视图实践上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML言语中的不同成分均用不同的颜色显现，这样比拟容易辨别各种语法成分。为了在制造网页过程中可以随时查看网页的实践效果，Dreamweaver提供了预览视图方式。输入文本网页中最根本的也是最重要的局部就是网页中由文本构成的内容，因而制造网页首先要从文本输入开端。3、设置网页中文字的字体、颜色、大小和效果在文本开端处按下鼠标左键，不放手拖到完毕处，选择要设置的文本块。执行菜单命令“格式字体”。在“字体”对话框中，单击“字体”选项卡。在字体选择窗口中，选定所需求的字体，再肯定文本的字型、大小、颜色、效果等。按“肯定”即可。4、网页编辑（1）将图片插入网页（2）将剪贴画插入网页（3）参加GIF动画（4）保管嵌入式图形文件（5）运用图片工具栏（6）设置图片属性（7）设置网页背景（8）设置超链接（9）应用框架（10）表单的运用5、小结简单站点的树立过程设计限时自动关闭的网页一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver设计限时自动关闭的网页。【学习步骤】设计页面时，经常会从一个页面翻开一个子窗口以供阅读者查看。通常，这种子窗口中的内容一经阅读者看过，关于阅读者而言就不再需求，而他们常常会遗忘关掉这些小窗口，致使许多的阅读器窗口翻开着，耗用大量的资源。因而我们能够将子窗口设计成经过一段时间后能够自动关闭的方式。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()，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也能够依据需求将之修正为本人需求的时间毫秒数。设置时间6.在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“#”，将其设置为一个空链接。7.在状态栏左端的快速标志编辑器上，单击标志按钮。选中“关闭”链接，然后按下Ctrl+T组合键，翻开快速标志编辑器，进入到快速标志编辑器的编辑标志形式。然后在“”前输入“onclick=selfclose()”。如图所示，设置终了，单击OK按钮，确认操作。这样在Index.html被作为子窗口翻开后，单击该链接就能够立即关闭该子窗口。8.保管Index.html文件，并退出index.html的Dremweaver窗口。9.如今开端设计fristpage.html页面。在本地站点的Smlple文件夹中，双击fristpage.html，翻开该文档，进入到文档的设计视图窗口中。10.在文档中输入“单击这里翻开会自动关闭的子窗口”字样。然后在属性面板上的Link文本框中输入“#”，将之设置为空链接。11.能够经过为该链接应用Open Browser Window行为来设置单击链接时翻开Index.html窗口，不过更便当的办法是应用快速标识编辑器。办法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，翻开快速标志编辑器，进入到快速标志编辑器的编辑标识形式。再在“”前输入“onclick=window.open(index.html,null,width=200px，height=200px)”（如图所示）。设置终了，按下回车键，确认操作。设置单击链接时翻开12.上述操作就完成了本例的设置。能够单击菜单用File/save，保管所做的工作。然后按下F12键，在阅读器中预览页面效果。三、小结用Dreamweaver设计限时自动关闭的网页用Dreamweaver做会挪动的文字一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver做会挪动的文字。【学习步骤】一、根本语法啦啦啦，我会挪动耶！文字挪动属性的设置：方向 #=left, right啦啦啦，我从右向左移！方式 #=scroll, slide, alternate啦啦啦，我一圈一圈绕着走！循环 #=次数；若未指定则循环不止(infinite)啦啦啦，我只走3趟哟！速度啦啦啦，我走得好快哟！对齐方式(Align) #=top, middle, bottom啦啦啦，我会挪动耶！对齐上沿、中间、下沿。二、小结用Dreamweaver做会挪动的文字用Dreamweaver创立导航条一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver创立导航条。【学习步骤】一个网站的不同页面运用了同一导航条。经过统一导航条的办法，我们能够完成网站作风的统一，同时也便当了阅读者在不同页面间的跳转。用Dreamweaver可作出各种比拟复杂的导航条。网页上的导航条可由一个或几个局部组成，每个局部均由各种图像构成，能够链接到不同的网页页面。在Dreamweaver中每局部中最多可设四个状态下的图像。一开端是一个初始图像，当鼠标挪动到导航条部位上时则显现另一个图像，还能够设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次挪动到这个部位上的图像。普通地，每部位只设一到两种状态的图像。由于图像太多了，会影响网页页面的访问、阅读的速度。导航条制造办法：挪动光标到需求导航条的中央，单击主菜单栏的“InsertNavigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框，如下图，此时我们能够停止各种设置来完成上述功用：在“Element Name”项后的文本框填入这个部位的命名，也能够不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每局部中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项能够不设置。其中，“Over Image”项是鼠标挪动到这个部位上时显现的图像(本例当选择)；“Down Image”项是鼠标点击该部位后显现的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。留意：Element Name项和Up Image项是必需的，一切的调用图像都会在系统的提示下保管在Dreamweaver 3文件夹中，以便调用。三、小结用Dreamweaver创立导航条用Dreamweaver创立导航条一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver创立导航条。【学习步骤】当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标挪动到这个部位上时，在状态栏中能够看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目的。接着是“Options”项，若选中“Preload Images”选框，则阅读者阅读页面时，一切图像将在页面下载的同时全部下载，整个页面翻开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按次第下载，整个页面翻开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标挪动到这个部位上时显现的图像，Up Image项改为鼠标点击该部位后显现的初始图像，Over image项改为鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。最下面是“ Insert”项，选框中有Horizontally(程度)和Vertically(垂直)两个选项。选中Horizontally为导航条程度展开，选中Vertically为导航条垂直展开。Use Table项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。当一个部位设置完成后，要添加其他部位，可点击对话框上方的“”按钮，可按上面的步骤停止新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“”按钮即可。另外，运用设置导航条图像中的高级功用，可改动文档中基于当前按钮下的其他的图像。在默许下,单击导航条中的元素时,一切导航条中元素都会自动地返回原来默许的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功用：在“Behaviors”面板中的“Actions”标签页，单击其上面的“”号按钮，在弹出的菜单当选择“Set Nav Bar Image”命令，弹出Set Nav Bar Image对话框中(见图2)，选择“Advanced”标签页，对高级属性停止设置。其中，若选择“Over Image or over while Down Image”项，则当鼠标划过图片时显现其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框当选择要显现的图片，同时在其下面的“If Down To Image File”当选择当鼠标按下时要显现的图片途径；若选择“Down Image”项，则当阅读者单击所选图像后,显现另外的图片。图2存盘后，按F12键测试所作导航条。三、小结用Dreamweaver创立导航条用Dreamweaver创立状态栏一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver创立状态栏。【学习步骤】状态栏制造办法：设置阅读器状态栏中的文本信息,这一功用可在阅读网页面时,在阅读器窗口底下状态栏中显现相关信息。其办法:选择“Behaviors”面板中的Actions标签页的“Set Text of Status Bar”命令,在弹出的Set Text of Status Bar对话框中如图3,在“Message”的文本框中输入所在状态栏中显现的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运转的效果。当然可用JavaScript言语在Message文本框中参加些函数,让文本显现功态的效果。三、小结用Dreamweaver创立状态栏用Dreamweaver的模板创立网页一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver的模板创立网页。【学习步骤】1、创立模板页面最简单的方法是将一个网页另存为模板文件，经过执行命令：FileSave as Template，DreamWeaver会在网站根目录中树立一个模板文件夹Templates来保管该模板。当然，也能够新建一个模板：WindowTemplates，会呈现的Templates面板，单击右下角的New Template按钮，输入文件名，就树立了一个空模板；再单击Open Template按钮翻开该模板，保管后自动寄存于网站模板文Templates中。新建、翻开的模板页面和普通的网页没什么两样，同样能够参加表格、层、图片、动画、脚本，设置页面属性等。举例：这里以制造一个模板为例来阐明。在该页面中，我们希望左侧的网站标识图和底部的导航图呈现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分红几个热辨别别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面阐明则各不相同。为了坚持页面整洁，我们用表格来布置这些元素。精确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。2、设定可编辑区域设定模板可编辑区域，普通来说有两种办法。新建可编辑区域：选择命令：ModifyTemplateNew Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标志某一区域为可编辑区域：选择命令：ModifyTemplateMark Selectin as Editable Region。假如某区域曾经有一些文字，并且希望在以后新建的超文本文件中局部保存其内容，先选中该区域再执行标志命令即可。取消可编辑状态：选择命令：ModifyTemplateUnmark Editable Region。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域称号，确认即可。举例：在大片空白区中随意单击一下，执行ModifyTemplateNew Editable Region命令，在弹出对话框中输入称号：Main；选中左下角本页阐明下面的文字，执行ModifyTemplateMark Selectin as Editable Region命令，输入称号：exp。能够看到可编辑区显现为浅蓝色，保管即完成模板制造。三、小结用Dreamweaver的模板创立网页运用模板一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver的模板创立网页。【学习步骤】1、依据模板新建页面命令：FileNew From Template。弹出对话框，从模板列表当选取模板，呈现的新页面中除可编辑区外均有淡黄色背景，是不能停止修正的局部。空白的Main编辑区可直接停止插入表格、文字、图片等操作，Exp编辑区保存有原来的文字，修正或重新编辑均可。2、对一个曾经有内容的页面应用模板命令：ModifyTemplateApply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保管到哪个可编辑区域（Choose Editable Region for Orphaned Content）。要是不想保存则能够选择“（none）”。举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行ModifyTemplateApply Template to Page命令，选择模板test，现有内容保管区域选择Main，确认后可看到页面自动变成了模板页的方式，而“CIW电脑工作室”这一行字就呈现在主编辑窗口中。3、更新模板以全面更新站点基于某一模板树立了一些页面后，对模板停止修正后保管时，就会自动弹出一个对话框，列出一切运用了该模板的页面，讯问能否要更新。另外一种办法是执行ModifyTemplateUpdate Pages命令。从Update Pages对话框当选择一个站点或站点的某一种模板（同一站点中能够运用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并停止更新。十分便当！举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，如今不想要它，同时还想将一切页面中的该图片均删除。就能够翻开模板test.dwt，删除该图层，保管模板，单击右侧的“Update”按钮即可。留意：新建和运用模板前需定义站点。办法是，执行命令：SiteDefine Sites；指定站点称号和本地根目录（Local Root）。模板运用的是相对途径，假如没有指定网站在本地的位置，软件就不能精确找到并保管模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保管位置的不同而相应变化。三、小结用Dreamweaver的模板创立网页用Dreamweaver中插入背景音乐一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver中插入背景音乐。【学习步骤】一、直接插入法1.翻开一张需求插入背景音乐的网页，在菜单中找到这样的命令：Windows - Behaviors，调出“Behaviors”行为面板，如下图所示(Dreamweaver MX的面板)：2.点击“+”号按钮，选择“play sound”命令，如下图：假如此命令呈反白色，不可用，请在此命令下拉列表当选择“Show Even For”命令，在此子菜单里选择“ IE 4.0 ”以上的版本，由于IE 4.0以上的版本才支持此种格式的音乐插入办法。3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要阅读器支持的音乐文件格式(如mid、wav、AIFF、AU) 4.插入之后网页里会显现一个“plugin”插件图标，但我们还需求作进一步的调整。由于Dreamweaver自动插入了一段控制代码，便当我们定制激活背景音乐。但此功用不需求用到，那么就要把它删除。代码有两段，分别如下：代码一：代码二：5.完成插入，此时的背景音乐还不能自动播放，点选插件图标，按“ctrl + F3”快捷键，调出属性面板，点击右下角的“Parameters”按钮，在弹出的窗口中停止修正，把参数“AutoStart”后面的“Value”缺省值“false”改成“true”（如下图所示），这样就到达翻开页面背景音乐就响起的效果。我们晓得，音乐的播放是有时间长短的，假如希望它反复播放，能够把上图中的“Loop”参数值改成“true”。在Dreamweaver中插入背景音乐的几种办法屡次收到喜欢安定洋网络学院的网友的信件，信中发问如何在Dreamweaver中插入背景音乐，如今让我一次性向大家引见几种背景音乐的插入办法，让更多的人去控制它。6.之前翻开删除代码时我们看到了插入音乐的HTML标志为，为了让大家对它有愈加深化的理解，接下来援用一段安定洋网络学院- 设计教室- HTML局部中的“HTML言语分析”中的一段，引见一下标志的参数：三、小结用Dreamweaver中插入背景音乐用Dreamweaver中插入背景音乐一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver中插入背景音乐。【学习步骤】是用来插入各种多媒体，格式能够是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都支持。其参数设定较多。如下： src=your.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=整数设定控制面板的高度和宽度。(若HIDDEN=no) ALIGN=center设定控制面板和旁边文字的对齐方式，其值能够是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom CONTROLS=smallconsole设定控制面板的外观。预设值是console。console普通正常面板smallconsole较小的面板playbutton只显现播放按钮pausecutton只显现暂停按钮stopbutton只显现中止按钮volumelever只显现音量调理按钮二、代码法：是用来插入背景音乐，但只适用于IE，其参数设定不多。src=your.mid设定midi档案及途径，能够是相对或绝对。autostart=true能否在音乐档下载完之后就自动播放。true是，false否(内定值)。loop=infinite能否自动重复播放。LOOP=2表示反复两次，Infinite表示反复屡次。此种办法就是直接把标志放于网页文件的之间，设置好mid文件的途径就行。参数的设置如文中讲解。三、插件法有些人一直没有舍弃FrontPage或许就由于在一些元素的插入中，Dreamweaver没有提供功用，或者不便当。但我们晓得，Dreamweaver支持插件，声音插入插件为我们提供了便当。插件下载：sound.mxp下载后双击文件，就能够直接装置了，装置完成你能够在“对象”面板的“Common”栏看到一个喇叭图标。直接点击此按钮，就弹出如下图所示的插入窗口：Forever：设置无限循环播放Never：不循环播放，即只播放一次NO of times：设置播放的次数点击“Browser”按钮选择好声音文件之后，按肯定完成制造。三、小结应用代码法和插件法在Dreamweaver中插入背景音乐用Dreamweaver在主页中制造连续的背景音乐一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver在主页中制造连续的背景音乐。【学习步骤】一、坚持背景音乐的时断时续，效果很好，现引见如下，供制造个人主页的朋友们参考：首先运用标签framesetframe.frame.frameset将主页(index.html)屏幕分红上下两个帧，为了不毁坏页面规划，将上帧的高度设为0；然后，在主页上帧放置的超文本文件(back_music.htm)中设置网站的背景音乐，最好不要设置播放界面；最后，在主页的下帧放置网站主页的主要内容(main.htm)。这样一来，主页下帧的页面就成为主页实践的活动页面，上帧的页面在访问者的整个阅读过程中一直坚持静止不动，设置的背景音乐也就不会中缀了。主页文件index.html:htmlheadtitle时断时续的背景音乐/title/headframeset frameborder=0 rows=0,*frame src=back_music.htm scrolling=no noresize frameborder=0frame src=main.htm frameborder=0noframesbodypplease browse the web pages with browser that supperts frames./p/body/noframes/frameset/html上帧文件back_music.htm(背景音乐为当前目录下的liang_zhu.mid,只播放一次)：htmlheadtitle/title/headbody!-背景音乐:-embed src=./liang_zhu.mid hidden=true autostart=true loop=0/body/html三、小结用Dreamweaver在主页中制造连续的背景音乐DreamweaverMX制造导航下拉菜单一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；DreamweaverMX制造导航下拉菜单。【学习步骤】Dreamweaver从出道以来，其烦琐易用而又功用强大的“行为”(Behavior)不断是大家所关注的热点之一。在Dreamweaver MX(DW MX)中，对这一功用又有了扩大与改良。在DW MX中，行为指的是为了响应某一事情(Event)而采取的一个操作(Action)。其中Event指的是阅读器的事情，比方窗口刷新、鼠标挪动等。而Action指的是后台响应事情的JavaScript代码，能够完成相应的操作，比方播放声音、翻转图片等。用DW MX制造导航下拉菜单是网页中经常运用的特效之一。(如图)主要应用了DW MX中的“Show-Hide Layers”行为。首先制造好导航条(图1中的“产品中心”那一栏)，随后添加一个层，作为下拉菜单将要显现的位置，并填入下拉菜单的对应栏目。接下来，翻开“Behaviors”面板，同时选中“产品中心”链接(留意，这个时分不可以选中刚刚建好的层，否则无法应用“Show-Hide Layers”行为)，单击“+”号，选择“Show-Hide Layers”，就能够看到我们刚刚建好的层在选择项中，能够设定为躲藏或者显现(如图)。行为的妙用主要表现在：假如我们要完成下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显现；而鼠标分开链接时，使层躲藏。依据这种思想，我们首先为这个层设立两个Action，一个选择Hide，一个选择Show。然后，调整Event，将Hide Layer的Event设为OnMouseOut，即为鼠标分开链接；而将Show Layer的Event设为OnMouseOver，即为鼠标选中链接。按“F12”预览，就可看到我们期盼的效果。这样，平常我们觉得很神秘的导航下拉菜单就能够随便在行为中完成。还能够在导航链接上继续应用“Swap Image”行为，完成鼠标点选链接时呈现图片翻转效果。行为不是一个个孤立的特效，能够由多个行为组合叠加完成复杂的功用，除了DW MX默许设置好的行为外，我们还能够从www.mcromedia.com上下载更多更酷的第三方行为，我们只需将它们直接复制到DreamweaverMXConfigurationBehaviorsActions目录下即可，从而使DW MX的这一闪光点愈加眩目。三、小结用DreamweaverMX制造导航下拉菜单用Dreamweaver做弹出窗口一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver做弹出窗口。【学习步骤】1.翻开一个页面，设置页面属性。左边境，顶部边境为0，在标题处输入标题称号。2.在页面中插入图片。也能够是文字，Flash动画等。小窗口页面就准备好了。给一个页面添加弹出小窗口：1.翻开需求添加弹出小窗口页面，例如一个网站的首页，在标签选择器当选择“body”标签。2.翻开行为面板，点击“+”按钮添加行为。3.选择“翻开阅读器窗口”。4.在要显现的URL处，选择弹出小窗口页面文件。设置弹出小窗口属性。5.按F12，在阅读器中发布的效果如下图。三、小结用Dreamweaver做弹出窗口Dreamweaver页面制造一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；Dreamweaver页面制造。【学习步骤】一、下边的简单网页为例，叙说一下制造过程。简单网页如下图：在开端制造之前，我们先对这个页面停止一下剖析。看看这个页面用到了那些东西。网页顶端的标题“我的主页”是一段文字。网页中间是一幅图片。最下端的欢送词是一段文字。网页背景是一深紫红颜色。晓得了这个网页的构造以后我们就来能够制造了。首先启动Dreamweaver MX 2004，确保你曾经用站点管理器树立好了一个网站（根目录）。为了制造便当，请您事前翻开资源管理器，把要运用的图片搜集到网站目录images文件夹内。【插入标题文字】进入页面编辑设计视图状态。在普通状况下，编辑器默许左对齐，光标在左上角闪烁，光标位置就是插入点的位置。假如要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们能够对它停止设置。【设置文字的格式】选中文字，在上图属性面板中将字体魄式设置成默许字体，大小可恣意更改字号。并选中“B”将字体变粗。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。【设置网页的标题和背景颜色】 点击“修正”菜单选“页面属性”。系统弹出页面属性对话框（如下图）请在标题输入框填入标题“我的主页”。设置背景颜色：网页背景能够是图片，也能够是颜色。此例是颜色。如上图翻开背景颜色选择器停止选取。假如背景要设为图片，点击背景图象“阅读”按钮，系统弹出图片选择对话框，选中背景图片文件，点击肯定按钮。设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，依照以下的步骤插入一幅画图片，并使这张图片居中。您也能够经过属性面板中的左对齐按钮让其居左安放。【插入图像】选择以下恣意一种办法：运用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击肯定。如下图：2）运用插入栏（如下图）：单击插入栏对象按钮选按钮，弹出“选择图像源文件”对话框，其他操作同上。（3）运用面板组“资源”面板（如下图）：点按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区适宜位置。一个图片就插入终了了。（插入*.swf动画文件，选择“插入”菜单媒体Flash）。【输入欢送文字】在图片右边空白处单击，回车换行。依然依照上述办法，输入文字“欢送您”然后，应用属性面板对文字停止设置。保管页面。一个简单的页面就这样编辑终了了。【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。三、小结图片插入和对齐设置；文字的格式、颜色和加粗等设置；背景颜色的设置；预览网页，查看实践效果。用Dreamweaver发布网站一、学习目的理解Dreamweaver，学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问；用Dreamweaver发布网站。【学习步骤】在发布网站之前先运用Dreamweaver站点管理器对你的网站文件停止检查和整理，这一步很必要。能够找出断掉的链接、错误的代码和未运用的孤立文件等，以便停止纠正和处置。步骤如下：在编辑视图点站点菜单选“检查站点范围的链接”，弹出“结果”对话框，如下图：下图是检查器检查出本网站与外部网站的链接的全部信息，关于外部链接，检查器不能判别正确与否，请自行核对。下图是检查器找出的孤立文件，这些文件您的网页没有运用，但是仍在你的网站文件夹里寄存，上传后它会占领有效空间，应该把它肃清。肃清方法是：先选中文件，点Delete键，肯定。这些文件就放在“回收站”。假如不想删除这些文件，点保管报告按钮（上图所示），在弹出的对话框中您给报告文件一个保管途径和文件名即可。该报告文件为一个检查结果列表。你能够参照此表，停止处置。纠正和整理之后，您的网站就能够发布了。【发布站点操作】假如您是第一次上传文件，您的远程Web效劳器根文件夹是空文件夹时按以下操作停止。假如不是空文件夹，另行操作附后。效劳器根文件夹是空文件夹时，衔接到远程站点，请执行以下操作：在Dreamweaver MX 2004中，选择“站点”“管理站点”。管理站点对话框中“dwmx2004”是在本教程第5页设置的，假如想回想一下，请查看“设置站点”。选择一个站点（即本地根文件夹），然后单击“编辑”。单击对话框顶部的“根本”选项卡。在前面“设置站点”时，已填写了“根本”选项卡中的前几个步骤，因而单击几次“下一步”，直到导游顶部高亮显现“共享文件”步骤。如下图：在标有“您如何衔接到远程效劳器？”的弹出式菜单中，选择“FTP”。单击“下一步”，弹出如下对话框：请输入以下选项：输入效劳器的主机名；（必需填入）“您打算将您的文件贮存在效劳器上的什么文件夹中？”（能够留空）在相应的文本框中输入您的用户名和密码。“运用平安FTP (SFTP)”选项。（可不勾选）单击“测试衔接”。假如衔接不胜利，请检查设置或咨询系统管理员。在输入相应的信息后，单击“下一步”。不要为站点启用文件存回和取出。单击“下一步”。单击“完成”以完成远程站点的设置。再次单击“完成”以退出“管理站点”对话框。【上传文件】在设置了本地文件夹和远程文件夹（空文件夹）之后，能够将文件从本地文件夹上传到Web效劳器。请执行以下操作：在“文件”面板（“窗口”“文件”）中，选择站点的本地根文件夹。单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。Dreamweaver MX 2004会将一切文件复制到效劳器默许的远程根文件夹。多数空间提供商都设置有效劳器默许的文件夹，请在此文件夹下创立一个空文件夹，办法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建文件夹”，输入一个称号，用作您的远程根文件夹，称号与您本地根文件夹的称号分歧，便于操作。也能够最大化“文件”面板。请翻开“文件”面板的最右边的“扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容。点击，Dreamweaver MX 2004将一切文件复制到您定义的远程文件夹。第一次上传必需搞分明网络空间效劳商指定的效劳器默许的寄存网页的文件夹，在此文件夹下寄存您的站点文件。访问您的网站地址为：http:/./index.htm假如你在效劳器默许的文件夹下上树立了与本地根文件夹同名的文件夹，那么访问您的网站，需求用这样的地址：http:/./（您的文件夹名）/index.htm上传终了，请在阅读器中输入阅读地址，测试您上传的结果。三、小结用Dreamweaver发布网站