【行動網頁規劃】Responsitive Design 實戰設計(V) 區塊

Hi! 各位朋友好,我是小蔡老師,最近已經寫了很多其他單元的教學文章,讓我們稍為回歸一下行動網站規劃教學,這次我們主要是將響應式網站基本版型簡單的建制出來,如果您想學習更深入的內容,歡迎各位朋友參加小蔡老師與職訓單位合作的課程優! 那費話不多說我們就承繼上個單元直接開始吧!

1. 在實做前,先簡單的準備一些基本格式,下方為HTML5頁面設定
001 拷貝

2. CSS設定
a. Reset CSS
002 拷貝

b. Reset CSS後 頁面基本設定
003 拷貝

c. CSS區塊基本設定
004 拷貝

3.以上準備好以後網站顯示狀態
005 拷貝

4.如同前述傳統CSS區塊教學先建立基礎區塊,這邊請注意一下CSS包覆情況與往常有些不同可從第一張HTML圖取得
006 拷貝

5.CSS基本架構設定好後,按下F5迴轉一下瀏覽器,網站應該會顯示如圖
007 拷貝

6.於CSS架構表加入一些設定舉例.間距與背景色 讓區塊更容易分辨,並且可以假定往後插入圖片不會太過滿版造成圖面太過複雜
008 拷貝

7.同上重新迴轉一下
009 拷貝

8.這邊因為看不到區塊線所以可能會覺得很呆版,另外分別加入區塊線,如果加入網站圖形到時只需要把此語法整段刪除即可
010 拷貝

9.重新迴轉網站會有固定區塊顯示
011 拷貝

10.這邊可能有很多朋友已經發現小蔡老師並沒有針對側邊欄加入區塊線,這邊因為有時候會加入網站廣告或者簡單的快速選單,所以這邊另外製作區塊,於行動裝置移動時
也會整塊位移至方便操作的位置,以下為製作的HTML設定內容
012 拷貝

11.設定側邊欄區塊基本設定
013 拷貝

12.此時網站就會顯示側邊欄區塊
014 拷貝

13. 所謂的響應式RWD設計簡單講就是感應視窗解析度大小去判斷,網頁便會隨視窗大小改變網站顯示方式,下圖為未設定Media QUERIES設定時,網站如同傳統網站不會隨視窗更動而有所更動
015 拷貝

14.加入Media QUERIES寬度設定與內建設定(第一階段)
016 拷貝

15.操作顯示

16.視窗會自動彈縮到洽當顯示方式
018 拷貝

17.加入基礎行動裝置Media QUERIES設定
019 拷貝

18.此處的Media QUERIES設定僅是針對1280px 700px 480px 三種尺寸的行動裝置與桌面裝置最佳顯示設定非完整制定
a. 1280px 網站顯示
020 拷貝

b. 700px 網站顯示
021 拷貝

c. 480px 網站顯示(這邊可以發現最小狀態時側邊欄會自動移位到下方網站會自動規劃成長型介面)
022 拷貝

(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問