飛霆設計學院：課程介紹
HTML / CSS
什麼是 HTML / CSS？
建立網頁的基礎語言，用於描述網頁的結構與內容，例如標題、段落、圖片、連結等。而CSS則是用來控制網頁外觀和編排的語言，CSS可控制元素的顏色、字體、間距、排版等。
- 特性：HTML用於結構化網頁內容，CSS用於設計和編排網頁
- 應用：所有網頁和網站的基礎
- 適合對象：任何對網頁開發感興趣的學生，是學習網頁開發的基礎
為什麼要學習 HTML / CSS？
如果要建立一個網頁就需要HTML和CSS搭配使用，HTML提供網頁的結構和內容，CSS負責樣式和編排。HTML如同網頁的骨骼，而CSS則為皮膚與外觀。
HTML / CSS 課程特色
HTML / CSS 入門班
讓學生掌握HTML和CSS技術，能夠製作更複雜和互動的網頁
1.
課程目標與介紹
- 介紹課程目標和學習方法
- HTML和CSS在網頁設計中的角色
- 有趣的網頁介紹，激發學生的興趣
2.
HTML 基礎
- HTML文件結構
- HTML文件的基本結構和重要標籤
- 小練習：手寫一個簡單的HTML頁面
- 基本標籤
- 介紹標題、段落、列表、超連結和圖片標籤
- 小練習：創建一個個人介紹頁面，包含文本和圖片
- 表格和表單
- 介紹表格和表單標籤，講解其應用
- 小練習：製作一個簡單的聯絡表單
- 多媒體嵌入
- 介紹音訊和影片標籤，展示如何嵌入多媒體內容
- 小練習：在頁面中嵌入一段喜歡的音樂或影片
3.
CSS 基礎
- CSS語法和選擇器
- 介紹CSS的基本語法和選擇器
- 小練習：設計一個簡單的頁面，應用不同的選擇器
- 文字樣式設置
- 說明如何設置字型、字型大小、字型顏色等
- 小練習：美化個人介紹頁面的文本
- 顏色和背景設置
- 介紹顏色和背景設置的方法
- 小練習：為頁面設置吸引人的背景顏色和圖像
- 盒模型
- 解釋CSS盒模型的概念和應用
- 小練習：調整內邊距、邊框和外邊距改變元素設計
- 簡單設計
- 介紹區塊元素和內聯元素的設計方式
- 小練習：製作一個帶有標題、正文和側邊欄的頁面
4.
網頁實際製作
- 項目規劃
- 選擇一個有趣的主題，如個人愛好或寵物介紹
- 設計網頁的結構和內容
- 網頁製作
- 按步驟製作完整的網頁，包括頁面結構設計、內容添加、樣式設置等
- 小練習：分組合作，每組負責網頁的一部分，最後合併成一個完整的項目
HTML / CSS 應用班
掌握進階的Android開發技術，創作出令人驚豔的APP，並分享到Google Play Store
1.
高級 HTML 技術
- HTML5新特性
- 介紹HTML5新增的語義標籤和新特性
- 小練習：使用新標籤重新設計一個已有頁面
- 高級表單技術
- 說明表單的新特性和高級應用
- 小練習：設計一個包含驗證功能的註冊表單
- 嵌入媒體
- 展示如何嵌入YouTube影片和地圖
- 小練習：在頁面中嵌入學校地圖和喜歡的影片
2.
高級 CSS 技術
- 進階選擇器
- 介紹進階的CSS選擇器和用法
- 小練習：應用不同選擇器來設計一個多層次的菜單
- CSS3特性
- 說明CSS3新增的邊框、陰影、圓角、漸層和變形等特性。
- 小練習：使用這些特性設計一個美觀的按鈕組合
- Flexbox設計
- 詳細介紹Flexbox的方式和屬性
- 小練習：使用Flexbox製作一個響應式的圖片畫廊
- 響應式設計
- 介紹媒體查詢和響應式設計的基本概念
- 小練習：將之前的項目改造成響應式網頁，適應不同的螢幕尺寸
3.
網頁設計最佳實踐
- 網頁設計原則
- 介紹網頁設計的基本原則，如版面設計、配色方案和字型選擇
- 小練習：為之前的項目應用這些設計原則，提升頁面美感
- 無障礙網頁設計
- 說明無障礙設計的重要性和方法
- 小練習：為項目添加無障礙屬性，提升可訪問性
4.
綜合項目實踐
- 項目選擇與規劃
- 選擇一個實際應用的項目，如個人網站、簡單的商店頁面等
- 規劃項目結構和功能
- 項目開發
- 按計劃進行項目開發，實現頁面佈局、互動效果和響應式設計等功能
- 小練習：分組合作，每組負責項目的一部分，最終合併成一個完整的作品，並進行展示和分享
HTML / CSS 完課之後
只要是設計或管理網頁都需要使用到這兩種程式語言
學習HTML和CSS對未來可以從事哪些工作？前端開發工程師、網頁設計師、前端 UI/UX 設計師