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
響應式網頁前端設計【第一階段】
加強熟識HTML&CSS
HTML<標籤>語法格式
頭尾包含式標籤
<body>....</body> 網頁內容框
<h1>....</h1> 標題1的框架
<p>....</p> 段落文字內容的框架
<ul>....</ul> 項目清單群組的框架
<ol>....</ol> 編號清單群組的框架
<li>....</li> 清單中一項內容的框架
<div>....</div> 只是"框架"
無結尾單行式標籤
<meta> 檔頭資訊宣告設定
<br> 換行不換段
<hr> 分隔線
<img> 插入影像(圖片)
還有哪些 HTML 標籤呢?
【
HTML 標籤參考列表-英文版
】
【
HTML 標籤引導學習-英文版
】
【
HTML 標籤參考列表-簡中版
】
【
HTML5 新標籤參考列表-簡中版
】
【
HTML5 新標籤參考列表-TS版
】