優勢多媒體前端互動設計 - RWD

響應式網頁設計

Responsive Web Design
  • 時數：30小時
  • 費用：NT$ 15,000
  • 點數：4.0

選擇查詢分區開課時間

地點 班號 日期 時間 報名
台北 651 班 2024/01/02 ~ 2024/01/08 每週一二三四五 09:00~16:00 報名
台中 651-RWDZT 班 2024/01/02 ~ 2024/01/08 每週一二三四五 09:00~16:00 報名 Live

目前查無開課時段

詳細開課時間請洽詢業務
新竹、台中、高雄如有上課需求，請參考台北開課日期，洽當地服務人員依需求加開遠距開課日期

聯絡恆逸

教材

優勢精選教材

課程目標

HTML5與CSS3的問世，響應式網頁(Responsive Web Design)因應而生。

關於響應式網頁，簡單的來說是讓網站可以直接自動針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時，整個網頁頁面會對應不同的解析度，而有不同的內容呈現方式。在這樣的趨勢之下，Responsive Web Design響應式網頁設計將是未來網站設計的基本需求。

響應式網頁設計(Responsive Web Design)其背後需要的技術是【CSS】、【HTML5】、【JavaScript】，為了讓非程式開發的設計師也能快速開發設計響應式網頁，課程先使用Dreamweaver的CSS 3與Bootstrap 相關程式碼編輯功能，從中有效率了解響應式網頁規則與架構，因此就算無程式基礎也能順利表現出完整度、互動性更高的響應式網站，跟上目前業界網站設計流行動脈。課程中也著重程式碼的理解與培養，最後會以Visual Studio Code編輯響應式網頁，以利往後職場上能與程式設計師溝通合作，更能不斷自我提升專業能力。

適合對象

須有Dreamweaver與CSS基礎，欲學習響應式網頁設計的設計師

課程內容

  1. 關於響應式網頁設計

    • 1-1 什麼是響應式網頁
    • 1-2 響應式網頁設計趨勢
    • 1-3 響應式網頁的構成

  2. Dreamweaver與Bootstrap製作響應式網頁的準備

    • 2-1 善用CSS設計工具面板
    • 2-2 響應式網頁必備的HTML5與CSS3應用
    • 2-3 建構Bootstrap環境建立頁面
    • 2-3-1 下載Bootstrap
    • 2-3-2 Bootstrap基本版型
    • 2-3-3 其他更多的版面區塊編排
    • 2-3-4 Dreamweaver CC內建Bootstrap

  3. 使用Bootstrap打造響應式網頁內容

    • 3-1 Bootstrap通用類別
    • 3-1-1 文字顏色與背景色
    • 3-1-2 文字屬性
    • 3-1-3 標題
    • 3-1-4 顯示標題
    • 3-1-5 邊界與內距屬性設定
    • 3-1-6 表格(Table)
    • 3-1-7 圖片區(Figures)與圓角
    • 3-1-8 邊框(Borders)

    • 3-1-9 浮動 (float)

    • 3-2 Bootstrap元件素材

    • 3-2-1 標籤 (Badge)
    • 3-2-2按鈕 (Buttons)
    • 3-2-3麵包屑 (Breadcrumb)
    • 3-2-4折疊切換內容 (Accordion)
    • 3-2-5標籤切換內容(Tab)
    • 3-2-6圖片(Responsive image)
    • 3-2-7廣告大屏幕 (Jumbotron)
    • 3-2-8多媒體物件(Media Object)

    • 3-2-9內嵌 (Embeds)

    • 3-3 Bootstrap響應式導覽列

    • 3-3-1 基本型收合導覽按鈕
    • 3-3-2 包含彈出選單的導覽按鈕列

    • 3-3-3 其他導覽列功能

    • 3-4 Card與Carousel應用

    • 3-4-1 卡片應用
    • 3-4-2 圖文框排列版面
    • 3-4-3 圖文內頁編排
    • 3-4-4 滑動圖片版型
    • 3-4-5 滿版大圖滑動控制板型
    • 3-4-6 圖片內容版面

  4. 單頁捲動響應式頁面

    • 4-1 按鈕控制單頁捲動版型
    • 4-2 側邊收合按鈕的單頁捲動版型
    • 4-3 單頁捲動版型應用
    • 4-4 單頁捲動版型與互動效果

  5. 使用程式碼編輯器設計開發響應式網頁

    • 5-1 下載安裝Visual Studio Code
    • 5-2 安裝擴充套件才能順利開始
    • 5-3 使用VS Code跟程式開發一起製作響應式網頁

學會技能

  1. 清楚了解Bootstrap 組件功能與使用技巧
  2. 能獨立完成響應式網頁
  3. 具有CSS與響應式網頁程式基礎，並能與程式設計師溝通合作
  4. 能以Visual Studio Code編輯響應式網頁

備註事項

學生優惠價：參加校園IT職涯學習護照方案，享有5折優惠價NT$7,500元

課程範例：