26. 制作鼠標(biāo)移上去后有變化的動態(tài)菜單
所謂動態(tài)菜單其實是兩幅圖,一幅是鼠標(biāo)不放在上面所顯示的,另一副是鼠標(biāo)移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現(xiàn)這個效果。首先插入一副圖片,用鼠標(biāo)單擊它,在屬性面版的連接欄內(nèi)輸入要連接的網(wǎng)頁。然后打開行為面板添,點擊“+”號,選擇swap image。接著出現(xiàn)一個窗口,要你選擇鼠標(biāo)移上去后所顯示的圖片,在此選擇第二副圖片,點擊“確定”。好了,效果完成了,多簡單。
27. 用Dreamweaver制作出一個類似于下拉菜單的效果
制作一個類似于下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁面中插入一個單行多列的表格,作為你的菜單條。表格的列數(shù)由菜單選項的多少決定。插入一個層,在層中輸入第一個下拉菜單的內(nèi)容,并把這個層移動到表格第一列的下面。同理,對其他菜單項也作如上的操作,插入相應(yīng)的層。把所有層的顯示屬性(vis)改為隱藏(Hidden)。
選擇表格的第一個單元,單擊窗口(Windows)→行為(Behaviors),彈出行為面板。按下“+”添加行為Show-Hide layers,并將第一個層(Layer1)屬性改為顯示(Show),其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為,將它的觸發(fā)事件(events)改為onMouseover。這樣,當(dāng)鼠標(biāo)移動到第一個表格單元之上時,第一個下拉菜單就會顯示出來。接著再添加一個行為Show-Hide layers,并將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為,將它的觸發(fā)事件(events)改為onMouseout。這樣當(dāng)鼠標(biāo)從第一個表格單元之上移開時,第一個下拉菜單就會隱藏起來。對其他的菜單項重復(fù)上述操作。但要注意設(shè)置“菜單二”時,第二層顯示,其他層隱藏;設(shè)置“菜單三”時,第三層顯示,其他層隱藏;依此類推下去。好了,做好了,按F12看看吧。
28. 輕松制作文件
用Dreamweaver其實很簡單,把要讓瀏覽者的文件名寫上,然后拖動鼠標(biāo)選取這段文字,在文本的屬性面板上“Link”的屬性輸入框中寫上文件名就行了。注意:若被的文件與該網(wǎng)頁不在同一目錄下,則文件名必須包含相對路徑,否則在時將提示找不到文件。
29. 利用Dreamweaver的書簽制作跳轉(zhuǎn)鏈接
利用Dreamweaver的書簽我們可以實現(xiàn)這個功能。具體方法是:將光標(biāo)移到你想跳轉(zhuǎn)到的地方,選擇菜單中的“插入(Insert)→書簽(Name Anchor)”,輸入書簽的名稱。接下來,在你想調(diào)用鏈接的鏈接目標(biāo)框中填入“#書簽名稱”,這樣一個頁面內(nèi)的跳轉(zhuǎn)鏈接就做好了。在這里,如果我們在書簽名稱前填入網(wǎng)頁的名稱,就會跳轉(zhuǎn)到其他頁面中的書簽處。 比如說我們在Link處填入“index.htm#top”,當(dāng)瀏覽者點擊這個鏈接時就會跳轉(zhuǎn)到index頁面中的top書簽處。
30. 去掉圖片和表格接觸地方的空隙
要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(border)設(shè)為0是不行的,還需要在表格的屬性面板上把單元格的兩個屬性設(shè)為0(即cellspacing="0"和cellpadding="0")。
31. 用TracingImage幫助定位網(wǎng)頁中各元素的位置
TracingImage是Dreamweaver一個非常有效的功能,它允許用戶在網(wǎng)頁中將原來的圖案設(shè)計作為輔助的背景。這么一來,用戶就可以非常方便地定位文字、圖像、表格、層等網(wǎng)頁元素在該頁面中的位置了。TracingImage的具體使用是這樣的:首先使用各種繪圖軟件作出一個想象中的網(wǎng)頁排版格局圖,然后將此圖保存為網(wǎng)絡(luò)圖像格式(包括gif、jpg、jpeg和png)。用Dreamweaver打開你所編輯的網(wǎng)頁,在頁面的空白區(qū)單擊右鍵,選擇“Page Properties...”,然后在彈出的對話框中的Tracing Image項中輸入剛才創(chuàng)建的網(wǎng)頁排版格局圖所在位置。再在Image Transparen中設(shè)定TracingImage的透明度,OK。這樣你就可以在當(dāng)前網(wǎng)頁中方便地定位各個網(wǎng)頁元素的位置了。使用了TracingImage的網(wǎng)頁在用Dreamweaver編輯時不會再顯示背景圖案,但當(dāng)使用瀏覽器瀏覽時正好相反,TracingImage不見了,所見的就是經(jīng)過編輯的網(wǎng)頁(當(dāng)然能夠顯示背景圖案)。
32. 關(guān)于“Convert Table widths to Pixels”和“Convert Table widths to Percent”
“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver兩個設(shè)置表格寬度的重要功能。當(dāng)你打開一個帶有表格的網(wǎng)頁時,在狀態(tài)欄中點中〈table〉標(biāo)簽,在隨后顯示出的表格屬性工具面板中就能看到這兩個按鈕了。顧名思義“Convert Table widths to Pixels”就是將表格中所有單元的寬度以像素表示,而“Convert Table widths to Percent”是將表格中所有單元的寬度以百分比表示。仔細(xì)想想他們的作用,如果將一個表格的寬度全以像素表示,但瀏覽窗口被放大時,表格就不會隨之放大單元格的寬度。而使用了“Convert Table widths to Percent”后能夠使你在640×480分辨率下建立的100%寬的表格在更高的分辨率下依舊保持100%的寬度。所以活用這兩個功能可以使網(wǎng)頁排版事半功倍。
33. 調(diào)用Style而不致使網(wǎng)頁原代碼混亂不堪
調(diào)用Style的方法很多,你可以單擊右鍵選擇Custon Style來調(diào)用Style規(guī)范,也可以在狀態(tài)欄中的元素列表上單擊右鍵來調(diào)用Style。雖然不同的方法達到的效果看似一樣,但實際上產(chǎn)生的HTML代碼則完全不同。比如用Custon Style來調(diào)用Style規(guī)范,在網(wǎng)頁代碼中就生成一個〈span〉標(biāo)簽,這樣標(biāo)簽一多就會使文件十分臃腫而且影響瀏覽器的解析速度,所以我建議盡量使用狀態(tài)欄中的元素列表來調(diào)用Style。還有一個小技巧,如果你要使用一個Style定義某表格單元中的所有文字,只要在〈td〉標(biāo)簽中調(diào)用Style就行了,而不需要在一個個定義〈p〉標(biāo)簽。注意這個方法不適用于〈table〉標(biāo)簽,因為在〈table〉標(biāo)簽中用Style定義的文字格式會被Netscape忽略。
34. 使用定制窗口功能測試網(wǎng)頁在不同分辨率下的效果
誰都不希望看見自己辛辛苦苦做的網(wǎng)頁在不同的分辨率下面目全非,所以測試網(wǎng)頁在不同分辨率下的瀏覽效果是網(wǎng)頁制作中很重要的一步。我們可以在Dreamweaver的操作界面中的狀態(tài)欄中間,選擇需要的分辨率來調(diào)節(jié)窗口大小,從而實現(xiàn)在不同分辨率下測試網(wǎng)頁效果。
35. 上傳網(wǎng)站時無需使用第三方FTP軟件
Dreamweaver中融入了FTP功能,而且為網(wǎng)站上傳作了優(yōu)化。我們可以做一個簡單的比較,當(dāng)你使用一般的FTP軟件上傳網(wǎng)站時,是不是都按本地機上的網(wǎng)站目錄在服務(wù)器中新建目錄,然后再一個個文件上傳。這種做法實在沒錯,但由于本地機中的網(wǎng)站目錄中并不是每個文件都被網(wǎng)頁調(diào)用(比如在建網(wǎng)頁時留下的備份文件),所以篩選文件的繁重工作量只有用戶自己知道。但使用Dreamweaver上傳網(wǎng)頁就可以方便得多,由于FTP功能在幕后為用戶進行了許多必要的工作,所以用戶只要將網(wǎng)站地圖內(nèi)相關(guān)的HTML文件上傳,Dreamweaver就會自動將與此HTML文件相關(guān)的所有其他本地文件一并上傳(如圖像、ZIP文件、FLASH文件甚至是各種REAL文件)。使用Dreamweaver內(nèi)帶的FTP功能的具體做法是:編輯已經(jīng)定義過的SITE,在“Site Definition for...”面板中選擇“Web Server Info”。如果網(wǎng)頁是通過FTP方式上傳的話,將“Server Access”設(shè)為FTP,在FTP Host中添入FTP服務(wù)器的地址,在Host Directory中添入遠(yuǎn)程登入目錄,在Login中添入用戶名,再填好Password。經(jīng)過了以上的設(shè)定,就可以在Site面板中按Connect按鈕,當(dāng)Dreamweaver成功連入服務(wù)器后,Connect按鈕會自動變?yōu)镈isconnect,并且在一旁亮起一個小綠燈。接著要做的事就是在要上傳的HTML文件上單擊右鍵,選擇“Put”即可。當(dāng)此HTML文件上傳成功后,狀態(tài)條中將顯示Put Depanding File,說明Dreamweaver正在上傳這個HTML文件所調(diào)用的其他本地文件。不僅如此,Dreamweaver還可以直接服務(wù)器上的文件進行修改,方法么,只要使試試Put旁的Get按鈕就明白了。
36. 實現(xiàn)用鼠標(biāo)指向鏈接時出現(xiàn)下劃線的效果
有些網(wǎng)頁的鏈接,原先沒有下劃線,你把鼠標(biāo)指向鏈接處,才會出現(xiàn)下劃線,鼠標(biāo)移掉下劃線就又沒有了。這種效果其實可以用層疊樣式表(CSS)來實現(xiàn),在Dreamweaver中編輯層疊樣式表不用編寫代碼,具體操作方法如下:
?。?)在快速啟動欄中點擊層疊樣式表按鈕(就是把鼠標(biāo)放上去顯示“show css styles”的那個按鈕),在彈出的CSS Styles面板上雙擊(none);
?。?)此時,可看到彈出的Edit Style Sheet 面板,在該面板上按New按鈕;
?。?)再在彈出的New Style 面板上點取Redefine HTML Tag(重新定義HTML標(biāo)記)再在Tag中選擇“a”(超級鏈接標(biāo)記)標(biāo)記后按OK按鈕;(4)這時可看到彈出的Style dehinition for a 的對話框,在此對話框中可以設(shè)置超級鏈接的許多屬性,你可以按你的意愿設(shè)置,但我們這里主要是要去掉那討厭的下劃線,所以我們在decoration 屬性中選擇“none”,這樣就把下劃線去掉了;然后我們再選擇顏色為:#339966。按OK按鈕返回到Edit Style Sheet 面板;
?。?)在Edit Style Sheet 面板上再按New按鈕;
?。?)在彈出的New Style 面板上點取Use CSS Selector ,再在該面板上的selector選擇框中選擇“a:hover”(定義當(dāng)鼠標(biāo)在超級鏈接上時鏈接的屬性),按OK按鈕;
?。?)在彈出的Style dehinition for a:hover 的對話框中,我們在decoration 屬性中選擇“underline”,這樣就把下劃線又加上了;然后我們再選擇顏色為:#FF3300。按OK按鈕返回到Edit Style Sheet 面板;
?。?)在Edit Style Sheet 面板上再按Don按鈕,至此所有設(shè)置結(jié)束。