首页

课程 首页 | 入门 | 硬件 | 软件 | 设计 | 开发 | 网络 | 小组 | 社区 | 加油站

当前位置：首页=>课程=>Dreamweaver MX留言板实例教程=>第13课 初体验留言板主页面的动态效果

第1课 DW MX工作环境简介及站点的建立 第2课 创建留言板动态站点及第一个页面 第3课 用表格布局留言板站点主页面 第4课 用CSS样式表设计留言板站点 第5课 创建留言板站点主页面导航元素 第6课 创建留言板站点主页面的其他元素和效果 第7课 用Fireworks MX画留言板站点页面 第8课 数据库基础和用Access2000创建留言板站点数据库 第9课 在Dreamweaver MX中创建数据库连接 第10课 初体验留言板主页面的动态效果 第11课 初体验留言板主页面的动态效果 第12课 初体验留言板主页面的动态效果 第13课 初体验留言板主页面的动态效果 第14课 初体验留言板主页面的动态效果 第15课 初体验留言板主页面的动态效果

第13课 初体验留言板主页面的动态效果 www.study51.com　　　　 【字体：大 中 小】【打印】【关闭】 　　上节课我们讲了页面的翻页和显示留言数，解决了留言内容显示问题。这一课我们来继续加工和充实main.asp和write.asp页面功能。 　　 　　一、实现留言用户的头像选择与显示 　　 　　1、打开签写留言页面write.asp文件，选其中一张用户头像图片，在属性面板里复制源文件URL链接地址，见图1。 　　 　　 　　图1　选中头像与图像属性 　　 　　再选中与头像对应的单选按钮在属性面板的选定值处粘贴刚才复制的图片URL地址，单选按钮名称为"tx"，初始状态－未选中，见图2。 　　 　　 　　图2　头像表单域选定值 　　 　　其它单选按钮设置同上（单选按钮－tx，选定值－对应的图片路径，初始状态－未选中）注意图片路径与单选按钮的选定值一一对应。 　　 　　2、打开显示留言页面main.asp实现头像地址记录的绑定，在绑定面板下选择记录集中touxiang字段，见图3。 　　 　　 　　图3　绑定头像动态数据按住鼠标拖动 　　 　　按住鼠标拖动touxiang字段到main.asp页面的头像视图上，再释放鼠标即可，拖动完成后属性面板上变成记录集中的touxiang动态字段了，这个字段是将来显示write.asp中选中头像按钮的值（头像路径）见图4。 　　 　　 　　图4　绑定动态数据拖动到头像上 　　 　　二、OICQ、E-mail、个人主页和IP显示的实现 　　 　　1、打开main.asp页面，为了避免E－mail、主页地址过长，把表格撑大，影响效果，我们用四张图片来取代他们（点击此处下载图片） 　　 　　修改页面如图4右上角，修改表格，在单元格加上对应的图片。 　　 　　2、设置OICQ图像的超级链接：选中OICQ图片在属性面板中为它添加链链，点击链接后的浏览文件，见图5。 　　 　　 　　图5　为OICQ添加链接 　　 　　点击浏览文件后打开选择文件对话框，第一步选择文件名称为数据源，第二步选择y_oicq动态字段，在URL参数中会显示OICQ的动态字段，第三步复制下面红色的链接，粘贴到URL参数的前面（下面绿色字段的前面），OICQ的完整链接应该是下面URL的红色部份加绿色部分， 　　 　　http://search.tencent.com/cgi-bin/friend/user_show_info?ln=< %=(Recordset1.Fields.Item("y_oicq").Value)% >，见图6。 　　 　　 　　图6　选择URL为数据源 　　 　　这个时候属性面板中的链接就会显示我们刚才添加的URL参数了，这里我们还要把目标改为_blank就是链接在新窗口中打开，见图7。 　　 　　 　　图7　目标改为_blank 　　 　　3、设置OICQ图像的号码提示信息：选中OICQ图像，切换到代码视图。将光标定位在 　　 　　 　　图8　在title标签中添加记录集动态文本 　　 　　做这步的目的是为了实现鼠标移到OICQ图像上时将显示OICQ号码提示信息，否则不显示，如图 　　 　　4、E－MAIL、主页和IP的图像的超级链接请参考OICQ图像的超级链接，方法相同；提示信息同样也在URL参数前加上下面的红色部分链接。 　　 　　E-mail链接：　mailto:<%这里的内容是绑定记录集中的EMAIL字段%> 　　主 页 链接：　http://<%这里的内容是绑定记录集中的HTTP字段%> 　　I P 链接： #<%这里的内容是绑定记录集中的IP字段%> 　　 　　到此显示留言主页面main.asp和签写留言页面write.asp就全部完成了，不是很难吧，现在就可以测试你亲手做的留言板了：） 【字体：大 中 小】【打印】【关闭】

关于我们 | 广告服务 | 诚邀加盟 | 友情链接 | 网站地图 | 联系方式

Copyright ©1998-2005, All Rights Reserved.

版权所有 学习无忧网 51study.net

广告或空间合作，请QQ：70046085联系我