我爱电脑技术论坛 » 网站建设 » 用Dreamweaver打造动态网站

小迷糊 发表于 2008-6-11 01:50

用Dreamweaver打造动态网站

作为MX战略的重要组成部分，Macromedia公司用Dreamweaver MX为用户提供网站设计和相关应用“一站式”服务的端倪已初现，在整合和扩展了Dreamweaver UltraDev、HomeSite等诸多软件功能后，与其说Dreamweaver MX是一款网站设计制作软件，不如说它已经成为一个网站设计制作和开发平台。
A;B&Sv`:S"Ox|0\
Fu3bSE w 网页设计师、代码编写者、开发者，这是Dreamweaver MX假定的三类用户，但在实际应用中，我们有时很难明确区分这三种角色，搞美工的有时得动两下代码、做页面的说不定就哪天就做起了应用程序——这些工作在Dreamweaver MX中切换得如此不露痕迹，就在这些不经意的“角色”转换间，有一天你会发现自己原来又多了一项新的技能了——如此简单，恰如水到渠成。譬如专做页面的你，现在也能轻松玩转动态网站了，还不用写一行代码、编一句脚本。有点奇妙吧，其实真的不太难，一起来做个通讯录试试吧！;f'r Yqk:Ht
x;S?o+J5x1V w
准备工作zoRd9?(`)r
Kdhi(k7g
Dreamweaver MX能够支持asp、jsp、php等主流服务器端动态脚本文件，这里我们以较常用的asp为例来简要说明，数据库则选择Access 2000。整个运行环境为：Windows 2000 +IIS ＋Access 2000 +Dreamweaver MX。w ] EHx Nn

"t |)do8r
U0Z 1、通讯录结构分析
6XHM(JqF$`4Y0ua
?3q X}/^n
^vA 网站保存文件夹 c:\inetpub\wwwroot\addbk\-u@,q^
lL@KG
　　网站远程地址：http:　//localhost/addbk
1|]9I-R0y BQvP 　　数据库文件 c:\inetpub\wwwroot\addbk\addbk.mdbrx B
D Q{e

x)[*Kg z 用Access 2000建立数据库addbk.mdb，通讯录内容保存在其中的addbk_b表中，该表结构如图1所示。

V[(~1l ouB V 2^ ~ b7B'f1v
[attach]30268[/attach] |k~9fS6GS drbR
sB5F"YB$w#V
图1
F4Xl1l7CU)z6QI G
(kV{E"C j;DK 这个动态的Web版通讯录主要作用是让用户通过浏览器查阅通讯录中的记录，有简单的查询功能，同时还能通过浏览器来添加新记录和对已有记录进行修改和删除。网站结构如下图（图2）。`zBbc@Q0^.W;A
9`8?`m'i!k]%IG
[attach]30269[/attach]"|"\ f7\&Ts

:HF{&D-}:Z"x+S 图2*J}&]hp K
%b/b er4[jU({-e
2、建立站点和连接数据库
R&kk:^2m*\Jo R
,IaOu7u}? (1)、建立站点
aQo!C?%r6FZG Bjx
?"`%`
运行Dreamweaver MX，执行Site/New Site命令，弹出定义站点向导，依次设定站点名称：“Addbk”；服务器脚本类型：“Asp VBScript”；本地编辑和测试地址：“c:\inetpub\wwwroot\Addbk”；站点根目录：“http://localhost/addbk/”，设定后可马上单击下面的“Test URL”按钮测试一下，几个主要步骤合成简图如下（图3）。
&t+V^.p&n7pe
Wa mbZ;{2|%CZ [attach]30270[/attach]
Z7HM?0p(Mr
u!vQL"Z 图3
F[+x U$EG~)}$\%[J
HMu2M OX
cI 在Files面板中选择File/New File命令，按上面网站结构图所示分别建立default.asp等6个空文件，内容先不管它。X%V"F6t1Y-`8wKG

*A;]:B @^ ?.J)yjE (2)、连接数据库_"X#n3M/A/F5]X
OA ~$qUy
双击打开default.asp，打开Application面板的Databases选项卡，单击左上角的＋号按钮选择DSN连接“Data Source Name”，在弹出DSN设置的对话框中选择“Define”按钮，依次选择“System DSN”选项卡、“Add”按钮、“Microsoft Access Driver(*.mdb)”，就出现“ODBC Microsoft Access 安装”对话框，如图4所示，在数据源名栏中输入“addbk”，单击数据库栏中的“选择”按钮，找到我们已经预先创建的数据库文件c:\inetpub\wwwroot\addbk\addbk.mdb。确认后回到DSN设置对话框，在连接名称栏输入“cnaddbk”，连接成功。这时点击右侧的Test面板可以测试连接是否成功，如图5所示。:w]4Af1k+kX$i#m;jeg

1hJ!]l!v]8u N&a [attach]30271[/attach]
e H){2z3_R#jm%hgB'MN 8o"f8P%b)^6I`&rR2o
图47W"b(g/CL0Nh)q5h
K(q+^{Xn*Ww
[attach]30272[/attach](L%wPML
'QeJR%s|%O
图5

小迷糊 发表于 2008-6-11 01:52

3、建立记录显示列表页
oXD2sx wlr.Dh-Z
记录显示列表页即default.asp。我们设定其中用一个表格显示最新的10条记录，其它记录则通过记录导航条来实现前后翻页——别忙着画表格，也不用担心你做不了导航条，“体贴人”的Dreamweaver MX中全部都已经设计好了各种模板，我们只管调用就行。
@ek;O;`*@
d Y)ff8n-HE
`A 先来建立要在本页显示的记录集。切换到Application面板的Bindings选项卡，同样单击“+”按钮，选择Recordset(Query)，进入记录集设置面板，在连接下拉菜单选择刚才建立的数据库连接“cnaddbk”，因为其中只有addbk_b一个表，其名称会自动出现在Table栏中，其它项使用缺省值，如图6所示。单击右侧的Test按钮同样可以测试记录集，这时你应该可以看到通讯录中的记录了。
#Pi&g~"e
hxt'wq [attach]30273[/attach]
\2\"Z*BP Q8Lw*fT ;?7?C7o Tie8h
图6
o^P!T/ia;AJ
K B%eX7x;o tbh 再来建立动态显示列表。在Insert菜单中选择Application Objects/Master Detail Page Set，它用来产生一个动态列表同时产生一个显示详细内容页面，其设置对话窗口如图7所示。在主页面中我们没有必要显示全部的项目，选择后面的几项单击减号按钮删除它们，详细页面名称栏选择Detail.asp文件。确认后同时在详细页面detail.asp和default.asp生成相应的动态表单，如图8所示。下面的导航条相当专业了，不过是英文的，我们可以把它改成中文，修改时注意不要把超链接搞丢了，比较好的方法是打开代码、设计页面同时显示模式，在页面中点一下要修改的项目，代码窗口会自动切换到对应的代码行，直接在其中修改就会很安全了，如图9所示。
%N5s)^ t|hu/zzN4O jBOg
U]
[attach]30274[/attach]
1O9o|/A;n6v*o0{O /mpl#[!i'yE
图7 t"]H;M B8w

bpT/U?J\ [attach]30275[/attach]o7c-c!\/U2dk

(mbl8}K9Z 图8
5omf9F C|2w!P
W)~&~pS$o8? [attach]30276[/attach]
*KsW8wor"~E 1jIN[
wGug6\
图9

pi lYn9xh c
TcR7C5`&J 好了，本页面完成了。按F12预览一下，如图10。点编号就显示相应的详细内容。k+qX
D8e2P,PBq;G
mP6u j?
[attach]30277[/attach]vBPV%^_8j
O}FWxh w
图10

小迷糊 发表于 2008-6-11 01:53

4、建立查询
.SJwmyk^v(v\-H
yNB$WH 查询部分也就是一个提交表单，我们不需要单独再建一个文件夹，直接就放在主页面的下端。显示查询结果的页面按前面的设定为search.asp。
*lG{ wpNg"@U 3]'k J K(XlV7vFt{
(1)、查询页_[5Y5ull@

A9LY"DH1`5o 在default.asp页面底部插入一个表单，输入提示词“请输入姓名”，其后再插入一个文本框和一个提交按钮（即按钮的Action选择Submit Form），选择文本框，在属性面板中“TextField”栏中输入“姓名”。在状态栏中选定表单对象“
(a
Sb"F)_ ”，在属性面板中，打开Action右边的文件夹图标，选中我们在上面所建立的search.asp；提交方法Method选择“get”，如图11所示。$R;\-\c^8U'P X0f
5BW'k {2|$YA+JR
[attach]30278[/attach]:U5T.g;Epl$h
$h`F2[bE
图11$}QK[g#wtE*v
bW'@"T$A/u
(2)、查询结果页
\ On*D(V&A j8PC6O@1F$f
查询结果页记录集的建立与显示全部记录的有点不同，因为我们要将不符合条件的记录过滤掉。同样的方法建立记录集（Application面板/Bindings选项卡/“+”按钮/Recordset(Query))，进入记录集设置面板，选择刚数据库连接“cnaddbk”。设置过滤主要通过下部的几栏实现。我们在Filter栏下拉菜单中选择“姓名”，后面一栏选择“contains”，它表示所得到的记录集为addbk_b表格所有记录中的姓名与用户在查询页面输入的姓名相匹配的全部记录。第二个下拉框有“＝”、“>”、“Begins with”等九种不同的选择，我们用的是“contains（包含）”，这样，我们就可以只输入姓名中的几个字就可以进行查找到所有姓名字段中含有这个字的记录，提高了查询的灵活性。因为查询表单对象所使用的Method是get，第三个下拉框中就要相应地选择“URL Parameter”，如图12所示。Ad;L0w(ao

d3N(A o1}'Gh y [attach]30279[/attach]o'eK9WIfFW

&q6LIqY{ 图12MDj2t!lc(h#k
l_e!uV@._#U%s
这样当我们在default.asp页面中键入一个需要查找的字（比如“三”），并点击“查询”按钮的时候，页面将把查询参数（也就是“三”字）以URL字符串的形式传递给服务器，服务器就会把查询参数以URL字符串的形式存储在内存中，查询结果页取得它后形成的记录集就是全部姓名中包含“三”字的记录。同样我们可以通过“Test”按钮测试一下查询结果。1qOp3pb0m3KNc.S? r

g0^D"K@ 再来建立查询结果显示列表。选择Insert/Application Objects/Master Detail Page Set，与上面建立全部记录显示页同样操作即可。因为记录集的列表显示方法是一样的，不同的是记录集的内容。,kx-A:g-c(Mw8E
-R.D;oVn;Gv
5、建立添加记录页e&v#b)w/hG

vUM1]{ {P,w.r/Z!v 在Dreamweaver MX中建立添加记录表单的命令是Insert/Application Objects/Record Insertion Form，看名字也知道它的用途。执行命令后弹出如图13所示的设置窗口。数据库连接、提交到的表格设定与前面基本一致。要注意的两点是：（1）、成功后转到的提示页，我们可以先新建一个静态页面，写上通用提示语：“恭喜，操作已经成功完成”，保存为ok.htm；（2）、数据库中“编号”属于自动编号型，不需要用户输入，应该删除掉。
2t3GxN)[/G(Z`lV
!@0d4`fD N [attach]30280[/attach]
.d+rZ)`,o i?3hj*Z`E
图13G w$e ZoO

q2q jVkK] 结果如图14所示，作相应修改即可。要注意的是，在Access 2000中设计表的时候，如果某一个字段的属性栏中没有选定“允许空字符串”，则该字段不能为空，否则记录就不能添加到数据库中。8Q7kj:Oi
(ii1@8cU_7o
[attach]30281[/attach]
5T i st&f hl0cd
dT4uK-tP5X 图14

小迷糊 发表于 2008-6-11 01:55

6、建立记录编辑、删除页3u5k Mf K
?&g(WP
H d!sH0c K;f:L {
要对某条记录进行修改，就必须先在数据库中找到这条记录，因此我们需要先建立一个能显示全部记录的页面进行查找，然后再给每条记录增加一个“修改记录”链接。其实这些与前面显示全部页面的内容基本一样，我们不用再新建页面，将default.asp另存为modify.asp，在显示列表的后面增加两列，分别输入“编辑”、“删除”。
c0q`MMMAO +aa`~ @A3\
选中“编辑”，在Application面板中选择Server behaviors选项卡,点“+”按钮选择Go to Detail Page命令，弹出如图15所示的对话窗口，因为每一个记录对应只有一个唯一的编号值，当edit.asp获得某个编号值的时候就能取出正确的记录来。{K{TACL3m-?$V
0Y-` T2`-Kwd:RM
[attach]30282[/attach]
7c7W$a~Pr%Y1qs {B"H.k#O$uo[2Eg2D
图15
IhPl$_'T4g
e2M-\ fB Q7Ns 再打开edit.asp文件，建立记录集选择全部项目，再执行Insert/Application Objects/Record Update Form命令，弹出对话窗口如图16所示，同样删除编号项，编辑成功后转到页还是选择ok.htm，确认后结果如图17所示。)H)s+XQ5b E[$PN
O'sus;}gmU6t2t
[attach]30283[/attach]2G7h4Z$a,u

&?@!K
i(|^ 图16
7z nd|\ ,K!h9dgQ3?
[attach]30284[/attach]
&pa'Ed?YyYI
PA3U%bvz 图17
7@-dg-ltSI.Y e/ny[a-L)H&M
7、建立删除页面
a(md1m2R:Re
M9?r NR7NZ)U m2z3y 原理与记录编辑页面不尽相同。当然前面根据编号确定要删除的记录是一样的，在modify.asp中选中“删除”，在Application面板中选择Server behaviors选项卡,点“+”按钮选择Go to Detail Page命令，Detail Page选择del.asp。
+X)v2`L\~ d Ww S D9Du
打开del.asp，同样建立记录集，注意下面的过滤设置中选择“编号”，如图18所示。确认后在del.asp页面中建立一个表单，中间写上警告语句“您确定要删除该记录吗？”，后面插入一个按钮，将Label改为“删除”，选择该按钮在Application面板中选择Server behaviors选项卡,点“+”按钮选择delete Record命令，在弹出对话框中选择连接、表、记录名称，Unique Key Column栏选择“编号”，成功后转到页还是选择ok.htm，如图19所示，确认。l&t#t,NL9~ V Iv
i&k'{D9]0w6HH

^$D@Lc [attach]30285[/attach]U:p&RRq/j"K#B#A L
图183R \+QBW4j[g
4\j.A8w&y l
[attach]30286[/attach];\&NbS ~L {
K
Fw7i8U!M
图19&C&@LbD]dK
"P ^N WB FjF
到这里，这个简单的动态网络通讯录就接近完成了。最后再对页面美化一下，每个页面加上一个导航条，统一一下风格。当然最好在编辑和删除页面上加上口令保护，由于篇幅的原由这里不多罗嗦了。

查看完整版本: 用Dreamweaver打造动态网站