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