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