Dreamweaver网页制作教案

精品教育 认识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 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 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: 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 上帧文件 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制作导航下拉菜单。【学习步骤】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默认设置好的行为外，我们还可以从上下载更多更酷的第三方行为，我们只需将它们直接复制到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制作网页。二、学习内容Dream