门户 | 导航 | 电影 | 视频 | 软件 | 图片 | 小游戏 | 音乐 | 小说 | 小工具
 14 12
发新话题
打印

Dreamweaver MX 2004设计留言本实战[全教程]

Dreamweaver MX 2004设计留言本实战[全教程]

  9月份设计界最热的消息莫过于Macromedia公司的Studio MX 2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验Studio MX 2004中的Dreamweaver MX 2004(以下简称DW2004)吧。

  一、IIS(Internet 信息服务)安装配置

  这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在"添加或删除程序>>添加/删除Windows组件"对话框中把"Internet 信息服务(IIS)"前的勾选中,点"下一步"进行安装就行了(注:在这之前应把系统安装盘放到光驱)。



  IIS装好之后再作一下简单的配置。定位到"开始>>管理工具>>Internet 信息服务(IIS)管理器",打开IIS管理器。在"本地计算机>>网站>>默认网站"上右键单击,在快捷菜单里选"属性"(或者直接在操作菜单下选"属性"),弹出如下对话框:



  切换到"主目录"标签(图2),重新选择网站根目录(笔者选择的是E盘下的Work目录),默认是"系统盘:\Inetpub\wwwroot",因为系统盘不宜放太多的非系统文件,所以在这里重设默认网站要目录,如果嫌麻烦可以跳过这步。再切换到"文档"标签,通过"添加"、"删除"、"上移"、"下移",把站点的默认文档设置如图所示:



  可能有些朋友会疑惑,设置默认内容文档有什么作用?细心的朋友应该会发现,在浏览一些大网站的首页时用它的一级域名就行了,并不需要指定请求页的文件名,这就是设置了默认内容文档的缘故,它的作用就是在浏览器请求没有指定文档的名称时,将默认文档提供给浏览器。要得到更详尽的解释说明,可以点击图3中的"帮助"。之所以有这步,是因为网站的默认内容页中没有index.asp,不大符合国人习惯。

  二、数据库设计

  先构想一下,一个功能齐全的留言本应该有哪些内容需要保存?访客名字(Name)、访客主页(Homepage)、访客QQ(QQ)、访客信箱(Email)、访客形象(ICON)、访客IP(IP)、留言内容(Content)、留言时间(Date)----这是访客的有关信息,如果主人要回复留言呢?好,再加上回复(Reply)和回复时间(RDate),嗯......再想想有没有漏掉什么?对了,还有主人的管理帐号:用户名(Username)、密码(Password)。

  要保存这么多信息,数据库应该怎么设计?访客的留言是不断增加的,而主人的管理帐号固定不变,所以应该分开两个表,一个保存所有访客的留言和访客的资料信息,另一个则保存主人的管理帐号。OK,现在可以开始设计数据库了。打开ACCESS(在微软的Office软件中有)软件,新建一空白数据库,ACCESS会提示先保存数据库,定位到你的留言本所在文件夹(笔者是在站点根目录下建了一个guestbook文件夹),保存为data.mdb:



  然后双击"使用设计器创建表",完成后如图:



  为了优化数据库,有些字段需要作点设置:

  ID:设为主键,确定数据唯一性以保证在管理时能准确定位到相应记录

  Name:字段大小设为15(很少有人的名字有这么长的吧?)

  Email:字段大小为20(也很少有Email地址的长度超过这个数字)

  ICON:字段大小为6(看完后面的教程就明白为什么设这么小了)

  IP:字段大小为15(可以算出来,四个三位长的数字再加三个小数点)

  Homepage:字段大小为30(很多朋友还在用二级甚至三级的域名,所以放宽一点)

  Date:默认值为Now ()(用Now()取得插入新记录时系统的时间)

  关闭表窗口,会提示是否保存对表的修改,选"是",然后把表名改为main,同理创建表admin,以保存管理帐号:



  最后还需要一个记录IP对应地址的表,这个IP库可以在网上搜索一下,或者到http://x-lover.com/temp/ip.mdb下载,然后打开数据库data.mdb

  ,在"文件"菜单下选择"获取外部数据>>导入",再在弹出的对话框里选择刚才下载的数据库,导入,选择address表,确定,现在数据库data.mdb中应该有这样的三个表:



  至此,准备工作全部完成。

  程序运行配置完了,废话不多说,直接开始我们的DW MX 2004的体验之旅吧。

  三、DW的站点定义

  上一节我们在IIS里把站点根目录定义在E:\Work,现在进到这个目录下新建一文件夹并命名为geustbook。

  打开DW,在"Site"菜单下找到"Manage Sites..."项单击,见下图:



  打开"Manage Site"对话框,点"New ...",在出来的下拉菜单里选"Site"定义新站点:



  跟着新站点定义向导一步一步来定义我们的留言板站点。在站点名称上填上geustbook:



  点"Next>"继续下一步的后台技术选择,这里我们选择用VBScript作脚本的ASP:



  点"Next>"继续下一步的站点文件夹设置,因为我们现在是在本地测试,而且gustbook文件夹在E:\Work\guestbook,所以设置如下:



  点"Next>"继续下一步的设置DW的测试URL:



  点"Next>"继续下一步,因为我们在本机测试,不需要远程服务器参与,所以选择"No":



  点"Next>"继续下一步,这里显示的是我们刚才所填的信息,目的是要我们确认一下,如果发现有错,可以点"back"



  细心一点的朋友也许会发现,在站点定义对话框上有两个标签:"Base"和"Advanced",其实用途是一样的,只不过"Base"是一步一步的向导模式,而"Advanced"是给对DW有一定了解的朋友用的高级模式,有兴趣的朋友可以自行切换到"Advanced"模式看看。

[ Last edited by 情不自禁 on 2004-12-8 at 13:46 ]
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

留言本首页的制作

整个留言本由八个文件组成:


index.aspx                                         留言本的首页
post.aspx                                            发表新留言页
face.aspx                                         选择头像页
admin_loing.aspx                   管理员登陆页
admin_post.aspx                        管理员回复页
admin_update.aspx             管理员留言编辑
admin_Cancellation.aspx          管理员注销页
userweb.ascx                                  用户控件,用来显示版权信息


      留言删除是在首页完成的,管理员登陆后,显示出删除留言内容的复选框和允许执行删除操作。

部署DreamweaverCtrls.dll控件

      这个步骤十分重要,几乎90%的初学者没有留意到这点,导致用DW MX做的页面完全不能正常工作。如果没有部署DreamweaverCtrls.dll控件到站点根目录下的bim目录中,即使你在页面中插入数据集和数据网络,并且在数据集对话框中测试时能读出数据,但是页面始终报错,报错信息如下:



提示找不到DreamweaverCtrls.dll程序集名称。好,现在,我们来动手部署这个文件。

          新建index.aspx页,保存并打开文件,切换到“绑定面板”,如下图所示:



看见上图中的那个被蓝色线圈住的提示文字了吗?好,你终于看到了,点击“部署”二字,弹出下图对话框:



部署到AspNet\bin目录中。点击“部署”按扭,弹出以下对话框,按“确定”关闭它。



然后打开AspNet\bin目录,是否看到DreamweaverCtrls.dll文件。有的话,恭喜你,成功了。

紧记:DreamweaverCtrls.dll文件名称及其所在目录bin名称不能更改,并且bin文件夹必须保存在站点的根目录下,这是硬性要求,你就莫问为什么了。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

index.aspx首页的制作

部署DreamweaverCtrls.dll控件后,你就可以任意的使用DW MX的ASP.NET服务器行为了。下面就先做个留言本首页。

          操作步骤:

         1、打开index.aspx页,先在页面中插入一个表单,切换到代码视图,找到<form>标榜,添加runat="server"属性,如<form name="form1"   id="form1" method="post" runat="server" >。

         然后根据下面页面样式在表单内插入四个表格,当然你可以完全定制自己的样式。



             2、插入数据集

             打开“服务器行为”行为面板,选择“数据集”。如下图。



             弹出“数据集”对话框,设置如下图:



            排序按ID号从大到小排列,这样可以把最新的留言排在最前面。切换到“绑定”面板,展开数据集字段,如下图所示



          把各个字段绑定到页面上。如下图所示:



          图片代码如下:

发新留言:<img src="gif/FIL3319.GIF" border="0">
Qicq:<img src="gif/FIL3241.GIF" alt="<%# DataSet1.FieldValue("Qicq", Container) %>" >
邮 箱:<img src="gif/FIL24111.GIF" border="0">
主 页:<img src="gif/FIL24113.GIF" border="0">
编 辑:<img src="gif/FIL3242.GIF" border="0">
回 复:<img src="gif/FIL24003.GIF" border="0">
用户头像:<img src="<%# DataSet1.FieldValue("Face", Container) %>" >
表情图标:<img src="<%# DataSet1.FieldValue("Miange", Container) %>" >

                复选框名称为“delete”,选定值为:<%# DataSet1.FieldValue("id", Container) %>

                其中“编辑”和“回复”这两个图片链接,管理员登陆后才能链接到相关页,否则转到出错信息页。删除留言复选框只有在管理员登陆后才会显示出来,这里为编辑方便,所以让它显示出来。稍后还要编写一段函数代码,用来控制它的显示是否。还有的就是管理员回复内容,上面页面样式没有给出,是因为这段代码要根据该留言的回复状态决定是否显示,是动态的HTML,必须用一段函数判断实现。

             打开MyMessage.mdb数据表,在MessageBook表中随便输入一些记录,除title(留言标题)、MessageBook(留言内容)、MessageName(留言人姓名)字段外,其它的都可以留空。按F12键预览,能显示记录了。如下图:



            3、插入重复区域

                      上面显示的是一条留言,插入重复区域以显示更多的留言。选中下三个表格,第一个发新留言的那个表格就不用选中它了,如下



切换到“服务器行为”面板,点击加号弹出下拉菜单中选择“重复区域”,   如下图:



          弹出重复区域对话框,设置每页显示10条记录。当然,你可以任意设数目,可不要太多了,否则会导致浏览速度变慢。



             单击“确定”保存设置。DW MX就会自动在刚才选中的表格周围插入了Repeater控件。Repeater是三个数据显示控件中最为灵活的一个,可以任意定义自己的模板,使页面显得更美观。如果你看了源代码,会觉得Repeater控件好像和普通的ASP循环语句相似。其实Repeater控件不是普通的循环语句那么简单,它是由DataSet数据集读出数据库中的记录,并一次填充Repeater,不是由循环指令一行一行地读出数据。

          好了,按F12键浏览页面,可以显示10条留言了。可是,当留言超过了10条怎么办?可以用分页功能。

          4、添加分页功能

          执行菜单“窗口——》插入”,如下图,打开“插入”面板。



         切换到“应用程序”选项卡,如下图:



         将光标定位在想要放置分页的地方,点击弹出数据集导航条窗口,设置如下:



          单击“确定”保存设置。在页面中插入分页导航链接:



          打开数据库,添加多于10条的留言记录,预览页面,能正常分页。

          把四个单元格合并,将光标在表格内定位,点击“插入”面板应用程序的“”,弹出数据集导航状态窗口,如下图:



          生成的导航状态,如下图:



          上面分页有第一页、前一页、下一页和后一页功能,页数很多时,就有得你翻了。所以再添加一个页码功能,想看那一页,点击页码编号就能到达。另外,还应该有提示总页数、当前页功能。

       在上图分页表格下再插入一个表格:



          把光标在表格内定位,插入“显示当前页号”行为,如下图:



       弹出“显示当前页号”,选择DataSet1数据集。



          按“确定”保存设置。浏览页面,翻页时能显示当前是第几页。还有的就是如何显示总页数和页码了。这个须要手工添加些代码,但不是很多。

          代码清单:

当前页:<%= DataSet1.CurrentPage + 1 %>
总页数:<%# DataSet1.LastPage+1 %>
                   分页页码程序:

<%dim i as integer
for i=1 to (DataSet1.LastPage+1)
if (DataSet1.CurrentPage + 1)=i then
response.Write("<font color=#FF0000><strong>" & i &"</strong> </font> ")
else
response.Write("<a href=''''index.aspx?DataSet1_currentPage="& (i-1) &"''''>" & i &"</a>  ")
end if
next%>
                   表现出来的效果如下:



                  表格做得不是很美观,你可以修饰它。

          5.编写显示函数代码

             对于访客而言,是没有删除留言的权限的,我们在留言本的首页添加了删除记录复选框,这个复选框必须是管理员登陆后才会显示出来。这里编写一段函数代码,判断Session会话是否有值,有的话则显示出来,并允许执行删除操作。

          找到这段代码:

<input name="delete" type="checkbox" id="delete" value="<%#DataSet1.FieldValue("id", Container)%>">删除
       这个直接在设计视图下选中复选框和删除文字,然后切换到代码视图就能找到该行代码了。替换成:

       <%# strdetlete(DataSet1.FieldValue("id", Container)) %>

       下面定义一个strdetlete函数,

<script runat="server">
function strdetlete(strid as integer) as string''''定义一个strdetlete函数
if not session("MM_Username") is nothing then''''当session不为空时
strdetlete="<input name=delete type=checkbox id=delete value="& strid &" >删除"
''''输出复选框及它的值
end if
end function
</script>
          这段函数代码的作用是,判断session("MM_Username")是否有值,有的话则显示复选框和删除文字。这段函数仍然沿用了传统的ASP书写风格,可能是由于本人对ASP.NET了解得不够深入,没有使用先进的控件技术。这样作的目的为了实现批量删除,而DataGind控件虽然方便,但只能一次删除一条留言,所以本人没有作单独的删除记录页面。试把if not session("MM_Username") is nothing then改为if session("MM_Username") is nothing then,预览页面,复选框显示,查看页面源代码,复选框的值都能对应地等于留言的ID号。

         6、编写WEB控件代码

             解决复选框的显示问题,编写一段删除记录的WEB控件代码。

          首先在页面中引入Macromedia控件(Macromedia公司开发的控件,集成在DreamweaverCtrls.dll控件程序集中,在标签选择器中可获得它)的DELETE控件,切换到源代码视图,在<script></script>代码块(即上面添加的函数代码)的下面编写以下代码:

<MMelete id="Delete1" runat="server"></MMelete>
          必意注意:如果你想单独引用这个控件,则必须在页面顶部用以下语句调用DreamweaverCtrls.dll程序集:

<%@ Register TagPrefix="MM" Namespace="DreamweaverCtrls" Assembly="DreamweaverCtrls,version=1.0.0.0,publicKeyToken=836f606ede05d46a,culture=neutral" %>
          如果你在DW MX在页面插入其它的服务器行为如数据集等,这个语句已被插入到页面,不用手工添加了。上面语句没有换行,因为表格排版问题被挤成两行。

          在页面引入Delete控件,并声明在服务器端运行,还要编写一段SQL语句和读取配置文件中的连接字符串,以及响应删除按扭的事件句柄。

       先在页面中加一个WEB控件按扭。切换到源代码视图,在页面的最底部(当然也可以是其它位置,我选在分页编码的下面),打开“插入”面板切换到“ASP.NET”选项卡。如下图:



                在页中插入三个WEB内置控件,一个Button控件(按扭),两个label控件(动态文本显示)。 单击“”,打开标签编辑器,填写控件的ID名称和按扭文本,如下图:



             再选中“事件”“OnClick”,在文本框中输入事件名称“sub_delete”,如下图:



             单击“确定”保存设置。标签编辑器便在你想要的地方插入Button控件代码:

<asp:button ID="ButtonDelete" runat="server" Text="删除留言" OnClick="sub_delete" />
             这时候请不要预览页面,会报错的。报错信息如下:



          因此,我们还有编写一段响应该按扭的事件代码,即按下按扭时执行相应的语句命令,比如删除记录。

          继续添加一个LABEL控件,单击“”,填ID名称和文本就行了,如下图。这个控件放在<form></form>表单标签内。



          按这个方法添加另一个label控件,ID名称为Label2,如下图:



         按确定保存设置。DW MX就在页面插入Label控件代码,切换到代码视图,把label1的文本改为:

Text="<script Language=JavaScript >alert(''''成功删除留言!'''')</script>
          label2的文本改为:

Text="<script Language=JavaScript >alert(''''对不起!请选择要删除的留言!'''')</script>
       这样可以弹出一个消息框提示:



       上面仅是做了准备工作,还未有真正添加删除代码。下面的代码很长,不用手写了,直接复制过去,仔细阅读注释理解代码执行原理。

<script runat="server">
dim xxx as string''''声明一个全局变量
Sub Page_Load(Src As Object, E As EventArgs)''''页载载入时触发事件
xxx=request.form("delete")''''接收复选框集合值,并赋值给XXX变量
label1.Visible="False"''''初始化Label1控件不显示
label2.Visible="False"''''初始化Label2控件不显示
ButtonDelete.Visible="False"''''初始化扭按控件不显示
if not session("MM_Username") is nothing then''''当session不为空时
ButtonDelete.Visible="true"''''session变量有值时即显示按扭
end if
Delete1.ConnectionString= _
System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_MyMessageData")
''''读取数据库连接字符串
Delete1.CommandText="DELETE FROM MessageBook WHERE id in ("+ xxx +")"''''SQL删除语句
End Sub
Sub sub_delete(Src As Object, E As EventArgs)''''这是响应单击Button按扭控件的代码
if not session("MM_Username") is nothing then''''当session不为空时
if xxx<>"" then''''当复选框有钩选时
Delete1.Debug=true''''执行Delete控件删除命令
label1.Visible="True"''''成功删除记录,label1控件显示输出成功提示信息。
else''''否则
label2.Visible="True"''''没有选择删除项,label2控件显示输出出错提示。
end if
end if
End Sub
</script>
          上面这段代码块放在刚才定义的函数块下面。现在可以预览页面了,测试时首先给session("MM_Username")赋值,用以下语句:

session("MM_Username")="李飞"
             放在Sub Page_Load(Src As Object, E As EventArgs)的下一句。试试运行页面,按扭、复选框等都显示出来了?试删除几条记录,能否成功。我试能行了,不知你是否行?

          7、格式化文本显示

                删除留言的问题终于解决了,并且还能批量删除。但是你会注意到一个问题,在往数据库中添加记录的时候,明明有回车或换行的,可是到了这里却变成了一行了。再编写一段函数如下:

function strbrvbs(messagetext as string) as string
strbrvbs=Replace(messagetext,"<", "&lt;")
strbrvbs=Replace(strbrvbs,">", "&gt;")
strbrvbs=Replace(strbrvbs ,vbCrLf,"<br>")
strbrvbs=Replace(strbrvbs,chr(32)&chr(32), "    ")
end function
          这段代码放在刚才定义的函数段下面。然后找到

<%# DataSet1.FieldValue("MessageBook", Container) %>
       替换为:

<%# strbrvbs(DataSet1.FieldValue("MessageBook", Container)) %>
       就解决回车换行问题了。

                   8、显示管理员回复内容

                管理员回复实际上是更新记录,回复内容用一个字段保存,访客留言和管理员回复内容同一条记录。当这个字段的该行有记录时,则显示回复内容。把回复字段绑定到页面,看它的值是否为“Nothing”,再决定是否显示回复内容及表格。

                编写以下函数:

function AdminRel(relmessage)
if relmessage<>Nothing then
AdminRel="<br><table width=550 border=0 cellpadding=2 cellspacing=0 bgcolor=#E1F3FF>" & _
"<tr><td> 管理员回复:" & strbrvbs(relmessage) &"</td></tr></table>"
end if
end function
          然后在页面中调用函数:

<%#AdminRel(DataSet1.FieldValue("MessageAdmin", Container)) %>
          这句代码放在留言内容字段的右边。运行结果:



    没有回复时则不显示表格。

                         好了,至此,留言本的首页终于制作完毕。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

post.aspx发新留言本页

操作步骤:

          1、插入表单,切换到代码视图,给表单添加runat="server"属性:

<form id="form1" method="POST" runat="server" >
</form>
          2、按下图页面样式在表单内插入表格,宽度为730px:



          所有的文本域、单选框均与相应的字段名称相同,并且加上runat="server" 属性使其成为服务器控件。代码清单:

留言标题:<input name="title" type="text" id="title6" runat="server" >
昵       称:<input name="MessageName" type="text" id="MessageName" runat="server" >
个人主页:<input name="PageUrl" type="text" id="PageUrl" runat="server" >
电子邮箱:<input name="Email" type="text" id="Email" runat="server" >
QQ号码:    <input name="Qicq" type="text" id="Qicq" runat="server" >
留言内容:<textarea name="MessageBook" cols="70" rows="10" id="MessageBook" runat="server" ></textarea>
IP地址:<input name="UserIP" type="hidden" id="UserIP" value="<%= Request.ServerVariables("REMOTE_ADDR")%>" >
发表按扭:<asp:button ID="button1" runat="server" Text="发表" />
重写按扭:<input type="reset" name="Submit2" value="重写" runat="server" >  
    选择头像的隐藏域及头像初始值代码:

<a href=### onClick=window.open("face.aspx","face","width=400,height=400,resizable=1,scrollbars=1") title=点击选择头像>
<img src="<% if session("face")="" then
response.write("face/face14.GIF")
else
response.write(session("face"))
end if%>" width="82" height="90" border=0 id="faceImg"></a>
<input name="face" type="hidden" id="face" value="<% if session("face")="" then
response.write("face/face14.GIF")
else
response.write(session("face"))
end if%>" >
    选择表情单选按扭组:

<table width="550" border="0" cellpadding="0" cellspacing="0" >
<tr align="Center" valign="Middle" >
<td width="595"> <input type=radio name=Miange value=Miange/FIL1.GIF checked >
<img src="Miange/FIL1.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL7.GIF>
<img src="Miange/FIL7.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL8.GIF>
<img src="Miange/FIL8.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL11.GIF>
<img src="Miange/FIL11.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL12.GIF>
<img src="Miange/FIL12.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL14.GIF>
<img src="Miange/FIL14.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL17.GIF>
<img src="Miange/FIL17.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL38.GIF>
<img src="Miange/FIL38.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL32.GIF>
<img src="Miange/FIL32.GIF" border="0" ><span> <input type=radio name=Miange value=Miange/FIL28.GIF>
<img src="Miange/FIL28.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL8.GIF>
<img src="Miange/FIL8.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL5.GIF>
<img src="Miange/FIL5.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL39.GIF>
<img src="Miange/FIL39.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL42.GIF>
<img src="Miange/FIL42.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL50.GIF>
<img src="Miange/FIL50.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL47.GIF>
<img src="Miange/FIL47.GIF" border="0" ></td>
</tr>
</table>
    单选按扭组不用添加runat="server" 属性。

       在未添加插入记录行为前,先做好头像选择,用户点击头像后,弹出另一个face.aspx浏览器窗口,以便从中选择头像。这里就不介绍face.aspx的详细制作了,给出整页源代码,你把它复制做成一个页面。

       face.aspx文件整页代码清单:

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
<html>
<head>
<title>选择头像</title>
<script>
window.focus()
function chg(url)
{
window.opener.document.form1.face.value=url;
window.opener.document.form1.faceImg.src=url;
}
</script>
</head>
<body>
<table align=center width=95% class="table004" cellpadding=5>
<tr>
<td class=table003 align=center >选择形象(单击即可)</td>
<tr>
<td class="table001"> <%
dim y as integer
for y=1 to 37
response.write ("<img src=''''face/face"&(y)&".gif'''' border=0 onclick=""chg(''''face/face"&(y)&".gif'''') "" style=cursor:hand> ")
next
%> </td>
</tr>
</table>
</body>
</html>
    然后,在存放留言本程序的目录下新建一个face文件夹,定制你自己的头像图标,图像文件名从face1至face37。

    预览页面,可以弹开图像选择窗口,当单击新窗口上的图像时,post.aspx页上的图像也随之改变。

       3、添加“插入记录”服务器行为

       点击服务器行为面板左边的加号,选择“插入记录”,如果文本域和隐藏域名称与数据库字段名称对相,则DW MX自动匹配好列,如下图,你应该再仔细检一下,各项列和值是否有不匹配的,有的话就将其改正。如下图:




    按“确定”按扭保存设置。插入记录成功后,自动转到index.aspx首页。预览页面,输入留言本标题、昵称和留言内容,这三项是必填项。然后提交,如果记录插入成功,会转到首页。看看?输入中文时会显示“??? ”,原来是编码问题,ASP.NET不支持gb2312编码传输,那就用缺省值吧。切换到源代码视图,找到:

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
    把它改成:

<%@ Page Language="VB" ContentType="text/html"%>
    即把 ResponseEncoding="gb2312" 这句代码去掉就OK了。

    4、添加窗体验证控件

       留言标题、昵称和留言内容是不允许为空的,个人主页网址格式要正确,电子邮箱格式要正确,QQ号码必须是数字,因此必须添加验证控件。这个要在代码视图下的标签编辑器中操作。切换到代码视图,将光标定位在“留言标题”文本框“必填”文字后,打开“插入”面板,点击"”(更多标签),打开标签选择器。展开“ASP.NET标签——》验证服务器控件”在右窗架中选中“asp:RequiredFieldvalidator”,单击“插入”按扭,如下图:



弹出标签编辑器,填写各项如下:



  记得钩选“启用客户端脚本”。现在,可以试试效果了,什么也不填,单击提交按扭,如下图:



依照以上方法,分别为MessageName、MessageBook添加验证控件。以下提供截图:





         因为title、MessageName、MessageBook这三个字段仅仅是不允许为空,用RequiredFieldvalidator控件非常方便。但是对于主页网址格式、电子邮箱、QQ号码的验证就显得麻烦些,须要写比较表达式,就不能用RequiredFieldvalidator控件了,须要用到另外两个控件即regularexpressionvalidator和rangevalidator控件。

          个人主页网址验证:

       用regularexpressionvalidator控件,如下:



       验证表达式为:http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

           电子邮箱地址验证:

       用regularexpressionvalidator控件,如下:



       验证表达式为:\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

       QQ号码验证:

       用rangevalidator控件,如下:



    都做好了吗?试试效果,如下:



       还可以加入validationsummary控件,显示总的验证错误信息,并以消息框弹出。设置如下图:



       弹出的消息框样式如下:



       仅仅用了几个验证控件就能轻轻松松完表单窗体检验,不用像在ASP中那样地编写一大堆函数了。ASP.NET的魅力就在它的强大功能、好用。

          务必注意:验证控件只能对HTML控件或WEB控年进行验证,HTML文本框是不能起作用的,还会报错。另一个重要之处就是,你的站点根目录中必须复制有JavaScript脚本库,这个在你安装.NET框架的时候,安装程序已经为你复制在aspnet_client目录中。否则,验证控件会不起作用,还会弹出一个窗口提示你安装脚本库:



    如果出现此种情况,请检查根目录下是否有aspnet_client这个文件夹,没有的话可在这儿下载:

       http://www.ieasp.net/aspnet/aspnet_client.rar

       至此,制作发表新留言页完毕。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

admin_loing.aspx管理员登陆页

操作步骤:

          1、首先打首页index.aspx文件,在合当的地方添加一个链接到本页的文字或图片链接。

          2、创建并打开一个新admin_loing.aspx,插入表单,切换到代码视图,给表单添加runat="server"属性:

<form id="form1" method="OST" runat="server" >
</form>
         3、在表单内按以下截图页面样式插入表格和文本域:



       用户名和密码文本域代码清单:

用户名:<input name="AdminName" type="text" id="AdminName" runat="server" >
密    码:<input name="AdminPws" type="text" id="AdminPws" runat="server" >
登陆按扭:<asp:button ID="Button1" runat="server" Text="登陆" OnClick="sub_ling" />


    上面代码不外乎是普通的HTML标签加上runat="server" 属性,使其成为HTML服务器控件;登陆按扭用的是Button控件,因为要用到它来触发事件。

          3、切换到代码视图,把ResponseEncoding="gb2312"删除掉。否则数据集就不能筛出结果了。

          4、插入数据集

          因为DW MX的ASP.NET服务器行为中没有登陆用户行为,我们只能用数据集和手工改写一些代码来实现这个功能了。不用担心,代码不多。

       启动数据集,设置如下:



       点击“高级..”按扭,切换到高级数据集模式。我们看到了由DW MX生成的部分SQL语句:



       这是不够的,我们还必须添加多一个条件,即密码字段。只有用户名和密码条件都匹配时,才能让数据集筛出结果。

       点击参数“+”,弹出“编辑参数”对话框,填写名称为“@AdminPws”,类型选择“WChar”,如下图:



    单击“建立”弹出“生成值”对话框,名称为AdminPws,源选择“表单变量”,默认值为“0”。如下图:



       单击“确定”保存设置,一直回到主数据集对话框。修改SQL语句,修改结果如下图所示:



       好了,单击“确定”保存工作成果。

       5、切换到数据“绑定”面板,把“用户名”AdminName字段绑定于页面,插入页面任何地方均可,因为我们只用它来检查数据集是否筛出记录,然后判断该字段动态变量是否为空,不为空的话就赋值给session并同时转向index.aspx页。

             切换到代码视图,找到刚才绑定的字段,如下:

<%# DataSet1.FieldValue("AdminName", Container) %>
             把它改成调用StrAdmin自定义函数:

<%#StrAdmin(DataSet1.FieldValue("AdminName", Container)) %>
             当管理员输错用户名或密码,登陆不成功,给出错误提示信息,用Label控件实现:

<asp:label ID="Label1" runat="server" Text="对不起!用户名或密码错误!"></asp:label>
          该控件可以放在表单内的任何位置。

          在页的<HTML>标签上面添加页面加载时触发事件和响应登陆按扭的事件代码,以及判断数据集字段值是否为空的函

数:

<script runat="server">
function StrAdmin(ParName as string) as string''''自定义一个名为“StrAdmin”的函数
if ParName<>nothing then''''当动态变量不为空时
session("MM_Username")=ParName''''把管理员用户名赋值给session变量
response.Redirect("index.aspx")''''登陆成功后转到留言本首页
end if
end function
Sub Page_Load(Src As Object, E As EventArgs)
Label1.Visible="False"''''初始化Label控件不显示
End Sub
Sub sub_ling(Src As Object, E As EventArgs)
Label1.Visible="True"''''单击按扭触发该事件,显出错信息,但是当管理员登陆成功后
''''已由response.Redirect("index.aspx")转向首页
End Sub
</script>
       然后打开数据库表admin,添加管理员用户名和密码:



       当然,你可以添加多个管理员。有关于留言本的管理员用户名和密码修改的页面本教程不再介绍,不外乎是简单的插入、更新操作,看到后面几章后你就会自己动手做一个这样的页面了。

       测试一下,用户登陆成功后就转到index.aspx,否则给出错信息。

       下面来进一步完善页面,当管理员登陆成功后,不可以再进行登陆了,所以必须把整个登陆表单元素隐藏起来。这个功能用Panel控件来实现。

       选中表格,如下图:



       切换到源代码视图,表可标签被选中,在其上下各添加:

<aspanel id="anel1" runat="server" > 刚才选中的表格标签及服务器控件代码...

</aspanel>


       除了隐藏表格,还应该给出提示信息,提示管理员他已经登陆,用Label控件显示:

<asp:label ID="Label2" runat="server" Text="你已经登陆了!<a href=''''index.aspx''''>请返回首页</a>"></asp:label>  
       此控件可以放在表单内任何地方。

       在Page_Load方法块内初始化Panel和Label控件是否呈现出来:

if not session("MM_Username") is nothing''''当session变量不为空时
Panel1.Visible="False"''''控件被隐藏
Label2.Visible="true"''''初始化Label控件不显示
else
Label2.Visible="false"''''未登陆Labe2控件不显示
End if
       添加在Sub Page_Load(Src As Object, E As EventArgs)这句代码的下面,如下(加粗部分):

Sub Page_Load(Src As Object, E As EventArgs)
if not session("MM_Username") is nothing''''当session变量不为空时
Panel1.Visible="False"''''控件被隐藏
Label2.Visible="true"''''初始化Label控件不显示
else
Label2.Visible="false"''''未登陆Labe2控件不显示
End if
Label1.Visible="False"''''页面加载时初始化Labe1控件不显示
End Sub
       管理员登陆页已经制作完毕。

       由于考虑DW MX数据集的方便性,所以我没有采用手写代码,同时也易于初学者操作。实际上本页面仍然存在执行效率的问题,因为页面被请求即执行数据集查询命令,这是须要时间的。比较好的方法是应该在按下“登陆”按扭后才执行记录查询。好在这不是论坛,管理员也不是经常登陆吧,所以这里就不再深入地介绍手写方法了。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

admin_post.aspx留言回复

操作步骤:

       1、创建并打开一个新admin_post.aspx,插入表单,切换到代码视图,给表单添加runat="server"属性:

<form id="form1" method="POST" runat="server" >
</form>
      2、在表单内按以下截图页面样式插入表格和文本域:

引用:
文本框:<textarea name="MessageAdmin" cols="60" rows="8" id="MessageAdmin" runat="server" ></textarea>
提交按扭:<input type="submit" name="Submit" value="提交" runat="server" >
重置按扭:<input type="reset" name="Submit2" value="重置" runat="server" >  
    普通标签加   runat="server"使其成为服务器控件。
3、切换到代码视图,把ResponseEncoding="gb2312"删除掉。

       4、插入数据集

    列选定id、title、MessageBook、MessageName这几个字段,其它设置如下图:



    切换到“绑定”面板,把留言标题、留言人及留言内容绑定到页面。用一段函数来格式化留言本内容本文,使用恢复回车换行。

       代码如下:

<script language="VB" runat="server">
function strbrvbs(messagetext as string) as string
strbrvbs=Replace(messagetext,"<", "&lt;")
strbrvbs=Replace(strbrvbs,">", "&gt;")
strbrvbs=Replace(strbrvbs ,vbCrLf,"<br>")
strbrvbs=Replace(strbrvbs,chr(32)&chr(32), "    ")
end function
</script>
       这段代码可以放在任何地方。

       选定页面“留言内容”动态绑定字段,切换到源代码,把它改成:

<%# strbrvbs(DataSet1.FieldValue("MessageBook", Container)) %>
       打开留言本首页,然后点击“回复”图片,将ID号传递到admin_post.aspx页,并能筛出记录。

       5、应用“更新记录”行为

       留言回复是更新MessageAdmin字段。

       在应用“更新记录”之前,应该在表单内添加一个隐藏域用来指定须要更新记录ID,这个ID可以是从URL参数获取,也可以由数据集中绑定。

       添加的隐藏域代码如下:

<input name="id" type="hidden" id="ide" value="<%# DataSet1.FieldValue("id", Container) %>" >
       隐藏域名称为ID,注意,由于使用了数据集绑定变量,不可以添加runat="server"属性。

       启动“更新记录”对话框:



    设置ID和MessageAdmin字段及获得值,如下





    记录更新后就转到index.aspx首页。好了,测试一下,可以回复了,没问题。

    6、添加限制对页的访问代码

       由于DW MX不提供ASP.NET的“限制对页的访问”行为,这样任何人都可以回复了。下面我们编写一小段简单的“限制对页的访问”代码,若未登陆就想访问该页,则将访客带到admin_loing.aspx登陆页。

       代码以下:

Sub Page_Load(Src As Object, E As EventArgs)
If Session("MM_Username") Is nothing
Response.Redirect("admin_loing.aspx")
End If
End Sub
</script>


       把这段代码放在页面的第三句,在执行所有代码前,首选检查Session("MM_Username")是否有值,没的话,则转向admin_loing.aspx让管理员登陆。

       至此,管理员留言回复页制作完毕。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

admin_update.aspx编辑留言

操作步骤:

       1、创建并打开一个新admin_update.aspx,插入表单,切换到代码视图,给表单添加runat="server"属性:

<form id="form1" method="POST" runat="server" >
</form>
      2、在表单内按以下截图页面样式插入表格和文本域:



       各文本域名称:

留言标题:title
留言人: MessageName
QQ:   Qicq
EMAIL: Email
留言内容:MessageBook
回复内容:MessageAdmin


   

    由于要绑定字段,所示文本域不能添加runat="server"属性,否则将报错。

    3、添加数据集

    启动数据集,设置如下:



       把相应字段绑定到各文本域的初始值。

    绑定方法如下:

    1)单击留言标题文本域,在底部的“属性”面板中,单击“初始值”文本框右边的那个“闪电”图像。



    2)弹出“动态数据”窗口,选中“title”,单击“确定”按扭,保存设置,就把title字段绑定到初始值中了。



    3)依照此法,分别把MessageName、Qicq、Email、MessageBook、MessageAdmin字段绑定到相应文本域中。

    4、切换源代码,把ResponseEncoding="gb2312"这句代码删除掉。

    5、应用“更新记录”行为

    在启动“更新记录”行为之前,先在表单中插入一个隐藏域,名称为“ID”,同回复页一样,可以从URL参数获取得值,也可以从数据集中得到值。

    隐藏域代码如下:

<input name="ID" type="hidden" id="ID" value="<%# DataSet1.FieldValue("id", Container) %>">
    从数据集中获取ID号。

    启动“更新记录”对话框:



    各本文域名称与数据库表中字段相同的话,则DW MX会自动匹配好值,不过你应该自己检查一下,是否有不匹配的字段,有的话则将其改正过来。

    单击“确定”按扭,保存设置。启留言本首页,点击“编辑”图片链接,将ID号传递admin_update.aspx页,我试过可以更新记录。不知你可否成功?

    6、添加“限制对页的访问”代码

       这个页面只有在登陆后才能访问,否则带到admin_loing.aspx页。

    代码以下:

<script runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
If Session("MM_Username") Is nothing
Response.Redirect("admin_loing.aspx")
End If
End Sub
</script>
    这段代码放在页面的顶部。

    由于本面只要更新所有记录,因此可以用来回复,上一章介绍你的做的回复页可以不要,直接在本页回复行了。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

管理员注销页的制作

这个页面制作比较简单,按照以下页面做个提示信息。



      然后,切换到代码视图,在<html>标签上面添加以下代码。
引用:
<script runat="server">
Sub Page_Load(Src As Object, E As EventArgs)
Session.Abandon()
End Sub
</script>
这段代码摧毁了session变量,实现注销用户。
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

定制用户控件

至此,整个留言本的核心程序已经制作完毕,现在你须要做的工作是,把留言本的各个页面美化一下了。本章介绍的用户控件是用来显示页面底部的版权信息。

       新建一个userweb.ascx文件,记住了,文件后缀名为.ascx,不是.aspx。

       切换到代码视图,把所有的<HTML><body><title>标签统统删除掉。然后再切换回设计视图,插入一个表格,和相关的版权信息,可以是纯HTML标签,HTML控件或WEB控件所作。



   整个用户控件页代码:

<table width="571" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td align="center">ASP.NET留言本    程序设计:李飞   版权所有©2004-6-22<br>
技术支持:<a href="http://www.ieasp.net" target="_blank">http://www.ieasp.net<;/a></td>
</tr>
</table>
    然后打开所有页面,比如index.aspx页,在页顶底添加一个语句把用户控件引入:

<%@ Register TagPrefix="TT" TagName="Text" Src="userweb.ascx" %>
    添加位置:



    这样,就在index.aspx页中定义了一个命令区前缀标志为“TT:”,名称为“Text”的WEB控件了。

    在须要显示控件的地方添加该加以下语句:

<TT:text id="uext" runat="server" ></TT:text>
    好了,预览页面,把用户控件显示出来了,如果用户控件有执行代码的话,即一同编译执行。服务器会把你的用户控件和普通的WEB控件同等对待。

    做好了吗?我试了试,效果如下:



       好了,把用户控件全部引入各个须要显示版权信息的页面中。

       用户控件可以大大地提高代码的重用性,给你一个思路,在制作回复页、编辑页的时候,用到了两段完全相同限制对页的访问代码,你可以把它做成一个用户控件,当页面很多的时候,把这个用户控件引入须要受保护的页面。这样就可以像包含文件一样使用方便了和实现相应功能了
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

这个教程比较详细的介绍了整个过程,估计论坛有很多会员亲手制作过留言本,这个其实并不复杂~

现在网上有很多免费申请留言本的,可那毕竟不是咱们自己亲手做的,如果大家想亲手做个,不妨试试,你一定行的~~

在制作过程遇到什么刺头和一些解决不了的问题,可以来咨询我,这个我还是会的,嘿嘿!!!
[img]http://www.52plato.com/attachments/20041205_qb_4w5KlA5NlG6d.jpg[/img] [fly][color=Purple]☆-想知道网络上绚丽多彩的网站的制作过程吗?想拥有个性签名和头像吗?-★ ☆-那你还忧郁什么?快进入◇视觉设计◇吧,让我们一起感受创作的喜悦!-★[/color][/fly]

TOP

 14 12
发新话题
版块跳转