Dreamweaver網頁製作超級技巧36則

dreamweaver|技巧|網頁

　　1. 用Dreamweaver 4.0輕鬆設計會自動彈性調整的網頁

　　首先需要保證的是你的頁面內容採用了表格的格式，然後開啟你要編輯的頁面，按“Ctrl+F6”或者菜單“View→TableView→Layout?View”轉換到布局視圖。這時可以看到儲存格的列寬，在列寬數位旁邊還有一個小小的下拉式箭頭，點擊你要設定彈性顯示的列上方的小箭頭，接著選擇“將列設為彈性顯示”(Make Column Autostretch)。該列方框上方就會出現一條波浪形的線，而不是剛才表示列寬的數字。完成後你的頁面就變成了一個具有彈性的頁面了。此外，需要注意頁面中不要有尺寸過大的圖片。

　　2. 用Dreamweaver 4.0製作有閃動效果的Flash按鈕

　　選擇菜單Insert→Interactive?Images→Flash?Button就可看到有哪些內嵌按鈕。在彈出的對話方塊裡，你可以在“Style”列表裡選擇自己想要的按鈕樣式，在預覽(Sample)視窗裡可以看到這種樣式的效果如何。選擇好之後，在“Button?Text”視窗輸入按鈕上面的文字，在“Font”視窗選擇字型，在“Size”視窗輸入文字的大小，在“Link”視窗輸入連結的目標，在“Target”視窗選擇連結開啟的方式，在“BgColor”選擇按鈕背景顏色，在“Save?As”視窗輸入儲存的檔案名稱。完成這些後，按下“OK”按鈕，你就完成了一個Flash按鈕啦。這個按鈕還會自動插入你的網頁中，然後在Dreamweaver編輯視窗選中你剛才製作的按鈕，屬性視窗就會顯示出這個按鈕的屬性，單擊上面的“Play”按鈕，你就可直接在編輯視窗預覽這個按鈕的閃動效果。需要注意的是Dreamweaver?4.0的這個功能不支援中文字型。

　　3. 在Dreamweaver 4.0中自訂鍵盤快速鍵

　　選擇菜單“Edit→Keyboard?Shortcuts”，在對話方塊中會列出目前已經啟用的以及可以更改的快速鍵一覽表，你可以在這裡把快速鍵改成自己習慣用的。如果要更改快速鍵，首先要選取你要更改的命令，接著選取目前的快速鍵，這個快速鍵就會出現在“Shortcuts”列表中，然後在“Press Key”視窗輸入你想要使用的快速鍵，然後點擊“Change”按鈕更改即可完畢。你還可以利用“+”、“-”按鈕增加或者刪除當前的快速鍵。

　　4. 讓DreamweaverMX4.0和Fireworks整合

　　如果你的電腦裡同時安裝了Dreamweaver/Fireworks，那麼你就可以使用Dreamweaver?4.0提供的整合Fireworks的功能。利用這個功能你可以把你的GIF圖片修改得更加動人，輕鬆地實現動畫效果。在Dreamweaver編輯視窗選擇好你要修改的GIF圖片，然後在圖片屬性視窗單擊“編輯(Edit)”按鈕，這時系統會自動啟動Fireworks軟體編輯這個圖片。仔細看，你會發現Fireworks的圖片編輯視窗已出現Editing-From-Dreamweaver這樣的文字和圖樣，也就是說這個圖片是為Dreamweaver頁面進行圖片編輯的。現在我們在Fireworks裡選擇要編輯的圖片，選擇菜單“Modify→Animate→Animate?Selection”。在彈出的視窗裡設定動畫的屬性：選定動畫的幀數、動畫移動的方向、透明度等等。然後把修改好的檔案匯出即可。這樣，在Dreamweaver編輯視窗會自動更新剛才修改好的檔案，使你的頁面圖片動起來。

　　5. 巧用網站回報器

　　在Dreamweaver?4.0裡提供了一個網站回報器，利用這個網站回報器可以協助你在你的網站眾多檔案中快速找到和修複錯誤。單擊菜單“Site→Reports”即可啟動報告器，選擇你要檢查的項目，然後單擊“Run”按鈕即可查出你網站上的一般問題。你也可以自己編寫報告器來查出網站上的一些特殊問題 (一般問題通常是一些文本丟失或文檔未命名) 。

　　6. 快速恢複多次操作

　　在製作頁面時，我們可能需要不停地修改頁面，有時還要恢複過去的操作，我們可以使用“Edit”菜單裡的“Undo”命令，可是這個命令每次只能恢複一次，如果我們需要恢複多次操作，那就要不停地“Undo”，實在太煩。在Dreamweaver?4.0裡提供了一個History視窗，可以讓我們輕鬆地恢複多次操作。在“Windows”菜單裡選擇“History”即可開啟這個曆史視窗。在這個視窗把你每一次的操作都保留下來了，利用視窗左邊那個滑動指標，就可以不停地恢複，還可以撤銷每一次操作，包括已經存檔的。而且還可以把這個曆史紀錄儲存下來共用。

　　7. 隱藏浮動面板

　　開啟Dreamweaver，給人的第一印象是一堆浮動面板，往往弄得你眼花繚亂，雖然它可以拖開，但畢竟佔據著本來就很有限的螢幕，若把它關閉了，等一下用它時又要去開啟。其實你只要按一下F4鍵，所有浮動面板都不見，再按F4他們又都重現於螢幕上了。

　　8. 快速預覽網頁

　　初學Dreamweaver，往往找不到預覽菜單，不得不另外啟動IE瀏覽器來預覽網頁的實際效果。其實Dreamweaver的預覽菜單放到File菜單下了，要預覽正在編輯的網頁，按F12鍵就可以了，方便得很呢！而且還可設定在不同的瀏覽器中預覽，在File菜單下的Preview in Browser中選擇Edit Browser List就可選擇不同的瀏覽器進行預覽。以測試你的網頁對不同瀏覽器的適應性。

　　9. 在HTML檢示窗中顯示行號和自動換行

　　雖然Dreamweaver的Behaviors是一個javascript小程式的巨集，許多實現特殊網頁效果的javascript程式都不用動手編程，但有時需要編寫一點小程式時，顯示程式行號顯得尤為必要，特別是在程式發生錯誤時，往往都有是提示在“XX行有錯誤”，若一行一行地去數行號不僅太累而且還容易數錯，在FrontPage中老是為數錯行號而煩惱。在Dreamweaver中可方便了，只要在HTML原始碼檢視器視窗中，選中“Line Numbers”（行號）複選框，則會在原始碼檢視器視窗中對每條HTML語句自動顯示行號，一目瞭然。同樣有時一行代碼較長，只要在HTML原始碼檢視器視窗中，選中“Warp”（自動換行）複選框，則會啟用視窗的自動換行特性，過長的代碼會自動從視窗的邊緣繞回。

　　10. 如何獲得顏色的十六進位代碼

　　在設計網頁時，有時要用到16進位的顏色代碼，以前經常為這事頭痛，在Dreamweaver中只要按屬性面板上“bg”邊上小方框右下角的小三角形，在彈出的顏色板上，滑鼠指到哪兒，馬上就能顯示出相應顏色的16進位代碼，真方便。

     11. 製作背景音樂

　　在Dreamweaver中插入背景音樂是非常容易實現的，這裡介紹兩種方法，由大家選擇。

　　（1）在頁面不顯眼的地方插入一空層 ，並在層內放入一個ActivX對象 ，雙擊該對象，在開啟的對話方塊中選擇一個MIDI音樂檔案，然後在層對象屬性面板中設定其可視性為“Hidden”，儲存變動後按F12預覽網頁，聽聽是否有音樂聲。

　　（2）另一種方法是利用Dreamweaver的“Behaviors”行為編輯器 ，單擊“＋”按鈕，選擇其中“Play Sound”選項，在彈出的對話方塊中選擇一個音樂檔案即可。自己動手試一試吧！

　　12. 讓背景圖不滾動

　　與FrontPage不同，Dreamweaver中插入的背景圖是會隨文字滾動的。有的時候我們需要製作固定的背景圖，怎麼辦呢？先定義一張背景圖，按“F10”開啟HTML源檔案，找到定義背景圖片的語句，例如background=″images/background.JPG″，在它的後面空一格加上一句bgproperties=″fixed″。預覽一下，是不是有點小小的成就感。

　　13. 定義大小不變的文字

　　為什麼別人網頁上的文字那麼漂亮，不管你怎麼按瀏覽器字型按鈕上的大小，他們的字型尺寸都不會發生變化。其實他們使用了網頁中的“CSS”樣式表技術，在Dreamweaver中要實現這一功能是非常簡單的。首先按“F7”或者選擇“視窗”菜單中的“樣式表”選項開啟樣式表編輯器，在視窗中單擊滑鼠右鍵選擇“建立”，在彈出的對話方塊中輸入需要定義的樣式表名稱，按“確定”，然後在列表中選擇第一項“類型”，並給具體的文字屬性定義參數（一般來說文字的大小在800×600的螢幕中選擇10.5較為適宜），按“確定”後，定義好的樣式表就出現了。選擇網頁編輯窗中的文本，單擊新的樣式表名，可以看到選中的文本發生的變化。預覽一下，試試定義的文本字型尺寸還會不會隨瀏覽器的選擇字型大小而改變。　　

　　14. 插入Flash動畫

　　Macromedia公司的Flash動畫因其具有互動性、傳送速度快等特點，已逐漸成為網頁製作的一項新武器，如果你的網頁上能插入一段Flash動畫，那麼一定會使你的作品增色不少。在Dreamweaver中插入Flash製作的SWF格式動畫十分容易，單擊對象工具列上的Flash徽標或單擊的“媒體”下的“Flash”，就可以開啟選擇SWF動畫檔案的對話方塊了，選好檔案後可在其屬性面板中設定播放的參數，即大功告成。

　　15. 讓表格給網頁留白

　　在Dreamweaver的新網頁上輸入文字時，預設格式是頂天立地的，十分不美觀。要避免這一缺憾其實很簡單，只要大家用好表格工具就行了。具體做法是：在新頁面上插入一張置中對齊的表格，為了能夠使表格方便控制，最好設定奇數列，並且數值不要太大。這樣在儲存格內輸入的文字就被限制在一個可以隨意調整寬度的地區內，就不愁文字不聽使喚了。

　　16. 改變狀態列提示文字

　　一般情況下，當瀏覽器裝入一個頁面時，在其狀態列上顯示的是該頁面的位址名稱，十分呆板。你有沒有想過給瀏覽器的狀態列增加一點個性呢？如果有的話，那麼請按照以下的步驟，定製自己喜歡的文字吧！首先開啟“Behaviors”行為編輯窗，單擊“＋”按鈕，選擇“Set Text Set”下的“Text Of Status Bar”選項，然後在方框中輸入自己的文字，例如“歡迎來到我的首頁”等，單擊“確定”即可。

　　17. 整合的文本代碼編輯器

　　可視化網頁編輯軟體的最大不便之處就是很難對原始碼進行編輯，更別說JavaScript了；不過Dreamweaver?將使你處理代碼變得異常輕鬆。這個內建的文本代碼編輯器主要的新功能是：自動縮排（可以一次選取多行進行縮排），?還可以進行符號的檢測，如果在編寫代碼忘了一個“”，它將給出提示。在工具表中的下拉式功能表會列出當前網頁中所有自訂JavaScript函數，可讓你在網頁原代碼中自由跳轉，“原始碼導航工具”可以讓專業人士方便地處理JavaScript函數，在文本代碼編輯器中輸入JavaScript代碼，系統將用不同的顏色來顯示。

　　18. 在Dreamweaver中輸入多個空格

　　我們平時輸入的空格是半形字元，在Dreamweaver中只能輸入一個，要想輸入多個空格只要輸入全形空格就可以了。輸入全形空格的方法是：開啟中文IME，按Shift+Space切換到全形狀態。這時你輸入的空格就是全形空格了。

　　19. 解決Dreamweaver的BUG之一

　　在Dreamweaver 3.0中行為面板（Behavior inspector）中，“Events for”下拉式功能表項無法開啟。這樣一來，很多特技效果形同虛設，根本沒法製作。其實這應該算Dreamweaver 3.0和中文Windows98不相容的一個地方吧，在英文Windows98中就沒有這個問題。而實際上這個菜單還是可以開啟的，只不過是不能正確顯示罷了。在選中下拉式功能表後，我們可以用上下鍵來選擇我們想要用的瀏覽器。

　　20. 用Dreamweaver 3.0的模版製作網頁，設定行為（Behavior）

　　在使用模板（Template）做出 淼耐 頁中不能新增行為。這是因為新增行為需要在HTML檔案的Head部分之中插入JavaScript，而使用了Template後，HTML檔案的Head部分會被“封鎖”住。如果要在使用模板產生的網頁中應用行為，你就需要事先在模板中定義好行為，然後把它定義為模板的可編輯區域。隨後，你就可以在網頁中更改這個行為了。但這也只限於更改行為的觸發事件（events）和動作（actions）的具體內容，而不能更改動作的類型。

    21. 給文字施加行為（Behavior），製作動態文字特效

    在Dreamweaver中普通的文字是以字元為單位的，不能作為對象，即一些非常有用的JavaScript事件不能賦予文字。因為文字不像圖片和其他控制項有具體的“標記”，所以文字與很多特效失之交臂。為了給文字添加特效，只有把文字做成超連結來處理。這樣文字就成為了對象，可以施加行為了。但是這樣又帶來了一些不需要的超連結屬性，比如底線，以及hover、visited等顏色變化。 要想單純為文字添加特效，可以先把所想設定的文字做成超連結，然後再在它的上面添加行為，最後我們再把超連結轉變為普通文字。具體的步驟如下：

　　選中你想編輯的文字，在連結目標框裡隨便填入幾個字元。選中這個連結，單擊視窗（Windows）→行為（Behaviors），彈出行為面板。按下“+”添加你想要的行為，如play sound等。開啟Dreamweaver的超文字編輯器，找到這個連結，把改為，把改為。最後把“href=...”刪掉。儲存此頁。按F12預覽一下。效果還不錯吧！

　　22. 精確定位網頁中各個元素的位置

　　精確定位網頁中各個元素的位置有兩種方法：使用表格或層。使用表格是目前比較通用的做法，具體方法是：先在網頁中建立一個表格，注意表格的邊框寬度應為０。然後再把各個元素按照你的要求放在各個表格單元之中。仔細調整表格單元的大小以及表格邊框的位置，這時在表格單元中的元素也會隨之移動位置。這樣你就可以比較精確地定位網頁中各個元素的位置了。使用表格的優點是通用，幾乎各個版本的瀏覽器可以致支援表格。它的缺點是使用起來比較麻煩，需要仔細進行調整，而且定位不十分精確。層在網頁中可以隨意放置，因此我們可以使用層來進行精確定位。使用方法是，在網頁中插入一個層，然後把你想要定位的元素放在層裡，接著我們就可以把層放到所想要任何位置了。此外，你還可以藉助尺規和網格進行精確的定位。因為層只在最新的瀏覽器中被支援，所以為了相容舊的瀏覽器，我們可以把層轉變為表格。方法是選擇“修改(Modify)→版面配置模式(Layout Mode) →把層轉化成表格(convert layers to table)”即可。注意這時的層不能有重疊，我們可以在插入層之前選擇“查看(view) →防止層交錯(prevent layer overlaps)”來避免層的重疊。一般來說轉換後的頁面可能會有一些變化，還需要我們手工進行調整。最後有一點要注意，在進行表格和層的相互轉換時，最好不要在一個頁面中同時使用層與表格，那樣可能會把你的頁面弄得一團糟。

　　23. 改變瀏覽者的滑鼠形狀

　　這是通過編輯樣式表來實現的。具體方法是：選擇“文字（text）→定製樣式（CSS Style）→編輯樣式表（Edit Style Sheet）”，彈出編輯樣式表視窗，在其中選擇“建立（new）”。接著選擇“建立一個定製的樣式（Make custom style）”，給這個樣式表起名，單擊確定。編輯該樣式表，選擇擴充項(extension)，在右邊的游標項（Cursor）中選擇要出現的指標效果即可。

　　24. 去掉超連結顯示文字之下的底線 　　

　　這一效果是通過編輯樣式表來實現的。具體方法是：“點擊文字（text）→定製樣式（CSS Style）→編輯樣式表（Edit Style Sheet）”，出現編輯樣式表視窗，選擇“建立（new）”。接著選擇重定義HTML標記（Redefine HTML Tag），並在下面的標記(Tag)選單中選擇a。編輯該樣式表，選擇類型(type)，在右邊的裝飾（decoration）中選中無（none ）即可。

　　25. 製作一個跟著頁面走的映像

　　這一效果是通過JavaScript實現的。一般來說完成這樣一個效果需要一定的編程能力，但現在我們可以通過Dreamweaver的外掛程式輕易地實現。外掛程式的安裝方法：解壓縮後拷貝到Dreamweaver下的檔案夾Configuration\Objects內的一個建立檔案夾裡面即可。重新啟動Dreamweaver之後，我們就可以在對象面板之中找到新安裝的外掛程式了。點擊外掛程式的表徵圖，在彈出的對話方塊中填入映像的存放地址以及映像的顯示位置就可以了。

   26. 製作滑鼠移上去後有變化的動態菜單

　　所謂動態菜單其實是兩幅圖，一幅是滑鼠不放在上面所顯示的，另一副是滑鼠移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現這個效果。首先插入一副圖片，用按一下滑鼠它，在屬性面版的串連欄內輸入要串連的網頁。然後開啟行為面板添，點擊“+”號，選擇swap image。接著出現一個視窗，要你選擇滑鼠移上去後所顯示的圖片，在此選擇第二副圖片，點擊“確定”。好了，效果完成了，多簡單。

　　27. 用Dreamweaver製作出一個類似於下拉式功能表的效果

　　製作一個類似於下拉式功能表的效果需要用到層的隱藏和顯示特性。具體的方法是：在頁面中插入一個單行多列的表格，作為你的菜單條。表格的列數由菜單選項的多少決定。插入一個層，在層中輸入第一個下拉式功能表的內容，並把這個層移動到表格第一列的下面。同理，對其他功能表項目也作如上的操作，插入相應的層。把所有層的顯示內容(vis)改為隱藏（Hidden）。

    選擇表格的第一個單元，單擊視窗（Windows）→行為（Behaviors），彈出行為面板。按下“+”添加行為Show-Hide layers，並將第一個層（Layer1）屬性改為顯示(Show)，其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為，將它的觸發事件(events)改為onMouseover。這樣，當滑鼠移動到第一個表格單元之上時，第一個下拉式功能表就會顯示出來。接著再添加一個行為Show-Hide layers，並將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為，將它的觸發事件(events)改為onMouseout。這樣當滑鼠從第一個表格單元之上移開時，第一個下拉式功能表就會隱藏起來。對其他的功能表項目重複上述操作。但要注意設定“菜單二”時，第二層顯示，其他層隱藏；設定“菜單三”時，第三層顯示，其他層隱藏；依此類推下去。好了，做好了，按F12看看吧。

　　28. 輕鬆製作下載檔案

　　用Dreamweaver其實很簡單，把要讓瀏覽者下載的檔案名稱寫上，然後拖動滑鼠選取這段文字，在文本的屬性面板上“Link”的屬性輸入框中寫上檔案名稱就行了。注意：若被下載的檔案與該網頁不在同一目錄下，則檔案名稱必須包含相對路徑，否則在下載時將提示找不到檔案。

　　29. 利用Dreamweaver的書籤製作跳轉連結

　　利用Dreamweaver的書籤我們可以實現這個功能。具體方法是：將游標移到你想跳轉到的地方，選擇菜單中的“插入（Insert）→書籤（Name Anchor）”，輸入書籤的名稱。接下來，在你想調用連結的連結目標框中填入“#書籤名稱”，這樣一個頁面內的跳轉連結就做好了。在這裡，如果我們在書籤名稱前填入網頁的名稱，就會跳轉到其他頁面中的書籤處。 比如說我們在Link處填入“index.htm#top”，當瀏覽者點擊這個連結時就會跳轉到index頁面中的top書籤處。

　　30. 去掉圖片和表格接觸地方的空隙

　　要使圖片和表格接觸的地方不留空隙，僅在表格屬性面板上把外框線（border）設為0是不行的，還需要在表格的屬性面板上把儲存格的兩個屬性設為0（即cellspacing="0"和cellpadding="0"）。

　　31. 用TracingImage協助定位網頁中各元素的位置

　　TracingImage是Dreamweaver一個非常有效功能，它允許使用者在網頁中將原來的圖案設計作為輔助的背景。這麼一來，使用者就可以非常方便地定位文字、映像、表格、層等網頁元素在該頁面中的位置了。TracingImage的具體使用是這樣的：首先使用各種繪圖軟體作出一個想象中的網頁排版格局圖，然後將此圖儲存為網狀圖像格式（包括gif、jpg、jpeg和png）。用Dreamweaver開啟你所編輯的網頁，在頁面的空白區單擊右鍵，選擇“Page Properties...”，然後在彈出的對話方塊中的Tracing Image項中輸入剛才建立的網頁排版格局圖所在位置。再在Image Transparen中設定TracingImage的透明度，OK。這樣你就可以在當前網頁中方便地定位各個網頁元素的位置了。使用了TracingImage的網頁在用Dreamweaver編輯時不會再顯示背景圖案，但當使用瀏覽器瀏覽時正好相反，TracingImage不見了，所見的就是經過編輯的網頁（當然能夠顯示背景圖案）。

　　32. 關於“Convert Table widths to Pixels”和“Convert Table widths to Percent”

　　“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver兩個設定表格寬度的重要功能。當你開啟一個帶有表格的網頁時，在狀態列中點中〈table〉標籤，在隨後顯示出的表格屬性工具面板中就能看到這兩個按鈕了。顧名思義“Convert Table widths to Pixels”就是將表格中所有單元的寬度以像素表示，而“Convert Table widths to Percent”是將表格中所有單元的寬度以百分比表示。仔細想想他們的作用，如果將一個表格的寬度全以像素表示，但瀏覽視窗被放大時，表格就不會隨之放大儲存格的寬度。而使用了“Convert Table widths to Percent”後能夠使你在640×480解析度下建立的100%寬的表格在更高的解析度下依舊保持100%的寬度。所以活用這兩個功能可以使網頁排版事半功倍。

　　33. 調用Style而不致使網頁原代碼混亂不堪

　　調用Style的方法很多，你可以單擊右鍵選擇Custon Style來調用Style規範，也可以在狀態列中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style規範，在網頁代碼中就產生一個〈span〉標籤，這樣標籤一多就會使檔案十分臃腫而且影響瀏覽器的解析速度，所以我建議盡量使用狀態列中的元素列表來調用Style。還有一個小技巧，如果你要使用一個Style定義某表格單元中的所有文字，只要在〈td〉標籤中調用Style就行了，而不需要在一個個定義〈p〉標籤。注意這個方法不適用於〈table〉標籤，因為在〈table〉標籤中用Style定義的文字格式會被Netscape忽略。

　　34. 使用定製視窗功能測試網頁在不同解析度下的效果

　　誰都不希望看見自己辛辛苦苦做的網頁在不同的解析度下面目全非，所以測試網頁在不同解析度下的瀏覽效果是網頁製作中很重要的一步。我們可以在Dreamweaver的操作介面中的狀態列中間，選擇需要的解析度來調節視窗大小，從而實現在不同解析度下測試網頁效果。

　　35. 上傳網站時無需使用第三方FTP軟體

　　Dreamweaver中融入了FTP功能，而且為網站上傳作了最佳化。我們可以做一個簡單的比較，當你使用一般的FTP軟體上傳網站時，是不是都按本地機上的網站目錄在伺服器中建立目錄，然後再一個個檔案上傳。這種做法實在沒錯，但由於本地機中的網站目錄中並不是每個檔案都被網頁調用（比如在建網頁時留下的備份檔案），所以篩選檔案的繁重工作量只有使用者自己知道。但使用Dreamweaver上傳網頁就可以方便得多，由於FTP功能在幕後為使用者進行了許多必要的工作，所以使用者只要將網站地圖內相關的HTML檔案上傳，Dreamweaver就會自動將與此HTML檔案相關的所有其他本地檔案一併上傳（如映像、ZIP檔案、FLASH檔案甚至是各種REAL檔案）。使用Dreamweaver內帶的FTP功能的具體做法是：編輯已經定義過的SITE，在“Site Definition for...”面板中選擇“Web Server Info”。如果網頁是通過FTP方式上傳的話，將“Server Access”設為FTP，在FTP Host中添入FTP伺服器的地址，在Host Directory中添入遠程登入目錄，在Login中添入使用者名稱，再填好Password。經過了以上的設定，就可以在Site面板中按Connect按鈕，當Dreamweaver成功連入伺服器後，Connect按鈕會自動變為Disconnect，並且在一旁亮起一個小綠燈。接著要做的事就是在要上傳的HTML檔案上單擊右鍵，選擇“Put”即可。當此HTML檔案上傳成功後，狀態條中將顯示Put Depanding File，說明Dreamweaver正在上傳這個HTML檔案所調用的其他本地檔案。不僅如此，Dreamweaver還可以直接下載伺服器上的檔案進行修改，方法麼，只要使試試Put旁的Get按鈕就明白了。

　　36. 實現用滑鼠指向連結時出現底線的效果

　　有些網頁的連結，原先沒有底線，你把滑鼠指向連結處，才會出現底線，滑鼠移掉底線就又沒有了。這種效果其實可以用層疊樣式表（CSS）來實現，在Dreamweaver中編輯層疊樣式表不用編寫代碼，具體操作方法如下：

　　（1）在快速啟動欄中點擊層疊樣式表按鈕（就是把滑鼠放上去顯示“show css styles”的那個按鈕），在彈出的CSS Styles面板上雙擊（none）；

　　（2）此時，可看到彈出的Edit Style Sheet 面板，在該面板上按New按鈕；

　　（3）再在彈出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標記）再在Tag中選擇“a”（超級連結標記）標記後按OK按鈕；（4）這時可看到彈出的Style dehinition for a 的對話方塊，在此對話方塊中可以設定超級連結的許多屬性，你可以按你的意願設定，但我們這裡主要是要去掉那討厭的底線，所以我們在decoration 屬性中選擇“none”，這樣就把底線去掉了；然後我們再選擇顏色為：#339966。按ＯＫ按鈕返回到Edit Style Sheet 面板；

　　（5）在Edit Style Sheet 面板上再按New按鈕；

　　（6）在彈出的New Style 面板上點取Use CSS Selector ，再在該面板上的selector選擇框中選擇“a:hover”（定義當滑鼠在超級連結上時連結的屬性），按OK按鈕；

　　（7）在彈出的Style dehinition for a:hover 的對話方塊中，我們在decoration 屬性中選擇“underline”，這樣就把底線又加上了；然後我們再選擇顏色為：#FF3300。按OK按鈕返回到Edit Style Sheet 面板；

　　（8）在Edit Style Sheet 面板上再按Don按鈕，至此所有設定結束。