一、讓文字改變顏色 

在有些網(wǎng)頁(yè)我們可以看到一些文字,當(dāng)鼠標(biāo)移上去是一種顏色,移開(kāi)就是另外一種顏色,這是怎么樣實(shí)現(xiàn)的呢? 

原來(lái)我們只需要在Head內(nèi)預(yù)先定義兩個(gè)類(lèi),分別定義了兩種顏色,這在后面的HTML源文件中會(huì)用到這個(gè)顏色的定義: 

  <style> 
   .normal {color:red;} 
   .start {color:blue;} 
 ?。?style> 

  然后我們?cè)谝淖兊淖智昂蠹由舷旅娴拇a: 

 ?。糞PAN onmouseover = "this.className = 'normal'"  
   onmouseout = "this.className='start'" class=start> here </SPAN> 

這里的“class=start”是將這行字的默認(rèn)值設(shè)為 start {color:blue;},要是不加上這句 的話(huà),你這行字的顏色就會(huì)變成HTML預(yù)先設(shè)定的數(shù)值。 

當(dāng)我們把鼠標(biāo)移動(dòng)到“here”上的時(shí)候,顏色為“normal”定義的顏色,而當(dāng)鼠標(biāo)移開(kāi)的時(shí)候“here”的顏色為“start”定義的顏色(這種效果只有在IE瀏覽器中才可以看到)。 

二、給置網(wǎng)頁(yè)加上背景圖像 

網(wǎng)頁(yè)的背景色和背景圖選擇得好,會(huì)給頁(yè)面增色不少。如果選取單一的背景色,難免顯得單調(diào),如果選擇整個(gè)圖片做背景,由于圖片本身的文件大,造成網(wǎng)頁(yè)的加載時(shí)間長(zhǎng),一般用戶(hù)很難有耐性等待下去。那么帶背景的網(wǎng)頁(yè)是如何制作出來(lái)的? 

很簡(jiǎn)單,一般是采用一幅很小的圖片,然后鋪展開(kāi),形成很漂亮的背景。對(duì)背景圖的要求當(dāng)然是越漂亮越好,文件越小越好。當(dāng)你有了一幅可以自然拼接的圖像后,在Dreamweaver中,我們可以設(shè)置background圖片。 

打開(kāi)源文件我們可以看到〈BODY〉標(biāo)簽中多了一串代碼。代碼的表達(dá)式如下: 

<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" > 

這里的images/background.gif就是BACKGROUND的值,其圖像文件名為一個(gè)URL。 當(dāng)然我們可以在源代碼中直接加入上面的代碼。 

三、去掉超鏈接的下劃線(xiàn) 

在訪(fǎng)問(wèn)一些頁(yè)面的時(shí)候,我們會(huì)發(fā)現(xiàn),當(dāng)鼠標(biāo)移動(dòng)到具有超級(jí)連接的文字上的時(shí)候,有的會(huì)產(chǎn)生相應(yīng)的下劃線(xiàn)。然而有些網(wǎng)頁(yè)卻沒(méi)有。主頁(yè)超鏈接的下劃線(xiàn)是如何去掉的呢? 

我們?cè)冢糎EAD>...</HEAD>之間插入下面的代碼。 

 ?。約tyle>B {font-weight: 700; } 
   P {padding: 5px 0px; 
     margin: 0px; 
     font-family: 宋體,黑體,宋體; 
    } 
   A {text-decoration: none} 
   TD { font-family: 宋體,黑體,宋體; } 
 ?。?style> 
  <script language="ja;vascript"> 
   var contents = true; 
 ?。?script> 

更簡(jiǎn)單的方法是: 

  ?。約tyle> 
    <!-- 
     a {text-decoration:none} 
     a:hover {color: red;text-decoration:none} 
    --!> 
  ?。?style> 

四、段落縮進(jìn)的方法 

在利用Dreamweaver制作有關(guān)文檔資料內(nèi)容的網(wǎng)頁(yè)時(shí),如果是英文書(shū)寫(xiě)格式,段落一般不縮進(jìn)(不支持半角空格);如果需要縮進(jìn)往往需要人為的加入兩個(gè)中文全角空格,才能夠顯示出位置縮進(jìn)效果。 

除了上面所說(shuō)的外,還有下面幾種方法,可以值得一試,現(xiàn)介紹如下。 

1.預(yù)格式(PRE) 

用預(yù)格式編寫(xiě)的源文件,在顯示時(shí)照源文件中的排版字樣顯示,空行和空格都能很清楚地區(qū)別開(kāi)來(lái)。如源文件為:    

 ?。紁re> 
  --預(yù)格式顯示…… 
 ?。?pre> 

網(wǎng)頁(yè)就會(huì)按照你預(yù)先設(shè)置好的顯示方式顯示,即在“預(yù)格式顯示”的前面就會(huì)空兩個(gè)漢字的位置。 

2.插入點(diǎn)圖或圖形 

點(diǎn)圖是指圖片中只有一個(gè)或幾個(gè)像素點(diǎn),用肉眼看不出來(lái)。當(dāng)我們?cè)诙温溟_(kāi)頭插入這樣一個(gè)點(diǎn)圖,并用HSPACE和VSPACE屬性來(lái)調(diào)整點(diǎn)圖的左右和上下的空格,以達(dá)到段落縮進(jìn)。 

同樣可以插入圖形,只不過(guò)該圖形的顏色需要用網(wǎng)頁(yè)背景色,這種方式用IMG的WIDTH和HEIGHT屬性調(diào)整圖形大小,以達(dá)到縮進(jìn)。 
   
插入圖形的方法,需要我們掌握好HSPACE和VSPACE大小的尺度,使之剛好留出兩個(gè)漢字的位置,這樣才比較美觀。 

3.插入沒(méi)有邊框和內(nèi)容的表格 

這種方式與上述的插入圖形方式類(lèi)似,該表格沒(méi)有邊框和內(nèi)容,是空表格。用TABLE的WIDTH和HEIGHT屬性調(diào)整表格大小適合縮進(jìn)的需要。 

利用表格來(lái)定位一般來(lái)說(shuō)比較可靠,我常常就采用這種方式來(lái)對(duì)比較復(fù)雜的頁(yè)面進(jìn)行定位。不過(guò)這種方法有一個(gè)問(wèn)題,就是可能是頁(yè)面的源文件變大。因此也不見(jiàn)得是格式控制的首選。 

4.插入特殊的空格字符“ ” 

“ ”代表非顯示空格字符。插入若干個(gè)“ ”字符,中間用分號(hào)(;)或者空格隔開(kāi),也可以實(shí)現(xiàn)中文段落縮進(jìn)。不過(guò)在Netscape中只能寫(xiě)小寫(xiě)字母,而在IE中大小寫(xiě)都可以。 

這四種方法主要是針對(duì)利用HTML的語(yǔ)言編寫(xiě)網(wǎng)頁(yè)而言。在一些網(wǎng)頁(yè)制作工具,如網(wǎng)景瀏覽器中有專(zhuān)門(mén)加入空格的工具條,也可以完成段落縮進(jìn)。 

五、為超級(jí)鏈接設(shè)定目標(biāo)窗口 

目標(biāo)窗口是頁(yè)面鏈接所指內(nèi)容顯示的窗口,也就是當(dāng)你單擊了頁(yè)面某一個(gè)鏈接后,該鏈接所指的內(nèi)容在那個(gè)窗口顯示。大多數(shù)情況下,我們無(wú)需關(guān)心它,因?yàn)橐话愣际窃谕淮翱陲@示。但是有時(shí)我們需要彈出一個(gè)新的窗口,而不是替代原來(lái)的窗口,怎么辦呢?很簡(jiǎn)單,這里我們只要更改超級(jí)鏈接源代碼的target屬性就可以了。 

TARGET是鏈接標(biāo)簽的屬性,它的作用就是指定目標(biāo)窗口,TARGET有以下幾個(gè)值: 

  _self-將鏈接指向的內(nèi)容裝載到當(dāng)前頁(yè)的窗口或框架中; 
  _top-完全取代當(dāng)前頁(yè)面的所有框架; 
  _blank-為鏈接指向的內(nèi)容打開(kāi)一個(gè)新的窗口 
  _parent-把鏈接指向的內(nèi)容裝入當(dāng)前頁(yè)〈FRAMESET〉父窗口中 

如要使單擊超級(jí)鏈接產(chǎn)生一個(gè)新的窗口,可將相應(yīng)超級(jí)鏈接改為如下形式: 
 ?。糰 href="www.yourname.com" target="_blank">yourname</a> 

六、實(shí)現(xiàn)文字的自動(dòng)換行 

我們?cè)诰幹浦黜?yè)的時(shí)候,有時(shí)候會(huì)發(fā)現(xiàn)自己制作的主頁(yè)不能夠自動(dòng)換行,尤其是對(duì)一大段文字,必須拖動(dòng)窗口的滑塊跑很久才能看完后面的文字。如何消除這種情況呢?這里我們介紹用表格來(lái)定位的方法: 

我們認(rèn)為很有效的方法就是采用表格來(lái)對(duì)文字進(jìn)行定位。當(dāng)然這里的表格我們一定要給定它的絕對(duì)寬度(直接給定或間接給定寬度),那么輸入的長(zhǎng)文字便會(huì)自動(dòng)的換行了。 

這里所說(shuō)的直接給定表格的寬度,是指我們直接設(shè)定表格的width屬性值為某一個(gè)設(shè)定值。如我們可以如下設(shè)定: 
  <table width="420">...</table>  

相對(duì)值是指采用相對(duì)于上一級(jí)表格的寬度,通常用一個(gè)百分?jǐn)?shù)來(lái)表示。比如我們?cè)谝粋€(gè)相對(duì)外層的表格中設(shè)定了表格的寬度,那么在內(nèi)層的表格中只要給出一個(gè)相對(duì)的寬度就相當(dāng)于已經(jīng)給定了表格絕對(duì)寬度。我們可以看看下面的源代碼: 
 ?。紅able width="760"> 
    ... 
   ?。紅able width="60%"> 
      ... 
    </table> 
 ?。?table> 
這里就相當(dāng)于我們已經(jīng)給定了內(nèi)層表格的寬度為760*60%=456個(gè)像素點(diǎn)了。 


七、如何彈出公告窗口 

有時(shí)我們需要采用公告窗口來(lái)展示一些重要的信息,所謂公告窗口是指我們?yōu)g覽主頁(yè)時(shí),隨主頁(yè)面的加載而自動(dòng)彈出的小窗口,公告窗口中一般會(huì)放上新聞、布告的信息。下面我們看看怎樣用幾句簡(jiǎn)單的ja;vascript語(yǔ)句來(lái)實(shí)現(xiàn)它。 
  
方法一: 
在<head></head>之間插入如下一段ja;vascript代碼: 

<script language="ja;vascript"> 
<!-- 
var gt = unescape('%3e'); 
var popup = null; 
var over = "Launch Pop-up Navigator"; 
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=0,scrollbars=auto'); 
if (popup != null) { 
if (popup.opener == null) { 
popup.opener = self; 

popup.location.href = 'test.htm'; 

// --> 
</script> 

方法二: 
直接在<body>與</body>插入如下一段代碼: 

<script language="ja;vascript"> 
window.open("test.htm","測(cè)試公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0"); 
</script> 

它們的作用是相同的,其中windows.open()的作用是打開(kāi)一個(gè)窗口,括號(hào)內(nèi)的各項(xiàng)參數(shù)的用法我們可以在下面看到,我們可以根據(jù)自己的需要設(shè)置各個(gè)參數(shù)的值。 

窗口參數(shù) 參數(shù)介紹 
toolbar=yes,no 是否顯示工具條 
location=yes,no 是否顯示網(wǎng)址欄 
directories=yes,no 是否顯示導(dǎo)航條 
status=yes,no 是否顯示狀態(tài)條 
menubar=yes,no 是否顯示菜單 
scrollbars=yes,no 是否顯示滾動(dòng)條 
resizable=yes,no 是否可以改變公告窗口大小 
copyhistory=yes,no 是否顯示歷史按鈕 
width=300 公告窗口的寬 
height=200 公告窗口的高 
left=100 公告窗口的左上頂點(diǎn)距屏幕左邊100像素 
top=100 公告窗口的左上頂點(diǎn)距屏幕頂端100像素 

標(biāo)簽:網(wǎng)頁(yè)制作

相關(guān)文章

隨機(jī)推薦