用DreamWeaver打造留言板(中).doc

经过前面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所示。这个左右来回滚动的字幕效果就完成了，简单吧？其实时间轴和层结合在一切定义动画还有很多技巧，以后慢慢研究吧。：）二、创建当页面载入时弹出窗口的效果先单击这里观看具体页面效果我们可以看到页面载入时弹出了一个信息提示对话框窗口，接着又弹出了一个自定义外观的浏览器窗口。这两个效果都是通过在行为面板中定义页面载入时的行为而实现的。我们定义页面载入时的行为实际上就是定义标签的行为。弹出信息提示对话框窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，如图3所示。图3 行为面板定义行为3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。打开浏览器窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“打开浏览器”行为命令，如图3所示。3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图4所示。图4 打开浏览器窗口的外观参数的定义行为面板是个很重要的面板，我们在创建页面效果时会经常用到它，它里面有很多常见的效果的定义。比如定义页面的状态条信息、检查页面提交表单的正确性等等。以后要多研究研究它哦三、禁止访问用户的右键单击现在你用鼠标右键在这个页面上单击一下试试你的右键失效了吧，想把我的页面上的资源马上拿走？嘿嘿还是再费点工夫吧。1、将页面文档视图转换到“代码视图”模式，然后将光标定位在前面一行。这里就是我们将要插入JavaScript脚本代码的地方。2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图5所示。图5 插入脚本对话框3、按照图5进行设置，然后确定以后，看看我们的页面文档中出现了什么：这是一对标签，它定义了在页面中将要插入的脚本所使用的语言。我们通过步骤2得到的这样一个结果，当然也可以手工输入这些代码来实现。4、将光标定位在与之间。5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数”，然后鼠标双击“禁用右键单击”，如图6所示。图6 插入代码片段完成以上操作以后，你会发现在与之间插入了一段脚本代码。这样就基本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所示的这种二维表格的形式。关系数据库正式利用这种二维表格的形式来描述和管理程序中的数据的。数据库的基本组成单位是记录，记录被视为单个实体的相关数据的集合。例如图3表格中每一个用户的信息（表格的一行）就是一个记录。另外，图3表格中的用户ID、姓名、性别、留言内容、OICQ、等（表格的一列）各个相关信息在数据库中用专业术语说就是一个域，比如：姓名域、性别域等等。一个数据库可包含多个表，每个表具有唯一的名称。这些表可以是相关的，也可以是彼此独立的。表中每一列代表一个域，每一行代表一条记录。如图4所示是一个表的结构。图4 数据库中的一个表从一个或多个表中提取的数据子集称为记录集。记录集也是一种表，因为它是共享相同列的记录的集合。通过图5，我们可以很清楚的理解什么是记录集了吧。在Dreamweaver MX中定义记录集可是创建动态交互页面的重要步骤呢。 图5 记录集表二、用ACCESS2000创建留言板站点数据库ACCESS2000是微软的OFFICE2000办公系统中的一个重要组件。它是最常用的桌面数据库管理系统之一，它简单易用。作为用户访问量不是很大的个人小型站点，用ACCESS2000设计数据库还是可行的。下面我们就用ACCESS2000创建留言板站点中的数据库。创建数据库文档并设计数据库表结果1、创建空数据库文档。启动ACCESS2000程序，在出现的Microsoft Access提示框中选择“新建数据库/空Access数据库”，如图6所示。图6 新建空Access数据库2、如图6，单击“确定”按钮以后，出现“文件新建数据库”对话框。在其中给你的空Access数据库文件起个名字，找到存放它的本地硬盘文件夹。建议你把它存放到留言板站点根目录下的data文件夹下。E:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb3、完成第2步以后，单击“创建”按钮，则会弹出一个数据库设计窗口，如图7所示。我们要在这个窗口中完成数据库的设计。图7 数据库设计窗口创建表4、双击表窗口中的“使用设计器创建表”，会弹出一个表设计器设计视图，在其中我要完成表的结构（域）的设计。设计结果看这里5、设置表中主键。右键单击y_id字段，在弹出的快捷菜单中选择“主键”。这样y_id字段就成为表的主键了。6、当设计完成后，单击关闭按钮关闭表设计器设计视图窗口，这时会弹出一个提示框，如图8所示。回答“是”保存设计结果。图8 保存设计提示信息7、单击“是”以后，会弹出如图9所示的对话框。在其中输入数据库表的名字yonghu。图9 命名数据库表8、重复以上步骤创建另一个数据库表_guest。设计结果看这里在设计好的数据库表中输入记录经过前面的设计步骤以后，数据库设计窗口变成如下结果，如图10所示。图10 向数据表中添加记录请尝试分别在两个数据库表中添加一些记录并删除这些记录。对于动态站点（比如我们的留言板站点）的创建，除了静态页面元素的设计之外，在服务器端要创建和部署两个方面的内容：一个动态脚本程序（本留言板站点采用的是ASP技术）、另一个是数据库。在前一课我们已经创建了留言板站点的数据库文件，下面就该创建动态脚本程序了。在创建动态脚本程序之前，将数据库和留言板站点连接在一起是最基本的要求。原因很简单：动态脚本程序为了完成我们预定的程序任务，必定要操作数据，而数据被我们部署在数据库中，那么首先将数据库和站点连接起来，使动态脚本程序能够很方便的读、写数据库中的数据应该是很自然的要求了。 在Dreamweaver MX中如何实现数据库和站点的连接呢？连接的方法有几种呢？连接好的数据库中的数据是不是直接就可以应用到我们的页面中呢？本课要一一解决这些问题。在Dreamweaver MX中实现数据库连接的方法在Dreamweaver MX中有两种实现数据库连接的方法：一个是通过DSN（数据源名称）实现连接，另一个是通过自定义连接字符串实现连接。下面就以上一课所建立的留言板数据库（E:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb）为例，讨论它和留言板站点的连接方法。一、通过DSN（数据源名称）实现连接1、定义系统DSN打开控制面板，然后打开其中的ODBC数据源管理器，如图1所示。选择其中的系统DSN标签，然后单击添加按钮，我们要添加一个新的系统DSN名称。图1 ODBC数据源管理器添加新的系统DSN单击添加按钮以后会弹出一个“创建新数据源”对话框，如图2所示。选择其中的“Microsoft Access Driver(*.mdb)”。图2 选择需要的驱动程序来安装数据源单击“完成”按钮以后，会弹出“ODBC Microsoft Access安装”对话框。在其中定义数据源名并选取数据库文件，如图3所示。图3 ODBC Microsoft Access安装经过上面步骤的操作以后，在图1所示的窗口中就会显示一个新定义的数据源名称。将来我们在DW中就用这个数据源名称建立连接。2、在Dreamweaver MX中通过DSN（数据源名称）实现连接在Dreamweaver MX中打开留言板站点的主页面文档（main.asp）。打开数据库面板，单击 按钮，在弹出的菜单中选择“ 数据源名称（DSN）”，如图4所示。图4 数据库面板数据源名称在出现的数据源名称对话框中，选择DSN、定义连接名称，如图5所示。图5 定义数据源连接按照图5所示的完成操作确定以后，数据库面板就会出现新定义的连接名称，单击它前面的+展开，可以看到留言板数据库中的两个表，如图6所示。这时我们已经完成了数据库和留言板站点的连接了，连接名是liuyanban_jch。图6 数据库面板完成创建的连接以上我们完成了数据库和站点的连接，这个连接的建立是通过定义DSN完成的。通过DSN建立的数据库连接的特征是：十分方便对数据库的管理。比如，数据库的物理路径发生了改变，只需重新定义DSN，不需涉及到脚本程序的更改。如果我们采取通过DSN建立数据库连接，必须能控制站点服务器的DSN的定义。也就是说应该能够满足以下两种情况：或者站点服务器就是你自己管理；或者是你租用的服务器，但你可以及时通知ISP服务商帮你定义需要的DSN。二、通过自定义连接字符串实现连接1、还是在留言板站点的主页面文档（main.asp）中实现这种连接。先把前面通过DSN实现的连接删除，方法是右键单击连接名称，然后在弹出的快捷菜单中选择执行“删除连接”命令。2、在数据库面板，单击 按钮，在弹出的菜单中选择“自定义连接字符串”，如图7所示。图7 数据库面板自定义连接字符串3、在弹出的“自定义连接字符串”对话框中，如图8所示。在其中定义连接名称liuyanban_jch，并输入自定义的连接字符串：Driver=Microsoft Access Driver (*.mdb);DBQ=e:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb其中e:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb是将要连接的数据库文件的物理绝对路径。图8 自定义连接字符串4、按照图8所示的操作完成以后，数据库面板就会出现新定义的连接名称，单击它前面的+展开，可以看到留言板数据库中的两个表，如图6所示。这时我们已经完成了数据库和留言板站点的连接了，连接名是liuyanban_jch。以下是对设计好的动态站点的数据库文档和动态脚本文档部署到远程租用服务器上的说明：通过自定义连接字符串创建的数据库连接最大的特征就是：对于租用服务器空间的用户，不需要ISP服务商的帮助，用户自己就可以完成数据库和动态脚本程序在web站点服务器的部署。但有个关键的任务需要完成：获取远程服务器上部署的数据库文件的物理地址。方法是：先将设计好的站点数据库文件上传到服务器，获得这个数据库文件的虚拟路径地址，然后再通过使用ASP服务器对象的MapPath方法获取数据库文件在服务器上的物理路径。以我们这个留言板站点为例，我们需要上传的站点数据库文件是：liuyanban_data.mdb。将它上传到web服务器以后，用来打开这个文件的URL并不使用物理路径。它使用服务器名称或域名，后接虚拟路径，如下所示：/hanlan/liuyanban/data/liuyanban_data.mdb 但是这个路径不能用到我们自定义的连接字符串中，在自定义的连接字符串中我们需要的是数据库文件的物理路径。通过使用ASP服务器对象的MapPath方法获取数据库文件在服务器上的物理路径的方法是：1、在Dreamweaver MX中新建一个ASP文档页并切换到代码视图（“查看”“代码”）。2、在该页的HTML代码中输入以下表达式：（以下只是一个实例，具体情况要根据你所租用的FTP服务器而定）3、保存这个ASP动态页面文档，并把它上传到远程服务器。4、在IE浏览器中通过URL打开这个文件。这时在你的浏览器窗口中就会显示数据库文件在远程服务器上的物理地址。获得了数据库文件的物理地址以后，下面要重新更改自定义的连接字符串。1、我们在Dreamweaver MX中创建了数据库连接以后，在站点的根文件夹中会自动产生一个名字叫Connections的文件夹，在这个文件夹中有一个以你所定义的连接名称为名的ASP文件。比如留言板站点的连接文件：liuyanban_jch.asp。2、打开这个ASP文件，并切换到代码视图（“查看”“代码”）。3、在代码视图中我们可以看到以下代码：MM_liuyanban_jch_STRING = Driver=Microsoft Access Driver (*.mdb);DBQ=e:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb将绿颜色的路径代码更改成远程服务器上的物理地址（通过MapPath方法获取的）。如果你还没有支持ASP的租用空间，那上面这一段内容暂时对你没用。这一段内容理解起来有点难，但是很有用啊！一定要有耐心啊：）连接好的数据库中的数据是不是直接就可以应用到我们的页面中呢？因为还需要一定的篇幅，这个问题本课不能展开讨论了。先给大家一个答案吧：NO！具体内容下次分解上一课我们创建了数据库和留言板站点的连接，这样就有了进一步创建动态页面的基础。但现在数据库中的数据还不能直接应用到页面中，因为要将数据库用作动态网页的内容源时，必须首先创建一个要在其中存储检索数据的记录集。本次课就主要讲解记录集的创建方法以及如何将记录集中数据绑定到动态页面中，最后再通过服务器行为的定义让大家初次体验一下留言板主页面的动态效果。一、在绑定面板中定义记录集1、在Dreamweaver MX中打开留言板站点主页面（main.asp）。2、打开绑定面板，单击 按钮，在弹出的下拉菜单中选择“记录集（查询）”命令，如图1所示。 图1 绑定面板定义记录集3、在弹出的记录集定义对话框中，定义记录集名称、选择数据库连接名、选择数据库中的表、选择表中的字段（域）、定义记录排序的方法等，如图2所示。图2 定义记录集4、按照前面的步骤操作完成以后，在绑定面板就会出现新定义的记录集，单击它前面的+号，可以展开记录集，如图3所示。图3 绑定面板创建完成的记录集二、将记录集中数据绑定到表格域1、对留言板主页面（main.asp）中的表格重新编辑，删除单元格中的一些文字，结果如图4所示。图4 主页面中显示留言信息的表格2、将记录集中的数据域（字段）绑定到表格相应的单元格中。打开绑定面板，展开记录集。用鼠标将记录集中的y_name字段拖放到页面表格的左上角中，用同样的方法将其它数据域（字段）拖动到相应的单元格中，如图5所示。图5 将记录集中的数据绑定到单元格3、通过上面的步骤，我们已经将记录集中的字段（也就是数据库中数据）绑定到页面中的单元格中。这样，这些单元格中的内容实际上就是动态文本内容了。先做个实验：现在我们就在ACCESS2000中对留言板数据库中的用户信息表（yonghu）编辑记录。单击这里查看如何在ACCESS2000中编辑记录在浏览器中打开main.asp页面观察页面效果。（http:/localhost/liuyanban/main.asp或者/liuyanban/main.asp）虽然我们在留言板数