網站首頁 語言 會計 網際網路計算機 醫學 學歷 職場 文藝體育 範文
當前位置:學識谷 > 設計製作 > 網頁設計

Dreamweaver使用教程

欄目: 網頁設計 / 釋出於: / 人氣:9.03K

Dreamweaver用表格構建完整的頁面

Dreamweaver使用教程

一網頁頂部(一般包括圖示、廣告、導航選單)

1、建立一個1行2列,寬為760畫素,邊框及邊距均為0的表格。

2、選中表格,設定排列方式為居中對齊,背景色為#3366CC。

3、將游標置於左邊單元格中,設定其水平排列為左對齊,垂直排列為頂端對齊,然後插入一張影象,一般在此插入的是網站的圖示,即logo。

4、將游標置於右邊單元格中,設定其寬度為500,水平排列為居中對齊,垂直排列為中間,然後插入影象,一般是網頁廣告,即banner。

5、將游標置於剛完成的表格之後,插入/表格,建立一個1行1列,寬為760畫素,邊框及邊距均為0的表格。

6、選中剛建立的表格,設定排列方式為居中對齊,背景色為#005173。

7、在該表格中依次插入多個影象,作為導航條選單。

二網頁中部(左邊欄目列表、中間網站新聞、右邊欄目列表)

1、 在導航條表格後面,插入/表格,建立一個1行3列,寬為760畫素,邊框及邊距均為0的表格。並設定排列方式為居中對齊,背景色為#FFFFFFF。

2、 將游標置於左邊單元格中,設定其寬度為18%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入一張影象,插入一個導航條。

3、 將游標置於剛插入的圖片後,插入/表格,插入一個12行1列,寬為90%的表格。設定其單元格間距為1,背景色為#CCCCCC。

4、 將游標放在表格第一個單元中,設定其高為20,背景色為#FFFFFF。插入/影象,插入一個導航文字前面的小點。同樣設定其他11個單元格,這樣左邊的欄目分類列表就完成了。

5、 將游標置於主體表格的.中間單元格中,設定其寬度為66%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入/影象,插入一個導航條。

6、 將游標置於影象後,插入/表格,插入一個4行1列,寬為95%的表格。設定其單元格間距為1,背景色為#CCCCCC。

7、 將游標置於表格的第一個單元格中,拖動滑鼠,將4個單元格都選中,設定高為60,背景色為#FFFFFF。

8、 將游標置於主體表格右邊的單元格中,設定其寬度為16%,水平排列為居中對齊,垂直排列為頂端對齊,插入/影象,插入一個導航條。

9、 將游標置於影象後,插入/表格,插入一個7行一列,寬為90%的表格。設定其間距為1,背景色為#CCCCCC。

10、按住Ctrl鍵,用滑鼠點選剛插入的表格的第1、3、5、7單元格,然後設定它們的高為55,背景色為#FFFFFF。

11、選中第2、4、6單元格,設定其高為6,背景色為#FFFFFF。

12、切換到原始碼視窗,將第2、4、6單元格中的空格符號“ ”刪除。

三網頁底部(一般包括版權資訊及其他相關內容)

1、 將游標置於主體表格後,插入/表格,建立一個2行2列,寬為760畫素,邊框及邊距均為0的表格。

2、 選中表格,設定排列方式為居中對齊,背景色為#3366CC。

3、 將游標置於表格第1行的左邊單元格中,設定其寬度為50%,水平排列為預設,垂直排列為基線,背景色為#FFFFFF,然後輸入版權資訊,內容顏色隨便。

4、 將游標置於表格第1行右邊單元格中,插入/影象,插入一個圓角影象,在它後面輸入Email字樣,設定其大小和顏色為1和#FFFFFF。

5、 插入/表單物件/文字域,插入一個文字域,寬度可以隨意。

6、 插入/影象,插入一個GO的影象。

7、 設定頁屬性。點選選單修改/頁面屬性,在標題一欄中輸入標題,並選擇背景影象,將頂部邊界設為0。

***將整個網頁分部分放到不同的表格中組合而成,還可以加快瀏覽器讀取頁面的時間。;因為瀏覽器是讀完整個表格後才顯示內容的,所以最好不要框在整個一個表格中。

Dreamweaver在頁面中播放聲音

1、在完成全頁面以後,如果要為該頁新增背景音樂,注意背景音樂一般是*.midi檔案,這樣的聲音檔案十分小,易於快速下載,其他格式不適合作為背景音樂。

2、在頁面中所有表格之外,(注意此時編輯視窗左下方的標籤選擇欄中僅顯示這一項,或是在左下角點一下,這樣才能保證這個行為是新增在整個頁面上的)。點選行為視窗上的“+”按鈕,(或用選單視窗/行為,開啟行為視窗。)

3、從彈出選單中選擇“播放聲音”。開啟一個對話方塊。

4、在這個對話方塊裡用“瀏覽”選擇要播放的聲音,並確定。

5、這時行為面板上自動顯示了事件為onload,動作為播放聲音。點選這一行,中間出現一個按鈕。點選按鈕,可以設定這個聲音在什麼事件下播放。可以選擇“顯示事件”/“IE5.0。

6、我們常用的如Onload(當頁面載入時)、OnClick(單擊滑鼠)、OnMouseOver(滑鼠移到物件上)、OnUnload(當關閉頁面時)等。

7、該行為也可以設定在圖片上、文字連結上。在文字連結上播放聲音之前,先為文字新增一個空連結,即選中文字,在連結一格里輸入一個“#”符號。

Dreamweaver讓插入的flash動畫變透明

1、當網頁上已經有背景,或是想要在一張圖片上再插入flash動畫,而flash動畫本身也有背景色,所以會影響美觀,這時我們要把它做成透明動畫。

2、如在頁面上插入一張影象。

3、在影象上插入一個層,在層中插入好所需要的flash動畫。

4、選中flash動畫,在屬性面板中點選“引數”按鈕。

5、在“引數”的左面一格輸入“wmode”。在右面“值”一格輸入“transparent”。

Dreamweaver在頁面中運用flash動畫

1、點選插入中的Flash按鈕,即可為頁面插入一個動畫。也可以選選單插入/媒體/Flash來完成這一步。

2、選中已插入的動畫,看屬性面板。這裡可以設定它的寬、高,也可以通過拖動來改變大小。

3、可以在這裡點選“播放”來預覽動畫。

Dreamweaver製作滾動公告牌

1、在頁面上插入一個層,然後為層設定一個背景,作為公告版的框架。

2、然後在建立的層中插入巢狀層,將巢狀層移動到父層的下方。

3、在巢狀層中輸入文字,並將其居中排列。

4、開啟時間軸面板,將子層作為物件新增到面板中。

5、為子層建立一個向上移動的路徑,將其移動到父層的上方。

6、拖動最後一關鍵幀,增長動畫時間,然後勾選“自動播放”和“迴圈”兩項。

7、選定父層,在其屬性面板中將“溢位”屬性設定為“hidden”。

Dreamweaver瞭解時間軸

1、點選選單中的插入/層,插入一個層。

2、在層中插入圖片,如一張飛機的圖片。(這裡的圖片也可以是一張小動畫的.gif影象)

3、點選選單中的視窗/其他/時間軸,開啟時間軸視窗。

4、選中頁面上建立的層,用滑鼠按住層左上角的小方框圖示,將層拖放到時間軸的第1幀中。這時自動建立了一個長度為15幀的時間軸。

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

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

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

8、可以點中第15幀,右鍵選“增加關鍵幀”,在選中第15幀的狀態下,拖動層到頁面中下方。

9、勾選“自動播放”項。

Tags:Dreamweaver