MENU
WEB
◆ TS Library ◆
熱衷分享 ◆ 享受教學相長 ◆
無形的網絡擁有熱情溫度的傳遞
網頁設計基礎講義
第一階段(上)
==== 熟悉 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 佈局探討
第一階段(下)
==== 以下介紹原歸納在 1-12 ====
(1). CSS3 區塊大小模式
(2). CSS3 Flex Box 彈性框的概念
(3). CSS3 transform 2D變形
(4). CSS3 transition 轉場過程
(5). CSS3 animation 動畫
(6). CSS3 背景樣式屬性
(7). CSS3 多媒體查詢
(11). margin 三心二意
(12). overflow 的探討
(13). 連續影像之間為什麼有距離
(14). 各種單位的探討
(15). % 分母依據的探討
(16). 對齊置中的探討
(17). CSS 函數的加強學習
(18). 整理 RWD 的設計方式
第二階段
==== 學習 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. 【事件】多了解
第三階段
==== 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-1. 運用 Google 表單
4-2. 運用外掛 Slick Slider
4-3. 運用外掛 Swiper Slider
4-4. 瀑布流排版+進場動畫+點選展圖
4-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-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
] 。
設計是為了給大眾查看的,設計者應該隨時要了解 [瀏覽器] 使用趨勢,
桌機版
、
含掌上設備版
。
設計版面時,應該要了解使用者的 [螢幕設備解析度],
桌機螢幕使用趨勢
、
掌上設備螢幕使用趨勢
。
各式輸出設備多參考:【
screensiz.es
】、【
手機屏幕尺寸大全
】、【
Device Metrics
】
第一階段~第三階段的範例練習參考 [基礎框架版]
先來了解 margin 的三心二意?!
第四階段的 Flex Box 的介紹
加上第四階段,細部精緻調整的範例練習參考
第五階段的 Grid 網格佈局 的介紹,
建議晚點學習, 讓第一~四階段先熟悉一點, 再學習第五階段, 才不至於混淆。
以下是基礎課程中的練習檔案/網站,建議多參考多練習:
單頁基本範例的練習(複習):
參考範例__關於網頁設計(棕色版)
、
參考範例__關於網頁設計(藍色版)
網站基本版型風格的練習範例:
參考網站__Timothy Hotel
、
參考網站__締思膳食茗茶館
接下來的練習檔案/網站,建議應用本節的介紹多練習:
單頁基本範例的練習(複習):
練習範例__Cafe House
go TOP