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-9. 網頁排版流程思維總整理
網頁的設計:先設計好區塊式的框架 > 接著再擺放圖文內容。
這一節介紹:設計框架的方法與選擇的技巧。
第一階段
基本區塊編排法
block
區塊預設由上而下排版
屬於 block 區塊框架的元素預設
由上而下排版
。
特性 and 分類
※這是段落式區塊的預設特性!
寬度預設100%
,
就算寬度變小,也仍然佔躆段落整個寬度,
左右多出來的部份為
margin
。
寬高 and 邊界距離
預設:
寬度width: 100%
、
高度height: 0
。
可運用 padding、margin 推動距離。
padding:
框架內部的留白邊界。
margin:
與前後物件的距離。
補充說明
position 預設為 static,表示沒有定位的能力,
不能使用 left、right、top、bottom、z-index屬性。
第二階段
左右分欄浮動法
float
左右分欄 Float 浮動排版
當區塊需要左右分欄排版時,
傳統的設計就是
float 浮動
。
特性 and 分類
※需要左右排列、或特別需要移到最右側時
浮動的分類:
浮動靠左
float:left;
浮動靠右
float:right;
浮動會有後遺症!
下方物件就算不浮動了,也會往上找空間浮。
解決方法一:
父管子
如果子元素皆為浮動設計,
或者是最後一個子元素是浮動設計,
那麼由
父元素設定 overflow:hidden;
或
overflow:auto;
,
但前提是父元素不能設定固定高度 height。
解決方法二:
弟管兄
當同一層前面物件(兄)是浮動設計,而後面物件(弟)不浮動了, 那麼由
後面物件(弟)設定 clear:both;
或是
clear:left;
或是
clear:right;
。
寬高 and 邊界距離
設定浮動之後的物件 (類似浮貼效果)
寬度為 0
,
由內容撐開,或是由CSS指定設計。
可運用 padding、margin 推動距離。
padding:
框架內部的留白邊界。
margin:
框架本身外部佔用的外邊界。
補充說明
position 仍然是 static,表示沒有定位的能力,
不能使用 left、right、top、bottom、z-index屬性。
第三階段
特別定位編排法
position
精準對位排版 Position
當物件需要固定在視窗中,希望不因捲動畫面而被移動,設定為
固定定位 fixed
。
當物件要相對父層且精準對位時,並且同層物件 (兄弟之間) 的位置互相不影響不推動,設定為
絕對定位 absolute
。
當物件要相對父層時,父層也需有
定位能力
,至於是哪一種定位,則依父層本身的需求判斷,可能是
fixed
,可能是
absolute
,也可能是
relative
。
特性 and 分類
【主動式需求】
:
固定定位
position: fixed;
浮動出來,
固定在畫面中
, 不被視窗捲動而移走。 top、bottom、left、right的定位是相對到視窗邊緣的距離, 如果是負值就會超出視窗。
絕對定位
position: absolute;
浮動出來,
不影響不推動同一層前後物件的位置
, top、bottom、left、right的定位是相對到有定位能力的父層元素邊緣的距離(如果父層沒有位能力, 則依續往外層找到有定位能力的祖先層)。
【被動式需求】
:
相對定位
position: relative;
不完全浮動出來,
會推動同一層前後物件的位置
, 還沒有設定上下左右定位時, 呈現的位置不會改變, top、bottom、left、right的定位是相對於自己, 對於方向感容易混淆者建議這裡就不要設定上下左右了。
靜態定位
position: static;
這是網頁元素 position 的預設,是沒有定位能力的,不能使用 left、right、top、bottom、z-index屬性。
【另外還有一個特殊需求】
:
粘性定位
position: sticky;
一開始沒有固定位置,會隨著畫面移動,移到指定位置時則改為固定定位,但,瀏覽器的支援度並不高,暫時不建議使用。
寬高 and 邊界距離
設定為 fixed、 absolute 定位的物件 (類似完全浮出的效果)
寬度為 0
,由內容撐開,或是由CSS指定設計。
可運用 padding、margin 來設定內外保留的邊界距離。
但主要是以 left、right、top、bottom、z-index 來定位。
補充說明
要設定
left、right、top、bottom、z-index
時,必須讓物件擁有定位能力,也就是必須設定
position
為
fixed 或 absolute 或 relative
。
w3schools 介紹 position 定位
RUNOOB 介紹 position 定位
其中
position: sticky 粘性定位
功能很不錯,
參考 [
w3schools
] 或 [
runoob
],
但瀏覽器的支援度並不高, 參看 [
Can I Use
]。
第四階段
彈性框架編排法
flex
Flex Box 彈性框架的排版
這不是一個預設的顯示特性,而是
必須設定才有
的框架。
Flex Box 是一個彈性、豐富且強大的排版功能。
由
父層框架來管理子層物件
。
父層物件擁有控制子元素:方向的管理、水平各種對齊、垂直各種對齊…等排版。
當以上傳統排版無法達成目標時,可以考慮這種排版。
特性 and 分類
※特性:框的等高、垂直對齊、方向控制。
父層元素設定
display: flex;
父層管理子元素的方向
flex-direction: ...
。
父管子的水平對齊
justify-content: ...
。
父管子的內容垂直對齊
align-items: ...
。
父管子的框架垂直對齊
align-content: ...
。
眾多功能另起頁面介紹 [
link
]。
寬高 and 邊界距離
父層物件的寬度依元素本身的顯示模式
display
來決定。
子元素受制於父元素,寬度依設定結果不一樣。
補充說明
W3C 介紹 Flex Box 彈性框排版
w3schools 介紹 Flex Box 彈性框排版
RUNOOB 介紹 Flex Box 彈性框排版
但 Flex Box 是新功能. 瀏覽器的支援度並不高, 參看 Can I Use: [
display: flex
]、 [
flex-direction
]、 [
justify-content
]。
第五階段
網格佈局編排法
grid
Grid 網格佈局排版
這不是一個預設的顯示特性,而是
必須設定才有
的框架。
這是一個基於二維網格智能性的佈局系統。
具有強大的功能來控制框及其內容的大小和位置。
由父層框架來管理子層物件。
這是一個突破性特殊的排版方式。
特性 and 分類
網格佈局的功能提供了一種機制,可以使用預測的大小調整行為,將佈局的可用空間劃分為列和行。
寬高 and 邊界距離
網格佈局是CSS的新佈局模型,
具有強大的功能來控制框及其內容的大小和位置。
與以單軸為導向的“ 靈活框式佈局”不同,
「網格佈局」針對二維佈局進行了優化,
二維佈局需要在內容上對齊。
補充說明
W3C 介紹 grid 網格佈局排版
w3schools 介紹 grid 網格佈局排版
但 Grid 是新功能. 瀏覽器的支援度並不高, 參看 Can I Use: [
display: grid
]、 [
grid-area
] 。
設計是為了給大眾查看的,設計者應該隨時要了解 [瀏覽器] 使用趨勢,
桌機版
、
含掌上設備版
。
設計版面時,應該要了解使用者的 [螢幕設備解析度],
桌機螢幕使用趨勢
、
掌上設備螢幕使用趨勢
。
第一階段~第三階段的範例練習參考 [基礎框架版]
先來了解 margin 的三心二意?!
進一步多了解 CSS 的選取器
&
加強認識 :xxx-child vs :xxx-of-type 選取器
第一階段~第三階段的範例練習參考 [精準進階版]
第四階段的 Flex Box 的介紹
第五階段的 Grid 網格佈局 的介紹,
建議晚點學習, 讓第一~四階段先熟悉一點, 再學習第五階段, 才不至於混淆。
go TOP