Close ×
響應式網頁前端設計
第一階段
加強熟識HTML&CSS
01. 先準備網站的資料夾
02. 相關的命名規則
03. 網頁的組成語言
04. 網頁基本框架排版的加強
04-01. HTML檔案基本架構
04-02. HTML<標籤>語法格式
04-03. CSS 設計的語法與操作
04-04. <標籤>特性的基本區分
04-05. 網頁排版思維流程總整理
04-06. CSS設計的優先權問題
05. HTML&CSS 參考整理表
05-01. HTML標籤元素整理表
05-02. CSS 選取器 列表介紹
05-03. CSS 屬性 分類整理表
05-04. CSS 單位 參考整理表
05-05. CSS屬性的瀏覽器支援列表
05-06. Can I Use 瀏覽器支援查詢
06. 新版本新功能之範例
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. 認識JavaScript程式語言
01-01. 認識JavaScript語言
01-02. 程式語言的三個基本能力
01-03. 程式語言的記憶能力
01-04. 程式語言的判斷能力
01-05. 程式語言的重複能力
01-06. 物件的三個基本控制
01-07. 加強認識JavaScript物件
01-08. 認識網頁DOM框架結構
02. 認識函式庫jQuery
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. 練習JS的範例
03-01. JS顯示時間的範例
03-02. jQuery物件的基本控制
03-03. jQuery物件的自定動畫
03-04. jQuery全頁滑動
第三階段
Bootstrap協助專案設計
01. 網站規劃工作
02. 網站環境準備工作
03. Bootstrap功能的基本使用
03-01. 主要框架容器
03-02. RWD網格系統
04. TS名錶酷愛網的設計
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. TS AUTOS 締思車訊網的設計
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. TS STAR 的設計
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 ===
☰
TS-MENU
響應式網頁前端設計【第三階段】
Bootstrap協助專案設計
網站規劃工作
目標網站實例:名錶酷愛網
網站規劃組織圖
網站架構圖建議軟體 ※熟悉是王道 ※線上編輯很方便 ※建議學習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的網站規劃組織圖只有一頁"首頁"index.html
本專案Web的WireFrames頁面線框圖