和上一个贴吧案例类似的，本案例的页面公共部分也单独提取出来，并在需要的时候使用include指令来引入到ASP页面当中。在本案例中，页面的公共部分主要有头部元素_heaad.asp，此部分负责页面头部的导航的显示；底部元素_foot.asp，此部分负责页面底部的版权信息的显示；此外还有侧边栏元素_sidebar.asp，此部分负责显示侧边栏的用户登录/注册信息等。如图8.6所示。

图8.6

你会注意到，在为这三个文件命名时，我将其第一个字母设为“_”符号，表示这是一个被引入的文件，以便和其他文件区分开，你也可以将其设为head.inc.asp这样的文件名。

8.7.1 头部元素_head.asp

此文件源代码如下：

<%

Dim sScriptName

'获得当前页面文件名并进行处理

sScriptName = UCase(Trim(Request.ServerVariables("SCRIPT_NAME")))

sScriptName = Right(sScriptName,Len(sScriptName)-1)

'定义输出页面样式的过程

Sub PageSelected(strScriptName)

       If  sScriptName = UCase(strScriptName) Then  '如果当前页是需要显示为选中的页

              Response.Write("class=""selected""")

       End If

End Sub

%>

       <div id="header"><a href="default.html"><img src="images/logo.png" width="280" height="80" border="0" title="logo" /></a></div>

<%If Left(sScriptName,3)<>"MOD" Then%>

       <div id="navigation">

              <ul>

                <li><a href="default.html" <%PageSelected("default.html")%>>首页</a></li>

                <li><a href="list.html" <%PageSelected("list.html")%>>图片</a></li>

                <li><a href="tags.html" <%PageSelected("tags.html")%>>TAGs</a></li>

                <%If IsLogined Then            '如果用户已经登录%>

                       <li><a href="list.asp?UserID=<%=Session("weshare_UserID")%>">我的图片</a></li>

              <li><a href="account.html" <%PageSelected("account.html")%>>我的帐户</a></li>

                       <li><a href="upload.html" <%PageSelected("upload.html")%>>上传</a></li>

                <li><a href="logout.html" <%PageSelected("logout.html")%>>退出</a></li>

                <%Else                           '如果用户还未登录%>

                       <li><a href="login.html" <%PageSelected("login.html")%>>登录</a></li>

                       <li><a href="regist.html" <%PageSelected("regist.html")%>>注册</a></li>

                <%End If%>

              </ul>

       </div>

<%End IF%>

你可以看到，由于在本页面需要根据当前请求页的不同，给导航栏以不同的显示方式，因此这里使用了ASP代码进行了一些判断。

程序首先通过Request.ServerVariables变量的SCRIPT_NAME元素集合获取当前页面的名称，而后将其格式进行整理并保存在变量sScriptName中，而后程序定义了过程PageSelect，此过程接收传入的参数strScriptName，并判断当前页面是否与strScriptName相同，如果相同，则输出“class="selected"”的HTML代码，而后我们在下面的导航HTML代码中，调用此过程，如果在导航列表中的某项是当前页面，则其a标签中被加入了class="selected"的css属性，在此css中指定了当前页面的显示方式，如图8.7所示。

图8.7

8.7.2 尾部元素_foot.asp

此文件源代码如下：

  <br class="clearfloat" />

  <div id="footer">

    <p><strong>WeShare</strong>&copy; 2007 hanguofeng</p>

    <!-- end #footer -->

  </div>

可以看出，此文件没有任何的ASP代码，仅是简单显示一些文字，在站点运行中，如果需要，你可以在此文件中加入站点流量统计等代码，由于此文件被所有页面所包含，因此可以方便实现全站点流量的统计。

8.7.3 侧边栏_sidebar.asp

此文件源代码如下：

<script src="js/sidebar.js" type="text/javascript"></script>

<div class="sidebar">

       <%If IsLogined = False Then                  '如果没有登录，则显示登录和注册表单%>

              <div id="loginfrm">

                <h3>登录到我的WeShare</h3>

                <form id="frmLogin" name="frmLogin" method="post" action="login.html" onsubmit="return chkForm_Login()">

                ……表单部分略

                </form>

              </div>

       <%Else         '否则显示欢迎信息%>

              <h3>欢迎您回来</h3>

              <p>欢迎您:<%=Session("weshare_Email")%></p>

              <p>您可以点击<a href="logout.html">这里</a>退出</p>

        <%

              '如果当前页是LIST.ASP页面，则显示“我的相册”部分

              If sScriptName = "LIST.ASP" Then

                     Dim oRs_Album,sql_Album

                     Response.Write("<h3>我的相册</h3><ul class=""album-list"">")

                     '建立记录集对象的实例oRs_Album

                     Set oRs_Album = Server.CreateObject("ADODB.RecordSet")

                     '建立SQL语句sql_Album

                     sql_Album = "SELECT * FROM [Album] WHERE UserID =" & Session("weshare_UserID")

                     '打开记录集oRs_Album，取出当前用户的相册

                     oRs_Album.Open sql_Album,oConn,1,1

                     '循环遍历记录集，显示当前用户的相册

                     While NOT oRs_Album.Eof

                            '调用ShowAlbum过程

                            ShowAlbum oRs_Album("AlbumID"),oRs_Album("AlbumName"),oRs_Album("AlbumCover")

                            oRs_Album.MoveNext

                     Wend

                     '关闭和清空记录集

                     oRs_Album.Close

                     Set oRs_Album = Nothing

                     Response.Write("</ul>")

              End If

              '如果当前页是VIEW.ASP页面，则显示“标签云集”部分

              If sScriptName = "VIEW.ASP" Then

                     Dim aTags,tag

                     Response.Write("<h3>标签云集</h3><ul class=""tag-list"">")

                     '将sPhotoTags转换为数组，保存在aTags变量中

                     aTags = Split(sPhotoTags,",")

                     '遍历数组元素，并显示相应的标签

                     For Each tag IN aTags

                            Response.Write("<li><a href=""list.asp?tag=" & tag & """>" & tag & "</a></li>")

                     Next

                     Response.Write("</ul>")

              End If

              %>

    <%End If%>

    <!-- end #sidebar1 -->

</div>

你可以看到，此文件比较复杂，没关系，我们来逐层分析。

程序首先使用HTML代码加入一个js文件，此js文件是实现侧边栏某些元素的切换效果。而后程序对当前用户是否已经登录做出判断，如果用户没有登录，那么应当显示登录和注册的表单，否则显示用户登录后的控制面板信息。

先来看登录和注册表单，由于这里的位置有限，因此我们没有必要同时显示登录和注册的表单，这里使用了一个JavaScript的前台处理过程。你需要在页面中同时加入登录和注册两个表单，而后我们将注册表单的css设定为“display:none;”来使得其默认不被显示。此时此部分的样式如图8.8所示。

图8.8

在这里，你可以填写邮箱和密码，并点击“登录”，提交到相关的处理页面进行登录的处理，还可以点击“注册”按钮，实现表单的切换，当点击“注册”按钮后，将触发JavaScript函数showregform()，此函数代码如下：

function showregform()

{

       $('loginfrm').visualEffect('blind_up','d1',{duration:1});//hide login form

       setTimeout('$(\'regfrm\').visualEffect(\'blind_down\',{duration:1})',1000);//show registe form

}

这个JavaScript调用了script.aculo.us效果库中的blind_up和blind_down两个方法，实现了页面元素的渐隐效果，从而优化了用户体验。

用户注册部分的表单原理与此类似，这里不再赘述。

下面来讲解_sidebar.asp文件中，当用户已经登录后的处理部分。

当用户登录后，程序显示了用户的用户名（Email），并显示了退出的链接。

同时，在登录后的If块中，又进行了一些判断，这个判断是通过比对在_head.asp页面中的sScriptName变量的值来实现的。

程序首先判断，如果当前页面是list.asp的话，则从数据库中选取当前用户的所有相册，并循环遍历记录集，将其显示出来。

否则如果当前页面是view.asp的话则显示当前用户的Tag列表， 这个过程是将view.asp文件中前面部分已经取出的保存在数据库中的图片标签分割为数组，而后遍历数组，输出标签来实现的。