動畫互動網頁程式入門 (HTML/CSS/JS)

你曾經想學過網頁設計嗎?

曾經看過線上課程，大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看，好用學完做出來之後，總離真正上線的網頁有段距離而覺得沮喪

寫一個網頁，往往不只是一個人的夢魘，設計師拉好了頁面交給工程師，卻怎麼樣也達不到想要的效果，而程式設計師也溝通的煩悶，改到不耐煩的說

「要不然你來做阿」

設計師能做的話，他早就自己做了，但上網一查語法 html/js/css 五花撩亂，我們早已脫離了無名小站修改網誌語法的美好時代，究竟該怎麼無痛入手網頁程式開發呢?

「目前突破8000%! 超過4000人一同學習」課程更新

>1/26 新增課程共筆   共筆連結

       包含學習目錄與推薦時間 / 課程勘誤補充 / 推薦書籍（持續新增）

       可以一起編輯

>1/17 全部單元上線完畢

>11/24 更新課程預計上線時間

>11/7 新增即時作品集合系統 已經超過一百件同學繳交作品與練習

( 至11/15之前已上線85單元共1230分鐘 )

>9/04 新增FB討論社群 動畫互動網頁程式入門 課程討論社團

>8/23 詳細版課程綱要：課程綱要連結

>7/4 課程募資期間圓滿結束！！

一目了然的教學環境

這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛再螢幕前不知道要做什麼，會從設計師的角度看，去操作網頁，一切你會在以拉上面看到的美好事物，我們會網頁的程式語言呈現。

不同於一般的網頁設計入門，以最好用，最簡便的平台-- Codepen 代替教學，學習中再也不用上下傳檔案預覽，也能即時看到更新的效果，以替代性的jade/sass樣版語言，能簡化大量HTML/CSS的繁瑣，讓程式易讀好懂，當然後續也會在額外教大家怎麼正式的架設自己的網站。這一切讓初期學習不會因為一點點打錯，網頁出不來而搥桌，跟著這堂課從零到一，就能入門網頁開發了!

最後常見的問題是，結束了一個課程的同時，很多人遇到不會的問題就卡死，怎麼做也只做得出範例的幾個網頁，因此，特別規劃了「搜尋與問題解決技巧」，讓你以後不管遇到什麼都能靠自己的力量去解決!

不論你是設計師、學生、程式設計師，一般想碰網頁設計的人，這堂課會準備好一切你需要的素材，讓你感受最少的阻力入門，即使你不懂設計，也能跟著做出來，且知道以後需要什麼樣的素材製作網頁

「只有自學者才懂自學的痛」

三年前接觸網頁程式設計，沒有經驗的我，接了一個國中網頁設計的案子，上個經歷還停留在會動的會跳的五顏六色Flash美好年代，只好搜尋線上各種網頁設計相關教學，卻都是一坨坨程式碼教你如何打 H1到H4標題（還會由大到小好棒棒），CSS可愛的背景跟文字家族。

打開記事本想要刻簡單的一個導覽列跟放張圖片，卻怎麼樣都調不到自己想要的位置，改了一整天，好不容易對齊了，螢幕大小一改變半個頁面就不見。

我知道，這些慘痛經歷，我都經歷過，一直都是用繪圖軟體過來，設計的頁面平平都是軟體，為什麼網站方面的教學通病都停留在語法跟瑣碎的功能，總是沒人教怎麼把腦海中的頁面變成現實，讓設計的版面照著想像的運作。

課程目標

這堂課會告訴你從網站的草稿跟結構開始，要怎麼規劃才能有組織，不會掛在螢幕前不知道要做什麼

這次的課程，著重在製作網頁的時候，究竟要怎麼把網站做『好』而不是單純的寫出來，卻不能看不好用不夠理想。

從illustrator的思維來看：

1. 如何讓東西對齊彼此、至中排列到正確的位置
2. 如何調整每個東西的顏色、粗細、透明度與看起來的樣子
3. 如何讓文字脫離新細明體魔掌、行距、字距、讓文章看起來舒服
4. 如何做到裁切版面、遮罩、繪圖、框線，在網頁上實踐各種圖像設計的常用技巧
5. 如何讓東西有趣的跟滑鼠互動，使網頁變得好玩

在素材的方面，會準備好可能用到的圖，以及各種幫助學習的工具，帶著完整走一次網站開發的流程，所以課程結束後，不會徬徨無助只能照著做範例，而是能一步一步自己找資源與參考資料，將夢想的網站與動畫實現。

你也許會想說，我套模板就好啦，為什麼要學網頁設計呢?

套模板是一種選擇，不過學完了這堂課，你也將會有自己的能力改造模板、看懂他們，

更能有系統的規劃、或與他人合作，了解以技術觀點來看網頁能做到什麼

讓你能夠快速上手一些網站視覺處理的撇步，享受做出屬於自己獨一無二網頁的成就感。

課程中你將能做出

1. 從頭開始規畫一個網頁的結構、內容與呈現方式

2. 章節三、基礎html/css 簡單的自我介紹頁面，練習網頁元素操縱、對位與外觀

3. 章節四、系統化管理網頁設計- sass變數化易於更改配色/樣式的網頁模板

4.學習網站配色與視覺的基礎概念，實作icon匯出

4.製作動態互動天氣盒子

5.使用Bootstrap+Skrollr製作捲動式專題網頁

6. 練習如何從概念、發想到利用網格系統分析與繪製草稿

5.學習分析並刻一個模仿Hahow募資頁面板型的網頁

5. 走過網頁框架、配色、佈局到平面稿的流程

6.使用Vue.js練習資料性的網頁與製作一台互動鋼琴

7.練習各種滑鼠互動與基礎動畫

課程單元總覽

 2 - 楔子-課程進行模式說明 
 3 - 楔子-網頁前後端如何運作 
 4 - 基礎前期規劃-網站專案開發流程 
 5 - 基礎前期規劃-網站主題名稱logo 
 6 - 基礎前期規劃-網站瀏覽結構樹規劃 
 7 - 基礎前期規劃-網站排版規劃與分類 
 8 - 基礎前期規劃-網站視覺配色概念與資源 
 9 - 本機環境架設 - sublime 操作與瀏覽器預覽網頁 
 10 - 本機環境架設 - 伺服器瀏覽與原理講解 
 11 - Codepen環境架設 - 平台介紹/註冊與基礎設定 
 12 - Codepen環境架設 - 實際使用sublime中快速鍵 
 13 - 基礎HTML/CSS - html中元素&排列的概念 
 14 - 基礎HTML/CSS - html中結構&層級的概念 
 15 - 基礎HTML/CSS - <project 0> 簡易版本自我介紹 
 16 - 基礎HTML/CSS - css 直接調整外觀與顏色框線 
 17 - 基礎HTML/CSS - css 分開撰寫 - class&id概念 
 18 - 基礎HTML/CSS - css 顯示方式 display block/inline 
 19 - 基礎HTML/CSS - css 元素位置 - 相對 / 絕對定位 
 20 - 基礎HTML/CSS - css 內間隔/外間隔(padding/margin) 
 21 - 基礎HTML/CSS - css 字體變化與span-在文章段落中製作變化 
 22 - 基礎HTML/CSS - <project 1> html / css 大整合-製作獨特名片網頁 
 23 - ​基礎HTML/CSS - <homework 1> 功課說明-製作自己的技能網頁 
 24 - 系統性管理開發 - html縮寫模組-Emmet 介紹 
 25 - 系統性管理開發 - html樣板語言-jade(pug) (課程主要使用) 
 26 - 系統性管理開發 - css 樣板語言-sass (課程主要使用) 
 27 - 系統性管理開發 - sass - 變數概念管理色彩&內容 
 28 - 系統性管理開發 - sass - 動態產生模組mixin概念 
 29 - 系統性管理開發 - sass - 常用mixin與累積資源 
 30 - 系統性管理開發 - html參考資料轉換jade 
 31 - 系統性管理開發 - <project 2> 實作網頁品牌視覺指導套色 
 32 - 素材前期準備 - 如何在以拉中製作icon/圖像 
 33 - 素材前期準備 - 如何輸出圖片jpeg/png/svg 
 34 - 素材前期準備 - 將圖片上傳到imgur影像網站 
 35 - 素材前期準備 - 管理網頁色彩(guideline/sass/js) 
 36 - 前端基礎動畫互動-html attr 與自定義屬性名稱 
 37 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative 
 38 - 前端基礎動畫互動 - css 加入基礎滑鼠互動 :hover / :active 
 39 - 前端基礎動畫互動 - css 動畫基礎 transition-duration/delay 
 40 - 前端基礎動畫互動 - css 製作影格動畫 animation/keyframes 
 41 - 前端基礎動畫互動 - css 動畫速度曲線 fillmode/speed curve 
 42 - 前端基礎動畫互動 - SVG - 繪製向量網頁圖片 / logo 
 43 - 前端基礎動畫互動 - SVG - 讓你的LOGO或圖像動起來 
 44 - 前端基礎動畫互動 - <project 3> 動態互動天氣盒子 
 45 - 前端進階程式js-引言 
 46 - 前端進階程式js - jquery 動態改變css外觀/ html內容 
 47 - 前端進階程式js - jquery 初階滑鼠事件 - click/hover 
 48 - 前端進階程式js - jquery 變數概念- 儲存修改與判斷 
 49 - 前端進階程式js - json 物件陣列概念 & for 遍歷 
 50 - 前端進階程式js - Jquery 切換class/css應用-手機demo 
 51 - 前端進階程式js - jquery / json 動態產生購物車清單 
 52 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹 
 53 - 前端進階程式js - Jquery ajax - 實作導入資料代辦清單 
 54 - 前端進階程式js - <project 4> 實作購物車-動態新增購買物品與結算 
 55 - RWD原理與應用-內容流與概念說明 
 56 - RWD原理與應用-指定比例尺寸% 與max-width/min-width 
 57 - RWD原理與應用-重新排版的原理-特定條件css-media query 
 58 - RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化 
 59 - RWD原理與應用-懶人工具- bootstrap 原理與結構講解 
 60 - RWD原理與應用-bootstrap 基礎案例與原理熟悉 
 61 - RWD原理與應用-bootstrap 格線系統原理與RWD應用 
 62 - RWD原理與應用-bootstrap 應用技巧 padding型規劃 
 63 - <project 5> 實際應用範例 bootstrap-結合skrollr製作捲動式網頁 
 64 - 網頁視覺設計-概念-版面規劃概念與網格系統 ( AI/SKETCH/紙筆) 
 65 - 網頁視覺設計-概念-與頁面結構/跳轉方式規劃 
 66 - 網頁視覺設計-概念-樣式 顏色規劃 
 67 - 網頁視覺設計-概念-微互動元素動畫 反應規劃 
 68 - 網頁視覺設計-案例-從元素建構而上的設計 
 69 - 網頁視覺設計-案例-從頁面整體切分而下的設計 
 70 - 網頁視覺設計-案例-從設計轉換程式網頁的常用技巧 
 71 - <project 6> 實際網站應用案例-Yellow Studio 設計工作室網頁 
 72 - 前端框架Vue.js-為什麼要用資料導向做網頁(回顧js) 
 73 - 前端框架Vue.js-將變數代入模板中 
 74 - 前端框架Vue.js-v-for 列舉元素應用 
 75 - 前端框架Vue.js-v-model 使用者輸入雙向綁定 
 76 - 前端框架Vue.js- v-if / v-show 條件渲染與資料的後處理-實作博客來 
 77 - 前端框架Vue.js- v-on / method 建立js事件 
 78 - 前端框架Vue.js-與AJAX的對接 動態載入資訊 
 79 - 前端框架Vue.js-綜合案例-使用hahow課程資料 
 80 - <project 7> 前端框架Vue.js-互動錄音播放鋼琴 
 81 - 購買伺服器部署/網域-如何匯出codepen 與網站結構 
 82 - 購買伺服器部署/網域-現成主機與網址DNS設置 
 83 - 購買伺服器部署/網域-linux主機設置與安裝apache 
 84 - 購買伺服器部署/網域-使用filezilla軟體連線與上傳 
 85 - 購買伺服器部署/網域-使用sublime sftp進行同步 
 86 - 購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade 
 87 - 購買伺服器部署/網域-網站上線GA追蹤與og(用在fb)顯示設定 
 88 - 破除障礙-問題解決的技巧-Chrome Dev tools 
 89 - 後續發展與介紹- 如何規劃自己的未來學習路程 (前端/ 動畫)

同學們的作品集

作品集連結：http://2017.awiclass.monoame.com/proj/1?utm=class_1_description

網站範例參考:

臺北聲音地景計畫-「捷運站體環境音樂」徵選活動

花旗聯合勸募2016

複雜生活節 

Dyverse Studio 音樂工作室(舊)

翔虹AutoCAD技術中心 

Monoame Design 墨雨設計 

新詩視覺化

靠北交大2.0

Abstract(將音樂轉成視覺形式)

常見問題Q&A (6/24更新)

1. 沒有程式或設計基礎適合上這門課嗎?
2. A: 這堂課是為了讓設計相關或是沒有任何程式基礎的人，能上手真正“業界”網頁程式設計的課程!，其實在業界的大型網站往往都不是用軟體，而是用程式碼一行一行刻出來的，沒有圖形化介面也不容易親近，簡介中提到的codepen平台是線上的編輯環境，可以即時預覽打出來的程式，不會覺得學起來很抽象，也可以省去上傳檔案才能預覽的麻煩:)，而且平台練習使用都是免費的！開啟網頁瀏覽器輸入網址就可以使用
3. 希望能幫助大家不害怕程式設計，懂得如何熟練跟用它操作網頁視覺互動，能做的東西絕對比單純用dreamweaver排版來的多而且專業，在業界也可以提升跟相關程式人員的溝通基礎唷!
4. Adobe Illstrator / 網頁開發 的課程比例各占多少呢? 不會以拉適合學嗎?
5. A: 可以的，主要的內容會放在網頁編輯開發上，以拉是輔助工具而已出場機會不多，課程中的範例都會準備好素材給各位練習唷! 在後半課程我會提到多ㄧ些圖像設計跟介面的概念，與ㄧ些比較有趣的應用手法和案例，AI不是這次課程的主體，僅會拿來做版面的規劃跟視覺，不過還是會提到基礎的使用喔! 如果沒有以拉，也可以用任何繪圖軟體、甚至紙筆做規劃都可以! 重點是如何有系統的規劃結構跟版面。
6. RWD(響應式網頁) 會講到嗎?
7. A: 在課堂中會教學RWD是什麼，如何基礎的判斷裝置寬度改變對應的CSS，當了解基礎部分後，會進一步引入框架等RWD常用模組，希望讓大家不只會使用這些套件，更能了解背後運作的原理，才能夠能改能修，對於網頁有更高的操控度不會像拼裝車搖搖晃晃。
8. 課程使用的軟體要怎麼安裝跟使用呢? 有分平台嗎?
9. A: 簡介中提到的codepen平台是線上的編輯環境，網址為http://www.codepen.io，可以即時預覽打出來的程式，開啟網頁瀏覽器輸入網址就可以使用!不論是MAC或是Windows都可以使用
10. 已經是html/css工程師了，適合上這門課嗎?
11. A: 這門課大約50%入門，50%是專攻介面設計跟動畫呈現，希望能夠快速抓住網頁美感跟互動規劃的工程師，十分適合來上這門課!
12. 常用的參考資料/學習資源有什麼呢?
13. 視覺部分，像是Pinterest / Dribble 還有這次的教學平台Codepen，關於視覺介面只要搜尋關鍵字 UI / UX Web Design 就可以找到很多不錯的案例!
14. 程式部分 w3school在基礎的html/css都有方便的索引參考，想做什麼就查什麼，雖然偏向功能解析，只要掌握網頁基本概念了之後都能夠很快速的引用。
15. 可以分享相關接案經歷跟流程細節嗎?
16. A: 會特別有一個單元是針對自己的接案經驗做分享，如果大家有特別感興趣的部分都可以反應在平台上再安排內容:)
17. 圖文內容的排版跟結構規劃會提到嗎?
18. A: 會分析3-4個基本的網站案例，以及常見的網頁呈現形式，UI/UX部分有很多瑣碎的細節和視覺要安排，都會逐步分析與帶大家實際模仿大型頁面的思維做練習，累積能量創造自己的作品!
19. 上完這門課之後，有辦法獨立接案嗎?
20. A: 獨立接案需要經驗累積，不過把課程上提的東西練熟跟自己嘗試應用，能讓你熟悉網頁領域不害怕，容易與工程師合作，自行進修便能嘗試接案。
21. 能透過這門課做出購物車真正能結帳、或是社團的留言功能嗎?A:這堂課主要是針對前端跟介面，所以後端並沒有提到，但是能對網站有很完整的了解，也能自行上手其他技術，後端部分又是另一門學問，不是那麼快可以學到完成深入的東西了！

想學更進階的JS跟繪圖嗎？ 第二堂課-動態互動網頁特效入門

這堂課將帶領你，從零開始打造一個「打動人心」的互動特效網頁；賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力，透過從零開始的JS程式教學與Canvas繪圖概念，結合數學、物理與物件導向程式開發，幫助你實踐心中的想法。

課程內容分為四階段，總共 2000 分鐘以上

• 第一階段：將 HTML/CSS 融會貫通，輕鬆入門，順暢進階
• 第二階段：JavaScript 程式與動畫基礎，做出設計感的動畫應用
• 第三階段：UI 原理實作與 Canvas 運算藝術
• 第四階段：結合Vue.js，打造輕巧完整的獨立網頁遊戲

熱騰騰上線中課程連結

個人經歷

墨雨設計創辦人 吳哲宇

從動畫與平面設計起家，持續做到整體品牌形象CI設計到UI/UX APP介面設計，目前專攻網頁動畫與互動，研究如何以網頁的技巧實踐 MotionGraphics的精神，以設計的角度主宰網頁，讓網頁不只是能用、資訊呈現，更要有趣、好玩。

• 第五屆宏碁數位創作獎 國中組首獎
• 第六屆宏碁數位創作獎 國中組首獎
• 第七屆宏碁數位創作獎 高中普通組首獎+評審團超級大獎
• 第八屆宏碁數位創作獎 高中普通組優等
• 第九屆宏碁數位創作獎 高中專業組首獎+評審團超級大獎
• 故事旅社 啟程，故事總匯風視覺設計
• 台北智慧城市黑客松評審團超級大獎
• Selinko&RemyMartin 限量合作酒款APP界面設計
• 聯合報國際美容展 2015/2016 前後台網頁暨系統開發
• 2015世界健康大會 前後台網頁暨系統開發
• 翔虹AutoCAD技術中心 網頁與管理系統開發

其他作品