Dreamweaver實例教學(xué)(30例).doc

Dreamweaver實例教學(xué)目 錄74 / 74實例1 站點的建立實例2 布局表格實例3 層的運用實例4 顯示隱實藏圖層實例5 插入背景音樂實例6 插入背景圖像實例7 文本超鏈接實例8 圖像熱點鏈接實例9 彈出信息實例10 自動跳轉(zhuǎn)鏈接實例11 創(chuàng)建交換圖實例12 跳轉(zhuǎn)菜單實例13 插入FLASH文本實例14 插入FLASH按鈕實例15 插入FLASH動畫實例16 插入視頻實例17 顯示彈出式菜單實例18 框架的使用實例19 創(chuàng)建網(wǎng)站相冊集實例20 插入按鈕實例21 頁面配色方案實例22 CSS的使用實例23 自動格式化表格實例24 使用表格間隔圖像實例25 單元格自動延伸實例26 熾熱文字實例27 顯示當(dāng)前日期實例28 顯示登陸時間實例29 狀態(tài)欄中跳動的文字實例30 左右移動的圖片 . 實例1 站點的建立目的：了解和掌握怎么建一個網(wǎng)站,這是做網(wǎng)站的第一步,因此必須掌握。要點：要對Dreammeaver mx2004的工具欄有一定的了解，還要熟悉其的用途。創(chuàng)作步驟 （1）啟動Dreamweaver mx2004,如圖1.1.1所示. 圖1.1.1 啟動后所示的界面(2) 選擇菜單欄的站點(S)站點管理(M)命令,打開對話框,如圖1.1.2所示. 圖1.1.2 “站點管理”對話框(3) 單擊”站點管理”對話框的新建(N)出現(xiàn)”站點(S)和FTP與RDS服務(wù)器(F)”,選擇其中的”站點(S)”出現(xiàn)對話框,如圖1.1.3所示. 圖1.1.3 “站點定義1”對話框(4) 在文本框里可以為你的站點起個名字,然后按下一步出現(xiàn)對話框,如圖1.1.4所示.圖1.1.4 “定義站點2”對話框(5) 在對話框中,根據(jù)自己所做的網(wǎng)站選擇”否”或者”是”.如果你做的是靜態(tài)網(wǎng)頁,那么就可以選擇”否”,如果你做的是動態(tài)網(wǎng)頁,那你就要選擇”是”,然后在下拉菜單中選擇你所用的服務(wù)器技術(shù)類型.我做的是靜態(tài)網(wǎng)頁,因此我選擇”否”,然后再按下一步出現(xiàn)對話框,如圖1.1.5所示. 圖1.1.5 “站點定義3”對話框(6) 選擇系統(tǒng)推薦的選項,在文本框里可以填入你所建網(wǎng)站的保存路徑,也可以不變系統(tǒng)默認(rèn)的路徑,然后按下一步出現(xiàn)對話框,如圖1.1.6所示.圖1.1.6 “站點定義4”對話框(7) 根據(jù)你自己的實際情況,如果你想下傳到某服務(wù)器上的話,那你就從下拉菜單中選擇你所用的上傳方法,如果不想上傳的話,就選擇”無”,然后再按下一步,出現(xiàn)對話框,如圖1.1.7所示,按完成,出現(xiàn)圖1.1.8所示,再按完成這就完成了建一個站點的過程.圖1.1.7 “站點定義5”對話框 圖1.1.8 “站點定義6”對話框 實例2 布局表格目的：學(xué)會制作表格,能熟悉掌握表格的作用,現(xiàn)在大部分網(wǎng)頁都運用到了表格,它是做網(wǎng)頁不可缺少的技術(shù),也要熟悉掌握.最終效果如圖:.要點：主要應(yīng)用布局表格和布局單元表格來繪制表格,同時在表格中插入圖片和添加文本,或者flash等等,最終實現(xiàn)你所想的效果.創(chuàng)作步驟(1) 啟動Dreamweaver mx 2004 軟件.(2) 選擇文件新建(N) Ctrl+N命令,打開新建文檔對話框,如圖1.2.1所示,單擊創(chuàng)建(R)按鈕,創(chuàng)建一個空白HTML文檔,如圖1.2.2 圖1.2.1 “新建文檔”對話框 圖1.2.2 新建空白HTML文檔(3) 選擇菜單欄的修改頁面屬性(P) Ctrl+J命令,彈出頁面屬性對話框,如圖1.2.3所示,在標(biāo)題(T):欄中輸入文字作為標(biāo)題,如現(xiàn)在輸入”布局表格”,再按確定,返回主界面. 圖1.2.3 “頁面屬性”對話框(4) 單擊工具欄的按鈕,切換到”布局視圖”工作界面,如圖1.2.4所示. 圖1.2.4 “布局視圖”工作界面(5)單擊在工具欄上的布局表格按鈕,在頁面中拖曳鼠標(biāo)繪制一個布局表格,如圖1.2.5所示.還可以根據(jù)你的需要來調(diào)整表格的大小. 圖1.2.5 繪制布局表格(5) 單擊工具欄上的繪制布局單元格按鈕,在需要添加布局單元格的位置拖曳鼠標(biāo),繪制布局單元格,如圖1.2.6所示.圖1.2.6 繪制布局單元格(6) 重復(fù)第(4)和(5)步的操作,繪制其它布局表格和布局單元格,如圖1.2.7所示.圖1.2.7 繪制其它單元格(7) 在布局單元格添加文本和圖像,如圖1.2.8所示. 圖1.2.8 表格添加內(nèi)容(8) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.2.9所示.圖1.2.9 瀏覽器中的效果實例3 層的運用目的：學(xué)會使用層的技術(shù),雖然現(xiàn)在的大部分的網(wǎng)頁是沒有用到層,但要制作一些比較特別的網(wǎng)頁時,用層比用表格簡單得多. 要點：本例要用到層的技術(shù),建層,改變層的屬性等,制作一些布局比較簡單的網(wǎng)頁.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”層的運用”的網(wǎng)頁,如圖1.3.1所示. 圖1.3.1 “層的運用”網(wǎng)頁的建立(3) 選擇插入(I)布局對象層(Y)命令,插入一個層,如圖1.3.2所示.圖1.3.2 層的建立(4)點擊層的里面便可對層的內(nèi)容進(jìn)行編輯,你可插入圖片也可插入文字,現(xiàn)在就來插入圖片,選擇插入(I)圖像(I) Ctrl + Alt +I打開對話框,如圖1.3.3所示圖1.3.3 “打開”的對話框(4) 選擇你所定好的圖片,然后再按確定,再調(diào)整圖的大上和層的位置,最后可得效果如圖1.3.4所示. 圖1.3.4 插入圖片(5) 重復(fù)步驟3再插入一個層,輸入文字在層里,根據(jù)你的需要移動和調(diào)整層的位置大小,也可以在”屬性”修改層,最后效果如圖1.3.5所示. 圖 1.3.5 最終效果(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.3.6所示圖1.3.6 在瀏覽器中的效果實例4 顯示隱實藏圖層目的：制作顯示隱藏圖層的效果,使網(wǎng)頁具有動態(tài)效果.如右圖. 要點：本例主要應(yīng)用”顯示隱藏圖層”命令.單擊”顯示”按鈕,頁面中顯示所有的圖層,單擊”隱藏”按鈕,隱藏所有的圖層.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”顯示隱藏圖層”的網(wǎng)頁,如圖1.4.1所示.圖1.4.1 “顯示隱藏圖層”網(wǎng)頁的建立(3) 在網(wǎng)頁使用布局表格技術(shù)建立表格,如1.4.2所示.(4) 單擊第一個單元表格內(nèi),單擊插入(I)布局對象(Y)層(Y)命令,調(diào)整層的大小剛好等于第一個單元表格的大小,單擊層里面,選擇插入(I)圖像(I) Ctrl +Alt +I 命令,出現(xiàn)對話如圖1.4.3所示,選擇圖像按.(5)單擊第二個單元表格,按步驟4,插入層和圖像,并在第三和第四個單元表格內(nèi)分別寫上”顯示”和”隱藏”.最后效果如圖1.4.4所示.圖1.4.2 建立表格的網(wǎng)頁 圖 1.4.3 “打開”對話框(6) 選擇第三單元表格里的”顯示”,單擊窗口(W)行為(E) Shift + F3,打開行為面板,如圖1.4.5所示(7) 單擊”添加行為”按鈕,在彈出的下拉菜單中選擇顯示-隱藏層命令,打開顯示隱藏層對話框,如圖1.4.6所示.(8) 選中所有圖層,單擊按鈕,為所有層添加顯示行為,如圖1.4.7所示,單擊按鈕,關(guān)閉顯示-隱藏層對話框.(9) 單擊面板中的”下拉箭頭”按鈕,在彈出的下拉菜單中選擇onClick選項,如圖1.4.8所示.(10)重復(fù)69步的操作,選中第四單元表格里的”隱藏”,為那二層(即那二張圖像)添加隱藏圖層及相應(yīng)觸發(fā)事件,如圖1.4.9.所示. 圖 1.4.4 插入圖像的網(wǎng)頁 圖 1.4.5 行為面板 圖1.4.6 “顯示-隱藏層”對話框 圖1.4.7 設(shè)置顯示層行為圖1.4.8 設(shè)置觸發(fā)事件圖1.4.9設(shè)置隱藏層行為(11)選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.4.10和1.4.11所示 圖1.4.10 單擊”顯示”的效果 圖1.4.11 單擊”隱藏的效果實例5 插入背景音樂目的：使網(wǎng)頁更加活潑生動.如右圖所示. 要點：本例主要讓你了解本軟件的基本功能,學(xué)習(xí)怎么在網(wǎng)頁中添加音樂.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”背景音樂”的網(wǎng)頁,如圖1.5.1所示. 圖1.5.1 “背景音樂”網(wǎng)頁的建立(3) 按上例在網(wǎng)頁中插入圖像居中,再插入一個層,并在層里輸入文字”讓我唱支歌!”調(diào)整層的大小和位置.如圖1.5.2所示.(4) 按上例單擊窗口(W)行為(E) Shift + F3,打開行為面板.(5) 單擊”添加行為”按鈕,在彈出的下拉菜單中選擇播放聲音命令,打開播放聲音對話框,如圖1.5.3所示.(6) 單擊播放聲音文本框后的按鈕,在彈出選擇文件對話框中選中一個音樂文件(見圖1.5.4所示)單擊按鈕. 圖1.5.2 插入圖像和層的效果.圖1.5.3 “播放聲音”對話框圖1.5.4 “選擇文件”對話框(7) 單擊面板中的”下拉箭頭”按鈕,在彈出的下拉菜單中選擇onLoad選項,如圖1.5.5所示.(8) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.5.6所示.圖1.5.5 設(shè)置觸事件 圖1.5.6 瀏覽器中的效果實例6 插入背景圖像目的：使網(wǎng)頁在顏色方面不是那么單調(diào).效果如右圖所示. 要點：本例主要學(xué)習(xí)如果把一張圖片作為網(wǎng)頁的背景圖像,使網(wǎng)頁更加好看.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”插入背景圖像”的網(wǎng)頁,如圖1.6.1所示.如圖1.6.1 ”插入背景圖像”網(wǎng)頁的建立(3) 在網(wǎng)頁中輸入文字,并在網(wǎng)頁下面的中,改變文字的大小和位置,如圖1.6.2所示.(4) 在網(wǎng)頁空白處按右鍵,選擇頁面屬性(T)出現(xiàn)對話框,如圖1.6.3所示,(5) 單擊頁面屬性對話框中的出現(xiàn)選擇文件對話框,如圖1.6.4所示.按.(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.6.5所示.圖1.6.2 在網(wǎng)頁中輸入文字圖1.6.3 頁面屬性的對話框 圖1.6.4 選擇文件對話框圖1.6.5 在瀏覽器中的效果 實例7 文本超鏈接目的：制作具有超鏈接的網(wǎng)頁.如右圖所示. 要點：本例學(xué)習(xí)如何設(shè)置超鏈接,它是制作網(wǎng)站的最基本技術(shù),因為現(xiàn)在的網(wǎng)站可以說沒有一個不用到它,因此學(xué)會它是非常有必要的.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”超鏈接”的網(wǎng)頁,如圖1.7.1所示. 圖1.7.1 ”超鏈接”的網(wǎng)頁建立(3) 按上例的步驟制作同樣的網(wǎng)頁,并在詩的下面加多一行字”更多的詩”,效果如圖1.7.2所示.(4)選擇最后一行字”更多的字”點擊右鍵,選擇創(chuàng)建鏈接(L)出現(xiàn)選擇文件對話框,如圖1.7.3所示.然后選擇你選定的網(wǎng)頁,即當(dāng)點擊文字”更多的詩”時所顯示的網(wǎng)頁,你應(yīng)該先做好它.最后按.圖1.7.2 添加字后的網(wǎng)頁圖1.7.3 選擇文件的對話框(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.7.4所示.當(dāng)你點擊”更多的字”時,網(wǎng)頁就會轉(zhuǎn)到你所鏈接的網(wǎng)頁. 圖1.7.4 在瀏覽器中的效果實例8 圖像熱點鏈接目的：制作出具有圖像鏈接的網(wǎng)頁,即當(dāng)你點擊圖像中的某一處時,網(wǎng)頁會轉(zhuǎn)到它所鏈接的網(wǎng)頁去,最后如右圖所示. 要點：本例所用到的技術(shù)跟上例差不多,上例是文本的超鏈接,而本例是圖像的一小處的超鏈接.特別是介紹照片中很多人的其中一個是誰時,就能用到這種技術(shù).創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”圖像熱點鏈接”的網(wǎng)頁,如圖1.8.1所示. 圖1.8.1 ”圖像熱點鏈接”的網(wǎng)頁的建立(3) 按以上幾例所講到的技術(shù)在網(wǎng)頁中插入圖片,并調(diào)整圖片的大小和位置,結(jié)果如圖1.8.2所示.(4) 選擇圖片,點擊下面的,鼠標(biāo)就變成一個”+”,然后在圖片中選擇區(qū)域的大小,如圖1.8.3所示.(5) 在后面的文本框里填入你要鏈接的文件或者點擊下面右邊的,出現(xiàn)選擇文件對話框, 如圖1.8.4所示,并在后面寫上”了解我更多”. 圖1.8.2 插入圖片后的網(wǎng)頁圖1.8.3 選擇圖片的區(qū)域圖1.8.4 選擇文件對話框(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.8.5所示.當(dāng)你鼠標(biāo)移到剛才你所選的區(qū)域時,就會顯示”了解我更多”點擊它網(wǎng)頁就會轉(zhuǎn)到你所鏈接的網(wǎng)頁. 圖1.8.5 在瀏覽器中的效果實例9 彈出信息目的：制作一些能自動跳出信息的網(wǎng)頁.如右圖所示. 要點：本例主要應(yīng)用了”添加行為”的技術(shù),跟例5有點相像,也是用到”添加行為”技術(shù).創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 選擇文件(F)打開(Q) Ctrl + 0命令,打開打開對話框(見圖1.9.1),選擇上例的網(wǎng)頁,如圖1.9.2所示.圖1.9.1 “打開”對話框(3) 按上例單擊窗口(W)行為(E) Shift + F3,打開行為面板.如圖1.9.3所示.(4) 單擊”添加行為”按鈕,在彈出的下拉菜單中選擇彈出信息命令,打開彈出信息對話框并文本框里寫入”歡迎光臨本站”.按確定退出. 如圖1.9.4所示(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.9.5所示. 圖1.9.3 “行為”面板 圖1.9.2 打開上例的網(wǎng)頁圖1.9.4 “彈出信息”對話框圖1.9.5 在瀏覽器中的效果實例10 自動跳轉(zhuǎn)鏈接制作”自動跳轉(zhuǎn)鏈接”效果的網(wǎng)頁. 本例主要實現(xiàn)網(wǎng)站首先自動跳轉(zhuǎn)功能,當(dāng)用戶瀏覽網(wǎng)頁時,系統(tǒng)會自動進(jìn)入新的網(wǎng)址.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 選擇文件(F)打開(Q) Ctrl + 0命令,打開打開對話框(見圖1.10.1),選擇例8的網(wǎng)頁,如圖1.10.2所示. 圖1.10.1 “打開”對話框(3) 單擊文檔窗口左下角標(biāo)簽欄中的標(biāo)簽,選擇窗口(W)行為(E) Shift + F3命令,打開行為面板,如圖1.10.3所示 .(4) 單擊”添加行為”按鈕,在彈出的下拉菜單中選擇轉(zhuǎn)到URL命令,打開轉(zhuǎn)到URL對話框,并在URL后面的文本里輸入一個網(wǎng)站如,如圖1.10.4所示.單擊確定.(5) 單擊行為面板中的”下拉箭頭”按鈕,在彈出的下拉菜單中選擇onload項,即設(shè)置觸發(fā)事件為當(dāng)用戶瀏覽系統(tǒng)自動進(jìn)入相應(yīng)的網(wǎng)址,如圖1.10.5所示,(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.10.6所示. 圖1.10.3 行為面板圖1.10.2 打開例8的網(wǎng)頁 圖1.10.4 “轉(zhuǎn)到URL”對話框 圖1.10.5 設(shè)置觸發(fā)事件 圖1.10.6 在瀏覽器中的效實例11 創(chuàng)建交換圖制作”創(chuàng)建交換圖”效果的網(wǎng)頁.如右圖所示. 本例主要講述交換圖的創(chuàng)建過程,用來交換的圖必須和原圖大小相同.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 按上例創(chuàng)建一個名為”創(chuàng)建交換圖”的網(wǎng)頁,如圖1.8.1所示. 圖1.11.1 ”創(chuàng)建交換圖”的網(wǎng)頁建立(3) 選擇插入(I)表格(T) Ctrl + Alt命令,出現(xiàn)表格對話框,如圖1.11.2所示,(4) 在表格對話框中,輸入行數(shù)和列數(shù)都為1.按確定插入網(wǎng)頁中,并調(diào)整表格的大小,使其居中,效果如呼1.11.3所示.(5) 單擊表格里面,選擇插入(I)圖像對象(G)鼠標(biāo)經(jīng)過圖像(R)命令,出現(xiàn)對話框.如圖1.11.4所示.(6) 在后的文本輸入原始圖像的路徑,或單擊選擇一個圖片為原始圖像. 圖1.11.2 表格對話框 圖1.11.3 插入表格后的網(wǎng)頁 圖1.11.4 插入鼠標(biāo)經(jīng)過圖像的對話框(7) 同樣為選擇一個圖片作為鼠標(biāo)經(jīng)過的圖像.最后按確定.效果如圖1.11.5所示. 圖1.11.5 插入圖像后的效果(8) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果,如圖1.11.6所示.當(dāng)鼠標(biāo)經(jīng)過圖像時的效果如圖1.11.7所示. 圖1.11.6 圖1.11.7 實例12 跳轉(zhuǎn)菜單制作”跳轉(zhuǎn)菜單”效果的網(wǎng)頁.如右圖所示. 本例主要應(yīng)用跳轉(zhuǎn)菜單呈菜單或者列表的形式制作,當(dāng)用戶選擇其中的項目時,會自動從當(dāng)前頁面跳轉(zhuǎn)到相應(yīng)頁面中.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”跳轉(zhuǎn)菜單”的網(wǎng)頁,如圖1.12.1所示. 圖1.12.1 ”跳轉(zhuǎn)菜單”的網(wǎng)頁的建立(3) 選擇插入(I)表單(F)跳轉(zhuǎn)菜單(J)命令,出現(xiàn)”插入跳轉(zhuǎn)菜單”對話框,如圖1.12.2所示.(4) 在”插入跳轉(zhuǎn)菜單”對話框中的后面輸入要跳轉(zhuǎn)菜單名,在后面輸入該跳轉(zhuǎn)菜單的地址,再按添加其它的菜單.(如圖1.12.3),按確定.(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.12.4所示. 圖1.12.2 ”插入跳轉(zhuǎn)菜單”對話框圖1.12.3 ”插入跳轉(zhuǎn)菜單”的設(shè)置 圖1.12.4 在瀏覽器中的效果實例13 插入FLASH文本制作”插入FLASH文本”效果,使網(wǎng)頁具有動態(tài)美感.如右圖所示. 本例主要學(xué)習(xí)如何插入FLASH文本技術(shù).創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”插入FLASH文本”的網(wǎng)頁,如圖1.13.1所示. 圖1.13.1 ”插入FLASH文本”的網(wǎng)頁建立(3) 選擇插入(I)媒體(M)FLASH文本(L)命令,打開FLASH文本對話框,如果系統(tǒng)提示要保存的話,你就先保存網(wǎng)頁,如圖1.13.2所示.(4) 輸入你想要寫的文字,并改變字體的大小,格式,顏色,位置等設(shè)置,最終效果如圖1.13.3所示.按確定.(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.13.4所示. 圖1.13.2 “FLASH文本”對話框圖1.13.3 “FLASH文本”對話框的設(shè)置 圖1.13.4 在瀏覽器中的效果實例14 插入FLASH按鈕制作”插入FLASH按鈕”效果的網(wǎng)頁.如右圖所示. 本例主要學(xué)習(xí)如何插入FLASH按鈕技術(shù). 創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”插入FLASH文本”的網(wǎng)頁,如圖1.14.1所示. 圖1.14.1 ”插入FLASH文本”的網(wǎng)頁的建立(3) 選擇插入(I)媒體(M)FLASH按鈕(F)命令,打開FLASH按鈕對話框, 如果系統(tǒng)提示要保存的話,你就先保存網(wǎng)頁,如圖1.14.2所示.(4) 在FLASH按鈕對話框的后面可以選擇按鈕的樣式,在后面輸入”播放”或者其它,點擊后面的選擇所要鏈接文檔的URL地址,可以不設(shè)置,在下拉表框中指定所要鏈接文本的打開方式,可以不設(shè)置.其它的就可以按自己的意愿設(shè)置,按確定.(如果在文本框中指定的SWF格式的文件名路徑或文件名中含有中文字符,系統(tǒng)會彈出要求你重新輸入的提示框)圖1.14.2 FLASH按鈕對話框(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.14.3所示. 圖1.14.3 在瀏覽器中的效果實例15 插入FLASH動畫目的：制作”插入FLASH動畫”效果.如右圖所示. 要點：本例主要應(yīng)用FLASH動畫的矢量動畫制作完成,它下載速度快,在網(wǎng)頁中經(jīng)常應(yīng)用,本例學(xué)習(xí)如何插入FLASH動畫.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”插入FLASH動畫”的網(wǎng)頁,如圖1.15.1所示.圖1.15.1 ”插入FLASH動畫”的網(wǎng)頁建立(3) 選擇插入(I)媒體(M)FLASH (F)命令,打開FLASH對話框,如圖1.15.2所示.選擇要插入的FLASH按確定.(4) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.15.3所示.圖1.15.2 FLASH對話框圖1.15.3 在瀏覽器中的效果實例16 插入視頻目的：制作”插入視頻”效果.如右圖所示. 要點：本例主要學(xué)習(xí)如何插入視頻,即在網(wǎng)頁中可以觀看視頻文件.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”插入FLASH動畫”的網(wǎng)頁,如圖1.16.1所示. 圖1.16.1 ”插入FLASH動畫”的網(wǎng)頁建立(3) 選擇插入(I)媒體(M)插件(P)命令,打開插件對話框,如圖1.16.2所示.選擇要插入的視頻文件按確定.(4) 在網(wǎng)頁中調(diào)整播放窗口的大小和位置,如圖1.16.3所示.(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.16.4所示. 圖1.16.2 插件對話框 圖1.16.3 調(diào)整播放窗口 圖1.16.4 在瀏覽器中的效果實例17 顯示彈出式菜單制作”顯示彈出式單”效果.如右圖所示. 本例主要運用”顯示彈出式菜單”的技術(shù),這種技術(shù)雖然不是在很多網(wǎng)頁中能看到,但它也有它獨特的用處,比如說網(wǎng)中的欄目太多而放不下時,就可以進(jìn)行歸類應(yīng)用這種技術(shù),從而使網(wǎng)頁清潔好看.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”顯示彈出式菜單”的網(wǎng)頁,如圖1.16.1所示.圖1.17.1 ”顯示彈出式菜單”的網(wǎng)頁(3) 按上幾例所學(xué)知識,在網(wǎng)頁中插入一個3行1列的表格,并在每個單元表格內(nèi)輸入文字,調(diào)整文字的大小和位置,效果如圖1.17.2所示.(4) 選擇表格內(nèi)的”電影欣賞”,在下面的后面文本框里輸入” * “以表示”電影欣賞”是具有超鏈接的.(5) 選擇窗口(W)行為(E) Shift + F3命令,打開行為面板,如圖1.17.3所示(6) 單擊”添加行為”按鈕,在彈出的下拉菜單中選擇顯示彈出式菜單命令,打開顯示彈出式菜單對話框,如圖1.17.4所示. 圖1.17.2 插入表格后網(wǎng)頁圖1.17.3 行為面板 圖1.17.4 ”顯示彈出式菜單”對話框(7) 在后面寫上菜單名,在后面填上路徑,在后面可不設(shè)置,然后再按增加按鈕增加其它的菜單,還可以在外觀,高級,位置改變設(shè)置,按確定最終效果如圖1.17.5所示. 圖1.17.5 ”顯示彈出式菜單”對話框的設(shè)置(8) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.17.6所示.圖1.17.7 在瀏覽器中的效果實例18 框架的使用制作”框架的使用”效果.如右圖所示. 本例主要運用”框架的使用”的技術(shù),這種技術(shù)雖然不是十分流行,但在一定條件下用到這種技術(shù)卻是非常之好的.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”框架的使用”的網(wǎng)頁,如圖1.18.1所示. 圖1.18.1 ”框架的使用”的網(wǎng)頁建立(3) 選擇插入(I)HTML框架(S)上方及左側(cè)嵌套(O)命令,插入后可以用鼠標(biāo)對框架進(jìn)行調(diào)整,或者按住鍵盤的ALT鍵,再點擊其中一個框架就會出現(xiàn)這個框架的屬性,必要時可修改,最終效果如圖1.18.2所示. (4) 在框架中輸入文字,并調(diào)整大小和位置,最終效果如圖1.18.3所示.(5) 選擇框架中的文字”動畫欣賞”,按右鍵選擇創(chuàng)建鏈接(L),打開選擇文件對話框(見圖1.18.4所示),選擇要鏈接的文件,按確定退出. (6) 在下面的下拉菜單中mainframe.其它可不設(shè)置.圖1.18.2 插入框架后的網(wǎng)頁圖1.18.3 框架中插入文字的網(wǎng)頁 圖1.18.4 選擇文件對話框(7) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,當(dāng)點擊”動畫欣賞”觀看在瀏覽器中的效果.如圖1.18.5所示. 圖1.18.5 當(dāng)點擊”動畫欣賞”觀看在瀏覽器中的效果實例19 創(chuàng)建網(wǎng)站相冊集目的：制作”創(chuàng)建網(wǎng)站相冊集”效果.如右圖所示. 要點：本例主要應(yīng)用”創(chuàng)建網(wǎng)站相冊集”命令創(chuàng)建一個電子相同,單擊頁面中的某一張相片,可打開該相片的效果圖.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”顯示彈出式菜單”的網(wǎng)頁,如圖1.19.1所示. 圖1.19.1 ”顯示彈出式菜單”的網(wǎng)頁建立(3) 選擇命令(C)創(chuàng)建網(wǎng)站相冊(C)命令,彈出創(chuàng)建網(wǎng)站相冊對話框,完成該對話框的設(shè)置, 如圖1.19.2所示,單擊確定按鈕.(創(chuàng)建過程是同Dreamweaver MX啟動Fireworks來自動完成的,所以系統(tǒng)中必須安裝Fireworks軟件,才可以實現(xiàn)機(jī)冊的創(chuàng)建)(4) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.19.3所示.圖1.19.2 創(chuàng)建網(wǎng)站相冊對話框圖1.19.3 觀看在瀏覽器中的效果實例20 插入按鈕目的：制作”插入按鈕”效果.如右圖所要點：本例主要學(xué)習(xí)如何插入按鈕,特別在動態(tài)網(wǎng)態(tài)中,按鈕是不可缺少的,因此必須掌握.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”插入按鈕”的網(wǎng)頁,如圖1.20.1所示.圖1.20.1 ”插入按鈕”的網(wǎng)頁建立(3) 選擇插入(I)表單(F)文本區(qū)域(A)命令,并可以在下面改變其的大小等等,效果如圖1.20.2所示.(4) 在”文本區(qū)域”下面再插入二個按鈕,選擇插入(I)表單(F)按鈕(B)命令, 并可以在下面改變其的大小,按鈕名等等,設(shè)置完成如圖1.20.3所示.(當(dāng)插入”重置”按鈕時,在后面應(yīng)選擇)(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.20.4所示.圖1.20.2 插入文本區(qū)域 圖1.20.3 插入按鈕 圖1.20.4 觀看在瀏覽器中的效果實例21 頁面配色方案制作”頁面配色方案.如右圖所. 本例主要應(yīng)用”設(shè)定配色方案”命令來改變網(wǎng)頁背景顏色以及文本鏈接的顏色.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”頁面配色方案”的網(wǎng)頁,如圖1.21.1所示.圖1.21.1 ”頁面配色方案”的網(wǎng)頁(3) 按以上所講的知識,在網(wǎng)頁中手稿表格,并在表格中插入圖片和文字,如圖1.21.2所示(4) 選擇命令(C)設(shè)置配色方案(T)命令,打開設(shè)置配色方案對話框,如圖1.21.3所示.(5) 在對話框的列表框中選擇適當(dāng)?shù)念伾?在列表框中選擇指定的配色方案,如圖1.21.4所示,(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.21.5所示. 圖1.21.2 插入表格 圖1.21.3 “設(shè)置配色方案”對話框圖1.21.4 選擇適當(dāng)?shù)呐渖桨?圖1.21.5 觀看在瀏覽器中的效果實例22 CSS的使用制作”CSS的使用”效果.如右圖所示本例主要學(xué)習(xí)如何使用CSS,CSS在很多網(wǎng)頁中都有使用,因為有了它,制作網(wǎng)頁就更加方便簡單.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”CSS的使用”的網(wǎng)頁,如圖1.22.1所示. 圖1.22.1 ”CSS的使用”的網(wǎng)頁建立(3) 插入一個有二行二列的表格,調(diào)整表格的大小和位置,并在每個單元表格內(nèi)寫入一首詩,如圖1.22.2所示.提示:由于每首詩的字體和位置都沒有調(diào)整好,還有每個單元表格的背景也沒有設(shè)置好,如果一個一個單元表格輪著來調(diào)整的話,那就很浪費時間,因此使用了CSS,它就一個模板直接套在每個單元表格就可以了.(4) 在表格中按右鍵選擇CSS樣式(C)新建(N)彈出對話框,如圖1.22.3所示. 圖122.2 表格和文字的插入圖1.22.3 “新建CSS樣式”對話框(5) 在“新建CSS樣式”對話框的后面輸入”gushi”作為名稱,其它不用改變.按確定,彈出保存對話框,如圖1.22.4所示.(6) 在對話框中,輸入gushi作為文件名,按確定.彈出CSS樣式定義對話框,如圖1.22.5所示.(7) 在的列表框中,選擇設(shè)置的分類,然后在右邊的中設(shè)置想要的效果,現(xiàn)在把那些詩設(shè)置字體為隸書,大小為18號,居中,表格背景為灰色.按確定.(8) 在網(wǎng)頁中右擊一個單元表格,選擇樣式(C)gushi,那表格里的文字格式就變成剛才你設(shè)置的格式了,如圖1.22.6所示.把其它的單元表格也應(yīng)用到CSS,這樣就輕易把全部都變成了自己設(shè)置的格式了.(9) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.22.7所示. 圖1.22.4 保存對話框 圖1.22.5 CSS樣式定義對話框圖1.22.6 應(yīng)用了CSS(gushi)的效果 圖1.22.7 觀看在瀏覽器中的效果實例23 自動格式化表格目的：制作”自動格式化表格”效果.如右圖所示要點：本例主要應(yīng)用”格式化表格”命令,學(xué)習(xí)如何應(yīng)用.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 選擇文件(F)打開(O) Ctrl +O命令,打開打開對話框(見圖1.23.1),打開網(wǎng)頁”課程表”,如圖1.23.2所示. 圖1.23.1 “打開”對話框(3) 單擊表格邊框選中表格,選擇命令(C)格式化表格(F)命令,打開格式化表格對話框,從格式列表框中選中AltRows:Green&Yellow選項,如圖1.23.3所示.(4) 單擊確定按鈕,對選中的表格應(yīng)用所選樣式,如圖1.23.4所示.(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.23.5所示.圖1.23.2所示 打開”課程表圖1.23.3 “格式化表格”對話框圖1.23.4 自動格式化表格 圖1.23.5 觀看在瀏覽器中的效果實例24 使用表格間隔圖像目的：制作”使用表格間隔圖像”效果.如右圖所示要點：本列主要應(yīng)用表格的”表格間隔圖像”屬性來控制表格的尺寸.間隔圖像是一個不會在瀏覽器中顯示的透明圖像,主要用于控制自動伸展表格的屬性,它會保持頁面上每個表格和單元格的設(shè)置寬度.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 選擇文件(F)打開(O) Ctrl +O命令,打開打開對話框(見圖1.24.1),打開網(wǎng)頁”課程表”,如圖1.24.2所示. 圖1.24.1 “打開”對話框(3) 選擇查看(V)表格視圖(T)布局視圖(L) Ctrl + F6命令,切換到”布局視圖”工作界面,如圖1.24.3所示.(4) 點擊標(biāo)題菜單中選擇添加間隔圖像(A)命令,如圖1.24.4所示.(5) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.24.5所示.圖1.24.2 打開”課程表”網(wǎng)頁 圖1.24.3 “布局視圖”工作界面圖1.24.4 選擇”添加間隔圖像圖1.24.5 觀看在瀏覽器中的效果實例25 單元格自動延伸目的：制作”單元格自動延伸”效果.如右圖所示. 要點：本例主要應(yīng)用布局表格的”列設(shè)置為自動伸展”功能,調(diào)整單元格寬度根據(jù)窗口的大小自動改變.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 選擇文件(F)打開(O) Ctrl +O命令,打開打開對話框(見圖1.25.1),打開網(wǎng)頁”單元格自動延伸”如圖1.25.2所示. 圖1.25.1 “打開”對話框(3) 點擊網(wǎng)頁編輯區(qū)上面的按鈕,切換到布局視圖,如圖1.25.3所示.(4) 點擊標(biāo)題菜單中選擇列設(shè)置為自動伸展(K)命令,如圖1.24.4所示.(5) 設(shè)置了自動伸展屬性的列會顯示為標(biāo)識,效果如圖1.25.5所示.(6) 選擇文件(F)另存為(A) Ctrl+Shift+S命令,保存文件.按快捷鍵F12,觀看在瀏覽器中的效果.如圖1.25.6所示. 圖1.25.2 打開”單元格自動延伸”圖1.25.3 切換到布局視圖圖1.25.4 “列設(shè)置為自動伸展”命令圖1.25.5 設(shè)置列為自動伸展圖1.25.6 觀看在瀏覽器中的效果實例26 熾熱文字制作”熾熱文字”效果.如右圖所示. 本例要主應(yīng)用JavaScript語言制作熾熱文字效果.創(chuàng)作步驟(1) 啟動Dreamweaver MX 軟件.(2) 新建一個名為”熾熱文字”的網(wǎng)頁,如圖1.26.1所示.圖1.26.1 ”熾熱文字”的網(wǎng)頁建立(3) 單擊編輯區(qū)上面的按鈕，切換代碼視圖工作區(qū)，如圖1.26