HackMD
  • API
    API  HackMD API beta testing
    HackMD API is now in beta, join us for a test drive.
    Getting started Got it
      • Create new note
      • Create a note from template
    • API  HackMD API beta testing
      API  HackMD API beta testing
      HackMD API is now in beta, join us for a test drive.
      Getting started Got it
      • Options
      • Versions and GitHub Sync
      • Transfer ownership
      • Delete this note
      • Template
      • Save as template
      • Insert from template
      • Export
      • Dropbox
      • Google Drive
      • Gist
      • Import
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
      • Download
      • Markdown
      • HTML
      • Raw HTML
      • ODF (Beta)
      • Sharing Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Note Permission
      • Read
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • Write
        • Owners
        • Signed-in users
        • Everyone
        Owners Signed-in users Everyone
      • More (Comment, Invitee)
      • Publishing
        Everyone on the web can find and read all notes of this public team.
        After the note is published, everyone on the web can find and read this note.
        See all published notes on profile page.
      • Commenting Enable
        Disabled Forbidden Owners Signed-in users Everyone
      • Permission
        • Forbidden
        • Owners
        • Signed-in users
        • Everyone
      • Invitee
      • No invitee
    Menu Sharing Create Help
    Create Create new note Create a note from template
    Menu
    Options
    Versions and GitHub Sync Transfer ownership Delete this note
    Export
    Dropbox Google Drive Gist
    Import
    Dropbox Google Drive Gist Clipboard
    Download
    Markdown HTML Raw HTML ODF (Beta)
    Back
    Sharing
    Sharing Link copied
    /edit
    View mode
    • Edit mode
    • View mode
    • Book mode
    • Slide mode
    Edit mode View mode Book mode Slide mode
    Note Permission
    Read
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    Write
    Owners
    • Owners
    • Signed-in users
    • Everyone
    Owners Signed-in users Everyone
    More (Comment, Invitee)
    Publishing
    Everyone on the web can find and read all notes of this public team.
    After the note is published, everyone on the web can find and read this note.
    See all published notes on profile page.
    More (Comment, Invitee)
    Commenting Enable
    Disabled Forbidden Owners Signed-in users Everyone
    Permission
    Owners
    • Forbidden
    • Owners
    • Signed-in users
    • Everyone
    Invitee
    No invitee
       owned this note    owned this note      
    Published Linked with GitHub
    Like26 BookmarkBookmarked
    Subscribed
    • Any changes
      Be notified of any changes
    • Mention me
      Be notified of mention me
    • Unsubscribe
    Subscribe
    # 動畫互動網頁程式入門 | 資源整理 此文件為 (https://hahow.in/cr/monoame-webdesign1) 線上課程內容與資源與範例檔案整理(持續新增中)。 包含區塊: * [課程勘誤與補充   ](#課程勘誤與補充): 延伸的問答資料記錄/ 錯誤更正 * [推薦自學書籍    ](#推薦自學書籍): 會持續新增設計/程式相關我讀過很推薦的書籍 * [相關社群      ](#相關社群): 各種網頁討論社群,多交流討論進步越快 * [課程使用API與圖片 ](#課程使用API與圖片): 課程專屬資料與連結 * [相關js庫與資源   ](#相關js庫與資源): 一些常用CDN與資源 * [單元完成報到區  ](#單元完成報到區): 完成單元Project來貼文回覆,就會出現在FB作品統整網站 * [查找筆記     ](https://hackmd.io/bhLYsyZxRPKKOdZ_AZTAJQ): 功能查找 討論問題專區:[動畫互動網頁FB社團](https://www.facebook.com/groups/600360513469667/) 作品整理網站:[FB作品統整](http://2017.awiclass.monoame.com) 課程理念:[從不只是一門線上課程,而是一場推動進化的豪賭](https://www.facebook.com/notes/%E5%90%B3%E5%93%B2%E5%AE%87/%E5%BE%9E%E4%B8%8D%E5%8F%AA%E6%98%AF%E4%B8%80%E9%96%80%E7%B7%9A%E4%B8%8A%E8%AA%B2%E7%A8%8B%E8%80%8C%E6%98%AF%E4%B8%80%E5%A0%B4%E6%8E%A8%E5%8B%95%E9%80%B2%E5%8C%96%E7%9A%84%E8%B1%AA%E8%B3%AD/1293711693980784) ###### 預計學習時數: 課程觀看+練習建議預留的時間 ###### 每個單元開始前請記得查看講義 ### 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章) ![](https://i.imgur.com/NbRc9t6.png) > 講解網頁基礎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 <i class="fa fa-file"></i> \<project 1> html / css 大整合-製作獨特名片網頁 * <i class="fa fa-file"></i> \<homework 1> 功課說明-製作自己的技能網頁 ### 5.系統性管理開發 (第5章) ![](https://i.imgur.com/6gAzsX1.png) > 使用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 <i class="fa fa-file"></i> \<project 2> 實作網頁品牌視覺指導套色 ### 6.素材前期準備 (第6章) ![](https://i.imgur.com/fD1g12s.png) > 使用Illustrator規劃網頁使用圖像並匯出檔案 > 預計學習時數: 1.5hr * 6-1 如何在以拉中製作icon/圖像 * 6-2 如何輸出圖片jpeg/png/svg * 6-3 將圖片上傳到imgur影像網站 * 6-4 管理網頁色彩 (guideline/sass/js) ### 7.前端基礎動畫互動 (第7章) ![](https://i.giphy.com/3o6ZtmQ7DAO3Itq8Q8.gif) > 使用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 <i class="fa fa-file"></i> \<project 3> 動態互動天氣盒子 ### 8.前端進階程式js (第8章) ![](https://i.imgur.com/Dq0pbsN.png) > 開始使用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 <i class="fa fa-file"></i> \<project 4> 實作購物車-動態新增購買物品與結算 ### 9.RWD原理與應用 (第9章) ![](https://i.giphy.com/3oz8xw1W1HKHjyWEb6.gif) > 學習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 <i class="fa fa-file"></i> \<project 5> 結合skrollr製作捲動式網頁 ### 10.網頁視覺設計 (第10章) ![](https://i.imgur.com/1sS1ERM.png) > 網站視覺美感的分析,以及從零開始製作網站規劃稿,處理色彩/元件/頁面 > 預計學習時數: 12hr * 10-1 概念-版面規劃概念與網格系統 (AI/SKETCH/紙筆) * 10-2 概念-與頁面結構/跳轉方式規劃 * 10-3 概念-樣式 顏色規劃 * 10-4 概念-微互動元素動畫 反應規劃 * 10-5 案例-從元素建構而上的設計 * 10-6 案例-從頁面整體切分而下的設計 * 10-7 案例-從設計轉換程式網頁的常用技巧 * 10-8 <i class="fa fa-file"></i> \<project 6> Yellow Studio 設計工作室網頁 ### 11.前端框架Vue.js (第11章) ![](https://i.imgur.com/WNeAXUk.png) > 快速建立資料型網站,練習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 <i class="fa fa-file"></i> \<project 7> 互動錄音播放鋼琴 ### 12.購買伺服器部署/網域 (第12章) ![](https://i.imgur.com/K9LBub9.png) > 分析伺服器優缺,示範常見購買流程,安裝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章) ![](https://i.imgur.com/v1s3YLj.png) > 講解如何更好的使用Chrome的開發者工具,以及講解後續學習路徑 前端與後端的規劃與趨勢。 > 預計學習時數: 1hr * 13-1 問題解決的技巧-Chrome Dev tools * 13-2 如何規劃自己的未來學習路程 (前端/動畫) ## 課程勘誤與補充   :::warning 重要-如果連結到 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用了更複雜層級的選擇器選擇。 ![](https://i.imgur.com/Kyuoyrz.jpg) * __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寫法補充: * 【v-html】{{{三個大括號}}}停用了,要用v-html http://codepen.io/steward379/pen/ZLMPNq * 【v-for】2.0 寫法 取出物件在前 id在後 li(v-for='(fruit,id) in fruits') http://codepen.io/frank890417/pen/bgmXNR * 【v-model】css style 要用 v-bind:style ,class 要用 v-bind:class 並另構物件。取值跟二同。 http://codepen.io/steward379/pen/YNJLrG ## 推薦自學書籍    * 網頁架構規劃:[Infortmation Architecture 100](http://www.books.com.tw/products/0010618801) > 對於網頁專案規劃/結構講解很棒的實用工具書。 * 網格系統:[網格系統—字型編排原則](http://www.books.com.tw/products/0010414307) > 對於設計平面/網頁重要的視覺切分法則,不厚但都是精華。 ## 相關社群      * [Front-End Developers Taiwan](https://www.facebook.com/groups/f2e.tw/) * [高雄前端社群](https://www.facebook.com/groups/358503154261390/) * [Vue.js 台灣](https://www.facebook.com/groups/vuejs.tw/) * [Vue.js 讀書會](https://www.facebook.com/groups/616281401885574/?fref=ts) ## 課程使用API與圖片  ### API * 公告資料: http://www.monoame.com/awi_class/api/command.php?type=get&name=notifydata * 待辦清單資料: https://awiclass.monoame.com/api/command.php?type=get&name=tododata * Hahow資料: https://awiclass.monoame.com/api/command.php?type=get&name=hahowdata * 動態鋼琴譜面資料: * 龍貓: https://awiclass.monoame.com/api/command.php?type=get&name=music_dodoro * 小星星: https://awiclass.monoame.com/api/command.php?type=get&name=music_star ### 圖片 * Yellow Studio貓咪方向圖: https://awiclass.monoame.com/catpic/ * Yellow Studio網頁邊界: https://awiclass.monoame.com/img/margin/ * Yellow Studio網頁icon: https://awiclass.monoame.com/img/webpic/ ### 音檔 * 一些特效音檔: https://awiclass.monoame.com/ballsound/ * 動態鋼琴音檔: https://awiclass.monoame.com/pianosound/set/ ## 相關js庫與資源    ### 設計 * 配色資源: http://colorhunt.co/ * Icon 資源: https://thenounproject.com/ ### CSS * FontAwesome CDN: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css * Google Font: https://fonts.google.com/ ### JS * Jquery CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js * Vue CDN 1.x: https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js * Vue CDN 2.x: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js * Skrollr CDN: https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js ### SEO * 常用meta/og資料產生: http://webcodetools.com/open-graph-generator/ * FB分享資訊抓取: https://developers.facebook.com/tools/debug/ * Google analysis: ### 靈感 * 各種設計 Pinterest https://www.pinterest.com/ * 動態/介面設計 dribbble https://dribbble.com/ * 超強大網頁 awwward http://www.awwwards.com/ ### 一些不錯的線上教學資源 * JavaScript 30 days https://javascript30.com/ > 免費的30個小JS Project,訓練實作能力並且使用純js * W3school http://www.w3schools.com/ ## 單元完成報到區 Project集合繳交區: 2017.awiclass.monoame.com

    Import from clipboard

    Advanced permission required

    Your current role can only read. Ask the system administrator to acquire write and comment permission.

    This team is disabled

    Sorry, this team is disabled. You can't edit this note.

    This note is locked

    Sorry, only owner can edit this note.

    Reach the limit

    Sorry, you've reached the max length this note can be.
    Please reduce the content or divide it to more notes, thank you!

    Import from Gist

    Import from Snippet

    or

    Export to Snippet

    Are you sure?

    Do you really want to delete this note?
    All users will lost their connection.

    Create a note from template

    Create a note from template

    Oops...
    This template is not available.


    Upgrade

    All
    • All
    • Team
    No template found.

    Create custom template


    Upgrade

    Delete template

    Do you really want to delete this template?

    This page need refresh

    You have an incompatible client version.
    Refresh to update.
    New version available!
    See releases notes here
    Refresh to enjoy new features.
    Your user state has changed.
    Refresh to load new user state.

    Sign in

    Forgot password

    or

    By clicking below, you agree to our terms of service.

    Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in via Google

    New to HackMD? Sign up

    Help

    • English
    • 中文
    • Français
    • Deutsch
    • 日本語
    • Español
    • Català
    • Ελληνικά
    • Português
    • italiano
    • Türkçe
    • Русский
    • Nederlands
    • hrvatski jezik
    • język polski
    • Українська
    • हिन्दी
    • svenska
    • Esperanto
    • dansk

    Documents

    Tutorials

    Book Mode Tutorial

    Slide Mode Tutorial

    YAML Metadata

    Contacts

    Facebook

    Twitter

    Feedback

    Send us email

    Resources

    Releases

    Pricing

    Blog

    Policy

    Terms

    Privacy

    Cheatsheet

    Syntax Example Reference
    # Header Header 基本排版
    - Unordered List
    • Unordered List
    1. Ordered List
    1. Ordered List
    - [ ] Todo List
    • Todo List
    > Blockquote
    Blockquote
    **Bold font** Bold font
    *Italics font* Italics font
    ~~Strikethrough~~ Strikethrough
    19^th^ 19th
    H~2~O H2O
    ++Inserted text++ Inserted text
    ==Marked text== Marked text
    [link text](https:// "title") Link
    ![image alt](https:// "title") Image
    `Code` Code 在筆記中貼入程式碼
    ```javascript
    var i = 0;
    ```
    var i = 0;
    :smile: :smile: Emoji list
    {%youtube youtube_id %} Externals
    $L^aT_eX$ LaTeX
    :::info
    This is a alert area.
    :::

    This is a alert area.

    Versions

    Versions and GitHub Sync

    Sign in to link this note to GitHub Learn more
    This note is not linked with GitHub Learn more
     
    Add badge Pull Push GitHub Link Settings
    Upgrade now

    Version named by    

    More Less
    • Edit
    • Delete

    Note content is identical to the latest version.
    Compare with
      Choose a version
      No search result
      Version not found

    Feedback

    Submission failed, please try again

    Thanks for your support.

    On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

    Please give us some advice and help us improve HackMD.

     

    Thanks for your feedback

    Remove version name

    Do you want to remove this version name and description?

    Transfer ownership

    Transfer to
      Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

        Link with GitHub

        Please authorize HackMD on GitHub

        Please sign in to GitHub and install the HackMD app on your GitHub repo. Learn more

         Sign in to GitHub

        HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.

        Push the note to GitHub Push to GitHub Pull a file from GitHub

          Authorize again
         

        Choose which file to push to

        Select repo
        Refresh Authorize more repos
        Select branch
        Select file
        Select branch
        Choose version(s) to push
        • Save a new version and push
        • Choose from existing versions
        Available push count

        Upgrade

        Pull from GitHub

         
        File from GitHub
        File from HackMD

        GitHub Link Settings

        File linked

        Linked by
        File path
        Last synced branch
        Available push count

        Upgrade

        Danger Zone

        Unlink
        You will no longer receive notification when GitHub file changes after unlink.

        Syncing

        Push failed

        Push successfully