自動播放
自動完成
上一堂課程
完成並繼續課程
666803
使用 HTML、CSS 開發一個網站
六角學院線上資源
2020 課程更新：觀看順序大調整
2020 更新改版講解
課程最終任務說明
六角學院線上社團
Apple M1 觀看公告
2020 VS Code 網頁編輯器、HTML 基礎教學
課程最終任務說明
安裝 Chrome 瀏覽器 (2:15)
安裝 VS Code 編輯器 (3:36)
安裝 VS Code 套件 - 讓介面變成中文化 (4:17)
開始撰寫 HTML (6:27)
撰寫 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 常用語法
HTML 與 CSS 的差異 (3:37)
插入 CSS 檔案，先寫一個 h1 讓文字變色 (5:48)
CSS 寫法詳解介紹 (4:38)
新手常見 CSS 錯誤解析 (9:30)
HTML 標籤選擇器 (5:43)
擬態選擇器 :hover (6:07)
類別選擇器 (13:06)
使用 CSS 優化文字排版 (10:16)
在 HTML 標籤上加入線條 (8:10)
2020 使用 CSS 變更 HTML 標籤特性
網頁容器介紹 (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 網頁排版技巧
Flex 排版技巧介紹 (4:32)
CodePen 講解 Flex 技巧 (1:47)
Flex 外層屬性 (container) 介紹上集 (11:53)
Flex 外層屬性 (container) 介紹下集 (9:20)
主軸介紹 - 要熟練 Flex ，必修軸線技巧 (2:13)
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 精神時光屋
Flex 裡頭還可以包 Flex - 圖解教學 (9:46)
Flex 裡頭還可以包 Flex - 程式碼開發 (13:34)
Flex column 運用 (7:42)
Markman 章節補充
Markman 軟體教學 (4:23)
Flex 修煉時光屋提交與自我檢核
Flex 修煉時光屋提交作業注意事項
Flex 修煉時光屋 (39:33)
網頁排版技巧 Part II
使用絕對定位 / 相對定位 設計版型 (9:06)
相對定位、絕對定位元素技巧：z-index - relative、absolute (5:27)
簡報呈現相對定位跟絕對定位的技巧 (3:49)
使用 ul li 設計產品列表 (14:08)
絕對定位設計優惠價 (5:04)
position: fixed 技巧 (5:14)
第五章測驗
名片練習
切圖技巧
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)
第六章測驗
表格與表單設計技巧
認識 HTML 表格 (Table) 標籤 (7:36)
設定表格 (Table) 上的 CSS 樣式 (7:41)
表單 (Form) 簡介 (2:11)
表單三劍客：Form、輸入欄位、Submit (8:07)
Form、Text、Submit 範例程式碼
使用 label、placeholder 提升表單使用者體驗 (4:49)
label、placeholder 範例程式碼
表單元素：radio、checkbox (6:16)
表單元素：select、textarea (6:13)
使用 CSS 修改表單 (Form) 樣式 (10:40)
第七章測驗
CSS3技巧
CSS3 圓弧效果 (5:22)
CSS3 漸層效果 (6:43)
CSS3 陰影效果 (5:06)
使用 can I use 查詢 HTML、CSS 瀏覽器兼容度 (5:38)
使用 Statcounter 瀏覽各國瀏覽器趨勢 (8:05)
Statcounter 說明
最後，讓你的網頁變得更專業
CSS 權重觀念 (15:48)
如何規劃你的網頁結構 (4:50)
head 進階資訊設定 (9:39)
head 常用語法
十種初學者常犯的錯誤
最終作業寄送變更
最後一版PSD練習 (1:55)
最後一版PSD作業細節
最後一版作業PSD評分標準 (3:44)
網頁排版練習作業 - 個人履歷網頁設計
第九章測驗
開發多頁式網站實戰講解
前言介紹 (1:46)
環境架設 (6:42)
Layout (佈局) (4:48)
保持網頁靈活彈性的技巧 (2:59)
CSS 管理方法 (3:27)
總結 (2:04)
接下來，你還可以學什麼？
響應式網頁設計 ( Responsive Web Design )
如何從網路上找到適合自己的學習教材
網頁關鍵字速記表
2022 網站架設全攻略
架設網站神器簡介 - 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)
六角六週年生日活動：您的鼓勵，是我們進步的最大原動力
-- 舊版課程章節分隔線 --
舊版課程章節說明
網頁編輯器、HTML基礎教學
認識網頁編輯器 Sublime Text 3 ，來寫第一個 Hello word 網頁吧！ (8:32)
六角學院線上問答會資訊
認識 HTML 標籤，設計具有語意化的網頁結構 (16:33)
建立 HTML 環境，賦予網頁新生命 (10:25)
HTML 環境程式碼
插入圖片，了解圖片路徑與 HTML 屬性 (9:59)
加上連結，讓網頁開始具有互動性 (8:18)
認識 ul、li 清單標籤 (10:56)
作業：設計一個簡單網站吧 (3:58)
第一章測驗
CSS 常用語法
CSS 標籤選擇器 - 插入 CSS 檔案，讓文字變大變顏色吧！ (12:16)
套用第一個 Sublime Plugin，利用 emmet 提升寫 HTML、CSS 效率 (12:20)
CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式 (6:21)
CSS 擬態選擇器 - 設計 a 連結動作觸發樣式 (6:33)
使用 CSS 設定優化文字排版 (8:35)
在 HTML 標籤上加上線條 (border) (5:41)
作業：優化第一節作業吧！ (2:50)
第二章測驗
使用 CSS 變更 HTML 標籤特性
CSS Reset，讓所有瀏覽器都長得一致 (9:06)
行內元素 與 區塊元素的差異 (9:08)
DIV 與 SPAN 的使用時機、CSS 後代選擇器 (11:43)
使用 margin、padding 來推擠距離 (6:37)
Box Model（盒模型） (7:45)
使用 margin: auto 讓版型置中 (8:23)
作業：優化第二節作業吧 (3:04)
第三章測驗
補充教材：不想算盒模型的推擠？試試 CSS3 box-sizing 吧！ (9:02)
CODEPEN：線上撰寫網頁服務 (5:58)
網頁排版技巧 Part I
Float 浮動定位技巧 (6:39)
使用 clear 清除浮動 (7:37)
兩欄式、三欄式版面定位技巧 (8:48)
設計並排式選單 (10:12)
LOGO 與選單並排設計技巧 (8:47)
作業：設計一個三欄式版面，具有表頭表尾的版面吧！ (3:48)
第四章測驗
其他常見 clear 清除浮動效果
安裝 VS Code 編輯器
/courses/666803/lectures/14725809/hotmart_lecture_video_download_link/29170528
666803
VS Code 編輯器官網
完成並繼續課程