5.14日音訊,dw4.0常用技巧和實用知識。dw就是網(wǎng)頁前臺制作的工具，可以實現(xiàn)一般網(wǎng)頁的所有前臺看見的內(nèi)容,這也是網(wǎng)站制作的必經(jīng)之路，網(wǎng)頁前臺的制作時決定后臺功能實現(xiàn)的必須，只有存在前臺看見的頁面的呈現(xiàn)，才能更好的為后臺功能實現(xiàn)提供臺階，所以前端工程師只有掌握了更熟悉的知識和技巧，才能在工作中如魚得水，使用自如，下面就由邯鄲網(wǎng)站建設首創(chuàng)網(wǎng)絡來給大家介紹一些常用的知識，希望能幫助大家更好的去學習和應用。

　　1.用Dreamweaver4.0輕松設計會自動彈性調(diào)整的網(wǎng)頁

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

　　2.用Dreamweaver4.0制作有閃動效果的Flash按鈕

　　選擇菜單Insert→Interactive?Images→Flash?Button就可看到有哪些內(nèi)嵌按鈕。在彈出的對話框里，你可以在"Style"列表里選擇自己想要的按鈕樣式，在預覽(Sample)窗口里可以看到這種樣式的效果如何。選擇好之后，在"Button?Text"窗口輸入按鈕上面的文字，在"Font"窗口選擇字體，在"Size"窗口輸入文字的大小，在"Link"窗口輸入鏈接的目標，在"Target"窗口選擇鏈接打開的方式，在"BgColor"選擇按鈕背景顏色，在"Save?As"窗口輸入保存的文件名。完成這些后，按下"OK"按鈕，你就完成了一個Flash按鈕啦。這個按鈕還會自動插入你的網(wǎng)頁中，然后在Dreamweaver編輯窗口選中你剛才制作的按鈕，屬性窗口就會顯示出這個按鈕的屬性，單擊上面的"Play"按鈕，你就可直接在編輯窗口預覽這個按鈕的閃動效果。需要注意的是Dreamweaver?4.0的這個功能不支持中文字體。

　　3.在Dreamweaver4.0中自定義鍵盤快捷鍵

　　選擇菜單"Edit→Keyboard?Shortcuts"，在對話框中會列出目前已經(jīng)啟用的以及可以更改的快捷鍵一覽表，你可以在這里把快捷鍵改成自己習慣用的。如果要更改快捷鍵，首先要選取你要更改的命令，接著選取目前的快捷鍵，這個快捷鍵就會出現(xiàn)在"Shortcuts"列表中，然后在"PressKey"窗口輸入你想要使用的快捷鍵，然后點擊"Change"按鈕更改即可完畢。你還可以利用"+"、"-"按鈕增加或者刪除當前的快捷鍵。

　　4.讓Dreamweaver?4.0和Fireworks整合

　　如果你的電腦里同時安裝了Dreamweaver/Fireworks，那么你就可以使用Dreamweaver?4.0提供的整合Fireworks的功能。利用這個功能你可以把你的GIF圖片修改得更加動人，輕松地實現(xiàn)動畫效果。在Dreamweaver編輯窗口選擇好你要修改的GIF圖片，然后在圖片屬性窗口單擊"編輯(Edit)"按鈕，這時系統(tǒng)會自動啟動Fireworks軟件編輯這個圖片。仔細看，你會發(fā)現(xiàn)Fireworks的圖片編輯窗口已出現(xiàn)Editing?From?Dreamweaver這樣的文字和圖樣，也就是說這個圖片是為Dreamweaver頁面進行圖片編輯的。現(xiàn)在我們在Fireworks里選擇要編輯的圖片，選擇菜單"Modify→Animate→Animate?Selection"。在彈出的窗口里設置動畫的屬性：選定動畫的幀數(shù)、動畫移動的方向、透明度等等。然后把修改好的文件導出即可。這樣，在Dreamweaver編輯窗口會自動更新剛才修改好的文件，使你的頁面圖片動起來。

　　5.巧用網(wǎng)站報告器

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

　　6.快速恢復多次操作

　　在制作頁面時，我們可能需要不停地修改頁面，有時還要恢復過去的操作，我們可以使用"Edit"菜單里的"Undo"命令，可是這個命令每次只能恢復一次，如果我們需要恢復多次操作，那就要不停地"Undo"，實在太煩。在Dreamweaver?4.0里提供了一個History窗口，可以讓我們輕松地恢復多次操作。在"Windows"菜單里選擇"History"即可開啟這個歷史窗口。在這個窗口把你每一次的操作都保留下來了，利用窗口左邊那個滑動指針，就可以不停地恢復，還可以撤銷每一次操作，包括已經(jīng)存盤的。而且還可以把這個歷史紀錄保存下來共享。

　　7.隱藏浮動面板

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

　　8.快速預覽網(wǎng)頁

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

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

　　雖然Dreamweaver的Behaviors是一個JavaScript小程序的巨集，許多實現(xiàn)特殊網(wǎng)頁效果的JavaScript程序都不用動手編程，但有時需要編寫一點小程序時，顯示程序行號顯得尤為必要，特別是在程序發(fā)生錯誤時，往往都有是提示在"XX行有錯誤"，若一行一行地去數(shù)行號不僅太累而且還容易數(shù)錯，在FrontPage中老是為數(shù)錯行號而煩惱。在Dreamweaver中可方便了，只要在HTML源代碼檢視器窗口中，選中"LineNumbers"（行號）復選框，則會在源代碼檢視器窗口中對每條HTML語句自動顯示行號，一目了然。同樣有時一行代碼較長，只要在HTML源代碼檢視器窗口中，選中"Warp"（自動換行）復選框，則會激活窗口的自動換行特性，過長的代碼會自動從窗口的邊緣繞回。

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

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

　　11.制作背景音樂

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

　?。?）在頁面不顯眼的地方插入一空層，并在層內(nèi)放入一個ActivX對象，雙擊該對象，在打開的對話框中選擇一個MIDI音樂文件，然后在層對象屬性面板中設定其可視性為"Hidden"，保存變動后按F12預覽網(wǎng)頁，聽聽是否有音樂聲。

　?。?）另一種方法是利用Dreamweaver的"Behaviors"行為編輯器，單擊"＋"按鈕，選擇其中"PlaySound"選項，在彈出的對話框中選擇一個音樂文件即可。自己動手試一試吧！

　　12.讓背景圖不滾動

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

　　13.定義大小不變的文字

　　為什么別人網(wǎng)頁上的文字那么漂亮，不管你怎么按瀏覽器字體按鈕上的大小，他們的字體尺寸都不會發(fā)生變化。其實他們使用了網(wǎng)頁中的"CSS"樣式表技術(shù)，在Dreamweaver中要實現(xiàn)這一功能是非常簡單的。首先按"F7"或者選擇"窗口"菜單中的"樣式表"選項打開樣式表編輯器，在窗口中單擊鼠標右鍵選擇"新建"，在彈出的對話框中輸入需要定義的樣式表名稱，按"確定"，然后在列表中選擇第一項"類型"，并給具體的文字屬性定義參數(shù)（一般來說文字的大小在800×600的屏幕中選擇10.5較為適宜），按"確定"后，定義好的樣式表就出現(xiàn)了。選擇網(wǎng)頁編輯窗中的文本，單擊新的樣式表名，可以看到選中的文本發(fā)生的變化。預覽一下，試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。

　　14.插入Flash動畫

　　Macromedia公司的Flash動畫因其具有交互性、傳送速度快等特點，已逐漸成為網(wǎng)頁制作的一項新武器，如果你在網(wǎng)站建設中的網(wǎng)頁上能插入一段Flash動畫，那么一定會使你的作品增色不少。在Dreamweaver中插入Flash制作的SWF格式動畫十分容易，單擊對象工具欄上的Flash徽標或單擊的"媒體"下的"Flash"，就可以打開選擇SWF動畫文件的對話框了，選好文件后可在其屬性面板中設定播放的參數(shù)，即大功告成。

　　15.讓表格給網(wǎng)頁留白

　　在Dreamweaver的新網(wǎng)頁上輸入文字時，默認格式是頂天立地的，十分不美觀。要避免這一缺憾其實很簡單，只要大家用好表格工具就行了。具體做法是：在新頁面上插入一張居中對齊的表格，為了能夠使表格方便控制，最好設定奇數(shù)列，并且數(shù)值不要太大。這樣在單元格內(nèi)輸入的文字就被限制在一個可以隨意調(diào)整寬度的區(qū)域內(nèi)，就不愁文字不聽使喚了。

　　16.改變狀態(tài)欄提示文字

　　一般情況下，當瀏覽器裝入一個頁面時，在其狀態(tài)欄上顯示的是該頁面的地址名稱，十分呆板。你有沒有想過給瀏覽器的狀態(tài)欄增加一點個性呢？如果有的話，那么請按照以下的步驟，定制自己喜歡的文字吧！首先打開"Behaviors"行為編輯窗，單擊"＋"按鈕，選擇"SetTextSet"下的"TextOfStatusBar"選項，然后在方框中輸入自己的文字，例如"歡迎來到我的主頁"等，單擊"確定"即可。

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

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

　　18.在Dreamweaver中輸入多個空格

　　我們平時輸入的空格是半角字符，在Dreamweaver中只能輸入一個，要想輸入多個空格只要輸入全角空格就可以了。輸入全角空格的方法是：打開中文輸入法，按Shift+Space切換到全角狀態(tài)。這時你輸入的空格就是全角空格了。

　　19.解決Dreamweaver的BUG之一

　　在Dreamweaver3.0中行為面板（Behaviorinspector）中，"Eventsfor"下拉菜單項無法打開。這樣一來，很多特技效果形同虛設，根本沒法制作。其實這應該算Dreamweaver3.0和中文Windows98不兼容的一個地方吧，在英文Windows98中就沒有這個問題。而實際上這個菜單還是可以打開的，只不過是不能正確顯示罷了。在選中下拉菜單后，我們可以用上下鍵來選擇我們想要用的瀏覽器。

　　20.用Dreamweaver3.0的模版制作網(wǎng)頁，設置行為（Behavior）

　　在使用模板（Template）做出淼耐頁中不能新增行為。這是因為新增行為需要在HTML文件的Head部分之中插入JavaScript，而使用了Template后，HTML文件的Head部分會被"封鎖"住。如果要在使用模板生成的網(wǎng)頁中應用行為，你就需要事先在模板中定義好行為，然后把它定義為模板的可編輯區(qū)域。隨后，你就可以在網(wǎng)頁中更改這個行為了。但這也只限于更改行為的觸發(fā)事件（events）和動作（actions）的具體內(nèi)容，而不能更改動作的類型。

　　21.給文字施加行為（Behavior），制作動態(tài)文字特效

　　在Dreamweaver中普通的文字是以字符為單位的，不能作為對象，即一些非常有用的JavaScript事件不能賦予文字。因為文字不像圖片和其他控件有具體的"標記"，所以文字與很多特效失之交臂。為了給文字添加特效，只有把文字做成超鏈接來處理。這樣文字就成為了對象，可以施加行為了。但是這樣又帶來了一些不需要的超鏈接屬性，比如下劃線，以及hover、visited等顏色變化。要想單純?yōu)槲淖痔砑犹匦?，可以先把所想設置的文字做成超鏈接，然后再在它的上面添加行為，最后我們再把超鏈接轉(zhuǎn)變?yōu)槠胀ㄎ淖帧＞唧w的步驟如下：

　　選中你想編輯的文字，在鏈接目標框里隨便填入幾個字符。選中這個鏈接，單擊窗口（Windows）→行為（Behaviors），彈出行為面板。按下"+"添加你想要的行為，如playsound等。打開Dreamweaver的超文本編輯器，找到這個鏈接，把改為，把改為。最后把"href=..."刪掉。保存此頁。按F12預覽一下。效果還不錯吧！

　　22.精確定位網(wǎng)頁中各個元素的位置

　　精確定位網(wǎng)頁中各個元素的位置有兩種方法：使用表格或?qū)?。使用表格是目前比較通用的做法，具體方法是：先在網(wǎng)頁中建立一個表格，注意表格的邊框?qū)挾葢獮椋?。然后再把各個元素按照你的要求放在各個表格單元之中。仔細調(diào)整表格單元的大小以及表格邊框的位置，這時在表格單元中的元素也會隨之移動位置。這樣你就可以比較精確地定位網(wǎng)頁中各個元素的位置了。使用表格的優(yōu)點是通用，幾乎各個版本的瀏覽器可以致支持表格。

　　它的缺點是使用起來比較麻煩，需要仔細進行調(diào)整，而且定位不十分精確。層在網(wǎng)頁中可以隨意放置，因此我們可以使用層來進行精確定位。使用方法是，在網(wǎng)頁中插入一個層，然后把你想要定位的元素放在層里，接著我們就可以把層放到所想要任何位置了。此外，你還可以借助標尺和網(wǎng)格進行精確的定位。因為層只在最新的瀏覽器中被支持，所以為了兼容舊的瀏覽器，我們可以把層轉(zhuǎn)變?yōu)楸砀瘛７椒ㄊ沁x擇"修改(Modify)→版面布局模式(LayoutMode)→把層轉(zhuǎn)化成表格(convertlayerstotable)"即可。注意這時的層不能有重疊，我們可以在插入層之前選擇"查看(view)→防止層交錯(preventlayeroverlaps)"來避免層的重疊。一般來說轉(zhuǎn)換后的頁面可能會有一些變化，還需要我們手工進行調(diào)整。最后有一點要注意，在進行表格和層的相互轉(zhuǎn)換時，最好不要在一個頁面中同時使用層與表格，那樣可能會把你的頁面弄得一團糟。

　　23.改變?yōu)g覽者的鼠標形狀

　　這是通過編輯樣式表來實現(xiàn)的。具體方法是：選擇"文字（text）→定制樣式（CSSStyle）→編輯樣式表（EditStyleSheet）"，彈出編輯樣式表窗口，在其中選擇"新建（new）"。接著選擇"建立一個定制的樣式（Makecustomstyle）"，給這個樣式表起名，單擊確定。編輯該樣式表，選擇擴展項(extension)，在右邊的光標項（Cursor）中選擇要出現(xiàn)的指針效果即可。

　　24.去掉超鏈接文字之下的下劃

　　這一效果是通過編輯樣式表來實現(xiàn)的。具體方法是："點擊文字（text）→定制樣式（CSSStyle）→編輯樣式表（EditStyleSheet）"，出現(xiàn)編輯樣式表窗口，選擇"新建（new）"。接著選擇重定義HTML標記（RedefineHTMLTag），并在下面的標記(Tag)選單中選擇a。編輯該樣式表，選擇類型(type)，在右邊的裝飾（decoration）中選中無（none）即可。

　　25.制作一個跟著頁面走的圖像

　　這一效果是通過JavaScript實現(xiàn)的。一般來說完成這樣一個效果需要一定的編程能力，但現(xiàn)在我們可以通過Dreamweaver的插件輕易地實現(xiàn)。插件的安裝方法：解壓縮后拷貝到Dreamweaver下的文件夾Configuration\Objects內(nèi)的一個新建文件夾里面即可。重新啟動Dreamweaver之后，我們就可以在對象面板之中找到新安裝的插件了。點擊插件的圖標，在彈出的對話框中填入圖像的存放地址以及圖像的顯示位置就可以了。

　　26.制作鼠標移上去后有變化的動態(tài)菜單

　　所謂動態(tài)菜單其實是兩幅圖，一幅是鼠標不放在上面所顯示的，另一副是鼠標移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swapimage來實現(xiàn)這個效果。首先插入一副圖片，用鼠標單擊它，在屬性面版的連接欄內(nèi)輸入要連接的網(wǎng)頁。然后打開行為面板添，點擊"+"號，選擇swapimage。接著出現(xiàn)一個窗口，要你選擇鼠標移上去后所顯示的圖片，在此選擇第二副圖片，點擊"確定"。好了，效果完成了，多簡單。

　　27.用Dreamweaver制作出一個類似于下拉菜單的效果

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

　　選擇表格的第一個單元，單擊窗口（Windows）→行為（Behaviors），彈出行為面板。按下"+"添加行為Show-Hidelayers，并將第一個層（Layer1）屬性改為顯示(Show)，其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為，將它的觸發(fā)事件(events)改為onMouseover。這樣，當鼠標移動到第一個表格單元之上時，第一個下拉菜單就會顯示出來。接著再添加一個行為Show-Hidelayers，并將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為，將它的觸發(fā)事件(events)改為onMouseout。

　　這樣當鼠標從第一個表格單元之上移開時，第一個下拉菜單就會隱藏起來。對其他的菜單項重復上述操作。但要注意設置"菜單二"時，第二層顯示，其他層隱藏；設置"菜單三"時，第三層顯示，其他層隱藏；依此類推下去。好了，做好了，按F12看看吧。

　　當然，它的技術(shù)不僅是以上這些，這只是列一些常用的知識，只要我們掌握了基礎，還有不斷的實踐和加以練習，我們就能夠運用自如，開拓創(chuàng)新，也會使我們的工作中，事半功倍。