網(wǎng)頁制作超級技巧

一、讓文字改變顏色?

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

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

　　＜style＞?
　　　.normal?{color:red;}?
　　　.start?{color:blue;}?
　　＜/style＞?

　　然后我們在要改變的字前后加上下面的代碼:?

　　＜SPAN?onmouseover?=?“this.className?=?‘normal'”　?
　　　onmouseout?=?“this.className=’start'”?class=start＞?here?＜/SPAN＞?

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

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

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

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

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

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

＜BODY?BACKGROUND=”images/background.gif”?BGCOLOR=”#FFFFFF”?＞?

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

三、去掉超鏈接的下劃線?

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

我們在＜HEAD＞…＜/HEAD＞之間插入下面的代碼。?

　　＜style＞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＞?

更簡單的方法是：?

　　　＜style＞?
　　　?＜!–?
　　　　　a?{text-decoration:none}?
　　　　　a:hover?{color:?red;text-decoration:none}?
　　　?–!＞?
　　　＜/style＞?

四、段落縮進的方法?

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

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

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

用預(yù)格式編寫的源文件，在顯示時照源文件中的排版字樣顯示，空行和空格都能很清楚地區(qū)別開來。如源文件為：?　　?

　　＜pre＞?
　　－－預(yù)格式顯示……?
　　＜/pre＞?

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

2.插入點圖或圖形?

點圖是指圖片中只有一個或幾個像素點，用肉眼看不出來。當(dāng)我們在段落開頭插入這樣一個點圖，并用HSPACE和VSPACE屬性來調(diào)整點圖的左右和上下的空格，以達到段落縮進。?

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

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

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

利用表格來定位一般來說比較可靠，我常常就采用這種方式來對比較復(fù)雜的頁面進行定位。不過這種方法有一個問題，就是可能是頁面的源文件變大。因此也不見得是格式控制的首選。?

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

“?”代表非顯示空格字符。插入若干個“?”字符，中間用分號(；)或者空格隔開，也可以實現(xiàn)中文段落縮進。不過在Netscape中只能寫小寫字母，而在IE中大小寫都可以。?

這四種方法主要是針對利用HTML的語言編寫網(wǎng)頁而言。在一些網(wǎng)頁制作工具，如網(wǎng)景瀏覽器中有專門加入空格的工具條，也可以完成段落縮進。?

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

目標(biāo)窗口是頁面鏈接所指內(nèi)容顯示的窗口，也就是當(dāng)你單擊了頁面某一個鏈接后，該鏈接所指的內(nèi)容在那個窗口顯示。大多數(shù)情況下，我們無需關(guān)心它，因為一般都是在同一窗口顯示。但是有時我們需要彈出一個新的窗口，而不是替代原來的窗口，怎么辦呢？很簡單，這里我們只要更改超級鏈接源代碼的target屬性就可以了。?

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

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

如要使單擊超級鏈接產(chǎn)生一個新的窗口，可將相應(yīng)超級鏈接改為如下形式：?
　　＜a?href=”www.yourname.com”?target=”_blank”＞yourname＜/a＞?

六、實現(xiàn)文字的自動換行?

我們在編制主頁的時候，有時候會發(fā)現(xiàn)自己制作的主頁不能夠自動換行，尤其是對一大段文字，必須拖動窗口的滑塊跑很久才能看完后面的文字。如何消除這種情況呢？這里我們介紹用表格來定位的方法：?

我們認(rèn)為很有效的方法就是采用表格來對文字進行定位。當(dāng)然這里的表格我們一定要給定它的絕對寬度（直接給定或間接給定寬度），那么輸入的長文字便會自動的換行了。?

這里所說的直接給定表格的寬度，是指我們直接設(shè)定表格的width屬性值為某一個設(shè)定值。如我們可以如下設(shè)定：?
　　＜table?width=”420″＞…＜/table＞　?

相對值是指采用相對于上一級表格的寬度，通常用一個百分?jǐn)?shù)來表示。比如我們在一個相對外層的表格中設(shè)定了表格的寬度，那么在內(nèi)層的表格中只要給出一個相對的寬度就相當(dāng)于已經(jīng)給定了表格絕對寬度。我們可以看看下面的源代碼：?
　　＜table?width=”760″＞?
　　　　…?
　　　　＜table?width=”60%”＞?
　　　　　　…?
　　　　＜/table＞?
　　＜/table＞?
這里就相當(dāng)于我們已經(jīng)給定了內(nèi)層表格的寬度為760*60%=456個像素點了。?


七、如何彈出公告窗口?

有時我們需要采用公告窗口來展示一些重要的信息，所謂公告窗口是指我們?yōu)g覽主頁時，隨主頁面的加載而自動彈出的小窗口，公告窗口中一般會放上新聞、布告的信息。下面我們看看怎樣用幾句簡單的ja;vascript語句來實現(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”,”測試公告窗口”,”width=340,height=163,toolbar=0,status=0,menubar=0,resize=0″);?
＜/script＞?

它們的作用是相同的，其中windows.open()的作用是打開一個窗口，括號內(nèi)的各項參數(shù)的用法我們可以在下面看到，我們可以根據(jù)自己的需要設(shè)置各個參數(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?是否顯示滾動條?
resizable=yes,no?是否可以改變公告窗口大小?
copyhistory=yes,no?是否顯示歷史按鈕?
width=300?公告窗口的寬?
height=200?公告窗口的高?
left=100?公告窗口的左上頂點距屏幕左邊100像素?
top=100?公告窗口的左上頂點距屏幕頂端100像素?