網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語(yǔ)言（markup language)，通過(guò)一系列設(shè)計(jì)、建模、和執(zhí)行的過(guò)程將電子格式的信息通過(guò)互聯(lián)網(wǎng)傳輸，最終以圖形用戶(hù)界面（GUI）的形式被用戶(hù)所瀏覽。簡(jiǎn)單來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過(guò)使超文件標(biāo)示語(yǔ)言、可擴(kuò)展超文本標(biāo)記語(yǔ)言等標(biāo)示語(yǔ)言放置到網(wǎng)站頁(yè)面上。

    26. 制作鼠標(biāo)移上去后有變化的動(dòng)態(tài)菜單

　　所謂動(dòng)態(tài)菜單其實(shí)是兩幅圖，一幅是鼠標(biāo)不放在上面所顯示的，另一副是鼠標(biāo)移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來(lái)實(shí)現(xiàn)這個(gè)效果。首先插入一副圖片，用鼠標(biāo)單擊它，在屬性面版的連接欄內(nèi)輸入要連接的網(wǎng)頁(yè)。然后打開(kāi)行為面板添，點(diǎn)擊“+”號(hào)，選擇swap image。接著出現(xiàn)一個(gè)窗口，要你選擇鼠標(biāo)移上去后所顯示的圖片，在此選擇第二副圖片，點(diǎn)擊“確定”。好了，效果完成了，多簡(jiǎn)單。

　　27. 用Dreamweaver制作出一個(gè)類(lèi)似于下拉菜單的效果

　　制作一個(gè)類(lèi)似于下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是：在頁(yè)面中插入一個(gè)單行多列的表格，作為你的菜單條。表格的列數(shù)由菜單選項(xiàng)的多少?zèng)Q定。插入一個(gè)層，在層中輸入第一個(gè)下拉菜單的內(nèi)容，并把這個(gè)層移動(dòng)到表格第一列的下面。同理，對(duì)其他菜單項(xiàng)也作如上的操作，插入相應(yīng)的層。把所有層的顯示屬性(vis)改為隱藏（Hidden）。

    選擇表格的第一個(gè)單元，單擊窗口（Windows）→行為（Behaviors），彈出行為面板。按下“+”添加行為Show-Hide layers，并將第一個(gè)層（Layer1）屬性改為顯示(Show)，其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個(gè)行為，將它的觸發(fā)事件(events)改為onMouseover。這樣，當(dāng)鼠標(biāo)移動(dòng)到第一個(gè)表格單元之上時(shí)，第一個(gè)下拉菜單就會(huì)顯示出來(lái)。接著再添加一個(gè)行為Show-Hide layers，并將所有層的屬性改為隱藏。接著在行為面板中編輯這個(gè)行為，將它的觸發(fā)事件(events)改為onMouseout。這樣當(dāng)鼠標(biāo)從第一個(gè)表格單元之上移開(kāi)時(shí)，第一個(gè)下拉菜單就會(huì)隱藏起來(lái)。對(duì)其他的菜單項(xiàng)重復(fù)上述操作。但要注意設(shè)置“菜單二”時(shí)，第二層顯示，其他層隱藏；設(shè)置“菜單三”時(shí)，第三層顯示，其他層隱藏；依此類(lèi)推下去。好了，做好了，按F12看看吧。

　　28. 輕松制作下載文件

　　用Dreamweaver其實(shí)很簡(jiǎn)單，把要讓瀏覽者下載的文件名寫(xiě)上，然后拖動(dòng)鼠標(biāo)選取這段文字，在文本的屬性面板上“Link”的屬性輸入框中寫(xiě)上文件名就行了。注意：若被下載的文件與該網(wǎng)頁(yè)不在同一目錄下，則文件名必須包含相對(duì)路徑，否則在下載時(shí)將提示找不到文件。

　　29. 利用Dreamweaver的書(shū)簽制作跳轉(zhuǎn)鏈接

　　利用Dreamweaver的書(shū)簽我們可以實(shí)現(xiàn)這個(gè)功能。具體方法是：將光標(biāo)移到你想跳轉(zhuǎn)到的地方，選擇菜單中的“插入（Insert）→書(shū)簽（Name Anchor）”，輸入書(shū)簽的名稱(chēng)。接下來(lái)，在你想調(diào)用鏈接的鏈接目標(biāo)框中填入“#書(shū)簽名稱(chēng)”，這樣一個(gè)頁(yè)面內(nèi)的跳轉(zhuǎn)鏈接就做好了。在這里，如果我們?cè)跁?shū)簽名稱(chēng)前填入網(wǎng)頁(yè)的名稱(chēng)，就會(huì)跳轉(zhuǎn)到其他頁(yè)面中的書(shū)簽處。 比如說(shuō)我們?cè)贚ink處填入“index.htm#top”，當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí)就會(huì)跳轉(zhuǎn)到index頁(yè)面中的top書(shū)簽處。

　　30. 去掉圖片和表格接觸地方的空隙

　　要使圖片和表格接觸的地方不留空隙，僅在表格屬性面板上把外框線（border）設(shè)為0是不行的，還需要在表格的屬性面板上把單元格的兩個(gè)屬性設(shè)為0（即cellspacing="0"和cellpadding="0"）。

　　31. 用TracingImage幫助定位網(wǎng)頁(yè)中各元素的位置

　　TracingImage是Dreamweaver一個(gè)非常有效的功能，它允許用戶(hù)在網(wǎng)頁(yè)中將原來(lái)的圖案設(shè)計(jì)作為輔助的背景。這么一來(lái)，用戶(hù)就可以非常方便地定位文字、圖像、表格、層等網(wǎng)頁(yè)元素在該頁(yè)面中的位置了。TracingImage的具體使用是這樣的：首先使用各種繪圖軟件作出一個(gè)想象中的網(wǎng)頁(yè)排版格局圖，然后將此圖保存為網(wǎng)絡(luò)圖像格式（包括gif、jpg、jpeg和png）。用Dreamweaver打開(kāi)你所編輯的網(wǎng)頁(yè)，在頁(yè)面的空白區(qū)單擊右鍵，選擇“Page Properties...”，然后在彈出的對(duì)話框中的Tracing Image項(xiàng)中輸入剛才創(chuàng)建的網(wǎng)頁(yè)排版格局圖所在位置。再在Image Transparen中設(shè)定TracingImage的透明度，OK。這樣你就可以在當(dāng)前網(wǎng)頁(yè)中方便地定位各個(gè)網(wǎng)頁(yè)元素的位置了。使用了TracingImage的網(wǎng)頁(yè)在用Dreamweaver編輯時(shí)不會(huì)再顯示背景圖案，但當(dāng)使用瀏覽器瀏覽時(shí)正好相反，TracingImage不見(jiàn)了，所見(jiàn)的就是經(jīng)過(guò)編輯的網(wǎng)頁(yè)（當(dāng)然能夠顯示背景圖案）。

　　32. 關(guān)于“Convert Table widths to Pixels”和“Convert Table widths to Percent”

　　“Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver兩個(gè)設(shè)置表格寬度的重要功能。當(dāng)你打開(kāi)一個(gè)帶有表格的網(wǎng)頁(yè)時(shí)，在狀態(tài)欄中點(diǎn)中〈table〉標(biāo)簽，在隨后顯示出的表格屬性工具面板中就能看到這兩個(gè)按鈕了。顧名思義“Convert Table widths to Pixels”就是將表格中所有單元的寬度以像素表示，而“Convert Table widths to Percent”是將表格中所有單元的寬度以百分比表示。仔細(xì)想想他們的作用，如果將一個(gè)表格的寬度全以像素表示，但瀏覽窗口被放大時(shí)，表格就不會(huì)隨之放大單元格的寬度。而使用了“Convert Table widths to Percent”后能夠使你在640×480分辨率下建立的100%寬的表格在更高的分辨率下依舊保持100%的寬度。所以活用這兩個(gè)功能可以使網(wǎng)頁(yè)排版事半功倍。

　　33. 調(diào)用Style而不致使網(wǎng)頁(yè)原代碼混亂不堪

　　調(diào)用Style的方法很多，你可以單擊右鍵選擇Custon Style來(lái)調(diào)用Style規(guī)范，也可以在狀態(tài)欄中的元素列表上單擊右鍵來(lái)調(diào)用Style。雖然不同的方法達(dá)到的效果看似一樣，但實(shí)際上產(chǎn)生的HTML代碼則完全不同。比如用Custon Style來(lái)調(diào)用Style規(guī)范，在網(wǎng)頁(yè)代碼中就生成一個(gè)〈span〉標(biāo)簽，這樣標(biāo)簽一多就會(huì)使文件十分臃腫而且影響瀏覽器的解析速度，所以我建議盡量使用狀態(tài)欄中的元素列表來(lái)調(diào)用Style。還有一個(gè)小技巧，如果你要使用一個(gè)Style定義某表格單元中的所有文字，只要在〈td〉標(biāo)簽中調(diào)用Style就行了，而不需要在一個(gè)個(gè)定義〈p〉標(biāo)簽。注意這個(gè)方法不適用于〈table〉標(biāo)簽，因?yàn)樵凇磘able〉標(biāo)簽中用Style定義的文字格式會(huì)被Netscape忽略。

　　34. 使用定制窗口功能測(cè)試網(wǎng)頁(yè)在不同分辨率下的效果

　　誰(shuí)都不希望看見(jiàn)自己辛辛苦苦做的網(wǎng)頁(yè)在不同的分辨率下面目全非，所以測(cè)試網(wǎng)頁(yè)在不同分辨率下的瀏覽效果是網(wǎng)頁(yè)制作中很重要的一步。我們可以在Dreamweaver的操作界面中的狀態(tài)欄中間，選擇需要的分辨率來(lái)調(diào)節(jié)窗口大小，從而實(shí)現(xiàn)在不同分辨率下測(cè)試網(wǎng)頁(yè)效果。

　　35. 上傳網(wǎng)站時(shí)無(wú)需使用第三方FTP軟件

　　Dreamweaver中融入了FTP功能，而且為網(wǎng)站上傳作了優(yōu)化。我們可以做一個(gè)簡(jiǎn)單的比較，當(dāng)你使用一般的FTP軟件上傳網(wǎng)站時(shí)，是不是都按本地機(jī)上的網(wǎng)站目錄在服務(wù)器中新建目錄，然后再一個(gè)個(gè)文件上傳。這種做法實(shí)在沒(méi)錯(cuò)，但由于本地機(jī)中的網(wǎng)站目錄中并不是每個(gè)文件都被網(wǎng)頁(yè)調(diào)用（比如在建網(wǎng)頁(yè)時(shí)留下的備份文件），所以篩選文件的繁重工作量只有用戶(hù)自己知道。但使用Dreamweaver上傳網(wǎng)頁(yè)就可以方便得多，由于FTP功能在幕后為用戶(hù)進(jìn)行了許多必要的工作，所以用戶(hù)只要將網(wǎng)站地圖內(nèi)相關(guān)的HTML文件上傳，Dreamweaver就會(huì)自動(dòng)將與此HTML文件相關(guān)的所有其他本地文件一并上傳（如圖像、ZIP文件、FLASH文件甚至是各種REAL文件）。使用Dreamweaver內(nèi)帶的FTP功能的具體做法是：編輯已經(jīng)定義過(guò)的SITE，在“Site Definition for...”面板中選擇“Web Server Info”。如果網(wǎng)頁(yè)是通過(guò)FTP方式上傳的話，將“Server Access”設(shè)為FTP，在FTP Host中添入FTP服務(wù)器的地址，在Host Directory中添入遠(yuǎn)程登入目錄，在Login中添入用戶(hù)名，再填好Password。經(jīng)過(guò)了以上的設(shè)定，就可以在Site面板中按Connect按鈕，當(dāng)Dreamweaver成功連入服務(wù)器后，Connect按鈕會(huì)自動(dòng)變?yōu)镈isconnect，并且在一旁亮起一個(gè)小綠燈。接著要做的事就是在要上傳的HTML文件上單擊右鍵，選擇“Put”即可。當(dāng)此HTML文件上傳成功后，狀態(tài)條中將顯示Put Depanding File，說(shuō)明Dreamweaver正在上傳這個(gè)HTML文件所調(diào)用的其他本地文件。不僅如此，Dreamweaver還可以直接下載服務(wù)器上的文件進(jìn)行修改，方法么，只要使試試Put旁的Get按鈕就明白了。

　　36. 實(shí)現(xiàn)用鼠標(biāo)指向鏈接時(shí)出現(xiàn)下劃線的效果

　　有些網(wǎng)頁(yè)的鏈接，原先沒(méi)有下劃線，你把鼠標(biāo)指向鏈接處，才會(huì)出現(xiàn)下劃線，鼠標(biāo)移掉下劃線就又沒(méi)有了。這種效果其實(shí)可以用層疊樣式表（CSS）來(lái)實(shí)現(xiàn)，在Dreamweaver中編輯層疊樣式表不用編寫(xiě)代碼，具體操作方法如下：

　　（1）在快速啟動(dòng)欄中點(diǎn)擊層疊樣式表按鈕（就是把鼠標(biāo)放上去顯示“show css styles”的那個(gè)按鈕），在彈出的CSS Styles面板上雙擊（none）；

　　（2）此時(shí)，可看到彈出的Edit Style Sheet 面板，在該面板上按New按鈕；

　　（3）再在彈出的New Style 面板上點(diǎn)取Redefine HTML Tag（重新定義HTML標(biāo)記）再在Tag中選擇“a”（超級(jí)鏈接標(biāo)記）標(biāo)記后按OK按鈕；（4）這時(shí)可看到彈出的Style dehinition for a 的對(duì)話框，在此對(duì)話框中可以設(shè)置超級(jí)鏈接的許多屬性，你可以按你的意愿設(shè)置，但我們這里主要是要去掉那討厭的下劃線，所以我們?cè)赿ecoration 屬性中選擇“none”，這樣就把下劃線去掉了；然后我們?cè)龠x擇顏色為：#339966。按ＯＫ按鈕返回到Edit Style Sheet 面板；

　　（5）在Edit Style Sheet 面板上再按New按鈕；

　　（6）在彈出的New Style 面板上點(diǎn)取Use CSS Selector ，再在該面板上的selector選擇框中選擇“a:hover”（定義當(dāng)鼠標(biāo)在超級(jí)鏈接上時(shí)鏈接的屬性），按OK按鈕；

　　（7）在彈出的Style dehinition for a:hover 的對(duì)話框中，我們?cè)赿ecoration 屬性中選擇“underline”，這樣就把下劃線又加上了；然后我們?cè)龠x擇顏色為：#FF3300。按OK按鈕返回到Edit Style Sheet 面板；

　　（8）在Edit Style Sheet 面板上再按Don按鈕，至此所有設(shè)置結(jié)束。