当前位置: 首页 > 图文教程 > 网页制作 > Dreamweaver > DreamweaverMX打造留言本(三)

Dreamweaver
用Dreamweaver设计限时自动关闭网页
DreamweaverMX制作导航下拉菜单
用Dreamweaver MX创造网页鼠标样式
巧用Dreamweaver MX制作阴影字
十六则Dreamweaver使用快技法
用Dreamweaver MX制作文字特效
妙用dw图层与表格进行网页布局
巧用Dreamweaver制作复杂图像
巧用Dreamweaver MX控制页面元素
用Dreamweaver实现飘浮光球特效
巧用Dreamweaver4文件库更新网站
用Dreamweaver4添加背景音乐及制作动态字
用Dreamweaver 4.0编制会议通知
妙用DreamweaverMX共享WPS Office文件
妙用Dreamweaver MX共享Word XP文件
巧用Dreamweaver MX共享Execl XP文件
用Dreamweaver MX制作导航下拉菜单
DreamweaverMX Ultradev探索:技巧荟萃
在网页中显示可拖动月历
Dreamweaver制作技巧四则

DreamweaverMX打造留言本(三)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 51 ::
收藏到网摘: n/a

  OK,接下来就是邮箱和主页地址了,和前面的做法稍有点不同,如图(7-18)和(7-19)所示。



7-18


7-19


同样,要注意有个顺序,先选中邮箱这个图片,再从下面的属性面板中点击Link按钮。出现如图(7-20)所示的对话框,这里的意思就是如果点击这张图片的话连接到哪里去。


7-20

以前呢,我们这个功能是连接到本地的某个页面去,但在DW MX里我们能通过选择Data Sources连接到动态的页面去。这里我们从记录集中email的字段,并记得在前面加上“mailto:”这里为什么加这个呢?是因为这个“mailto”是个html标签,即连接以OUTLOOK打开来发信。

同时,记得要给这个email图片加上alt属性,即alt="<%=(guestbook.fields.item("f_name").value)%>的邮箱是<%=(guestbook.fields.item("f_email").value)%>,点击这里给他/她发信"。

主页地址的连接方法如图(7-21)所示。


7-21

绑定好连接后记得对图片加上alt属性,改成alt="<%=(guestbook.fields.item("f_name").value)%>的邮箱是<%=(guestbook.fields.item("f_homepage").value)%>,点击这里给他/她发信"


是的,这里的确有点烦燥,不过加油吧,胜利在向我们招手呢。:)
看看现在的效果吧,如图(7-22)所示。


7-22

接下来要做的呢,就是给回复该主题和编辑、删除加上连接,并动态化。这里运用的服务器行为是跳转到细节页(Go To Detail Page)。在前面我们建立了回复页(rep.asp),编辑页(edit.asp)和删除页(del.asp),在这里我们也不一一详述如何进行连接了,效果如图(7-23,7-24,7-25)所示。



7-23

7-24

7-25

做好上面这三步后还要记得做一件事哦,如果我们留言内容有很多条怎么办??这里要用DW MX服务器行为中的Repeat Region(重复区域),选中显示留言的整个大表格,Application-->Server Behaviors-->Repeat Region,如图(7-26)所示。



7-26
我们定义它为每页显示14条记录,这样看起来简练一点,单击OK按钮。

做到这一步的时候不得不考虑一个问题了,浏览的用户怎么知道我有多少条留言记录呢??其实当我们在建立记录集的时候,DW MX早就为我们考虑好这些了,如图(7-27)所示。



7-27

First record index:索引中的第一条记录。
Last record index:索引中的最后一条记录。
total records:所有记录总和。

有了这些,我们要做的只是把他们拖到页上去,加上相应的说明文字就行了,如图(7-28)所示。


7-28

坚持,就要成功了!我们还需要一个导行条,因为前面我们用到了Repeat Region(重复区域),如图(7-29)所示。



7-29
Insert-->Application Objects-->Recordset Navigation Bar(插入-->应用程序对像-->记录集导行条),点击后出现如图(7-30)所示对话框。



7-30

Recordset:这里选择要导行的记录集。
Display Using:这里选择导行条的显示方式,text为文字,images为图片,这里我们选择images。

单击OK按钮,显示效果如图(7-31)所示。



7-31

可能它太大了,我们可以把这个表格缩一下,选中这个表格后