網頁設計的小技巧

摘要：本文介紹了用Dreamweaver進行網頁設計過程中的十四個小技巧，包括FLASH的透明背景顯示，浮動框架的運用，簡單CSS樣式實現(xiàn)鏈接的樣式，表格的特殊應用以及水平線等內容，同時指明了解決此類問題的大致方法。

關鍵詞：網頁設計；技巧；運用；代碼

中圖分類號：TP317文獻標識碼：A文章編號：1009-3044(2008)08-10ppp-0c

1 引言

我們在進行網頁設計時，經常會遇到很多的問題，往往會一籌莫展，找不到解決的出口，而實際上在經過摸索與再實驗后，會發(fā)現(xiàn)解決這些問題真的很簡單！

筆者經過長時期的實踐，在這里將我平時實踐過程遇到的問題以及解決方法進行了一番總結，希望能夠給大家?guī)韼椭?/p>

2 網頁設計技巧

2.1 FLASH透明背景顯示

當我們打開www.daobaoku.com這個網頁制作大寶庫時，我們經常會為桌面上幾條小金魚的自由游動而吸引，它們能夠自由地穿梭于網頁的文字圖片之中，這種效果是怎么實現(xiàn)的呢？在我工作過程當中，很多的學生碰到這個問題。實際上我們在網頁當中插入一個FLASH，這種操作是非常簡單的，那么如何實現(xiàn)讓插入的這個FLASH在網頁中實現(xiàn)透明背景的效果呢？細心的同學可能注意到，當選中插入的FLASH時，編輯區(qū)下方的“屬性”右下角有一個“參數(shù)”的按鈕，當我們點擊“參數(shù)”按鈕后，就彈出一個對話框，我們在左邊的“參數(shù)”填寫“wmode”，并在右邊“值”的選項框中填入“transparent”，點擊“確定”按鈕，回到編輯區(qū)。當我們再用F12進行瀏覽網頁時，發(fā)現(xiàn)網頁中的FLASH已經在網頁中呈透明背景顯示了。

2.2 IFRAME框架的運用

有時候，我們打開某個網站，其中都有那么一部分，仿佛是別人網站上的內容或者完全就是別人網站的某個頁面；比如很多的網站都會有一個時鐘或者一個日歷，當我們用“另存為”將此頁面保存完后，用dreamweaver 軟件進行編輯時，卻找不到相關的程序，那么這些程序到底躲到哪里去了呢？我又如何對這些時鐘或者日歷進行代碼的修改呢？

學習過框架的同學肯定知道，框架的意思通俗一點講就是把別人的網頁顯示在自己的網頁中。在框架的知識中，我們有一個浮動框架，就能將上面所講的問題得到完美的解決。

舉個例子來進行說明，比如我想把“新浪”網站首頁在我的網頁中進行顯示，只需要在網頁中需要放置“新浪”網站的位置寫入下列的語句，一切問題就可以解決。

＜iframe src=\"http://www.sina.com.cn?auth_key=1747350574-248693268-0-e07abf5c7f6d2d24b16e5e6bba3a8517\" width=\"400\"height=400 marginwidth=\"0\"

marginheight=\"0\" hspace=\"0\" vspace=\"0\" frameborder=\"0\" scrolling=\"no\"＞＜/iframe＞

顯示出來的“新浪網站”的大小與形式，我們可通過其中的width與height等參數(shù)進行設置 ，從而把別人的網頁無縫地與自己的網頁融合在一起。

2.3 如何避免別人把你的網頁放在框架中？

我們在上面的技巧二中，講到如何將別人的網頁放入自己的網頁中，而實際上很多網站的制作者，都不甘愿讓別人這么輕易地拿走自己的東西，所以，這個時候就會想，有什么辦法能避免別人把你的網頁放在框架中呢？

你只需要在網頁源代碼的＜head＞＜/head＞之間加入以下代碼內容：

＜script language=“javascript”＞

＜!--

if (self!=top){top.location=self.location;}

--＞

＜/script＞

2.4 如何讓表格中的背景圖片顯示

有時候我們明明在單元格中插入了背景圖片，而且在Dreamweaver的視窗里也可以看到，但是一預覽背景圖片就不顯示了。遇到這種請情況，不要著急，檢查一下你的代碼是否正確，我們來看一段表格的代碼，代碼如下：

＜table width=\"300\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" bordercolor=\"#000000\"＞

＜tr background=\"yx.gif\"＞

＜td height=\"19\"＞ ＜/td＞

＜td height=\"19\"＞ ＜/td＞

＜/tr＞

＜/table＞

不錯，上面的背景圖確實有(background=\"yx.gif\")，但由于放錯了地方，所以就顯示不出來了，請把背景屬性放在＜td＞標記里面，然后再預覽一次，怎么樣，這次出來了吧！

2.5 背景圖片不隨網頁的內容而滾動

當我們在過情人節(jié)或者春節(jié)的時候，總會收到很多朋友們發(fā)過來的一個個祝賀性質的網址，當我們?yōu)g覽時，總會發(fā)現(xiàn)，拖動右邊的滾動條時，感覺只有網頁的內容隨著滾動條的滾動而滾動，而背景卻完全沒有動，這種效果又是如何實現(xiàn)的呢？

給網頁加入背景圖片，有很多的方法，這里不一一列舉，這是網頁設計里面一個很簡單的操作。如何讓背景圖片固定不動呢，我們只需要將＜body＞參數(shù)設置為以下代碼，就可以實現(xiàn)了。

＜body background=\"yx.gif\"bgproperties=\"fixed\"＞

或用CSS樣式表定義：

＜style type=\"text/css\"＞

＜!--

body { background-image: url(yx.gif); background-attachment: fixed}

--＞

＜/style＞

2.6 給超級鏈接進行顏色設置(CSS)，鼠標形狀設置，鏈接的下劃線的設置

初學者打開很多門戶性網站或者藝術性質的網站，總會被其中專業(yè)的鏈接驚喜很久，因為在自己動手制作網頁當中，我們進行簡單的超級鏈接設置后，發(fā)現(xiàn)瀏覽出來的頁面總是會有那么一點粗糙，無論我們怎么點擊“鏈接”項，它的顏色總是一樣，而且會在文字下方永遠保持著一條下劃線，同時鼠標也沒有任何的變化，那么如何做，才能給超級鏈接進行顏色設置（CSS），鼠標形狀設置，鏈接的下劃線的設置呢？

這需要借助于我們Dreamweaver 自帶的CSS樣式進行，下面的代碼分別實現(xiàn)下列的效果：

當正常鏈接時，鏈接的顏色為黑色，無下劃線，字體大小為12像素。

當某個鏈接被訪問過后，鏈接的顏色為灰色， 無下劃線，字體大小為12像素。

當鼠標在鏈接上方停留時，鏈接的顏色為紅色，有下劃線，字體大小為14像素。

當我們點擊鏈接時，鏈接的顏色顯示為黃色，無下劃線，字體大小為12像素。

只需要將下列的代碼加入到＜head＞與＜/head＞之間，即可。

＜style type=\"text/css\"＞

＜!--

a:link {

font-size: 12px;color: #000000;text-decoration: none;

}

a:visited {

font-size: 12px;color: #666666;text-decoration: none;

}

a:hover {

color: #FF0000;text-decoration: underline;font-size: 14px;

}

a:active {

font-size: 12px;color: #FFFF00;text-decoration: none;

}

--＞

＜/style＞

其中的color就是用來設置鏈接的顏色，text_decoration用來設置鏈接是否應該有下劃線、上劃線、刪除線或者什么沒有，而font-size是用來設置字體的大小的，但幾種狀態(tài)之間的font-size值的變化，讓訪問者產生一種動態(tài)的效果。

尤其要注意的是，我們在寫的時候一定要注意這個CSS樣式的書寫順利，一定要按照a:link、a:visited、a:hover、a:active依次書寫，否則這幾種狀態(tài)的效果將得不到正常的顯示。

看完鏈接的顏色與下劃線的設置后，我們來了解下在不同的鏈接上所顯示出來的不同的鼠標形狀是如何進行設置的呢？

我們知道，當把鼠標移動到不同的地方時，當鼠標需要執(zhí)行不同的功能時，當系統(tǒng)處于不同的狀態(tài)時，都會使鼠標的形狀發(fā)生改變。用CSS來改變鼠標的屬性，就是當鼠標移動到不同的元素對象上面時，讓鼠標以不同的形狀、圖案顯示。在CSS當中，這種樣式是通過“cursor”屬性來實現(xiàn)的。Cursor屬性有很多的屬性值，我們來看一下它的詳細列表，見圖1。

圖1 Cursor屬性值

具體的應用，看下列的代碼實現(xiàn)，這種是在具體的網頁進行內嵌樣式的方式進行設置：

＜p＞＜span style=“cursor:hand”＞手的形狀＜/span＞＜br＞ //*設置鼠標屬性為手的形狀*//

＜span style=“cursor:move”＞移動＜/span＞＜br＞//*設置鼠標屬性為移動*//

＜span style=“cursor:ne-resize”＞反方向＜/span＞＜br＞//*設置鼠標屬性為反方向*//

＜span style=“cursor:wait”＞等待＜/span＞＜br＞//*設置鼠標屬性為等待*//

＜span style=“cursor:help”＞求助＜/span＞//*設置鼠標屬性為求助*//

同樣，我們也可以在CSS樣式中進行設置，見下列的代碼：

a:link

{font-size: 12px; color: #000000; text-decoration: none;cursor: hand;}

2.7 隱藏瀏覽器中狀態(tài)欄的URL地址信息的方法

瀏覽網頁，當鼠標停留在鏈接上方時，在下面的狀態(tài)欄中會自動顯示該鏈接目標地址，考慮到安全方面的問題，有時我們需要把它重置為“零”，即設為空白?，F(xiàn)在只需要在鏈接代碼中做些設置就可以實現(xiàn)了，如下：

＜a href=\"http://www.hnswxy.com\" onMouseOver=\"window.status='none';return true\"＞湖南商務學院＜/a＞

2.8 如何制作“空鏈接”

空鏈接也就是，沒有鏈接對象的鏈接，在空鏈接中，目標URL是用“#”來表示的。也就是說制作鏈接時，只要在屬性板的LINK輸入框中錄入#標記，它就是個空鏈接了?？真溄拥某霈F(xiàn)涉及到多方面的因素，比如一些沒有定期完成的頁面，又為了保持頁面顯示上的一致（鏈接樣式與普通文字樣式的不同），就可以使用它了。

2.9 實現(xiàn)在同一張圖片上進行多個鏈接的操作

當需要查詢“中國”-“湖南”的天氣預報時，我們會打開某個網站，比如：http://www.t7online.com/，找到“湖南”地區(qū)時，頁面中會出現(xiàn)一個湖南的地圖，當我們需要查詢“長沙”的天氣情況時，我們只需要在長沙的名稱上點擊就可以進入該城市的天氣情況頁面，想要查看其它城市的天氣情況，只需要在某個城市名稱上方進行鼠標點擊就可以了。這種在同一張圖片進行的多個鏈接，是如何實現(xiàn)的呢？

在Dreamweaver 中提供了一種客戶端圖像映像的操作，通俗的講就是“熱區(qū)”的操作，當我們在Dreamweaver的編輯區(qū)域選中某一幅圖片時， “屬性”窗口中左下角會出現(xiàn)一個“map”選項，提供了三種不同的熱點選擇工具，分別為：矩形、橢圓形以及多邊形，三種工具任意選擇，就可以實現(xiàn)在同一張圖片上進行多個鏈接的效果了。

2.10 水平線設置

經常有學生問我一些關于水平線設置方面的問題，比如：如何利用水平線來制作一條豎線？如何設置水平線的顏色？

一般，我們在網頁中插入水平線后，打開代碼視圖，會有以下的代碼：

＜hr width=\"600\"＞ //*在網頁中插入了一條橫向的水平線*//

在＜hr＞標記中，我們除了有width屬性設置水平線的寬度外，還有size屬性用來設置水平線的高度，大家換個思路想想，當width=600時，我們畫出了一條橫線，那么如果我們將height=600，是不是會畫出一條豎線出來呢。

事實證明，以下的代碼會在網頁中畫出一條豎線出來。

＜hr width=\"1\" size=\"600\"＞//*在網頁中插入了一條豎向的水平線*//

這個時候顯示出來的水平線都是系統(tǒng)默認的灰色，那么怎么樣進行多種顏色的設置呢，這個時候我們仍然要借助于代碼來實現(xiàn)，若想將水平線設置為“red”色，則需要加入下列的代碼：

＜hr width=\"1\" size=\"600\" color=\"#FF0000\"＞

大家看，是不是已經設置好了呢。

2.11如何在添加背景音樂

在微軟的網頁工具-Frontpage中，有關于背景音樂的設置功能，那么Dreamweaver顯然沒有作到這點，因此要使用的話，只能在源代碼中手動添加了。在使用前，提醒大家一點，使用背景音樂一定要注意網頁文件的大小，不能顧此失彼。

方法一：借助于＜embed＞屬性進行設置

代碼如下：

＜EMBED src=\"11.mp3\" autostart=\"true\"loop=\"2\"width=\"80\"height=\"30\"＞

其中src指定音樂文件的位置，autostart為音樂文件上傳后的動作，true表示自動開始播放，1不播放（默認值）。

方法二：＜bgsound＞屬性的運用

＜bgsound=\"你要加的音樂文件.wav\" loop=\"播放的次數(shù)\"＞

其中l(wèi)oop屬性為0時表示循環(huán)播放， 但bgsound標記只能適用于IE。有很多朋友使用FRONTPAGE做主頁，只須在頁面中點擊右鍵，選擇頁面屬性，選定背景樂就可以了。其原理是使用bgsound標記。

如果不想使用代碼來進行設置的話，我們可以用下列的方式實現(xiàn)同樣的效果。借助于dreamweaver軟件自帶的“行為”中的“播放聲音”進行設置，若想要打開頁面時，自動播放音樂，我們只需要將“事件”改為onLoad即可。

2.12 在dreamweaver用background 插入flash播放器

很多的網頁都會有一個FLASH播放器進行音樂的播放，特別像現(xiàn)在很火的博客，幾乎都會在主頁當中有這么一個時尚的FLASH播放器，那么如何在dreamweaver實現(xiàn)flash播放器的插入呢，我們這里借助于background屬性，下面就是一個實例的代碼，僅僅需要將這些代碼放在＜head＞與＜/head＞之中即可：

＜style type=\"text/css\"＞

＜!--

body {

background:url(\"JAVASCRIPT:window.onload=function plays(){

var player='＜object type=\"application/x-shockwave-flash\" width=\"210\" height=\"20\"＞＜param name=\"movie\" value=\"http://www.0hao2.com/flash/mp3player1.swf?mp3=11.mp3\"＞＜/object＞';

music.innerHTML=player;}\");

}

--＞

＜/style＞

＜div id=\"music\"＞播放器＜/div＞

如果你想要換另外一首歌曲為你的背景音樂時，只需要將value=http://www.0hao2.com/flash/mp3player1.swf?mp3=11.mp3的11.mp3改成你的音樂就好了。

2.13 固定單元格寬度

單擊插入面板上的“插入表格”圖標，在網頁中插入一個2*5的表格，我們在某個單元格輸入文字時，會發(fā)現(xiàn)單元格的寬度馬上就會變得很混亂，那么，如何固定確定并固定單元格的寬度呢？

使用dreamweaver自帶的1×1象素透明圖像，可以固定單元格的大小。步驟如下：

第一步：生成1×1象素透明圖像

（1）選擇“編輯”/“參數(shù)選擇”。在“布局視圖”類別中，單擊“創(chuàng)建”按鈕。

（2）選擇透明圖像存放的目錄，然后單擊保存按鈕。這時生成了透明圖像。

（3）單擊“確定”按鈕，完成參數(shù)設置。

第二步：使用1×1象素透明圖像固定單元格寬度

（1）在站點面板中，選中透明圖像。

（2）把透明圖像拖到單元格中。

（3）并且在屬性面板上，設置透明圖像的寬度。

（4）單元格中插入了透明圖像的表格。

（5）在單元格中輸入文字，這時單元格沒有變形。

（6）按F12在IE瀏覽器中測試，單元格也沒有變形。

大家可以動手去試一下，這是一個很好的固定單元格寬度的方法。

2.14 在Dreamweaver中如何讓默認豎排的幾個表格變?yōu)闄M排？

在網頁中插入三個1*1的表格，這三個表格分別疊加著堆在一個豎排，現(xiàn)在如果我想把這三個表格由豎排轉為橫排，應該怎么辦呢？ 有兩種方式可以實現(xiàn)這種效果，第一種， 先插入一個大表格，分成三列，分別把那幾個要排成一行的表格分別放到幾個單元格中去就ok了。第二種，不用在外面罩個大表格，直接將三個表格的對齊方式設置為“左對齊”即可。

3結束語

網頁設計是一門講究技巧的學科，在不斷的實踐過程中，我們將會掌握更多的技巧，從而制作出更專業(yè)更完善的網站出來。

參考文獻：

[1]施威銘研究室.Dreamweaver 8完美網頁設計系列從書[M].北京：中國電力出版社，2006.

[2]尼科.麥克唐納，戴剛，等.What is web design [M].北京：中國青年出版社，2006.

[3]梁建武.網頁制作與設計實訓21世紀高等院校計算機系列教材[M].北京：中國水利水電出版社，2003.