slider

網頁設計筆記

Web Design

首頁/網頁設計講義

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

RWD多頁網頁前置作業說明

RWD多頁網站架構說明｜

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

介紹頁面《關於我們》

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

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

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

  2. 左右雙欄設計｜設定

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

  3. 錨點連結

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

  4. 內容圖文左右編排，浮動設定

  5. 編號清單

    6. 標題或內容以＜ol＞＜li＞編號清單製作，自動產生編號項目 。

  6. 導覽標題CSS設定

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

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

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

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

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

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

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

    修改後之預覽。

頂圖animation圖片微動畫設定

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

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

    3. CSS3動畫效果語法說明

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