在Dreamweaver中創建網頁的鼠標樣式

經常在網上沖浪的朋友是否曾注意到有些網站的鼠標不是規則的斜向上箭頭的形狀，而是十字形，或者是向左的箭頭，或者是個問號等等。當你想在網頁的不同位置讓鼠標顯示不同形狀，以體現不同的功能區;當你想讓你的網站體現與眾不同的風格時，考慮一下在鼠標樣式上下功夫吧。其實鼠標樣式的用途還是極為廣泛的，那麼怎樣才能實現鼠標的不同樣式呢? 啟動Dreamweaver，打開你要應用鼠標樣式的網頁，在主窗口中選擇Text下拉菜單，再選擇CSS Style子菜單中的New Style命令新建樣式表。(注:如果你的網頁中已經存在樣式表，可以選擇CSS Styles Edit Style Sheet編輯樣式表。) 此時彈出New Style對話框。其中Type項有三個單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定義樣式，樣式名以圓點開頭;Use CSS Selector是使用CSS選擇器，裡邊包含四個超鏈接樣式: 

• a:active
• a:hover
• a:link
• a:visited

Redefine HTML Tag是定義HTML系統標簽的樣式，如abodybr等等。假設我們只對該頁面的超鏈接設置鼠標樣式，這裡選擇Redefine HTML Tag選項中的a標簽。下面的Define項選擇This Document Only。單擊OK按鈕。 彈出Style definition for 對話框，進入超鏈接樣式設置。左邊的Category是樣式類別，這裡對其它項不作解釋，我們選擇Extentions項。可以看到右邊Visual Effect中的Cursor項，這就是設置鼠標樣式的關鍵項。單擊右邊的下拉菜單，選擇你所需要的鼠標樣式，單擊OK按鈕就可以了。 下面講一下各樣式的大致含義。

• hand:是大家所熟悉的手型。
• crosshair:是十字型，就是小烏龜首頁所用的樣式。
• text:是平時鼠標移動到文本上的樣式。
• wait:是等待的效果。
• default:是默認的那種效果。
• help:是帶問號的鼠標樣式。
• e-resize:是向右的箭頭。
• ne-resize:是向右上方的箭頭。
• n-resize:是向上的箭頭。
• nw-resize:是向左上方的箭頭。
• w-resize:是向左的箭關。
• sw-resize:是向左下的箭頭。
• s-resize:是向下的箭頭。
• se-resize:是向右下方的箭頭。
• auto:是系統自動的效果。

當然根據需要你也可以將樣式應用於其它標簽，或者單純的只應用於某一段文本。如果讀者對CSS代碼不陌生的話，或許直接手寫代碼更方便。特別是，如果你想在不同的位置運用不同的鼠標樣式，或者不同的標簽使用不同的鼠標樣式。直接將樣式寫在某個具體的標簽裡邊就可以了。

方法是:< tag style=cursor:mouse_style>。其中tag是標簽名，mouse_style就是鼠標樣式，如hand/crosshair/text/wait等等。

下面舉個具體的實例以加深大家對鼠標樣式設置的理解。

<span style=cursor:hand>　hand:是大家所熟悉的手型。</span>
<span style=cursor:crosshair>crosshair:是十字型，就是小烏龜首頁所用的樣式。</span>
<span style=cursor:text>text:是平時鼠標移動到文本上的樣式。</span>
<span style=cursor:wait>wait:是等待的效果。</span>
<span style=cursor:default>default:是默認的那種效果。</span>
<span style=cursor:help>help:是帶問號的鼠標樣式。</span>
<span style=cursor:e-resize>e-resize:是向右的箭頭。</span>
<span style=cursor:ne-resize>ne-resize:是向右上方的箭頭。</span>
<span style=cursor:n-resize>n-resize:是向上的箭頭。</span>
<span style=cursor:nw-resize>nw-resize:是向左上方的箭頭。</span>
<span style=cursor:w-resize>w-resize:是向左的箭關。</span>
<span style=cursor:sw-resize>sw-resize:是向左下的箭頭。</span>
<span style=cursor:s-resize>s-resize:是向下的箭頭。</span>
<span style=cursor:se-resize>se-resize:是向右下方的箭頭。</span>
<span style=cursor:auto>auto:是系統自動的效果。</span>

將上面這段代碼拷到你的網頁中，按F12預覽。將你的鼠標移到相應的文本上方，看看鼠標有什麼變化?是不是以相應的樣式顯現了?