• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 框架網(wǎng)頁設(shè)計

        本框架網(wǎng)頁的設(shè)計目標(biāo)是想在網(wǎng)頁設(shè)計時把網(wǎng)頁標(biāo)題放在頂部,并固定不動,在網(wǎng)頁的左側(cè)放置導(dǎo)航條,右邊作為網(wǎng)頁的主體顯示主要動態(tài)內(nèi)容。有了初步的想法,不妨在具體動手之前把這樣的設(shè)計想法畫出來。

        網(wǎng)站建設(shè)時,實(shí)現(xiàn)上述想法用框架技術(shù)是不錯的選擇,也可以選擇其他實(shí)現(xiàn)技術(shù)和途徑,但在網(wǎng)頁制作中需要用到腳本編程,如用<iframe>標(biāo)簽或用CSS技術(shù)等來實(shí)現(xiàn)。但作為初學(xué)者,用框架技術(shù)實(shí)現(xiàn)還是比較簡單的。主要技術(shù)參數(shù)如下:   

        ?框架集頁面寬度為816像素。   

        ?需要用到框架集嵌套技術(shù),類似表格嵌套效果。   

        ?先創(chuàng)建上下結(jié)構(gòu)的框架集,上部框架高度固定為94像素,寬為816像素,無邊框;下部框架高度為相對,寬為816像素,無邊框。   

        ?在下部框架內(nèi)嵌套框架集,嵌套框架集的左框架為固定寬度160像素,無邊框;右框架寬度為相對,邊框?yàn)槟J(rèn)。

        制作框架分頁面

        根據(jù)設(shè)計參數(shù),下一步驟需要制作各個分頁面,具體介紹如下。

        1、標(biāo)題頁(top.html)

        【操作步驟】

        第1步,用Photoshop繪制網(wǎng)頁圖像,本例圖像的大小為816×94像素。

        第2步,在工具箱中選擇【切片工具】,在【原稿】編輯窗口中根據(jù)網(wǎng)頁編輯需要切分圖像。

        第3步,選擇【文件】|【存儲為Web所用格式】命令,打開【存儲為Web所用格式】對話框,對于該對話框可以保持默認(rèn)設(shè)置,選擇保存位置,單擊【確定】按鈕保存即可。Photoshop提供的這個全自動優(yōu)化并導(dǎo)出網(wǎng)頁圖像是個非常實(shí)用的命令。

        第4步,啟動Dreamweaver,新建一個文件。選擇【文件】|【打開】命令,打開第3步輸出的網(wǎng)頁圖像,另存為top.html,要注意源圖像切分圖片保存文件夾images和top.html文件的位置關(guān)系,即要處在同一文件夾中,否則會找不到。

        第5步,在Dreamweaver編輯窗口中,把需要輸入文本或插入圖像等網(wǎng)頁元素的切片區(qū)域設(shè)置為背景顯示圖像,方法是先根據(jù)單元格插入圖像的大小,在【屬性】面板中設(shè)置該單元格的大小,然后復(fù)制插入圖片路徑,再選中單元格,在【屬性】面板中把該路徑復(fù)制到【背景】文本框中。

        第6步,在最后一行單元格中嵌入一個JavaScript腳本文件,用來制作動態(tài)下拉菜單。

        2. 導(dǎo)航頁(left.html)

        【操作步驟】

        第1步,啟動Dreamweaver,新建文檔,保存為left.html。選擇【修改】|【頁面屬性】命令,打開【頁面屬性】對話框,設(shè)置頁面背景色為淺藍(lán)色,靠近左上角對齊網(wǎng)頁。

        第2步,插入一個2行1列的表格,設(shè)置寬為60像素。

        第3步,在表格的第1行中插入標(biāo)題圖片,在第2行中插入一個4行2列的表格,寬度為100%。再根據(jù)設(shè)計輸入文本和提示小圖標(biāo)。

        第4步,選中第2~4行所有單元格,如圖3.26所示,切換到【代碼】視圖,會高亮顯示選中單元格的代碼,并在這段代碼前輸入“<tbodyid="Content4" style="display:none;">”,在后面輸入“</tbody>”。

        第5步,同時,在<head>和</head>之間輸入一段JavaScript腳本,用來控制第2~4行單元格的顯示,實(shí)際上該代碼主要用來控制<tbody>和</tbody>標(biāo)簽中間包含的所有表格和元素顯示和隱藏。

        代碼如下:

        <script>

        //控制第一個表格顯隱函數(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";    

                  }

        }

        //控制最后一個表格顯隱函數(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è)計】視圖,選中第1行單元格,在選中內(nèi)代碼上面的<tr>標(biāo)簽中增加腳本控制腳本:onMouseUp="turnit(Content1,Img1,icon1);",經(jīng)過上面操作就可以實(shí)現(xiàn)動態(tài)折疊表格效果。

        第7步,以同樣的方式制作中間表格和最后一個表格的動態(tài)效果,多個表格疊加在一起就形成了導(dǎo)航菜單。要注意各個表格由于所引用的圖標(biāo)不同,所以事件引用的函數(shù)也不同,見源代碼中的注釋 。

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>