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

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；技巧；運(yùn)用；代碼

中圖分類號(hào)：TP317文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2008)08-10ppp-0c

1 引言

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

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

2 網(wǎng)頁設(shè)計(jì)技巧

2.1 FLASH透明背景顯示

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

2.2 IFRAME框架的運(yùn)用

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

學(xué)習(xí)過框架的同學(xué)肯定知道，框架的意思通俗一點(diǎn)講就是把別人的網(wǎng)頁顯示在自己的網(wǎng)頁中。在框架的知識(shí)中，我們有一個(gè)浮動(dòng)框架，就能將上面所講的問題得到完美的解決。

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

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

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

2.3 如何避免別人把你的網(wǎng)頁放在框架中？

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

你只需要在網(wǎng)頁源代碼的＜head＞＜/head＞之間加入以下代碼內(nèi)容：

＜script language=“javascript”＞

＜!--

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

--＞

＜/script＞

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

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

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

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

2.5 背景圖片不隨網(wǎng)頁的內(nèi)容而滾動(dòng)

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

給網(wǎng)頁加入背景圖片，有很多的方法，這里不一一列舉，這是網(wǎng)頁設(shè)計(jì)里面一個(gè)很簡單的操作。如何讓背景圖片固定不動(dòng)呢，我們只需要將＜body＞參數(shù)設(shè)置為以下代碼，就可以實(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 給超級鏈接進(jìn)行顏色設(shè)置(CSS)，鼠標(biāo)形狀設(shè)置，鏈接的下劃線的設(shè)置

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

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

當(dāng)正常鏈接時(shí)，鏈接的顏色為黑色，無下劃線，字體大小為12像素。

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

當(dāng)鼠標(biāo)在鏈接上方停留時(shí)，鏈接的顏色為紅色，有下劃線，字體大小為14像素。

當(dāng)我們點(diǎn)擊鏈接時(shí)，鏈接的顏色顯示為黃色，無下劃線，字體大小為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就是用來設(shè)置鏈接的顏色，text_decoration用來設(shè)置鏈接是否應(yīng)該有下劃線、上劃線、刪除線或者什么沒有，而font-size是用來設(shè)置字體的大小的，但幾種狀態(tài)之間的font-size值的變化，讓訪問者產(chǎn)生一種動(dòng)態(tài)的效果。

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

看完鏈接的顏色與下劃線的設(shè)置后，我們來了解下在不同的鏈接上所顯示出來的不同的鼠標(biāo)形狀是如何進(jìn)行設(shè)置的呢？

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

圖1 Cursor屬性值

具體的應(yīng)用，看下列的代碼實(shí)現(xiàn)，這種是在具體的網(wǎng)頁進(jìn)行內(nèi)嵌樣式的方式進(jìn)行設(shè)置：

＜p＞＜span style=“cursor:hand”＞手的形狀＜/span＞＜br＞ //*設(shè)置鼠標(biāo)屬性為手的形狀*//

＜span style=“cursor:move”＞移動(dòng)＜/span＞＜br＞//*設(shè)置鼠標(biāo)屬性為移動(dòng)*//

＜span style=“cursor:ne-resize”＞反方向＜/span＞＜br＞//*設(shè)置鼠標(biāo)屬性為反方向*//

＜span style=“cursor:wait”＞等待＜/span＞＜br＞//*設(shè)置鼠標(biāo)屬性為等待*//

＜span style=“cursor:help”＞求助＜/span＞//*設(shè)置鼠標(biāo)屬性為求助*//

同樣，我們也可以在CSS樣式中進(jìn)行設(shè)置，見下列的代碼：

a:link

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

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

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

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

2.8 如何制作“空鏈接”

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

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

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

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

2.10 水平線設(shè)置

經(jīng)常有學(xué)生問我一些關(guān)于水平線設(shè)置方面的問題，比如：如何利用水平線來制作一條豎線？如何設(shè)置水平線的顏色？

一般，我們在網(wǎng)頁中插入水平線后，打開代碼視圖，會(huì)有以下的代碼：

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

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

事實(shí)證明，以下的代碼會(huì)在網(wǎng)頁中畫出一條豎線出來。

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

這個(gè)時(shí)候顯示出來的水平線都是系統(tǒng)默認(rèn)的灰色，那么怎么樣進(jìn)行多種顏色的設(shè)置呢，這個(gè)時(shí)候我們?nèi)匀灰柚诖a來實(shí)現(xiàn)，若想將水平線設(shè)置為“red”色，則需要加入下列的代碼：

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

大家看，是不是已經(jīng)設(shè)置好了呢。

2.11如何在添加背景音樂

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

方法一：借助于＜embed＞屬性進(jìn)行設(shè)置

代碼如下：

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

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

方法二：＜bgsound＞屬性的運(yùn)用

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

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

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

2.12 在dreamweaver用background 插入flash播放器

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

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

＜!--

body {

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

var player='＜o(jì)bject 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＞

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

2.13 固定單元格寬度

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

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

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

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

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

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

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

（1）在站點(diǎn)面板中，選中透明圖像。

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

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

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

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

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

大家可以動(dòng)手去試一下，這是一個(gè)很好的固定單元格寬度的方法。

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

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

3結(jié)束語

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

參考文獻(xiàn)：

[1]施威銘研究室.Dreamweaver 8完美網(wǎng)頁設(shè)計(jì)系列從書[M].北京：中國電力出版社，2006.

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

[3]梁建武.網(wǎng)頁制作與設(shè)計(jì)實(shí)訓(xùn)21世紀(jì)高等院校計(jì)算機(jī)系列教材[M].北京：中國水利水電出版社，2003.