DW中超實用的48個技巧（分享）

這篇文章跟大家分享48個dreamweaver超級實用技巧。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

相關推薦：《dreamweaver教學》

DW中超實用的48個技巧

#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. 讓Dreamweaver?4.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< /I>函數，可讓你在網頁原始碼中自由跳轉，「原始碼導航工具」可以讓專業人士方便地處理javascript< /I>函數，在文字程式碼編輯器中輸入javascript程式碼，系統將以不同的顏色來顯示。

******************************************** **************

************************************ ****************************

18. 在Dreamweaver中輸入多個空格

我們平常輸入的空格是半角字符，在Dreamweaver中只能輸入一個，要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是：開啟中文輸入法，按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部分之中插入java script，而使用了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的插件輕易地實現。你可以到http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下載這個外掛。外掛程式的安裝方法：解壓縮後拷貝到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按鈕，至此所有設定結束，你在Dreamweaver的源代碼檢視窗中將看到在與之間如下所示的程式碼：

37. 實作定義的超級連結文字顏色

文字超級連結的顏色（包括未被造訪的連結顏色、滑鼠的連結上的顏色、已被訪問過的連結顏色等等）可以用層疊樣式表（CSS）定義，以下就介紹如何能隨心所欲地設定文字連結的顏色。

（1）超級連結的預設顏色是：未被訪問的超級連結是藍色、被訪問過的超級連結是紫色；

（2）要使CSS定義的顏色起作用，在超級連結的文字的顏色屬性中什麼都不要填；

（3）若你已定義了文字的顏色，發現CSS中定義的超級連結顏色不起作用，你可以取消文字的顏色定義，或取消超級連結再重新定義一次，CSS定義的顏色就起作用了；

（4）超級連結上各種狀態下文字顏色的關係：一旦定義了被訪問過的連結的顏色（A: visited），則當連結被訪問過後，該連結的顏色不再改變，即定義滑鼠在超級連結上的顏色（a: hover）將不起作用了。若不定義被造訪過的連結的顏色（A: visited），則當滑鼠在超級連結上顯示a:  hover 中定義的顏色，當滑鼠移開時顯示a 中定義的顏色。

從上述可以看出，文字連結的顏色實際上只能在兩種顏色之間變換，並沒有像有些文章中講的那樣可以在多種顏色之間變換，但由於用那兩種顏色可以任意，所以應該講顏色的選擇範圍還是比較大的。

******************************************** **************

************************************ ****************************

38.在Dreamweaver中把圖形放在最中間

#點選選取圖形，在圖形的屬性面板的右上角Align（對齊屬性）邊上有個下拉框，在下拉框中選取，則文字在圖片四周繞排。若是單獨圖片在中間，則在影像面板上點取居中屬性即可。

******************************************** **************

************************************ ****************************

39.如何使用Behaviors 功能，但又不連結到任何地方去

選取要作為超級連結的元素（圖片或一段文字），在屬性面板上的網址列（Link）中不填入任何連結位址，只加上一個「#」號，（引號不包括在內）。這樣即可以使用Behaviors 功能，而又不連結到任何地方去了。

******************************************** **************

************************************ ****************************

40.實現在一張（較大）圖片上做出幾個不同的連結

在Dreamweaver中，這就是使用所謂的設定「圖像熱區域」。先選中圖像，然後在圖像屬性面板上有一個“Map”工具欄，在其下方有三個淡藍色的工具圖標，即“矩形”、“圓形”或“多邊形”，你可以根據需要選取一個（用滑鼠點就行），再把滑鼠移圖像上，按下滑鼠左鍵，拖曳滑鼠就畫出了一塊淡藍色的區域（不用擔心這塊淡藍色區域會破壞你的圖像，在瀏覽器中是不顯示的），這時你在屬性面板上把需連結的網頁位址添上就行了。你需要幾個連結就畫幾塊區域，隨你的便。

******************************************** **************

************************************ ****************************

41. 製作目錄樹

在總目錄的前方有一個“ "，一按這個“ "，即可顯示其下子目錄，“ "即變成“-"，一按“-"，即可隱藏其下子目錄，就像在資源管理器中一樣，這要做二個頁面，一個頁面寫上總目錄，一個頁面寫上子目錄。把總目錄的頁面上的“ ”號設置成超級鏈接，在“Link”欄中添上子目錄頁面的地址。把子目錄的頁面上的“-”號設置成超級鏈接，在“Link”欄中添上總目錄頁面的地址。具體效果可看一看Dreamweaver的幫助文檔，在這幫助文檔裡也是按一下總目錄，彈出子目錄，按下子目錄上的總目錄則返回到總目錄，只是沒用“ ”、“-”表示而已。你再看一下該文件的原始碼就一目了然了。

******************************************** **************

************************************ ****************************

42. 在Dreamweaver中輕鬆設定行間距

用層疊樣式表（CSS）來實現，在Dreamweaver中編輯層疊樣式表不用寫程式碼，具體操作方法如下：

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

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

（3）再在彈出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標記），然後在Tag中選擇「body」標記後按OK按鈕；

（4）這時可看到彈出的Style dehinition for body 的對話框，在此對話框中可以設置“body”標記的許多屬性，你可以按你的意願設置，但我們這裡主要是要設置行距，所以我們在line屬性輸入框中填上行距的像素點數，現在流行的九號字，行距一般用12，按OK按鈕返回到Edit Style Sheet 面板，此時已把「body」的行距設定好了;

（5）由於「body」中定義的行距對表格不起作用，所以我們再在Edit Style Sheet 面板上再按New按鈕；

（6）再在彈出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標記）再在Tag中選擇「td」標記後按OK按鈕；

（7）在彈出的Style dehinition for td 的對話框中設定td的行距，按OK鈕回到Edit Style Sheet 面板；

（8）在Edit Style Sheet 面板上再按Ｄon按鈕，至此所有設定結束，你在Dreamweaver的原始碼檢視窗中將看到在與之間如下所示的程式碼：

有了這段程式碼，你在該網頁上的所有文字的行距都確定好了，若不滿意，可修改設定。

43. 如何設計能讓瀏覽者在瀏覽時對網頁字體大小的設定不起作用

#用CSS層疊樣式表對字體進行強制性控制（像素）。

******************************************** **************

************************************ ****************************

44. 實作網頁每過五分鐘刷新一次的效果

在Dreamweaver的功能面板上選擇“head”功能組面板，在這面板上點擊“Refresh”功能圖標，在彈出的“Insert refresh”對話框中，在“Delay”中輸入要刷新的間隔時間，以秒計，例：隔五分鐘刷新一次，則輸入300即可。再在該對話方塊上選擇「Refresh This Document」(刷新目前視窗)，按OK，大功告成。當你再次瀏覽該網頁時，它將自動地隔五分鐘刷新一次。

******************************************** **************

************************************ ****************************

45. 解決用IE預覽正常的連結網頁，上傳到網站卻看不見的現象

把網頁的所有檔名統一成小寫（或大寫），再上傳就行了。因為很多伺服器使用的是UNIX作業系統，它對大小寫是很敏感的，也就是說大寫的文件名和小寫文件名它認為是兩個文件，你在上傳時必須注意大小寫。另外要注意：超級連結要使用相對路徑，不要用絕對路徑，也不要用中文檔名。

******************************************** **************

************************************ ****************************

46. 製作新開一個視窗開啟網頁的超級連結（即原來的網頁不被覆蓋）

在Dreamweaver中，在該連結的屬性面板上把「target（目標）」設定為「_blank」即可。

******************************************** **************

************************************ ****************************

47.隱藏不必要的標籤

當使用者在當網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上新增一個與之對應的元素標籤，以便於使用者選擇不可見元素。但這並不全是件好事，例如你在一個有很多層的頁面中的第一行便插入一個表格，就會發現由於首行排列了太多的層元素標籤而使得表格自動退到了頁面的第二行，雖然在瀏覽時並不影響效果，但這確確實實會阻礙你的工作。所以當你覺得某個元素標籤礙手礙腳時，就索性將之屏蔽掉。方法是按Ctrl U開啟Preferences面板，在Category中選取Invisibel Elements，在面板的右邊將會出現所有的元素標籤。只要將你討厭的元素標籤前的勾去掉，以後它就保證不會再出現了。

******************************************** **************

************************************ ****************************

48. 解決表格緊貼左上方的問題

對這個問題有幾種解決方法。

（1）按Ctrl J，彈出Page Properties，將Left、 Top、 Margin Width、 Margin Height 全設為0。

（2）把下面一段程式碼加到你的中：topmargin="0" leftmargin="0" ，這個方法只適用於IE。

（3）加入下面程式碼：，這個方法適用於Netscape

更多程式相關知識，請造訪：程式設計教學！ ！

以上是DW中超實用的48個技巧（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！