Dreamweaver MX創造網頁滑鼠樣式

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系統標籤的樣式，如a\body\br等等。假設我們只對該頁面的超連結設定滑鼠樣式，這裡選擇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>< br>
< span style="cursor:crosshair">crosshair：是十字型，就是小烏龜首頁所用的樣式。< /span>< br>
< span style="cursor:text">text：是平時滑鼠移動到文本上的樣式。< /span>< br>
< span style="cursor:wait">wait：是等待的效果。< /span>< br>
< span style="cursor:default">default：是預設的那種效果。< /span> < br>
< span style="cursor:help">help：是帶問號的滑鼠樣式。< /span>< br>
< span style="cursor:e-resize">e-resize：是向右的箭頭。< /span>< br>
< span style="cursor:ne-resize">ne-resize：是向右上方的箭頭。< /span>< br>
< span style="cursor:n-resize">n-resize：是向上的箭頭。< /span>< br>
< span style="cursor:nw-resize">nw-resize：是向左上方的箭頭。< /span>< br>
< span style="cursor:w-resize">w-resize：是向左的箭關。< /span>< br>
< span style="cursor:sw-resize">sw-resize：是向左下的箭頭。< /span>< br>
< span style="cursor:s-resize">s-resize：是向下的箭頭。< /span>< br>
< span style="cursor:se-resize">se-resize：是向右下方的箭頭。< /span>< br>
< span style="cursor:auto">auto：是系統自動的效果。< /span>     將上面這段代碼拷到你的網頁中，按F12預覽。將你的滑鼠移到相應的文本上方，看看滑鼠有什麼變化？是不是以相應的樣式顯現了？感覺如何？親手去體驗一下吧。希望小烏龜能帶給你不一樣的感覺！！