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