用Dreamweaver MX創(chuàng)造網(wǎng)頁(yè)鼠標(biāo)樣式_Dreamweaver教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
經(jīng)常在網(wǎng)上沖浪的朋友是否曾注重到有些網(wǎng)站的鼠標(biāo)不是規(guī)則的斜向上箭頭的外形,而是"十"字形,或者是向左的箭頭,或者是個(gè)問(wèn)號(hào)等等。當(dāng)你想在網(wǎng)頁(yè)的不同位置讓鼠標(biāo)顯示不同外形,以體現(xiàn)不同的功能區(qū);當(dāng)你想讓你的網(wǎng)站體現(xiàn)與眾不同的風(fēng)格時(shí),考慮一下在鼠標(biāo)樣式上下功夫吧。其實(shí)鼠標(biāo)樣式的用途還是極為廣泛的,那么怎樣才能實(shí)現(xiàn)鼠標(biāo)的不同樣式呢?
啟動(dòng)Dreamweaver,打開(kāi)你要應(yīng)用鼠標(biāo)樣式的網(wǎng)頁(yè),在主窗口中選擇Text下拉菜單,再選擇CSS Style子菜單中的New Style命令新建樣式表。(注:假如你的網(wǎng)頁(yè)中已經(jīng)存在樣式表,可以選擇CSS Styles Edit Style Sheet編輯樣式表。)
此時(shí)彈出New Style對(duì)話框。其中Type項(xiàng)有三個(gè)單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定義樣式,樣式名以圓點(diǎn)開(kāi)頭;Use CSS Selector是使用CSS選擇器,里邊包含四個(gè)超鏈接樣式a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定義HTML系統(tǒng)標(biāo)簽的樣式,如a\body\br等等。假設(shè)我們只對(duì)該頁(yè)面的超鏈接設(shè)置鼠標(biāo)樣式,這里選擇Redefine HTML Tag選項(xiàng)中的a標(biāo)簽。下面的Define項(xiàng)選擇This Document Only。單擊OK按鈕。
彈出Style definition for 對(duì)話框,進(jìn)入超鏈接樣式設(shè)置。左邊的Category是樣式類別,這里對(duì)其它項(xiàng)不作解釋,我們選擇Extentions項(xiàng)。可以看到右邊Visual Effect中的Cursor項(xiàng),這就是設(shè)置鼠標(biāo)樣式的要害項(xiàng)。單擊右邊的下拉菜單,選擇你所需要的鼠標(biāo)樣式,單擊OK按鈕就可以了。
下面講一下各樣式的大致含義。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。
text:是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。
wait:是等待的效果。
default:是默認(rèn)的那種效果。
help:是帶問(wèn)號(hào)的鼠標(biāo)樣式。
e-resize:是向右的箭頭。
ne-resize:是向右上方的箭頭。
n-resize:是向上的箭頭。
nw-resize:是向左上方的箭頭。
w-resize:是向左的箭關(guān)。
sw-resize:是向左下的箭頭。
s-resize:是向下的箭頭。
se-resize:是向右下方的箭頭。
auto:是系統(tǒng)自動(dòng)的效果。
當(dāng)然根據(jù)需要你也可以將樣式應(yīng)用于其它標(biāo)簽,或者單純的只應(yīng)用于某一段文本。假如讀者對(duì)CSS代碼不生疏的話,或許直接手寫(xiě)代碼更方便。非凡是,假如你想在不同的位置運(yùn)用不同的鼠標(biāo)樣式,或者不同的標(biāo)簽使用不同的鼠標(biāo)樣式。直接將樣式寫(xiě)在某個(gè)具體的標(biāo)簽里邊就可以了。
方法是:<tag style="cursor:mouse_style">。其中tag是標(biāo)簽名,mouse_style就是鼠標(biāo)樣式,如hand/crosshair/text/wait等等。
下面舉個(gè)具體的實(shí)例以加深大家對(duì)鼠標(biāo)樣式設(shè)置的理解。
<span style="cursor:hand"> hand:是大家所熟悉的手型。</span><br>
<span style="cursor:crosshair">crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。</span><br>
<span style="cursor:text">text:是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。</span><br>
<span style="cursor:wait">wait:是等待的效果。</span><br>
<span style="cursor:default">default:是默認(rèn)的那種效果。</span> <br>
<span style="cursor:help">help:是帶問(wèn)號(hào)的鼠標(biāo)樣式。</span><br>
<span
啟動(dòng)Dreamweaver,打開(kāi)你要應(yīng)用鼠標(biāo)樣式的網(wǎng)頁(yè),在主窗口中選擇Text下拉菜單,再選擇CSS Style子菜單中的New Style命令新建樣式表。(注:假如你的網(wǎng)頁(yè)中已經(jīng)存在樣式表,可以選擇CSS Styles Edit Style Sheet編輯樣式表。)
此時(shí)彈出New Style對(duì)話框。其中Type項(xiàng)有三個(gè)單選按鈕:Make Custom Style、Redefine HTML Tag、Use CSS Selector。其中Make Custom Style 是自定義樣式,樣式名以圓點(diǎn)開(kāi)頭;Use CSS Selector是使用CSS選擇器,里邊包含四個(gè)超鏈接樣式a:active/a:hover/a:link/a:visited;Redefine HTML Tag是定義HTML系統(tǒng)標(biāo)簽的樣式,如a\body\br等等。假設(shè)我們只對(duì)該頁(yè)面的超鏈接設(shè)置鼠標(biāo)樣式,這里選擇Redefine HTML Tag選項(xiàng)中的a標(biāo)簽。下面的Define項(xiàng)選擇This Document Only。單擊OK按鈕。
彈出Style definition for 對(duì)話框,進(jìn)入超鏈接樣式設(shè)置。左邊的Category是樣式類別,這里對(duì)其它項(xiàng)不作解釋,我們選擇Extentions項(xiàng)。可以看到右邊Visual Effect中的Cursor項(xiàng),這就是設(shè)置鼠標(biāo)樣式的要害項(xiàng)。單擊右邊的下拉菜單,選擇你所需要的鼠標(biāo)樣式,單擊OK按鈕就可以了。
下面講一下各樣式的大致含義。
hand:是大家所熟悉的手型。
crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。
text:是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。
wait:是等待的效果。
default:是默認(rèn)的那種效果。
help:是帶問(wèn)號(hào)的鼠標(biāo)樣式。
e-resize:是向右的箭頭。
ne-resize:是向右上方的箭頭。
n-resize:是向上的箭頭。
nw-resize:是向左上方的箭頭。
w-resize:是向左的箭關(guān)。
sw-resize:是向左下的箭頭。
s-resize:是向下的箭頭。
se-resize:是向右下方的箭頭。
auto:是系統(tǒng)自動(dòng)的效果。
當(dāng)然根據(jù)需要你也可以將樣式應(yīng)用于其它標(biāo)簽,或者單純的只應(yīng)用于某一段文本。假如讀者對(duì)CSS代碼不生疏的話,或許直接手寫(xiě)代碼更方便。非凡是,假如你想在不同的位置運(yùn)用不同的鼠標(biāo)樣式,或者不同的標(biāo)簽使用不同的鼠標(biāo)樣式。直接將樣式寫(xiě)在某個(gè)具體的標(biāo)簽里邊就可以了。
方法是:<tag style="cursor:mouse_style">。其中tag是標(biāo)簽名,mouse_style就是鼠標(biāo)樣式,如hand/crosshair/text/wait等等。
下面舉個(gè)具體的實(shí)例以加深大家對(duì)鼠標(biāo)樣式設(shè)置的理解。
<span style="cursor:hand"> hand:是大家所熟悉的手型。</span><br>
<span style="cursor:crosshair">crosshair:是十字型,就是小烏龜首頁(yè)所用的樣式。</span><br>
<span style="cursor:text">text:是平時(shí)鼠標(biāo)移動(dòng)到文本上的樣式。</span><br>
<span style="cursor:wait">wait:是等待的效果。</span><br>
<span style="cursor:default">default:是默認(rèn)的那種效果。</span> <br>
<span style="cursor:help">help:是帶問(wèn)號(hào)的鼠標(biāo)樣式。</span><br>
<span
相關(guān)Dreamweaver教程:
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver MX進(jìn)階教程(二十二)制作反饋表單(email發(fā)送)
- DW網(wǎng)頁(yè)設(shè)計(jì)教程-多彩文字鏈接
- 數(shù)據(jù)庫(kù)的設(shè)計(jì)和連接-Dreamweaver構(gòu)建Blog
- 解決Dreamweaver中關(guān)于應(yīng)用CSS的小問(wèn)題
- DW MX實(shí)例:極酷的鼠標(biāo)外觀
- dreamweaver套用源格式,將混亂無(wú)序的代碼變得整潔
- 如何在Dreamweaver中使用庫(kù)項(xiàng)目
- Dreamweaver MX進(jìn)階教程(一)可視化操作iframe
- 用Dreamweaver插入網(wǎng)頁(yè)背景音樂(lè)的方法
- Dreamweaver網(wǎng)頁(yè)中實(shí)用的制作技巧
猜你也喜歡看這些
- java實(shí)例教程在線支付系統(tǒng)制作
- Dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)—CSS網(wǎng)頁(yè)設(shè)計(jì)篇
- 新編Dreamweaver MX2004 中文版輕松入門視頻教程 2CD
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- 《Dreamweaver CS3網(wǎng)頁(yè)設(shè)計(jì)技能進(jìn)化手冊(cè)》--樣章、樣例、教學(xué)視頻
- 美工之路系列視頻
- 動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)視頻全教程
- 中文版Dreamweaver 8從入門到精通
- 中文版Dreamweaver 8入門必練
- PHP+MYSQL網(wǎng)站設(shè)計(jì)入門實(shí)踐
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索用Dreamweaver MX創(chuàng)造網(wǎng)頁(yè)鼠標(biāo)樣式
- 教程說(shuō)明:
Dreamweaver教程-用Dreamweaver MX創(chuàng)造網(wǎng)頁(yè)鼠標(biāo)樣式
。