第一篇：dreamweaver網(wǎng)頁制作教案
dreamweaver網(wǎng)頁制作教案
（Dreamweaver MX）
一、Dreamweaver MX中文版建站初步
建立一個(gè)網(wǎng)站，首先要在本地機(jī)器上做好網(wǎng)站，再傳到網(wǎng)上的虛擬空間上?，F(xiàn)在免費(fèi)的網(wǎng)頁空間很少了，在http://。
◇使用屬性檢查器：選中示例中的圖像，也可以是文字，點(diǎn)擊屬性面板中的“瀏覽文件”圖標(biāo)。
◇選中一個(gè)文件。會(huì)出現(xiàn)一個(gè)文件相對(duì)于“文檔”，“站點(diǎn)根目錄的選擇”。文檔相對(duì)路徑是最適合用于本地鏈接的路徑類型，適合絕大多數(shù)Web站點(diǎn)，推薦使用。
◇根相對(duì)路徑：如果在一個(gè)使用多臺(tái)服務(wù)器的大型Web站點(diǎn)或一臺(tái)服務(wù)器上有多個(gè)站點(diǎn)的情況下工作，可能需要使用這種類型的路徑。很少用到這種路徑。如果沒有服務(wù)器的控制權(quán)限，不要使用這種方式！
◇絕對(duì)路徑：完整的URL，稱作絕對(duì)路徑。例如在鏈接域輸入http://vip.5dmedia.com/fuguotao
◇從打開文檔的選取中創(chuàng)建鏈接：選中文字，按Shift鍵，拖動(dòng)出現(xiàn)“指向文件”圖標(biāo)，把“指向文件”圖標(biāo)拖向目標(biāo)文件，就會(huì)建立鏈接。
◇選擇被鏈接文檔要打開的位置：
若要使被鏈接文檔不出現(xiàn)在當(dāng)前窗口或框架中，從屬性面板的“目標(biāo)”彈出式菜單選取一個(gè)選項(xiàng)。
_blank 在新的未命名的瀏覽器窗口中加載鏈接文檔。
_parent 在父框架頁或包含該鏈接的框架窗口中加載鏈接文檔。如果包含鏈接的框架不是嵌套的，則鏈接文檔將加載到整個(gè)瀏覽器窗口中。_self 將鏈接文檔加載到與鏈接相同的框架或窗口中，該目標(biāo)是默認(rèn)值，所以通常您不需要指定它。
_top 將在整個(gè)瀏覽器窗口中加載鏈接文件，同時(shí)移除所有框架。
一個(gè)網(wǎng)站中，第一級(jí)鏈接或者導(dǎo)航鏈接選擇_self，第二級(jí)鏈接和友情鏈接選擇_blank。
第二部分：使用錨
簡(jiǎn)明步驟：選中文本→在目標(biāo)文檔中插入錨標(biāo)記→命名→拖動(dòng)“指向文件”圖標(biāo)到文本?！箧溄拥轿臋n中的指定位置：在需要插入錨的地方，點(diǎn)一下光標(biāo)，然后單擊常用面板上的命名錨記工具。
鍵入錨記名稱，一個(gè)站點(diǎn)中的錨記名稱只可以是唯一的，否則會(huì)出現(xiàn)錯(cuò)誤。
在文檔中選取要?jiǎng)?chuàng)建鏈接的文本，打開您需要鏈接的命名錨記所在文檔，不一定要是當(dāng)前文檔，可以是站點(diǎn)中的其它文檔，點(diǎn)擊屬性面板中的“指向文件”圖標(biāo)，并將它拖動(dòng)到您需要鏈接的錨記處。
第三部分：使用空鏈接
使用空鏈接可以為頁面上的對(duì)象或文本附加行為。創(chuàng)建步驟： 1.在文檔窗口中，選中要設(shè)置鏈接的文本、圖像或其他對(duì)象。2.在屬性面板的鏈接框中，只輸入一個(gè)“#”號(hào)。3.如果單擊這種地址為一個(gè)“#”的鏈接，無論當(dāng)前你處于文檔的什么地方，都會(huì)自動(dòng)跳轉(zhuǎn)到文檔的開頭位置。很多人非常討厭這種情況，因此出現(xiàn)很多插件。可以用“###”來代替“#”，單擊這樣的鏈接的時(shí)候，會(huì)保持當(dāng)前頁面的瀏覽位置。4.還可以在屬性面板的鏈接框中輸入javascript:;創(chuàng)建空鏈接。第四部分：創(chuàng)建javascript腳本鏈接 1.在文檔窗口中選取文本，圖象或?qū)ο?/p>
2.在“屬性”檢查器的“鏈接”欄中鍵入javascript:，其后緊接JavaScript代碼或函數(shù)調(diào)用。
例如在鏈接欄中鍵入javascript:alert('哈哈你上當(dāng)了')創(chuàng)建一個(gè)鏈接，點(diǎn)擊鏈接后就會(huì)出現(xiàn)一個(gè)警告框
第五部分：創(chuàng)建電子郵件鏈接
方法一：選取需要?jiǎng)?chuàng)建鏈接的文本或者圖像，點(diǎn)擊常用面板中的“電子郵件鏈接”工具，輸入郵件地址。方法二：選取需要?jiǎng)?chuàng)建鏈接的文本或者圖像，在屬性面板中的鏈接欄輸入mailto:郵件地址。
第六部分：創(chuàng)建跳轉(zhuǎn)菜單，例如制作一個(gè)友情鏈接。
首先將插入點(diǎn)放在要插入鏈接的位置。點(diǎn)擊表單面板中的跳轉(zhuǎn)工具
在插入跳轉(zhuǎn)菜單對(duì)話框中，點(diǎn)添加項(xiàng)添加新鏈接。
在屬性面板中選擇類型為“菜單”。
在瀏覽器中發(fā)布如圖：
在屬性面板中選擇類型為“列表”高度為3。
在瀏覽器中發(fā)布如圖：
點(diǎn)擊屬性面板中的列表值，可以修改列表值。
第七部分：給鏈接增加提示，給鏈接增加快捷鍵。首先將插入點(diǎn)放在要插入鏈接的位置。點(diǎn)擊常用面板上的超級(jí)鏈接工具。
設(shè)置鏈接參數(shù)。
標(biāo)題是指當(dāng)指向鏈接會(huì)出現(xiàn)提示。
訪問鍵是指按鍵盤上的快捷鍵會(huì)選中鏈接。例如在實(shí)例中按Alt+D鍵會(huì)選中5D多媒體。
第二篇：Dreamweaver網(wǎng)頁制作教案
認(rèn)識(shí)Dreamweaver
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)?！緦W(xué)習(xí)步驟】
1、Dreamweaver的功能
Dreamweaver可以像普通的字處理軟件一樣編輯Internet上以HTML格式保存的所有文件，也就是網(wǎng)頁；它支持動(dòng)態(tài)HTML，可以在網(wǎng)頁中產(chǎn)生動(dòng)畫；還可以在網(wǎng)頁中插入各種插件，以產(chǎn)生特殊效果。
Dreamweaver可用于管理站點(diǎn)，它像文件夾一樣創(chuàng)建和打開站點(diǎn)，用不同的方式查看站點(diǎn)中各個(gè)網(wǎng)頁之間的關(guān)系，調(diào)整站點(diǎn)的組織結(jié)構(gòu)，使整個(gè)站點(diǎn)條理清晰。
2、Dreamweaver的窗口
（1）標(biāo)題欄（2）菜單欄（3）工具欄（4）視圖欄（5）文件夾列表（6）
工作區(qū)
3.網(wǎng)頁工作區(qū)的三個(gè)視圖方式選項(xiàng)
它們分別是“普通”、“HTML”“預(yù)覽”，它們之間的相互切換十分容易實(shí)現(xiàn) 的。
普通視圖方式是Dreamweaver對(duì)網(wǎng)頁所見即所得編輯方式的最佳體現(xiàn)，在此方式下，可以
像在Word中那樣直接進(jìn)行各種編輯操作，實(shí)現(xiàn)網(wǎng)頁編輯的所有功能。HTML視圖實(shí)際上是一個(gè)文本編輯器，其中給出了普通視圖方式下所件網(wǎng)頁的HTML代碼。在這里可以用菜單命令進(jìn)行復(fù)制、粘貼、刪除、查找等操作。對(duì)于HTML語言中的不同成分均用不同的顏色顯示，這樣比較容易區(qū)分各種語法成分。
為了在制作網(wǎng)頁過程中能夠隨時(shí)查看網(wǎng)頁的實(shí)際效果，Dreamweaver提供了預(yù)覽視圖方式。
4.安裝dreameaver的方法
安裝及注冊(cè) 5.關(guān)閉dreameaver 6.保存網(wǎng)頁的方法
三、小結(jié)
Dreamweaver的基本知識(shí)
建立一個(gè)簡(jiǎn)單的站點(diǎn)
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；建立一個(gè)簡(jiǎn)單的站點(diǎn)；進(jìn)行簡(jiǎn)單的網(wǎng)頁編輯。
【學(xué)習(xí)步驟】
1、創(chuàng)建空白站點(diǎn)。
執(zhí)行菜單命令“文件”—“新建”—“站點(diǎn)”，就會(huì)出現(xiàn)8中站點(diǎn)向?qū)?。出于?jiǎn)單，可
選擇“空站點(diǎn)”按鈕，并在“指定新站點(diǎn)的位置”框中填入站點(diǎn)的位置。在指定新站點(diǎn)的位置后，單擊“確定”即建成一個(gè)空站點(diǎn)。
2、建立一個(gè)簡(jiǎn)單的文字網(wǎng)頁
建立了一個(gè)站點(diǎn)之后，就應(yīng)該在站點(diǎn)中加入網(wǎng)頁了。① 創(chuàng)建空白網(wǎng)頁
執(zhí)行菜單命令“文件”—“新建”—“網(wǎng)頁”，就會(huì)出現(xiàn)一對(duì)話框，選擇“普通網(wǎng)頁”
模板并單擊“確定”即建立了一個(gè)新的空白頁面。
② 網(wǎng)頁工作區(qū)的三個(gè)視圖方式選項(xiàng)
它們分別是“普通”、“HTML”“預(yù)覽”，它們之間的相互切換十分容易實(shí)現(xiàn) 的。
普通視圖方式是Dreamweaver對(duì)網(wǎng)頁所見即所得編輯方式的最佳體現(xiàn)，在此方式下，可以像在Word中那樣直接進(jìn)行各種編輯操作，實(shí)現(xiàn)網(wǎng)頁編輯的所 有功能。
HTML視圖實(shí)際上是一個(gè)文本編輯器，其中給出了普通視圖方式下所件網(wǎng)頁的HTML代碼。在這里可以用菜單命令進(jìn)行復(fù)制、粘貼、刪除、查找等操作。對(duì)于HTML語言中的不同成分均用不同的顏色顯示，這樣比較容易區(qū)分各種語法成分。為了在制作網(wǎng)頁過程中能夠隨時(shí)查看網(wǎng)頁的實(shí)際效果，Dreamweaver提供了預(yù)覽視圖方式。
③ 輸入文本
網(wǎng)頁中最基本的也是最重要的部分就是網(wǎng)頁中由文本構(gòu)成的內(nèi)容，因此制作 網(wǎng)頁首先要從文本輸入開始。
3、設(shè)置網(wǎng)頁中文字的字體、顏色、大小和效果
① 在文本開始處按下鼠標(biāo)左鍵，不放手拖到結(jié)束處，選擇要設(shè)置的文本塊。② 執(zhí)行菜單命令“格式—字體”。
③ 在“字體”對(duì)話框中，單擊“字體”選項(xiàng)卡。
④ 在字體選擇窗口中，選定所需要的字體，再確定文本的字型、大小、顏色、效果等。⑤ 按“確定”即可。
4、網(wǎng)頁編輯
（1）將圖片插入網(wǎng)頁（2）將剪貼畫插入網(wǎng)頁（3）加入GIF動(dòng)畫（4）保存嵌入式圖形文件（5）使用圖片工具欄（6）設(shè)置圖片屬性（7）設(shè)置網(wǎng)頁背景（8）設(shè)置超鏈接（9）應(yīng)用框架（10）表單的使用
5、小結(jié)
簡(jiǎn)單站點(diǎn)的建立過程
設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁?！緦W(xué)習(xí)步驟】
設(shè)計(jì)頁面時(shí)，經(jīng)常會(huì)從一個(gè)頁面打開一個(gè)子窗口以供瀏覽者查看。通常，這種子窗口中的內(nèi)容一經(jīng)瀏覽者看過，對(duì)于瀏覽者而言就不再需要，而他們常常會(huì)忘記關(guān)掉這些小窗口，致使許多的瀏覽器窗口打開著，耗用大量的資源。因此我們可以將子窗口設(shè)計(jì)成經(jīng)過一段時(shí)間后可以自動(dòng)關(guān)閉的形式。1.在本地站點(diǎn)中生成一個(gè)Smlple文件夾。
2.在Smlple文件夾中，生成名為Index.html以及名為firstpage.html的文件。3.雙擊Index.html，打開該文檔，進(jìn)入到文檔的設(shè)計(jì)視圖窗口中。4.單擊菜單View/Head Content，顯示文檔的頭部區(qū)域。
5.單擊設(shè)計(jì)視圖窗口中的文檔頭部窗格。選擇菜單Insert/Invisible Tags/Script，打開Inset Script對(duì)話框。如圖所示，在Language下拉列表框中選擇javascript選項(xiàng)，并在Coctento文本框中輸入“setTimeout(“self.close()”，15000)”。單擊OK按鈕，完成在文檔頭部插入15秒后自動(dòng)關(guān)閉子窗口的腳本。在代碼中，15000表示15000毫秒，也即15秒，也可以根據(jù)需要將之修改為自己需要的時(shí)間毫秒數(shù)。
設(shè)置時(shí)間 6.在文檔窗口中輸入“關(guān)閉”字樣，在屬性面板上的Link文本框中輸入“###”，將其設(shè)置為一個(gè)空鏈接。
7.在狀態(tài)欄左端的快速標(biāo)記編輯器上，單擊標(biāo)記按鈕。選中“關(guān)閉”鏈接，然后按下Ctrl+T組合鍵，打開快速標(biāo)記編輯器，進(jìn)入到快速標(biāo)記編輯器的編輯標(biāo)記模式。然后在“>”前輸入“onclick=“selfclose()””。如圖所示，設(shè)置完畢，單擊OK按鈕，確認(rèn)操作。這樣在Index.html被作為子窗口打開后，單擊該鏈接就可以立刻關(guān)閉該子窗口。
8.保存Index.html文件，并退出index.html的Dremweaver窗口。
9.現(xiàn)在開始設(shè)計(jì)fristpage.html頁面。在本地站點(diǎn)的Smlple文件夾中，雙擊 fristpage.html，打開該文檔，進(jìn)入到文檔的設(shè)計(jì)視圖窗口中。
10.在文檔中輸入“單擊這里打開會(huì)自動(dòng)關(guān)閉的子窗口”字樣。然后在屬性面板上的 Link文本框中輸入“###”，將之設(shè)置為空鏈接。
11.可以通過為該鏈接應(yīng)用Open Browser Window行為來設(shè)置單擊鏈接時(shí)打開Index.html窗口，不過更方便的方法是利用快速標(biāo)識(shí)編輯器。方法是首先將插入點(diǎn)放置到鏈接中，然后在狀態(tài)欄左端的標(biāo)識(shí)選擇器上，單擊標(biāo)識(shí)按鈕，選中整個(gè)鏈接。然后按下Ctrl+T組合鍵，打開快速標(biāo)記編輯器，進(jìn)入到快速標(biāo)記編輯器的 編輯標(biāo)識(shí)模式。再在“>”前輸入“onclick=“window.open('index.html',null','width=200px，height=200px')””（如圖所示）。設(shè)置完畢，按下回車鍵，確認(rèn)操作。
設(shè)置單擊鏈接時(shí)打開
12.上述操作就完成了本例的設(shè)置。可以單擊菜單用File/save，保存所做的工作。然后按下F12鍵，在瀏覽器中預(yù)覽頁面效果。
三、小結(jié)
用Dreamweaver設(shè)計(jì)限時(shí)自動(dòng)關(guān)閉的網(wǎng)頁
用Dreamweaver做會(huì)移動(dòng)的文字
一、學(xué)習(xí)目的
了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。
二、學(xué)習(xí)內(nèi)容
Dreamweaver的基本知識(shí)；用Dreamweaver做會(huì)移動(dòng)的文字?！緦W(xué)習(xí)步驟】
一、基本語法
文字移動(dòng)屬性的設(shè)置：方向 方式 循環(huán) 速度 對(duì)齊方式(Align) 二、小結(jié) 用Dreamweaver做會(huì)移動(dòng)的文字 用Dreamweaver創(chuàng)建導(dǎo)航條 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建導(dǎo)航條?！緦W(xué)習(xí)步驟】 一個(gè)網(wǎng)站的不同頁面使用了同一導(dǎo)航條。通過統(tǒng)一導(dǎo)航條的方法，我們可以實(shí)現(xiàn)網(wǎng)站風(fēng)格的統(tǒng)一，同時(shí)也方便了瀏覽者在不同頁面間的跳轉(zhuǎn)。用Dreamweaver可作出各種比較復(fù)雜的導(dǎo)航條。網(wǎng)頁上的導(dǎo)航條可由一個(gè)或幾個(gè)部分組成，每個(gè)部分均由各種圖像構(gòu)成，可以鏈接到不同的網(wǎng)頁頁面。在Dreamweaver中每部分中最多可設(shè)四個(gè)狀態(tài)下的圖像。一開始是一個(gè)初始圖像，當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航條部位上時(shí)則顯示另一個(gè)圖像，還可以設(shè)置當(dāng)鼠標(biāo)點(diǎn)擊后的初始圖像，以及鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上的圖像。一般地，每部位只設(shè)一到兩種狀態(tài)的圖像。因?yàn)閳D像太多了，會(huì)影響網(wǎng)頁頁面的訪問、瀏覽的速度。 導(dǎo)航條制作方法：移動(dòng)光標(biāo)到需要導(dǎo)航條的地方，單擊主菜單欄的“InsertNavigation Bar”子命令，或直接單擊Objects面板上的圖標(biāo)，彈出“Insert Navigation Bar”對(duì)話框，如下圖，此時(shí)我們可以進(jìn)行各種設(shè)置來實(shí)現(xiàn)上述功能： 在“Element Name”項(xiàng)后的文本框填入這個(gè)部位的命名，也可以不填，這時(shí)Dreamweaver 3將自動(dòng)給它命名。在Dreamweaver中每部分中最多可設(shè)四個(gè)狀態(tài)下的圖像：“Up Image”項(xiàng)是該部位的初始圖像，在其后文本框填入已準(zhǔn)備好的圖像的地址，或點(diǎn)擊右邊Browse按鈕來選擇。每個(gè)部位可只設(shè)置Up Image項(xiàng)，其下的“Over Image”、“Down Image”和“Over While Down Image”三項(xiàng)可以不設(shè)置。其中，“Over Image”項(xiàng)是鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)顯示的圖像(本例中選擇)；“Down Image”項(xiàng)是鼠標(biāo)點(diǎn)擊該部位后顯示的初始圖像；“Over While Down Image”項(xiàng)是鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上時(shí)顯示的圖像。注意：Element Name項(xiàng)和 Up Image項(xiàng)是必需的，所有的調(diào)用圖像都會(huì)在系統(tǒng)的提示下保存在Dreamweaver 3文件夾中，以便調(diào)用。 三、小結(jié) 用Dreamweaver創(chuàng)建導(dǎo)航條 用Dreamweaver創(chuàng)建導(dǎo)航條 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建導(dǎo)航條?！緦W(xué)習(xí)步驟】 當(dāng)然，還可給該部位設(shè)置超級(jí)鏈接：在下面的“When Clicked Go To URL”項(xiàng)后文本框填入鏈接到的文件的地址，或單擊Browse按鈕選擇，當(dāng)鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)，在狀態(tài)欄中可以看到鏈接到的地址。When Clicked Go To URL項(xiàng)后有一個(gè)下拉選框，這是設(shè)置超級(jí)鏈接的目標(biāo)。 接著是“Options”項(xiàng)，若選中“Preload Images”選框，則瀏覽者瀏覽頁面時(shí)，所有圖像將在頁面下載的同時(shí)全部下載，整個(gè)頁面打開的速度會(huì)慢些，但圖像間轉(zhuǎn)換會(huì)沒有延遲，選中它。反之，不選Preload Images選框，則頁面下載的同時(shí)只下載初始圖像，其它圖像按順序下載，整個(gè)頁面打開的速度較快，但圖像間轉(zhuǎn)換會(huì)有延遲。若選中“Show “Down Image”Initially”選框，則將Down Image設(shè)為初始圖像。此時(shí)，Over While Down Image項(xiàng)改為鼠標(biāo)移動(dòng)到這個(gè)部位上時(shí)顯示的圖像，Up Image項(xiàng)改為鼠標(biāo)點(diǎn)擊該部位后顯示的初始圖像，Over image項(xiàng)改為鼠標(biāo)點(diǎn)擊后當(dāng)鼠標(biāo)再次移動(dòng)到這個(gè)部位上時(shí)顯示的圖像。 最下面是“ Insert”項(xiàng)，選框中有Horizontally(水平)和Vertically(垂直)兩個(gè)選項(xiàng)。選中Horizontally為導(dǎo)航條水平展開，選中Vertically 為導(dǎo)航條垂直展開。Use Table 項(xiàng)，選中后，Dreamweaver自動(dòng)生成HTML代碼將導(dǎo)航條各部位用表格隔開。 當(dāng)一個(gè)部位設(shè)置完成后，要添加其他部位，可點(diǎn)擊對(duì)話框上方的“＋”按鈕，可按上面的步驟進(jìn)行新部位的設(shè)置。要?jiǎng)h去某一個(gè)部位，在“Nav Bar Elements”選框中先選中，再點(diǎn)擊對(duì)話框上方的“－”按鈕即可。 另外，使用設(shè)置導(dǎo)航條圖像中的高級(jí)功能，可改變文檔中基于當(dāng)前按鈕下的其他的圖像。在默認(rèn)下,單擊導(dǎo)航條中的元素時(shí),所有導(dǎo)航條中元素都會(huì)自動(dòng)地返回原來默認(rèn)的狀態(tài)。若想設(shè)置被選中圖像的上浮或是下沉的不同效果時(shí)，可用導(dǎo)航條中的高級(jí)功能：在“Behaviors”面板中的“Actions”標(biāo)簽頁，單擊其上面的“＋”號(hào)按鈕，在彈出的菜單中選擇“Set Nav Bar Image”命令，彈出Set Nav Bar Image 對(duì)話框中(見圖2)，選擇“Advanced”標(biāo)簽頁，對(duì)高級(jí)屬性進(jìn)行設(shè)置。其中，若選擇“Over Image or over while Down Image”項(xiàng)，則當(dāng)鼠標(biāo)劃過圖片時(shí)顯示其上面的圖片，有上浮或是下沉的效果，并在“Also Set Image”文本框中選擇要顯示的圖片，同時(shí)在其下面的“If Down To Image File”中選擇當(dāng)鼠標(biāo)按下時(shí)要顯示的圖片路徑；若選擇“Down Image”項(xiàng)，則當(dāng)瀏覽者單擊所選圖像后,顯示另外的圖片。 圖2 存盤后，按F12鍵測(cè)試所作導(dǎo)航條。 三、小結(jié) 用Dreamweaver創(chuàng)建導(dǎo)航條 用Dreamweaver創(chuàng)建狀態(tài)欄 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver創(chuàng)建狀態(tài)欄?！緦W(xué)習(xí)步驟】 狀態(tài)欄制作方法： 設(shè)置瀏覽器狀態(tài)欄中的文本信息,這一功能可在瀏覽網(wǎng)頁面時(shí),在瀏覽器窗口底下狀態(tài)欄中顯示相關(guān)信息。其方法:選擇“Behaviors”面板中的Actions標(biāo)簽頁的“Set Text of Status Bar”命令,在彈出的Set Text of Status Bar對(duì)話框中如圖3,在“Message”的文本框中輸入所在狀態(tài)欄中顯示的文檔,按“OK”按鈕完成。再用按F12快捷鍵來測(cè)試,可看到其運(yùn)行的效果。 當(dāng)然可用JavaScript語言在Message文本框中加入些函數(shù),讓文本顯示功態(tài)的效果。 三、小結(jié) 用Dreamweaver創(chuàng)建狀態(tài)欄 用Dreamweaver的模板創(chuàng)建網(wǎng)頁 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver的模板創(chuàng)建網(wǎng)頁。【學(xué)習(xí)步驟】 1、創(chuàng)建模板頁面 最簡(jiǎn)單的辦法是將一個(gè)網(wǎng)頁另存為模板文件，通過執(zhí)行命令：File→Save as Template，DreamWeaver會(huì)在網(wǎng)站根目錄中建立一個(gè)模板文件夾——Templates來保存該模板。 當(dāng)然，也可以新建一個(gè)模板：Window→Templates，會(huì)出現(xiàn)的Templates面板，單擊右下角的New Template按鈕，輸入文件名，就建立了一個(gè)空模板；再單擊Open Template按鈕打開該模板，保存后自動(dòng)存放于網(wǎng)站模板文Templates中。 新建、打開的模板頁面和普通的網(wǎng)頁沒什么兩樣，同樣可以加入表格、層、圖片、動(dòng)畫、腳本，設(shè)置頁面屬性等。 舉例：這里以制作一個(gè)模板為例來說明。在該頁面中，我們希望左側(cè)的網(wǎng)站標(biāo)識(shí)圖和底部的導(dǎo)航圖出現(xiàn)在每個(gè)頁面中。其中標(biāo)識(shí)圖由兩幅圖片疊加而成，導(dǎo)航圖上的文字“最近更新”、“在線閱讀”、“打包下載”等劃分成幾個(gè)熱區(qū)分別鏈接到不同的文件，它們?cè)诿總€(gè)頁面中都不變。右上部的主頁面區(qū)和左下角彈出式選單按鈕下面的頁面說明則各不相同。為了保持頁面整潔，我們用表格來布置這些元素。 準(zhǔn)確地說它只是一個(gè)沒有可編輯區(qū)域的“準(zhǔn)模板”，下面再設(shè)定可編輯區(qū)域。 2、設(shè)定可編輯區(qū)域 設(shè)定模板可編輯區(qū)域，一般來說有兩種方法。 新建可編輯區(qū)域：選擇命令：Modify→Template→New Editable Region。在某一空白區(qū)域中單擊后執(zhí)行該命令即可將該區(qū)域變?yōu)榭删庉媴^(qū)域。 標(biāo)記某一區(qū)域?yàn)榭删庉媴^(qū)域：選擇命令：Modify→Template→Mark Selectin as Editable Region。如果某區(qū)域已經(jīng)有一些文字，并且希望在以后新建的超文本文件中部分保留其內(nèi)容，先選中該區(qū)域再執(zhí)行標(biāo)記命令即可。 取消可編輯狀態(tài)：選擇命令：Modify→Template→Unmark Editable Region。執(zhí)行該命令后會(huì)彈出一個(gè)對(duì)話框，其中有當(dāng)前已有的可編輯區(qū)域列表，選中要取消的區(qū)域名稱，確認(rèn)即可。 舉例：在大片空白區(qū)中隨便單擊一下，執(zhí)行Modify→Template→New Editable Region命令，在彈出對(duì)話框中輸入名稱：Main；選中左下角本頁說明下面的文字，執(zhí)行Modify→Template→Mark Selectin as Editable Region命令，輸入名稱：exp?？梢钥吹娇删庉媴^(qū)顯示為淺藍(lán)色，保存即完成模板制作。 三、小結(jié) 用Dreamweaver的模板創(chuàng)建網(wǎng)頁 使用模板 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver的模板創(chuàng)建網(wǎng)頁?！緦W(xué)習(xí)步驟】 1、根據(jù)模板新建頁面 命令：File→New From Template。彈出對(duì)話框，從模板列表中選取模板，出現(xiàn)的新頁面中除可編輯區(qū)外均有淡黃色背景，是不能進(jìn)行修改的部分?？瞻椎腗ain編輯區(qū)可直接進(jìn)行插入表格、文字、圖片等操作，Exp編輯區(qū)保留有原來的文字，修改或重新編輯均可。 2、對(duì)一個(gè)已經(jīng)有內(nèi)容的頁面應(yīng)用模板 命令：Modify→Template→Apply Template to Page。選擇模板后還會(huì)彈出一個(gè)對(duì)話框，讓您選擇現(xiàn)有的孤立內(nèi)容保存到哪個(gè)可編輯區(qū)域（Choose Editable Region for Orphaned Content）。要是不想保留則可以選擇“（none）”。 舉例：我們先新建一個(gè)普通頁面，輸入：“CIW電腦工作室”，執(zhí)行Modify→Template→Apply Template to Page命令，選擇模板test，現(xiàn)有內(nèi)容保存區(qū)域選擇Main，確認(rèn)后可看到頁面自動(dòng)變成了模板頁的形式，而“CIW電腦工作室”這一行字就出現(xiàn)在主編輯窗口中。 3、更新模板以全面更新站點(diǎn) 基于某一模板建立了一些頁面后，對(duì)模板進(jìn)行修改后保存時(shí)，就會(huì)自動(dòng)彈出一個(gè)對(duì)話框，列出所有使用了該模板的頁面，詢問是否要更新。 另外一種方法是執(zhí)行Modify→Template→Update Pages命令。從Update Pages對(duì)話框中選擇一個(gè)站點(diǎn)或站點(diǎn)的某一種模板（同一站點(diǎn)中可以使用多個(gè)模板），單擊右側(cè)的Start按鈕，軟件會(huì)自動(dòng)搜索與模板相關(guān)聯(lián)的網(wǎng)頁并進(jìn)行更新。非常方便！ 舉例：Test模板左側(cè)圖形中的“讀書破萬站”圖片是用一個(gè)圖層疊加在另一幅圖片之上的，現(xiàn)在不想要它，同時(shí)還想將所有頁面中的該圖片均刪除。就可以打開模板test.dwt，刪除該圖層，保存模板，單擊右側(cè)的“Update”按鈕即可。 注意：新建和使用模板前需定義站點(diǎn)。方法是，執(zhí)行命令：Site→Define Sites；指定站點(diǎn)名稱和本地根目錄（Local Root）。模板使用的是相對(duì)路徑，如果沒有指定網(wǎng)站在本地的位置，軟件就不能準(zhǔn)確找到并保存模板文件；并且應(yīng)用模板新建和更新頁面時(shí)，頁面中的超鏈接也不能隨頁面文件保存位置的不同而相應(yīng)變化。 三、小結(jié) 用Dreamweaver的模板創(chuàng)建網(wǎng)頁 用Dreamweaver 中插入背景音樂 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver 中插入背景音樂?！緦W(xué)習(xí)步驟】 一、直接插入法 1.打開一張需要插入背景音樂的網(wǎng)頁，在菜單中找到這樣的命令： Windows> 設(shè)計(jì)教室-> HTML 部分中的“HTML語言剖析”中的一段，介紹一下< EMBED >標(biāo)記的參數(shù)： 三、小結(jié) 用Dreamweaver 中插入背景音樂 用Dreamweaver 中插入背景音樂 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver 中插入背景音樂?！緦W(xué)習(xí)步驟】 < EMBED > 是用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其參數(shù)設(shè)定較多。如下： < EMBED src=“your.mid” autostart=“true” loop=“true” hidden=“true” > src=“your.mid”設(shè)定 midi 檔案及路徑，可以是相對(duì)或絕對(duì)。autostart=true是否在音樂檔下載完之后就自動(dòng)播放。true 是，false 否(內(nèi)定值)。loop=“true”是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，true 是，false 否。HIDDEN=“true”是否完全隱藏控制畫面，true 為是，no 為否(內(nèi)定)。STARTTIME=“分:秒”設(shè)定歌曲開始播放的時(shí)間。如 STARTTIME=“00:30” 表示從第30秒處開始播放。VOLUME=“0-100”設(shè)定音量的大小，數(shù)值是0到100之間。內(nèi)定則為使用系統(tǒng)本身的設(shè)定。WIDTH=“整數(shù)” 和 HIGH=“整數(shù)”設(shè)定控制面板的高度和寬度。(若 HIDDEN=“no”)ALIGN=“center”設(shè)定控制面板和旁邊文字的對(duì)齊方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom CONTROLS=“smallconsole”設(shè)定控制面板的外觀。預(yù)設(shè)值是 console。 console 一般正常面板 smallconsole 較小的面板 playbutton 只顯示播放按鈕 pausecutton 只顯示暫停按鈕 stopbutton 只顯示停止按鈕 volumelever 只顯示音量調(diào)節(jié)按鈕 二、代碼法 < BGSOUND >： < BGSOUND > 是用來插入背景音樂，但只適用于 IE，其參數(shù)設(shè)定不多。< BGSOUND src=“your.mid” autostart=true loop=infinite > src=“your.mid” 設(shè)定 midi 檔案及路徑，可以是相對(duì)或絕對(duì)。autostart=true 是否在音樂檔下載完之后就自動(dòng)播放。true 是，false 否(內(nèi)定值)。loop=infinite 是否自動(dòng)反復(fù)播放。LOOP=2 表示重復(fù)兩次，Infinite 表示重復(fù)多次。此種方法就是直接把< BGSOUND >標(biāo)記放于網(wǎng)頁文件的< head >< /head >之間，設(shè)置好mid文件的路徑就行。參數(shù)的設(shè)置如文中解說。 三、插件法 有些人始終沒有舍棄 FrontPage 也許就因?yàn)樵谝恍┰氐牟迦胫校珼reamweaver 沒有提供功能，或者不方便。但我們知道，Dreamweaver 支持插件，聲音插入插件為我們提供了方便。 插件下載：sound.mxp 下載后雙擊文件，就可以直接安裝了，安裝完成你可以在“對(duì)象”面板的“Common”欄看到一個(gè)喇叭圖標(biāo)。直接點(diǎn)擊此按鈕，就彈出如下圖所示的插入窗口： Forever：設(shè)置無限循環(huán)播放 Never：不循環(huán)播放，即只播放一次 NO of times：設(shè)置播放的次數(shù) 點(diǎn)擊“Browser”按鈕選擇好聲音文件之后，按確定完成制作。 三、小結(jié) 利用代碼法和插件法在Dreamweaver 中插入背景音樂 用Dreamweaver在主頁中制作連續(xù)的背景音樂 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver在主頁中制作連續(xù)的背景音樂?！緦W(xué)習(xí)步驟】 一、保持背景音樂的連續(xù)不斷，效果很好，現(xiàn)介紹如下，供制作個(gè)人主頁的朋友們參考： 首先使用標(biāo)簽 〈frameset〉〈frame...〉〈frame...〉〈frameset〉 將主頁(index.html)屏幕分成上下兩個(gè)幀，為了不破壞頁面布局，將上幀的高度設(shè)為 0；然后，在主頁上幀放置的超文本文件(back_music.htm)中設(shè)置網(wǎng)站的背景音樂，最好不要設(shè)置播放界面；最后，在主頁的下幀放置網(wǎng)站主頁的主要內(nèi)容(main.htm)。 這樣一來，主頁下幀的頁面就成為主頁實(shí)際的活動(dòng)頁面，上幀的頁面在訪問者的整個(gè)瀏覽過程中始終保持靜止不動(dòng)，設(shè)置的背景音樂也就不會(huì)中斷了。 主頁文件 index.html: 〈html〉 〈head〉〈title〉連續(xù)不斷的背景音樂〈/title〉〈/head〉 〈frameset frameborder=“0” rows=“0,*”〉 〈frame src=“back_music.htm” scrolling=“no” noresize frameborder=“0”〉 〈frame src=“main.htm” frameborder=“0”〉 〈noframes〉 〈body〉 〈p〉please browse the web pages with browser that supperts frames.〈/p〉 〈/body〉 〈/noframes〉 〈/frameset〉 〈/html〉 上幀文件 back_music.htm(背景音樂為當(dāng)前目錄下的liang_zhu.mid,只播放一次)： 〈html〉 〈head〉〈title〉〈/title〉〈/head〉 〈body〉 〈!-背景音樂:--〉 〈embed src=“./liang_zhu.mid” hidden=“true” autostart=“true” loop=“0”〉 〈/body〉 〈/html〉 三、小結(jié) 用Dreamweaver在主頁中制作連續(xù)的背景音樂 DreamweaverMX制作導(dǎo)航下拉菜單 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；DreamweaverMX制作導(dǎo)航下拉菜單?！緦W(xué)習(xí)步驟】 Dreamweaver從出道以來，其簡(jiǎn)便易用而又功能強(qiáng)大的“行為”(Behavior)一直是大家所關(guān)注的熱點(diǎn)之一。在Dreamweaver MX(DW MX)中，對(duì)這一功能又有了擴(kuò)充與改進(jìn)。 在DW MX中，行為指的是為了響應(yīng)某一事件(Event)而采取的一個(gè)操作(Action)。其中Event 指的是瀏覽器的事件，比如窗口刷新、鼠標(biāo)移動(dòng)等。而 Action 指的是后臺(tái)響應(yīng)事件的 JavaScript 代碼，可以完成相應(yīng)的操作，比如播放聲音、翻轉(zhuǎn)圖片等。 用DW MX制作導(dǎo)航下拉菜單是網(wǎng)頁中經(jīng)常使用的特效之一。(如圖)主要應(yīng)用了DW MX中的“Show-Hide Layers”行為。 首先制作好導(dǎo)航條(圖1中的“產(chǎn)品中心”那一欄)，隨后添加一個(gè)層，作為下拉菜單將要顯示的位置，并填入下拉菜單的對(duì)應(yīng)欄目。 接下來，打開“Behaviors”面板，同時(shí)選中“產(chǎn)品中心”鏈接(注意，這個(gè)時(shí)候不能夠選中剛剛建好的層，否則無法應(yīng)用“Show-Hide Layers”行為)，單擊“+”號(hào)，選擇“Show-Hide Layers”，就可以看到我們剛剛建好的層在選擇項(xiàng)中，可以設(shè)定為隱藏或者顯示(如圖)。 行為的妙用主要體現(xiàn)在：如果我們要實(shí)現(xiàn)下拉菜單，關(guān)鍵就是讓鼠標(biāo)移到“產(chǎn)品中心”鏈接上時(shí)，使層顯示；而鼠標(biāo)離開鏈接時(shí)，使層隱藏。根據(jù)這種思想，我們首先為這個(gè)層設(shè)立兩個(gè)Action，一個(gè)選擇Hide，一個(gè)選擇Show。然后，調(diào)整Event，將Hide Layer的Event設(shè)為OnMouseOut，即為鼠標(biāo)離開鏈接；而將Show Layer的Event設(shè)為OnMouseOver，即為鼠標(biāo)選中鏈接。按“F12”預(yù)覽，就可看到我們期盼的效果。 這樣，平時(shí)我們覺得很神秘的導(dǎo)航下拉菜單就可以輕易在行為中實(shí)現(xiàn)。還可以在導(dǎo)航鏈接上繼續(xù)應(yīng)用 “Swap Image”行為，實(shí)現(xiàn)鼠標(biāo)點(diǎn)選鏈接時(shí)出現(xiàn)圖片翻轉(zhuǎn)效果。 行為不是一個(gè)個(gè)孤立的特效，可以由多個(gè)行為組合疊加實(shí)現(xiàn)復(fù)雜的功能，除了DW MX默認(rèn)設(shè)置好的行為外，我們還可以從004km.cn上下載更多更酷的第三方行為，我們只需將它們直接復(fù)制到DreamweaverMXConfigurationBehaviorsActions目錄下即可，從而使DW MX的這一閃光點(diǎn)更加眩目。 三、小結(jié) 用DreamweaverMX制作導(dǎo)航下拉菜單 用Dreamweaver做彈出窗口 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver做彈出窗口。【學(xué)習(xí)步驟】 1.打開一個(gè)頁面，設(shè)置頁面屬性。左邊界，頂部邊界為 0，在標(biāo)題處輸入標(biāo)題名稱。 2.在頁面中插入圖片。也可以是文字，F(xiàn)lash 動(dòng)畫等。小窗口頁面就準(zhǔn)備好了。 給一個(gè)頁面添加彈出小窗口： 1.打開需要添加彈出小窗口頁面，例如一個(gè)網(wǎng)站的首頁，在標(biāo)簽選擇器中選擇“ body ”標(biāo)簽。 2.打開行為面板，點(diǎn)擊“ + ”按鈕添加行為。 3.選擇“打開瀏覽器窗口”。 4.在要顯示的 URL 處，選擇彈出小窗口頁面文件。設(shè)置彈出小窗口屬性。 5.按 F12，在瀏覽器中發(fā)布的效果如下圖。 三、小結(jié) 用Dreamweaver做彈出窗口 Dreamweaver 頁面制作 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；Dreamweaver 頁面制作?！緦W(xué)習(xí)步驟】 一、下邊的簡(jiǎn)單網(wǎng)頁為例，敘述一下制作過程。簡(jiǎn)單網(wǎng)頁如下圖： 在開始制作之前，我們先對(duì)這個(gè)頁面進(jìn)行一下分析?？纯催@個(gè)頁面用到了那些東西。 網(wǎng)頁頂端的標(biāo)題“我的主頁”是一段文字。 網(wǎng)頁中間是一幅圖片。最下端的歡迎詞是一段文字。網(wǎng)頁背景是一深紫紅顏色。 知道了這個(gè)網(wǎng)頁的結(jié)構(gòu)以后我們就來可以制作了。 首先啟動(dòng)Dreamweaver MX 2004，確保你已經(jīng)用站點(diǎn)管理器建立好了一個(gè)網(wǎng)站（根目錄）。 為了制作方便，請(qǐng)您事先打開資源管理器，把要使用的圖片收集到網(wǎng)站目錄images文件夾內(nèi)。 【插入標(biāo)題文字】 進(jìn)入頁面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下，編輯器默認(rèn)左對(duì)齊，光標(biāo)在左上角閃爍，光標(biāo)位置就是插入點(diǎn)的位置。如果要想讓文字居中插入，點(diǎn)屬性面板居中按鈕即可。啟動(dòng)中文輸入法輸入“我的主頁”四個(gè)字。字小不要緊，我們可以對(duì)它進(jìn)行設(shè)置。 【設(shè)置文字的格式】 選中文字，在上圖屬性面板中將字體格式設(shè)置成默認(rèn)字體，大小可任意更改字號(hào)。并選中“B”將字體變粗。 【設(shè)置文字的顏色】 首先選中文字，在屬性面板中，單擊顏色選擇圖標(biāo)，在彈出的顏色選擇器中用滴管選取顏色即可。 【設(shè)置網(wǎng)頁的標(biāo)題和背景顏色】 點(diǎn)擊“修改”菜單選“頁面屬性”。系統(tǒng)彈出頁面屬性對(duì)話框（如下圖） 請(qǐng)?jiān)跇?biāo)題輸入框填入標(biāo)題“我的主頁”。 設(shè)置背景顏色：網(wǎng)頁背景可以是圖片，也可以是顏色。此例是顏色。如上圖打開背景顏色選擇器進(jìn)行選取。如果背景要設(shè)為圖片，點(diǎn)擊背景圖象“瀏覽”按鈕，系統(tǒng)彈出圖片選擇對(duì)話框，選中背景圖片文件，點(diǎn)擊確定按鈕。 設(shè)計(jì)視圖狀態(tài)，在標(biāo)題“我的主頁”右邊空白處單擊鼠標(biāo)，回車換一行，按照以下的步驟插入一幅畫圖片，并使這張圖片居中。您也可以通過屬性面板中的左對(duì)齊按鈕讓其居左安放。 【插入圖像】選擇以下任意一種方法： 使用插入菜單：在“插入”菜單選“圖像”，彈出“選擇圖像源文件”對(duì)話框，選中該圖像文件，單擊確定。如下圖： 2）使用插入欄（如下圖）：?jiǎn)螕舨迦霗趯?duì)象按鈕>選源文件”對(duì)話框，其余操作同上。 按鈕，彈出“選擇圖像 （3）使用面板組“資源”面板（如下圖）：點(diǎn) 按鈕，展開根目錄的圖片文件夾，選定該文件，用鼠標(biāo)拖動(dòng)至工作區(qū)合適位置。 一個(gè)圖片就插入完畢了。（插入*.swf動(dòng)畫文件，選擇“插入”菜單＞媒體＞Flash）。 【輸入歡迎文字】 在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字“歡迎您??”然后，利用屬性面板對(duì)文字進(jìn)行設(shè)置。 保存頁面。 一個(gè)簡(jiǎn)單的頁面就這樣編輯完畢了。 【預(yù)覽網(wǎng)頁】在頁面編輯器中按F12預(yù)覽網(wǎng)頁效果。網(wǎng)站中的第一頁，也就是首頁，我們通常在存盤時(shí)取名為index.htm。 三、小結(jié) ①圖片插入和對(duì)齊設(shè)置； ②文字的格式、顏色和加粗等設(shè)置； ③背景顏色的設(shè)置； ④預(yù)覽網(wǎng)頁，查看實(shí)際效果。 用Dreamweaver 發(fā)布網(wǎng)站 一、學(xué)習(xí)目的 了解Dreamweaver，學(xué)會(huì)利用Dreamweaver制作網(wǎng)頁。 二、學(xué)習(xí)內(nèi)容 Dreamweaver的基本知識(shí)；用Dreamweaver 發(fā)布網(wǎng)站?！緦W(xué)習(xí)步驟】 在發(fā)布網(wǎng)站之前先使用Dreamweaver站點(diǎn)管理器對(duì)你的網(wǎng)站文件進(jìn)行檢查和整理，這一步很必要?？梢哉页鰯嗟舻逆溄印㈠e(cuò)誤的代碼和未使用的孤立文件等，以便進(jìn)行糾正和處理。 步驟如下：在編輯視圖點(diǎn)「站點(diǎn)」菜單＞選“檢查站點(diǎn)范圍的鏈接”，彈出“結(jié)果”對(duì)話框，如下圖： 下圖是檢查器檢查出本網(wǎng)站與外部網(wǎng)站的鏈接的全部信息，對(duì)于外部鏈接，檢查器不能判斷正確與否，請(qǐng)自行核對(duì)。 下圖是檢查器找出的孤立文件，這些文件您的網(wǎng)頁沒有使用，但是仍在你的網(wǎng)站文件夾里存放，上傳后它會(huì)占據(jù)有效空間，應(yīng)該把它清除。清除辦法是：先選中文件，點(diǎn)Delete鍵，確定。這些文件就放在“回收站”。 如果不想刪除這些文件，點(diǎn)保存報(bào)告按鈕（上圖所示），在彈出的對(duì)話框中您給報(bào)告文件一個(gè)保存路徑和文件名即可。該報(bào)告文件為一個(gè)檢查結(jié)果列表。你可以參照此表，進(jìn)行處理。 糾正和整理之后，您的網(wǎng)站就可以發(fā)布了?！景l(fā)布站點(diǎn)操作】 如果您是第一次上傳文件，您的遠(yuǎn)程 Web 服務(wù)器根文件夾是空文件夾時(shí)按以下操作進(jìn)行。如果不是空文件夾，另行操作附后。 服務(wù)器根文件夾是空文件夾時(shí)，連接到遠(yuǎn)程站點(diǎn)，請(qǐng)執(zhí)行以下操作： 在 Dreamweaver MX 2004中，選擇“站點(diǎn)”>“管理站點(diǎn)”。管理站點(diǎn)對(duì)話框中“dwmx2004”是在本教程第5頁設(shè)置的，如果想回憶一下，請(qǐng)查看“設(shè)置站點(diǎn)”。 選擇一個(gè)站點(diǎn)（即本地根文件夾），然后單擊“編輯”。 單擊對(duì)話框頂部的“基本”選項(xiàng)卡。在前面“設(shè)置站點(diǎn)”時(shí)，已填寫了“基本”選項(xiàng)卡中的前幾個(gè)步驟，因此單擊幾次“下一步”，直到向?qū)ы敳扛吡溜@示“共享文件”步驟。如下圖： 在標(biāo)有“您如何連接到遠(yuǎn)程服務(wù)器？”的彈出式菜單中，選擇“FTP”。單 擊“下一步”，彈出如下對(duì)話框： 請(qǐng)輸入以下選項(xiàng)： 輸入服務(wù)器的主機(jī)名；（必須填入） “您打算將您的文件儲(chǔ)存在服務(wù)器上的什么文件夾中？”（可以留空） 在相應(yīng)的文本框中輸入您的用戶名和密碼。 “使用安全 FTP(SFTP)”選項(xiàng)。（可不勾選） 單擊“測(cè)試連接”。 如果連接不成功，請(qǐng)檢查設(shè)置或咨詢系統(tǒng)管理員。 在輸入相應(yīng)的信息后，單擊“下一步”。 不要為站點(diǎn)啟用文件存回和取出。 單擊“下一步”。 單擊“完成”以完成遠(yuǎn)程站點(diǎn)的設(shè)置。 再次單擊“完成”以退出“管理站點(diǎn)”對(duì)話框。 【上傳文件】 在設(shè)置了本地文件夾和遠(yuǎn)程文件夾（空文件夾）之后，可以將文件從本地文件夾上傳到 Web 服務(wù)器。 請(qǐng)執(zhí)行以下操作： 在“文件”面板（“窗口”>“文件”）中，選擇站點(diǎn)的本地根文件夾。單擊“文件”面板工具欄上的“上傳文件”藍(lán)色箭頭圖標(biāo)。 Dreamweaver MX 2004會(huì)將所有文件復(fù)制到服務(wù)器默認(rèn)的遠(yuǎn)程根文件夾。多數(shù)空間提供商都設(shè)置有服務(wù)器默認(rèn)的文件夾，請(qǐng)?jiān)诖宋募A下創(chuàng)建一個(gè)空文件夾，方法是：在“文件”面板，將“本地視圖”轉(zhuǎn)換為“遠(yuǎn)程視圖”。右鍵點(diǎn)擊文件夾，選“新建文件夾”，輸入一個(gè)名稱，用作您的遠(yuǎn)程根文件夾，名稱與您本地根文件夾的名稱一致，便于操作。也可以最大化“文件”面板。請(qǐng)打開“文件”面板的最右邊的“擴(kuò)展/折疊”按鈕，最大化文件面板，如下圖，左邊為遠(yuǎn)端站點(diǎn)內(nèi)容，右邊為本地文件內(nèi)容。 點(diǎn)擊，Dreamweaver MX 2004將所有文件復(fù)制到您定義的遠(yuǎn)程文件夾。 第一次上傳必須搞清楚網(wǎng)絡(luò)空間服務(wù)商指定的服務(wù)器默認(rèn)的存放網(wǎng)頁的文件夾，在此文件夾下存放您的站點(diǎn)文件。訪問您的網(wǎng)站地址為：http://......./index.htm 如果你在服務(wù)器默認(rèn)的文件夾下上建立了與本地根文件夾同名的文件夾，那么訪問您的網(wǎng)站，需要用這樣的地址：http://........./（您的文件夾名）/index.htm 上傳完畢，請(qǐng)?jiān)跒g覽器中輸入瀏覽地址，測(cè)試您上傳的結(jié)果。 三、小結(jié) 用Dreamweaver 發(fā)布網(wǎng)站 Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(1)1> 在DW中，如何輸入一個(gè)空格呢？ 輸入空格的問題，在DW似乎已成了一個(gè)老生常談的問題，我們可能在許多介紹DW使用方面的書籍或文章中看到過N次。 DW中對(duì)空格輸入的限制是針對(duì)“半角”文字狀態(tài)而言的，因此通過將輸入法調(diào)整到全角模式就可以避免了，方法是：打開中文輸入法（以人工智能ABC為例），按Shift+Space切換到全角狀態(tài)，現(xiàn)在應(yīng)該沒問題了。此外，你還可以通過許多“變通”的方法達(dá)到錄入空格的目的，比如常用的是： 直接在源代碼中加入代表空格的HTML代碼“ ”；輸入一定長(zhǎng)度的文字對(duì)象后，然后調(diào)整文字的顏色與當(dāng)前的背景顏色相同等等，不過注意的是后者在一些瀏覽器中可能顯示上有點(diǎn)問題。 2> 如何在瀏覽器地址欄前添加自定義的小圖標(biāo)？ 你是不是記得有時(shí)在瀏覽網(wǎng)易網(wǎng)站的首頁時(shí)，在地址004km.cn前會(huì)顯示一個(gè)“易”字樣的小圖標(biāo)。而默認(rèn)情況下，這個(gè)圖標(biāo)是一個(gè)IE瀏覽器的指定圖片。 其實(shí)這也不是什么高深技術(shù)，只不過在網(wǎng)站目錄下添加了一個(gè)特定文件而已。 這時(shí)，我們需要預(yù)先制作一個(gè)圖標(biāo)文件，大小為16*16像素。文件擴(kuò)展名為ico，然后上傳到相應(yīng)目錄中。在HTML源文件“ 其中的“SHORTCUT ICON”即為該圖標(biāo)的名稱。當(dāng)然如果用戶使用IE5或以上版本瀏覽時(shí)，就更簡(jiǎn)單了，只需將圖片上傳到網(wǎng)站根目錄下，即可自動(dòng)識(shí)別！ 3> 為什么，我本來設(shè)計(jì)很好的網(wǎng)頁，在瀏覽器窗口最小化時(shí)會(huì)變的丑陋難堪？ 這應(yīng)該是個(gè)很值得大家注意的問題，也就是說，在全屏狀態(tài)下瀏覽網(wǎng)頁內(nèi)容時(shí)，一點(diǎn)問題也沒有。當(dāng)我們使用窗口的最小化命令或手動(dòng)的調(diào)整窗口的大小時(shí)，問題就慢慢出現(xiàn)了。網(wǎng)頁內(nèi)容會(huì)把當(dāng)前窗口作為顯示范圍，依次下挫。舉個(gè)例子，和在記事本中有“自動(dòng)換行”和“沒換行”的差別是完全一樣的。解決這個(gè)問題，我們必須從網(wǎng)頁的布局說起，一般情況下，網(wǎng)頁內(nèi)容的定位大多是通過表格來實(shí)現(xiàn)的。因此問題的“毛病”也就出在表格上。你可能已經(jīng)注意到了，在表格的高寬設(shè)定選擇上提供了兩種不同的類型，百分比和像素。其中百分比的使用將會(huì)產(chǎn)生前面說到的那個(gè)毛病，將其全部更正為Pixels單位的實(shí)際大小就可以了。 4> 如何改變網(wǎng)頁顯示時(shí)，最頂部的提示信息？ 瀏覽網(wǎng)頁時(shí)，頂部的提示信息往往代表了網(wǎng)頁內(nèi)容的關(guān)鍵所在，有助于訪問者提前了解網(wǎng)頁內(nèi)容。在DW4前，沒有在功能上直接提供該操作，我們往往通過在源代碼中應(yīng)用“title”屬性來完成。進(jìn)入DW4就簡(jiǎn)單多了。 直接在編輯窗口最上方的“title”輸入框內(nèi)鍵入所需要的文字信息即可。 ·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(2)5> 怎么樣，才能為圖片添加指定顏色的邊框？ 對(duì)于沒有邊框的圖片而言，直接插入到網(wǎng)頁中，在顯示效果上是相當(dāng)差的。記得在微軟的FP中要給圖片添加滿意的邊框還是相當(dāng)麻煩的。不過在DW中就顯得容易多了，因?yàn)檫@里有一個(gè)“Border”屬性，可以讓你直接設(shè)置邊框的寬度。 寬度設(shè)好了，你一定會(huì)問，顏色呢？面板上并沒有提供顏色的選擇呀！呵呵，其實(shí)這里有一個(gè)技巧問題，用鼠標(biāo)選擇圖片對(duì)象，注意不是點(diǎn)擊選中，而是拖動(dòng)選擇。象設(shè)定文字顏色一樣進(jìn)行就可以了。 6> 如何添加圖片及鏈接文字的提示信息？ 在我們?yōu)g覽網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)停留在圖片對(duì)象或鏈接上時(shí)，在鼠標(biāo)的右下有時(shí)會(huì)出現(xiàn)一個(gè)提示信息框。對(duì)目標(biāo)進(jìn)行一定的注釋說明。在一些場(chǎng)合，它的作用是很重要的。 下面先看看圖片提示信息的添加，選中圖片對(duì)象，在屬性面板里你會(huì)發(fā)現(xiàn)有個(gè)“Alt”輸入框。默認(rèn)情況下，該輸入框是空白的。在這里錄入需要的提示內(nèi)容就可以了。 那么鏈接提示的制作就沒這么簡(jiǎn)單了。因?yàn)镈W中沒有直接提供該功能，因此我們需要通過添加HTML代碼來實(shí)現(xiàn)。 在中添加“title”屬性。title=提示內(nèi)容即可。 7> 如何把自己的ZIP或其他類型的文件供別人下載? 在不少初級(jí)網(wǎng)頁制作者看來,好象通過鼠標(biāo)單擊完成下載是件很“神秘”的事,實(shí)際上遠(yuǎn)非如此.在DW中凡是不被瀏覽器識(shí)別的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作為鏈接目標(biāo)時(shí),默認(rèn)的操作都是下載.這時(shí)你只需要,把要瀏覽者下載的文件名寫好,然后制作一個(gè)到目標(biāo)文件的鏈接.注意目錄一定不要搞錯(cuò).8> 怎樣才能夠保證網(wǎng)頁中文字不跟隨瀏覽器字體大小設(shè)置而變動(dòng)? 大家都知道,在IE瀏覽器的功能設(shè)置中，有一個(gè)可以自由設(shè)置窗口內(nèi)容字體大小的功能，這樣由于不同訪問者的習(xí)慣問題，呈現(xiàn)在他們面前的網(wǎng)頁有時(shí)也會(huì)不同。 比如你可能本來設(shè)計(jì)時(shí)用的是2號(hào)字體，結(jié)果由于用戶對(duì)瀏覽器的額外設(shè)定，變的更大了，這時(shí)顯示效果上就出問題了。 那么解決的辦法就是將網(wǎng)頁內(nèi)容定性的強(qiáng)制在某個(gè)合適的大小上。即不容許他變化。通過CSS樣式表對(duì)字體進(jìn)行強(qiáng)制性控制就可以實(shí)現(xiàn)這個(gè)要求了。 ·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(3) 9> 以新窗口的形式打開目標(biāo)鏈接？ 以新窗口打開，顧名思義，也就是在不覆蓋當(dāng)前窗口的前提下，另外打開一個(gè)瀏覽器窗口。你可以直接在連接代碼中加入“Target=_blank”。 如果你的HTML比較差的話，在DW屬性面板上同樣提供了這個(gè)設(shè)置，當(dāng)你在Link輸入框中鍵入004km.cnmon的“內(nèi)容”。 單擊上面的“Refresh”按鈕，其中“Delay”輸入框中鍵入刷新延遲的時(shí)間（單位：秒），“Action”為刷新指定的目標(biāo)URL。因?yàn)楝F(xiàn)在是刷新當(dāng)前頁面，直接選單選項(xiàng)“Refresh This Document”即可。 ·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(4) 13> 如何定義網(wǎng)頁的關(guān)鍵字（Keyname）？ 當(dāng)用戶使用搜索引擎search合適內(nèi)容的網(wǎng)頁時(shí)，關(guān)鍵字起著一個(gè)不容忽視的作用。大多的搜索服務(wù)器會(huì)每隔一段時(shí)間自動(dòng)探測(cè)網(wǎng)絡(luò)中是否有新網(wǎng)頁產(chǎn)生，并把他們按關(guān)鍵字進(jìn)行記錄，以方便用戶查詢。 你當(dāng)然想讓你的網(wǎng)頁出現(xiàn)在搜索引擎的查詢返回列表中了，這時(shí)關(guān)鍵字的定義就尤為重要了。 同樣在“Head”面板部分，單擊“Keywords”按鈕，錄入需要逐個(gè)定義的關(guān)鍵字即可，注意每個(gè)關(guān)鍵字以“；”號(hào)隔開，數(shù)目沒有限制。 14> 如何在編輯窗口中，隱藏一些不必要的標(biāo)簽？ 當(dāng)用戶在網(wǎng)頁中插入了太多的不可見元素時(shí)，在編輯窗口的最上面就會(huì)顯示一排相應(yīng)的標(biāo)示標(biāo)簽，用來方便用戶隨時(shí)能找到它們。雖然這些標(biāo)簽本身并不影響瀏覽器里的顯示效果，但多了以后，往往使網(wǎng)頁內(nèi)容不得不錯(cuò)位，從而一定程度上妨礙網(wǎng)頁視覺上的調(diào)整，那么怎么樣才能把這些東東去掉呢？ 進(jìn)入“Preperence”面板，列表中選擇“Invisibel Elements”，勾掉你不想顯示的項(xiàng)目前的“對(duì)號(hào)”即可，比如Scripts等 15>安排不支持“框架”的瀏覽器的顯示內(nèi)容？ 我們知道，目前的瀏覽器類型很多，因此我們?cè)O(shè)計(jì)網(wǎng)頁時(shí)最先考慮到的往往是“這個(gè)東西是不是在不同的瀏覽器中都能顯示好呢？”?？蚣芫褪且粋€(gè)例子！ 不過避免開這點(diǎn)，很簡(jiǎn)單，你只需要在源代碼中加入下面的內(nèi)容就可以了。 < BODY>第三篇：Dreamweaver制作網(wǎng)頁經(jīng)典問題