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. Carousel 輪播設計
3-8. 網格分配的圖文排版
3-9. Navs 分頁標籤的設計
3-10. 影像排版與互動特效
3-11. Modal 互動視窗的設計
3-12. Tooltips 工具提示的設計
3-13. Collapse 折疊式面板的設計
3-14. Bootstrap 其他功能多認識
3-15. 還有哪些 RWD 套件？
3-16. 網站上傳
4.第四階段
==== 以 w3.css 半套件協助專案設計 ====
4-1. 網站規劃工作
4-2. 網站環境準備工作
4-3. 認識 w3.css
4-4. 準備首頁的基本框架
4-5. Navigation Bars 的設計
4-6. Sidebar 的設計
4-7. 共用項目獨立成檔案
4-8. 首頁: 寬度滿版的 Slider 設計
4-9. 首頁: 左右分欄的設計
4-10. 首頁: 縱向式 Carousel 的設計
4-11. 首頁: 多組 Tabs 的設計
4-12. 影片介紹: 影片清單的播放
4-13. 全球賽事: 交叉縱橫的收合面板
4-14. 新車展場: 瀑布流排版的設計
4-15. 新車展場: 捲動進場視差動態效果
4-16. 新車展場: 軌跡移動的影像展現
4-17. 留言聯絡: 留言表單的設計運用
5.第五階段
=== 就業接案前再加強學習 ===
5-1. Sticky 黏性選單的設計
5-2. 認識 SVG
5-3. 認識 Canvas
5-4. 認識 Pug (Jade)
5-5. 認識 Sass ＆ Less
5-6. 認識 Vue.js
5-7. 社群網站的連結
5-8. 網站優化再加強
---配合簡報P1~15
5-9. 配合 SEO 再調整
---配合簡報P16~19
3-6. Navbar 導覽列
參考：
Bootstrap(中)
、
w3schools(英)
、
RUNOOB(中)
1. 導覽列的基本結構與顏色
2. 增加右側一組的選單
3. 增加下拉式子選單
4. 選單項目導覽整頁區段的捲動
5. 滑動監聽=>導覽按鈕對應呈現，參考：
Bootstrap(中)
、
w3schools(英)
、
RUNOOB(中)
go TOP
WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞
