蔡逸竹

從零開始：用模板作網頁(1)

        隨著Internet的普及，很多人已經不滿足於僅僅上網衝浪，而希望深入地參與其中。現在，擁有自己的Web網站已經成為一種潮流。雖然製作一個簡單的網頁並不困難，但是製作出超凡脫俗的網站就不那麼容易了，因此我們特意為大家準備了最新網站設計軟件Dreamweaver MX 2004的系列教程，希望對大家有所幫助。

    通常在一個網站中會有幾十甚至幾百個風格基本相似的頁面，如果每次都重新設定網頁結構以及相同欄目下的導航條、各類圖標就顯得非常麻煩，不過我們可以借助Dreamweaver MX 2004的模板功能來簡化操作。其實模板的功能就是把網頁佈局和內容分離，在佈局設計好之後將其存儲為模板，這樣相同佈局的頁面可以通過模板創建，因此能夠極大提高工作效率。

　　一、製作模板
　　製作模板和製作一個普通的頁面完全相同，只是不需要把頁面的所有部分都製作完成，僅僅需要製作出導航條、標題欄等各個頁面的公有部分，而把中間區域用頁面的具體內容來填充。

　　第一步：先在Dreamweaver MX 2004中運行「File→New」命令，接著從圖1所示的窗口中依次選定「Template page→HTML template」選項，點擊「Create」按鈕之後即可創建一個模板文件。
　　第二步：在頁面設計視圖下插入網頁框架、導航條、Flash標題等所有頁面公有的元素(圖2)，然後運行「File→Save」命令將這個模板保存下來。

　　小提示：可以先下載一個中意的網頁，然後在Dreamweaver MX 2004中打開它，僅僅保留框架等元素之後通過「File→Save as Template」命令將其保存為模板，這樣能夠省去很多製作模板的時間。
　　為了避免編輯時候誤操作而導致模板中的元素變化，模板中的內容默認為不可編輯，只有把某個區域或者某段文本設置為可編輯狀態之後，在由該模板創建的文檔中才可以改變這個區域。先用鼠標選取某個區域(也就是每個頁面不同內容的區域)，接著運行「Modify→Templates→New Editable Region」命令，並且在彈出的對話框中為這個區域設定一個名稱，這樣就完成了編輯區域的設置。
　　小提示：設定好編輯區域之後需要運行「File→Save」命令保存所做的修改。

　　二、使用模板
　　有了模板之後，接下來就要在編輯網頁時候使用它們了。只要在Dreamweaver MX 2004主窗口中運行「File→New」命令即可看見圖1所示的新建窗口，接著進入「Templates」標籤即可查看到已經保存的模板，從中選取一種還可以在右部的預覽區進行預覽(圖3)，最後挑選一款中意的模板並點擊下部「Create」按鈕打開這個模板。

　　在打開的模板中，無法編輯的區域將呈高亮狀態顯示，但是有些位置是鎖定區域，卻不是高亮顯示，這主要是因為圖片正好蓋住了背景的顏色。對於這種情況，可以運行「Edit→Preferences」命令，在彈出窗口的「Category」列表中選取「Highlighting」一項，接著在右部區域中選取「Locked regions」旁邊的「Show」選項(圖4)，並且設定高亮顯示色為藍色，這樣就可以很清楚地分辨出模板中的鎖定區域了。
　　小提示：如果仍然看不見高亮顯示效果，還可以依次選中「View→Visual Aids→Invisible Elements」命令。

　　最後，我們只要在可編輯區域添加網頁的內容就可以了，比如添加一些文字說明或者是插入相應的圖片，最後通過「File→Save」命令保存頁面即可。

　　三、修改和更換模板
　　在通過模板創建了若干個頁面之後，如果需要更改頁面或者增加欄目，再對所有的頁面手工修改則非常麻煩，因此我們可以通過Dreamweaver MX 2004的模板修改功能來解決這個問題。比如我們對模板進行了修改之後，運行「File→Save」命令來保存模板，這時候會彈出提示框詢問是否更新所有使用了該模板的頁面(圖5)，確認之後就會顯示出更新的頁面總數以及更新的時間等信息。

　　另外，Dreamweaver MX 2004還提供了一個為網頁更換模板的功能，這樣更換模板有點像給人換衣服，只要把各種模板製作好，然後想穿哪件就穿哪件。不過模板也不是隨便可以更換的，可以更換模板的條件是被更換的頁面必須是通過模板創建的，而且頁面中的可編輯區域個數和名稱必須與要更換模板的可編輯區域個數和名稱相一致。比如一個網頁中有3個可編輯區域，名稱分別為t1、t2、t3。另外還有一個模板，無論這個模板什麼結構，只要它也有3個可編輯區域，並且名稱也是t1、t2和t3，那麼就可以用它來為原先的網頁更換新模板，而頁面中3個可編輯區域的內容則相應保持不變。具體的更換模板方法也很簡單，只要運行「Windows→Templates」命令打開模板面板，此時可以從上部區域挑選合適的模板，然後點擊「Apply To Page」按鈕，這樣就可以很快完成模板更換操作了。
　　小提示：利用這個功能可以為網站首頁分別製作夏天和冬天兩個版本，這樣可以非常方便地更換模板。
　　其實模板的相關內容還很多，不過限於篇幅只能選取部分介紹，希望大家能夠舉一反三，徹底領會到模板的精妙所在。




Macromedia Dreamweaver 8.0 繁體中文版
軟體性質： 共享
檔案大小： 61.6 MB (63078kb)
作業系統： Windows All
語言： 繁體中文
程式網址： 訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
介紹：Dreamweaver提供了廣泛的工具來開發專業且豐富的網站。它讓你視覺化地設計，並提供多種多媒體的整合及網頁設計工具，如Fireworks, Flash, Shockwave, QuickTime和RealMedia。

藉由內建對Dreamweaver UltraDev和Macromedia HomeSite的支援，Macromedia Dreamweaver MX在設計程序上加入更多的彈性與效率。它也提供整合式的開發環境及拖曳式工具，適合XML, XHTML, ASP, ASP.NET, JSP, PHP和MacroMedia ColdFusion的編寫。



訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。          解壓密碼:

本帖隱藏的內容需要回復才可以瀏覽

蔡逸竹

從零開始：表格定位網頁(2)

        使用表格可以清晰地顯示列表的數據，實際上表格的作用遠遠不止顯示數據，它在網頁定位上一直起著重要的作用，尤其是對於使用非IE瀏覽器的網友來說，使用表格定位的網頁比使用圖層定位的網頁更具有優勢。

　　一、創建表格
第一步：在Dreamweaver MX 2004中運行「Insert→Table」命令，彈出屬性設置窗口，其中「Rows」和「Columns」分別對應著表格的行數和列數，「Table width」表示表格的寬度，而「Border thickness」則是邊框的寬度，同時還可以設定表格的樣式，根據自己的需要來設置表格的相應屬性即可。
　　小提示：表格的寬度和高度可以通過瀏覽器窗口百分比或者使用絕對像素值來定義，比如設置寬度為窗口寬度的60%，那麼當瀏覽器窗口大小變化的時候表格的寬度也隨之變化；而如果設置寬度為400像素，那麼無論瀏覽器窗口大小為多少，表格的寬度都不會變化。
　　第二步：點擊窗口中的「OK」按鈕之後即可在Dreamweaver MX 2004中新建一個表格，而且通過窗口下部的屬性面板還可以對其進行諸如表格線條的顏色、表格的背景色、單元格的對齊方式等參數進行調整。


　　二、基本使用
　　在創建了上述的表格之後，我們就可以對它進行調整使用。比如我們需要製作圖1所示的表格，就可以先插入一個四行三列的表格，然後對其進行下述操作。
　　第一步：在表格第一列的上面兩個單元格中按下並拖動鼠標，此時可以選中兩個單元格。接著點擊屬性模板中的「Merges selected cells using spans」按鈕，這樣就把選中的兩格合併成為一個單元格。按照這種方法再將表格第一行右側的兩個單元格合併為一個單元格。
　　小提示：選中一個單元格之後點擊屬性面板中的「Splits cellsintosrows or columns」按鈕可以把單元格拆分為多個行或者列。
　　第二步：將表格第一列的三個單元格全部選中，再將屬性模板中的背景顏色(Bg)一項設置為「#FFFF00」，這樣表格第一列中的單元格背景全部變為黃色。
　　第三步：在表格中輸入相應的文本，為了美觀可以在屬性面板中進行居中設置。
　　第四步：為了使表格產生立體效果，可以將整個表格選中，然後在屬性面板中設定表格邊框的寬度(Border)為7，並且將邊框顏色(Border color)設置為藍色即可。
　　小提示：通常選取整個表格比較困難，在此提供四種常用的方法：1.把鼠標移動到表格右邊界外側，按下鼠標之後往左拖拽，這樣可以快速選取整個表格。2.運行「Modify→Table→Insert Table」命令選擇整個表格。3.在單元格中右擊鼠標，並且從彈出菜單中選擇「Table→Insert Table」命令選取整個表格。4.用鼠標點擊任一個單元格，接著按兩下「Ctrl＋A」組合按鈕選取整個表格。
　　完成上述操作之後，我們就可以在Dreamweaver MX 2004中定製出頗具專業水準的表格了。


　　三、表格定位
　　其實表格的網頁定位主要通過將網頁內容分成若干個區，然後將相應的內容分別填入不同的表格，從而做成非常規範與專業的網頁。下面就來看看圖2所示的網站是如何通過表格實現的。
　　1.標題和導航區
　　網頁最上部由兩個大的表格組成：上面表格是圖片區，下面是導航區。圖片區為一行一列，通過「Insert→Image」命令插入網站的標題圖以及Logo圖標。導航區則是一個一行九列的表格，分別輸入輸入各個子欄目的名稱，然後通過「Insert→Hyper Link」命令來創建每個導航欄目的鏈接。
　　2.正文區
　　正文區總得說來是由一個一行三列的大表格構建而成，其中每一列再通過插入單獨的表格或者拆分的方法來形成多個區域並輸入相應的信息。比如最左邊一列就可以插入一個5行一列的表格，分別用來顯示Logo圖標以及相應的文字內容；中間一列可以拆分為3至4個單元格，每個單元格用於顯示不同欄目的主要內容提示；右邊一列也可以拆分為5個區域顯示不同的內容。這樣在一個大表格中劃分出多個小單元格組成了網頁的主要內容。至於具體的單元格操作在此就不再贅述，大家可以自己試著體會一下。
　　雖然通過表格可以實現最基本的網頁定位，但是這種方法也並不是沒有缺點，它的最大問題在於表格內容下載比較耗時，往往要等一個表格中全部內容下載完成後才能顯示該表格內容，因此尤其要注意表格的嵌套使用，盡量不要嵌套過多的表格以影響頁面的下載速度。

蔡逸竹

從零開始：框架構建網頁(3)

        我們登錄一些論壇之後，可以看見左邊是每個討論區的名稱，點擊任意一個討論區就可以在右部區域中看見相應討論區的內容，不過左右部分是獨立顯示的，例如拖動左邊的滾動條不會影響右側的顯示效果。其實這就是頁面中利用了框架技術，因此可以把瀏覽器的顯示空間分割為幾個部分，每個部分都獨立顯示網頁內容。而且把幾個框架結合在一起構成框架集，能夠讓頁面具有更為豐富的效果。

一、創建框架和框架集
　　第一步：在Dreamweaver 中新建一個頁面，運行「View→Visual Aids→Frame Borders」命令之後可以看見編輯窗口中出現一個邊框，用鼠標點擊邊框之後可以看見虛線框，說明新建的頁面中已經附帶了框架。
　　第二步：按下「Alt」按鍵，用鼠標拖拽邊框，鬆開鼠標之後就可以把窗口一分為二，這樣就把頁面分為兩個邊框。比如拖拽左右邊框可以把窗口分為左右兩個部分，而拖拽上下邊框可以把窗口分為上下兩個部分。另外，窗口的四個角也可以拖拽，這樣可以直接把窗口分為四個區域(如圖1)。當窗口分割為幾個框架之後，每個框架都可以作為獨立的網頁進行編輯，也可以直接把某個已經存在的頁面賦給一個框架。

　　第三步：框架允許嵌套，比如要創建圖2所示的框架，可以先通過上述的方法水平一分為二，但是接著不能直接拖拽邊框，否則會得到圖1所示的框架。正確的方法是先在右下角的框架面板中點擊右部的框架，然後再按下「Alt」按鈕拖拽邊框。
　　小提示：如果邊框拖拽錯了，只要用鼠標把需要刪除的線拖拽到父框架的邊框上即可刪除它。


　　二、編輯框架
　　頁面中經常混有框架和框架集，選取不同對象可以進行不同的屬性設置。
　　第一步：框架集的屬性。選中框架集之後可以看見屬性對像面板(如圖3)，其中「Border」一項可以設定是否顯示邊框，「Border Width」一項可以設定邊框寬度，「Border Color」可以設定邊框的顏色。另外還可以設置每個邊框的尺寸，此時在面板右邊的縮略圖中選定一行或者一列，然後在它旁邊的「Alue」輸入框中輸入數值，並且選擇像素或者百分比作為單位即可。
　　第二步：框架的屬性。如果在框架面板中選擇任意一個框架，在框架面板中被選中的框架會有黑色的邊框顯示，這時就可以在屬性面板中進行相應的設置了(如圖4)。比如在此可以通過「Src」地址欄設置框架中的網頁文件，「Scroll」為是否加入滾動條，「Border」可以決定是否顯示邊框，「No resize」允許在瀏覽器是改變框架大小，另外「Margin Width」和「Margin Height」分別設置邊界的寬度和高度來決定框架中內容和邊框的距離。
　　第三步：輸入框架中的內容。用鼠標點擊任意一個框架之後就可以像正常編輯頁面一樣插入各種文本內容、圖片、Flash動畫和背景音樂等網頁元素。

　　其實利用框架能夠對網頁佈局進行合理規劃，尤其在設計網頁初期更顯得格外重要，因此需要大家在日常使用中多加練習，這對搭建一個優秀的網站可是大有裨益的！

蔡逸竹

從零開始：使用圖層技術(4)

        圖層是網頁的一個區域，在一個網頁中可以有多個圖層存在，它最大的魅力在於各個圖層可以重疊，並且可以決定每個圖層是否可見，同時也能夠自定義各圖層之間的層次關係。在熟練掌握了圖層技術之後，就可以給網頁提供強大的頁面控制能力。

　　創建圖層
為了說明圖層的功能，我們先來製作圖1所示的簡單的實例效果(如圖1)。
　　第一步在Dreamweaver MX 2004中新建一個頁面，運行「Insert→Layer Objects→Layer」命令，此時編輯窗口中會出現一個黑色矩形框，這就是插入的圖層。當鼠標移動到矩形的框線上時，鼠標會變成十字箭頭形狀，此時點擊鼠標則框線周圍出現8個黑色實心方塊，左上角還有一個空心方塊，表示這個圖層被選中了。
　　提示：用鼠標拖拽實心方塊可以改變圖層大小，拖拽左上角的空心方塊可以改變圖層的位置。

　　第二步在圖層中點擊一下鼠標，並且在其中輸入「中國電腦教育報」，然後在屬性面板窗口中將文字設置為藍色。
　　第三步單擊圖層邊框選中圖層，接著運行「Edit→Copy」命令複製當前圖層，然後在編輯窗口其它空白處點擊一下鼠標，並且運行「Edit→Paste」命令，這樣在編輯窗口中就又出現了一個圖層，不過目前它們重疊在一起，需要移動圖層之後才能看見這兩個圖層。  
　　第四步把其中一個圖層的文字顏色更改為黑色，並且移動圖層位置，使得兩個圖層的位置相差幾個像素，這樣就產生了陰影效果(如圖2)。

　　完成上述操作之後按下「F12」按鍵進行預覽，就可以在IE瀏覽器中查看到圖1所示的效果了。

　　嵌套圖層
　　所謂嵌套圖層指的是一個圖層創建在另外一個圖層中，比如圖3所示的就是一個典型的嵌套圖層(如圖3)。實際上製作這種嵌套圖層很簡單，只要創建了一個父圖層之後用鼠標點擊圖層內部，並且再次插入一個圖層即可。不過嵌套的圖層並不意味著子圖層必須要在父圖層內部，它們之間存在著繼承關係。

　　繼承的作用是可以使子圖層的可見性和父圖層保持一致，由於很多動態網頁的特效是通過控制圖層的可見性來實現的，因此當父圖層可見性改變時，子圖層的可見性也隨之改變。而且繼承關係也可以讓子圖層和父圖層的相對位置不變，比如我們拖拽父圖層移動，此時子圖層也會跟隨著移動，這在製作動態網頁的時候將顯得非常有用。

　　圖層的「Z-順序」
　　和表格相比，圖層最大的優勢在於圖層可以重疊，為了表示各個圖層哪個在上面，哪個在下面，就要給每個圖層設定一個序號，這個序號就是「Z-順序」，它的意思就是除了屏幕的X和Y坐標之外，人為增加一個垂直於屏幕的Z軸。
　　如圖4所示，左邊區域的四個圖層和右邊區域的四個圖層就有明顯的不同，而調整圖層的順序也很簡單，只要用鼠標依次點選放置在最下部、中部和最上部的圖層即可。但是這種操作方式在圖層很多的時候就顯得有些麻煩了，後期調整也不便，因此我們可以通過圖層面板進行調整。

　　先運行「Window→Layers」命令激活圖層面板，此時可以看見圖5所示的面板窗口(如圖5)，在這裡只要選中需要改變序號的圖層，按下鼠標之後向上或者向下拖拽，當拖拽到希望插入的兩層之間出現一條橫線時鬆開鼠標，這樣就可以改變各個圖層的「Z-順序」了。
　　提示：直接單擊「Z」框的數值可以更改為所需要的圖層層次。


　　使用圖層建立表格
　　雖然使用圖層來定位網頁元素比使用表格方便得多，但是只有IE 4.0以上版本的瀏覽器才支持圖層功能，因此為了讓使用舊版本瀏覽器的朋友也可以看到你辛苦製作出來的作品，最好的方法就是把圖層轉換為表格。
　　第一步在圖5所示的窗口中選取上部的「Prevent overlaps」復選框，這樣使得每個圖層不能互相重疊，否則在轉換過程中會有警告信息提示。
　　第二步運行「Modify→Convert→Layers to Table」命令，這時可以看見圖6所示的窗口(如圖6)，在「Table layout」區域中分別選擇「Most Accurate」和「Use Transparent GIFs」兩個選項，其中前者通過精確轉換為每個圖層建立一個單元格，確保各個單元格之間的距離；後者會在轉換的表格最後一行中填充透明的GIF圖，這樣可以保證在所有瀏覽器中都有相同的外觀。

　　第三步按下「OK」按鈕之後即可完成圖層到表格的轉換操作。
　　提示：Dreamweaver MX 2004還提供了從表格到圖層的轉換功能，操作步驟類似。
　　如果想把自己的網頁製作的絢麗多彩，就必須掌握圖層技術，否則日後製作動態網頁時候將會遇到不少困難，因此建議大家通過上文的介紹深入研究一下，才能夠真正掌握圖層技術。

蔡逸竹

從零開始：行為豐富網頁(5)

        行為可以說是Dreamweaver中最有特色的功能，它可以讓你不用書寫一行javascript代碼即可實現多種動態網頁效果。行為的關鍵在於Dreamweaver中提供了很多動作，其實就是標準的javascript程序，每個動作可以完成特定的任務。這樣，如果你所需要的功能在這些動作中，那麼就不要自己編寫javascript程序了。

　彈出消息框
如果希望別人進入網站首頁的時候可以看見一個彈出的消息框來顯示一些內容，則可以通過下述方法實現。
　　第一步在Dreamweaver MX 2004主窗口中新建一個頁面，接著運行「Windows→Behaviors」命令激活行為面板。
　　第二步在行為面板中點擊「+」按鈕，並且從彈出菜單中選取「Popup Message」命令，這時可以看見圖1所示的窗口，在其中可以輸入諸如「歡迎光臨中國電腦教育報網站！」之類的提示信息。

圖一
　　第三步添加好提示文字之後，控制面板中就多出一個名為「Popup Message」的行為，此時還要點擊左部的下拉菜單，並且從中選擇「onLoad」一項，這樣當別人進入頁面之後就會自動執行設置的行為，自然也就能夠看見彈出的消息框了。
　　提示：從下拉菜單中還可以選擇「onKeyDown」、「onMouseDown」之類的行為，使得按下鍵盤或者點擊鼠標之後出現消息框。

　　鏈接解釋文字
　　在瀏覽一些網頁的時候，將鼠標放在圖像或者鏈接上會有解釋文字出現，實現這種效果可以通過下述步驟實現。
　　第一步先在Dreamweaver MX 2004的編輯窗口中插入一幅圖像，單擊這幅圖像之後在屬性面板的鏈接輸入框內填寫「#」號讓它鏈接本頁。
　　第二步通過「Insert→Layer Objects→Layer」命令在圖像旁邊添加一個層，並且輸入需要顯示的話。選擇這個層之後，在屬性面板中將「Vis」屬性設置為「hiddend」來隱藏該層(如圖2)。

圖二
　　第三步選擇圖像之後，通過「Windows→Behaviors」命令激活行為面板，單擊「+」按鈕並選擇「Show-Hide Layers」一項。在彈出的窗口中選取需要顯示的層，接著點擊下部的「Show」按鈕，這樣確認之後就可以在行為面板中多出了一個名為onMouseOver的事件。此時點擊「+」按鈕並擊選擇「OnMouseOver」一項，這樣當鼠標放在圖像上就可以顯示該層，也就是可以出現浮動的文字解釋了。
　　第四步接著參照第三步為剛才的層添加「Hide」事件，並且將行為設置為「OnMouseOut」，這樣鼠標拿開時就可以隱藏該層了。
　　完成上述操作之後，按下「F12」按鈕即可打開IE瀏覽器進行預覽，當鼠標移動到這個圖片上的時候會出現預先設置好的提示字樣，而鼠標移開圖片時字樣自動隱藏。

　　自動調整窗口大小
　　有些網頁在改變窗口大小的時候也會隨之調整網頁頁面大小，因此窗口過大就不會有空白處，窗口過小邊緣就不會跑出移動條，對於這種自動調整頁面大小的功能，在Dreamweaver MX 2004中可以參照下述步驟來很容易的實現。
　　第一步新建一個頁面，然後通過「Insert→Table」命令插入一個一行三列的表格，此時可以先不管它的寬度，而是通過下述設置讓它自動伸展適合瀏覽器窗口。
　　第二步這時可以看見每個單元格下部都標明了寬度且有一個小三角形(如圖3)。在這個表格中，可以設定哪部分是需要固定的，不過只能讓一列自動伸展，比如此處我們設定最後一列隨著窗口大小的變化自動伸展。

圖三
　　第三步選中最後一列，運行「View→Table Mode→Layout Mode」命令，並且在彈出的菜單中選擇「Make Column Autostrach」一項(如圖4)。

圖四
　　第四步接著將出現對話框，並且會提示為了能夠使行伸展，Dreamweaver需要放置一些間隔圖片在其它列中，在此選擇「Create a spacer image file」一項，這樣圖片在瀏覽器窗口不會顯示出來，而是起著固定表格的作用。
　　第五步確認之後返回原先的編輯窗口，可以看見最後一列已經自動伸展填充了整個瀏覽器窗口，而另外兩列則保持著固定的寬度。
　　提示：設定自動伸展的列可以在列上端看見一個波浪線。
　　完成上述操作之後，在IE瀏覽器中預覽頁面效果的時候，如果改變窗口的大小，則最後一列的寬度也會隨之變化，而前兩列的寬度維持不變，這樣就可以實現自動調整窗口大小了。

　　上文介紹的僅僅是 Dreamweaver 中行為功能的一些方法，靈活地把行為和圖層結合運用還可以實現諸如動態圖片、可拖拽的圖層等等功能，讓你的主頁看起來更加豐富多彩！

蔡逸竹

從零開始：超鏈接全接觸(6)

        在經過前面幾個部分的操作之後，我們的網頁已經圖文並茂，具有相當的效果了，但是這對於網頁來說還不夠，為了網站中的眾多網頁能夠成為一個有機的整體，必須將各個網頁通過超鏈接方式聯繫起來，這樣才能夠讓瀏覽者在不同的頁面之間跳轉。

　　鏈接圖片和文字
    為一些文字或者圖片建立鏈接非常方便，只要用鼠標選中需要變成鏈接的圖片或者文字，然後在屬性面板的「Link」輸入框中輸入需要跳轉的目標頁面地址，或者按下輸入框旁邊的文件夾圖標來選擇需要跳轉的文件。除此之外，Dreamweaver MX 2004還提供了一種通過網站窗口來快速鏈接文件的方法。

　　第一步 首先運行「Site→Manage Sites」命令，並且從彈出菜單中選擇一個已經創建好的站點，此時可以在右部看見彈出的站點管理窗口。
　　第二步 在編輯區選中文字或者圖片，直接拖拽屬性面板中「Link」輸入框旁邊的圓形標靶圖標，這時將出現一個箭頭，當箭頭指向網站管理器中的某一個文件時，文件周圍會出現一個方框(如圖1)。
　　第三步 鬆開鼠標之後，選中的文字下部就會出現下劃線，同時單詞的顏色變成藍色，而且「Link」輸入框中也會自動顯示目標文件的地址。
　　提示：在建立鏈接的時候需要注意URL的兩種方式。1.絕對地址：例如www.abc.com/test.htm；2.相對地址：比如download/1.htm，說明頁面1.htm在服務器的根目錄中。

圖1

　　在一張圖片上設定多個鏈接
　　有些網頁在一張大圖片上做了多個鏈接，這樣訪問者可以通過點擊圖片的不同位置進入不同的頁面，這是應用了圖像熱區域的概念，我們可以參照下述步驟實現。
　　第一步 在Dreamweaver 中可以先選中圖像，此時可以在圖像屬性面板上看見一個「Map」區域，在其下方有三個淡藍色的工具圖標，即矩形、圓形和多邊形。
　　第二步 根據需要用鼠標選中其中的一個，再把鼠標移到圖像上拖拽出一塊淡藍色的區域。
　　第三步 在屬性面板中的「Link」輸入框中填寫需要鏈接的網頁地址，這樣一個圖像熱區域就做好了。
　　同樣，再對這幅圖像設定多個圖像熱區域，也就可以實現點擊圖片的不同區域進入不同的頁面了。

　　定制頁面內跳轉的鏈接
　　如果你經常在網上訂閱免費的電子雜誌，或者瀏覽超長的頁面應該對這種標籤鏈接不陌生，這是通過一個類似目錄的列表來方便地跳轉到頁面內任何部分。
　　第一步 在Dreamweaver 中先確定鏈接指向的位置，也就是屏幕跳轉後停留的位置，接著選中目標文本並運行「Insert→Named Anchor」命令。
　　第二步 在「Anchor name」輸入框中鍵入標籤名稱(比如test3)，這時在文本下面會自動出現一個錨式標記來區別開普通的文本內容(如圖2)。

圖2
　　第三步 在屬性板的「Link」輸入框中輸入「#test3」，其中test3就是剛才設置的名字，這樣即可實現頁面內跳轉功能了。
　　提示：如果想指向另外一頁中的某個位置也可以，把這個錨式標記放過去就行了。

　　快速檢查網頁鏈接
　　上網衝浪的時候，最討厭的就是看見「Web Server error 4004:File Not Found」之類的出錯信息。由於一個網站中的的鏈接數量很多，稍有不甚就會導致很多鏈接出錯，不過在Dreamweaver MX 2004中可以很方便地對鏈接進行檢查。
　　第一步 在Dreamweaver MX 2004中運行「Site→Check Links SideWide」命令，此時將會激活鏈接檢查面板。
　　第二步 從面板左上部的「Show」下拉菜單中可以選擇Broken Links(斷掉的鏈接)、Extrenal Links(外部的鏈接)、OrphanedFiles(孤立文件)三種，比如我們選取Orphaned Files之後，Dreamweaver MX 2004將對當前鏈接情況進行檢查，並且將孤立的文件列表顯示出來。
　　第三步 對於有問題的文件，直接雙擊鼠標左鍵即可打開進行修改。
　　提示：外部鏈接是鏈接到外部網站的鏈接地址，Dreamweaver無法對其正確性進行檢查。
　　在為網頁建立鏈接的時候需要提醒大家一定要格外小心，因為網站通常都有數百個頁面，稍不留神就會導致空鏈接或者是鏈接錯誤的情況，這對你的網站形象可是有很不好的影響喲！

蔡逸竹

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. 讓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進制代碼，真方便。

蔡逸竹

Dreamweaver超級技巧（中）

      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中只能輸入一個，要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是：打開中文輸入法，按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之後，我們就可以在對像面板之中找到新安裝的插件了。點擊插件的圖標，在彈出的對話框中填入圖像的存放地址以及圖像的顯示位置就可以了。

蔡逸竹

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不支持中文文件名

　　用Dreamweaver製作網頁時，如果插入的圖片、GIF動畫、聲音、視頻或鏈接的網頁是用中文命名的，在用IE瀏覽器瀏覽時可能顯示不出來。以至於大家不得不將用到的素材全改為英文文件名，然後再在Dreamweaver中引用。隨著素材的增多，因為是英文文件名，要查找某個文件是多麼不方便呀!

　　經過摸索，筆者發現Dreamweaver可以插入以中文命名的素材、也可以鏈接以中文命名的網頁。在插入素材或鏈接網頁後切換到代碼窗口，將亂碼文件名改為相應的中文文件名即可。

　　注意:「屬性」面板中已顯示出插入或鏈接的中文文件名，但在代碼窗口中顯示的是亂碼，你只需按照「屬性」面板所顯示的文件名將代碼中的亂碼改正過來即可。這樣再用IE瀏覽器瀏覽就可以顯示出來。