av网站免费线看精品_国产做a爱视频免费不_深爱激情网开心五月天_伊人五月天在线视频网

 
網(wǎng)頁制作初學(xué)者較常見的網(wǎng)頁布局問題以及解決方法
發(fā)布時(shí)間:2008-04-23   瀏覽次數(shù):1226729
網(wǎng)頁制作初學(xué)者較常見的網(wǎng)頁布局問題以及解決方法 種方法:做一個(gè)網(wǎng)頁解決問題(長了點(diǎn))   如果只是因?yàn)闉g覽者改變了瀏覽器的設(shè)置,或者因?yàn)闉g覽器不兼容,使自己精心制作的網(wǎng)頁變得"面目全非",那多令人沮喪!下面我們以網(wǎng)頁愛好者的常用工具Dreamweaver(以下簡稱DW)為例,列出幾個(gè)網(wǎng)頁制作初學(xué)者較常見的網(wǎng)頁布局問題以及解決方法,希望對(duì)初學(xué)者們有所幫助。   一、任意縮放瀏覽器窗口對(duì)網(wǎng)頁的影響   一番辛苦做出來的網(wǎng)頁,在全屏狀態(tài)下瀏覽一切正常。 但在改變?yōu)g覽窗口大小之后,網(wǎng)頁變得"不堪入目"了,這是個(gè)很值得注意的問題。   問題的根源還得從網(wǎng)頁的布局說起,在DW中,網(wǎng)頁內(nèi)容的定位一般是通過表格來實(shí)現(xiàn)的,解決表格的問題也成功了大半。   大家應(yīng)該注意到,在DW中表格屬性面板的高寬設(shè)定選擇上提供了兩種不同類型:百分比和像素值。百分比的使用將會(huì)產(chǎn)生前面說到的那個(gè)毛病。這里所說的百分比是指表格的高或?qū)捲O(shè)置為上層標(biāo)記所占區(qū)域高或?qū)挼陌俜直,如在一個(gè)表格單元的寬度是600,在它里面嵌入了另外一個(gè)表格,表格寬度占表格單元的50%,則這個(gè)表格的寬度為300,依此類推,如果在一個(gè)表格不是嵌于另一個(gè)表格單元中,則其百分比是相對(duì)于當(dāng)時(shí)窗口的寬度的。IE瀏覽器中,隨便改動(dòng)主頁窗口的大小時(shí),表格的內(nèi)容也隨之錯(cuò)位、變形,是因?yàn)楸砀竦陌俜直纫惨S著窗口的大小而改變成相應(yīng)的百分比寬度。   自然,解決這個(gè)問題的辦法是將表格寬度設(shè)置成固定寬度(也是像素值)。另外如果外層表格已做好固定寬度設(shè)置,內(nèi)層表格也可以適當(dāng)使用百分比設(shè)置。清楚這個(gè)原則以后,如果出現(xiàn)類似的問題大家也知道怎么解決。   二、讓網(wǎng)頁居中   說到了窗口大小會(huì)順著路子想到分辨率的問題,在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機(jī)器上打開,整個(gè)網(wǎng)頁會(huì)跑到左邊;1024×768分辨率的網(wǎng)頁在800×600分辨率的機(jī)器上有時(shí)也會(huì)變得"不堪入目"。兩種分辨率各做一個(gè)吧?做起來費(fèi)時(shí),看起來也費(fèi)勁。怎么辦呢?   現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率,所以我們一般可以以此分辨率為主,要想讓網(wǎng)頁在1024*768時(shí)居中,只要在網(wǎng)頁原代碼的后緊加一句,前加一句OK了。不過有幾個(gè)問題這是要注意一下,個(gè)是上面說到的百分比的問題,表格、單元格的寬度單位要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比,那么使用大于800×600的像素時(shí),網(wǎng)頁會(huì)拉寬,這樣網(wǎng)頁可能會(huì)變形。在中加入leftmargin=0,即這種情況下,800×600支持的表格寬度為780像素時(shí)不會(huì)出現(xiàn)滾動(dòng)條。還有一點(diǎn)要注意的是不能用DW中的層來定位。                             三、定義固定大小的文字   大家都知道,在IE瀏覽器的功能設(shè)置中,有一個(gè)可以自由設(shè)置窗口內(nèi)容字體大小的功能,這樣由于不同訪問者的設(shè)置習(xí)慣不同,呈現(xiàn)在他們面前的網(wǎng)頁有時(shí)也會(huì)不不相同。比如你可能本來設(shè)計(jì)時(shí)用的是2號(hào)字體,結(jié)果由于用戶對(duì)瀏覽器的額外設(shè)定,變的更大了,這時(shí)你的網(wǎng)頁也可能變得"不堪入目"。雖然不是你的錯(cuò),但客戶是上帝。   如果使用了網(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有的占有率,在這種情況下我們?cè)O(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 里的效果。   對(duì)于只有幾個(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)換,請(qǐng)稍候…〃);  // -->  < /script>
立即預(yù)約