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

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