簡單實用 網頁制作超級技巧
一、讓文字改變顏色
在有些網頁我們可以看到一些文字，當鼠標移上去是一種顏色，移開就是另外一種顏色，這是怎么樣實現的呢？
原來我們只需要在Head內預先定義兩個類，分別定義了兩種顏色，這在后面的HTML源文件中會用到這個顏色的定義：
＜style＞
.normal {color:red;}
.start {color:blue;}
＜/style＞
然后我們在要改變的字前后加上下面的代碼:
＜SPAN onmouseover = "this.className = 'normal'"
onmouseout = "this.className='start'" class=start＞ here ＜/SPAN＞
這里的“class=start”是將這行字的默認值設為 start {color:blue;},要是不加上這句 的話，你這行字的顏色就會變成HTML預先設定的數值。
當我們把鼠標移動到“here”上的時候，顏色為“normal”定義的顏色，而當鼠標移開的時候“here”的顏色為“start”定義的顏色（這種效果只有在IE瀏覽器中才可以看到）。
二、給置網頁加上背景圖像
網頁的背景色和背景圖選擇得好，會給頁面增色不少。如果選取單一的背景色，難免顯得單調，如果選擇整個圖片做背景，由于圖片本身的文件大，造成網頁的加載時間長，一般用戶很難有耐性等待下去。那么帶背景的網頁是如何制作出來的？
很簡單，一般是采用一幅很小的圖片，然后鋪展開，形成很漂亮的背景。對背景圖的要求當然是越漂亮越好，文件越小越好。當你有了一幅可以自然拼接的圖像后，在Dreamweaver中，我們可以設置background圖片。
打開源文件我們可以看到〈BODY〉標簽中多了一串代碼。代碼的表達式如下：
＜BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" ＞
這里的images/background.gif就是BACKGROUND的值，其圖像文件名為一個URL。 當然我們可以在源代碼中直接加入上面的代碼。
三、去掉超鏈接的下劃線
在訪問一些頁面的時候，我們會發現，當鼠標移動到具有超級連接的文字上的時候，有的會產生相應的下劃線。然而有些網頁卻沒有。主頁超鏈接的下劃線是如何去掉的呢？
我們在＜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="javascript"＞
var contents = true;
＜/script＞
更簡單的方法是：
＜style＞
＜!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!＞
＜/style＞
四、段落縮進的方法
在利用Dreamweaver制作有關文檔資料內容的網頁時，如果是英文書寫格式，段落一般不縮進（不支持半角空格）；如果需要縮進往往需要人為的加入兩個中文全角空格，才能夠顯示出位置縮進效果。
除了上面所說的外，還有下面幾種方法，可以值得一試，現介紹如下。
1.預格式(PRE)
用預格式編寫的源文件，在顯示時照源文件中的排版字樣顯示，空行和空格都能很清楚地區別開來。如源文件為：
＜pre＞
－－預格式顯示……
＜/pre＞
網頁就會按照你預先設置好的顯示方式顯示，即在“預格式顯示”的前面就會空兩個漢字的位置。
2.插入點圖或圖形
點圖是指圖片中只有一個或幾個像素點，用肉眼看不出來。當我們在段落開頭插入這樣一個點圖，并用HSPACE和VSPACE屬性來調整點圖的左右和上下的空格，以達到段落縮進。
同樣可以插入圖形，只不過該圖形的顏色需要用網頁背景色，這種方式用IMG的WIDTH和HEIGHT屬性調整圖形大小，以達到縮進。
插入圖形的方法，需要我們掌握好HSPACE和VSPACE大小的尺度，使之剛好留出兩個漢字的位置，這樣才比較美觀。
3.插入沒有邊框和內容的表格
這種方式與上述的插入圖形方式類似，該表格沒有邊框和內容，是空表格。用TABLE的WIDTH和HEIGHT屬性調整表格大小適合縮進的需要。
利用表格來定位一般來說比較可靠，我常常就采用這種方式來對比較復雜的頁面進行定位。不過這種方法有一個問題，就是可能是頁面的源文件變大。因此也不見得是格式控制的首選。
4.插入特殊的空格字符“ ”
“ ”代表非顯示空格字符。插入若干個“ ”字符，中間用分號(；)或者空格隔開，也可以實現中文段落縮進。不過在Netscape中只能寫小寫字母，而在IE中大小寫都可以。
這四種方法主要是針對利用HTML的語言編寫網頁而言。在一些網頁制作工具，如網景瀏覽器中有專門加入空格的工具條，也可以完成段落縮進。
五、為超級鏈接設定目標窗口
目標窗口是頁面鏈接所指內容顯示的窗口，也就是當你單擊了頁面某一個鏈接后，該鏈接所指的內容在那個窗口顯示。大多數情況下，我們無需關心它，因為一般都是在同一窗口顯示。但是有時我們需要彈出一個新的窗口，而不是替代原來的窗口，怎么辦呢？很簡單，這里我們只要更改超級鏈接源代碼的target屬性就可以了。
TARGET是鏈接標簽的屬性，它的作用就是指定目標窗口，TARGET有以下幾個值：
_self-將鏈接指向的內容裝載到當前頁的窗口或框架中；
_top-完全取代當前頁面的所有框架；
_blank-為鏈接指向的內容打開一個新的窗口
_parent-把鏈接指向的內容裝入當前頁〈FRAMESET〉父窗口中
如要使單擊超級鏈接產生一個新的窗口，可將相應超級鏈接改為如下形式：
＜a );
＜/script＞
它們的作用是相同的，其中windows.open()的作用是打開一個窗口，括號內的各項參數的用法我們可以在下面看到，我們可以根據自己的需要設置各個參數的值。
窗口參數 參數介紹
toolbar=yes,no 是否顯示工具條
location=yes,no 是否顯示網址欄
directories=yes,no 是否顯示導航條
status=yes,no 是否顯示狀態條
menubar=yes,no 是否顯示菜單
scrollbars=yes,no 是否顯示滾動條
resizable=yes,no 是否可以改變公告窗口大小
copyhistory=yes,no 是否顯示歷史按鈕
width=300 公告窗口的寬
height=200 公告窗口的高
left=100 公告窗口的左上頂點距屏幕左邊100像素
top=100 公告窗口的左上頂點距屏幕頂端100像素
在有些網頁我們可以看到一些文字，當鼠標移上去是一種顏色，移開就是另外一種顏色，這是怎么樣實現的呢？
原來我們只需要在Head內預先定義兩個類，分別定義了兩種顏色，這在后面的HTML源文件中會用到這個顏色的定義：
＜style＞
.normal {color:red;}
.start {color:blue;}
＜/style＞
然后我們在要改變的字前后加上下面的代碼:
＜SPAN onmouseover = "this.className = 'normal'"
onmouseout = "this.className='start'" class=start＞ here ＜/SPAN＞
這里的“class=start”是將這行字的默認值設為 start {color:blue;},要是不加上這句 的話，你這行字的顏色就會變成HTML預先設定的數值。
當我們把鼠標移動到“here”上的時候，顏色為“normal”定義的顏色，而當鼠標移開的時候“here”的顏色為“start”定義的顏色（這種效果只有在IE瀏覽器中才可以看到）。
二、給置網頁加上背景圖像
網頁的背景色和背景圖選擇得好，會給頁面增色不少。如果選取單一的背景色，難免顯得單調，如果選擇整個圖片做背景，由于圖片本身的文件大，造成網頁的加載時間長，一般用戶很難有耐性等待下去。那么帶背景的網頁是如何制作出來的？
很簡單，一般是采用一幅很小的圖片，然后鋪展開，形成很漂亮的背景。對背景圖的要求當然是越漂亮越好，文件越小越好。當你有了一幅可以自然拼接的圖像后，在Dreamweaver中，我們可以設置background圖片。
打開源文件我們可以看到〈BODY〉標簽中多了一串代碼。代碼的表達式如下：
＜BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFFF" ＞
這里的images/background.gif就是BACKGROUND的值，其圖像文件名為一個URL。 當然我們可以在源代碼中直接加入上面的代碼。
三、去掉超鏈接的下劃線
在訪問一些頁面的時候，我們會發現，當鼠標移動到具有超級連接的文字上的時候，有的會產生相應的下劃線。然而有些網頁卻沒有。主頁超鏈接的下劃線是如何去掉的呢？
我們在＜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="javascript"＞
var contents = true;
＜/script＞
更簡單的方法是：
＜style＞
＜!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!＞
＜/style＞
四、段落縮進的方法
在利用Dreamweaver制作有關文檔資料內容的網頁時，如果是英文書寫格式，段落一般不縮進（不支持半角空格）；如果需要縮進往往需要人為的加入兩個中文全角空格，才能夠顯示出位置縮進效果。
除了上面所說的外，還有下面幾種方法，可以值得一試，現介紹如下。
1.預格式(PRE)
用預格式編寫的源文件，在顯示時照源文件中的排版字樣顯示，空行和空格都能很清楚地區別開來。如源文件為：
＜pre＞
－－預格式顯示……
＜/pre＞
網頁就會按照你預先設置好的顯示方式顯示，即在“預格式顯示”的前面就會空兩個漢字的位置。
2.插入點圖或圖形
點圖是指圖片中只有一個或幾個像素點，用肉眼看不出來。當我們在段落開頭插入這樣一個點圖，并用HSPACE和VSPACE屬性來調整點圖的左右和上下的空格，以達到段落縮進。
同樣可以插入圖形，只不過該圖形的顏色需要用網頁背景色，這種方式用IMG的WIDTH和HEIGHT屬性調整圖形大小，以達到縮進。
插入圖形的方法，需要我們掌握好HSPACE和VSPACE大小的尺度，使之剛好留出兩個漢字的位置，這樣才比較美觀。
3.插入沒有邊框和內容的表格
這種方式與上述的插入圖形方式類似，該表格沒有邊框和內容，是空表格。用TABLE的WIDTH和HEIGHT屬性調整表格大小適合縮進的需要。
利用表格來定位一般來說比較可靠，我常常就采用這種方式來對比較復雜的頁面進行定位。不過這種方法有一個問題，就是可能是頁面的源文件變大。因此也不見得是格式控制的首選。
4.插入特殊的空格字符“ ”
“ ”代表非顯示空格字符。插入若干個“ ”字符，中間用分號(；)或者空格隔開，也可以實現中文段落縮進。不過在Netscape中只能寫小寫字母，而在IE中大小寫都可以。
這四種方法主要是針對利用HTML的語言編寫網頁而言。在一些網頁制作工具，如網景瀏覽器中有專門加入空格的工具條，也可以完成段落縮進。
五、為超級鏈接設定目標窗口
目標窗口是頁面鏈接所指內容顯示的窗口，也就是當你單擊了頁面某一個鏈接后，該鏈接所指的內容在那個窗口顯示。大多數情況下，我們無需關心它，因為一般都是在同一窗口顯示。但是有時我們需要彈出一個新的窗口，而不是替代原來的窗口，怎么辦呢？很簡單，這里我們只要更改超級鏈接源代碼的target屬性就可以了。
TARGET是鏈接標簽的屬性，它的作用就是指定目標窗口，TARGET有以下幾個值：
_self-將鏈接指向的內容裝載到當前頁的窗口或框架中；
_top-完全取代當前頁面的所有框架；
_blank-為鏈接指向的內容打開一個新的窗口
_parent-把鏈接指向的內容裝入當前頁〈FRAMESET〉父窗口中
如要使單擊超級鏈接產生一個新的窗口，可將相應超級鏈接改為如下形式：
＜a );
＜/script＞
它們的作用是相同的，其中windows.open()的作用是打開一個窗口，括號內的各項參數的用法我們可以在下面看到，我們可以根據自己的需要設置各個參數的值。
窗口參數 參數介紹
toolbar=yes,no 是否顯示工具條
location=yes,no 是否顯示網址欄
directories=yes,no 是否顯示導航條
status=yes,no 是否顯示狀態條
menubar=yes,no 是否顯示菜單
scrollbars=yes,no 是否顯示滾動條
resizable=yes,no 是否可以改變公告窗口大小
copyhistory=yes,no 是否顯示歷史按鈕
width=300 公告窗口的寬
height=200 公告窗口的高
left=100 公告窗口的左上頂點距屏幕左邊100像素
top=100 公告窗口的左上頂點距屏幕頂端100像素
粵公網安備 44010402000282號