延壽校 | 安和校 | 大直校 | 重慶校
— 什麼是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響應式網頁功能，輕鬆學會網頁製作與開發。
— CSTA 指標 網站開發 課程的對應 —
這套專為國中以上青少年設計的網站開發課程，依照學習階段與能力發展，分為三大課綱，從零開始扎實打基礎，到最終能獨立完成具備互動功能的個人網站，為 AI 世代的資訊素養與數位表達能力做好萬全準備。 每一個課綱強調「扎實觀念培養與實作」，讓孩子能在有趣、實作的環境中，逐步建立起前端設計概念、網站架構邏輯與專案開發能力。
L1 - 網頁樣式
HTML 5 基礎觀念與實作
- 從基本的網際網路知識，認識網址與https等安全知識。
- 學習基本html各式標籤，以及內建功能。
- 認識切版原理，動手實作更加了解網頁架構與撰寫流程。
- CSTA 指標: 1A-AP-08, 1B-AP-08, 1A-AP-11
L2 - 網頁樣式
CSS 3 基礎觀念與實作
- 認識CSS元素選擇器以及權重順序。
- 實作20種網頁屬性變化與功能。
- 學習RWD網頁操作觀念與視窗尺寸計算。
- CSTA 指標: 1A-AP-09, 1A-AP-11, 1A-AP-13, 1B-AP-13
L3 - 實戰演練
國中生的第一個網頁製作
- 培養從0到有，規劃一頁式網頁架構並實現。
- 活用CSS各項功能，使網頁具有設計美感。
- 學習套用外部js函式庫，製作具有簡易互動的網頁。
- CSTA 指標: 3A-AP-16, 2-AP-13 , 3A-AP-20
— 專案展示 —
html & css - 字體設計1
css功能運用：height / color / background / font-size/ font-weight / letter-spacing / text-align / text-shadow / display / justify-content / align-items
html & css - 字體設計2
css功能運用：height / color / background / background-image / background-clip / radial-gradient() / linear-gradient() / font-size/ font-weight / letter-spacing / text-align / text-shadow / display / justify-content / align-items
html & css - 多種按扭設計
css功能運用：color / background / font-size / font-weight / letter-spacing / text-align / text-decoration / box-shadow / border / border-radius / height / display / justify-content / align-items / flex-wrap / transition / transform / margin / padding / nth-of-type() / :hover
html & css - 動畫設計
css功能運用：color / background / font-size / font-weight / letter-spacing / text-align / width / height / transform / nth-of-type() / animation / @keyframes
html & css - 排版設計(使用Flexbox)
css功能運用：color / background / font-size / font-weight / letter-spacing / text-align / text-decoration / line-height / box-shadow / border / border-radius / height / display / justify-content / align-items / flex-direction / transition / transform / margin / padding
html & css - 排版設計(使用Grid)
css功能運用：color / background / font-size / font-weight / letter-spacing / text-align / text-decoration / line-height / box-shadow / border / border-radius / height / display / grid-template-rows /grid-template-columns / grid-rows / grid-columns / gap / margin / padding
— 常見問答 FAQ —
孩子需要有程式或網頁基礎嗎？
完全不需要，L1 從零開始引導。
需要自備電腦嗎？
課程是否與升學有關聯？
學完本課程，孩子就能會寫網頁嗎？
— 延伸學習 —
從一行標籤開始，打造自己的第一個網站
每天在用的網站，孩子也能自己做！從了解網站的組成，到親自寫出排版與配色，孩子將學會怎麼用簡單的語法創造出驚人的畫面，轉換角色，從使用者變成創作者。
立即填表洽詢，索取超早鳥優惠
