之前重點(diǎn)介紹了網(wǎng)頁(yè)設(shè)計(jì)時(shí)的兩個(gè)關(guān)鍵頁(yè)面的制作。完成框架分頁(yè)的設(shè)計(jì)工作后，下面只需要?jiǎng)?chuàng)建一個(gè)框架集頁(yè)面把這些分頁(yè)面合成在一起即可。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。
第2步，切換到【代碼】視圖，輸入下面代碼，創(chuàng)建一個(gè)嵌套框架集。
<html >
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<title>框架網(wǎng)頁(yè)制作</title>
</head>
<frameset rows="94,*" framespacing="0"
frameborder="no" border="0" bordercolor="0">
<frame src="top.html" frameborder="no"
scrolling="no" noresize="noresize"
marginwidth="0" marginheight="0" id="top">
<frameset cols="160,*" framespacing="0"
frameborder="no" border="0" bordercolor="0">
<frame src="left.html" name="left" frameborder="no" scrolling="no" noresize="noresize" marginwidth="0" marginheight="0" id="left">
<frame src="main.html" name="main" frameborder="no" noresize="noresize" marginwidth="0" marginheight="0" id="main">
</frameset>
</frameset>
<noframes>
<body>
<h1>當(dāng)前瀏覽器不支持框架頁(yè)。
</h1></body>
</noframes>
</html>
第3步，保存框架頁(yè)，按F12鍵即可預(yù)覽頁(yè)面。
在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，對(duì)鏈接應(yīng)用樣式最容易的方式是使用類(lèi)型選擇器。
例如，以下規(guī)則將使所有鏈接顯示為紅色。
a{
color:red;
}
但是，在網(wǎng)頁(yè)制作時(shí)，錨可以作為內(nèi)部引用，也可以作為外部鏈接，所以使用類(lèi)型選擇器不總是理想的。例如，下面的第一個(gè)錨包含一個(gè)片段標(biāo)識(shí)符，當(dāng)用戶(hù)單擊這個(gè)錨時(shí)，頁(yè)面將跳到第二個(gè)錨的位置。
<p><a href="#mainContent">跳轉(zhuǎn)到標(biāo)題位置</a></p>
<h1><a name="mainContent"> </a></h1>
雖然只想讓真正的鏈接變成紅色，但是標(biāo)題的內(nèi)容也成了紅色的。為了避免這個(gè)問(wèn)題，CSS提供了兩個(gè)特殊的選擇器，即鏈接偽類(lèi)選擇器。 ?:link偽類(lèi)選擇器用來(lái)尋找沒(méi)有被訪(fǎng)問(wèn)過(guò)的鏈接。
?:visited偽類(lèi)選擇器用來(lái)尋找被訪(fǎng)問(wèn)過(guò)的鏈接。
【示例】在下面的示例中定義兩個(gè)樣式，設(shè)置所有沒(méi)有被訪(fǎng)問(wèn)過(guò)的鏈接將是藍(lán)色的，所有被訪(fǎng)問(wèn)過(guò)的鏈接將是綠色的。
a:link{ color:blue;}
a:visited{ color:green;}
可以用來(lái)對(duì)鏈接應(yīng)用樣式的另外兩個(gè)選擇器是:hover和:active動(dòng)態(tài)偽類(lèi)選擇器。
?:hover動(dòng)態(tài)偽類(lèi)選擇器用來(lái)尋找鼠標(biāo)停留處的元素。
?:active動(dòng)態(tài)偽類(lèi)選擇器用來(lái)尋找被激活的元素。對(duì)于鏈接來(lái)說(shuō)，激活發(fā)生在鏈接被單擊時(shí)。所以，在下面的示例中，當(dāng)鼠標(biāo)停留在鏈接上或單擊鏈接時(shí)鏈接將變成紅色。
a:hover,a:active { color:red;}
很多設(shè)計(jì)師最初使用這些選擇器的目的之一是去掉鏈接的下劃線(xiàn)，然后在鼠標(biāo)停留在鏈接上或單擊鏈接時(shí)打開(kāi)下劃線(xiàn)。實(shí)現(xiàn)的方法是將未訪(fǎng)問(wèn)和已訪(fǎng)問(wèn)的鏈接的text-decoration屬性設(shè)置為none，將鼠標(biāo)停留和激活的鏈接的text-decoration屬性設(shè)置為underline。
a:link,a:visited { text-decoration:none;}
a:hover,a:acriove { text-decoration:undexline;}
在上面示例中，選擇器的排列是非常重要的。如果順序反過(guò)來(lái)，鼠標(biāo)停留和激活樣式就不起作用了。
a:hover,a:active { text-decoration:undexline;}
a:link,a:visited { text-decoration:none;}
這是由層疊造成的，當(dāng)兩個(gè)規(guī)則具有相同的特殊性時(shí)，后定義的規(guī)則優(yōu)先。在這個(gè)示例中，兩個(gè)規(guī)則具有相同的特殊性，所以:link和visited樣式將覆蓋:hover和:active樣式。為了確保不會(huì)發(fā)生這種情況，最好按照以下順序應(yīng)用鏈接樣式。
?a:link
?a:visited
?a:hover
?a:active