使用傳統(tǒng)方法開發(fā)控件的缺點(diǎn)使用傳統(tǒng)的技術(shù)開發(fā)一個(gè)控件常常是從用一個(gè)包含了一個(gè)矩形或其它形狀文本輸入框的小圖標(biāo)開始的。這個(gè)控件也許使用陰影、光效、傾斜或者其它的效果予以修飾，但是它本質(zhì)也只是一個(gè)包含了文本的框架。首先，你需要為控件的每個(gè)狀態(tài)創(chuàng)建一個(gè)獨(dú)立的圖標(biāo)。例如，你需要為控件在默認(rèn)情況下創(chuàng)建一個(gè)圖標(biāo)，還要為其在鼠標(biāo)指針指向這個(gè)控件的時(shí)候創(chuàng)建一個(gè)圖標(biāo)。僅僅是這樣一個(gè)簡(jiǎn)單的效果，你需要至少兩個(gè)圖標(biāo)（默認(rèn)和鼠標(biāo)指向兩個(gè)狀態(tài)），如果你要加入點(diǎn)擊和訪問過的狀態(tài)，每個(gè)控件需要三或四個(gè)圖標(biāo)。在你的網(wǎng)頁中加入一個(gè)基本的圖標(biāo)用于超鏈接再簡(jiǎn)單不過，只需要牢記輸入合適的位置以滿足訪問需要為了使你的控件具有交互性，你需要增加javascript腳本代碼來使控件圖標(biāo)能夠在鼠標(biāo)事件發(fā)生的時(shí)候有所反應(yīng)，比如說在鼠標(biāo)指向圖標(biāo)的時(shí)候。像Dreamweaver這樣的開發(fā)軟件可以使用簡(jiǎn)單的鼠標(biāo)操作自動(dòng)添加代碼，但是這些代碼包含了網(wǎng)頁的大小信息。為了使得動(dòng)態(tài)效果，你需要預(yù)先下載圖片這樣當(dāng)用戶指向這個(gè)控件的時(shí)候?yàn)g覽器能立即改變。預(yù)先下載圖片將會(huì)使網(wǎng)頁的加載時(shí)間變長(zhǎng)，而且它的不方便之處還在于即使是用戶不需要使用所有的控件，它也要加載所有的圖片的。是什么使得CSS技術(shù)具有優(yōu)越性？使用CSS，你可以從一個(gè)簡(jiǎn)單的文本超鏈接中創(chuàng)建一個(gè)完全的交互控件。適當(dāng)?shù)母袷交梢园岩粋�(gè)段落變化或者分解成一個(gè)圍繞著文本超鏈接的矩形框。在超鏈接文本中添加動(dòng)態(tài)效果，只需要多幾條簡(jiǎn)單的CSS代碼可以使得控件具有交互性。與基于圖標(biāo)的空間相比，這個(gè)控件有以下幾個(gè)優(yōu)點(diǎn)：1、不需要任何的圖標(biāo)。CSS通過格式化文本來創(chuàng)建控件效果，所以不需要?jiǎng)?chuàng)建任何獨(dú)立的圖標(biāo)文件。2、你不需要鍵入任何的文本屬性，因?yàn)镃SS控件的文本已經(jīng)具有了完全的可訪問性。3、更加有效的代碼。CSS規(guī)則和分類的代碼比其所取代的javascript腳本代碼更小，因而瀏覽器執(zhí)行的更快。4、沒有圖標(biāo)需要預(yù)先加載。含有CSS控件的網(wǎng)頁加載速度要明顯快一些。5、CSS規(guī)則可以在所有的網(wǎng)站上容易地使用和維護(hù)�？梢酝ㄟ^修改你的CSS風(fēng)格更改你網(wǎng)頁上所有的控件形態(tài)。通過為超鏈接的控件格式化創(chuàng)建規(guī)則，你可以通過在其他文件中使用超連接格式化使控件看上去和用起來與其它的不同。解析一個(gè)CSS控件的例子下面是一個(gè)引用的CSS風(fēng)格表單的例子。格式化規(guī)則創(chuàng)建的.button類有80象素寬，背景是黑色的，白色的邊框，白色的文本框。.button{....border:1pxsolidWhite;....padding:5px;....width:80px;....color:White;....font-family:Arial,Helvetica,sans-serif;....font-size:1.1em;....font-weight:normal;....text-align:center;....height:1.25em;....background-color:Black;}接下來，風(fēng)格表單包括具體說明格式是如何隨著超鏈接的狀態(tài)變化而變化的規(guī)則。這些規(guī)則都是相互關(guān)聯(lián)的并且只在類.button的范圍內(nèi)影響。默認(rèn)的鏈接狀態(tài)不改變；鼠標(biāo)覆蓋的狀態(tài)是在藍(lán)色背景下的白色的文本邊框；訪問過的狀態(tài)是在深灰色背景下的淺灰色文本框。.buttona:link{text-decoration:none;color:White;}.buttona:hover{text-decoration:none;color:White;font-weight:bold;background:Blue;}.buttona:visited{text-decoration:none;color:#BBBBBB;background:#333333;}下面的代碼顯示了在網(wǎng)頁上使用CSS控件的簡(jiǎn)單操作。所有需要做的只是將合適的類的屬性添加到模塊標(biāo)簽中去（例如分段或者是段落），而這個(gè)標(biāo)簽包含一個(gè)簡(jiǎn)單的超鏈接。在這種情況下，結(jié)果將是三個(gè)矩形控件：Home，Gallery和AboutUs。HomeGalleryAboutUs在文本超鏈接中使用CSS格式創(chuàng)建控件是既快而且的，并且結(jié)果對(duì)于大多用戶都足夠滿足需要。這個(gè)技術(shù)的優(yōu)勢(shì)對(duì)于基于圖標(biāo)的控件開發(fā)可以創(chuàng)造出一個(gè)新的標(biāo)準(zhǔn)。
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機(jī)網(wǎng)站
- 手機(jī)掃描二維碼
- 進(jìn)入手機(jī)站
網(wǎng)站地圖
付款方式