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-8. <標籤>特性、區塊特性
標籤的 display 屬性有很多種,最基本最常用的是以下三種,至少以下三種必須先了解清楚。
inline
(2)行中局部內容
inline
display: inline
inline 是一行中的局部內容,沒有區塊特性。
寬高邊距特性
width 寬度、height 高度 無法設定
。
margin、padding 左右可以設定。
margin、padding 上下的設定並不佔攄父元素空間,
類似於文字浮貼,margin、padding 飄起的效果。
水平置中的方式
因為 inline 特性的物件屬於內容節點,
必須由屬於 block 特性的父層定義
text-align: center
。
line-height 行高 屬性
有
行高
的存在,與前後元素或是父元素會產生留白距離。
參看:
相關行高的觀念與影響
有 inline 特性的元素才有 vertical-align 垂直對齊的需求。
有哪些元素?
a、span ......
block
(1)段落式區塊
block
display: block
block 是段落式區塊特性。
寬高邊距特性
預設:
寬度100% 高度0
。
就算寬度縮短,整個橫向區域還是這個區塊的,區塊外圍是 margin。
水平置中的方式
由本身元素定義
margin-left: auto; margin-right: auto;
。
line-height 行高 屬性
屬於 block 特性的元素本身沒有 inline 屬性,不會產生多餘的留白距離。
當然區塊內的文字或影像是屬於有 inline 特性的物件,是有行高的存在。
有哪些元素?
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 四周皆可以設定。
水平置中的方式
仍然屬於內容節點,必須由屬於 block 特性的父層定義
text-align: center
。
line-height 行高 屬性
有
行高
的存在,與前後元素或是父元素會產生留白距離。
參看:
相關行高的觀念與影響
有 inline 特性的元素才有 vertical-align 垂直對齊的需求。
有哪些元素?
img、iframe、button、表單內元素(input、select、textarea)、canvas、svg ......
範例參考
。
接下來學習的重要提醒:
❶ 觀念要了解,功能的分類要清楚,至少記住編碼的關鍵字即可。
❷ 設計前要構思 (目標是?題目是?)
❸ 設計前擬腳本 (以中文儘量詳細地描述出要做些什麼?)
❹ 設計時大膽嘗試 (忘記沒關係,有明確的腳本即可搜尋獲得)
❺ 設計時隨時注重觀察 (多多利用 Chrome 的檢查面板)
go TOP