23> 怎樣讓鼠標(biāo)在鏈接文字上方“懸?!睍r(shí),產(chǎn)生變色,變形等效果?
訪問(wèn)網(wǎng)站時(shí),我們遇到的最平常不過(guò)的一種效果就是“鼠標(biāo)懸停響應(yīng)”了,所謂的“鼠標(biāo)懸停響應(yīng)”表現(xiàn)在鏈接文字上,就包括改變顏色,修飾效果(下劃線,中劃線)等多種選擇。
由于這種效果很好的起到了對(duì)目標(biāo)內(nèi)容的強(qiáng)調(diào)作用,因此無(wú)論是個(gè)人網(wǎng)站還是一些大的商業(yè)網(wǎng)站(如新浪,搜狐,網(wǎng)易等)都有應(yīng)用。
在上個(gè)問(wèn)題中,你已經(jīng)知道了去除掉鏈接下劃線的方法,這里不再贅述。下面的問(wèn)題將是如何添加鼠標(biāo)響應(yīng)事件的過(guò)程。
同樣進(jìn)入“Edit style sheet”窗口,單擊“New”確立新樣式,不同的是現(xiàn)在的Type類型中選擇最后的一項(xiàng)-“Use CSS selector”,“Selector”選單中選擇“a:hover” OK,進(jìn)入編輯樣式窗口,設(shè)定“Type”項(xiàng)中的文字顏色為“紅色”,當(dāng)然你還可以添加鼠標(biāo)懸停時(shí)出現(xiàn)下劃線的效果。
24>如何讓網(wǎng)頁(yè)的背景圖片不跟隨內(nèi)容滾動(dòng)?
背景圖片是很多網(wǎng)頁(yè)設(shè)計(jì)者經(jīng)常添加的東西,當(dāng)網(wǎng)頁(yè)內(nèi)容超出一屏?xí)r,拉動(dòng)滾動(dòng)條背景圖片會(huì)與內(nèi)容相對(duì)靜止的一起滾動(dòng),那么能否鎖定背景不跟隨滾動(dòng)呢?當(dāng)然可以進(jìn)入“Edit style sheet”窗口,單擊“New”確立新樣式,在TYpe中選擇“Redefine HTML Tag”,同時(shí)Tag選單選中“Body”,在左邊列表中選擇“Background”?!≡O(shè)定“Attachment”(附件)為“fixed”。其中scroll代表默認(rèn)使用的滾動(dòng)顯示。
25> 背景音樂(lè)你一定知道吧,怎么添加呢?
在微軟的網(wǎng)頁(yè)工具-Frontpage中,有關(guān)于背景音樂(lè)的設(shè)置功能,那么DW顯然沒(méi)有作到這點(diǎn),因此要使用的話,只能在源代碼中手動(dòng)添加了。
在使用前,提醒大家一點(diǎn),使用背景音樂(lè)一定要注意網(wǎng)頁(yè)文件的大小,不能顧此失彼。
代碼如下:
< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”>
其中src指定音樂(lè)文件的位置,autostart為音樂(lè)文件上傳后的動(dòng)作,true表示自動(dòng)開始播放,false不播放(默認(rèn)值)。
27> 如何自動(dòng)加入網(wǎng)頁(yè)更改后的日期?
只需要在源文件<body></body>之間添加如下代碼即可。
< Script Language=“javascript”><!--
document.write(“Last Updated:”+document.lastModified);
-->< /Script>
在瀏覽器中的顯示樣式為:“Last Updated:2001/8/19”
28> 怎樣控制彈出POPUP信息?
有時(shí),當(dāng)我們點(diǎn)擊鏈接時(shí),會(huì)出現(xiàn)一些著重性說(shuō)明的提示信息,也就是彈出信息。比如當(dāng)某個(gè)鏈接還沒(méi)有完成目標(biāo)內(nèi)容頁(yè)的制作時(shí),就可以應(yīng)用POPUP信息解釋一下。
在網(wǎng)頁(yè)中合適位置輸入鏈接文字,選中,在屬性面板中制作鏈接。在仍保持選中狀態(tài)的前提下,單擊快速啟動(dòng)板中的“Behavior”按鈕,
點(diǎn)擊左上的“+”號(hào),從列表中選中“Popun message”,在隨后的窗口中輸入需要提示的信息,
設(shè)定該動(dòng)作的鼠標(biāo)事件(Events)為點(diǎn)擊(onclick)。在瀏覽器中預(yù)覽效果如下。
29> 隱藏瀏覽器中狀態(tài)欄的URL地址信息的方法?
瀏覽網(wǎng)頁(yè),當(dāng)鼠標(biāo)停留在鏈接上方時(shí),在下面的狀態(tài)欄中會(huì)自動(dòng)顯示該鏈接目標(biāo)地址,考慮到安全方面的問(wèn)題,有時(shí)我們需要把它重置為“零”,即設(shè)為空白。
現(xiàn)在只需要在鏈接代碼中作些手腳就可以實(shí)現(xiàn)了,
<a href=http://theartemis.cn onMouseOver="window.status='none';return true">網(wǎng)頁(yè)教學(xué)網(wǎng)</a>
30>如何改變狀態(tài)欄里的提示文字?
默認(rèn)情況下,當(dāng)網(wǎng)頁(yè)被載入時(shí),在狀態(tài)欄里將顯示該網(wǎng)頁(yè)的地址等信息。想不想讓它變的更有魅力呢?
在DW“Behavior”行為板中,單擊“+”號(hào)選擇“Set Text Set”下的“Text Of Status Bar”選項(xiàng),在“Set Text of Status Bar”窗口中輸入類似“歡迎你光臨本網(wǎng)站--網(wǎng)管留言”等Message信息。
31> 如何建立電子郵件的表單處理方式?
表單應(yīng)該是網(wǎng)頁(yè)交互功能中必不可少的元素,表單的功能緣于信息的交互,因此表單的處理往往涉及到網(wǎng)絡(luò)高級(jí)編程語(yǔ)言的使用,你或許說(shuō),哇!我不會(huì)編程呀!沒(méi)關(guān)系,其實(shí)對(duì)于一些簡(jiǎn)單的表單內(nèi)容處理靠電子郵件也可以實(shí)現(xiàn)。
先看下面的代碼:
<form name="content" method="post" action="需要使用的處理程序" ></form>
上面是一個(gè)典型的表單的HTML源代碼,其中METHOD決定采用方式,包括POST和GET兩種。ACTION也就是咱們上面說(shuō)的處理程序,一般可通過(guò)ASP/PHP/CGI實(shí)現(xiàn)。
那么用電子郵件怎么實(shí)現(xiàn)呢?action=mailto:XXX@163.com,這樣當(dāng)點(diǎn)擊提交按鈕后,就會(huì)彈出一個(gè)提示窗口,單擊“確定”表單內(nèi)容會(huì)發(fā)送到指定的郵箱中。
32> 怎樣制作規(guī)范的電子郵件鏈接?
所謂的“電子郵件鏈接”即是當(dāng)我們點(diǎn)擊它時(shí),瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)使用的郵件客戶端
輸入“有問(wèn)題MAIL ME”字樣,鼠標(biāo)拖拉選中,切換到屬性面板,在LINK輸入框中鍵入如下命令:
Mailto:?Subject=網(wǎng)友來(lái)信&bc=其他電子郵件地址&bcc=其他電子郵件地址。其中Mailto為郵件鏈接的協(xié)議,Subject 為郵件的標(biāo)題,bc是同時(shí)抄送的郵件地址,bcc代表的也就是暗送了。
33> 如何制作“空鏈接”?
空鏈接也就是,沒(méi)有鏈接對(duì)象的鏈接,在空鏈接中,目標(biāo)URL是用“#”來(lái)表示的。也就是說(shuō)制作鏈接時(shí),只要在屬性板的LINK輸入框中錄入#標(biāo)記,它就是個(gè)空鏈接了。
空鏈接的出現(xiàn)涉及到多方面的因素,比如一些沒(méi)有定期完成的頁(yè)面,又為了保持頁(yè)面顯示上的一致(鏈接樣式與普通文字樣式的不同),就可以使用它了。
34> 點(diǎn)擊空鏈接時(shí),頁(yè)面往往重置到頁(yè)首端,如何處理?
在瀏覽器里,當(dāng)我們點(diǎn)擊空鏈接時(shí),它會(huì)自動(dòng)將當(dāng)前頁(yè)面重置到首端,從而影響用戶正常的閱讀內(nèi)容,我們當(dāng)然希望它能保持不動(dòng)了。
這時(shí),你能夠用代碼“javascript:void(null)”代替原來(lái)的“#”標(biāo)記,回頭看看,這個(gè)問(wèn)題已經(jīng)解決了。
35> 如何定制可自由在頁(yè)面內(nèi)跳轉(zhuǎn)的鏈接?
如果你經(jīng)常在網(wǎng)上訂閱一些免費(fèi)的電子雜志,一定對(duì)這種“標(biāo)簽鏈接”不陌生了,通過(guò)一個(gè)類似目錄的列表,可方便的跳轉(zhuǎn)到頁(yè)面內(nèi)的任何部分,無(wú)疑它的使用是專門為“超長(zhǎng)內(nèi)容”網(wǎng)頁(yè)設(shè)計(jì)的。
先確定鏈接指向的位置,即屏幕跳轉(zhuǎn)后停留的位置。進(jìn)入“Object”面板的“Invisibles”部分,選中目標(biāo)文本,單擊“Insert Named Anchor”按鈕,在“Anchor Name”中鍵入標(biāo)簽名稱,OK,這時(shí)在文本下面會(huì)自動(dòng)出現(xiàn)紅色虛線以區(qū)別開普通的文本內(nèi)容,注意它們?cè)跒g覽器中不會(huì)出現(xiàn)。
然后就可以制作鏈接了,在屬性板的LINK輸入框錄入“#nchor Name(剛才的名字)”。當(dāng)然如果你想指向另外一頁(yè)中的某個(gè)位置,也是可以的,把這個(gè)小尾巴放過(guò)去就行了。
36>同時(shí)在一個(gè)圖片上,作很多個(gè)鏈接,怎么辦?
這個(gè)問(wèn)題也就是我們平常說(shuō)的“圖片熱點(diǎn)”(Image HOT)了,當(dāng)然在DW里還有另外一個(gè)名字叫“圖象熱區(qū)域”。
選中圖片,這時(shí)在屬性面板左下的位置,有一個(gè)“Map”工具欄,其右邊是三個(gè)用來(lái)圈定不同區(qū)域的按鈕,以其中的矩形工具為例,選中后,鼠標(biāo)停留在圖片上會(huì)以一種“+”的形狀顯示出來(lái),代表可以左右拖拉,完成后依次你可以完成多個(gè)熱點(diǎn)區(qū)域的鏈接制作。注意各區(qū)域不可重疊。
37> 怎樣制作可以響應(yīng)鼠標(biāo)事件的翻轉(zhuǎn)圖片?
在許多網(wǎng)頁(yè)中,我們經(jīng)常會(huì)看到一些欄目標(biāo)題,當(dāng)鼠標(biāo)滑過(guò)時(shí),能變成另外的樣子。其實(shí)它們中很多是通過(guò)兩張不同的圖片來(lái)實(shí)現(xiàn)的,也就是所謂的“翻轉(zhuǎn)圖片”效果。
當(dāng)然首先你要提前準(zhǔn)備兩張大小完全一樣的圖片,以確保翻轉(zhuǎn)時(shí)不會(huì)有什么視覺(jué)上的不適,單擊“Object”面板上的“Rollover Image” 彈出“翻轉(zhuǎn)圖片設(shè)置”窗口,分別單擊“Browse”按ト范ā癘riginal image”和“Rollover image”的地址,注意一定要選中下面的“Preload Rollover image”復(fù)選框,否則在鼠標(biāo)滑過(guò)的瞬間,會(huì)產(chǎn)生一定的下載延遲而影響效果。
38> 如何制作“漫天飛舞”的圖片?
在許多大型商業(yè)網(wǎng)站的首頁(yè)中,你經(jīng)常會(huì)看到不少來(lái)回飄來(lái)飄去的廣告圖片,點(diǎn)擊后可以鏈接到指定的地址,在DW中這點(diǎn)是通過(guò)Timelines來(lái)實(shí)現(xiàn)的。
首先在網(wǎng)頁(yè)中插入目標(biāo)圖片,同時(shí)選中它,單擊快速啟動(dòng)板中的“Timelins”按鈕進(jìn)入“時(shí)間線”窗口,在時(shí)間軸1frame的位置鼠標(biāo)右擊,選擇“Add Object”,這時(shí)時(shí)間軸上會(huì)出現(xiàn)一蘭色色條(默認(rèn)1-15frame),將鏡頭停在15frame處,同時(shí)移動(dòng)頁(yè)面內(nèi)圖片到運(yùn)動(dòng)的終點(diǎn)位置。
現(xiàn)在一個(gè)簡(jiǎn)單的運(yùn)動(dòng)動(dòng)畫已經(jīng)完成了,你可以通過(guò)在中間添加keyframe的方法調(diào)整路徑的曲折度。單擊上方的右箭頭按鈕預(yù)覽效果。
39> 怎樣制作在頁(yè)面中“靜態(tài)懸浮”的圖片?
所謂的“靜態(tài)懸浮”也就是圖片總是試圖停留在網(wǎng)頁(yè)中的某個(gè)位置,因此在視覺(jué)上有種跟著頁(yè)面“走”的感覺(jué),象懸浮著一樣。
該效果的實(shí)現(xiàn)是通過(guò)javascript來(lái)完成的,一般要求有一定的編程能力。好在DW提供了制作該效果的固定插件,因此就顯得簡(jiǎn)單多了。
首先你必須先下載stav插件,將里面的兩個(gè)文件(其中包括圖片文件Cross Browser Static Division.gif和網(wǎng)頁(yè)文件Cross Browser Static Division.htm)都拷貝到DW安裝目錄Configuration\Objects\Common下。
重新啟動(dòng)DW,在Object(對(duì)象)面板中,你會(huì)看到最底部已經(jīng)多了SI項(xiàng),選中它在彈出的窗口中設(shè)定浮動(dòng)層到上邊和左邊的距離,然后在圖層中插入指定的內(nèi)容(這里為圖片)即可。
40> 如何使文字和圖片內(nèi)容共處?
我們都知道,在DW中,圖片對(duì)象往往是獨(dú)占一行的,那么文字內(nèi)容只能在與其平行的一行的位置上,怎么樣才可以讓文字圍繞著圖片顯示呢?
選中圖片,在屬性面板的右上方你能看到一個(gè)“Align”的屬性選單,選擇“Left”,這時(shí)你會(huì)發(fā)現(xiàn)文字已經(jīng)均勻的排列在圖片的右邊了。
41> 實(shí)現(xiàn)多個(gè)窗口的連接?
面板設(shè)計(jì)一直是DW的一大特色,到了DW4版本,所用到的面板已經(jīng)相當(dāng)多了,那么我們?nèi)绾尾拍芨咝У睦盟兀?“窗口連接”就是一種方便大家自定義的技術(shù)功能,簡(jiǎn)單的說(shuō),就是可以根據(jù)需要將兩個(gè)或更多個(gè)面板放到一個(gè)窗口中來(lái)。 鼠標(biāo)點(diǎn)擊拖動(dòng)一個(gè)面板的Tab欄到兩一個(gè)面板上,當(dāng)你看到一個(gè)黑色邊框時(shí),松開鼠標(biāo),這時(shí)兩個(gè)面板已經(jīng)合二為一了。
42> 如何制作一條寬度為1的細(xì)線?
在DW中,盡管水平線是以“Line”形式出現(xiàn)的,但在制作細(xì)線時(shí),它表現(xiàn)的并不盡如人意,主要是過(guò)粗,沒(méi)有需要的細(xì)膩感!
那么我們可以采取變通的方法以表格的應(yīng)用來(lái)實(shí)現(xiàn)。
在網(wǎng)頁(yè)中插入一個(gè)1行1列的表格,將表格的“cellpadding”“cellspacing”都設(shè)置為“0”,同時(shí)將單元格的“bgcolor”設(shè)定為紅色,當(dāng)然你也可以使用其他的顏色來(lái)代替,“Height”設(shè)定高度為1。
還有最關(guān)鍵的一步,查看源代碼,將< td>< /td>中的“ ”去掉即可。
43>如何制作一個(gè)邊框?yàn)?的方格?
很明顯,我們現(xiàn)在還是要通過(guò)表格的設(shè)置來(lái)完成。
或許你會(huì)說(shuō),這還不簡(jiǎn)單嘛!建立一個(gè)1行1列的表格,然后將它的“Border”值設(shè)為1不就可以了。實(shí)際上,用這種方法制作的表格根本不是所說(shuō)的邊框?yàn)?的方格,而是要“粗”的多!
同樣先插入一個(gè)1行1列的表格,將表格的“border”、“cellpadding”設(shè)置為“0”,“cellspacing”設(shè)置為“1”。設(shè)定表格的“bgcolor”為紅色(即為邊框的顏色),同時(shí)設(shè)定單元格的“bgcolor”為白色(即同背景色),OK了。
44> 怎樣設(shè)置根據(jù)不同的瀏覽器,返回不同的頁(yè)面?
瀏覽器不同,它所支持的技術(shù)和效果也不同。因而我們所設(shè)計(jì)的網(wǎng)頁(yè)并不是在所有的瀏覽器中都能正常顯示或最佳顯示。這時(shí)一個(gè)判斷瀏覽器的跳轉(zhuǎn)就很必要了。
當(dāng)用戶用不同類型或版本的瀏覽器打開時(shí),可以返回不同的頁(yè)面,以保證用戶的正常瀏覽。 單擊快速啟動(dòng)板中的“Behavior”按鈕,點(diǎn)“+”號(hào),在下拉列表中選擇“Check Browse”。
45> 網(wǎng)頁(yè)中可以隨便拖動(dòng)的對(duì)象是怎么建立的?
訪問(wèn)網(wǎng)站時(shí),經(jīng)常能見到不少可以用鼠標(biāo)拖動(dòng)的元素,其中以圖片居多,比如,一張廣告圖片擋住了你想瀏覽的內(nèi)容,你完全可以用鼠標(biāo)選中把它扔到一邊去!
制作這種效果是通過(guò)圖層的“Drag Layer”行為實(shí)現(xiàn)的,單擊Behavior面板中“+”號(hào),選擇“Drag Layer”,當(dāng)然之前你必要保證目標(biāo)圖層處于選中狀態(tài),進(jìn)行簡(jiǎn)單設(shè)置后就OK了。
如對(duì)本文有疑問(wèn),請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇