- 相關(guān)推薦
Dreamweaver如何用框架建立網(wǎng)站
有時(shí)看到一些論壇，左邊是每個(gè)討論區(qū)的名稱，點(diǎn)擊任意一個(gè)討論區(qū)就可以在右部區(qū)域中看見相應(yīng)討論區(qū)的內(nèi)容，不過左右部分是獨(dú)立顯示的，比如拖動(dòng)左邊的滾動(dòng)條不會(huì)影響右側(cè)的顯示效果。其實(shí)這是在頁面中利用了框架技術(shù)，因此可以把瀏覽器的顯示空間分割為幾個(gè)部分，每個(gè)部分都獨(dú)立顯示網(wǎng)頁內(nèi)容。而且把幾個(gè)框架結(jié)合在一起構(gòu)成框架集，能夠讓頁面具有更為豐富的效果。
效果說明
先建立兩個(gè)頁面，分別為“ myphoto.htm ”、“ mydiary.htm ”。前一個(gè)是相冊頁面，后一個(gè)是日記頁面。再建立一個(gè)含有框架的頁面，并添加導(dǎo)航欄。
創(chuàng)作思想
打開 Dreamweaver MX 2004 軟件新建兩個(gè)頁面，在左邊輸入導(dǎo)航文字：“網(wǎng)站首頁、我的日記、我的相冊”，在每個(gè)相對(duì)應(yīng)的頁面輸入相對(duì)應(yīng)的文字，比如網(wǎng)站首頁鏈接的頁面內(nèi)容，就輸入“我的網(wǎng)站首頁”。再建立一個(gè)新頁面，單擊【布局】中的框架圖標(biāo)，建立左右框架，然后保存頁面，在左框架建立網(wǎng)站導(dǎo)航欄，在右框架隨便輸入文字，接著再次保存頁面。
一、創(chuàng)建框架和框架集
第一步：在Dreamweaver MX 2004中新建一個(gè)頁面，運(yùn)行“View→Visual Aids→Frame Borders”命令之后可以看見編輯窗口中出現(xiàn)一個(gè)邊框，用鼠標(biāo)點(diǎn)擊邊框之后可以看見虛線框，說明新建的頁面中已經(jīng)附帶了框架。 第二步：按下“Alt”按鍵，用鼠標(biāo)拖拽邊框，松開鼠標(biāo)之后就可以把窗口一分為二，這樣就把頁面分為兩個(gè)邊框。比如拖拽左右邊框可以把窗口分為左右兩個(gè)部分，而拖拽上下邊框可以把窗口分為上下兩個(gè)部分。另外，窗口的四個(gè)角也可以拖拽，這樣可以直接把窗口分為四個(gè)區(qū)域(如圖1)。當(dāng)窗口分割為幾個(gè)框架之后，每個(gè)框架都可以作為獨(dú)立的網(wǎng)頁進(jìn)行編輯，也可以直接把某個(gè)已經(jīng)存在的頁面賦給一個(gè)框架。
第三步：框架允許嵌套，比如要?jiǎng)?chuàng)建圖2所示的框架，可以先通過上述的方法水平一分為二，但是接著不能直接拖拽邊框，否則會(huì)得到圖1所示的框架。正確的方法是先在右下角的框架面板中點(diǎn)擊右部的框架，然后再按下“Alt”按鈕拖拽邊框。
小提示：如果邊框拖拽錯(cuò)了，只要用鼠標(biāo)把需要?jiǎng)h除的線拖拽到父框架的邊框上即可刪除它。
二、編輯框架
頁面中經(jīng)常混有框架和框架集，選取不同對(duì)象可以進(jìn)行不同的屬性設(shè)置。
第一步：框架集的屬性。選中框架集之后可以看見屬性對(duì)象面板(如圖3)，其中“Border”一項(xiàng)可以設(shè)定是否顯示邊框，“Border Width”一項(xiàng)可以設(shè)定邊框?qū)挾龋?ldquo;Border Color”可以設(shè)定邊框的顏色。另外還可以設(shè)置每個(gè)邊框的尺寸，此時(shí)在面板右邊的縮略圖中選定一行或者一列，然后在它旁邊的“Alue”輸入框中輸入數(shù)值，并且選擇像素或者百分比作為單位即可。
第二步：框架的屬性。如果在框架面板中選擇任意一個(gè)框架，在框架面板中被選中的框架會(huì)有黑色的邊框顯示，這時(shí)就可以在屬性面板中進(jìn)行相應(yīng)的設(shè)置了(如圖4)。比如在此可以通過“Src”地址欄設(shè)置框架中的網(wǎng)頁文件，“Scroll”為是否加入滾動(dòng)條，“Border”可以決定是否顯示邊框，“No resize”允許在瀏覽器是改變框架大小，另外“Margin Width”和“Margin Height”分別設(shè)置邊界的寬度和高度來決定框架中內(nèi)容和邊框的距離。
第三步：輸入框架中的內(nèi)容。用鼠標(biāo)點(diǎn)擊任意一個(gè)框架之后就可以像正常編輯頁面一樣插入各種文本內(nèi)容、圖片、Flash動(dòng)畫和背景音樂等網(wǎng)頁元素。
其實(shí)利用框架能夠?qū)W(wǎng)頁布局進(jìn)行合理規(guī)劃，尤其在設(shè)計(jì)網(wǎng)頁初期更顯得格外重要，因此需要大家在日常使用中多加練習(xí)，這對(duì)搭建一個(gè)優(yōu)秀的網(wǎng)站可是大有裨益的!
【Dreamweaver如何用框架建立網(wǎng)站】相關(guān)文章：
如何用DreamWeaver面板定制網(wǎng)站的顏色08-09
如何用Dreamweaver實(shí)現(xiàn)網(wǎng)站批量更新06-09
Dreamweaver框架的使用技巧歸納02-23
如何用Dreamweaver設(shè)計(jì)網(wǎng)頁05-06
如何用Dreamweaver制作網(wǎng)頁模板08-15