載入外部圖片方式
/courses/666803/lectures/14726044/hotmart_lecture_video_download_link/29170832
666803
/courses/666803/lectures/14726044/hotmart_lecture_video_download_link/74876261
666803
使用 HTML、CSS 開發一個網站
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 常用語法
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 精神時光屋
網頁排版技巧 Part II
切圖技巧
-
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)
-
第六章測驗
表格與表單設計技巧
CSS3技巧
最後，讓你的網頁變得更專業
接下來，你還可以學什麼？
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基礎教學
CSS 常用語法
使用 CSS 變更 HTML 標籤特性