網頁製作技巧：你做的網頁試過“面目全非”嗎？

技巧|網頁 　　如果只是因為瀏覽器的設定改變，或瀏覽器不相容，使自己精心製作的網頁變得“面目全非”，多令人沮喪！這裡我們列出幾個網頁初學者常見的網頁布局問題以及解決方案……

　　如果只是因為瀏覽者改變了瀏覽器的設定，或者因為瀏覽器不相容，使自己精心製作的網頁變得“面目全非”，那多令人沮喪！下面我們以網頁愛好者的常用工具Dreamweaver（以下簡稱DW）為例，列出幾個網頁製作初學者較常見的網頁布局問題以及解決方案，希望對初學者們有所協助。

　　一、消除任意縮放瀏覽器視窗對網頁的影響

　　一番辛苦做出來的網頁，在全屏狀態下瀏覽一切正常。但在改變瀏覽視窗大小之後，網頁就變得"不堪入目"了，這是個很值得注意的問題。

　　問題的根源還得從網頁的布局說起，在DW中，網頁內容的定位一般是通過表格來實現的，解決表格的問題也就成功了大半。

　　大家應該注意到，在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型：百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這裡所說的百分比是指表格的高或寬設定為上層標記所佔地區高或寬的百分比，如在一個表格單元的寬度是600，在它裡面嵌入了另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，依此類推，如果在一個表格不是嵌於另一個表格單元中，則其百分比是相對於當時視窗的寬度的。IE瀏覽器中，隨便改動首頁視窗的大小時，表格的內容也隨之錯位、變形，就是因為表格的百分比也要隨著視窗的大小而改變成相應的百分比寬度。

　　自然，解決這個問題的辦法就是將表格寬度設定成固定寬度（也就是像素值）。另外如果外層表格已做好固定寬度設定，內層表格也可以適當使用百分比設定。清楚這個原則以後，如果出現類似的問題大家也知道怎麼解決。

　　二、讓網頁置中

　　說到了視窗大小就會順著路子想到解析度的問題，在800×600解析度下製作的網頁在1024×768解析度的機器上開啟，整個網頁就會跑到左邊；1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧？做起來費時，看起來也費勁。怎麼辦呢？

　　現在大多數網民都還在用800*600的解析度，所以我們一般可以以此解析度為主，要想讓網頁在1024*768時置中，只要在網頁原代碼的<body>後緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、儲存格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設的是百分比，那麼使用大於800×600的像素時，網頁就會拉寬，這樣網頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支援的表格寬度為780像素時不會出現捲軸。還有一點要注意的是不能用DW中的層來定位。

　　 <html>
　　 <head></head>
　　 <body topmargin=0 leftmargin=0>
　　 <center>
　　　　 <table cellspacing cellpadding width=760><tr><td></td></tr></table>
　　 </center>
　　 </body>
　　 </html>

　　三、定義固定大小的文字

　　大家都知道,在IE瀏覽器的功能設定中，有一個可以自由設定視窗內容字型大小的功能，這樣由於不同訪問者的設定習慣不同，呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字型，結果由於使用者對瀏覽器的額外設定，變的更大了，這時你的網頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。

　　如果使用了網頁中的CSS樣式表技術，就不會出現上述情況了。使用快速鍵"Shift+F11"開啟樣式表"CSS Style"編輯器，在視窗中單擊滑鼠右鍵執行"New CSS Style..."命令建立一個樣式表，然後在給出的列表中選擇"類型"選項，定義文字屬性參數（一般文字的大小選擇12px較為適宜）。完成後選擇網頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發生了變化。預覽時試試定義的文本字型尺寸還會不會隨瀏覽器的選擇字型大小而改變。

　　四、讓網頁適應不同的瀏覽器

　　瀏覽器的格局現在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的佔有率，在這種情況下我們設計的網頁只要相容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。

　　雖然沒有辦法做出讓所有瀏覽器都相容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：

　　不要混合使用層和表格排版，如果是父子關係，如層中表格，不在此原則範圍內。

　　內聯式的 CSS 在 Netscape Navigator 中經常會出現問題，使用鏈式或內嵌式。

　　有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 裡的效果。

　　對於只有幾個像素寬度或高度的層，改用圖片來實現。

　　避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。