Dreamweaver cs6自定义后台主页面

    以前网站设计都用CMS内容管理系统,如Joomla,WordPress等。后台页面登录内容是固定的,无法修改,久了就烦,只好用Dreamweaver Cs6来重新设计后台主页。

   使用dreamweaverDreamweaver cs6自定义后台主页面_第1张图片设计后台主页面,必须是建立动态网站项目,是创建一个通用型动态网站的后台管理页面,即通过该页面对前台的注册用户、新闻发布、投票调查、留言和通讯录进行管理。包括管理员用户登录页面和后台首页,前者主要涉及表单的插入和管理员的身份验证,后者涉及防止非法用户直接输入网址恶意登录和退出时注销用户的问题。图: 

   Dreamweaver cs6自定义后台主页面_第2张图片

当然除了ASP,也可以是asp.net,PHP等建立后台主页。

创建后台管理员用户登录页面

右单击站点中的admin文件夹,选择【新建文件】,在该文件夹下创建AdminLogin.asp和ReAdminLogin.asp文件。

打开AdminLogin.asp文件,在设计视图中插入表单,表单的名称为form1,对ReAdminLogin.asp文件进行同样的操作。

将光标定位在表单中,插入一个4行2列的表格,完成用户登录界面设计,如图8-2-2所示。修改用户名和密码文本框名称,分别改为Aname和Apass。类似完成当用户名或密码输入错误时的重新登录页面。

    Dreamweaver cs6自定义后台主页面_第3张图片

在【服务器行为】面板中单击【用户身份验证】→【登录用户】命令。该具体步骤及说明请参考项目2中任务3的相关内容,在此不再赘述。第一次登录与第二次登录的操作步骤类似,图:

Dreamweaver cs6自定义后台主页面_第4张图片

next,结合其中相关选项说明用户登录的流程。

为文件中插入"登录用户"时,如图8-2-3所示。(1)图①处标识了:“当管理员用户第一次登录时,如果失败则转向第二次登录页面ReAdminLogin.asp”。(2)图是在ReAdminLogin.asp文件中插入"登录用户"时的截图,其中②处标识了:“当用户第二次尝试登录时,如失败则转向主页index.asp”。这样设计,避免了非法用户的恶意多次尝试登录后台管理模块。

2.创建后台管理员用户登录页面

右击站点中admin文件夹,在弹出的菜单中选择【新建文件】命令,在该文件夹下创建AdminManage.asp文件。

打开AdminManage.asp文件,插入一个3行1列的表格,在第2行中再嵌套一个1行8列的表格,作为导航栏。在AdminManage.asp文件的导航栏的①处插入局部变量Session(“MM_Username”),该变量保存了登录用户的用户名信息,图:

Dreamweaver cs6自定义后台主页面_第5张图片


后台主页面设计(2)

单击导航栏中菜单命令,在后台首页的下面主体部分将显示相应的管理功能选项,如图8-2-5所示,就是选择"注册用户管理"命令之后的界面。

Dreamweaver cs6自定义后台主页面_第6张图片

后台注册用户管理
该界面是在后台首页中加入内框架实现的,这里请注意上图中地址栏矩形框中的内容:“adminManage.asp?name=userManage”。

ASP代码如下:
130 <%
131 dim sysname '定义一个变量
132 select case request(“name”)
133 case “usermanage”
134 sysname=“ch02/usermanage”
135 case “admin_link”
136 sysname=“ch06/admin_link”
137 case “admin_news”
138 sysname=“ch07/admin_news”
139 case “admin_vote”
140 sysname=“ch04/admin_vote”
141 case “admin_liu”
142 sysname=“ch05/admin_liu”
143 case else
144 sysname=“null”
145 end select
146 %>
147 <p>第147行的HTML标记表示嵌入一个名字为admin的内框架,内框架的页面地址为&rdquo;<%=sysname%>.asp&rdquo;。例如,在图8-2-5中,根据地址栏的name变量值,sysname变量的值为"ch02/usermanage&rdquo;,再加上后面的&rdquo;.asp&rdquo;,即"ch02/usermanage.asp&rdquo;,则内框架的页面地址为当前页面下子文件ch02中的文件usemanage.asp。</p> <p>同理,在该内框架中实现其他几个后台管理子模块。</p> <p>将光标定位在文件中,选择【服务器行为】→【用户身份验证】→【限制对页的访问】命令,以阻止非法用户直接输入后台的地址来绕过管理员身份验证。</p> <p>选中"退出"文字,执行【服务器行为】→【用户身份验证】→【注销用户】命令。该步骤的作用在于当管理员退出后,清除浏览器中的阶段变量,以避免被恶意利用,非法进入后台。 <br/>注册用户管理 <br/>该任务是项目2的后台管理部分,即对注册用户进行管理,包括用户的删除及用户信息的修改。其主要操作步骤为:在后台管理目录admin的子目录ch02下创建用户管理主页面UserManage.asp,根据用户的ID号对其执行删除操作DelUser.asp,或执行修改用户信息的操作ModUserInf.asp。关于数据库表的建立与连接请参考项目2。</p> <p>注册用户管理页面及操作流程如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/125748_j7rU_183102.png" alt="在此输入图片描述" /></p> <p>创建用户管理主界面</p> <p>右击站点中后台文件夹admin,在弹出的菜单中选择【新建文件夹】命令,创建ch02作为注册用户管理子模块单独使用的文件夹,并在该文件夹下新建usermanage.asp文件。</p> <p>打开usermanage.asp文件,在设计视图中插入表单,表单的名称为form1。</p> <p>将光标放在文档中,执行【服务器行为】→【用户身份验证】→【限制对页访问】命令,填写对话框参数,如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/125909_qLaM_183102.png" alt="在此输入图片描述" /></p> <p>在后台管理模块的每个页面中都要通过添加【服务器行为】→【用户身份验证】→【限制对页访问】命令来实现页面的访问限制,以避免非法用户直接输入URL绕过登录页面,直接对后台进行操作。</p> <p>将光标定位在表单中,插入一个2行5列的表格,完成用户管理主界面中①的设计,如图; <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/130214_acsD_183102.png" alt="在此输入图片描述" /></p> <p>用户管理主界面制作步骤 <br/>将光标定位在表单中,选择"窗口"下拉菜单中的【绑定】命令,单击右上角的&rdquo;+&ldquo;,在弹出的菜单执行【记录集(查询)】命令,在当前文档中插入数据库表Userlogin的一个记录集,如图8-3-4所示。并将记录集中动态文本"ID&rdquo;、&ldquo;Uname&rdquo;、&ldquo;Upass"分别拖入表格中的相应位置,如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/130329_eTc6_183102.png" alt="在此输入图片描述" /></p> <p>注册用户管理(2)</p> <p>选中"修改"两个字,执行【服务器行为】下的【转到详细页面】命令,在弹出的对话框中输入相应内容,如图8-3-5所示,然后单击"确定"按钮。再选中"删除"两个字进行同样的操作,之后页面格式变成如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/130529_WA1F_183102.png" alt="在此输入图片描述" /></p> <p>选中第2行,执行【服务器行为】下的【重复区域】命令,页面格式将变成图8-3-3的④,在第2行上出现"重复"两个字,表示该行出现的次数将有记录集中的记录数决定。再查看"服务器行为"项下将出现7个服务器行为,如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/130645_baCd_183102.png" alt="在此输入图片描述" /></p> <p>创建删除用户页面</p> <p>右击ch02文件夹,选择【新建文件】,创建deluser.asp文件。</p> <p>打开deluser.asp文件,在设计视图中插入表单,表单的名称为form1。</p> <p>将光标放在文档中,执行【服务器行为】→【用户身份验证】→【限制对页访问】命令。</p> <p>将光标定位在表单中,插入一个2行1列的表格,完成删除用户界面①中的设计,如图: <br/>将光标定位在表单中,在当前文档中插入"记录集(查询)&ldquo;,并将记录集中动态文本"Uname"拖入表格中第一行的相应位置,如图8-3-7中的②所示。</p> <p>选中"确定"按钮对象,执行【服务器行为】→【删除记录】命令,在弹出的"删除记录"对话框中输入相应内容,如图所示,然后单击"确定"按钮。 <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/130834_dw2K_183102.png" alt="在此输入图片描述" /></p> <p>创建用户修改页面</p> <p>右击ch02文件夹,选择【新建文件】,创建moduserinf.asp文件。</p> <p>打开moduserinf.asp文件,在设计视图中插入表单,表单的名称为form1。</p> <p>将光标放在文档中,执行【服务器行为】→【用户身份验证】→【限制对页访问】命令。 <br/>将光标定位在表单中,插入一个4行2列的表格,完成删除用户界面中①的设计, <br/>将光标定位在表单中,在当前文档中插入【记录集(查询)】,并将记录集中动态文本 &ldquo;Uname"与"Upass"拖入表格中第2行与第3行的相应位置,选中"确定"按钮对象,执行【服务器行为】→【更新记录】命令,在弹出的对话框中输入相应内容,然后单击"确定"按钮,如图: <br/><img src="http://static.codeweblog.com/uploads/space/2015/0501/131056_8HfF_183102.png" alt="在此输入图片描述" /></p> <p>最后是首页选项,对后台页面进行测试。 <br/>ok,介绍到这,赶快自定义后台页面。 <br/>end</p>

end


    

你可能感兴趣的:(Dreamweaver cs6自定义后台主页面)