- 單欄式版面設計
由於平板手機的興起，很多時候網站的設計主要是提供給手機用戶瀏覽的時候，都會使用單欄式設計！因為單欄式設計比較不用考慮到欄寬的問題， 可以讓整個版面佔滿。不過，這種設計通常得要考慮到導覽列的位置。一般來說，導覽列會簡單的出現在正上方，有的還會將導覽列固定在螢幕上。 例如底下就是一個新聞網站的行動版網頁示意：
一般來說，單欄式的設計，整體設計的寬度會是瀏覽器寬度的 100%，然後各欄位寬度會隨著螢幕的放大或縮小而改變。不過這裡就有個地方要注意了！ 如果寬度是可變的，那高度呢？舉例來說，如果我們寬度設計 100%，高度設計為寬度的 75%，那要怎麼處理？我們在第三堂課 3.2 就曾經講過一個單位， 那就是 vh, vw, vmax, vmin 等單位數值，這四個單位都是針對瀏覽器 (viewport) 來規範的，因此，如果你需要寬、高比固定， 而且以瀏覽器寬度為依據時，就可以透過 vw 來設計了！
例題 8.2.A：請依據 這個檔案 的內容，加上如下的設計來處理一個單欄式網頁：
- 請呼叫 /www/web2/include/overall.css 這個網站整體設定風格檔
- 其他底下的所有設計項目，請使用 class 來處理，且放置於網頁最上方的 <style> 內
- 先針對 body 的項目，設定好 padding, margin 都是 0 的設計
- 針對 nav 的導覽列設計中，請拿出 unit07-1-3.html 的結果來修改：
- 針對 nav 取消最小寬度，改為寬度為 100vw、對齊改變為靠左、增加背景圖示為與按鈕相同的漸層圖層、位置為 fixed，且距離上方為 0 像素
- 在 li:hover 與 li.active 的效果中，加入背景色為白色 (否則不會有特效)
- li 的寬度修改一下，成為 80 像素即可。
- 針對 header 的設計中：
- 寬度為 100vw，高度為 50px，外部留白需要考慮導覽列帶來的效果，因此上、右、下、左為 40px 0 10px 0，內部留白各保留 5 像素、 若有給底色則請修改文字顏色、字體大小 16 點字、給予文字陰影、文字置中排列。
- 針對 mypro 的設計，拿出 unit06-5-1.html 的 style 來修改：
- width 與 height 均改為 100vw 這樣的格式。
你可以嘗試將畫面縮小到一般手機的大小，然後測試一下瀏覽器寬高的變化。如果發現到導覽列被蓋住了，該怎麼處理呢？ (hint: z-index)。
- 雙欄式版面設計
本教材網以及前一堂課 7.5 的例題，最終就是使用雙欄式設計的概念來處理整個網站的。不過該設計大概都是以 PC 版的瀏覽為範例去設計的， 增加一個側邊的子導覽列來提供使用者一個更方便的按鈕選擇，感覺會更貼心與方便。
有一種雙欄式設計的變形，就是左邊欄位不變動，右邊欄位為可滑動式的樣式，這種樣式通常也用在拍賣網，因為左側的導覽列內容較少， 或者是左側導覽列也是能夠上下滑動的樣式，來提供其他選擇。就讓我們來測試一下這種樣式吧！
例題 8.2.B：請依據 這個檔案 的內容來設計，該內容中， nav 與 page 分別為左側與右側的欄位， 其中 nav 是固定在左側而不會隨著螢幕滑動的喔！
- 請將 unit08_2_1.html 內 style 的項目通通複製到這個檔案裡面來
- 針對 nav 的設計修改項目有：
- 寬度改為 200px，高度則使用全視窗高度 100vh 這樣的單位，位置固定在左、上方
- 關於字體，給予背景色 darkgreen，給予文字淡黃色
- nav > ul 的寬度請給予 100% 吧！(不應該是 100vw 喔！)
- nva > ul > li 的顯示效果改為 block，寬度改為 100%，不要有 margin 了！
- 增加 page 的類別設計：
- 給予左側留白 220px ，且給予框線 1px solid gray 測試一下
- 針對 header 的設計中，修改寬度成為 100% 而不是 100vw 了，且取消外部留白的設計、其他不變
檔名就設定為 /www/web2/unit08-2-2.html，完成的圖示會有點像底下這樣：
你可以拉動一下瀏覽器的上下移動，就可以發現左側的樣式是不變的，右側則會被上下滑動這樣。不過，如果畫面減縮的太嚴重，則此時左側的某些項目會不見。 此時，你可以使用 overflow 來產生 bar 即可！
- 三欄式版面設計
三欄式版面設計，最可以提供參考的就是 Facebook 了！畫面一拉寬，整個就是三欄式的樣式，左側是你的個人慣用連結資料，中間的部份是留言， 右側則是其他相關連結區塊，甚至可以放置廣告資料等等。然後在三欄內部，再依據需求一個一個的小方塊疊上去，就成了 FB 最常見的樣式囉！
沒有留言:
張貼留言