本框架網(wǎng)頁(yè)的設計目標是想在網(wǎng)頁(yè)設計時(shí)把網(wǎng)頁(yè)標題放在頂部，并固定不動(dòng)，在網(wǎng)頁(yè)的左側放置導航條，右邊作為網(wǎng)頁(yè)的主體顯示主要動(dòng)態(tài)內容。有了初步的想法，不妨在具體動(dòng)手之前把這樣的設計想法畫(huà)出來(lái)。
在網(wǎng)站建設時(shí)，實(shí)現上述想法用框架技術(shù)是不錯的選擇，也可以選擇其他實(shí)現技術(shù)和途徑，但在網(wǎng)頁(yè)制作中需要用到腳本編程，如用<iframe>標簽或用CSS技術(shù)等來(lái)實(shí)現。但作為初學(xué)者，用框架技術(shù)實(shí)現還是比較簡(jiǎn)單的。主要技術(shù)參數如下：
?框架集頁(yè)面寬度為816像素。
?需要用到框架集嵌套技術(shù)，類(lèi)似表格嵌套效果。
?先創(chuàng )建上下結構的框架集，上部框架高度固定為94像素，寬為816像素，無(wú)邊框；下部框架高度為相對，寬為816像素，無(wú)邊框。
?在下部框架內嵌套框架集，嵌套框架集的左框架為固定寬度160像素，無(wú)邊框；右框架寬度為相對，邊框為默認。
根據設計參數，下一步驟需要制作各個(gè)分頁(yè)面，具體介紹如下。
1、標題頁(yè)（top.html）
【操作步驟】
第1步，用Photoshop繪制網(wǎng)頁(yè)圖像，本例圖像的大小為816×94像素。
第2步，在工具箱中選擇【切片工具】，在【原稿】編輯窗口中根據網(wǎng)頁(yè)編輯需要切分圖像。
第3步，選擇【文件】|【存儲為Web所用格式】命令，打開(kāi)【存儲為Web所用格式】對話(huà)框，對于該對話(huà)框可以保持默認設置，選擇保存位置，單擊【確定】按鈕保存即可。Photoshop提供的這個(gè)全自動(dòng)優(yōu)化并導出網(wǎng)頁(yè)圖像是個(gè)非常實(shí)用的命令。
第4步，啟動(dòng)Dreamweaver，新建一個(gè)文件。選擇【文件】|【打開(kāi)】命令，打開(kāi)第3步輸出的網(wǎng)頁(yè)圖像，另存為top.html，要注意源圖像切分圖片保存文件夾images和top.html文件的位置關(guān)系，即要處在同一文件夾中，否則會(huì )找不到。
第5步，在Dreamweaver編輯窗口中，把需要輸入文本或插入圖像等網(wǎng)頁(yè)元素的切片區域設置為背景顯示圖像，方法是先根據單元格插入圖像的大小，在【屬性】面板中設置該單元格的大小，然后復制插入圖片路徑，再選中單元格，在【屬性】面板中把該路徑復制到【背景】文本框中。
第6步，在最后一行單元格中嵌入一個(gè)JavaScript腳本文件，用來(lái)制作動(dòng)態(tài)下拉菜單。
2. 導航頁(yè)（left.html）
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建文檔，保存為left.html。選擇【修改】|【頁(yè)面屬性】命令，打開(kāi)【頁(yè)面屬性】對話(huà)框，設置頁(yè)面背景色為淺藍色，靠近左上角對齊網(wǎng)頁(yè)。
第2步，插入一個(gè)2行1列的表格，設置寬為60像素。
第3步，在表格的第1行中插入標題圖片，在第2行中插入一個(gè)4行2列的表格，寬度為100%。再根據設計輸入文本和提示小圖標。
第4步，選中第2~4行所有單元格，如圖3.26所示，切換到【代碼】視圖，會(huì )高亮顯示選中單元格的代碼，并在這段代碼前輸入“<tbodyid="Content4" style="display:none;">”，在后面輸入“</tbody>”。
第5步，同時(shí)，在<head>和</head>之間輸入一段JavaScript腳本，用來(lái)控制第2~4行單元格的顯示，實(shí)際上該代碼主要用來(lái)控制<tbody>和</tbody>標簽中間包含的所有表格和元素顯示和隱藏。
代碼如下：
<script>
//控制第一個(gè)表格顯隱函數
function turnit(ss,ii,aa){
if (ss.style.display=="none"){
ss.style.display="";
ii.src="images/_0.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+0.gif";
aa.src="images/icon.gif";
}
}
//控制最后一個(gè)表格顯隱函數
function turnit1(ss,ii,aa){
if (ss.style.display=="none"){
ss.style.display="";
ii.src="images/_.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+2.gif";
aa.src="images/icon.gif";
}
}
//控制中間表格顯隱函數
function turnit2(ss,ii,aa){
if (ss.style.display=="none") {
ss.style.display="";
ii.src="images/_.gif";
aa.src="images/icon01.gif"; }else{
ss.style.display="none";
ii.src="images/+.gif";
aa.src="images/icon.gif";
}
}
</script>
第6步，切換到【設計】視圖，選中第1行單元格，在選中內代碼上面的<tr>標簽中增加腳本控制腳本：onMouseUp="turnit(Content1,Img1,icon1);"，經(jīng)過(guò)上面操作就可以實(shí)現動(dòng)態(tài)折疊表格效果。
第7步，以同樣的方式制作中間表格和最后一個(gè)表格的動(dòng)態(tài)效果，多個(gè)表格疊加在一起就形成了導航菜單。要注意各個(gè)表格由于所引用的圖標不同，所以事件引用的函數也不同，見(jiàn)源代碼中的注釋 。
當前文章標題：框架網(wǎng)頁(yè)設計
當前URL：http://amzcoolest.com/news/wzzz/3074.html
