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
1-12. CSS 範例再練習 (依需求挑選學習)
01、區塊大小模式
02、Flex Box 彈性框
03、Grid 網格佈局排版
04、transform 2D變形
05、transform 3D變形
06、transition 轉場過程
07、animation 動畫
08、背景樣式
09、邊框的圓角與影像
10、顏色方面的新屬性
11、區塊及文字的陰影
12、RWD 多媒體查詢
13、RWD 多欄排版
14、有關文字內容
15、特殊但常用的選取器
16、margin三心二意的探討
17、overflow 的探討
18、影像之間距離的探討
19、各種單位的探討
20、% 分母依據的探討
21、對齊置中的探討
99、新功能練習範例
連續影像之間為什麼有距離
先了解 line-height 行高
同時有圖文時 line-height 行高在哪裡?
測試增加 line-height 來了解行高在哪裡?
設定圖文彼此之的垂直對齊!
解決連續影像之間的距離!
測試練習:
參考結果
go TOP