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

Dreamweaver
用代码“写”出扫描线效果图片
DHTML实例解析:用HTC统一定制表单样式
网页瘦身小技巧---“分割大法”
简单实用的网页表格特效
巧用样式表,让文本框与按钮变个样
网页工作原理
网页图片特效小技巧
如何防止及消除垃圾代码的产生
提高页面显示速度的秘技
用DW MX制作导航下拉菜单
Dreamweaver MX应用表格排序
Dreamweaver查找替换的技巧
用DreamWeaver定制网站的颜色
Dreamweaver MX进阶教程(七)创建基于框架的网页
Dreamweaver MX进阶教程(九)使用用于框架的“行为”
Dreamweaver MX进阶教程(八) 操作框架
Dreamweaver MX进阶教程(十)制作居中的网页
Dreamweaver MX进阶教程(十六)制作可拖动表格
Dreamweaver MX进阶教程(二十一)制作虚线
Dreamweaver MX进阶教程(十三)在Dreamweaver 中使用上标和下标

DreamweaverMX打造留言本(三)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-23   浏览: 48 ::
收藏到网摘: 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

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