Try   HackMD

動畫互動網頁程式入門 | 資源整理

此文件為 (https://hahow.in/cr/monoame-webdesign1) 線上課程內容與資源與範例檔案整理(持續新增中)。
包含區塊：

討論問題專區：動畫互動網頁FB社團
作品整理網站：FB作品統整
課程理念：從不只是一門線上課程，而是一場推動進化的豪賭

預計學習時數: 課程觀看+練習建議預留的時間
每個單元開始前請記得查看講義

2.基礎前期規劃 (第2章)

講解網頁的規劃、結構與主體
預計學習時數: 1hr

  • 2-3 網站專案開發流程
  • 2-4 網站主題名稱logo
  • 2-5 網站瀏覽結構樹規劃
  • 2-6 網站排版規劃與分類
  • 2-7 網站視覺配色概念與資源

3.本機與Codepen環境架設 (第3章)

使用Sublime作為編輯環境，初步嘗試建立網頁，與使用線上Codepen平台製作網站，設定常用快速鍵
預計學習時數: 1hr

  • 3-1 sublime 操作與瀏覽器預覽網頁
  • 3-2 伺服器瀏覽與原理講解
  • 3-3 平台介紹/註冊與基礎設定 - 使用Codepen
  • 3-4 實際使用sublime中快速鍵

4.基礎HTML/CSS (第4章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

講解網頁基礎html結構與css更改顏色與外觀
預計學習時數: 8hr

  • 4-1 html 中元素&排列的概念
  • 4-2 html 中結構&層級的概念
  • 4-3 <project 0> 簡易版本自我介紹
  • 4-4 css 直接調整外觀與顏色框線
  • 4-5 css 分開撰寫 - class&id概念
  • 4-6 css 顯示方式 display block/inline
  • 4-7 css 元素位置 - 相對 / 絕對定位
  • 4-8 css 內間隔/外間隔(padding/margin)
  • 4-9 css 字體變化與span-在文章段落中製作變化
  • 4-10 <project 1> html / css 大整合-製作獨特名片網頁
  • <homework 1> 功課說明-製作自己的技能網頁

5.系統性管理開發 (第5章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

使用sass與jade作為前處理語言，學習使用模組開發。
預計學習時數: 5hr

  • 5-1 html 縮寫模組-Emmet 介紹
  • 5-2 html 樣板語言-jade(pug) (課程主要使用)
  • 5-3 css 樣板語言-sass (課程主要使用)
  • 5-4 sass - 變數概念管理色彩&內容
  • 5-5 sass - 動態產生模組mixin概念
  • 5-6 sass - 常用mixin與累積資源
  • 5-7 html參考資料轉換jade
  • 5-8 <project 2> 實作網頁品牌視覺指導套色

6.素材前期準備 (第6章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

使用Illustrator規劃網頁使用圖像並匯出檔案
預計學習時數: 1.5hr

  • 6-1 如何在以拉中製作icon/圖像
  • 6-2 如何輸出圖片jpeg/png/svg
  • 6-3 將圖片上傳到imgur影像網站
  • 6-4 管理網頁色彩 (guideline/sass/js)

7.前端基礎動畫互動 (第7章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

使用css與svg製作互動與滑鼠效果
預計學習時數: 10hr

  • 7-1 html attr 與自定義屬性名稱
  • 7-2 css 綜合定位運用 absolute / relative
  • 7-3 css 加入基礎滑鼠互動 :hover / :active
  • 7-4 css 動畫基礎 transition-duration/delay
  • 7-5 css 製作影格動畫 animation/keyframes
  • 7-6 css 動畫速度曲線 fillmode/speed curve
  • 7-7 SVG - 繪製 向量網頁圖片/logo
  • 7-8 SVG - 讓你的LOGO或圖像動起來
  • 7-9 <project 3> 動態互動天氣盒子

8.前端進階程式js (第8章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

開始使用js，學習變數以及迴圈的概念，處理動畫與資料性的網站
預計學習時數: 10hr

  • 8-1 引言
  • 8-2 Jquery 動態改變css外觀/ html內容
  • 8-3 Jquery 初階滑鼠事件 - click/hover
  • 8-4 Jquery 變數概念- 儲存修改與判斷
  • 8-5 json 物件陣列概念 & for 遍歷
  • 8-6 Jquery 切換class/css應用-手機demo
  • 8-7 Jquery / json 動態產生購物車清單
  • 8-8 Jquery ajax - 非同步載入與應用介紹
  • 8-9 Jquery ajax - 實作導入資料代辦清單
  • 8-10 <project 4> 實作購物車-動態新增購買物品與結算

9.RWD原理與應用 (第9章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

學習RWD的css斷點原理，並學習Bootstrap的網格系統
預計學習時數: 10hr

  • 9-1 內容流與概念說明
  • 9-2 指定比例尺寸% 與max-width/min-width
  • 9-3 重新排版的原理-特定條件css-media query
  • 9-4 實作手機版面-模仿fb帳號頁面桌面/手機板變化
  • 9-5 懶人工具- bootstrap 原理與結構講解
  • 9-6 bootstrap 基礎案例與原理熟悉
  • 9-7 bootstrap 格線系統原理與RWD應用
  • 9-8 bootstrap 應用技巧 padding型規劃
  • 9-9 <project 5> 結合skrollr製作捲動式網頁

10.網頁視覺設計 (第10章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

網站視覺美感的分析，以及從零開始製作網站規劃稿，處理色彩/元件/頁面
預計學習時數: 12hr

  • 10-1 概念-版面規劃概念與網格系統 (AI/SKETCH/紙筆)
  • 10-2 概念-與頁面結構/跳轉方式規劃
  • 10-3 概念-樣式 顏色規劃
  • 10-4 概念-微互動元素動畫 反應規劃
  • 10-5 案例-從元素建構而上的設計
  • 10-6 案例-從頁面整體切分而下的設計
  • 10-7 案例-從設計轉換程式網頁的常用技巧
  • 10-8 <project 6> Yellow Studio 設計工作室網頁

11.前端框架Vue.js (第11章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

快速建立資料型網站，練習hahow/博客來等常見頁面，學會載入外部資料做使用
預計學習時數: 12hr

  • 11-1 為什麼要用資料導向做網頁 (回顧js)
  • 11-2 將變數代入模板中
  • 11-3 v-for 列舉元素應用
  • 11-4 v-model 使用者輸入雙向綁定
  • 11-5 v-if / v-show 條件渲染與資料的後處理-實作博客來
  • 11-6 v-on / method 建立js事件
  • 11-7 與AJAX的對接 動態載入資訊
  • 11-8 綜合案例-使用hahow課程資料
  • 11-9 <project 7> 互動錄音播放鋼琴

12.購買伺服器部署/網域 (第12章)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

分析伺服器優缺，示範常見購買流程，安裝sublime sftp快速上傳工具，以及安裝自己電腦的sass/jade編譯器
預計學習時數: 2hr

  • 12-1 如何匯出codepen 與網站結構
  • 12-2 現成主機與網址DNS設置
  • 12-3 linux主機設置與安裝apache
  • 12-4 使用filezilla軟體連線與上傳
  • 12-5 使用sublime sftp進行同步
  • 12-6 使用Prepros在電腦上動態編譯sass/jade
  • 12-7 網站上線GA追蹤與og(用在fb)顯示設定

13.破除障礙與後續發展 (第13章)

講解如何更好的使用Chrome的開發者工具，以及講解後續學習路徑 前端與後端的規劃與趨勢。
預計學習時數: 1hr

  • 13-1 問題解決的技巧-Chrome Dev tools
  • 13-2 如何規劃自己的未來學習路程 (前端/動畫)

課程勘誤與補充

重要-如果連結到 https://awiclass.monoame.com 網址的api或是圖片沒有辦法使用，請將使用網址更新為 https://awiclass.monoame.com 即可

  • CH3-4 - Codepen環境架設 - 實際使用sublime中快速鍵

    • Sublime快速鍵更改完之後記得按右上角「Save all settings 儲存」
    • 縮排/退回 建議使用tab / shift+tab 取代ctrl+[]

  • CH4-5 - 基礎HTML/CSS - css 分開撰寫 - class&id概念

    • 兩者在css裡面用途一樣 不過 id需要獨一無二 ，在JS中也作為抓取那個元素的辨識方式，class通常拿來放可以重複使用的css，id建議是留給程式開發/網頁規劃使用

  • CH4-6 - css的階層關係

    • css的層級關係，會依照使用的選擇器而有不同的權重。如果發生蓋不掉的情況，可以試著算算看兩個者的權重比較，比如hover的css如果被class的css蓋掉，有可能是因為寫在前面或是另一個基礎設定的css用了更複雜層級的選擇器選擇。

  • CH5-2 - 系統性管理開發 - html樣板語言-jade(pug)

    • Jade-html縮寫語法更名成Pug，在選單中一樣可以找到，影片中仍會講"Jade"，所以請自行轉換
    • 在本機編譯sass/jade的環境架設請參考 「CH12-6 - 購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade」 部分

  • CH6-3 - 素材前期準備 - 將圖片上傳到imgur影像網站

    • 重要提醒-Imgur流量滿額會Codepen無法顯示圖片，若Imgur圖床無法顯示： 可以上傳到google雲端硬碟，用相同方式複製圖片網址即可使用

  • CH6-5 - 管理網頁色彩 (guideline/sass/js)

    • 註解的快捷鍵不為ctrl+L，而是ctrl+/

  • CH7-2 - 前端基礎動畫互動 - css 綜合定位運用 absolute / relative

    • 原先寫在css .button的background-color:white，建議改寫在.phone裡面，這樣白色的底部才會一起圓角化

  • CH8-7 - 前端進階程式js - jquery / json 動態產生購物車清單

    • 在刪除按鈕的部分，課堂講解部分有錯誤，傳進去參數應該要是id，解決方式已錄製在 前端進階程式js - <project 4> 實作購物車-動態新增購買物品與結算中囉！

  • CH8-8 - 前端進階程式js - Jquery ajax - 非同步載入與應用介紹

    • 如果遭遇資料無法載入的情況，請將pen網址列中的https更改為http，因為我寫的API是http，更改完即可順利載入
    • 如果還是無法，因為現在codepen強制使用https，請將api網址中的 https://awiclass.monoame.com/… 改為https版本 https://awiclass.monoame.com/

  • CH9-3 - 元素置中方式

    • 放置中央總共有三種方式：

      • 1.使用inline/inline-block方式置中：用於文字 圖片或元素並列
      • 2.使用block元素置中：調整margin 一般div或元素預設是這種
      • 3.使用絕對置中：需要很彈性的放位置（因為它可以調整%數方便）

    • 詳情參考這份範例：http://codepen.io/frank890417/pen/mRxyyv?editors=1100

  • CH11 - 前端框架Vue.js（版本間差異語法說明）

    • 使用1.xx版本，記得引用正確的cdn版本，有一些屬性像是{{{}}}在Vue.js 2.0裡面拿掉了，變成特殊屬性v-html=變數，且屬性裡面也必須使用v-bind:attr，不能夠內插代換在屬性內。
    • Vue2.0寫法補充：

推薦自學書籍

相關社群

課程使用API與圖片

API

圖片

音檔

相關js庫與資源

設計

CSS

JS

SEO

靈感

一些不錯的線上教學資源

單元完成報到區

Project集合繳交區： 2017.awiclass.monoame.com

Last changed by 
 
Wu Che Yu
3
34
35807
Published on HackMD