網頁布局問題以及解決方法（初學者必看）(二)
2011-09-03 文章來源: 建站學
三.網頁布局的技術
1.層疊樣式表的應用
在新的HTML4.0標準中，CSS(層疊樣式表)被提出來，它能完全精確的定位文本和圖片。CSS對于初學者來說顯得有點復雜，但它的確是一個好的布局方法。你曾經無法實現(xiàn)的想法利用CSS都能實現(xiàn)。目前在許多站點上，層疊樣式表的運用是一個站點優(yōu)秀的體現(xiàn)。你可以在網上找到許多關于CSS的介紹和使用方法。 當然，日趨炙熱的WEB標準（XHTML+CSS）開是強烈推崇內容和表現(xiàn)相分離，并為下一代數(shù)據(jù)交換XML做為過渡（即XHTML）。
2.表格布局
表格布局好像已經成為一個標準，隨便瀏覽一個站點，它們一定是用表格布局的。表格布局的優(yōu)勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響。而且表格在定位圖片和文本上比起用CSS更加方便。表格布局唯一的缺點是，當你用了過多表格時，頁面下載速度受到影響。對于表格布局，你可以隨便找一個站點的首頁，然后保存為HTML文件，利用網頁編輯工具打開它(要所見即所得的軟件)，你會看到這個頁面是如何利用表格的。
3.框架布局
不知道什么原故，框架結構的頁面開始被許多人不喜歡，可能是因為它的兼容性。但從布局上考慮，框架結構不失為一個好的布局方法。它如同表格布局一樣，把不同對象放置到不同頁面加以處理，因為框架可以取消邊框，所以一般來說不影響整體美觀。
我今天來介紹的布局指南并不是全部的網頁布局技術，從某種意義上來說，我想引導你在制作網頁的時侯，怎樣把圖片和文本放置的恰到好處，而且如何擁有一個跳越的設計思維。
如果使用了網頁中的CSS樣式表技術，就不會出現(xiàn)上述情況了。使用快捷鍵"Shift F11"打開樣式表"CSS style"編輯器，在窗口中單擊鼠標右鍵執(zhí)行"New CSS style..."命令新建一個樣式表，然后在給出的列表中選擇"類型"選項，定義文字屬性參數(shù)（一般文字的大小選擇12px較為適宜）。完成后選擇網頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發(fā)生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網頁適應不同的瀏覽器
瀏覽器的格局現(xiàn)在是兩分天下，一分是IE，另一分是NetScape，在國內Ie有絕對的占有率，在這種情況下我們設計的網頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站，但只要注意以下幾點，做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果：
不要混合使用層和表格排版，如果是父子關系，如層中表格，不在此原則范圍內。
內聯(lián)式的 CSS 在 Netscape Navigator 中經常會出現(xiàn)問題，使用鏈式或內嵌式。
有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
對于只有幾個像素寬度或高度的層，改用圖片來實現(xiàn)。
避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
第二種方法：做兩個適合不同分辨率的頁面
一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就可以實現(xiàn)跳轉了：
--------------------------------------------------
解決分辨率問題在Dreamweaver中沒有此項功能，我們只能手動加入一段Javascript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入以下代碼：
< script language=JavaScript>
< !－－
function redirectPage(){
var url800x600=〃index－ie.html〃; //定義兩個頁面，此處假設index－ex.html和1024－ie.html同change－ie.html在同一個目錄下
var url1024x768=〃1024－ie.html〃;
if ((screen.width==800) ＆＆ (screen.height==600)) //在此處添加screen.width、screen.height的值可以檢測更多的分辨率
window.location.href= url800x600;
else if ((screen.width==1024) ＆＆ (screen.height==768))
window.location.href=url1024x768;
else window.location.href=url800x600;
}
// －－>
< /script>
然后再在< body…>內加入onLoad=〃redirectPage()〃
最后，同樣地，在< body>和< /body>之間加入以下代碼來顯示網頁的工作信息：
< script language=JavaScript>
< !－－
var w=screen.width
var h=screen.height
document.write(〃系統(tǒng)已檢測到您的分辨率為:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃< /font>〃);
document.write(〃正在進入頁面轉換,請稍候…〃);
// －－>
< /script>
該文章來自《中國德育資源網》詳情見 http://www.516xz.cn/Article/wlkt/wzsj/jswz/200711/4998.html
