Dreamweaver 技巧 (2)
Dreamweaver 技巧 (2)
ahon | 17 May, 2006 16:11
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的源代碼檢視窗中將看到在與之間如下所示的代碼：
37. 實現定義的超級連結文字彩色
文字超級連結的彩色（內含未被訪問的連結彩色、滑鼠的連結上的彩色、已被訪問過的連結彩色等等）可以用層疊型態表（CSS）定義，下面就介紹如何能隨心所欲地設定文字連結的彩色。
（1）超級連結的預設彩色是：未被訪問的超級連結是藍色、被訪問過的超級連結是紫色；
（2）要想使CSS定義的彩色起作用，在超級連結的文字的彩色屬性中什麼都不要填；
（3）若你已定義了文字的彩色，發現CSS中定義的超級連結彩色不起作用，你可以取消文字的彩色定義，或取消超級連結再重新定義一次，CSS定義的彩色就起作用了；
（4）超級連結上各種狀態下文字彩色的關係：一旦定義了被訪問過的連結的彩色（A: visited），則當連結被訪問過後，該連結的彩色不再改變，即定義滑鼠在超級連結上的彩色（a: hover）將不起作用了。若不定義被訪問過的連結的彩色（A: visited），則當滑鼠在超級連結上顯示a: hover 中定義的彩色，當滑鼠移開時顯示a 中定義的彩色。
從上述可以看出，文字連結的彩色實際上只能在兩種彩色之間變換，並沒有像有些文章中講的那樣可以在多種彩色之間變換，但由於用那兩種彩色可以任意，所以應該講彩色的選取範圍還是比較大的。
38.在Dreamweaver中把圖形放在最中間
點擊選取圖形，在圖形的屬性面板的右上角Align（對齊屬性）邊上有個下拉框，在下拉框中選取，則文字在圖片四周繞排。若是單獨圖片在中間，則在圖像面板上點取齊中屬性即可。
**********************************************************
**********************************************************
39.如何使用Behaviors 功能，而又不連結到任何地方去
選取要作為超級連結的元素（一幅圖片或一段文字），在屬性面板上的位址欄（Link）中不填寫任何連結位址，只加上一個「#」號，（引號不內含在內）。這樣即可以使用Behaviors 功能，而又不連結到任何地方去了。
**********************************************************
**********************************************************
40.實現在一張（較大）圖片上做出幾個不同的連結
在Dreamweaver中，這就是使用所謂的設定「圖像熱區域」。先選中圖像，然後在圖像屬性面板上有一個「Map」工具列，在其下方有三個淡藍色的工具圖示，即「矩形」、「圓形」或「多邊形」，你可以根據需要選取一個（用滑鼠點一下就行），再把滑鼠移圖像上，按下滑鼠左鍵，拖曳滑鼠就畫出了一塊淡藍色的區域（不用擔心這塊淡藍色區域會破壞你的圖像，在瀏覽器中是不顯示的），這時你在屬性面板上把需連結的網頁位址添上就行了。你需要幾個連結就畫幾塊區域，隨你的便。
**********************************************************
**********************************************************
41. 製作目錄樹
在總目錄的前方有一個「+"，一按這個「+"，即可顯示其下子目錄，「+"即變成「-"，一按「-"，即可隱藏其下子目錄，就像在資源管理器中一樣，這需要做二個頁面，一個頁面寫上總目錄，一個頁面寫上子目錄。把總目錄的頁面上的「+」號設定成超級連結，在「Link」欄中添上子目錄頁面的位址。把子目錄的頁面上的「-」號設定成超級連結，在「Link」欄中添上總目錄頁面的位址。具體效果可看一看Dreamweaver的幫助文件，在這幫助文件裡也是按一下總目錄，跳出子目錄，按下子目錄上的總目錄則返回到總目錄，只是沒用「+」、「-」表示而已。你再看一下該文件的源代碼就一目瞭然了。
**********************************************************
**********************************************************
42. 在Dreamweaver中輕鬆設定行間距
用層疊型態表（CSS）來實現，在Dreamweaver中編輯層疊型態表不用編寫代碼，具體動作方法如下：
（1）在快速啟動欄中點擊層疊型態表按鈕（就是把滑鼠放上去顯示「show css styles」的那個按鈕），在跳出的CSS Styles面板上按兩下（none）；
（2）此時，可看到跳出的Edit Style Sheet 面板，在該面板上按New按鈕；
（3）再在跳出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標示），再在Tag中選取「body」標示後按OK按鈕；
（4）這時可看到跳出的Style dehinition for body 的對話框，在此對話框中可以設定「body」標示的許多屬性，你可以按你的意願設定，但我們這裡主要是要設定行距，所以我們在line屬性輸入框中填上行距的像素點數，現在流行的九號字，行距一般用12，按OK按鈕返回到Edit Style Sheet 面板，此時已把「body」的行距設定好了；
（5）由於「body」中定義的行距對表格不起作用，所以我們再在Edit Style Sheet 面板上再按New按鈕；
（6）再在跳出的New Style 面板上點取Redefine HTML Tag（重新定義HTML標示）再在Tag中選取「td」標示後按OK按鈕；
（7）在跳出的Style dehinition for td 的對話框中設定td的行距，按OK按鈕返回到Edit Style Sheet 面板；
（8）在Edit Style Sheet 面板上再按Ｄon按鈕，至此所有設定結束，你在Dreamweaver的源代碼檢視窗中將看到在與之間如下所示的代碼：style type="text/css"
!--
body { line-height: 12pt; font-size: 9pt}
td { font-size: 9pt; line-height: 12pt}
-→
style
有了這段代碼，你在該網頁上的所有文字的行距都確定好了，若不滿意，可修改設定。
43. 如何設計能使瀏覽者在瀏覽時對網頁字型大小的設定不起作用
用CSS層疊型態表對字型進行強制性控制（像素）。
**********************************************************
**********************************************************
44. 實現網頁每過五分鐘刷新一次的效果
在Dreamweaver的功能面板上選取「head」功能群組面板，在這面板上點擊「Refresh」功能圖示，在跳出的「Insert refresh」對話框中，在「Delay」中輸入要刷新的間隔時間，以秒計，例：隔五分鐘刷新一次，則輸入300即可。再在該對話框上選取「Refresh This Document」(刷新目前視窗)，按OK，大功告成。當你再次瀏覽該網頁時，它將自動地隔五分鐘刷新一次。
**********************************************************
**********************************************************
45. 解決用IE預覽標準的連結網頁，上傳到網站卻看不見的現象
把網頁的所有檔案名統一成小寫（或大寫），再上傳就行了。因為很多伺服器使用的是UNIX動作系統，它對大小寫是很敏感的，也就是說大寫的檔案名和小寫檔案名它認為是兩個檔案，你在上傳時必須注意大小寫。另外要注意：超級連結要使用相對路徑，不要用絕對路徑，也不要用中文檔案名。
**********************************************************
**********************************************************
46. 製作新開一個視窗開啟網頁的超級連結（即原來的網頁不被覆蓋）
在Dreamweaver中，在該連結的屬性面板上把「target（目的）」設定為「_blank」即可。
47. 隱藏不必要的標籤
當使用者在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上加入一個與之相應的元素標籤，以便於使用者選取不可見元素。但這並不全是件好事，比如你在一個有很多層的頁面中的第一行便插入一個表格，就會發現由於首行排序了太多的層元素標籤而使得表格自動退到了頁面的第二行，雖然在瀏覽時並不影響效果，但這確確實實會阻礙你的工作。所以當你覺得某個元素標籤礙手礙腳時，就索性將之屏蔽掉。方法是按Ctrl+U開啟Preferences面板，在Category中選中Invisibel Elements，在面板的右邊將會出現所有的元素標籤。只要將你討厭的元素標籤前的勾去掉，以後它就保證不會再出現了。
**********************************************************
**********************************************************
48. 解決表格緊貼左上方的問題
對這個問題有幾種解決方法。
（1）按下Ctrl+J，跳出Page Properties，將Left、 Top、 Margin Width、 Margin Height 全部設為0。
（2）把下面一段代碼加到你的body中：topmargin="0" leftmargin="0" ，這個方法只適用於IE。
（3）加入下面代碼：body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" ，這個方法適用於Netscape
49. 在Dreamweaver中將圖設為透明alpha設定
html
head
title css /title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type=text/css
.pic{filter:alpha(opacity=50)}
/style
/head
body bgcolor="#FFFF00" text="#000000"
img src="0008.jpg" width="303" height="385" class="pic"
/body
/html
**********************************************************
**********************************************************
50. 設定表格虛線
（1）作一個1X2的圖，半黑半白，再利用表格做成線。
（2）在css裡面設：在css面板裡新增一個style，選取「redefine HTML Tag」，再在下拉選單裡選「table」，在接下來的面板裡，category裡選取border。在border裡，將top、left、right、bottom都設成1像素，彩色設成你將來想要的邊框的彩色。到style下拉選單裡選取dashed就可以了，只是所有的表格都會用虛線做邊框了。
（3）若果你只想讓某一個表格邊框是虛線的話就在html裡設。在表格的html裡加上這個：
style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"。彩色是十六位代碼，你可以自己設。方法2、3只能在IE瀏覽器裡用，到了Netscape裡一點用處都沒有，除非你用做好的底圖填充。
**********************************************************
**********************************************************
51. 在Dreamweaver中使插入的FLASH透明
選中插入的swf檔案，開啟原代碼視窗，在object前輸入param name="wmode"
**********************************************************
**********************************************************
52. Dreamweaver4中設定表格亮邊框和暗邊框
做一個像素寬度有彩色的表格線
（1）將表格邊框 border設定為0，Cell space設定為0，Cell padding設定為0。
（2）開啟型態面板新增一個型態。選取Border設定邊框屬性 。
（3）選中整張表格套用這個型態即可。
**********************************************************
**********************************************************
53. 隱藏表格的分隔線
table border rules=cols cellspacing=0 align=left可以隱藏橫印的分隔線
table border rules=rows cellspacing=0 align=right可以隱藏直印的分隔線
table border rules=none cellspacing=0 align=center可以隱藏橫印和直印的分隔線
**********************************************************
**********************************************************
54. 如何選取被遮蓋或隱藏的層
當層被重疊使用時，大層會把小層遮蓋住；當選取了層的隱藏屬性，該層就看不見了。當你想對這些層動作時，怎麼辦？按F11鍵顯示層面板，所有層號均在上面，要哪層選取哪層就行了。
**********************************************************
**********************************************************
55. 在層（或表格中）上編輯文字時自動換行
層在用Dreamweaver設計網頁時被大量採用，但當你在層上輸入大段文字時發現不會自動換行，無論你怎樣設定層的寬度均無濟於事，當然你可以用按「SHIFT+ENTER」來換行。但是這樣當你調整層的寬度時又不得不一個一個地去刪除它，再又在另一位置加上它，其實有三種方法可以解決這個問題：
（1）在層疊式樣表*.CSS中「DIV」的式樣定義中加上字型的定義；
（2）在網頁源代碼的層定義中加上字型的定義；
（3）選取該段文字，在文字的屬性面板上定義字型。
上述三種方法任選一種都行，但以第一種較好，因為只要改動一次，此後只要是呼叫該層疊式樣表的網頁中的所有層都有能自動換行了，豈不是一勞永逸。表格同樣存在上述問題，解決方法相同，只是在層疊式樣表中在「TD」的式樣定義中加上字型的定義。
**********************************************************
**********************************************************
56. 在Dreamweaver中輸入上下標
若果只是要上下標的話，可以用SUB /SUB 和SUP /SUP。 手動加進去就可以了。
**********************************************************
**********************************************************
57. 去掉連結的下劃線
將以下代碼加入head /head之間
style type="text/css"
!--
a:link{text-decoration:none}
a:hover{text-decoration:none}
a:visited{text-decoration:none}
-→
/style
posted by Unknown @ 9:58 上午
1 comments
