Dreamweaver与XML综合应用

动态网页设计技巧与实例[china_zhao整理]

创建网页的动态变化或交互内容有两种选择：要么在服务器端建立Server-side Script或Database Interaction，要么在客户端用JavaScript编程。通过编写简短的JavaScript程序就可以实现强大的交互性与控制功能。例如：通用动态内容、检查插件、打开窗口、使窗体有效、在翻滚页面上改变图像、打开新的窗口、扫描插件、改变状态条、弹出消息、用鼠标指向一个图片时显示一个带音乐的动画等。
使用时间链工具可以制作出非常吸引人的动态网页效果。时间链使用动态HTML通过时间的变化来改变层的位置、大小、可见性和叠放顺序等属性来创建动画。
这些任务在Dreamweaver中很容易实现，Dreamweave 提供了丰富的内置行为，这些行为的设置是利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，它使那些不熟悉JavaScript或VBScript的网页设计师，可以方便地设计出通过复杂的JavaScript或VBScript 语言才能实现的功能。Dreamweave 4提供了一种不需要编写任何代码，就可以实现一些强大的交互性与控制功能的能力。还可以从互联网上下载一些第三方提供的动作来使用。如果熟悉JavaScript，还可以编写一些特定的行为来使用。
由于Dreamweave 4不是专门用来创建XML文件的软件，所以在使用Dreamweaver 4创建动态页面后，常常需要将源代码进行调整，使之符合XML语法。
6.1? 行??? 为
在本节中将讲述如何使用Dreamweaver 4创建有特殊效果的XML网页。例如：通用动态内容、检查插件、打开窗口、使窗体有效、在翻滚页面上改变图像、打开新的窗口、扫描插件、改变状态条、弹出消息、用鼠标指向一个图片时显示一个带音乐的动画等等。这些任务在Dreamweaver 4中很容易实现，Dreamweaver 4提供了丰富的内置行为，这些行为的设置是利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能，它使那些不熟悉JavaScript或VBScript的网页设计师，可以方便地设计出通过复杂的JavaScript或VBScript 语言才能实现的功能。Dreamweaver 4提供了一种不需要编写任何代码，就可以实现一些强大的交互性与控制功能的能力。

6.1.1? 使用行为的总体方法

行为是为响应某一具体事件而采取的一个或多个动作。当指定的事件被触发时，将运行相应的JavaScript程序，执行相应的动作。所以当创建行为时，必须先指定一个动作，然后再指定触发动作的事件。
行为是针对网页中的所有对象，要给一个对象添加行为，可以按如下步骤进行：
（1）选择Window|Behaviors命令，则可以打开Behaviors面板，如图6.1所示。

图6.1? 行为面板
该面板中各个部分功能如下：

：单击该按钮，则弹出行为列表，对当前不能使用的行为，则以灰色显示，没有变灰的其他行为表示可以使用，可以用鼠标从中选择。当选择一个行为时，就会打开参数对话框。
：单击该按钮，则删除下面列表中当前选择的行为。
和：用于在行为列表中移动选定的动作，改变执行动作的顺序。
Events：用于设置当前对象上触发动作的事件。JavaScript程序可以响应这个事件而运行代码，并创建在Dreamweaver 中与用户的操作相交互的程序。一个对象可以有多个触发事件。通常一个事件是针对页面对象或标记而言，不同版本的浏览器所支持的事件类型也不一样。
Actions：用于设置一个事件触发的动作。动作是一段预先编写好的JavaScript源程序，使用这段程序代码可以完成相应的任务。

（2）在文档窗口中选定一个对象。
（3）单击Behaviors面板中加号按钮，从弹出的行为列表选项中选择Show Events For命令，则会弹出一个子菜单，从该子菜单中选择不同的浏览器版本。不同的浏览器支持的事件不一样，版本越高则支持的事件越多。可从子菜单中选择不同的浏览器，也可以选择浏览器的范围，例如4.0 or Later Browsers，表示选择4.0及以后版本的浏览器。
（4）单击行为面板中的按钮，从弹出的行为列表选项中选择合适的行为。根据所选定的行为，在参数对话框中设置该行为的参数及指令。
（5）设置行为的所有参数，然后单击OK按钮。
6.1.2? 所有动作的使用
选择Window|Behaviors命令，出现Behaviors面板，单击Behaviors面板中加号按钮，则会弹出动作菜单，可从中选择一个动作添加到当前对象的Behaviors面板中。在文档窗口中选择的对象不一样，则可以使用的动作也不一样，给一个对象添加动作时，在Behaviors面板的标题栏中会显示该对象的标签，在动作菜单中不可用的动作都以灰色显示。
下面对各个动作的具体使用方法进行说明。
1．Call JavaScript
Call JavaScript动作的作用是执行预先编写好的一个JavaScript函数或者一行JavaScript代码，下面通过一个简单的实例说明如何使用该动作。该实例的具体操作步骤如下：
（1）在文档窗口的状态栏的标识符选择器中选择<body>标识符，然后选择Window|Behaviors命令，出现Behaviors面板，可以看到<body>标识符出现在Behaviors面板的标题栏上。单击Behaviors面板中按钮，则会弹出动作菜单，从中选择Call JavaScript命令，则会出现Call JavaScript对话框。
（2）在该对话框中输入如下内容：
alert("您感受到了XML的优越性吗？")
此时，Call JavaScript对话框显示如图6.2所示，单击OK按钮关闭该对话框，完成操作。

图6.2? Call JavaScript对话框
（3）<body>标识符对应的Behaviors面板显示如图6.3所示。在该面板中显示的动作是Call JavaScript，触发该动作的事件是onLoad。
?
图6.3? 设置了Call JavaScript的行为面板
（4）将该文件保存为Call_JS.htm。在浏览器中浏览该文件，当载入页面时会弹出一个如图6.4所示的对话框。

图6.4? 载入页面时弹出的对话框

2．Change Property

Change Property动作的作用是动态改变某一个对象的属性值，一般通过改变对象的标记属性值相应地改变对象的属性。
下面通过一个简单的实例说明如何使用该动作，该实例的具体操作步骤如下：
（1）启动Dreamweaver 4，新建一个文档。
（2）在文档中输入“动态改变样式”，选择Window|Properties命令，打开属性设置面板，在对应属性设置面板中设置这段文字为一级标题。
（3）再在文档窗口中输入如下内容：“请把鼠标移动到黄色背景的文字上面。”，通过对应的属性设置面板设置这段文字为粗体。
（4）选择Insert|Layer命令，在文档窗口插入一个层，然后将光标放置在层内，输入如下内容：“可以使用Change Property这个动作来改变文档的样式。”。
（5）选中该层，在对应的属性设置面板，在Layer ID属性设置一栏输入“mydiv”，将Z-index属性设置为“1”。
（6）先在文档窗口中选中“mydiv”层，然后选择Window|CSS Style Sheets命令，打开层叠样式表浮动面板。
（7）单击层叠样式表面板顶部右边的黑色三角按钮，从打开的下拉菜单中选择New Style命令。则会打开设置新的样式对话框。
（8）在Type选项中选择Use CSS Selector，然后在Name文本框中输入“#mydiv”，作为该样式的名称。
（9）设置好新建样式类型后单击OK按钮进行确认，接着系统会弹出保存样式表文件对话框，将该样式表保存。
（10）在保存文件后，系统会弹出一个层叠样式表定义面板，在样式设置面板中设置各种属性如下：

Font：Times New Roman, Times, serif
Size：24px
Color：红色（#FF0000）
Background：#FFFF00。

（11）设置完后，单击OK按钮进行确认，然后关闭所有打开的面板，返回文档窗口。可以看到所设置的样式自动应用到文字“我们使用Change Property这个动作来改变文档的样式。”中，此时文档窗口显示如图6.5所示。
（12）选择文档窗口右下角状态栏中的< mydiv>标识符，然后选择Window|Behaviors命令，出现行为面板，单击行为面板中的按钮，从弹出的动作列表框中选择Change Property命令，则会出现Change Property对话框，如图6.6所示。该对话框中各个选项的意义分别如下：

Type of Object：用于选择改变属性的对象标识符，它的对象类型有如下几种：

LAYER、DIV、SPAN：这三种类型是层标识符，用于改变层的属性。
IMG：图像标识符，用于改变一副图像的属性。
FORM：表单标识符，用于改变表单的属性。
INPUT/CHEKBOX：复选框标识符，用于改变复选框的属性。

图6.5? 应用样式后的文档窗口显示效果

图6.6? Change Property对话框
INPUT/RADIO：单选框标识符，用于改变单选框的属性。
INPUT/TEXT：单行文本框标识，用于改变单行文本框的属性。
INPUT/PASSWORD：口令输入框标识符，用于改变口令框的属性。
TEXTAREA：多行文本输入框标识符，用于改变多行文本输入框的属性。
DELECT：选择列表项标识符，用于改变选择列表项的属性。

Named Object：在Type of Object中设置了对象的类型后，Name Object后的下拉列表框列出了可以改变属性的对象。
Property：它有两个选项，选择Select，则可以从后面的列表项中选择一项要改变的属性，然后就可以在从后面的浏览器的列表中选择一种浏览器来浏览网页。如果选择的是Enter，就可以直接在后面的编辑框中输入要改变的对象属性。
New Value：设置所选择对象新的属性值。

（13）对话框中各个属性的设置值如下：

Type of Object：选择LAYER标识符，表示改变字符的属性。
Named Object：选择LAYER “mydiv”。
Property：输入“style.backgroundColor”表示改变层的背景颜色。
New Value：输入“#0000FF”，表示将层中的文字改变成蓝色。

（14）设置完毕后，单击OK按钮进行确认，此时行为面板就会显示加载的动作以及触发动作的事件。就这个行为而言，动作Change Property，触发动作的事件是onMouseOver。在本实例中的表现是：当用户把鼠标移动到mydiv层上时， mydiv层的背景颜色改变成蓝色。利用同样的方法，再添加一个动作，把这些属性改为原来的样式，并设置触发这个动作的事件为onMouseOut。
（15）选择File|Save命令，保存该文档。然后在浏览器中浏览该网页，最初的显示效果如图6.7所示。当用户把鼠标移动到有黄色背景的文字上的时候，这段文字的背景就变成了蓝色，变成如图6.8所示。当用户把鼠标从文字上移走后，文档又会变回原来的样式，这是因为不但为onMouseOver事件添加了Change Property动作，而且也为onMouseOut 事件添加了Change Property动作，并且这个动作把改变后的文字样式改变回原来的样式。
?
图6.7? 页面载入时的初始状态??????????????? 图6.8? 背景发生了改变
这只是HTML文档，如果需要创建XML文档，就必须在源代码中进行调整。当然如果已经创建了XML文档，则只需要将该HTML文档中的脚本语言拷贝到您创建的XML文档中。
该HTML文档的源代码调整为如下源代码，即可变为XML文档。
<?xml version="1.0"? encoding="gb2312" ?>
<?xml-stylesheet type="text/css" ?>
<body? xmlns:html="http://www.w3.org/TR/REC-html40">
<html:style>
head {
display:block;
text-align:center;
font-size:200%;
}
#mydiv {
font-family: "Times New Roman", "Times", "serif";
font-size: 24px;
color: #CC0000
}
</html:style>

?? <html:script language="JavaScript">
<!--
function MM_reloadPage(init)
{
//reloads the window if Nav4 resized
if (init==true) with (navigator)
{
if ((appName=="Netscape")&&(parseInt(appVersion)==4))
{
document.MM_pgW=innerWidth;document. MM_pgH=innerHeight; onresize=MM_reloadPage;
}
}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d)
{ //v4.0
var p,i,x;? if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_changeProp(objName,x,theProp,theValue) { //v3.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'");
}
//-->
</html:script>
<head> 动态改变样式 </head>
<html:b>我们使用Change Property这个动作来改变文档的样式。</html:b>
<html:span id="mydiv"
style="position:absolute; left:13px; top:91px; width:248px; height:127px;
z-index:1; background-color: #FFFF00; layer-background-color:#FFFF00"
onMouseOver="MM_changeProp('mydiv','','style.backgroundColor','#0000FF','LAYER')"
onMouseOut="MM_changeProp('mydiv','','style.backgroundColor','#FFFF00','LAYER')">可以使用Change Property这个动作来改变文档的样式。
</html:span>

</body>
该实例说明了如何将使用Dreamweaver 4创建有特殊效果的文档调整为XML文档。希望读者能通过该实例的学习，掌握其基本的方法与技巧。在以后的章节中，只给出HTML文档创建的步骤，或者只给出基于HTML文档调整为XML文档的源代码。
通过上例，不难发现当需要改变一个对象的属性时，需要深入鼠标事件中去寻找样式的改变值，并且为每一个样式的改变设置鼠标事件，当需要改变一个对象的多个属性时（如同时改变同一对象的五个属性），这样做实在是太麻烦了。
下面介绍一种简便的方法：把动态HTML与CSS结合起来使用，可以使用“Class”类属性来改变文档的样式。可以事先定义两种所需的样式，然后给它们各自一个Class标识。这样在文档中，就可以随意调用了。它的好处是修改维护简便，因为我们只要更改字符层级的Class样式的属性，而不用深入文档内部结构搜索各个元素的样式。
大家参考下面给出的HTML代码进行尝试，然后调整为XML文档。HTML代码如下：
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF">
<h1 align="center">动态改变样式</h1>
<p>请把鼠标移动到蓝色背景的文字上面。</p>
<p>可以使用Change Property这个动作来改变文档的样式。</p>
<span class="little"
onMouseOver="this.className='big'"
onMouseOut="this.className='little'">放大这段文字
</span></p>
</body>
</html>
下面这个实例演示了如何对页面进行属性。XML文档代码如下：
<?xml version="1.0"? encoding="gb2312" ?>
<?xml-stylesheet type="text/css" href="change.css" ?>
<fresh? xmlns:html="http://www.w3.org/TR/REC-html40">
<html:STYLE>

</html:STYLE>
<html:script language="JavaScript">
<!--
function initialize()
{
document.all.cmb1.innerText=traintext.value;
document.all.cmb2.innerText=traintext.value;
}

????? function vandalize()
{
var s=traintext.value;
if(s.length>20)
{
alert("Please use 20 characters or less ");
traintext="";
}
else
{
document.all.cmb1.innerText=traintext.value;
document.all.cmb2.innerText=traintext.value;
}
}
-->
</html:script>

? <body onclick="initialize()">?
<div id="cmb1" class="graffiti1" ></div>
<div id="cmb2" class="graffiti2" ></div>
<div class="textbox" >
<html:input type="text" name="traintext" value="改变文档内容" size="15"/>
<html:input type="button" name="BTN1" value="改变" onlick="vandalize()"/>
</div>
<RGB>
<R onclick="cmb2.style.color='red'">R</R>
<G onclick="cmb2.style.color='green'">G</G>
<B onclick="cmb2.style.color='blue'">B</B>
</RGB>?
</body>
</fresh>
这里分别对各个动作的作用及CSS部分做解释。当页面初始化时，对象<body>就调用函数：
function initialize()
{
document.all.cmb1.innerText=traintext.value;
document.all.cmb2.innerText=traintext.value;
}
它的作用是使层中显示的文字要与输入文本框中的内容一致。由于在定义页面时设定文本框中的内容是“改变文档内容”，所以，下面显示的也是“改变文档内容”，如图6.9所示。

图6.9? 最初显示结果

[下一页]