Adobe - RWD_1

響應式網頁設計

Responsive Web Design
  • 時數：24小時
  • 費用：NT$ 12,000
  • 點數：3.5

選擇查詢分區開課時間

地點 班號 日期 時間 報名
台北 654 班 2024/10/07 ~ 2024/10/11 每週一二三四五 09:00~16:00 報名
台北 24517 班 2024/10/22 ~ 2024/11/14 每週二四 18:30~21:30 報名
台北 655 班 2024/12/19 ~ 2024/12/24 每週一二三四五 09:00~16:00 報名

目前查無開課時段

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

聯絡恆逸

教材

優勢精選教材

課程目標

關於響應式網頁，簡單的來說是讓網站可以直接自動針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時，整個網頁頁面會對應不同的解析度，而有不同的內容呈現方式。在這樣的趨勢之下，Responsive Web Design響應式網頁設計將是未來網站設計的基本需求。 響應式網頁設計(Responsive Web Design)其背後需要的技術是【CSS】、【HTML5】、【JavaScript】，為了讓非程式開發的設計師也能快速開發設計響應式網頁，課程先使用Bootstrap提供的響應式框架元件功能，搭配Visual Studio Code程式碼編輯器編輯響應式網頁，從中有效率了解響應式網頁規則與架構，課程中也著重程式碼的理解與培養，因此就算無程式基礎也能順利表現出完整度、互動性更高的響應式網站，跟上目前業界網站設計流行動脈，以利往後職場上能與程式設計師溝通合作，更能不斷自我提升專業能力。

適合對象

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

課程內容

  1. 從動手瀏覽觀察網頁開始

    • 1-1 甚麼是響應式網頁
    • 1-2 建置響應式網頁
    • 1.3 安裝VS code 延伸模組

  2. 開始使用Bootstrap

    • 2.1 新增Bootstrap空白頁面
    • 2.2 Bootstrap柵格系統
    • 2.3 Bootstrap 一般內容與通用類別
      +2.3.1 文字顏色與背景色
    • 2.3.2 文字屬性
    • 2.3.3 標題與顯示標題
    • 2.3.4 文字行高
    • 2.3.5 邊界與內距屬性設定
    • 2.3.6 對齊圖片
    • 2.3.7 響應式表格(Table)
    • 2.3.8 圓角(rounded)與邊框(Borders)
    • 2.3.9 響應式圖片與圖片區(Figures)

    • 2.3.10 BootStrtap ICON圖標

    • 2.4 其他更多的版面區塊編排

    • 2.4.1 自動佈局的欄 / 等寬
    • 2.4.2 巢狀排列
    • 2.4.3 使用邊界水平對齊區塊
    • 2.4.4 多個區塊水平對齊
    • 2.4.5 欄的推移
    • 2.4.6 間隙Gutters
    • 2.4.7 Flex對齊

  3. Bootstrap元件素材

    • 3.1 一般物件
    • 3.1.1 按鈕 (Buttons)
    • 3.1.2 麵包屑 (Breadcrumb)

    • 3.1.3 廣告大屏幕 (Jumbotron)

    • 3.2 區塊內容物件

    • 3.2.1 多項圖文編排(Media Object)
    • 3.2.2 標籤切換內容(Tab)

    • 3.2.3 折疊切換內容 (Accordion)

    • 3.3 Bootstrap響應式導覽列

    • 3.3.1 基本型收合導覽列

    • 3.3.2 收合導覽列元件

    • 3.4 Card卡片

    • 3.4.1 預設卡片類型
    • 3.4.2 卡片組合
    • 3.4.3 水平卡片
    • 3.4.4 網格卡片

    • 3.4.5 card圖文框排列版面

    • 3.5 Carousel輪播

    • 3.5.1 carousel-caption
    • 3.5.2 更改carousel CSS
    • 3.5.3 控制高度與自訂切換按鈕

  4. Bootstrap頁面編排應用

    • 4.1 先讓頁面捲動起來
    • 4.2 側邊導覽列捲動頁面
    • 4.3 頁面編排與效果
    • 4.4 頁面動態效果

學會技能

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

備註事項

學生優惠價：參加校園IT職涯學習護照方案，享有5折優惠價

課程範例：

推薦課程