dreamweaver實例教學30例

1、-. z.Dreamweaver實例教學目 錄-. z.實例1 HYPERLINK l 文字型1 站點的建立實例2 HYPERLINK l 文字型2 布局表格實例3 HYPERLINK l 文字型3 層的運用實例4 HYPERLINK l 文字型4 顯示隱實藏圖層實例5 HYPERLINK l 文字型5 插入背景音樂實例6 HYPERLINK l 文字型6 插入背景圖像實例7 HYPERLINK l 文字型7 文本超實例8 HYPERLINK l 文字型8 圖像熱點實例9 HYPERLINK l 文字型9 彈出信息實例10 HYPERLINK l 文字型10 自動跳轉(zhuǎn)實例11 HYPERLIN

2、K l 文字型11 創(chuàng)立交換圖實例12 HYPERLINK l 文字型12 跳轉(zhuǎn)菜單實例13 HYPERLINK l 文字型13插入FLASH文本實例14 HYPERLINK l 文字型14 插入FLASH按鈕實例15 HYPERLINK l 文字型15 插入FLASH動畫實例16 HYPERLINK l 文字型16 插入視頻實例17 HYPERLINK l 文字型17 顯示彈出式菜單實例18 HYPERLINK l 文字型18 框架的使用實例19 HYPERLINK l 文字型19 創(chuàng)立相冊集實例20 HYPERLINK l 文字型20 插入按鈕實例21 HYPERLINK l 文字型21

3、頁面配色方案實例22 HYPERLINK l 文字型22 CSS的使用實例23 HYPERLINK l 文字型23 自動格式化表格實例24 HYPERLINK l 文字型24 使用表格間隔圖像實例25 HYPERLINK l 文字型25 單元格自動延伸實例26 HYPERLINK l 文字型26 熾熱文字實例27 HYPERLINK l 文字型27 顯示當前日期實例28 HYPERLINK l 文字型28 顯示登陸時間實例29 HYPERLINK l 文字型29 狀態(tài)欄中跳動的文字實例30 HYPERLINK l 文字型30 左右移動的圖片-. z.實例1 站點的建立目的：了解和掌握怎么建一個

4、,這是做的第一步,因此必須掌握。要點：要對Dreammeaver m*2004的工具欄有一定的了解，還要熟悉其的用途。創(chuàng)作步驟1啟動Dreamweaver m*2004,如圖所示.圖 啟動后所示的界面(2) 選擇菜單欄的 FORMTE*T 站點(S) FORMTE*T 站點管理(M)命令,翻開對話框,如圖所示.圖站點管理對話框(3) 單擊站點管理對話框的 FORMTE*T 新建(N)出現(xiàn)站點(S)和FTP與RDS效勞器(F),選擇其中的站點(S)出現(xiàn)對話框,如圖所示. 圖站點定義1”對話框(4) 在文本框里可以為你的站點起個名字,然后按 FORMTE*T 下一步出現(xiàn)對話框,如圖所示.圖定義站點

5、2對話框(5) 在對話框中,根據(jù)自己所做的選擇否或者是.如果你做的是靜態(tài)網(wǎng)頁,則就可以選擇否,如果你做的是動態(tài)網(wǎng)頁,那你就要選擇是,然后在下拉菜單中選擇你所用的效勞器技術類型.我做的是靜態(tài)網(wǎng)頁,因此我選擇否,然后再按 FORMTE*T 下一步出現(xiàn)對話框,如圖所示.圖站點定義3”對話框(6) 選擇系統(tǒng)推薦的選項,在文本框里可以填入你所建的保存路徑,也可以不變系統(tǒng)默認的路徑,然后按 FORMTE*T 下一步出現(xiàn)對話框,如圖所示.圖站點定義4對話框(7) 根據(jù)你自己的實際情況,如果你想下傳到*效勞器上的話,那你就從下拉菜單中選擇你所用的上傳方法,如果不想上傳的話,就選擇無,然后再按 FORMTE*T

6、 下一步,出現(xiàn)對話框,如圖所示,按 FORMTE*T 完成,出現(xiàn)圖1.1.8所示,再按 FORMTE*T 完成這就完成了建一個站點的過程.圖站點定義5對話框 圖站點定義6”對話框?qū)嵗? 布局表格目的：學會制作表格,能熟悉掌握表格的作用,現(xiàn)在大局部網(wǎng)頁都運用到了表格,它是做網(wǎng)頁不可缺少的技術,也要熟悉掌握.最終效果如圖:.要點：主要應用布局表格和布局單元表格來繪制表格,同時在表格中插入圖片和添加文本,或者flash等等,最終實現(xiàn)你所想的效果.創(chuàng)作步驟啟動Dreamweaver m* 2004 軟件.選擇 FORMTE*T 文件 FORMTE*T 新建(N) Ctrl+N命令,翻開 FORMTE*

7、T 新建文檔對話框,如圖所示,單擊 FORMTE*T 創(chuàng)立(R)圖新建文檔對話框 圖 新建空白HTML文檔選擇菜單欄的 FORMTE*T 修改 FORMTE*T 頁面屬性(P)Ctrl+J命令,彈出 FORMTE*T 頁面屬性對話框,如圖所示,在 FORMTE*T 標題(T):欄中輸入文字作為標題,如現(xiàn)在輸入布局表格,再按 FORMTE*T 確定,返回主界面.圖頁面屬性對話框單擊工具欄的按鈕,切換到布局視圖工作界面,如圖所示.圖布局視圖工作界面(5)單擊在工具欄上的布局表格按鈕,在頁面中拖曳鼠標繪制一個布局表格,如圖所示.還可以根據(jù)你的需要來調(diào)整表格的大小.圖 繪制布局表格單擊工具欄上的繪制布

8、局單元格按鈕,在需要添加布局單元格的位置拖曳鼠標,繪制布局單元格,如圖所示.圖 繪制布局單元格重復第(4)和(5)步的操作,繪制其它布局表格和布局單元格,如圖所示.圖 繪制其它單元格在布局單元格添加文本和圖像,如圖所示.圖 表格添加內(nèi)容(8) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.圖 瀏覽器中的效果實例3 層的運用目的：學會使用層的技術,雖然現(xiàn)在的大局部的網(wǎng)頁是沒有用到層,但要制作一些比擬特別的網(wǎng)頁時,用層比用表格簡單得多. 要點：本例要用到層的技術,建層,改變層的屬性等,制作

9、一些布局比擬簡單的網(wǎng)頁.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為層的運用的網(wǎng)頁,如圖所示.圖層的運用網(wǎng)頁的建立選擇插入(I)布局對象層(Y)命令,插入一個層,如圖所示.圖 層的建立(4)點擊層的里面便可對層的內(nèi)容進展編輯,你可插入圖片也可插入文字,現(xiàn)在就來插入圖片,選擇插入(I)圖像(I) Ctrl + Alt +I翻開對話框,如圖所示圖翻開的對話框選擇你所定好的圖片,然后再按確定,再調(diào)整圖的大上和層的位置,最后可得效果如圖所示.圖 插入圖片重復步驟3再插入一個層,輸入文字在層里,根據(jù)你的需要移動和調(diào)整層的位置大小,也可以在屬性修改層,最后效果如圖所示.圖 最終效果(

10、6) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示圖 在瀏覽器中的效果實例4 顯示隱實藏圖層目的：制作顯示隱藏圖層的效果,使網(wǎng)頁具有動態(tài)效果.如右圖. 要點：本例主要應用顯示隱藏圖層命令.單擊顯示按鈕,頁面中顯示所有的圖層,單擊隱藏按鈕,隱藏所有的圖層.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為顯示隱藏圖層的網(wǎng)頁,如圖所示.圖顯示隱藏圖層網(wǎng)頁的建立在網(wǎng)頁使用布局表格技術建立表格,如所示.單擊第一個單元表格內(nèi),單擊插入(I)布局對象(Y)層(Y)命令,調(diào)整層的大小

11、剛好等于第一個單元表格的大小,單擊層里面,選擇插入(I)圖像(I) Ctrl +Alt +I 命令,出現(xiàn)對話如圖所示,選擇圖像按.(5)單擊第二個單元表格,按步驟4,插入層和圖像,并在第三和第四個單元表格內(nèi)分別寫上顯示和隱藏.最后效果如圖所示.圖 建立表格的網(wǎng)頁 圖 翻開對話框(6) 選擇第三單元表格里的顯示,單擊窗口(W)行為(E) Shift + F3,翻開行為面板,如圖所示(7) 單擊添加行為按鈕,在彈出的下拉菜單中選擇顯示-隱藏層命令,翻開顯示隱藏層對話框,如圖所示.(8) 選中所有圖層,單擊按鈕,為所有層添加顯示行為,如圖所示,單擊按鈕,關閉顯示-隱藏層對話框.(9) 單擊面板中的下

12、拉箭頭按鈕,在彈出的下拉菜單中選擇onClick選項,如圖所示.(10)重復69步的操作,選中第四單元表格里的隱藏,為那二層(即那二*圖像)添加隱藏圖層及相應觸發(fā)事件,如圖.所示. 圖 插入圖像的網(wǎng)頁 圖 行為面板 圖顯示-隱藏層對話框 圖 設置顯示層行為圖 設置觸發(fā)事件圖設置隱藏層行為(11)選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.4.10和所示圖 單擊顯示的效果圖1.4.11單擊隱藏的效果實例5 插入背景音樂目的：使網(wǎng)頁更加活潑生動.如右圖所示.要點：本例主要讓你了解本軟件的根

13、本功能,學習怎么在網(wǎng)頁中添加音樂.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為背景音樂的網(wǎng)頁,如圖所示. 圖背景音樂網(wǎng)頁的建立按上例在網(wǎng)頁中插入圖像居中,再插入一個層,并在層里輸入文字讓我唱支歌!調(diào)整層的大小和位置.如圖所示.(4) 按上例單擊窗口(W)行為(E) Shift + F3,翻開行為面板.(5) 單擊添加行為按鈕,在彈出的下拉菜單中選擇播放聲音命令,翻開播放聲音對話框,如圖所示.單擊播放聲音文本框后的按鈕,在彈出選擇文件對話框中選中一個音樂文件(見圖所示)單擊按鈕. 圖 插入圖像和層的效果.圖播放聲音對話框圖選擇文件對話框單擊面板中的下拉箭頭按鈕,在彈出的下拉

14、菜單中選擇onLoad選項,如圖所示.(8) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.圖 設置觸事件 圖 瀏覽器中的效果實例6 插入背景圖像目的：使網(wǎng)頁在顏色方面不是則單調(diào).效果如右圖所示.要點：本例主要學習如果把一*圖片作為網(wǎng)頁的背景圖像,使網(wǎng)頁更加好看.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為插入背景圖像的網(wǎng)頁,如圖所示.如圖1.6.1”插入背景圖像網(wǎng)頁的建立在網(wǎng)頁中輸入文字,并在網(wǎng)頁下面的中,改變文字的大小和位置,如圖所示.(4) 在網(wǎng)頁空白處按右

15、鍵,選擇頁面屬性(T)出現(xiàn)對話框,如圖所示,(5) 單擊頁面屬性對話框中的出現(xiàn)選擇文件對話框,如圖所示.按.(6) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.圖 在網(wǎng)頁中輸入文字圖 頁面屬性的對話框 圖 選擇文件對話框圖在瀏覽器中的效果實例7 文本超目的：制作具有超的網(wǎng)頁.如右圖所示.要點：本例學習如何設置超,它是制作的最根本技術,因為現(xiàn)在的可以說沒有一個不用到它,因此學會它是非常有必要的.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為超的網(wǎng)頁,如圖所示. 圖1

16、.7.1”超的網(wǎng)頁建立按上例的步驟制作同樣的網(wǎng)頁,并在詩的下面加多一行字更多的詩,效果如圖所示.(4)選擇最后一行字更多的字點擊右鍵,選擇創(chuàng)立(L)出現(xiàn)選擇文件對話框,如圖所示.然后選擇你選定的網(wǎng)頁,即當點擊文字更多的詩時所顯示的網(wǎng)頁,你應該先做好它.最后按.圖 添加字后的網(wǎng)頁圖 選擇文件的對話框(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.當你點擊更多的字時,網(wǎng)頁就會轉(zhuǎn)到你所的網(wǎng)頁. 圖 在瀏覽器中的效果實例8 圖像熱點目的：制作出具有圖像的網(wǎng)頁,即當你點擊圖像中的*一處時,

17、網(wǎng)頁會轉(zhuǎn)到它所的網(wǎng)頁去,最后如右圖所示. 要點：本例所用到的技術跟上例差不多,上例是文本的超,而本例是圖像的一小處的超.特別是介紹照片中很多人的其中一個是誰時,就能用到這種技術.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為圖像熱點的網(wǎng)頁,如圖所示. 圖1.8.1”圖像熱點的網(wǎng)頁的建立(3) 按以上幾例所講到的技術在網(wǎng)頁中插入圖片,并調(diào)整圖片的大小和位置,結(jié)果如圖所示.(4) 選擇圖片,點擊下面的,鼠標就變成一個+,然后在圖片中選擇區(qū)域的大小,如圖所示.(5) 在后面的文本框里填入你要的文件或者點擊下面右邊的,出現(xiàn)選擇文件對話框, 如圖所示,并在后面寫上了解我更多. 圖 插

18、入圖片后的網(wǎng)頁圖 選擇圖片的區(qū)域圖 選擇文件對話框(6) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.當你鼠標移到剛剛你所選的區(qū)域時,就會顯示了解我更多點擊它網(wǎng)頁就會轉(zhuǎn)到你所的網(wǎng)頁. 圖 在瀏覽器中的效果實例9 彈出信息目的：制作一些能自動跳出信息的網(wǎng)頁.如右圖所示.要點：本例主要應用了添加行為的技術,跟例5有點相像,也是用到添加行為技術.創(chuàng)作步驟啟動Dreamweaver M* 軟件.選擇文件(F)翻開(Q) Ctrl + 0命令,翻開翻開對話框(見圖),選擇上例的網(wǎng)頁,如圖所示.

19、圖翻開對話框(3) 按上例單擊窗口(W)行為(E) Shift + F3,翻開行為面板.如圖所示.單擊添加行為按鈕,在彈出的下拉菜單中選擇彈出信息命令,翻開彈出信息對話框并文本框里寫入歡送光臨本站.按確定退出. 如圖所示(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.圖行為面板 圖 翻開上例的網(wǎng)頁圖彈出信息對話框圖在瀏覽器中的效果實例10 自動跳轉(zhuǎn)制作自動跳轉(zhuǎn)效果的網(wǎng)頁.本例主要實現(xiàn)首先自動跳轉(zhuǎn)功能,當用戶瀏覽網(wǎng)頁時,系統(tǒng)會自動進入新的網(wǎng)址.創(chuàng)作步驟啟動Dreamweaver M

20、* 軟件.選擇文件(F)翻開(Q) Ctrl + 0命令,翻開翻開對話框(見圖),選擇例8的網(wǎng)頁,如圖所示. 圖翻開對話框(3) 單擊文檔窗口左下角標簽欄中的標簽,選擇窗口(W)行為(E) Shift + F3命令,翻開行為面板,如圖所示 .(4) 單擊添加行為按鈕,在彈出的下拉菜單中選擇轉(zhuǎn)到URL命令,翻開轉(zhuǎn)到URL對話框,并在URL后面的文本里輸入一個如.163.,如圖所示.單擊確定.(5) 單擊行為面板中的下拉箭頭按鈕,在彈出的下拉菜單中選擇onload項,即設置觸發(fā)事件為當用戶瀏覽系統(tǒng)自動進入相應的網(wǎng)址,如圖所示,(6) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A

21、) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.圖 行為面板圖 翻開例8的網(wǎng)頁 圖轉(zhuǎn)到URL對話框 圖 設置觸發(fā)事件 圖 在瀏覽器中的效實例11 創(chuàng)立交換圖制作創(chuàng)立交換圖效果的網(wǎng)頁.如右圖所示. 本例主要講述交換圖的創(chuàng)立過程,用來交換的圖必須和原圖大小一樣.創(chuàng)作步驟啟動Dreamweaver M* 軟件.按上例創(chuàng)立一個名為創(chuàng)立交換圖的網(wǎng)頁,如圖所示. 圖1.11.1”創(chuàng)立交換圖的網(wǎng)頁建立(3) 選擇插入(I)表格(T) Ctrl + Alt命令,出現(xiàn)表格對話框,如圖所示,(4) 在表格對話框中,輸入行數(shù)和列數(shù)都為1.按確定插入網(wǎng)頁中,并調(diào)整表格的大小

22、,使其居中,效果如呼所示.單擊表格里面,選擇插入(I)圖像對象(G)鼠標經(jīng)過圖像(R)命令,出現(xiàn)對話框.如圖所示.在后的文本輸入原始圖像的路徑,或單擊選擇一個圖片為原始圖像. 圖 表格對話框 圖 插入表格后的網(wǎng)頁 圖 插入鼠標經(jīng)過圖像的對話框同樣為選擇一個圖片作為鼠標經(jīng)過的圖像.最后按確定.效果如圖所示. 圖 插入圖像后的效果(8) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖所示.當鼠標經(jīng)過圖像時的效果如圖1.11.7所示. 圖 圖1.11.7 實例12 跳轉(zhuǎn)菜單制作跳轉(zhuǎn)菜單效果的網(wǎng)頁.

23、如右圖所示.本例主要應用跳轉(zhuǎn)菜單呈菜單或者列表的形式制作,當用戶選擇其中的工程時,會自動從當前頁面跳轉(zhuǎn)到相應頁面中.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為跳轉(zhuǎn)菜單的網(wǎng)頁,如圖所示. 圖1.12.1”跳轉(zhuǎn)菜單的網(wǎng)頁的建立選擇插入(I)表單(F)跳轉(zhuǎn)菜單(J)命令,出現(xiàn)插入跳轉(zhuǎn)菜單對話框,如圖所示.(4) 在插入跳轉(zhuǎn)菜單對話框中的后面輸入要跳轉(zhuǎn)菜單名,在后面輸入該跳轉(zhuǎn)菜單的地址,再按添加其它的菜單.(如圖),按確定.(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示

24、.圖1.12.2”插入跳轉(zhuǎn)菜單對話框圖1.12.3”插入跳轉(zhuǎn)菜單的設置 圖 在瀏覽器中的效果實例13 插入FLASH文本制作插入FLASH文本效果,使網(wǎng)頁具有動態(tài)美感.如右圖所示.本例主要學習如何插入FLASH文本技術.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為插入FLASH文本的網(wǎng)頁,如圖所示.圖1.13.1”插入FLASH文本的網(wǎng)頁建立選擇插入(I)媒體(M)FLASH文本(L)命令,翻開FLASH文本對話框,如果系統(tǒng)提示要保存的話,你就先保存網(wǎng)頁,如圖所示.(4) 輸入你想要寫的文字,并改變字體的大小,格式,顏色,位置等設置,最終效果如圖所示.按確定.(5) 選擇 FO

25、RMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示. 圖FLASH文本對話框圖FLASH文本對話框的設置 圖 在瀏覽器中的效果實例14 插入FLASH按鈕制作插入FLASH按鈕效果的網(wǎng)頁.如右圖所示. 本例主要學習如何插入FLASH按鈕技術. 創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為插入FLASH文本的網(wǎng)頁,如圖所示. 圖1.14.1”插入FLASH文本的網(wǎng)頁的建立(3) 選擇插入(I)媒體(M)FLASH按鈕(F)命令,翻開FLASH按鈕對話框, 如果系統(tǒng)提示要保存的話,你就先保

26、存網(wǎng)頁,如圖所示.(4) 在FLASH按鈕對話框的后面可以選擇按鈕的樣式,在后面輸入播放或者其它,點擊后面的選擇所要文檔的URL地址,可以不設置,在下拉表框中指定所要文本的翻開方式,可以不設置.其它的就可以按自己的意愿設置,按確定.(如果在文本框中指定的SWF格式的文件名路徑或文件名中含有中文字符,系統(tǒng)會彈出要求你重新輸入的提示框)圖FLASH按鈕對話框(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示. 圖 在瀏覽器中的效果實例15 插入FLASH動畫目的：制作插入FLASH動畫效

27、果.如右圖所示. 要點：本例主要應用FLASH動畫的矢量動畫制作完成,它下載速度快,在網(wǎng)頁中經(jīng)常應用,本例學習如何插入FLASH動畫.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為插入FLASH動畫的網(wǎng)頁,如圖所示.圖1.15.1”插入FLASH動畫的網(wǎng)頁建立(3) 選擇插入(I)媒體(M)FLASH (F)命令,翻開FLASH對話框,如圖所示.選擇要插入的FLASH按確定.(4) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖FLASH對話框圖 在瀏覽器中的效果實例1

28、6 插入視頻目的：制作插入視頻效果.如右圖所示.要點：本例主要學習如何插入視頻,即在網(wǎng)頁中可以觀看視頻文件.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為插入FLASH動畫的網(wǎng)頁,如圖所示. 圖1.16.1”插入FLASH動畫的網(wǎng)頁建立(3) 選擇插入(I)媒體(M)插件(P)命令,翻開插件對話框,如圖所示.選擇要插入的視頻文件按確定.(4) 在網(wǎng)頁中調(diào)整播放窗口的大小和位置,如圖所示.(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示. 圖插件對話框 圖 調(diào)整播放窗口

29、 圖 在瀏覽器中的效果實例17 顯示彈出式菜單制作顯示彈出式單效果.如右圖所示. 本例主要運用顯示彈出式菜單的技術,這種技術雖然不是在很多網(wǎng)頁中能看到,但它也有它獨特的用處,比方說網(wǎng)中的欄目太多而放不下時,就可以進展歸類應用這種技術,從而使網(wǎng)頁清潔好看.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為顯示彈出式菜單的網(wǎng)頁,如圖所示.圖1.17.1”顯示彈出式菜單的網(wǎng)頁按上幾例所學知識,在網(wǎng)頁中插入一個3行1列的表格,并在每個單元表格內(nèi)輸入文字,調(diào)整文字的大小和位置,效果如圖所示.(4) 選擇表格內(nèi)的電影欣賞,在下面的后面文本框里輸入 * 以表示電影欣賞是具有超的.(5) 選擇窗口(

30、W)行為(E) Shift + F3命令,翻開行為面板,如圖所示(6) 單擊添加行為按鈕,在彈出的下拉菜單中選擇顯示彈出式菜單命令,翻開顯示彈出式菜單對話框,如圖所示.圖 插入表格后網(wǎng)頁圖 行為面板 圖1.17.4”顯示彈出式菜單對話框(7) 在后面寫上菜單名,在后面填上路徑,在后面可不設置,然后再按增加按鈕增加其它的菜單,還可以在外觀,高級,位置改變設置,按確定最終效果如圖所示. 圖1.17.5”顯示彈出式菜單對話框的設置(8) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 在瀏

31、覽器中的效果實例18 框架的使用制作框架的使用效果.如右圖所示.本例主要運用框架的使用的技術,這種技術雖然不是十分流行,但在一定條件下用到這種技術卻是非常之好的.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為框架的使用的網(wǎng)頁,如圖所示.圖1.18.1”框架的使用的網(wǎng)頁建立選擇插入(I)HTML框架(S)上方及左側(cè)嵌套(O)命令,插入后可以用鼠標對框架進展調(diào)整,或者按住鍵盤的ALT鍵,再點擊其中一個框架就會出現(xiàn)這個框架的屬性,必要時可修改,最終效果如圖所示. (4) 在框架中輸入文字,并調(diào)整大小和位置,最終效果如圖所示.(5) 選擇框架中的文字動畫欣賞,按右鍵選擇創(chuàng)立(L),翻開選

32、擇文件對話框(見圖所示),選擇要的文件,按確定退出. (6) 在下面的下拉菜單中mainframe.其它可不設置.圖 插入框架后的網(wǎng)頁圖 框架中插入文字的網(wǎng)頁 圖 選擇文件對話框(7) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,當點擊動畫欣賞觀看在瀏覽器中的效果.如圖所示. 圖 當點擊動畫欣賞觀看在瀏覽器中的效果實例19 創(chuàng)立相冊集目的：制作創(chuàng)立相冊集效果.如右圖所示.要點：本例主要應用創(chuàng)立相冊集命令創(chuàng)立一個電子一樣,單擊頁面中的*一*相片,可翻開該相片的效果圖.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新

33、建一個名為顯示彈出式菜單的網(wǎng)頁,如圖所示.圖1.19.1”顯示彈出式菜單的網(wǎng)頁建立選擇命令(C)創(chuàng)立相冊(C)命令,彈出創(chuàng)立相冊對話框,完成該對話框的設置, 如圖所示,單擊確定按鈕.(創(chuàng)立過程是同Dreamweaver M*啟動Fireworks來自動完成的,所以系統(tǒng)中必須安裝Fireworks軟件,才可以實現(xiàn)機冊的創(chuàng)立)(4) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 創(chuàng)立相冊對話框圖 觀看在瀏覽器中的效果實例20 插入按鈕目的：制作插入按鈕效果.如右圖所要點：本例主要學習如

34、何插入按鈕,特別在動態(tài)網(wǎng)態(tài)中,按鈕是不可缺少的,因此必須掌握.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為插入按鈕的網(wǎng)頁,如圖所示.圖1.20.1”插入按鈕的網(wǎng)頁建立(3) 選擇插入(I)表單(F)文本區(qū)域(A)命令,并可以在下面改變其的大小等等,效果如圖所示.(4) 在文本區(qū)域下面再插入二個按鈕,選擇插入(I)表單(F)按鈕(B)命令, 并可以在下面改變其的大小,按鈕名等等,設置完成如圖所示.(當插入重置按鈕時,在后面應選擇)(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果

35、.如圖所示.圖 插入文本區(qū)域 圖 插入按鈕 圖 觀看在瀏覽器中的效果實例21 頁面配色方案制作頁面配色方案.如右圖所.本例主要應用設定配色方案命令來改變網(wǎng)頁背景顏色以及文本的顏色.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為頁面配色方案的網(wǎng)頁,如圖所示.圖1.21.1”頁面配色方案的網(wǎng)頁按以上所講的知識,在網(wǎng)頁中手稿表格,并在表格中插入圖片和文字,如圖所示(4) 選擇命令(C)設置配色方案(T)命令,翻開設置配色方案對話框,如圖所示.(5) 在對話框的列表框中選擇適當?shù)念伾?在列表框中選擇指定的配色方案,如圖所示,(6) 選擇 FORMTE*T 文件(F) FORMTE*T 另

36、存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 插入表格 圖設置配色方案對話框圖 選擇適當?shù)呐渖桨?圖 觀看在瀏覽器中的效果實例22 CSS的使用制作CSS的使用效果.如右圖所示本例主要學習如何使用CSS,CSS在很多網(wǎng)頁中都有使用,因為有了它,制作網(wǎng)頁就更加方便簡單.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為CSS的使用的網(wǎng)頁,如圖所示.圖1.22.1”CSS的使用的網(wǎng)頁建立插入一個有二行二列的表格,調(diào)整表格的大小和位置,并在每個單元表格內(nèi)寫入一首詩,如圖所示.提示:由于每首詩的字體和位置都沒有調(diào)整好,還有每個單元表

37、格的背景也沒有設置好,如果一個一個單元表格輪著來調(diào)整的話,那就很浪費時間,因此使用了CSS,它就一個模板直接套在每個單元表格就可以了.在表格中按右鍵選擇CSS樣式(C)新建(N)彈出對話框,如圖所示. 圖122.2 表格和文字的插入圖新建CSS樣式對話框在新建CSS樣式對話框的后面輸入gushi作為名稱,其它不用改變.按確定,彈出保存對話框,如圖所示.(6) 在對話框中,輸入gushi作為文件名,按確定.彈出CSS樣式定義對話框,如圖所示.(7) 在的列表框中,選擇設置的分類,然后在右邊的中設置想要的效果,現(xiàn)在把那些詩設置字體為隸書,大小為18號,居中,表格背景為灰色.按確定.(8) 在網(wǎng)頁中

38、右擊一個單元表格,選擇樣式(C)gushi,那表格里的文字格式就變成剛剛你設置的格式了,如圖所示.把其它的單元表格也應用到CSS,這樣就輕易把全部都變成了自己設置的格式了.(9) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 保存對話框 圖CSS樣式定義對話框圖 應用了CSS(gushi)的效果 圖 觀看在瀏覽器中的效果實例23 自動格式化表格目的：制作自動格式化表格效果.如右圖所示要點：本例主要應用格式化表格命令,學習如何應用.創(chuàng)作步驟啟動Dreamweaver M* 軟件.選擇

39、文件(F)翻開(O) Ctrl +O命令,翻開翻開對話框(見圖),翻開網(wǎng)頁課程表,如圖所示. 圖翻開對話框(3) 單擊表格邊框選中表格,選擇命令(C)格式化表格(F)命令,翻開格式化表格對話框,從格式列表框中選中AltRows:Green&Yellow選項,如圖所示.(4) 單擊確定按鈕,對選中的表格應用所選樣式,如圖所示.(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖所示 翻開課程表圖格式化表格對話框圖 自動格式化表格 圖 觀看在瀏覽器中的效果實例24 使用表格間隔圖像目的

40、：制作使用表格間隔圖像效果.如右圖所示要點：本列主要應用表格的表格間隔圖像屬性來控制表格的尺寸.間隔圖像是一個不會在瀏覽器中顯示的透明圖像,主要用于控制自動伸展表格的屬性,它會保持頁面上每個表格和單元格的設置寬度.創(chuàng)作步驟啟動Dreamweaver M* 軟件.選擇文件(F)翻開(O) Ctrl +O命令,翻開翻開對話框(見圖),翻開網(wǎng)頁課程表,如圖所示. 圖翻開對話框(3) 選擇查看(V)表格視圖(T)布局視圖(L) Ctrl + F6命令,切換到布局視圖工作界面,如圖所示.(4) 點擊標題菜單中選擇添加間隔圖像(A)命令,如圖所示.(5) 選擇 FORMTE*T 文件(F) FORMTE*

41、T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 翻開課程表網(wǎng)頁圖布局視圖工作界面圖 選擇添加間隔圖像圖 觀看在瀏覽器中的效果實例25 單元格自動延伸目的：制作單元格自動延伸效果.如右圖所示.要點：本例主要應用布局表格的列設置為自動伸展功能,調(diào)整單元格寬度根據(jù)窗口的大小自動改變.創(chuàng)作步驟啟動Dreamweaver M* 軟件.選擇文件(F)翻開(O) Ctrl +O命令,翻開翻開對話框(見圖),翻開網(wǎng)頁單元格自動延伸如圖1.25.2所示. 圖翻開對話框(3) 點擊網(wǎng)頁編輯區(qū)上面的按鈕,切換到布局視圖,如圖所示.(4) 點擊標題菜單中選

42、擇列設置為自動伸展(K)命令,如圖所示.(5) 設置了自動伸展屬性的列會顯示為標識,效果如圖所示.(6) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 翻開單元格自動延伸圖 切換到布局視圖圖列設置為自動伸展命令圖 設置列為自動伸展圖 觀看在瀏覽器中的效果實例26 熾熱文字制作熾熱文字效果.如右圖所示.本例要主應用JavaScript語言制作熾熱文字效果.創(chuàng)作步驟啟動Dreamweaver M* 軟件.新建一個名為熾熱文字的網(wǎng)頁,如圖所示.圖1.26.1”熾熱文字的網(wǎng)頁建立單擊編輯區(qū)

43、上面的按鈕，切換代碼視圖工作區(qū)，如圖所示.(4) 在和之間輸入代碼function glowit(which)if(document.all.glowte*twhich.filters0.strengh=2)document.all.glowte*twhich.filters0.strength=1elsedocument.all.glowte*twhich.filters0.strengh=2function glowit2(which)if(document.all.glowte*t.filters0.strengh=2)document.all.glowte*t.filters0.str

44、engh=1elsedocument.all.glowte*t.filters0.strengh=2function startglowing()if(document.all.glowte*t&glowte*t.length)for(i=0;iglowte*t.length;i+)eval(setInterval(glowit(+i+),150)else if (glowte*t)setInterval(glowit2(0),150)if(document.all)window.onload=startglowing(5) 在和之間輸入代碼:歡送光臨本站(6) 選擇 FORMTE*T 文件(

45、F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示.圖 切換為代碼視圖圖 觀看在瀏覽器中的效果實例27 顯示當前日期制作顯示當前日期效果.如右圖所示. 本例主要學習為網(wǎng)頁添加JavaScript代碼顯示系統(tǒng)當前日期。創(chuàng)作步驟(1) 啟動Dreamweaver M* 軟件.(2) 新建一個名為顯示當前日期的網(wǎng)頁,如圖所示.圖1.27.1”顯示當前日期的網(wǎng)頁的建立單擊編輯區(qū)上面的按鈕，切換代碼視圖工作區(qū)，如圖所示.(4) 在和之間輸入以下代碼： var enabled=0;ver day;ver dare;today=new

46、 Date();if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日 day=歡送進入本+today.getYear()+-+(today.getMonth()+1)+-+todayDate()+day; document.write(date.fontsize(2);/

47、-function MM_callJS(jsStr)/v2.0 return eval(jsStr)/-圖 切換為代碼視圖(5) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示圖 觀看在瀏覽器中的效果實例28 顯示登陸時間制作顯示登陸時間效果.如右圖所示.本例主要實現(xiàn)頁面框架中顯示登陸時間.創(chuàng)作步驟(1) 啟動Dreamweaver M* 軟件.(2) 新建一個名為顯示登陸時間的網(wǎng)頁,如圖所示.圖1.28.1”顯示登陸時間的網(wǎng)頁的建立(3) 選擇插入(I)html框架(S)左方(L)命令

48、,插入框架,如圖所示.(4) 選擇窗口(W)行為(E) Shift + F3,翻開行為面板.如圖所示.(5) 單擊添加行為按鈕,在彈出的下拉菜單中選擇設置文本設置框架文本命令,翻開設置框架文本對話框,在下拉列表中選擇選項,在文本框中輸入代碼,如圖所示.按確定.圖 插入框架圖 行為面板圖1.28.4 輸入代碼(6) 點擊行為面板中的,在彈出的下拉菜單中選擇onload命令,設置觸發(fā)事件,如圖所示(7) 選擇 FORMTE*T 文件(F) FORMTE*T 另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖所示圖 行為面板的設置圖 觀看在瀏覽器中的效果

49、實例29 狀態(tài)欄中跳動的文字制作狀態(tài)欄中跳動的文字效果.如右圖所示.本例主要應用JavaScritp語言來實現(xiàn)文字在狀態(tài)欄上的跳動效果,創(chuàng)作步驟(1) 啟動Dreamweaver M* 軟件.(2) 新建一個名為狀態(tài)欄中跳動的文字的網(wǎng)頁,如圖所示.圖1.29.1”狀態(tài)欄中跳動的文字的網(wǎng)頁的建立(3) 單擊編輯區(qū)上面的按鈕，切換代碼視圖工作區(qū)，如圖所示.(4) 在和之間輸入以下代碼：var MESSAGE=歡送光臨var POSITION=100var DELAY=5var scroll=new statusMessageObject()function statusMessageObject(p,d)this.msg=MESSAGEthis.out= this.pos=POSITIONthis.delay=DELAYthis.i=0this.reset=clearMessagefunction clearMessage()this