DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 你的網頁“面目全非”過嗎
你的網頁“面目全非”過嗎
編輯:Dreamweaver相關     
  如果只是因為浏覽者改變了浏覽器的設置,或者因為浏覽器不兼容,使自己精心制作的網頁變得“面目全非”,那多令人沮喪!下面我們以網頁愛好者的常用工具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 代替。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved