用Dreamweaver MX創造網頁鼠標樣式-Dreamweaver教程

2024-09-12 12:30:23

字體：大中小

來源：轉載

供稿：網友

經常在網上沖浪的朋友是否曾注重到有些網站的鼠標不是規則的斜向上箭頭的外形，而是"十"字形，或者是向左的箭頭，或者是個問號等等。當你想在網頁的不同位置讓鼠標顯示不同外形，以體現不同的功能區；當你想讓你的網站體現與眾不同的風格時，考慮一下在鼠標樣式上下功夫吧。其實鼠標樣式的用途還是極為廣泛的，那么怎樣才能實現鼠標的不同樣式呢？

啟動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等等。

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

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

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

感覺如何？親手去體驗一下吧。希望小烏龜能帶給你不一樣的感覺?。?/font>

上一篇：用Dreamweaver做搜索表單-Dreamweaver教程

下一篇：Dreamweaver 事件簡述-Dreamweaver教程