優勢多媒體 - RWD

響應式網頁設計

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

選擇查詢分區開課時間

地點 班號 日期 時間 報名
台北 271 班 2020/04/07 ~ 2020/04/13 每週一二三四五 09:00~16:00 報名
台北 20751 班 2020/04/25 ~ 2020/05/03 每週六日 09:00~17:30 報名
台北 20750 班 2020/05/28 ~ 2020/07/02 每週二四 18:30~21:30 報名
台北 272 班 2020/06/29 ~ 2020/07/03 每週一二三四五 09:00~16:00 報名

目前查無開課時段

詳細開課時間請洽詢業務

聯絡恆逸

教材

優勢精選教材

課程目標

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

關於響應式網頁,簡單的來說是讓網站可以直接自動針對不同設備(桌機、筆電、平版、手機)等不同尺寸螢幕瀏覽網頁時,整個網頁頁面會對應不同的解析度,而有不同的內容呈現方式。 這意味著現在我們的手機版網站、Pad版網站、PC版網站在不久的未來即將統一,不會再有版本之分。所以現在慣用的Mobile Web(手機版網站)不久後將消失,不分版本,只剩下Web。在這樣的趨勢之下,Responsive Web Design響應式網頁設計將是未來網站設計的基本需求。

響應式網頁設計(Responsive Web Design)其背後需要的技術是【CSS】、【HTML5】、【JavaScript】,為了讓非程式開發的設計師也能快速開發設計響應式網頁,課程先使用Dreamweaver的CSS 3與Bootstrap 4的相關功能,從中有效率了解響應式網頁規則與架構,因此就算無程式基礎也能順利表現出完整度、互動性更高的響應式網站,跟上目前業界網站設計流行動脈。課程中也著重程式碼的理解與培養,最後會以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

  1. 使用Bootstrap打造響應式網頁內容 3-1 Bootstrap通用類別 3-2 Bootstrap元件素材 3-3 Bootstrap響應式導覽列 3-4 Card與Carousel應用 3-4-1 卡片應用 3-4-2 圖文框排列版面 3-4-3 圖文內頁編排 3-4-4 滑動圖片版型 3-4-5 滿版大圖滑動控制板型 3-4-6 圖片內容版面

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

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

學會技能

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

備註事項

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

課程範例:

凡報名課程,贈送由王牌講師李啟宏Niel Li最新力作「響應式網頁設計驚嘆號:Dreamweaver CC* ╳ Bootstrap 4 ╳ JavaScript 範例大全」數量有限,贈完為止 !