RWD 多頁網頁編輯 (二)|介紹頁面《關於我們》| 頂圖微動畫設定

RWD多頁網頁前置作業說明

RWD多頁網站架構說明|


作業範例網址與檔案下載
  1. RWD|多頁式專題網站|範例網址
  2. 範例下載

介紹頁面《關於我們》

  1. 《關於我們》頁面介紹

  2. 一般網站,進入首頁之後,首先選取的通常是介紹頁面,介紹這個網站的簡要介紹,常以『關於我們』命名,以快速地了解網站大致內容與主題核心。此版型也適用於任何介紹內容的頁面,可自行彈性運用。

    http://mepopedia.com/~jinjin/web/final/about.html


  3. 左右雙欄設計|設定

  4. 本範例採雙欄式設計,左側為分類選項標題,右側為相對應之內容,分別為col-md-3,col-md-9,兩欄之數字及比例可自行調整分配,加總為12即可。


  5. 錨點連結

  6. 左側標題導覽列以<ul><li>項目清單製作,並以錨點連結的方式,將左側標題與右側內容做對應連結,如第一個標題1.傳說導覽,連結到 #sec0 ,對應內容之 id=“sec0” 。


  7. 內容圖文左右編排,浮動設定


  8. 編號清單

  9. 標題或內容以<ol><li>編號清單製作,自動產生編號項目 。


  10. 導覽標題CSS設定

  11. 查看about.html中,導覽標題的設定為class knownledgebase,則可至style.css搜尋設定位置,並加以修改超連結標題以及滑鼠移過去之效果。


  12. 以檢查搜尋方放,修改導覽標題CSS設定

  13. 也可在網頁預覽狀態,在欲修改之項目中,按右鍵選擇『檢查』,即可查看css之檔案與行數,進入style.css中修改。


    在『主導覽列』上按右鍵選擇『檢查』


    可至style.cc的第2538行修改,也可先在瀏覽器上查看修改效果。


    至style.cc的第2538行,調整底色。


    其他導覽項目可至style.cc的第2506行修改。


    修改後之預覽。


頂圖animation圖片微動畫設定

  1. about.html,頂圖圖片微動畫之位置,與原始碼。

  2. style.css,頂圖圖片微動畫之位置,與原始碼。

  3. CSS3動畫效果語法說明


  4. 圖片微動畫遮罩透明度設定