MENU
WEB
◆ TS Library ◆
熱衷分享 ◆ 享受教學相長 ◆
無形的網絡擁有熱情溫度的傳遞
網頁設計基礎講義
1.第一階段
==== 熟悉 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 佈局探討
2.第二階段
==== 學習 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. 【事件】多了解
3.第三階段
==== 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.第四階段
===== 運用網路免費資與外掛 =====
4-1. 運用 Google 表單
4-2. 運用外掛 Slick Slider
4-3. 運用外掛 Swiper Slider
4-4. 瀑布流排版+進場動畫+點選展圖
4-5. 網站上傳
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. 認識職場延伸應用的前端程式框架
1-1. RWD 2022版本 課綱介紹
網頁技術日新月異，新版講義將陸續更新。
～另開新頁顯示互動式展收的課網介紹～
go TOP
WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞
