QQ咨詢(xún)
官方微信掃一掃
宏順傳媒官方微信二維碼

宏順視角

關(guān)注互聯(lián)網(wǎng),關(guān)注技術(shù)開(kāi)發(fā),透析與分享移動(dòng)互聯(lián)網(wǎng)行業(yè)最新動(dòng)態(tài)


全屏自適應網(wǎng)站設計特點(diǎn)

2014-07-01 07:15:41

全屏自適應在青島網(wǎng)站建設中比較廣泛,做好了全屏自適應設置后,能夠避免網(wǎng)頁(yè)在不用的瀏覽器下變形的問(wèn)題,例如在1024*768或者800*600的分辨率下可以自動(dòng)調整成適用于該客戶(hù)端分辨率的大小。第一種方法:做一個(gè)網(wǎng)頁(yè)解決問(wèn)題(長(cháng)了點(diǎn))如果只是因為瀏覽者改變了瀏覽器的設置,或者因為瀏覽器不兼容,使自己精心制作的網(wǎng)頁(yè)變得"面目全非",那多令人沮喪!下面我們以網(wǎng)頁(yè)愛(ài)好者的常用工具Dre...

全屏自適應在青島網(wǎng)站建設中比較廣泛,做好了全屏自適應設置后,能夠避免網(wǎng)頁(yè)在不用的瀏覽器下變形的問(wèn)題,例如在1024*768或者800*600的分辨率下可以自動(dòng)調整成適用于該客戶(hù)端分辨率的大小。

第一種方法:做一個(gè)網(wǎng)頁(yè)解決問(wèn)題(長(cháng)了點(diǎn))

如果只是因為瀏覽者改變了瀏覽器的設置,或者因為瀏覽器不兼容,使自己精心制作的網(wǎng)頁(yè)變得"面目全非",那多令人沮喪!下面我們以網(wǎng)頁(yè)愛(ài)好者的常用工具Dreamweaver(以下簡(jiǎn)稱(chēng)DW)為例,列出幾個(gè)網(wǎng)頁(yè)制作初學(xué)者較常見(jiàn)的網(wǎng)頁(yè)布局問(wèn)題以及解決方法,希望對初學(xué)者們有所幫助。

一、消除任意縮放瀏覽器窗口對網(wǎng)頁(yè)的影響

一番辛苦做出來(lái)的網(wǎng)頁(yè),在全屏狀態(tài)下瀏覽一切正常。但在改變?yōu)g覽窗口大小之后,網(wǎng)頁(yè)就變得"不堪入目"了,這是個(gè)很值得注意的問(wèn)題。

問(wèn)題的根源還得從網(wǎng)頁(yè)的布局說(shuō)起,在DW中,網(wǎng)頁(yè)內容的定位一般是通過(guò)表格來(lái)實(shí)現的,解決表格的問(wèn)題也就成功了大半。

大家應該注意到,在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類(lèi)型:百分比和像素值。百分比的使用將會(huì )產(chǎn)生前面說(shuō)到的那個(gè)毛病。這里所說(shuō)的百分比是指表格的高或寬設置為上層標記所占區域高或寬的百分比,如在一個(gè)表格單元的寬度是600,在它里面嵌入了另外一個(gè)表格,表格寬度占表格單元的50%,則這個(gè)表格的寬度為300,依此類(lèi)推,如果在一個(gè)表格不是嵌于另一個(gè)表格單元中,則其百分比是相對于當時(shí)窗口的寬度的。IE瀏覽器中,隨便改動(dòng)主頁(yè)窗口的大小時(shí),表格的內容也隨之錯位、變形,就是因為表格的百分比也要隨著(zhù)窗口的大小而改變成相應的百分比寬度。

自然,解決這個(gè)問(wèn)題的辦法就是將表格寬度設置成固定寬度(也就是像素值)。另外如果外層表格已做好固定寬度設置,內層表格也可以適當使用百分比設置。清楚這個(gè)原則以后,如果出現類(lèi)似的問(wèn)題大家也知道怎么解決。

二、讓網(wǎng)頁(yè)居中

說(shuō)到了窗口大小就會(huì )順著(zhù)路子想到分辨率的問(wèn)題,在800×600分辨率下制作的網(wǎng)頁(yè)在1024×768分辨率的機器上打開(kāi),整個(gè)網(wǎng)頁(yè)就會(huì )跑到左邊;1024×768分辨率的網(wǎng)頁(yè)在800×600分辨率的機器上有時(shí)也會(huì )變得"不堪入目"。兩種分辨率各做一個(gè)吧?做起來(lái)費時(shí),看起來(lái)也費勁。怎么辦呢?

現在大多數網(wǎng)民都還在用800*600的分辨率,所以我們一般可以以此分辨率為主,要想讓網(wǎng)頁(yè)在1024*768時(shí)居中,只要在網(wǎng)頁(yè)原代碼的<body>后緊加一句<center>,</body>前加一句</center>就OK了。不過(guò)有幾個(gè)問(wèn)題這是要注意一下,第一個(gè)就是上面說(shuō)到的百分比的問(wèn)題,表格、單元格的寬度單位最好要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設的是百分比,那么使用大于800×600的像素時(shí),網(wǎng)頁(yè)就會(huì )拉寬,這樣網(wǎng)頁(yè)可能會(huì )變形。在<body>中加入leftmargin=0,即<body leftmargin=0>這種情況下,800×600支持的表格寬度為780像素時(shí)不會(huì )出現滾動(dòng)條。還有一點(diǎn)要注意的是不能用DW中的層來(lái)定位。

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

三、定義固定大小的文字

大家都知道,在IE瀏覽器的功能設置中,有一個(gè)可以自由設置窗口內容字體大小的功能,這樣由于不同訪(fǎng)問(wèn)者的設置習慣不同,呈現在他們面前的網(wǎng)頁(yè)有時(shí)也會(huì )不不相同。比如你可能本來(lái)設計時(shí)用的是2號字體,結果由于用戶(hù)對瀏覽器的額外設定,變的更大了,這時(shí)你的網(wǎng)頁(yè)也可能變得"不堪入目"。雖然不是你的錯,但客戶(hù)是上帝。

如果使用了網(wǎng)頁(yè)中的CSS樣式表技術(shù),就不會(huì )出現上述情況了。使用快捷鍵"Shift+F11"打開(kāi)樣式表"CSS style"編輯器,在窗口中單擊鼠標右鍵執行"New CSS style..."命令新建一個(gè)樣式表,然后在給出的列表中選擇"類(lèi)型"選項,定義文字屬性參數(一般文字的大小選擇12px較為適宜)。完成后選擇網(wǎng)頁(yè)編輯窗中的文本,單擊新的樣式表名稱(chēng),可以看到選中的文本發(fā)生了變化。預覽時(shí)試試定義的文本字體尺寸還會(huì )不會(huì )隨瀏覽器的選擇字體大小而改變。

四、讓網(wǎng)頁(yè)適應不同的瀏覽器

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

雖然沒(méi)有辦法做出讓所有瀏覽器都兼容的網(wǎng)站,但只要注意以下幾點(diǎn),做出來(lái)的網(wǎng)頁(yè)在各個(gè)瀏覽器都中能達到比較好的顯示效果:

不要混合使用層和表格排版,如果是父子關(guān)系,如層中表格,不在此原則范圍內。

內聯(lián)式的 CSS 在 Netscape Navigator 中經(jīng)常會(huì )出現問(wèn)題,使用鏈式或內嵌式。

有時(shí)需要在空層插入表格或者透明圖片,以保證在 Netscape Navigator 里的效果。

對于只有幾個(gè)像素寬度或高度的層,改用圖片來(lái)實(shí)現。

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

第二種方法:做兩個(gè)適合不同分辨率的頁(yè)面,一個(gè)是800×600,一個(gè)是1024×768,在800×600的頁(yè)面中加入一下代碼就可以實(shí)現跳轉了:

解決分辨率問(wèn)題在Dreamweaver中沒(méi)有此項功能,我們只能手動(dòng)加入一段Javascript代碼。首先在change-ie.html或change-nc.html頁(yè)面代碼中的< head>和< /head>中加入以下代碼:

< script language=JavaScript>
< !--
function redirectPage(){
var url800x600=〃index-ie.html〃; //定義兩個(gè)頁(yè)面,此處假設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…>內加入onLoad=〃redirectPage()〃
最后,同樣地,在< body>和< /body>之間加入以下代碼來(lái)顯示網(wǎng)頁(yè)的工作信息:
< script language=JavaScript>
< !--
var w=screen.width
var h=screen.height
document.write(〃系統已檢測到您的分辨率為:〃);
document.write(〃< font size=3 color=red>〃);
document.write(w+〃×〃+h);
document.write(〃< /font>〃);
document.write(〃正在進(jìn)入頁(yè)面轉換,請稍候…〃);
// -->
< /script>


 

相關(guān)閱讀




在線(xiàn)咨詢(xún)
在線(xiàn)客服
微信咨詢(xún)
咨詢(xún)
試用
4.0