延壽校 | 安和校 | 大直校 | 重慶校
— 什麼是HTML 與 CSS —
HTML、CSS兩者被稱為網頁核心的兩大工具，HTML是用來寫網頁的主架構，文字、圖片、影片與連結等等的功能，都是透過HTML做撰寫。CSS則是用來美化視覺與排版，它提供了強大的編排、顏色、特效等功能，讓網頁看起來更加豐富且更有設計感，並且內建支援RWD(Responsive Web Design 響應式網頁)功能，幫助我們更有效率的寫出跨裝置平台的網頁。
為什麼國中生
適合學網站開發？
現今資通訊發達的時代，網頁是任何一間企業或品牌必備的一個服務，透過網頁讓消費者認識企業與產品是最快的方式，因此學會網站開發可以增加孩子在未來的競爭。而本課程所學習的HTML與CSS本身並不是程式語言，HTML是超文本標籤語言(Hyper Text Markup Language)，CSS則是階層式樣式表(Cascading Style Sheets)，所以語法上不像程式語言需要學習扎實的計算機概論與資料結構，簡單、易讀的特性，讓它成為大人與小孩最常接觸的第一個電腦語言課程。
孩子在網站開發
課程中會學會：
- HTML 5 常用標籤與內建功能
- CSS 3 常用樣式功能與設計
- 網頁常用排版功能與實作
- RWD響應式網頁切版邏輯與概念
- 外部資源與函式庫引用
— 招生對象 —
7年級 - 高一
— 學習目標及內容 —
培養孩子網頁切版的邏輯與概念，且具有RWD響應式網頁功能，輕鬆學會網頁製作與開發。
— 網站開發 課程大綱 —
這套專為國中以上青少年設計的網站開發課程，依照學習階段與能力發展，分為三大課綱，從零開始扎實打基礎，到最終能獨立完成具備互動功能的個人網站，為 AI 世代的資訊素養與數位表達能力做好萬全準備。 每一個課綱強調「扎實觀念培養與實作」，讓孩子能在有趣、實作的環境中，逐步建立起前端設計概念、網站架構邏輯與專案開發能力。
L1 - 網頁基礎
HTML 5 基礎觀念與實作
1. 認識網址與https等安全知識。
2. 學習html各式標籤，及內建屬性功能。
3. 認識基本切版原理，了解網頁開發架構與撰寫流程。
- 1-1 認識網頁與檔案建置
- 1-2 認識html與常用標籤
- 1-3 表格製作
- 1-4 表單製作
- 1-4 表單製作
- 1-5 基本切版觀念與實作
L2 - 網頁樣式
CSS 3 基礎觀念與實作
1. 認識CSS元素選擇器以及權重順序。
2. 學習與實作20種網頁屬性變化與功能。
3. 學習響應式網頁(Responsive Web Design)操作觀念與視窗尺寸計算。
- 2-1 認識CSS
- 2-2 顏色與背景
- 2-3 寬度與高度
- 2-4 外距與內距
- 2-5 文字樣式
- 2-6 邊框與陰影
- 2-7 CSS複合選擇器
- 2-8 偽類與偽元素
- 2-9 過渡與變形
- 2-10 定位與顯示
- 2-11 彈性盒子(flexbox)
- 2-12 格線佈局(grid)
- 2-13 媒體查詢(RWD設計)
- 2-14 CSS動畫
- 2-15 浮動
L3 - 網頁實作
國中生的第一個網頁製作
1. 從0到有，規劃一頁式網頁架構並實現。
2. 活用CSS各項功能，使網頁更有設計感。
3. 套用外部資源與簡易js函式庫，製作更豐富且具有簡易互動的網頁。
- 3-1 小頁面實戰
- 3-2 一頁式網頁實戰 I
- 3-3 一頁式網頁實戰 II
- 3-4 一頁式網頁實戰 III
- 3-5 一頁式網頁實戰 IV
- 3-6 一頁式網頁實戰 V
- 3-7 一頁式網頁實戰 VI
- 3-8 一頁式網頁實戰 VII
- 附錄Bonus 網頁實用模組與函式庫
— 專案展示 —
html 和 css 中進行字體設計
設定高度、顏色、背景、字體大小、字體粗細、字距、對齊方式、文字陰影、排版方式
html 和 css 中進行字體設計
設定高度、顏色、背景、背景圖案、漸層背景、字體大小、字體粗細、字距、對齊方式、文字陰影、排版方式
html 和 css 製作多種按扭設計
設定高度、顏色、背景、字體大小、字體粗細、字距、對齊方式、區塊陰影、邊框設計、邊框圓角、排版方式、排版換行、過度時間、變化、外距、內距、指定元素類別
html 和 css 中製作動畫設計
設定寬度、高度、顏色、背景、字體大小、字體粗細、字距、對齊方式、指定元素類別、動畫設定、動畫關鍵影格
html 和 css 排版設計(使用Flexbox)
設定高度、顏色、背景、字體大小、字體粗細、字距、對齊方式、行距、區塊陰影、邊框設計、邊框圓角、排版方式、主軸排列、次軸排列、排列方式、排版換行、外距、內距、指定元素類別
html 和 css 中排版設計(使用Grid)
設定高度、顏色、背景、字體大小、字體粗細、字距、對齊方式、行距、區塊陰影、邊框設計、邊框圓角、排版方式、格線(行)佈局、格線(列)佈局、格線(行)設定、格線(列)設定、間隙、指定元素類別
— 常見問答 FAQ —
孩子需要有程式或網頁基礎嗎？
完全不需要，L1 從零開始引導。
需要自備電腦嗎？
課程是否與升學有關聯？
學完本課程，孩子就能會寫網頁嗎？
— 延伸學習 —
從一行標籤開始，打造自己的第一個網站
每天在用的網站，孩子也能自己做！從了解網站的組成，到親自寫出排版與配色，孩子將學會怎麼用簡單的語法創造出驚人的畫面，轉換角色，從使用者變成創作者。
立即填表洽詢，索取超早鳥優惠
