響應式網頁前端設計

第一階段
加強熟識HTML&CSS

01. 先準備網站的資料夾 02. 相關的命名規則 03. 網頁的組成語言

04-01. HTML檔案基本架構 04-02. HTML<標籤>語法格式 04-03. CSS 設計的語法與操作 04-04. <標籤>特性的基本區分 04-05. 網頁排版思維流程總整理 04-06. CSS設計的優先權問題

05-01. HTML標籤元素整理表 05-02. CSS 選取器列表介紹 05-03. CSS 屬性分類整理表 05-04. CSS 單位參考整理表 05-05. CSS屬性的瀏覽器支援列表 05-06. Can I Use 瀏覽器支援查詢

06-01. 選取器加強範例 06-02. CSS3 背景加強範例 06-03. CSS3 區塊大小模式 06-04. CSS3 多Columns排版 06-05. CSS3 Flex Box彈性框 06-06. CSS3 2D 變形 06-07. CSS3 3D 變形 06-08. 轉場過程呈現的動畫 06-09. animation動畫設計 06-10. 顏色漸層設計 06-11. 區塊及文字的陰影 06-12. 邊框的圓角與影像 06-13. 有關文字內容 06-14. 多媒體查詢

第二階段
學習JavaScript&jQuery

01-01. 認識JavaScript語言 01-02. 程式語言的三個基本能力 01-03. 程式語言的記憶能力 01-04. 程式語言的判斷能力 01-05. 程式語言的重複能力 01-06. 物件的三個基本控制 01-07. 加強認識JavaScript物件 01-08. 認識網頁DOM框架結構

02-01. 常見JavaScript函式庫 02-02. 認識 jQuery 02-03. jQuery的撰寫精神 02-04. jQuery的選取器 02-05. jQuery的相對選取 02-06. jQuery基本常用事件 02-07. 內容的取得與改變 02-08. 樣式的取得與改變 02-09. jQuery基本動畫 02-10. jQuery自定動畫 02-11. 偵測物件的寬高尺寸 02-12. 偵測物件的座標距離

03-01. JS顯示時間的範例 03-02. jQuery物件的基本控制 03-03. jQuery物件的自定動畫 03-04. jQuery全頁滑動

第三階段
Bootstrap協助專案設計

01. 網站規劃工作 02. 網站環境準備工作

03-01. 主要框架容器 03-02. RWD網格系統

04-01. 準備首頁第一層框架 04-02. Navbar導覽列的設計 04-03. Navbar導覽滑動頁面區段 04-04. 滿版影像Carousel輪播設計 04-05. 新消息網格分配的圖文排版 04-06. Navs分頁標籤的設計 04-07. 網格分配的影像排版與特效 04-08. Collapse折疊面板的設計 04-09. Modal互動視窗的設計 04-10. Tooltips工具提示的設計 04-11. 其他再加強

第四階段
w3.css協助專案設計

01. 網站規劃工作 02. 網站環境準備工作 03. 認識 w3.css

04-01. 準備首頁的基本框架 04-02. Navigation Bars的設計 04-03. 改良手機版的Nav為Sidebar 04-04. 將共用項目獨立成模組式檔案 04-05. 首頁：寬度滿版的 Slider 設計 04-06. 首頁：左右分欄的設計 04-07. 首頁：縱向式 Carousel 設計 04-08. 首頁：多組 Tabs 的設計 04-09. 影片介紹：影片清單的播放 04-10. 全球賽事：縱橫交叉動態式網格 04-11. 新車展場：瀑布流排版的設計 04-12. 新車展場：軌跡移動的影像展現 04-13. 留言聯絡：留言表單的設計 04-14. 品牌資訊：符合RWD的網格設計

第五階段
自行開發網站專案設計

01. 網站規劃工作 02. 網站環境準備工作 03. 加強熟識Animation

04-01. 準備首頁的基本框架 04-02. Header區的設計 04-03. 手機版的Header區設計 04-04. 第一區段動畫設計 04-05. 第二區段動畫設計 04-06. 第三區段視差捲動設計 04-07. 第四區段AJAX+動畫設計 04-08. 第五區段排版設計

第六階段
Pug(Jade)&Sass協助開發效率

---- 參考安裝部置 ---- 參考pug模板引擎的安裝與使用 ---- 參考pug介紹與安裝 ---- 參考Pug模板安裝與使用 ---- 30天掌握Sass語法 ---- Sass/SCSS 簡明入門教學

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第五階段】自行開發網站專案設計

網站規劃工作

目標網站實例：TopStar數位履歷網

網站規劃組織圖

網站架構圖建議軟體 ※熟悉是王道 ※線上編輯很方便 ※建議學習Axure(企業常用)

Office工具軟體：PowerPoint、Visio、Word...等。
平面設計軟體：Illustrator、Fireworks...等。
心智圖工具軟體：MindMaple、XMind、MindManager...等。
流程圖線上編輯器：Axure、Axure悠識代理、Cacoo、Gliffy、Diagramly...等。

網頁規劃線框圖

頁面線框圖建議軟體 ※熟悉是王道 ※線上編輯很方便 ※建議學習Axure(企業常用)

Office工具軟體：PowerPoint、Visio、Word...等。
平面設計軟體：Illustrator、Fireworks...等。
線框圖線上編輯器：Axure、Axure悠識代理、Cacoo、Google文件的範本庫、wireframe.cc...等。

本專案Web的網站規劃組織圖

本專案Web的WireFrames頁面線框圖