您現在的位置： > 技術沙龍 > WEB開發(fā) > DreamWeaver > DreamWeaver超級技巧《二》
- 相關軟件
>DreamWeaver超級技巧《二》 創(chuàng)建者：webmaster 更新時間：2005-07-02 00:5321. 給文字施加行為（Behavior），制作動態(tài)文字特效相關文章
在Dreamweaver中普通的文字是以字符為單位的，不能作為對象，即一些非常有用的JavaScript事件不能賦予文字。因為文字不像圖片和其他控件有具體的“標記”，所以文字與很多特效失之交臂。為了給文字添加特效，只有把文字做成超鏈接來處理。這樣文字就成為了對象，可以施加行為了。但是這樣又帶來了一些不需要的超鏈接屬性，比如下劃線，以及hover、visited等顏色變化。 要想單純?yōu)槲淖痔砑犹匦?，可以先把所想設置的文字做成超鏈接，然后再在它的上面添加行為，最后我們再把超鏈接轉變?yōu)槠胀ㄎ淖?。具體的步驟如下：
選中你想編輯的文字，在鏈接目標框里隨便填入幾個字符。選中這個鏈接，單擊窗口（Windows）→行為（Behaviors），彈出行為面板。按下“+”添加你想要的行為，如play sound等。打開Dreamweaver的超文本編輯器，找到這個鏈接，把改為，把改為。最后把“href=...”刪掉。保存此頁。按F12預覽一下。效果還不錯吧！
22. 精確定位網頁中各個元素的位置
精確定位網頁中各個元素的位置有兩種方法：使用表格或層。使用表格是目前比較通用的做法，具體方法是：先在網頁中建立一個表格，注意表格的邊框寬度應為０。然后再把各個元素按照你的要求放在各個表格單元之中。仔細調整表格單元的大小以及表格邊框的位置，這時在表格單元中的元素也會隨之移動位置。這樣你就可以比較精確地定位網頁中各個元素的位置了。使用表格的優(yōu)點是通用，幾乎各個版本的瀏覽器可以致支持表格。它的缺點是使用起來比較麻煩，需要仔細進行調整，而且定位不十分精確。層在網頁中可以隨意放置，因此我們可以使用層來進行精確定位。使用方法是，在網頁中插入一個層，然后把你想要定位的元素放在層里，接著我們就可以把層放到所想要任何位置了。此外，你還可以借助標尺和網格進行精確的定位。因為層只在最新的瀏覽器中被支持，所以為了兼容舊的瀏覽器，我們可以把層轉變?yōu)楸砀瘛７椒ㄊ沁x擇“修改(Modify)→版面布局模式(Layout Mode) →把層轉化成表格(convert layers to table)”即可。注意這時的層不能有重疊，我們可以在插入層之前選擇“查看(view) →防止層交錯(prevent layer overlaps)”來避免層的重疊。一般來說轉換后的頁面可能會有一些變化，還需要我們手工進行調整。最后有一點要注意，在進行表格和層的相互轉換時，最好不要在一個頁面中同時使用層與表格，那樣可能會把你的頁面弄得一團糟。
23. 改變?yōu)g覽者的鼠標形狀
這是通過編輯樣式表來實現的。具體方法是：選擇“文字（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. 制作鼠標移上去后有變化的動態(tài)菜單
所謂動態(tài)菜單其實是兩幅圖，一幅是鼠標不放在上面所顯示的，另一副是鼠標移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現這個效果。首先插入一副圖片，用鼠標單擊它，在屬性面版的連接欄內輸入要連接的網頁。然后打開行為面板添，點擊“+”號，選擇swap image。接著出現一個窗口，要你選擇鼠標移上去后所顯示的圖片，在此選擇第二副圖片，點擊“確定”。好了，效果完成了，多簡單。
27. 用Dreamweaver制作出一個類似于下拉菜單的效果
制作一個類似于下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是：在頁面中插入一個單行多列的表格，作為你的菜單條。表格的列數由菜單選項的多少決定。插入一個層，在層中輸入第一個下拉菜單的內容，并把這個層移動到表格第一列的下面。同理，對其他菜單項也作如上的操作，插入相應的層。把所有層的顯示屬性(vis)改為隱藏（Hidden）。
選擇表格的第一個單元，單擊窗口（Windows）→行為（Behaviors），彈出行為面板。按下“+”添加行為Show-Hide layers，并將第一個層（Layer1）屬性改為顯示(Show)，其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為，將它的觸發(fā)事件(events)改為onMouseover。這樣，當鼠標移動到第一個表格單元之上時，第一個下拉菜單就會顯示出來。接著再添加一個行為Show-Hide layers，并將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為，將它的觸發(fā)事件(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打開你所編輯的網頁，在頁面的空白區(qū)單擊右鍵，選擇“Page Properties...”，然后在彈出的對話框中的Tracing Image項中輸入剛才創(chuàng)建的網頁排版格局圖所在位置。再在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兩個設置表格寬度的重要功能。當你打開一個帶有表格的網頁時，在狀態(tài)欄中點中〈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規(guī)范，也可以在狀態(tài)欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style規(guī)范，在網頁代碼中就生成一個〈span〉標簽，這樣標簽一多就會使文件十分臃腫而且影響瀏覽器的解析速度，所以我建議盡量使用狀態(tài)欄中的元素列表來調用Style。還有一個小技巧，如果你要使用一個Style定義某表格單元中的所有文字，只要在〈td〉標簽中調用Style就行了，而不需要在一個個定義〈p〉標簽。注意這個方法不適用于〈table〉標簽，因為在〈table〉標簽中用Style定義的文字格式會被Netscape忽略。
34. 使用定制窗口功能測試網頁在不同分辨率下的效果
誰都不希望看見自己辛辛苦苦做的網頁在不同的分辨率下面目全非，所以測試網頁在不同分辨率下的瀏覽效果是網頁制作中很重要的一步。我們可以在Dreamweaver的操作界面中的狀態(tài)欄中間，選擇需要的分辨率來調節(jié)窗口大小，從而實現在不同分辨率下測試網頁效果。
35. 上傳網站時無需使用第三方FTP軟件
Dreamweaver中融入了FTP功能，而且為網站上傳作了優(yōu)化。我們可以做一個簡單的比較，當你使用一般的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按鈕會自動變?yōu)?FONT face="Times New Roman">Disconnect，并且在一旁亮起一個小綠燈。接著要做的事就是在要上傳的HTML文件上單擊右鍵，選擇“Put”即可。當此HTML文件上傳成功后，狀態(tài)條中將顯示Put Depanding File，說明Dreamweaver正在上傳這個HTML文件所調用的其他本地文件。不僅如此，Dreamweaver還可以直接下載服務器上的文件進行修改，方法么，只要使試試Put旁的Get按鈕就明白了。
36. 實現用鼠標指向鏈接時出現下劃線的效果
有些網頁的鏈接，原先沒有下劃線，你把鼠標指向鏈接處，才會出現下劃線，鼠標移掉下劃線就又沒有了。這種效果其實可以用層疊樣式表（CSS）來實現，在Dreamweaver中編輯層疊樣式表不用編寫代碼，具體操作方法如下：
?。?FONT face="Times New Roman">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 面板；
?。?FONT face="Times New Roman">5）在Edit Style Sheet 面板上再按New按鈕；
?。?FONT face="Times New Roman">6）在彈出的New Style 面板上點取Use CSS Selector ，再在該面板上的selector選擇框中選擇“a:hover”（定義當鼠標在超級鏈接上時鏈接的屬性），按OK按鈕；
（7）在彈出的Style dehinition for a:hover 的對話框中，我們在decoration 屬性中選擇“underline”，這樣就把下劃線又加上了；然后我們再選擇顏色為：#FF3300。按OK按鈕返回到Edit Style Sheet 面板；
?。?FONT face="Times New Roman">8）在Edit Style Sheet 面板上再按Don按鈕，至此所有設置結束。
本頁查看次數: