Dreamweaver基礎(chǔ)技巧全面接觸

1、DreamweaverDreamweaver 基礎(chǔ)技巧全面接觸基礎(chǔ)技巧全面接觸本文關(guān)鍵字：本文關(guān)鍵字：很多朋友使用 Dreamweaver 一段時間后，開始熱衷于尋找各式各樣的插件，追求各種各樣的特效，而對于 Dreamweaver 中的基本功能反而不去深入研究，其實在 Dreamweaver 中有很多有用的技巧，如果你多加運用，不僅能提高效率，而且可以實現(xiàn)很多實用的效果。今天我把工作中常用的一些技巧介紹給大家，希望對大家能有些用途，同時也希望能喚起大家深入研究的愿望。我準備根據(jù)工作中的不同階段分別介紹各種技巧。一、一、 規(guī)劃階段規(guī)劃階段站點窗口的技巧站點窗口的技巧Dreamweavr 的站點

2、窗口常常被很多朋友忽視，其實利用站點窗口我們可以方便的完成很多任務(wù)。下面我介紹幾個實用的技巧。1 1、快速添加站點導(dǎo)航、快速添加站點導(dǎo)航。使用站點窗口中的網(wǎng)站地圖可以快速制作網(wǎng)站雛形，并可以方便的在個頁面之間加入導(dǎo)航鏈接。首先按如下圖標打開站點地圖窗口；選中 index.htm 文件；點擊并拖動站點導(dǎo)航（SiteNavigation）窗口中 index.htm 文件右上角的小圓圈，將它拖動到左邊文件窗口中的某一個文件上，如下圖所示；Dreamweaver 會自動將 mydesign.htm 的鏈接加入到 index.htm 文件中，同樣執(zhí)行此操作并分別指向其他相關(guān)鏈接文件后，導(dǎo)航窗口如下圖：此

3、時打開 index.htm 文件，可以看到相應(yīng)的連接文字和鏈接都已經(jīng)添加好了，我們可以根據(jù)需要將他們合理的修改和組織。如圖：2 2、快速修改文件、快速修改文件 TitleTitle。很多時候我們新建的文件往往忽視設(shè)定文件Title 的內(nèi)容，事后需要修改時，常常得打開每一個文件分別修改。其實這個工作可以在站點窗口中方便的完成。打開站點窗口 View 菜單下的 Show PageTitles，可以使站點窗口中的文件顯示出文件頭，而不是原先的文件名。默認的文件頭是 Untitled Document 我們可以分別兩次點擊，改變默認的文字為我們需要的文件頭。如圖：3 3、快速生成站點地圖。、快速生成站

4、點地圖。有時我們需要制作一個包含當前站點所有文件結(jié)構(gòu)的站點地圖而找不到合適的方法。Dreamweaver 本身就帶有這個功能，方法如下：打開 FileSave Site Map 命令，在彈出對話框中輸入保存的文件名，Dreamweaver 會在當前站點的根目錄下自動生成一個.bmp 或.png 格式的站點圖片。二、二、 頁面布局階段的技巧頁面布局階段的技巧Dreamweaver 不僅僅是一個良好的頁面制作工具，同時他還可以進行精確的頁面排版和布局，這一部分我們介紹幾個頁面布局方面的技巧。1 1、打開輔助表格。、打開輔助表格。搞過設(shè)計的朋友都特別希望能精確的定位網(wǎng)頁元素，他們喜歡每個元素都能按自

5、己的愿望精確的定位。Dreamweaver 自帶的 Grid 功能可以有助于這種希望的實現(xiàn)。執(zhí)行命令 ViewEdit Grid 打開坐標輔助，可以選擇網(wǎng)格狀或者是點狀顯示，同時打開 Snap to Grid，以后插入或添加新的元素時，都會按你的設(shè)定精確定位。2 2、利用表格排版頁面技巧。、利用表格排版頁面技巧。合理利用 Dreamweaver 中的表格功能，可以方便的達到美化頁面的目的，下面我介紹幾個技巧。1）創(chuàng)建 1px 邊框。有些朋友抱怨 Dreamweaver 無法做出單像素的表格邊框，其實仔細利用表格的屬性面板即可做出這種單像素表格。首先使用 Object面板插入一個表格，定義表格寬

6、、高及行數(shù)和列數(shù)。此時 Dreamweaver 中插入表格的默認 CellPad 和 CellSpace、Border 都為 0。在屬性面板中定義表格的Border 為 0，CellPad 為 5（這項可使單元格中的內(nèi)容與單元格邊緣之間保持 5個像素）；CellSpace 為 1（此項使得單元格之間保持 1 個項素的間距）。設(shè)置表格的背景色為深色（如#999999），設(shè)置單元格的背景色為淺色（如#FFFFFF）。在瀏覽其中觀察效果即可。2）導(dǎo)入數(shù)據(jù)表格。有時我們需要將一些在 Execel 文件中創(chuàng)建的表格導(dǎo)入Dreamweaver 中，我們可以下將原來的 Execel 文件另存為帶制表符分隔的

7、.txt文本文件。在 Dreamweaver 中執(zhí)行 InsertTabular Date 打開如下窗口：添好各個參數(shù)后即可將其中的數(shù)據(jù)導(dǎo)入 Dreamweaver 的一個表格中。3）格式化表格。如果你對重復(fù)的設(shè)定各個單元格的參數(shù)感到厭煩的話，使用 Format Table 命令可以幫你快速格式化表格，此命令在 Command 菜單下，此命令內(nèi)帶多種表格配色方案，你可以選擇一種，Dreamweaver 會自動將色彩方案應(yīng)用到你選定的表格上。如圖：123412344 4、表格和層互轉(zhuǎn)。、表格和層互轉(zhuǎn)。有的朋友喜歡自由自在的安排他的頁面內(nèi)容，總不喜歡表格的工作方式。其實你完全可以利用靈活的層來安排

8、你的頁面內(nèi)容，當你覺得滿意時再將它轉(zhuǎn)換為表格。選中你需要轉(zhuǎn)換的層，執(zhí)行命令 ModifyConvertLayers to Table。如圖：5 5、同時更新多個框架頁面。、同時更新多個框架頁面。有是我們需要在點擊一個鏈接時同時更新另外的兩個或多個框架頁面內(nèi)容，這可以通過以下步驟使用 Dreamweaver 的行為來實現(xiàn)。1） 選擇鏈接的文字或圖片。2） 打開行為面板（Behaviors），點擊加號添加 Go to URL 行為。本文關(guān)鍵字：本文關(guān)鍵字：3） 在 Go to URL 對話框中顯示了當前已有的所有框架窗口，我們分別選定一個窗口名稱，可以分別單獨設(shè)定每個窗口將要更新的文件內(nèi)容。Dre

9、amweaver 會在設(shè)定了目標文件的窗口后面加一個“*”號，表示此框架窗口已設(shè)定了 URL。4） 完成后點確定即可，我們點此鏈接，會同時更新多個窗口的內(nèi)容。三、三、 內(nèi)容篇內(nèi)容篇如何更快更方便得對內(nèi)容進行組織，是每個朋友都想了解的，下面這幾個技巧也許你知道，也許不知道，但重要的是通過不斷的運用，你會發(fā)現(xiàn)它的優(yōu)越性的。1 1、快速標簽編輯。、快速標簽編輯。對于熟悉手寫代碼的朋友來說，經(jīng)常需要切換到代碼窗口手工添加一些代碼。其實利用 Dreamweaver 的 Quick Tag Editor 可以快速插入各種 HTML 標簽，一個是點擊屬性面板的圖標插入，另一種快捷方式是Ctrl+T，這兩種方

10、法都會打開快速標簽編輯，可以直接從列表中選擇需要的源代碼標簽，如下圖：2 2、快速添加圖片邊框。、快速添加圖片邊框。對于插入網(wǎng)頁中的許多圖片都是沒有邊框的，有時我們需對圖片添加邊框，我們不需要打開圖像處理軟件即可實現(xiàn)。一種方法是選中圖片后直接在屬性面板定義 Border 為 1px，這會給圖片添加 1 像素的邊框；另一種方法是定義一個樣式，我們可以將 img 標簽直接定義為四邊都為1px 的樣式，則網(wǎng)頁中所有插入的圖片都會帶有相同的邊框。如圖：3 3、使用拖動方式增加鏈接。、使用拖動方式增加鏈接。Dreamweaver 支持從文檔內(nèi)直接托動鏈接到站點內(nèi)的其他文件，我們可以將站點窗口和文檔窗口并

11、排放置，如圖：然后選中文檔中需要鏈接的文字，打開屬性面版，將鏈接地址欄后的Point to File 指向站點窗口中的目標文件即可，如下圖：4 4、如何加入背景聲音。、如何加入背景聲音。在 Dreamweaver 中對于一些多媒體聲音文件的插入，很多朋友都感到有些困惑，其實很簡單，點擊 Dreamweaver 工作窗口最左下角的 標簽，打開 Behavior 面板，在彈出的 behavior 窗口點+號，選擇 PlaySound，選擇你需要的聲音文件即可加入。在文檔窗口中選中聲音文件標識，在屬性面板點擊 Parameters 就可以自行設(shè)定背景音樂的循環(huán)次數(shù)、是否自動播放等屬性了，如圖：四、四

12、、 美化篇美化篇美化各種網(wǎng)頁元素是一件既耗時又不一定出效果的工作，下面我介紹的幾個技巧也許能幫你一點忙。1 1、快速創(chuàng)建配色方案。、快速創(chuàng)建配色方案。我們經(jīng)常需要設(shè)定鏈接各個狀態(tài)的文字顏色，有些朋友感覺自己的色彩感不太好，總?cè)ふ乙恍┡渖謨?。其?Dreamweaver 本身已經(jīng)帶了一些配色方案，打開 CommandsSet Color Scheme 命令，我們可以看到有許多成套的配色方案，每個都定義了背景色、文字色、鏈接各個狀態(tài)的顏色，你只需選擇一種即可，見下圖：2 2、CSSCSS 鏈接樣式技巧。鏈接樣式技巧。文字鏈12341234 接一般有四個狀態(tài)，link、hover、active、

13、visited，我們通常都會對文字鏈接的各個狀態(tài)定義不同的色彩和樣式，但經(jīng)常有朋友發(fā)現(xiàn)自己定義的樣式在瀏覽時并未像設(shè)想的那樣。主要原因是在樣式表中對鏈接的定義順序有一定的要求，正確的順序是：A:linkA:visitedA:hover。對一般的朋友來說，其實很多時候只是想 Hover 狀態(tài)有變化，有個小技巧就是不按上面的方法定義鏈接樣式，而只需定義 a 和 a:hover 狀態(tài)的樣式即可，這樣只有 hover 狀態(tài)的樣式與其他狀態(tài)的不同。修改方法如下圖；3 3、創(chuàng)建不同色彩的連接文字與下劃線。、創(chuàng)建不同色彩的連接文字與下劃線。普通的鏈接文字與鏈接下劃線都是相同的色彩，其實我們也可以利用樣式表中

14、的 Border 屬性來替代普通鏈接的劃線，由于 Border 有更多的控制參數(shù)和樣式，因此只要將 Border 的色彩和文字的色彩定義的不同即可實現(xiàn)我們的目的。例如我們可以將文字定義為黑色，而在 Border 選項中定義下劃線為紅色，如下圖；五、五、 提高效率技巧提高效率技巧Dreamweaver 還包含了許多可以極大提高工作效率的命令，包括庫項目的建立、模板的運用、歷史面板的功能及查找替換功能。這里我介紹幾個小的技巧來演示這些命令的強大。1 1、清理、清理 WordWord 文件技巧。文件技巧。我們經(jīng)常需要將一些 Word 文件轉(zhuǎn)換為 HTML 文件，但這種轉(zhuǎn)換的結(jié)果是生成的 HTML 文

15、件非常的大，里面包含了許多重復(fù)代碼，綜合利用 Dreamweaver 的幾個功能可以方便的清理掉無用代碼。首先打開Word 生成的本文關(guān)鍵字：但此時文件中的每個圖片屬性中還包含了類似 v:shapes=_x0000_i1025的屬性，我們還需將這些屬性清除。打開查找替換面板，按下圖的設(shè)置設(shè)定替換規(guī)則，執(zhí)行后即可清除所有圖片的這些屬性。如圖；2 2、快速替換文件標題。、快速替換文件標題。前面我介紹了可以在站點窗口替換文件標題，但是只能一次替換一個文件的標題，我們可以嘗試著利用上一步介紹的查找替換命令一次替換多個文件的標題。通常我們新建的文件標題都是 UntitledDocument，可以打開 E

16、ditFind And Replace 命令，進行如下設(shè)置，將當前站點所有文件標題為 Untitled Document 的都替換為我們自己的標題。3 3、設(shè)置默認文檔格式。、設(shè)置默認文檔格式。上面的方法雖然快捷，但是我們每次新建一個文件時，默認的文件標題仍舊是 Untitled Document。因為新建文檔時，Dreamweaver 會調(diào)用一個默認的頁面作為缺省格式，這個文件是Dreamweaver4ConfigurationTemplatesDefault.html，這樣我們就可以將我們站點中統(tǒng)一的一些格式設(shè)置好，如背景色、字體大小、文件標題等，然后將它保存覆蓋上面的 Default.h

17、tml 文件。在以后我們新建文件時，Dreamweaver 會自動套用我們設(shè)定好的格式，這可以提高很大的工作效率。六、六、 后期維護篇后期維護篇好了，經(jīng)過上面這么多的介紹，我們已經(jīng)掌握了一些網(wǎng)頁制作的技巧，但是您作完的頁面是否不再包含錯誤？您的鏈接是否都正確的鏈接？您的頁面在各種瀏覽器中是否都表現(xiàn)良好？您的站點中是否還有許多不再需要的文件？很多類似的問題都還存在著，這些都是屬于站點后期檢測和維護。這里我們再介紹幾個后期檢測方面的技巧。1 1、鏈接檢測。、鏈接檢測。執(zhí)行菜單 FileCheck Links 命令，Dreamweaver 會自動檢測當前站點中的所有鏈接，并檢測出無效的鏈接，如下圖：

18、雙擊檢測出的一個結(jié)果，會自動打開相應(yīng)的頁面并直接定位到錯誤的鏈接處，很方便我們修改鏈接錯誤。2 2、快速檢測無用文件。、快速檢測無用文件。執(zhí)行菜單命令 SiteCheck Links Sitewide 可以打開鏈接文件檢測功能，我們也可以利用這個功能檢查站點中無用的文件，并刪除。只要選擇最上方下拉框中為 Orphaned Files，所有站點中無用的文件會列在下方，將它們?nèi)窟x中，按 Delete 鍵即可刪除。3 3、快速生成站點報告、快速生成站點報告(Reports)(Reports)。運行12341234 菜單命令 SiteReports 可以快速的根據(jù)我們的需要生成符合某種條件的站點報告或文件報告，例如可刪除的空標簽、未命名的文件標題、無 Alt 屬性的圖片等等。如下圖：