使用 HTML、CSS 開發一個網站
講師：廖洧杰
- 高雄前端社群發起人
- 中華電信前端講師
- 高雄大學前端講師
- 十年實務經驗，授課時數超過一千小時
我將從這堂課程學到什麼？
- 有能力排出具專業、語意化、美觀的網頁設計
- 課程結束後，我們會提供給你一個完整的網頁設計稿，當你實作出網頁來後再轉交六角學院的講師們，我們會為您進行程式碼審視，以確保你吸收的網頁排版觀念是正確的。
- 了解設計網頁的脈絡，你隨時可以在社群裡發問問題，我們永遠都會在這裡！
- 獲得持續更新的講義教材，終身複習不會脫離趨勢的現代化線上課程
課程大綱
六角學院線上資源
Available in
days
days
after you enroll
2020 VS Code 網頁編輯器、HTML 基礎教學
Available in
days
days
after you enroll
- 課程最終任務說明
- 安裝 Chrome 瀏覽器 (2:15)
- 安裝 VS Code 編輯器 (3:36)
- 安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
- 開始撰寫 HTML (6:28)
- 撰寫 h1 標籤、 p 段落 (8:11)
- CodePen 教學 - 將你的程式碼分享給別人 (4:20)
- 建立 HTML 環境 (7:40)
- HTML 環境語法
- Emmet 載入環境語法 (6:29)
- 插入圖片，了解圖片路徑規則 (8:48)
- 載入外部圖片方式 (4:30)
- 在網頁上加上 a 連結標籤 (6:18)
- 段落 p 與連結 a 的混合應用 (3:08)
- 認識 ul li 列表標籤 (8:26)
- HTML 標籤教學 - 小節作業 (3:55)
2020 CSS 常用語法
Available in
days
days
after you enroll
2020 使用 CSS 變更 HTML 標籤特性
Available in
days
days
after you enroll
- 網頁容器介紹 (6:50)
- CSS Reset - 清空瀏覽器預設樣式 (11:42)
- display: block 區塊元素介紹 (12:39)
- display: inline 行內元素介紹 (12:15)
- display 容器特性 - 區塊跟行內 (5:49)
- div 與後代選擇器運用 (14:44)
- margin 產生外邊界距離 (11:52)
- padding 產生留白距離 (6:17)
- margin、padding 投影片介紹 (2:04)
- Box Model（盒模型）詳細介紹 (10:54)
- margin 0 auto 區塊水平置中 (10:15)
- text-align 文字水平調整 (5:16)
- 2020補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (5:11)
Flex 網頁排版技巧
Available in
days
days
after you enroll
- Flex 排版技巧介紹 (4:32)
- CodePen 講解 Flex 技巧 (1:47)
- Flex 外層屬性 (container) 介紹上集 (11:53)
- Flex 外層屬性 (container) 介紹下集 (9:20)
- 主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:14)
- flex-direction - 決定 flex 軸線 (6:16)
- justify-content - 決定主軸對齊方式 (11:45)
- 設計一個 Flex 並排選單吧！ (8:10)
- flex-wrap - 決定換行屬性 (4:29)
- align-items - 交錯軸對齊方式 (7:07)
- 透過 VS Code 插件，開啟一個即時預覽的 Web Server (5:02)
- Flex 練習前置作業 (9:26)
- Flex 小節作業 (16:50)
Flex 精神時光屋
Available in
days
days
after you enroll
網頁排版技巧 Part II
Available in
days
days
after you enroll
切圖技巧
Available in
days
days
after you enroll
- Photoshop 繪圖軟體下載流程。 備註：請先使用 CC試用版本，免費的CS2在新系統已失效。 (4:46)
- 備註
- Photoshop 切圖流程 (8:59)
- background 在 html 元素上載入背景圖片，設定寬高 (6:59)
- background-repeat：將圖片重複顯示，repeat-x (13:42)
- background-color：與背景圖片的混用 (9:24)
- background-position：移動 background 的位置 (4:28)
- background 縮寫教學 (2:37)
- 圖片取代文字技巧 - 以logo為例 (7:05)
- 圖片種類介紹 ( gif、jpg、png ) (10:34)
- 圖文並排範例
- 第六節作業 (2:00)
- 第六章測驗
表格與表單設計技巧
Available in
days
days
after you enroll
CSS3技巧
Available in
days
days
after you enroll
最後，讓你的網頁變得更專業
Available in
days
days
after you enroll
開發多頁式網站實戰講解
Available in
days
days
after you enroll
接下來，你還可以學什麼？
Available in
days
days
after you enroll
2022 網站架設全攻略
Available in
days
days
after you enroll
- 架設網站神器簡介 - GitHub Desktop (2:52)
- 註冊 GitHub 服務 (4:21)
- 部署網站(Mac 版)：GitHub Desktop 部署網站流程 (17:59)
- 部署網站(Windows 版)：GitHub Desktop 部署網站流程 (14:36)
- Mac、Win：如何更新網站、再新增一個網站空間 (10:28)
- 主動提交您的網站到 Google：Google Search Console (8:20)
- 尋找有效流量：整合 Google Analytics 服務，客戶來源一把抓 (8:38)
- 優化 SEO 3 技巧：讓頁面排名到最前面 (7:50)
- 六角六週年生日活動：您的鼓勵，是我們進步的最大原動力
-- 舊版課程章節分隔線 --
Available in
days
days
after you enroll
網頁編輯器、HTML基礎教學
Available in
days
days
after you enroll
CSS 常用語法
Available in
days
days
after you enroll
使用 CSS 變更 HTML 標籤特性
Available in
days
days
after you enroll
網頁排版技巧 Part I
Available in
days
days
after you enroll
基本條件
- 本課程將會使用 Chrome 網頁瀏覽器來除錯網頁內容
- 本課程將會使用 Sublime Text 3 編輯器來設計網頁
- 本課程適用於 Windows、OSX、Linux 的電腦系統
這門課程適合...
- 適合完全沒有設計、程式基礎的初學者
- 目標成為網頁設計師、前端工程師、軟體工程師
- 希望自己能夠從無到有設計一個網站
