假設下面是我們想要的外框，要先給他分解一下。分解完之後的每個區域，照理說可以用 div 來排版，但是根據先前有限的實驗結果，寬度的部份 div 沒辦法自動調整，除非出動 JavaScript 來幫忙動態設定。由於跟 JavaScript 很不熟，所以能不用就不用，打從心底認為 JavaScript 是一個很噁心的語言；但又不得不承認 JavaScript 在網頁上能變出很多花樣，解決很多問題。
過去做網頁，常用 table 來排版，到現在感覺用 div 來排版才跟的上時代，才能走在時代的尖端啊！不過為了不要用 JavaScript ，還是請 table 出來客串客串幫幫忙。人算不如天算，明明 Firefox 和 Chrome 都運作的好好的，IE 又出來亂了，IE 6 ~ IE 8 沒一個聽話的。table 都用下去了，只好勉為其難的再加個 JavaScript 來治治 IE 的問題。
根據第六感，要能讓外框可以自由伸縮應該是要這樣分解吧，總共分成 13 個部份。其中 (2) (4) 只能先指定它們的高度 ( 60 px)，寬度則讓它在瀏覽器上顯示時自動調整，由於不曉得到時候中間的圖片是多寬，所以 (2) (4) 的背景設定為 repeat-x。
網頁 css 的部份如下。
網頁圖片的檔案當然是越小越好，雖然說現在網路的頻寬也沒在怕的，但是要愛地球，要節能減碳，所以可以 repeat-x 或 repeat-y 的部份，只要準備足夠讓他重複的部份就夠了。舉例來說，#frame_top_2 和 #frame_middle_1 ，只要下面這兩小張圖就綽綽有餘了。
至於網頁的 html 如下，好乾淨！！
基本上，Firefox 和 Chrome 已經可以用了，但是 IE 的兄弟姊妹整個不吃這一套，完全不想自己調整寬度。還是其實有不用 JavaScript 就可以解決的方法…!?
總之，都到了這個地步，就硬幹吧，JavaScript 要做的事情：
(1) 等選定的圖片完整載入
(2) 取得圖片的寬度
(3) 平均分配寬度給 frame_top2 和 frame_top_4 兩個 <td>
原始的 JavaScript 是很噁心，但是當接觸過 jQuery 後，我發現我愛上它了，還有種想好好學 JavaScript 的衝動，怎麼可以這麼好用、好上手、又好玩呀！！有了 jQuery，就算是 JavaScript 幼幼班的程度，也能夠輕鬆的動態控制網頁。就如官方網站給他的頭銜一樣：jQuery: The Write Less, Do More, JavaScript Library。
下回再說明怎麼靠 jQuery 和 JavaScript 聯手解決這個顯示寬度問題。
（其實搞不好人家 IE 沒問題。）
No comments:
Post a Comment