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.关闭dreameaver

6.保管网页的办法

三、小结

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文件夹中，生成名为lndex.html以及名为firstpage.html的文件。

3.双击lndex.html,翻开该文档，进入到文档的设计视图窗口中。

4.单击菜单View/HeadContent,显现文档的头部区域。

5.单击设计视图窗口中的文档头部窗格。选择菜单Insert/lnvisibleTags/Script,翻开InsetScript对话框。

如图所示，在Language下拉列表框当选择javascript选项，并在Coctento文本框中输入

“setTimeout(”self.close()”，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。

在代码中，15000表示15000毫秒，也即15秒，也能够依据需求将之修正为本人需求的时间毫秒数。

设置时间

6.在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“###"，将其设置为一个空链接。

7.在状态栏左端的快速标志编辑器上，单击标志按钮。选中“关闭”链接，然后按下Ctrl+T组合键，翻开快

速标志编辑器，进入到快速标志编辑器的编辑标志形式。然后在前输入“onclick="selfclose()””。如图所

示，设置终了，单击OK按钮，确认操作。这样在lndex.html被作为子窗口翻开后，单击该链接就能够立

即关闭该子窗口。

"ODcJLxckFw9elf.close()

8.保管lndex.html文件，并退出index.html的Dremweaver窗口。

9.如今开端设计fristpage.html页面。在本地站点的Smlple文件夹中，双击fristpage.html,翻开该文档,

进入到文档的设计视图窗口中。

10.在文档中输入“单击这里翻开会自动关闭的子窗口”字样。然后在属性面板上的Link文本框中输入“###",

将之设置为空链接。

11.能够经过为该链接应用OpenBrowserWindow行为来设置单击链接时翻开lndex.html窗口，不过更

便当的办法是应用快速标识编辑器。办法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器

上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，翻开快速标志编辑器，进入到快速标志编辑

器的编辑标识形式。再在前输入"onclick="window.open('index.html',null','width=200px,

height=200px')"M(如图所示)。设置终了，按下回车键，确认操作。

oncLieks*wxndow.open(,xndex.null

,.wxdmZOOpx,hexght^ZOOpx*)*>

设置单击链接时翻开

12.上述操作就完成了本例的设置。能够单击菜单用File/save,保管所做的工作。然后按下F12键，在阅

读器中预览页面效果。

三、小结

用Dreamweaver设计限时自动关闭的网页

用Dreamweaver做会挪动的文字

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver做会挪动的文字。

【学习步骤】

一、根本语法

区啦啦啦，我会挪动耶！

文字挪动属性的设置：^[u]<direction=#>#=left,right

区啦啦啦，我从右向左移！

方式vbihavior=#>#=scroll,slide,alternate

区啦啦啦，我--圈一圈绕着走！

循环<loop=#>#=次数；若未指定则循环不止(infinite)

区啦啦啦，我只走3趟哟！

速度vscrollamount=#>

啦啦啦，我走得好快哟！v;/marquee>

对齐方式(Align)valign=#>#=top,middle,bottom

区啦啦啦，我会挪动耶！

对齐上沿、中间、下沿。

二、小结用Dreamweaver做会挪动的文字

用Dreamweaver创立导航条

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问：用Dreamweaver创立导航条。

【学习步骤】

一个网站的不同页面运用了同一导航条。经过统一导航条的办法，我们能够完成网站作风的统一，同时也

便当了阅读者在不同页面间的跳转。用Dreamweaver可作出各种比拟夏杂的导航条。网页上的导航条可

由一个或几个局部组成，每个局部均由各种图像构成，能够链接到不同的网页页面。在Dreamweaver"中

每局部中最多可设四个状态下的图像。一开端是一个初始图像，当鼠标挪动到导航条部位上时则显现另一

个图像，还能够设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次挪动到这个部位上的图像。普

通地，每部位只设一到两种状态的图像。由于图像太多了，会影响网页页面的访问、阅读的速度。

导航条制造办法：挪动光标到需求导航条的中央，单击主菜单栏的"Insert'NavigationBar”子命令，或直接

单击Objects面板上的图标，弹出“InsertNavigationBar”对话框，如下图，此时我们能够停止各种设置来

完成上述功用：

在"ElementName”项后的文本框填入这个部位的命名，也能够不填，这时Dreamweaver3将自动给它命

名。在Dreamweaver中每局部中最多可设四个状态下的图像："UpImage”项是该部位的初始图像，在其

后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置UpImage项，

其下的"OverImage"、"DownImage"和"OverWhileDownImage”三项能够不设置。其中，“OverImage”

项是鼠标挪动到这个部位上时显现的图像（本例当选择）；“DownImage”项是鼠标点击该部位后显现的初始

图像：“OverWhileDownImage”项是鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。留意：

ElementName项和UpImage项是必需的，•切的调用图像都会在系统的提示下保管在Dreamweaver3

文件夹中，以便调用。

三、小结

用Dreamweaver创立导航条

用Dreamweaver创立导航条

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问：用Dreamweaver创立导航条。

【学习步骤】

当然，还可给该部位设置超级链接：在下面的"WhenClickedGoToURL”项后文本框填入链接到的文件的

地址，或单击Browse按钮选择，当鼠标挪动到这个部位上时，在状态栏中能够看到链接到的地址。When

ClickedGoToURL项后有一个下拉选框，这是设置超级链接的目的。

接着是“Options”项，若选中“PreloadImages”选框，则阅读者阅读页面时，•切图像将在页面下载的同时

全部下载，整个页面翻开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选PreloadImages

选框，则页面下载的同时只下载初始图像，其它图像按次第下载，整个页面翻开的速度较快，但图像间转

换会有延迟。若选中"Show"Downlmage"lnitially”选框，则将DownImage设为初始图像。此时，OverWhile

DownImage项改为鼠标挪动到这个部位上时显现的图像，UpImage项改为鼠标点击该部位后显现的初始

图像，Overimage项改为鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。

最下面是"Insert"项，选框中有Horizontally（程度）和Vertically（垂直）两个选项。选中Horizontally为导航条

程度展开，选中Vertically为导航条垂直展开。UseTable项，选中后，Dreamweaver自动生成HTML

代码将导航条各部位用表格隔开。

当一个部位设置完成后，要添加其他部位，可点击对话框上方的“+”按钮，可按上面的步骤停止新部位的

设置。耍删去某一个部位，在“NavBarElements”选框中先选中，再点击对话框上方的“一”按钮即可。

另外，运用设置导航条图像中的高级功用，可改动文档中基于当前按钮下的其他的图像。在默许下,单击导

航条中的元素时，一切导航条中元素都会自动地返回原来默许的状态。若想设置被选中图像的上浮或是下沉

的不同效果时，可用导航条中的高级功用：在"Behaviors”面板中的“Actions”标签页，单击其上面的号

按钮，在弹出的菜单当选择“SetNavBarImage”命令，弹出SetNavBarImage对话框中（见图2）,选择

"Advanced"标签页，对高级属性停止设置。其中，若选择"OverImageoroverwhileDownImage”项，则

当鼠标划过图片时显现其上面的图片，有上浮或是下沉的效果，并在“AlsoSetImage”文本框当选择要显现

的图片，同时在其下面的“IfDownToImageFile”当选择当鼠标按下时要显现的图片途径；若选择“Down

Image”项，则当阅读者单击所选图像后，显现另外的图片。

5»<

|Advanced|

Whenelmrf

pv«rlayerOwrlluleDws1*•，］

AkoSefbMQr

Tolm>g»Fiej

■DoMn.ToImo9eF*j

CktrgaNrrMdemertwiCM«dldheiefemerHcZN«vBITtobe

2*t«d岭fwUpgpH“o2c，Ute<ktUb<rounMdtoch«nQrahw

ma9ei

图2

存盘后，按F12键测试所作导航条。

三、小结

用Dreamweaver创立导航条

用Dreamweaver创立状态栏

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver创立状态栏。

【学习步骤】

状态栏制造办法：

设置阅读器状态栏中的文本信息,这一功用可在阅读网页面时，在阅读器窗口底下状态栏中显现相关信息。

其办法:选择"Behaviors”面板中的Actions标签页的"SetTextofStatusBar”命令，在弹出的SetTextof

StatusBar对话框中如图3,在“Message”的文本框中输入所在状态栏中显现的文档，按“OK”按钮完成。再用

按F12快捷键来测试，可看到其运转的效果。

SetText•，StatesBaur

Met叼厥辿亢虎羊衽新卜海？渐谢?

当然可用JavaScript言语在Message文本框中参加些函数，让文本显现功态的效果。

三、小结

用Dreamweaver创立状态栏

用Dreamweaver的模板创立网页

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver■的模板创立网页。

【学习步骤】

1、创立模板页面

最简单的方法是将-■个网页另存为模板文件，经过执行命令：File—SaveasTemplate,DreamWeaver

会在网站根目录中树立一个模板文件夹一Templates来保管该模板。

当然,也能够新建一个模板:Window-Templates,会呈现的Templates面板,单击右下角的NewTemplate

按钮，输入文件名，就树立了一个空模板；再单击OpenTemplate按钮翻开该模板，保管后自动寄存于网

站模板文Templates中。

新建、翻开的模板页面和普通的网页没什么两样，同样能够参加表格、层、图片、动画、脚本，设置页面

属性等。

举例：这里以制造一个模板为例来阐明。在该页面中，我们希望左侧的网站标识图和底部的导航图呈现在

每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划

分红几个热辨别别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单

按钮下面的页面阐明则各不相同。为了坚持页面整洁，我们用表格来布置这些元素。

精确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。

2、设定可编辑区域

设定模板可编辑区域，普通来说有两种办法。

新建可编辑区域：选择命令：Modify-Template-NewEditableRegion。在某一空白区域中单击后执行该

命令即可将该区域变为可编辑区域。

标志某一区域为可编辑区域：选择命令：Modify-Template—MarkSelectinasEditableRegion。假如某

区域曾经有一些文字，并且希望在以后新建的超文本文件中局部保存其内容，先选中该区域再执行标志命

令即可。

取消可编辑状态：选择命令：Modify—►Template—>llnmarkEditableRegion。执行该命令后会弹出一

个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域称号，确认即可。

举例：在大片空白区中随意单击•下，执行Modify—Template->NewEd计ableRegion命令，在弹出对话

框中输入称号：Main；选中左下加本页阐明下面的文字，执行Modify—TemplateTMarkSelectinas

EditableRegion命令，输入称号：exp。能够看到可编辑区显现为浅蓝色，保管即完成模板制造。

三、小结

用Dreamweaver的模板创立网页

运用模板

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver的模板创立网页。

【学习步骤】

1、依据模板新建页面

命令：File-NewFromTemplate。弹出对话框，从模板列表当选取模板，呈现的新页面中除可编辑区外

均有淡黄色背景，是不能停止修正的局部。空白的Main编辑区可直接停止插入表格、文字、图片等操作，

Exp编辑区保存有原来的文字，修正或重新编辑均可。

2、对一个曾经有内容的页面应用模板

命令：Modify—Template—ApplyTemplatetoPage。选择模板后还会弹出一个对话框，让您选择现有的

孤立内容保管到哪个可编辑区域(ChooseEditableRegionforOrphanedContent)«要是不想保存则能

够选择"(none)

举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify-Template-ApplyTemplateto

Page命令，选择模板test,现有内容保管区域选择Main,确认后可看到页面自动变成了模板页的方式，

而“CIW电脑工作室”这一行字就呈现在主编辑窗口中。

3、更新模板以全面更新站点

基于某一模板树立了一些页面后，对模板停止修正后保管时，就会自动弹出一个对话框，列出一切运用了

该模板的页面，讯问能否要更新。

另外一种办法是执行Modify-Template—>UpdatePages命令。从UpdatePages对话框当选择一个站点

或站点的某一种模板(同一站点中能够运用多个模板)，单击右侧的Start按钮，软件会自动搜索与模板

相关联的网页并停止更新。十分便当！

举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，如今不想要它，

同时还想将一切页面中的该图片均删除。就能够翻开模板test.dwt,删除该图层，保管模板，单击右侧的

“Update”按钮即可。

留意：新建和运用模板前需定义站点。办法是，执行命令：Site-DefineSites；指定站点称号和本地根目

录(LocalRoot)o模板运用的是相对途径，假如没有指定网站在本地的位置，软件就不能精确找到并保

管模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保管位置的不同而相应

变化。

三、小结

用Dreamweaver的模板创立网页

用Dreamweaver中插入背景音乐

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver中插入背景音乐。

【学习步骤】

一、直接插入法

1.翻开一张需求插入背景音乐的网页，在菜单中找到这样的

命令：Windows->Behaviors,调出“Behaviors”行为面板，如下图所示（DreamweaverMX的面板）:

假如此命令呈反白色，不可用，请在此命令下拉列表当选择“ShowEvenFod命令，在此子菜单里选择“IE

4.0”以上的版本，由于IE4.0以上的版本才支持此种格式的音乐插入办法。

3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要阅读器支持的音乐文件格式（如mid、

wav、AIFF、AU）

4.插入之后网页里会显现一个"plugin”插件图标，但我们还需求作进•步的调整。由于Dreamweaver自

动插入了一段控制代码，便当我们定制激活背景音乐。但此功用不需求用到，那么就要把它删除。代码有

两段，分别如下：

代码一：

<ponMouseOver="MM_controlSound(,play,,'document.CS1022210102744*,'windowsXP.wav*)">

：<script1anguage="JavaScript"type="text/JavaScript">

：<!一

：functionMM_controlSound(x,_sndObj,sndFile){//v3.0

：vari,method=sndObj=eval(_sndObj);

：if(sndObj1=null){,,

：if(navigator.appName=='Netscape')method="play";

；else{

=if(window.M_WIP=null){

：window.MM_WMP=false;

：for(iinsndObj)if(i=="ActiveMovie"){

：window.MM_WMP=true;break;

)}_

：if(window.MM_WMP)method="play";

：elseif(sndObj.FileName)method="run";

i})

：if(method)eval(_sndObj+"."+method+"0");

：elsewindow,location=sndFile;

i)

：//一>

：〈/script)

代码二:

5.完成插入，此时的背景音乐还不能自动播放，点选插件图标，按“Ctrl+F3”快捷键，调出属性面板，点击

右下角的“Parameters”按钮，在弹出的窗口中停止修正，把参数“AutoStart”后面的“Value”缺省值“false”改

成“true”（如下图所示），这样就到达翻开页面背景音乐就响起的效果。

Paraaeters

OK

Cancel

[Help]

我们晓得，音乐的播放是有时间长短的，假如希望它反复播放，能够把上图中的“Loop”参数值改成“true”。

在Dreamweaver中插入背景音乐的几种办法

屡次收到喜欢安定洋网络学院的网友的信件，信中发问如何在Dreamweaver中插入背景音乐，如今让我

一次性向大家引见儿种背景音乐的插入办法，让更多的人去控制它。

6.之前翻开删除代码时我们看到了插入音乐的HTML标志为<EMBED>,为了让大家对它有愈加深化的

理解，接下来援用一段安定洋网络学院->设计教室->HTML局部中的“HTML言语分析”中的一段，引见

一下<EMBED>标志的参数：

三、小结

用Dreamweaver中插入背景音乐

用Dreamweaver中插入背景音乐

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver中插入背景音乐。

【学习步骤】

<EMBED>是用来插入各种多媒体，格式能够是Midi、Wav、AIFF、AU等等，Netscape及新版的IE都

支持。其参数设定较多。如下：

<EMBEDsrc=Myour.mid"autostart="true"loop="true"hidden="true'^>src="your.mid”设定midi档案及途

径，能够是相对或绝对。autostart=true能否在音乐档下载完之后就自动播放。true是，false否（内定

值）。loop="true”能否自动重复播放。L00P=2表示反复两次，true是，false否。HIDDEN="true”能否完

整躲藏控制画面，true为是，no为否（内定）。STARTTIMEJ分渺”设定歌曲开端播放的时间。

如STARTTIME="00:30"表示从第30秒处开端播放。丫。W1\^="0-100”设定音量的大小,数值是0到100

之间。内定则为运用系统自身的设定。WIDTH』整数”和HIGH3整数”设定控制面板的高度和宽度。

（若HIDDEN="no"）ALIGN="center”设定控制面板和旁边文字的对齐方式，其值能够是top、bottom、

center>baseline>left、right、texttop、middle>absmiddle、absbottomCONTROLS="smallconsole"J®

定控制面板的外观。预设值是console。

console普通正常面板

smallconsole较小的面板

playbutton只显现播放按钮

pausecutton只显现暂停按钮

stopbutton只显现中止按钮

volumelever只显现音量调理按钮

二、代码法

<BGSOUND>：

vBGSOUND>是用来插入背景音乐，但只适用于IE,其参数设定不多。

<BGSOUNDsrc="your.mid"autostart=trueloop=infinite>

src=nyour.mid,,

设定midi档案及途径，能够是相对或绝对。

autostart=true

能否在音乐档下载完之后就自动播放。true是，false否（内定值）。

loop=infinite

能否自动重复播放。LOOP=2表示反复两次，InfiMe表示反复屡次。

此种办法就是直接把VBGSOUND>标志放于网页文件的Vhead></head>之间，设置好mid文件的途径

就行。参数的设置如文中讲解。

三、插件法

有些人一直没有舍弃FrontPage或许就由于在一些元素的插入中，Dreamweaver没有提供功用，或者不

便当。但我们晓得，Dreamweaver支持插件，声音插入插件为我们提供了便当。

插件下载：sound.mxp

下载后双击文件，就能够直接装置了，装置完成你能够在“对象”面板的“C。mm。n”栏看到•个喇叭图标。直

接点击此按钮，就弹出如下图所示的插入窗口：

Forever：设置无限循环播放

Never：不循环播放，即只播放一次

NOoftimes：设置播放的次数

点击“Browsed按钮选择好声音文件之后，按肯定完成制造。

三、小结

应用代码法和插件法在Dreamweaver中插入背景音乐

用Dreamweaver在主页中制造连续的背景音乐

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver在主页中制造连续的背景音乐。

【学习步骤】

一、坚持背景音乐的时断时续，效果很好，现引见如下，供制造个人主页的朋友们参考：首先运用标

签(frameset)(frame...)(frame...)(frameset)将主页(index.html)屏幕分红上下两个帧，为了不

毁坏页面规划，将上帧的高度设为0；然后，在主页上帧放置的超文本文件(back_music.htm)中设置网站

的背景音乐，最好不要设置播放界面；最后，在主页的下帧放置网站主页的主要内容(main.htm)。

这样一来，主页下帧的页面就成为主页实践的活动页面，上帧的页面在访问者的整个阅读过程中一直坚持

静止不动，设置的背景音乐也就不会中缀了。

主页文件index.html:

(html)

(head)(title)时断时续的背景音乐(/title)</head>

(framesetframeborder="Onrows="0,*")

(framesrc="back_music.htm"scrolling="no"noresizeframeborder="0M>

(framesrc="main.htm"frameborder="0">

(noframes)

(body)

<p)pleasebrowsethewebpageswithbrowserthatsuppertsframes.</p>

(/body)

</noframes>

(/frameset)

(/html)

上帧文件back_music.htm(背景音乐为当前目录下的liang_zhu.mid,只播放一次):

(head)(title)</title>〈/head〉

<body>

〈!•背景音乐

(embedsrc=,,./liang_zhu.mid"hidden="true"autostart="true"loop="0M)

(/body)

(/html)

三、小结

用Dreamweaver在主页中制造连续的背景音乐

DreamweaverMX制造导航下拉菜单

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问：DreamweaverMX制造导航下拉菜单。

【学习步骤】

Dreamweaver从出道以来，其烦琐易用而又功用强大的“行为"(Behavior)不断是大家所关注的热点之一。

在DreamweaverMX(DWMX)中，对这一功用又有了扩大与改良。

在DWMX中，行为指的是为了响应某一事情(Event)而采取的一个操作(Action)。其中Event指的是阅读

器的事情，比方窗口刷新、鼠标挪动等。而Action指的是后台响应事情的JavaScript代码，能够完成相

应的操作，比方播放声音、翻转图片等。

用DWMX制造导航下拉菜单是网页中经常运用的特效之一。(如图)主要应用了DWMX中的“Show-Hide

Layers”行为。

◊产品中心O交

产品博览.

名优精选g

行家推荐I

£术新品展示|

队手

分英搜索|

机问

14亿产品匿录J

首先制造好导航条（图1中的“产品中心”那一栏），随后添加一个层，作为下拉菜单将要显现的位置，并填入

下拉菜单的对应栏目。

接下来，翻开“Behaviors”面板，同时选中“产品中心”链接（留意，这个时分不可以选中刚刚建好的层，否则

无法应用“Show-HideLayers”行为），单击“+”号，选择“Show-HideLayers”，就能够看到我们刚刚建好的层

在选择项中，能够设定为躲藏或者显现（如图）。

HCSSSQ，l”[KTm.*rB

<<»Ac4cm二J二I

Ev**f

oeMcvnO^

行为的妙用主要表现在：假如我们要完成下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显现;

而鼠标分开链接时，使层躲藏。依据这种思想，我们首先为这个层设立两个Action,•个选择Hide,•个

选择Show。然后，调整Event,将HideLayer的Event设为OnMouseOut,即为鼠标分开链接；而将

ShowLayer的Event设为OnMouseOver,即为鼠标选中链接。按"F12"预览，就可看到我们期盼的效果。

这样，平常我们觉得很神秘的导航下拉菜单就能够随便在行为中完成。还能够在导航链接上继续应

用“SwapImage”行为，完成鼠标点选链接时呈现图片翻转效果。

行为不是一个个孤立的特效，能够由多个行为组合叠加完成复杂的功用，除了DWMX默许设置好的行为

外，我们还能够从上下载更多更酷的第三方行为，我们只需将它们直接复制到

DreamweaverMXConfigurationBehaviorsActions目录下即可，从而使DWMX的这一闪光点愈加眩目。

三、小结

用DreamweaverMX制造导航下拉菜单

用Dreamweaver做弹出窗口

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver做弹出窗口。

【学习步骤】

1.翻开一个页面，设置页面属性。左边境，顶部边境为0,在标题处输入标题称号。

2.在页面中插入图片。也能够是文字，Flash动画等。小窗口页面就准备好了。

给一个页面添加弹出小窗口：

1.翻开需求添加弹出小窗口页面，例如一个网站的首页，在标签选择器当选择“body”标签。

翻开行为面板，点击“+”按钮添加行为。

选择“翻开阅读器窗口”。

4.在要显现的URL处，选择弹出小窗口页面文件。设置.弹出小窗口属性。

5.按F12,在阅读器中发布的效果如下图。

三、小结

用Dreamweaver做弹出窗口

Dreamweaver页面制造

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；Dreamweaver页面制造。

【学习步骤】

一、下边的简单网页为例，叙说一下制造过程。简单网页如下图:

lacroaediaDreaaveaver2004-【我的主交(<yxz/aain.htae)JSBK

文件①）«n（z）查不⑦猿入a）修改Q）文本a）命令9站点ova（i）幅助如

if用▼■日晶-2・。・周&）曰・7

.<5X

上j代叫二;推分辿更十制a式的主页，<<阶&G®

我的主页

，

『

押

九

秋

W

欢迎浏览我的主页！请您多提宝贵意见!

:<U*r><4>工”“”>叵史”@607x422.49K/4t^

格式&)段落*祥式9v(BJZ119■*»(L)

字体Q)V«rd»n*.1v^cy4#―q*X3)媪二jBFFFFF1=：=U21目标Q)

I页面♦怪1

♦络票

在开端制造之前，我们先对这个页面停止一下剖析。看看这个页面用到了那些东西。

网页顶端的标题“我的主页”是一段文字。

网页中间是一幅图片。最下端的欢送词是一段文字。网页背景是一深紫红颜色。

晓得了这个网页的构造以后我们就来能够制造了。

首先启动DreamweaverMX2004,确保你曾经用站点管理器树立好了一个网站（根目录）。

为了制造便当，请您事前翻开资源管理器，把要运用的图片搜集到网站目录images文件夹内。

【插入标题文字】

进入页面编辑设计视图状态。在普通状况下，编辑器默许左对齐，光标在左上角闪烁，光标位置就是插入

点的位置。假如要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入"我的主页"四个字。

字小不要紧，我们能够对它停止设置

【设置文字的格式】

选中文字，在上图属性面板中将字体魄式设置成默许字体，大小可恣意更改字号。并选中"B"将字体变粗。

【设理文字的颜色】

首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

【设置网页的标题和背景颜色】

点击“修正”菜单选“页面属性”。系统弹出页面属性对话框（如下图）

请在标题输入框填入标题“我的主页，

设置背景颜色：网页背景能够是图片，也能够是颜色。此例是颜色。如上图翻开背景颜色选择器停止选取。

假如背景要设为图片，点击背景图象'阅读"按钮，系统弹出图片选择对话框，选中背景图片文件，点击肯

定按钮。

设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，依照以下的步骤插入一幅画图片，

并使这张图片居中。您也能够经过属性面板中的左对齐按钮让其居左安放。

【插入图像】选择以下恣意一种办法：

运用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击肯定。如下

图：

选抄用做源文件E®

逸掣文件名目◎文件不找［站直神务・

酬预览

查找范KI（X）.口1»*<*^vTg•9

百%^

斤»-^

科

博

^

注

纪

^

注

好

“>-2

蜀E

！

一

泻»-

岩»r

“

法

»-

会

文件名如21400s230JFK,49K/

文件类）：国0文件（・.目,札".”《；・）

Sid£JP%•PMV［取洎I

VXL|i,il2Lj”|

相对于|XHV用MB

回期CED俄

2）运用插入栏（如下图）：单击插入栏对象按钮>选按钮，弹出“选择图像源文件”对话框，其他操作

同上。

常用▼目臼恩|国用▼园叫国▼屏

（3）运用面板组“资源”面板（如下图）：点SJ按钮，展开根口录的图片文件夹，选定该文件，用鼠标拖

动至工作区适宜位置。

►CSS样式

HW-

►应用程序

21.jpg

3-1,gif

3-3.gif

3-4,gif

一个图片就插入终了了。（插入*.swf动画文件，选择“插入”菜单〉媒体〉Flash）。

【输入欢送文字】

在图片右边空白处单击，回车换行。依然依照上述办法，输入文字“欢送您……”然后，应用属性面板对文

字停止设置。

保管页面。

♦个简单的页面就这样编辑终了了。

【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取

名为index.htm»

三、小结

①图片插入和对齐设置;

②文字的格式、颜色和加粗等设置:

③背景颜色的设置；

④预览网页，查看实践效果。

用Dreamweaver发布网站

一、学习目的

理解Dreamweaver,学会应用Dreamweaver制造网页。

二、学习内容

Dreamweaver的根本学问；用Dreamweaver发布网站。

【学习步骤】

在发布网站之前先运用Dreamweaver站点管理器对你的网站文件停止检查和整理，这一步很必要。能够

找出断掉的链接、错误的代码和未运用的孤立文件等，以便停止纠正和处置。

步骤如下：在编辑视图点「站点」菜单〉选“检查站点范围的链接”，弹出“结果”对话框，如下图：

下图是检查器检查出本网站与外部网站的链接的全部信息、，关于外部链接，检查器不能判别正确与否,

请自行核对。

▼结果

搜索|验证目标浏览3施接检查器i点报告FTP记录服务器调i

显不（S）•1外部链接v（链接到站点外的页面，不能

文件外部链接

加index.htmhttp：//www.oldkids.co...

国index.htmhttp：//www.oldkids.co...