Dreamweaver使用教程

(資料圖片)

Dreamweaver用表格構(gòu)建完整的頁面

一網(wǎng)頁頂部（一般包括圖標(biāo)、廣告、導(dǎo)航菜單）

1、創(chuàng)建一個(gè)1行2列，寬為760像素，邊框及邊距均為0的表格。

2、選中表格，設(shè)置排列方式為居中對齊，背景色為#3366CC。

3、將光標(biāo)置于左邊單元格中，設(shè)置其水平排列為左對齊，垂直排列為頂端對齊，然后插入一張圖像，一般在此插入的是網(wǎng)站的圖標(biāo)，即logo。

4、將光標(biāo)置于右邊單元格中，設(shè)置其寬度為500，水平排列為居中對齊，垂直排列為中間，然后插入圖像，一般是網(wǎng)頁廣告，即banner。

5、將光標(biāo)置于剛完成的表格之后，插入/表格，創(chuàng)建一個(gè)1行1列，寬為760像素，邊框及邊距均為0的表格。

6、選中剛創(chuàng)建的表格，設(shè)置排列方式為居中對齊，背景色為#005173。

7、在該表格中依次插入多個(gè)圖像，作為導(dǎo)航條菜單。

二網(wǎng)頁中部（左邊欄目列表、中間網(wǎng)站新聞、右邊欄目列表）

1、 在導(dǎo)航條表格后面，插入/表格，創(chuàng)建一個(gè)1行3列，寬為760像素，邊框及邊距均為0的表格。并設(shè)置排列方式為居中對齊，背景色為#FFFFFFF。

2、 將光標(biāo)置于左邊單元格中，設(shè)置其寬度為18%，水平排列為居中對齊，垂直排列為頂端對齊，然后插入一張圖像，插入一個(gè)導(dǎo)航條。

3、 將光標(biāo)置于剛插入的圖片后，插入/表格，插入一個(gè)12行1列，寬為90%的表格。設(shè)置其單元格間距為1，背景色為#CCCCCC。

4、 將光標(biāo)放在表格第一個(gè)單元中，設(shè)置其高為20，背景色為#FFFFFF。插入/圖像，插入一個(gè)導(dǎo)航文字前面的小點(diǎn)。同樣設(shè)置其他11個(gè)單元格，這樣左邊的欄目分類列表就完成了。

5、 將光標(biāo)置于主體表格的中間單元格中，設(shè)置其寬度為66%，水平排列為居中對齊，垂直排列為頂端對齊，然后插入/圖像，插入一個(gè)導(dǎo)航條。

6、 將光標(biāo)置于圖像后，插入/表格，插入一個(gè)4行1列，寬為95%的表格。設(shè)置其單元格間距為1，背景色為#CCCCCC。

7、 將光標(biāo)置于表格的第一個(gè)單元格中，拖動鼠標(biāo)，將4個(gè)單元格都選中，設(shè)置高為60，背景色為#FFFFFF。

8、 將光標(biāo)置于主體表格右邊的單元格中，設(shè)置其寬度為16%，水平排列為居中對齊，垂直排列為頂端對齊，插入/圖像，插入一個(gè)導(dǎo)航條。

9、 將光標(biāo)置于圖像后，插入/表格，插入一個(gè)7行一列，寬為90%的表格。設(shè)置其間距為1，背景色為#CCCCCC。

10、按住Ctrl鍵，用鼠標(biāo)點(diǎn)擊剛插入的表格的第1、3、5、7單元格，然后設(shè)置它們的高為55，背景色為#FFFFFF。

11、選中第2、4、6單元格，設(shè)置其高為6，背景色為#FFFFFF。

12、切換到源代碼窗口，將第2、4、6單元格中的空格符號“ ”刪除。

三網(wǎng)頁底部（一般包括版權(quán)信息及其他相關(guān)內(nèi)容）

1、 將光標(biāo)置于主體表格后，插入/表格，創(chuàng)建一個(gè)2行2列，寬為760像素，邊框及邊距均為0的表格。

2、 選中表格，設(shè)置排列方式為居中對齊，背景色為#3366CC。

3、 將光標(biāo)置于表格第1行的左邊單元格中，設(shè)置其寬度為50%，水平排列為默認(rèn)，垂直排列為基線，背景色為#FFFFFF，然后輸入版權(quán)信息，內(nèi)容顏色隨便。

4、 將光標(biāo)置于表格第1行右邊單元格中，插入/圖像，插入一個(gè)圓角圖像，在它后面輸入Email字樣，設(shè)置其大小和顏色為1和#FFFFFF。

5、 插入/表單對象/文本域，插入一個(gè)文本域，寬度可以隨意。

6、 插入/圖像，插入一個(gè)GO的圖像。

7、 設(shè)置頁屬性。點(diǎn)擊菜單修改/頁面屬性，在標(biāo)題一欄中輸入標(biāo)題，并選擇背景圖像，將頂部邊界設(shè)為0。

***將整個(gè)網(wǎng)頁分部分放到不同的表格中組合而成，還可以加快瀏覽器讀取頁面的時(shí)間。；因?yàn)闉g覽器是讀完整個(gè)表格后才顯示內(nèi)容的，所以最好不要框在整個(gè)一個(gè)表格中。

Dreamweaver在頁面中播放聲音

1、在完成全頁面以后，如果要為該頁添加背景音樂，注意背景音樂一般是*.midi文件，這樣的"聲音文件十分小，易于快速下載，其他格式不適合作為背景音樂。

2、在頁面中所有表格之外，（注意此時(shí)編輯窗口左下方的標(biāo)簽選擇欄中僅顯示這一項(xiàng)，或是在左下角點(diǎn)一下，這樣才能保證這個(gè)行為是添加在整個(gè)頁面上的）。點(diǎn)擊行為窗口上的“+”按鈕，（或用菜單窗口/行為，打開行為窗口。）

3、從彈出菜單中選擇“播放聲音”。打開一個(gè)對話框。

4、在這個(gè)對話框里用“瀏覽”選擇要播放的聲音，并確定。

5、這時(shí)行為面板上自動顯示了事件為onload，動作為播放聲音。點(diǎn)擊這一行，中間出現(xiàn)一個(gè)按鈕。點(diǎn)擊按鈕，可以設(shè)置這個(gè)聲音在什么事件下播放。可以選擇“顯示事件”/“IE5.0。

6、我們常用的如Onload（當(dāng)頁面載入時(shí)）、OnClick（單擊鼠標(biāo)）、OnMouseOver（鼠標(biāo)移到對象上）、OnUnload(當(dāng)關(guān)閉頁面時(shí))等。

7、該行為也可以設(shè)置在圖片上、文字鏈接上。在文字鏈接上播放聲音之前，先為文字添加一個(gè)空鏈接，即選中文字，在鏈接一格里輸入一個(gè)“#”符號。

Dreamweaver讓插入的flash動畫變透明

1、當(dāng)網(wǎng)頁上已經(jīng)有背景，或是想要在一張圖片上再插入flash動畫，而flash動畫本身也有背景色，所以會影響美觀，這時(shí)我們要把它做成透明動畫。

2、如在頁面上插入一張圖像。

3、在圖像上插入一個(gè)層，在層中插入好所需要的flash動畫。

4、選中flash動畫，在屬性面板中點(diǎn)擊“參數(shù)”按鈕。

5、在“參數(shù)”的左面一格輸入“wmode”。在右面“值”一格輸入“transparent”。

Dreamweaver在頁面中運(yùn)用flash動畫

1、點(diǎn)擊插入中的Flash按鈕，即可為頁面插入一個(gè)動畫。也可以選菜單插入/媒體/Flash來完成這一步。

2、選中已插入的動畫，看屬性面板。這里可以設(shè)置它的寬、高，也可以通過拖動來改變大小。

3、可以在這里點(diǎn)擊“播放”來預(yù)覽動畫。

Dreamweaver制作滾動公告牌

1、在頁面上插入一個(gè)層，然后為層設(shè)置一個(gè)背景，作為公告版的框架。

2、然后在創(chuàng)建的層中插入嵌套層，將嵌套層移動到父層的下方。

3、在嵌套層中輸入文本，并將其居中排列。

4、打開時(shí)間軸面板，將子層作為對象添加到面板中。

5、為子層創(chuàng)建一個(gè)向上移動的路徑，將其移動到父層的上方。

6、拖動最后一關(guān)鍵幀，增長動畫時(shí)間，然后勾選“自動播放”和“循環(huán)”兩項(xiàng)。

7、選定父層，在其屬性面板中將“溢出”屬性設(shè)置為“hidden”。

Dreamweaver了解時(shí)間軸

1、點(diǎn)擊菜單中的插入/層，插入一個(gè)層。

2、在層中插入圖片，如一張飛機(jī)的圖片。（這里的圖片也可以是一張小動畫的.gif圖像）

3、點(diǎn)擊菜單中的窗口/其他/時(shí)間軸，打開時(shí)間軸窗口。

4、選中頁面上創(chuàng)建的層，用鼠標(biāo)按住層左上角的小方框圖標(biāo)，將層拖放到時(shí)間軸的第1幀中。這時(shí)自動創(chuàng)建了一個(gè)長度為15幀的時(shí)間軸。

5、選中時(shí)間軸上的第1幀，將頁面中的層拖放到頁左上角，即動畫開始時(shí)的位置。

6、選中時(shí)間軸上第15幀，可以拖動該幀至任意長度，如30幀。

7、選中第30幀，將層拖放到頁面的右下方，此時(shí)窗口中顯示出層從第1幀到第30幀的運(yùn)動軌跡。(此時(shí)運(yùn)動為直線)

8、可以點(diǎn)中第15幀，右鍵選“增加關(guān)鍵幀”，在選中第15幀的狀態(tài)下，拖動層到頁面中下方。

9、勾選“自動播放”項(xiàng)。