在主頁制作中,我們對(duì)什么最不陌生?鏈接!可以毫不夸張地說,鏈接是主頁的靈魂,有了它,我們才可以在網(wǎng)絡(luò)世界恣意暢游。而對(duì)于網(wǎng)頁制作者來說,它看似簡(jiǎn)單卻并不容易。在此,筆者自己的經(jīng)驗(yàn)對(duì)網(wǎng)頁中的鏈接進(jìn)行一個(gè)綜合的介紹,以期讓大家對(duì)其有一個(gè)而深入的理解。
對(duì)于鏈接在HTML中的寫法,在這里不用詳述了,大家可以在許多初級(jí)教程中找到這方面的介紹。我們著重介紹以下幾個(gè)方面:
一、鏈接的種類
鏈接有兩種,一種是不同頁面間的鏈接,這種最常見。另外一種則是頁內(nèi)鏈接,我們一般稱為頁內(nèi)錨(achor)鏈。
頁面之間的鏈接是用URL(United Resource Location:統(tǒng)一資源定位符)來表示,如果是同一個(gè)站點(diǎn)之間頁面的鏈接,則可直接根據(jù)目錄之間的關(guān)系來表達(dá)這種鏈接,而不必用“http://...”這樣的形式。如在content目錄下有一個(gè)HTML文件的鏈接鏈接到該站點(diǎn)與content目錄同級(jí)的目錄chat下的index.htm文件,鏈接則直接表示為:../chat/index.htm。如果你學(xué)過DOS命令諸如目錄操作命令的話,相信對(duì)這種表示方法不會(huì)陌生,只不過是將“\”變?yōu)椤?”。
而對(duì)于頁內(nèi)錨鏈,有些朋友可能會(huì)疑惑了,什么叫做頁內(nèi)錨鏈,有什么用呢?對(duì)此,我們以一個(gè)很實(shí)際的例子來看一看其用處:
admin5.com 版權(quán)所有 如果一篇文章很長(zhǎng),并分為幾個(gè)部分,文章前面一般都列有該文章的各要點(diǎn),如果我們因要擇其中一部分閱讀而不停地拉動(dòng)滾動(dòng)條是不是費(fèi)時(shí)而費(fèi)神呢?頁面錨鏈可以讓你很方便地點(diǎn)擊要點(diǎn)鏈接,從而直接閱讀到該部分內(nèi)容。
●定義“錨”
要用頁內(nèi)錨鏈,首先要定義這些所謂的“錨”,即用符號(hào)來標(biāo)識(shí)文件中某部分的位置。這要用到HTML標(biāo)記中一個(gè)很常見而又重要的屬性:id(Identification:標(biāo)識(shí)符)。用id可以來指代所屬標(biāo)記的HTML內(nèi)容。其定義形式如下:
<Tag id=″...″>HTML內(nèi)容</Tag>
如 <p id=″content″>.........</p>
這樣,id content表示了一個(gè)段落。
在同一HTML文件中,除了特殊用途外,id是的。不然,錨鏈只會(huì)連接到個(gè)id所標(biāo)識(shí)的內(nèi)容。
●加錨鏈
定義好“錨”以后,將鏈接指向錨位置的鏈接形式如下:
<a href=″#id″>....</a>,即以#再加上id格式。
如:
<a href=″#chapter1″>章</a>
<a href=″#chapter2″>第二章</a>
<a href=″#chapter3″>第三章</a>
..............
站長(zhǎng)網(wǎng),站長(zhǎng)資訊
<Div id=″chapter1″>
...章內(nèi)容..
</Div>
<Div id=″chapter2″>
...第二章內(nèi)容..
</Div>
<Div id=″chapter3″>
...第三章內(nèi)容..
</Div>
●引用不同頁面內(nèi)的“錨”
可能有些朋友要問,以上加的錨鏈都是在同一個(gè)頁面之間的,如果是一個(gè)頁面中的錨鏈接到同站點(diǎn)或另一個(gè)網(wǎng)站的另一個(gè)頁面中的錨怎么辦?很簡(jiǎn)單,形式為:
<a href=″URL#id″>....</a>
如 <a href=″http://netschool.yesky.com/homepage/index.htm#block1″>指向地址:http://netschool.yesky.com/homepage/index.htm文件的部分</a>
二、鏈接的相關(guān)屬性
●用CSS樣式類改變鏈接外觀
在與網(wǎng)友們交流過程中,他們問到的有關(guān)鏈接的問題最多大概集中于:一些網(wǎng)站頁面當(dāng)鼠標(biāo)移動(dòng)時(shí)鏈接字會(huì)變顏色、字體、出現(xiàn)下劃線等,看起來很精彩,是怎么做的呢?要用到程序嗎?
答案:非也,鏈接的CSS可以解你之惑!
CSS(層疊樣式單)它主要是用來定義主頁內(nèi)容相關(guān)標(biāo)記的顯示風(fēng)格及排列等,可以針對(duì)不同的標(biāo)記定義不同的樣式類,并可以形成樣式表文件供整個(gè)網(wǎng)站的主頁文件調(diào)用,或者在某個(gè)主頁中單獨(dú)定義,這樣,可實(shí)現(xiàn)在網(wǎng)站風(fēng)格統(tǒng)一的前提下,而又各有變化,哲學(xué)中物質(zhì)的統(tǒng)一性與多樣性的對(duì)立統(tǒng)一之說可謂一語中的。在天極網(wǎng)的網(wǎng)頁陶吧欄目(http://homepage.yesky.com)中有很多關(guān)于CSS的講述,這里不再贅述,單講鏈接的幾個(gè)重要的CSS屬性:
admin5.com 版權(quán)所有 hover:當(dāng)鼠標(biāo)懸停在鏈接上方時(shí)
active:當(dāng)點(diǎn)擊鏈接時(shí)
visited:當(dāng)點(diǎn)擊鏈后
這樣構(gòu)成點(diǎn)擊鏈接的全過程:移動(dòng)到鏈接上→點(diǎn)擊→點(diǎn)擊后,我們可以在樣式表中定義三個(gè)不同的階段鏈接的外觀,形式如下:
<style>
A{
.....
}
A:hover{
.....
}
A:active{
.....
}
A:visited{
.....
}
</style>
上面,其中A{...}的定義表示鏈接在正常狀態(tài)下的顯示,這樣,我們可以用不同的樣式表CSS類型來確定一個(gè)站點(diǎn)或特定頁面的鏈接顯示特性。
以下是一個(gè)例子:
A {
font-size : 9pt;font-weight : normal;font-style : normal;color: #0066CC;text-decoration : none;
}
A:Hover {
font-size : 9pt;
font-weight : normal;
font-style : normal;
color: #0066CC;
text-decoration : underline;
}
A:Active {
font-size : 9pt;
font-weight : normal;
font-style : normal;
color:red;
text-decoration : none;
}
A:Visited {
font-size : 9pt;
font-weight : normal;
font-style : normal;
color: #0066CC;
text-decoration : none;
}
上面的例子中專門對(duì)鏈接標(biāo)記定義了相應(yīng)的樣式類,并對(duì)鏈接的幾種不同狀態(tài)對(duì)鏈接字的字體、顏色、修飾(如加下劃線)等也作了定義。
二、鏈接的相關(guān)屬性
●關(guān)于target屬性
在鏈接中,target屬性最讓人費(fèi)解。
target屬性表示鏈接在哪個(gè)游覽器窗口打開。其取值有以下幾種情況:
1._self:如<a href=″...″ target=″_self″>
該屬性值表示在當(dāng)前窗口打開所鏈接的文件,如果你不對(duì)這個(gè)屬性值進(jìn)行設(shè)置的話,則默認(rèn)為該值。
2._blank
如果你想將所鏈接的文件在新開的窗口打開,取該值。
3._parent
在講這個(gè)屬性之前,我們先要了解一下多幀結(jié)構(gòu)與浮動(dòng)幀。
多幀結(jié)構(gòu)其實(shí)是多個(gè)HTML在同一個(gè)瀏覽器窗口中同時(shí)顯示,并將其分為多個(gè)小窗口,一個(gè)幀是一個(gè)HTML顯示區(qū)。這樣,這些當(dāng)前瀏覽器窗口叫做這些子窗口的“父(parent)窗口”。在多幀結(jié)構(gòu)設(shè)置時(shí),每個(gè)幀有自己的名稱,如:
<frameset rows=″80,*″ cols=″*″ frameborder=″NO″ border=″0″ framespacing=″0″>
本文來自 admin5.com
<frame name=″top″ scrolling=″NO″ src=″...″>
<frameset cols=″80,*″ frameborder=″NO″ border=″0″ framespacing=″0″>
<frame name=″left″ noresize scrolling=″NO″ src=″....″>
<frame name=″main″ src=″....″>
</frameset>
</frameset>
在這個(gè)多幀結(jié)構(gòu)中,幀名top、left、main代表著三個(gè)小窗口,parent即為當(dāng)前多幀結(jié)構(gòu)的父窗口。
而標(biāo)記iframe所表示浮動(dòng)幀的效果如我們所說的畫中畫電視,它實(shí)際是在當(dāng)前窗口中內(nèi)嵌一個(gè)HTML頁面,而不像多幀結(jié)構(gòu)一樣,幀間內(nèi)容相互分隔。這個(gè)內(nèi)嵌頁面所在的瀏覽器窗口是它的parent,如HTML文件example.htm中有如下代碼:
<p>以下是一個(gè)內(nèi)嵌幀示例</p>。
<iframe src=″index.htm″ name=″child> </iframe>
這樣,名為child的HTML頁面內(nèi)嵌在主頁example.htm中,它的parent是當(dāng)前瀏覽器窗口。
由此,不難明白了,target屬性的_parent取值即表示鏈接文件在其父窗口中打開。
4._top
此屬性值意義與_parent類同。
5.特定窗體名,如target=″main″
了解了上述的多幀結(jié)構(gòu)以后,我們知道,每個(gè)幀可以有自己的幀名即name屬性,所以,我們可以指定鏈接的文件在指定名稱的幀里打開。如target=″main″表示標(biāo)記<a>所指向的文件在幀main里打開。
如果喜歡閱讀人民日?qǐng)?bào)網(wǎng)絡(luò)版的朋友細(xì)心的話,可以發(fā)現(xiàn),target的取值是各不相同的名稱,如數(shù)字等,并且又不是在多幀結(jié)構(gòu)里,為什么要設(shè)置target呢?有興趣的話,請(qǐng)你不妨試幾個(gè)例子效果有什么不同:
<a href=″1.htm″ target=″win″>....</a>
<a href=″2.htm″ target=″win″>....</a>
另外試一下
<a href=″1.htm″ target=″win1″>....</a>
<a href=″2.htm″ target=″win2″>....</a>
怎么樣?前一個(gè)例子中,兩個(gè)鏈接都是在同一個(gè)新開的窗口中打開,而后一例子則打開兩個(gè)新窗口。說明了什么?特定的窗口名代表著新打開的瀏覽器窗口,所以,如果幾個(gè)鏈接的target屬性值都為特定的窗口名,那么表示這些鏈接都在這個(gè)窗口中打開,不另開窗口。這樣,可很好地解決令人厭煩的點(diǎn)擊鏈接,不停地新彈窗口占用系統(tǒng)資源的情況。
筆者自己的經(jīng)驗(yàn)來說,設(shè)定target值還另有妙用,請(qǐng)大家試一下:
<a href=″1.htm″ target=″1234″>....</a>
與
<a href=″1.htm″ target=″_blank″>....</a>
并且1.htm中有一鏈接是關(guān)閉窗口的:
<a href=″javascript:window.close()″>關(guān)閉本窗口</a> //注:window.close()是調(diào)用window對(duì)象的close方法關(guān)閉本窗口。
結(jié)果是在你點(diǎn)擊“關(guān)閉本窗口”時(shí),在第二個(gè)例子中是不是出現(xiàn)“你查看的頁正在試圖關(guān)閉窗口,是否關(guān)閉本窗口?”的提示?而個(gè)例子則不會(huì)。
●給鏈接加上注釋
這在平時(shí)使用中很常見,比如當(dāng)前鏈接字比較多時(shí),只截取其中的一部分,而當(dāng)你的鼠標(biāo)移動(dòng)到鏈接字上時(shí),會(huì)出現(xiàn)一個(gè)小黃條提示,將所有的鏈接字顯示出來。實(shí)際上利用鏈接的title屬性即可實(shí)現(xiàn)。定義格式為:
<a href=″…″ title=″……″>..</a>
如:<a href=http://homepage.yeksy.com/ title=″網(wǎng)頁陶吧,國(guó)內(nèi)最cool的主頁教學(xué)站點(diǎn)″>網(wǎng)頁陶吧</a>。
三、鏈接的另幾種特殊情況
●鏈接地址形式為URL?para1=expr1&para2=expr2...
這種情況多用在運(yùn)行服務(wù)器端CGI或腳本程序(即URL所指的程序)時(shí),需要將一些參數(shù)取值傳給程序,程序再將這些參數(shù)如para1、para2等的值分解出來,這樣可從客戶端獲得信息,實(shí)現(xiàn)動(dòng)態(tài)交互功能,并能根據(jù)這些取值生成相應(yīng)的頁面,而不是我們所看到的呆板的靜態(tài)頁面。
●關(guān)于點(diǎn)擊鏈接下載
朋友對(duì)點(diǎn)擊鏈接下載文件等肯定不會(huì)陌生,實(shí)際上,對(duì)于鏈接的文件,如ZIP以及用戶端無法識(shí)別的文件,都會(huì)提示用戶下載。所以,與一般的鏈接沒有區(qū)別,另外,有一點(diǎn)要申明的是,鏈接文件不一定都要是HTML文件。
如:<a href=″http://netschool.cpcw.com/homepage/cgi/cgi.zip″>點(diǎn)擊此下載</a>
一些朋友常問點(diǎn)擊鏈接聽MP3音樂或看flash動(dòng)畫是怎么回事,實(shí)際也是將鏈接直接鏈接到這些文件,當(dāng)只有你自己的機(jī)器上安裝了相應(yīng)的軟件或控件時(shí)才不會(huì)提示下載而直接打開這些文件。
●鏈接為腳本語言語句
這種應(yīng)用相信到過Yesky舊版網(wǎng)頁陶吧的朋友很熟悉的,首頁上的鏈接都為:
javascript:openHTML(....) 形式。
鏈接可以是腳本程序,其定義格式為:
腳本語言類型:程序語句;程序語句...
其中腳本語言類型不外乎兩種:javascript與vbscript
其中程序語句包括單語句或函數(shù)引用。
如網(wǎng)頁陶吧的例子:
下面定義一個(gè)函數(shù),用來將鏈接的HTML文件在新瀏覽器窗口打開:
<script language=″javascript″>
function openHTML(url)
{
var hWnd=window.open(url,″″,″toolbar=yes,scrollbars=yes,menubar=yes,width=690,height=480,left=,top=5,status=yes″)
}
</script>
而在鏈接要引用這個(gè)函數(shù)時(shí),可以寫成
<a href=″javascript:openHTML(′http://www.yesky.com′)″>到天極網(wǎng)</a>
這樣,點(diǎn)擊時(shí)會(huì)執(zhí)行相應(yīng)的腳本程序。
●鏈接為郵件
鏈接也可以是一個(gè)郵件,當(dāng)點(diǎn)擊鏈接時(shí),自動(dòng)打開你在瀏覽器中設(shè)置的收發(fā)郵件軟件,其鏈接形式為:
<a href=″mailto:郵箱?subject=郵件主題″>..</a>
mailto:收信人郵箱;subject:郵件主題,可略。
如<a href=″mailto:hero@cpcw.com?subject=談一下主頁制作″>與主持人聯(lián)系</a>