作者 主題: 9、RWD響應式網頁設計-index 首頁  (閱讀 603 次)

0 會員 與 1 訪客 正在閱讀本文。

離線 andy

  • 管理員
  • 正式會員
  • *****
  • 積分 +1/-0
  • 性別: 男
    • 原來如此
9、RWD響應式網頁設計-index 首頁
« 於: 七月 22, 2019, 01:55:21 下午 »
RWD 響應式網頁設計教學其實適用在任何網站,只是有些人因為不懂html與css,自然做起來就有點吃力,RWD 響應式網頁設計不過就是將寬度用css的媒體查詢來自動調整,其他的樣式並不需要改變,只要懂得簡單的html和css3應該就沒太大問題,很多指令不需要死記,準備好手冊隨時待查即可...

在動態網站裡除了前面提過的頁首和頁尾之外,就剩下內容區了,頁首和頁尾整個網站共用,但是網頁內容是隨著頁面不同而顯示相應資料,因此需要逐頁檢查修改,lativ 的首頁內容區分成三欄,為了全站方便控制整體寬度,因此在 page_header.lbi 最後和 page_footer.lbi 最前加上 container div 以便包裹整個內容區
代碼: [選擇]
<div class="container" style="min-height: 320px;">
    內容區...
</div>
至於內容區的布局是為三欄,因此在PC以3、6、3的布局,而在平板或手機則變成都是12,也就是上下堆疊的方式排列:
代碼: [選擇]
        <div class="col-md-3" id="indexLeft">
            左側邊欄...
        </div>
        <div class="col-md-6" id="indexMiddle">
            主區域...
        </div>
        <div class="col-md-3" id="indexRight">
            右側邊欄...
        </div>


購物系統本身就要顯示大量商品圖片,雖然是使用縮圖不過加起來也不小,除了消耗流量更容易拖慢網頁載入速度,因此應斟酌商品圖片的顯示數量,廣告位若使用圖片,建議用  SVG 格式的向量圖,可編輯區域除非是公用模板,否則不建議設置,如果設置了可編輯區域,需注意若後台進行模板設置,相應的DWT檔也會被重寫


首頁主廣告使用FLASH播放器在PC是沒有問題的,但在手機或平板中是無法播放的,因此必須改用 javascript 的圖片輪播,同時也支援寬度自動適應...
以這個模板來說,圖片的最大寬度為550px,高度則沒限制,但必須每張圖尺寸都一樣,否則會如圖一樣:
LINE ID:ecshop_weshop
Email:andy@we-shop.net
聯絡我:https://we-shop.net/contactus.php