飛霆設計學院:課程介紹
HTML / CSS

什麼是 HTML / CSS?
建立網頁的基礎語言,用於描述網頁的結構與內容,例如標題、段落、圖片、連結等。而CSS則是用來控制網頁外觀和編排的語言,CSS可控制元素的顏色、字體、間距、排版等。
- 特性:HTML用於結構化網頁內容,CSS用於設計和編排網頁
- 應用:所有網頁和網站的基礎
- 適合對象:任何對網頁開發感興趣的學生,是學習網頁開發的基礎
為什麼要學習 HTML / CSS?
如果要建立一個網頁就需要HTML和CSS搭配使用,HTML提供網頁的結構和內容,CSS負責樣式和編排。HTML如同網頁的骨骼,而CSS則為皮膚與外觀。
HTML / CSS 課程特色
實用實作練習
創建個人介紹、崁入音樂影片、表單設計
專題式教學
製作個人網站、設計圖片畫廊、響應式網頁等
前沿技術與設計
掌握新技術,如CSS3邊框、陰影、圓角、漸層,掌握Flexbox和響應式設計等
綜合能力提升
邏輯思維+創造力+團隊合作+溝通能力+技術與知識
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 設計師
