RWD 自適應網頁設計初階入門

5 (1)

鼻涕男孩

講師介紹

這堂課我會學到

學會 HTML 5 語法
學會 CSS 3 基礎語法
學會 RWD 基礎靜態式網頁規劃與設計

課前資訊

學員上課前需具備哪些軟、硬體設備或常識

電腦基本檔案管理能力（例如：複製/貼上等）
不需任何軟體或硬體配備要求

課程適合對象

網頁設計初學者
學習網頁設計相關科系的學生
對於前端網頁設計工作有興趣的人
對網頁設計有興趣，卻毫無經驗的人

課程大綱

51節

09:51:51

課程介紹
- 課程介紹短片
  
  預覽
1. 認識 RWD 網頁設計與編輯軟體

3節

27:21
- 1-1 認識網站與 RWD 網頁
  
  10:37
- 1-2 申請網路空間
  
  10:28
- 1-3 SublimeText 3 介紹
  
  06:16
2. HTML 與 CSS 入門

9節

01:34:47
- 2-1 網頁的結構
  
  預覽
  
  10:37
- 2-2 HTML 基本標籤
  
  13:09
- 2-3 圖片設定
  
  15:21
- 2-4 CSS 基礎觀念應用
  
  15:04
- 2-5 文字與段落
  
  08:19
- 2-6 超連結的類型與應用
  
  09:14
- 2-7 多媒體標籤
  
  06:45
- 2-8 網頁背景設計
  
  預覽
  
  07:28
- 2-9 四方連續的背景圖樣設計
  
  08:50
3. 表格應用

4節

43:43
- 3-1 表格介紹
  
  09:19
- 3-2 表格排版實作 I：表格編排內容
  
  09:02
- 3-3 設計我的商品頁 II：美化頁面
  
  14:59
- 3-4 設計我的商品頁 III：增加動態特效
  
  預覽
  
  10:23
4. div 框架

4節

46:09
- 4-1 div 容器與盒子模型
  
  11:32
- 4-2 塊狀元素與行內元素
  
  13:37
- 4-3 四大定位方式
  
  預覽
  
  06:47
- 4-4 實例應用：相簿網頁的編排設計
  
  14:13
5. 網頁排版實戰

7節

01:26:59
- 5-1 HTML5 的語義標籤
  
  08:23
- 5-2 基本雙欄版型設計與編排
  
  預覽
  
  06:02
- 5-3 版型設計的延伸練習
  
  12:00
- 5-4 進階版型設計應用
  
  13:35
- 5-5 導覽列的樣式設計
  
  14:36
- 5-6 複合式下拉選單設計
  
  12:20
- 5-7 網頁版型整合設計
  
  20:03
6. 表單設計應用

6節

01:32:41
- 6-1 表單結構標籤與後台串接介紹
  
  07:50
- 6-2 表單的控制項介紹
  
  20:41
- 6-3 表單頁面設計 I
  
  07:54
- 6-4 表單頁面設計 II
  
  15:57
- 6-5 結構化偽類別選取及屬性器應用
  
  18:21
- 6-6 利用 CSS 與表單元素製作頁籤切換效果
  
  21:58
7. RWD 網頁設計規劃

7節

01:28:41
- 7-1 尺寸的種類與設定
  
  12:26
- 7-2 認識 viewport 與 Media Queries
  
  17:40
- 7-3 使用 Google 雲端字型
  
  13:47
- 7-4 圖示字型介紹與應用
  
  預覽
  
  10:11
- 7-5 使用 Xmind 規劃網站架構圖
  
  09:45
- 7-6 線框圖設計與規劃
  
  13:26
- 7-7 好用的線上線框圖製作服務
  
  11:26
8. RWD 網頁設計實作

11節

01:51:30
- 8-1 RWD 網頁初始化設定
  
  05:42
- 8-2 HEAD 標頭載入的設定
  
  05:26
- 8-3 HTML 內容架構設計
  
  14:39
- 8-4 基本 div 框架的大小設定
  
  06:37
- 8-5 頁首與選單設計
  
  09:04
- 8-6 主內容區塊設計與編排
  
  15:01
- 8-7 頁尾區塊的資訊設計
  
  03:38
- 8-8 手機版本的 CSS 修改
  
  10:54
- 8-9 平板版本的 CSS 修改
  
  15:39
- 8-10 多媒體的 RWD 設定
  
  04:56
- 8-11 淺談網頁的 SEO
  
  19:54

課程介紹

在這門課程裡，你將從基礎的版型規劃、切版，一直到 HTML 內容架構與 CSS 美化，並在最後從零開始，實際完成一個完整的 RWD 靜態網頁的設計。

想學好網頁設計，你還在煩惱以下這些問題?

我想學網頁設計，卻找不到適合的入門教學課程?
我看不懂複雜的網頁程式碼，該如何學會網頁設計?
目前最夯的 RWD（自適應）網頁設計到底是什麼?
我不懂 HTML，也不知道什麼是 CSS，真的能夠零基礎學會網頁設計嗎?

專為零網頁設計基礎的你所開設

讓你真正能夠做中學，由不懂到了解，從網頁設計小白，搖身一變成為能夠製作出 RWD 網頁的設計者。

在這門課程裡，老師從最基礎的版型規劃、切版，一直到 HTML 內容架構與 CSS 美化，並在這堂課最後，帶你從零開始，實際完成一個完整的 RWD 靜態網頁的設計。

而在學習過程中，老師會隨時提點設計時該留意的地方，不但處處充滿網頁設計的小技巧，也將製作網頁時可能會遇到的相關問題，不厭其煩地一一解說。

身為網頁設計領域新手的你，請千萬不要錯過這堂精彩的課程。

課程特色

不需具備任何基礎，step by step 教會你，打穩網頁設計基本功。
詳細語法解說，搭配實作練習，學習效果百分百。
不必害怕網頁程式碼，從零開始就能學會網頁設計。
系統化學習 HTML 與 CSS 語法和基礎知識。
從 0 開始建置一個實用的公司 RWD 網站。
隨時穿插網頁設計要點與網頁設計常見錯誤，快速吸收講師多年寶貴的實務經驗。

課程討論與問答

要先登入才能做留言
陳冠璋

2018-12-22 22:59:05
陳冠璋

2018-12-22 22:59:05

請問可以給教學內會用到ㄉ檔案資料夾記事本嗎?
- 9 比 1 客服
  
  2018-12-24 09:32:02
  
  9 比 1 客服
  
  2018-12-24 09:32:02
  
  您好，請問您指的“資料夾記事本”是範例內會使用到的文字檔案嗎？如果是的話，請您先登入帳號，然後到影片播放頁面最右邊的“教材下載”區，即可下載相關章節的資料，文字檔案的txt檔案已附在其中。若您還有使用上的問題，歡迎隨時與我們聯繫，謝謝。