用DreamWeaver打造留言板(中)

经过前面5课的学习，我们对Dreamweaver MX创建和管理站点页面文档的前台技术有了一个概括的认识和应用了，实际上前5课所涉及到的应该是创建和管理站点的最基本的一些技术。

掌握了这些技术，我们设计一般的静态站点应该是没有问题了。

那么现在开始留言板站点的后台程序的创建？按道理是可以讨论这方面的问题了，但我还想再讨论一些站点页面的其他元素和效果的创建方法。

虽然这些技术可能和我们的留言板站点关系不是很大，但是因为它们也是一些常用的技术和方法，我们还是在这里系统的学习一下吧。

一、利用时间轴和层实现页面中的滚动字幕效果。

小字报：今天留言板的最多的问题是这个教程共有几课？看到上面这个滚动字幕的效果了吧，它是通过在Dreamweaver时间轴面板中定义层的移动动画来实现的。

什么？Dreamweaver也有时间轴？是的，而且你用它可以设计出不错的动画效果呢。

而且用这样的技术设计出来的动画效果更符合web的特征。

1、单击插入栏中常用标签下的层命令按钮，在页面中拖拽鼠标插入一个层。

在层中输入需要的字幕文字。

2、打开时间轴面板。

执行“窗口/其他/时间轴”命令打开时间轴面板。

3、将页面文档中的层选中，并把它拖放到时间轴的时间线上。

默认的情况是插入的动画长度为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏的两端自动加入了两个关键帧。

4、在时间轴面板的动画栏上的关键帧按下鼠标左键并左右拖动，则可以改变关键帧的位置。

向右拖动第15帧上的这个关键帧以延长关键帧到60帧，如图1所示。

图1 时间轴面板5、在第30帧鼠标右键单击，在弹出的快捷菜单中选择“插入关键帧”命令，在第30帧插入一个关键帧。

6、单击第30帧，然后将页面文档中的层水平向右移动合适的距离如图2所示。

图2 层的运动轨迹7、在时间轴面板中选择：自动播放和循环，并把行为标志拖放到第60帧的位置，如图1所示。

这个左右来回滚动的字幕效果就完成了，简单吧？其实时间轴和层结合在一切定义动画还有很多技巧，以后慢慢研究吧。

：）二、创建当页面载入时弹出窗口的效果先单击这里观看具体页面效果我们可以看到页面载入时弹出了一个信息提示对话框窗口，接着又弹出了一个自定义外观的浏览器窗口。

这两个效果都是通过在行为面板中定义页面载入时的行为而实现的。

我们定义页面载入时的行为实际上就是定义< body >标签的行为。

▲弹出信息提示对话框窗口1、在标签检查器中单击选中< body >标签，这时整个页面文档就会变成灰色状态。

2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，如图3所示。

图3 行为面板——定义行为3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。

▲打开浏览器窗口1、在标签检查器中单击选中< body >标签，这时整个页面文档就会变成灰色状态。

2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“打开浏览器”行为命令，如图3所示。

3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图4所示。

图4 打开浏览器窗口的外观参数的定义行为面板是个很重要的面板，我们在创建页面效果时会经常用到它，它里面有很多常见的效果的定义。

比如定义页面的状态条信息、检查页面提交表单的正确性等等。

以后要多研究研究它哦~三、禁止访问用户的右键单击现在你用鼠标右键在这个页面上单击一下试试……你的右键失效了吧，想把我的页面上的资源马上拿走？嘿嘿~还是再费点工夫吧。

1、将页面文档视图转换到“代码视图”模式，然后将光标定位在< /body >前面一行。

这里就是我们将要插入JavaScript脚本代码的地方。

2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图5所示。

图5 插入脚本对话框3、按照图5进行设置，然后确定以后，看看我们的页面文档中出现了什么：< script language="JavaScript" type="text/JavaScript" >< /script >这是一对< script >标签，它定义了在页面中将要插入的脚本所使用的语言。

我们通过步骤2得到的这样一个结果，当然也可以手工输入这些代码来实现。

4、将光标定位在< script language="JavaScript" type="text/JavaScript" >与< /script >之间。

5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数”，然后鼠标双击“禁用右键单击”，如图6所示。

图6 插入代码片段完成以上操作以后，你会发现在< script language="JavaScript" type="text/JavaScript" >与< /script >之间插入了一段脚本代码。

这样就基本OK了，当然我们还可以改一下警告信息。

改这里：var message = "嘿嘿，右键不能拿我的东西！";四、自动搭上著名的搜索引擎，提高自己网站的访问率自动提高自己网站的访问率？这么好的事情谁不想知道！其实很简单，方法就是让著名的搜索引擎帮助我们。

许多搜索引擎装置（自动浏览网页为搜索引擎收集信息以编入索引的程序）读取关键字meta标签的内容和说明meta标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。

在Dreamweaver MX 中如何实现这个技术呢？1、单击插入栏下的“文件头标签”，如图7，我们要使用文件头标签下的两个按钮命令。

图7 文件头meta标签属性2、单击图7所示的“关键字属性”按钮，在弹出的关键字设置对话框的关键字文本框中输入站点的关键字。

比如：闪客，教程，flash等，注意多个关键字之间用逗号隔开。

3、单击图7所示的“说明属性”按钮，在弹出的说明设置对话框的描述文本框中输入对站点的描述文字。

比如：本站点是一个专门讨论动画设计和网站建设的站点，有大量的原创教程。

这个教程的上篇到本课就要结束了。

说实话，有一种如获重负的感觉，也终于要有一个新的开始了。

学习是一个快乐和痛苦的过程。

想一想自己又给了10MB 多数据新的生命、想一想这么多的收获，学习过程中的付出也真值得。

好了，别酸了，还是讨论我们的课程吧……这次课定位在“画”网页，一个画字给了我们更大的设计空间！网页可以画出来？那当然。

大家别忘了，Fireworks可是专业的网页设计工具，而且MX这个版本赋予它更强大的网页设计功能。

这次我们就讨论Fireworks MX和Dreamweaver MX结合在一起“画”一个漂亮的网页。

先看这里：留言板站点说明页面。

我们就学习这个页面是怎样画出来的。

一、在Fireworks MX中绘制页面（png源文件下载）1、新建一个画布文档。

宽：755像素、高：300像素，透明背景。

2、在画布上绘制页面效果如图1所示。

大致包括3部分：页面头图片、表格框、页面尾图片。

图1 图像参考2、给图像文档进行切片选择工具栏中网页工具中的切片工具，然后拖动鼠标画矩形切片，如图2所示。

注意进行多个切片的时候一定要对准确，中间不能有缝隙，实际上在切片的时候系统自动有吸附的功能，只要边线对仔细就行。

图2 切片参考3、如图2所示，我们把图像一共切片分割成5个区域，绿色显示的①②③④是切片区，第⑤个是无切片区。

这里特别要注意③、④两个切片的切割，它们的宽度应一致（10像素）。

而且千万不能把①切片区中的边框曲线切进来！（③、④两个切片区和①切片区的连接部位就是一段曲线，应把曲线留到①切片区）4、导出图像为包含表格代码的HTML文件执行“文件/导出”命令，则弹出导出对话框，如图3所示。

请按照图中所示进行设置。

图3 导出图像切片二、在Dreamweaver MX中对导出的Fireworks MX HTML文件编辑1、在Dreamweaver MX中打开导出的Fireworks MX HTML文件。

或者在Dreamweaver MX中单击插入栏中的按钮插入Fireworks HTML。

2、这时你会发现，原来那些切片在这里都是一些表格单元。

现在你清楚该怎么做了吧。

3、单击原来的⑤哪个区域，将选中的图片删除，这里是我们输入文字的主要表格单元格。

4、现在是最关键的操作。

目前我们在③、④那两个单元格（原来是③④切片区域）看到的图片等于是插入到单元格中的图片。

必须把它们转变成单元格的背景图片这样的性质。

这样文字单元格随文字的输入而延伸时，③、④单元格也会跟着延伸并不断线了。

可以在属性面板完成以上操作，如图4所示。

图4 在属性面板中进行图片性质的转换大功告成！到此，本教程的上篇就结束了。

从下一课开始我们就要讨论留言板站点的后台数据库和程序的设计了，一起继续努力吧。

从这一课我们就要开始学习如何实现留言板站点的动态特性了。

那么什么是静态站点？什么又是动态站点呢？还是简单的说明一下：▲静态站点和动态站点概述△所谓“静态”指的就是网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP协议向WEB服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。

其页面的内容使用的仅仅是标准的HTML代码，最多再加上一些诸如飞来飞去的蝴蝶这样的动画效果。

若网页维护者要更新网页的内容，就必须手动地来更新其所有的HTML文档，给维护者带来大得出乎想象的工作量，如图1。

图1 静态站点简单图示△动态网站技术将网页维护者从一遍一遍的重复而烦琐的手动更新中解脱出来，并且可以实现诸如留言板、BBS论坛、新闻实时发布等站点访问者与web 服务器交互性很强的页面。

以ASP技术为例，动态站点的一般实现原理如图2所示。

图2 ASP技术动态站点简单图示一般情况下，在我们的动态站点部署中包括两个主要内容：一个是动态脚本程序，另一个是对数据的存储和管理。

本教程中，前者使用的是ASP技术，后者是常用的数据库技术，用数据库来存储和管理数据是动态网站最高效的选择。

下面我们就先讨论讨论数据库技术……一、数据库技术简介任何程序都要处理数据，如何存储和管理程序中要处理的数据是程序的关键。

数据库技术是目前使用最广泛的数据存储和管理技术，它在大量以数据处理为主的程序中起举足轻重的作用。

目前使用最广泛的数据库类型是关系型数据库。

在关系型数据库中我们可以把数据库中的数据看成一个二维表格，如图3所示。

图3 二维表格数据实际上现实世界的很多数据都可以描述为如图3所示的这种二维表格的形式。