HTML 網頁設計新手村

你是否曾經想接觸網頁原始碼，但發現自己不知從何下手呢？在第一階段中 Amos 老師將會解釋 HTML5 的結構，並建立網頁語意與各個網頁標籤的重要基礎觀念，融會貫通後再進行網頁架構的撰寫，讓你學習不走冤枉路！

此外也會帶領同學們如何使用網頁編輯軟體「VScode」，使用純文字編輯器撰寫網頁原始碼，打好網頁開發基礎！

瞭解 HTML5 架構後，要讓網頁有美美的顏色與排版，最不可或缺的就是 CSS 樣式，但到底什麼是 CSS？又應該把 CSS 檔案如何套用在 HTML 上呢？在本階段都會詳細的告訴你！

舉凡樣式的寫法與超重要的樣式優先權、區塊與行屬性，每一項都是網頁開發的根本，身為網頁初心者絕對不可錯過的精華課程！

初學網頁設計，在克服了一開始的 HTML5 架構與 CSS 樣式套用後，另一大關卡就是分析網頁的結構，並將各個區塊排到應該在的地方，在這個階段將會帶領大家認識排版兩大神器「定位屬性」與「Flex 彈性排版」，學會三大排版方式，讓你不再困擾於理不清的排版問題，網頁設計開發隨心所欲！

📘 一、​HTML5 是什麼

• 關於網頁二三事

• HTML5 的結構

• HTML5 觀念一點通

• 各式網頁標籤意義

• 如何撰寫一個具有意義的網頁

• 語意的重要性

• 何謂 SEO

• SEO 與網頁的關係

📘 二、變數型撰寫網頁的重要習慣

• 原始碼縮排

• VScode 操作應用

• 為何我們需要專有名詞

• 溝通與發問的技巧

📘 三、CSS 樣式入門

• 樣式的寫法

• 樣式的重要觀念

• 超重要的樣式優先權

• 重要的區塊與行屬性

📘 四、重要的 CSS 選取器與實務應用

• 基礎 CSS 選取器

• 選取器的效能

• 選取器的應用

• 如何有效的選取網頁物件

• 更多實用的選取器

📘 五、定位屬性

• 固定定位特性

• 絕對定位特性

• 相對定位特性

• 定位應用實例：

  • 蓋版廣告

  • 側邊廣告

  • 商品標籤

📘 六、Flex 彈性排版

• Flex 彈性排版的重要觀念

• 什麼是彈性排版？

• 多欄式版面製作

• 排版起手式與原理

• 直排橫排隨你變

• 換行與注意事項

📘 七、排版實務

• 選單製作

• 兩欄式版面入門

• 三欄版面排版實務

• 商品頁面排版實務

• 單頁網頁製作

• 加碼內容（依課程進度動態增減）：Grid 排版