在使用CSS樣式時(shí),設(shè)計(jì)到對(duì)路徑的引用,這里以<a></a>為例,說明路徑的常規(guī)處理。
一般而言,鏈接路徑的表達(dá)有三種方式:絕對(duì)路徑、相對(duì)路徑和基于根目錄的路徑。例如假設(shè)當(dāng)前應(yīng)用程序的結(jié)構(gòu)如圖3-5,它的網(wǎng)址為 http://www.asp.net,下面就介紹鏈接路徑的表達(dá)方法。
(1)絕對(duì)路徑
使用完整的URL地址,這種鏈接路徑就是絕對(duì)路徑,其特點(diǎn)是路徑同鏈接站點(diǎn)的源點(diǎn)無(wú)關(guān)。如圖
< a href=”http://www.asp.net/about/
about.aspx”></a>
而建立指向database.aspx文檔的路徑為:
< a href=”http://www.asp.net/product/other
/database.aspx”></a>
使用絕對(duì)路徑的最大缺點(diǎn)是不利于移植,例如現(xiàn)在站點(diǎn)的地址為http://www.asp.net,如果有一天站點(diǎn)更該http://www.asp.com,則所有的鏈接地址都失效,需要進(jìn)行更改,難以維護(hù)。
(2)相對(duì)路徑
為了避免絕對(duì)路徑的缺陷,可以使用相對(duì)路徑。相對(duì)路徑可以表達(dá)源端點(diǎn)和目標(biāo)端點(diǎn)之間的相互位置關(guān)系。具體可以范圍如下兩種情況:
l 如果鏈接中,源端點(diǎn)和目標(biāo)端點(diǎn)在同一個(gè)目錄下,則在鏈接中只需要指明目標(biāo)端點(diǎn)的文檔名稱就可以了。例如在圖3-5中,如果希望在about.aspx文檔中創(chuàng)建指向develop.aspx的鏈接,則可以寫成如下:
<a href=”develop.aspx”>
l 如果在鏈接中,源端點(diǎn)和目標(biāo)端點(diǎn)不位于同一個(gè)目錄下,則只需要將目錄的相對(duì)關(guān)系表達(dá)出來(lái)就可以了。如果鏈接指向的文檔沒有位于當(dāng)前目錄的子級(jí)目錄中,則可以利用”..”符號(hào)來(lái)表示當(dāng)前的父目錄,多個(gè)..符號(hào)可以表示根高的父級(jí)目錄,從而構(gòu)建出目錄的相對(duì)位置。例如如果希望在about.aspx文檔中創(chuàng)建指向位于product目錄中的software.aspx文檔的鏈接,則可以用如下的代碼:
<a href=”../product/software.aspx”>
如果希望在database.aspx文檔中創(chuàng)建指向about.aspx文檔的鏈接,則可以使用錄如下的路徑
<a href=”../../about/about.aspx”>
利用相對(duì)目錄的好處在與只要站點(diǎn)的結(jié)構(gòu)和文檔不變,鏈接就不會(huì)出錯(cuò),然而如果你移動(dòng)了文件,或者相對(duì)關(guān)系發(fā)生變化,則就會(huì)發(fā)生錯(cuò)誤。
(3)基于跟目錄的路徑
基于跟目錄的路徑可以看成是絕對(duì)路徑和相對(duì)路徑之間的一種折衷,在這種表達(dá)方式下,所有的路徑都是從站點(diǎn)的跟目錄開始的,它同源端點(diǎn)位置無(wú)關(guān)。
例如在圖3-5時(shí),建立指向About文件夾下的about.aspx的鏈接為
<a href="/about/about.aspx">
建立指向database.aspx的鏈接為
<a href="/product/other/database.aspx">
另外,如果指向的是主頁(yè)可以寫成
<a href="/">或者<a href="/default.aspx">
(4)ASP.NET的“~”路徑
在ASP.NET里增加了一個(gè)新的表達(dá)方法“~”,“~”表示的路徑是當(dāng)前應(yīng)用程序的跟目錄。“~”和上面介紹的“/”最大的區(qū)別是由服務(wù)器進(jìn)行動(dòng)態(tài)解釋。由于”~”是相對(duì)于應(yīng)用程序的根目錄,所以利用它可以簡(jiǎn)化路徑的設(shè)置,在某些情況下似乎還必須使用該控件,例如如下使用了一個(gè)TreeView控件(具體以后會(huì)介紹)
<asp:TreeView ID="TreeView1"
RootNodeStyle-ImageUrl="~/images/xp/computer.gif"
ParentNodeStyle-ImageUrl="~/images/xp/folder.gif"
LeafNodeStyle-ImageUrl="~/images/xp/ie.gif"
CollapseImageUrl="~/images/xp/minus.gif"
ExpandImageUrl="~/images/xp/plus.gif"
NoExpandImageUrl="~/images/xp/blank.gif"
runat="server">
<Nodes>
<asp:TreeNode Text="My Computer">
<asp:TreeNode Text="Favorites" ImageUrl="~/images/xp/star.gif">
<asp:TreeNode Text="News">
<asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com"/>
<asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Technology">
<asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com"/>
<asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net"/>
<asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com"/>
<asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Shopping">
<asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com"/>
<asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="City Links">
<asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com"/>
<asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com"/>
</asp:TreeNode>
<asp:TreeNode Text="Music Links">
<asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com"/>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
面顯示了它的運(yùn)行結(jié)果:
圖3-6 TreeView控件運(yùn)行結(jié)果圖
在這個(gè)運(yùn)行結(jié)果里可以看到News和CityLinks連接器都使用了文件夾圖片folder.gif,這是通過
ParentNodeStyle-ImageUrl="~/images/xp/folder.gif"
進(jìn)行設(shè)置的。在這里使用相對(duì)路徑是不行的,因?yàn)樵谶\(yùn)行時(shí),News和CityLinks在不同的級(jí)別,無(wú)法使用相對(duì)路徑設(shè)置,如果使用絕對(duì)路徑這里也算一個(gè)不錯(cuò)的選擇,如果使用相對(duì)于根目錄的路徑,如果您使用的虛擬主機(jī)的話,就會(huì)發(fā)現(xiàn)有時(shí)你并得不到相對(duì)于根目錄的路徑,所以這里使用相對(duì)于應(yīng)用程序的根目錄確實(shí)是一個(gè)最好的做法。這個(gè)“~”就會(huì)由.NET在運(yùn)行時(shí)自動(dòng)解析的。
(5)在樣式中使用地址注意的問題
可以在樣式中引用圖像,該圖像的引用使用相對(duì)與樣式文件的引用,仍然以圖3-3為例,我在Style下建立了一個(gè)StyleSheet.css文件來(lái)存放樣式,該樣式的內(nèi)容非常簡(jiǎn)單如下:
td.mybg{background:url(images/bg.gif)}
你可以看到我將td元素重新定義增加了背景圖片bg.gif。這里的bg.gif來(lái)自于Style/images文件夾下的bg.gif,這樣如果在首頁(yè)引用時(shí),可以正確的顯示,如下:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css">
<table height="86">
<tr>
<td width="146" class="mybg">this is a test</td>
</tr>
</table>
然而這和后面介紹主題里使用圖像時(shí)正好相反。主題還可以包含外觀文件中的控件定義所引用的圖像。外觀中對(duì)圖像的引用應(yīng)使用 Theme 目錄下的圖像文件夾的相對(duì)路徑,以便外觀文件和圖像可以一起移到其他應(yīng)用程序中。在運(yùn)行時(shí),會(huì)重新設(shè)置圖像的路徑,以使引用相對(duì)于目標(biāo)頁(yè)中的控件,而不是相對(duì)于外觀文件。所以請(qǐng)務(wù)必區(qū)分這一點(diǎn)。
(6)確保路徑指向文件的唯一性
在用ASP.NET處理路徑時(shí),需要確保文件的唯一性,否則將發(fā)生錯(cuò)誤。特別是在使用用戶控件時(shí),如果路徑引用的過于復(fù)雜,盡管理論上應(yīng)該正確,但是實(shí)際運(yùn)行時(shí)可能得到預(yù)想不到的錯(cuò)誤,以圖3-7為例:
圖3-7 MyBlog結(jié)構(gòu)圖
在UI的目錄學(xué)有一個(gè)Control文件夾,然后在該文件夾下有一個(gè)Calendar.ascx用戶控件,Page.ascx用戶控件引用了該calendar.ascx的代碼如下:
<%@ Register TagPrefix="uc1" TagName="Calendar" Src="Controls/Calendar.ascx" %>
... ...
<uc1:Calendar id="Calendar1" runat="server"></uc1:Calendar>
在根目錄下有一個(gè)default.aspx首頁(yè),它又引用了Page.ascx用戶控件,如下:
<%@ Register TagPrefix="uc1" TagName="Page" Src="UI/Page.ascx" %>
... ...
<uc1:Page id="Page1" runat="server"></uc1:Page>
同時(shí)跟目錄下也有一個(gè)Control文件夾和Calendar.ascx文件。那么盡管上面代碼表面上看應(yīng)該沒有問題,但是由于用戶控件層層嵌套引用,使得實(shí)際運(yùn)行時(shí),系統(tǒng)區(qū)分不了到底使用哪一個(gè)Calendar.ascx而發(fā)生錯(cuò)誤,此時(shí)一個(gè)較為簡(jiǎn)單的解決方法是,所以的路徑都使用相對(duì)于跟目錄的引用就能夠解決。
聯(lián)系客服