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-8. <標籤>特性、區塊特性
標籤的 display 屬性有很多種,最基本最常用的是以下三種,至少以下三種必須先了解清楚。
inline
(2)行中局部內容
inline
display: inline
inline 是一行中的局部內容,沒有區塊特性。
寬高邊距特性
width 寬度、height 高度 無法設定
。
margin、padding 左右可以設定。
margin、padding 上下的設定並不佔攄父元素空間,
類似於文字浮貼,margin、padding 飄起的效果。
line-height 行高 屬性
inline 屬性的元素有
行高
的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
因為 inline 特性的物件屬於內容節點,
必須由屬於 block 特性的父層定義
text-align: center
。
有哪些元素?
a、span ......
block
(1)段落式區塊
block
display: block
block 是段落式區塊特性。
寬高邊距特性
預設:
寬度100% 高度0
。
就算寬度縮短,整個橫向區域還是這個區塊的,區塊外圍是 margin。
line-height 行高 屬性
屬於 block 特性的元素本身沒有 inline 屬性,不會產生多餘的留白距離。
當然區塊內的文字或影像是屬於有 inline 特性的物件,是有行高的存在。
水平置中的方式
由本身元素定義
margin-left: auto; margin-right: auto;
。
有哪些元素?
body、h1 ~ h6、p、ul、ol、li、div、header、footer、nav、main、aside、section、article、figure ......
inline-block
(3)行中局部區塊
position
display: inline-block
inline-block 是同行中的局部區塊。在 inline 特性中包含 block 的特性。
寬高邊距特性
width 寬度、height 高度 可以設定
。
margin、padding 四周皆可以設定。
line-height 行高 屬性
inline-block 屬性的元素有
行高
的存在,與前後元素或是父元素會產生留白距離。
水平置中的方式
仍然屬於內容節點,必須由屬於 block 特性的父層定義
text-align: center
。
有哪些元素?
img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......
範例參考
。
go TOP