MENU
WEB
◆ TS Library ◆
熱衷分享 ◆ 享受教學相長 ◆
無形的網絡擁有熱情溫度的傳遞
網頁設計基礎講義
第一階段(上)
==== 熟悉 HTML、CSS，探討 RWD ====
1-1. 課綱介紹
1-2. 準備網站+命名規則+組成語言
1-3. HTML <標籤> 語法格式
1-4. HTML <標籤> 有哪些？(小字典)
1-5. CSS {樣式} 語法格式
1-6. CSS {樣式} 屬性有哪些？(小字典)
1-7. CSS 選取器 有哪些？(小字典)
1-8. <標籤> 特性、區塊特性
1-9. 網頁排版流程思維總整理
1-10. CSS 設計的優先權問題
1-11. 瀏覽器的支援狀況
1-12. CSS 新增功能與範例再學習
1-13. RWD 佈局探討
第一階段(下)
==== 以下介紹原歸納在 1-12 ====
(1). CSS3 區塊大小模式
(2). CSS3 Flex Box 彈性框的概念
(3). CSS3 transform 2D變形
(4). CSS3 transition 轉場過程
(5). CSS3 animation 動畫
(6). CSS3 背景樣式屬性
(7). CSS3 多媒體查詢
(11). margin 三心二意
(12). overflow 的探討
(13). 連續影像之間為什麼有距離
(14). 各種單位的探討
(15). % 分母依據的探討
(16). 對齊置中的探討
(17). CSS 函數的加強學習
(18). 整理 RWD 的設計方式
第二階段
==== 學習 JavaScript、jQuery ====
2-1. 認識 JavaScript 程式語言
2-2. 程式的三個基本能力
2-3. 物件的三個基本控制
2-4. function 的使用
2-5. 加強認識 JavaScript 物件
2-6. 加強認識網頁 DOM 框架結構
2-7. 常見 JavaScript 函式庫
2-8. 認識 jQuery 及撰寫精神
2-9. jQuery 的絕對性選取器
2-10. jQuery 的相對性選取方法
2-11. 【內容】的取得與改變
2-12. 【樣式】的取得與改變
2-13. 【動畫】的設計
2-14. 尺寸、位置的偵測
2-15. 全頁的滑動
2-16. 【事件】多了解
第三階段
==== Bootstrap完整套件協助專案設計 ====
3-1. 網站規劃工作
3-2. 網站環境準備工作
3-3. Bootstrap 主要框架容器
3-4. Bootstrap RWD 網格系統
3-5. 準備首頁第一層框架
3-6. Navbar 導覽列
3-7. Offcanvas 畫布 (側邊滑入選單)
3-8. Carousel 輪播設計
3-9. 網格佈局的圖文排版
3-10. Navs 分頁標籤的設計
3-11. 影像排版與互動特效
3-12. Modal 互動視窗的設計
3-13. Collapse 折疊式面板的設計
3-14. 表單的排版設計
3-15. Bootstrap 其他功能多認識
第四階段
===== 運用網路免費資與外掛 =====
4-1. 運用 Google 表單
4-2. 運用外掛 Slick Slider
4-3. 運用外掛 Swiper Slider
4-4. 瀑布流排版+進場動畫+點選展圖
4-5. 網站上傳
第五階段
==== 加強程式邁向前端工程師 ====
5-1. 加強多了解 JS 的變數與迴圈
5-2. 加強多了解function與箭頭函數
5-3. 加強多了解 JS 的物件與函數
==== JS 實例實作多練習 ====
5-4. Modal燈箱效果 / Gallery展示效果
5-5. Tabs 標籤面板互動呈現內容
5-6. Collapse / Accordion 面板效果
5-7. Slider 圖片輪播動態效果
==== 就業接案前再加強學習 ====
5-8. 網站系統規劃與重複物件共用模組化
5-9. 補充社群網站的連結
5-10. 認識 SVG 與網頁用圖再探討
5-11. 認識 Canvas 畫布與應用
5-12. 認識 Sass 協助提高工作效率
5-13. 認識職場延伸應用的前端程式框架
5-7. Slider 圖片輪播動態效果
淡入淡出的輪播效果 @jQuery
➤ PART-1 ： 自動輪播 【
Demo
】
➤ PART-2 ： 自動輪播 + 上下頁互動控制 【
Demo
】
左右滑動的輪播效果 @jQuery 控制 order
➤ PART-1 ： 自動向左滑動的輪播 【
Demo
】
➤ PART-2 ： 自動輪播 + 上下頁互動控制 【
Demo
】
go TOP
WEB