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

在学这课之前先给大家解释一下表单和表单域的区别。表单是指代码标签，也就是DW设计视图下看到的红虚线框。 表单域是指表单将来要提交的内容，也就是文本字段、隐藏区域、文本区域、单选按钮、按钮等元件叫表单域，见图1。图1这些都是本课要用到的表单域一、添加表单、布局表格1、新建文档，保存为write.asp这个页面是签写留言的。首先要插入一个表单见图2。图2插入表单面板2、在表单内添加表格，表格布局设置见图3。图3布局表格二、添加表单域1、姓名：在姓名对应的表格里添加文本字段，在属性面板上取名为name见图4，这样做是为了与数据库的字段名字相对应。图4姓名对应的表单域命名2、OICQ、EMAIL、个人主页的表单域的添加方法同上，均为文本字段，分别命名为：OICQ|oicq，EMAIL|mail,个人主页|homepage。3、头像：在相对应的单元格里分别插入用户头像图片，然后添加对应的单选按钮命名为：tx。4、性别：在姓名对应的表格里添加两个单选按钮，选中性别男单选按钮：在属性面板为它改名为sex选定值为男，初始状态已勾选，设置见图5。 选中性别女单选按钮：在属性面板为它改名为sex选定值为女，初始状态未选中，方法同上。图5性别男：对应表单域单选按钮的设置5、提交与重置按钮：在最下面的单元格添加两个按钮，选中提交按钮：在属性面板为它改名为Submit，标签选提交，动作提交表单，设置见图6。 选中重置按钮：在属性面板为它改名为Submit2，标签选重置，动作重设表单，方法同上。图6提交按钮属性6、添加隐藏区域：在提交按钮旁单击添加隐藏区域，在属性面板里为它改名为IP，在值里添加代码这段代码是获取客户端IP的，见图7。图7隐藏区域设置7、留言内容：在留言内容对应的单元格里添加文本区域在属性面板里为它改名为liuyan，全部添加完的表单域，见图8。图8添加好的表单域三、定义提交按钮的服务器行为1、选中的整个表格，打开服务器行为面板，单击“+”按钮选择菜单下的插入记录，见图9。图9服务器行为插入记录2、设置表单域与数据库字段名一一对应，在表单元素里分别依次选中元素，在下面的列里选择与数据库相对应的域，见图10。 图10插入记录对话框四、定义表单提交的错误检查（行为面板）1、签写留言时为了避免有错误信息的写入，添加表单提交的错误检查功能。打开设计面板下的行为面板，单击+选择检查表单，见图11。图11设计行为检查表单2、设置表单域和检查事件：name选择必需的，ociq选择数字，mail选择必需的和电子邮件，homepage不选，liuyan选择必需的，见图12。图12检查表单对话框上一课我们讲了签写留言提交表单和检查表单，这一课我们再回过头来充实一下main.asp页面功能-实现留言记录导航。 一、控制一页显示留言数和翻页按钮先介绍应用程序下的按钮：记录集导航条：翻页功能按钮，记录集导航条状态：显示留言数量功能按钮，见图1。图1应用程序记录集导航条/记录集导航状态1、光标移到页面下方，单击记录集导航状态就会弹出记录集导航状态对话框，见图2。图2记录集导航状态对话框2、再回车另起一行，单击记录集导航条就会弹出记录导航对话框，记录导航条将以文字方式显示，见图3。图3记录集导航条对话框这样我们就完成了显示留言数量和翻页按钮，见图4。图4已加好翻面和显示留言数功能二、留言内容显示问题1、现在main.asp文件基本完成。当然，你会想到：如果我们输入一些html代码，会怎么样呢？ 我们来输入一行html代码试一下，输入：测试，结果见图5，这个当然是不安全的。也就是为什么决大部分论坛不支持html的原因。图5测试结果 再测试看看，用户的留言如果很长，表格会自动撑大（文字不会自动换行）！见图6。图6撑大的表格2.、为了解决以上问题，我们将原来绑定到留言单元格中的记录集字段（）删除，添加“文本区域”，添加好后的文本区域见图7。图7添加好的文本区域3、然后选中刚才添加的文本区域，在属性面板里点击打开动态数据对话框，添加动态留言文本字段y_liuyan，见图8。图8为文本区域添加动态数据现在可以在留言试试看，表格自动换行，而且不支持html代码了，留言内容的显示问题也可以借助Dreamweaver MX的插件来实现的。上节课我们讲了页面的翻页和显示留言数，解决了留言内容显示问题。这一课我们来继续加工和充实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页面，为了避免Email、主页地址过长，把表格撑大，影响效果，我们用四张图片来取代他们（点击此处下载图片）修改页面如图4右上角，修改表格，在单元格加上对应的图片。2、设置OICQ图像的超级链接：选中OICQ图片在属性面板中为它添加链链，点击链接后的浏览文件，见图5。图5为OICQ添加链接点击浏览文件后打开选择文件对话框，第一步选择文件名称为数据源，第二步选择y_oicq动态字段，在URL参数中会显示OICQ的动态字段，第三步复制下面红色的链接，粘贴到URL参数的前面（下面绿色字段的前面），OICQ的完整链接应该是下面URL的红色部份加绿色部分，/cgi-bin/friend/user_show_info?ln=，见图6。图6选择URL为数据源这个时候属性面板中的链接就会显示我们刚才添加的URL参数了，这里我们还要把目标改为_blank就是链接在新窗口中打开，见图7。图7目标改为_blank 3、设置OICQ图像的号码提示信息：选中OICQ图像，切换到代码视图。将光标定位在 图8在title标签中添加记录集动态文本做这步的目的是为了实现鼠标移到OICQ图像上时将显示OICQ号码提示信息，否则不显示，如图4、EMAIL、主页和IP的图像的超级链接请参考OICQ图像的超级链接，方法相同；提示信息同样也在URL参数前加上下面的红色部分链接。E-mail链接：mailto:主 页 链接：http:/I P 链接： #到此显示留言主页面main.asp和签写留言页面write.asp就全部完成了，不是很难吧，现在就可以测试你亲手做的留言板了：）上节我们完善了显示留言页面main.asp和签写留言页面write.asp，从这节课开始做管理部分的页面。一、管理员登陆页面的实现login.asp1、新建login.asp管理员登陆页面，首先要插入一个表单，在表单内插入表格，表格布局见图1。图1管理员登陆界面2、添加服务器行为：打开应用程序下的服务器行为面板，单击“+”按钮选择用户身份验证下的登录用户，见图2。图2服务器行为-登录用户3、用户登录设置：首先在使用链接验证里选择数据源（我们这里数据源名称是 hlbook），然后在如果登陆成功，转到后面的输入框里输入main_guset.asp（这是下面将要做的管理页面），最后在如果登录失败，转到后面的输入框里输入login.asp（就是登录不成功就转到管理员登录页面）见图3。图3登录用户对话框设置 4 、保存login.asp，然后打开站点data文件夹下的liuyan_guest.mdb的数据库，双击_guest数据库表，在g_name字段下写个用户名（用户名随意），在g_password字段下写个用户密码（用户密码自定义）见图4。图4在数据库里添加用户名与密码二、创建main_guest.asp管理页面1、打开main.asp另存为main_guest.asp，首先把进入管理改为退出管理，表格下再添加一些文字回复、删除、编辑，见图5。图5main_guest.asp管理页面2、添加服务器行为：打开应用程序下的服务器行为面板，单击“+”按钮选择用户身份验证下的限制对页的访问，见图6。图6服务器行为-用户身份验证-限制对页的访问限制对页的访问对话框设置见图7。管理员在登陆时输入正确的用户名和密码才能登陆到管理页面，否则跳到login.asp管理员登陆页面。图7限制对页的访问对话框3、选中刚才添加的退出管理几个文字，添加器行为，打开应用程序下的服务器行为面板，单击“+”按钮选择用户身份验证下的注销用户。这是为退出管理而添加的一个功能，见图8。图8注销用户注销用户对框设置见图9。管理员退出以后就直接跳转到显示留言页面。图9注销用户对话框上节课我们制作了管理员登陆页面login.asp和管理主页面main_guest.asp,这节课我们继续来做编辑，回复，删除3个管理页面。一、编辑用户留言（更新记录）页面的创建：1、新建文件edit.asp编辑页面，首先在插入面板添加一个表单，在表单内添加表格与表单域，布局见图1。图1单元格与表单域2、在绑定面板里单击“+”按钮选择记录集，打开记录集对话框，记录集对话框设置见图2。图2记录集设置3、选中姓名对应的文本字段，在属性面板里改名为name，然后点击按钮，打开动态数据对话框，为姓名文本字段添加动态数据，选取记录集中的y_name字段，动态数据对话框设置见图3。图3添加动态数据4、OICQ、EMAIL、个人主页、留言内容动态数据绑定的方法与姓名绑定的方法相同，按照上面的方法一一对应绑定即可。5、选中单选按钮女，在属性面板里为它改名为sex选定值为女；再选中单选按钮男，在属性面板为它改名为sex选定值为男，然后再点击动态按钮，打开动态单选按钮对话框，在动态单选按钮对话框中单击，打开动态数据对话框，选取记录集中的y_xingbie字段，见图4。图4设置单选按钮因为男女单选按钮的名称均为sex，所以只绑定一次就可以了，全部绑定到相应的表单域如图5。图5动态数据绑定完成6、添加限制访问页行为：打开服务器行为面板，单击“+”按钮选择用户身份验证下的限制对页面的访问，打开限制对页的访问对话框，限制对页的访问对话框设置，见图6。图6限制对页的访问对话框7、页面的数据更新，打开服务器行为面板，单击“+”按钮选择更新记录，打开更新记录对话框，更新设置见图7。图7更新记录对话框设置编辑留言实际上就是更新数据库中的内容，编辑留言页面我们就做完了。二、管理员回复功能页面的创建：1、创建huifu.asp回复页面，首先插入表单，在表单内添加表格与表单域，布局见图8。图8管理员回复页2、绑定记录集：在绑定面板单击“+”按钮，选择添加记录集，绑定记录集方法同编辑页面第2节。3、添加动态数据：姓名、EMAIL、留言内容、回复内容添加动态数据的方法同编辑页面第3节。4、添加限制访问页行为：限制访问页行为添加方法同编辑页面的第6节。5、页面的数据更新：更新记录方法同编辑页面的第7节。 三、删除用户留言（删除记录）页面的创建：1、创建delete.asp删除页面，首先插入表单，在表单内添加单元格与表单域，布局见图9。图9删除留言表单与布局表格2、绑定记录集：在绑定面板单击“+”按钮，选择添加记录集，绑定记录集方法同编辑页面第2节。3、添加动态数据：姓名、留言内容添加动态数据的方法同编辑页面第3节。 4、添加限制访问页行为：限制访问页行为添加方法同编辑页面的第6节。5、页面的服务器行为：打开服务器行为面板，单击“+”选择删除记录，打开删除记录对话框，删除记录对话框设置见图10。图10删除记录对话框四、管理页面添加服务器行为：实现跳转到详细信息页（main_guest.asp）1、打开main_guest.asp管理主页面，选中“编辑”这两个文字，打开服务器行为面板，单击“+”选择转到详细信息页，打开转到详细信息页对话框，详细信息页选择edit.asp，转到详细信息页对话框设置见图11。图11编辑转到详细信息页对话框传递URL参数为y_id，它是mdb数据库里我们定义的ID字段类型是自动编号，自动编号在数据库里是不会重复的，将来我们要编辑留言板中的某条留言的时候，这条留言信息的ID号就传递给了edit.asp页面，edit.asp页面就会显示这条留言的信息