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