【課程通知】HTML & CSS 下集 上架啦~
最新討論





課程目標
你是否曾經有過以下情況呢?
➔ 曾在瀏覽網頁時,對於畫面的介面設計感到很驚奇?
➔ 在瀏覽網頁時總是好奇到底要如何才能產出這些美觀的畫面設計?
➔ 在不經意拉動瀏覽器視窗,好奇網頁如何變化出不同樣式的風格?
現代科技已完全融入在我們的生活,幾乎人手一機
手機、電腦打開都是滿滿各種玲琅滿目的網頁,
到底要如何從眾多網頁中抓住瀏覽者的眼球呢?
此時「網頁設計」就將成為能夠讓你從眾多競爭者當中脫穎而出的重要技能!
「網頁設計」是指設計及建構一個網頁。舉例像是「網站架構、版面、顏色、字體、圖像」等等各元素的設計以及整體效果呈現。

此門課將帶你學會網頁設計技巧,
透過「 HTML」 與 「CSS」兩大網頁元素建造出實用又吸引人的介面,
從版面到顏色、從文字到圖像,馬上學馬上建!
課程介紹
1-1 | 第一個網頁快速上手 |
2-1 | HTML 網頁文件基本結構 |
7-1 | 套用 CSS |
20-2 | 商品圖文編排(下) |
21-2 | 直向圖文編排 |

此門課程將會使用 HTML5 與 CSS3 的版本帶你實際操作練習,除此之外,老師也會在影片分享 HTML 與 CSS 的新舊版本差異與重要觀念唷!
並從 HTML 基本架構寫法、語意標籤開始,到 CSS 基礎與進階樣式撰寫,帶著你完整認識並掌握各類語法,讓你的網頁整體不僅看起來更亮眼、吸睛外,還可以更精緻、多元!快來跟著影片中的教學步驟,打造專屬於你自己的網頁吧!

課程包含 21 個精華章節,每堂教學影片中不僅有張互賓老師詳細實作教學的內容,還有特製重點回顧與測驗評量來強化你的重要概念。
✦ 21 個章節
✦ 145 測驗評量
✦ HTML 實作_表單製作
✦ CSS 實作_版型切版實例
✦ HTML + CSS 實作_網頁介面製作


透過知識教學與實務應用雙管齊下,讓你學習如何完美操控 HTML & CSS 網頁兩大元素。

快跟上互賓老師的步伐,執行你的學習計畫:
Goal 01. 瞭解 HTML 與 CSS 在網頁設計中所扮演的角色並安裝相關工具
Goal 02. 瞭解 HTML 網頁基本結構及基本術語
Goal 03. 學習使用基本標籤、固定結構及功能性標籤、媒體類型標籤及其它
Goal 04. 熟悉製作 HTML 表單流程
Goal 05. 瞭解 CSS 基本套用模式
Goal 06. 學習撰寫文字、背景、溢載、特定標籤主題、效果等樣式
Goal 07. 與 HTML 結合實際練習製作固定式版型切版及網頁介面
平淡無奇的網頁想在這現今網路世界中抓住大眾的眼球而被看見,這情況就猶如在大海裡撈針,因此透過「成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)」這門課,讓互賓老師教你網頁設計眉角,讓你的網頁成為萬所矚目的焦點!

完成學習計畫後,你將能夠嘗試以下應用:
➤ 了解版本宣告、標籤、元素、屬性等概念,實現基本網頁架構。
➤ 了解基本標籤概念,實現網頁架構中斷行與水平分隔線、段落、內容標題等設定。
➤ 了解固定結構及功能性標籤概念,實現網頁中列表、清單、連結、圖片等設定。
➤ 了解媒體類型標籤概念,實現網頁中影片、音訊等設定。
➤ 了解選取器概念,實現網頁 CSS 套用方式。
➤ 了解 CSS 文字樣式概念,實現網頁中字體大小、粗體、樣式等設定。
➤ 了解 CSS 基礎排版樣式概念,實現網頁中各元素定位等設定。
➤ 了解 CSS 溢載樣式概念,實現網頁中內容超出區域等設定。
➤ 了解 CSS 特定標籤主題概念,實現網頁中連結、列表、表格等設定。
➤ 了解 CSS 背景樣式概念,實現網頁中背景顏色、圖片、大小、位置等設定。
➤ 了解 CSS 基本效果樣式概念,實現網頁中各元素的透明度、陰影等設定。
➤ 了解 transform 2D 概念,實現網頁中各元素的形變等設定。
➤ 了解 Flexbox 概念,實現網頁中進階排版樣式等設定。
最完整的知識體系
這門課程仰賴 TibaMe 多年廣受好評且開班不斷的就業養成班體系「Web/APP 前端設計工程師養成班」所產出的以就業為出發點且在完訓後能為業界公司所用的最完整的知識內容,在課程製作前便已先行依照多位業界專家與授課講師(專業面)協同資深的教學設計師(教學面)一同規劃的「課程地圖」進行教學課綱的擬定與討論,在課程教材與影片上也已經過層層審核,不會出現像坊間線上課程沒有完整的知識架構,著重面不夠全面或是單元間的銜接度不足的尷尬狀況。
最豐富的培訓經驗
TibaMe 有著傳承中壢資策會多年的培訓基因,加上 TibaMe 雲端科技培訓團隊近 5 年的雲端科技導入。並且有著多年來累積的堅強教學師資,在知識與科技上的跟進從來不會一成不變,我們相信一門專業領域知識很難在一、兩堂線上課程完整呈現與詮釋,但只要透過有步驟、有技巧的學習方式就能有效確保學員只要有心想學就可以有所收穫!
最有效的學習成果
- 學習目標|完成這門課程,讓你學會課程實作的知識及技能,每支課程影片都會有明確的學習目標,讓學員能完全掌握每支課程影片的教學目的與內容,可讓你將課程中的知識及技能實際應用在你的工作或專案上。
- 學習計劃|我們設計的學習計畫,可以結合 Google 日曆,學員可以依照系統建議設定的學習週期與時數,也可以依照個人學習步調安排學習的時間,以逐步完成這門課的學習,系統會主動提醒學習時段。
- 碎片學習|我們將課程教學影片每個知識點設計在 10 分鐘以內,利於學習者運用零碎時間學習,也方便使用電腦、平版或手機等跨裝置的學習。
- 學習檢核|每個單元章節都會有形成性評量測驗,透過 QUIZ 練習讓你清楚知道自己的學習狀況,知道哪些內容學的好,那些內容需要加強。
- 學習履歷|學員能夠透過學習履歷了解自我學習的歷程、足跡與習慣,進而掌握自己的能力的圖。此外,我們還會提供完課學員「學習證明」讓學員的努力更可以被看見並增加履歷的豐富度。
- 複習便利|因有著每支課程影片(知識點)的學習目標與精簡的教學影片,在用作複習時也更容易進行快速搜索,找出想要重複觀看的教學內容,不會有在查找一支影片時需花費大量時間觀看且不易找出所需教學內容的問題。
- 職涯增能|課程規劃以職場實際需求的知識和技能為目標,針對業界各職位所需的技能設計一步步引導的教學方式,讓你容易學會課程內容,也同時學會在職場上應用的知識及技能。
這門課程作為「成為前端工程師系列」的初階課程,課堂中不僅分別拆解及詳細解說 HTML 與 CSS 知識,還有以現有實際的功能案例進行演示網頁介面的實作技巧,並且每個教學章節都含有評量練習。全部內容包含了「 21 個章節、 158 支教學影片、145 個測驗評量」。準備好跟上腳步了嗎?我們將一同陪你一步一步踏入前端工程師世界並挖掘滿滿的網頁設計知識。
誰適合學習這門課程呢?
- 無設計、程式基礎的初學者
- 有設計或是程式基礎且對網頁設計有興趣者
- 嚮往網頁設計師、前端工程師、軟體工程師的職涯發展者
- 網頁設計領域的入門者
- 想自我進修專業能力者
- 想自己設計網站的 DIY 者
學習前需要有什麼基本能力呢?
- 熟悉 Windows 或 MacOS 作業系統基本操作
學習前需要準備什麼呢?
自 2009 年從業以來,即參與網站建置相關領域的工作,從需求、設計、開發、維護、管理,皆有所涉略,也不斷地接受客戶的委託,承接專案,期許能為想打造網站的公司或個人,解決網站大小事。
現況|
▹ 緯育 TibaMe 就業養成班講師
▹ 接案 自由工作者 Freelancer
▹ 建立 「WebMix - 設計好網站」粉絲頁,分享網站知識及文章。
▹ 成立 卡斯有限公司,承接主機代管、前端開發、網站架設等服務。
經歷|
▹ 2009 年:進入職場,曾任職於中視、華視、Yahoo!、新創公司。
▹ 2013 年:全職的網站前端自由工作者。
▹ 2016 年:成立卡斯有限公司:承接網站設計開發、主機代管。
▹ 2017 年:承接標案。
▹ 2018 年:網站相關教學。
▹ 2019 年:合夥存股管家。
作品分享(部份)|
01、5breakfast 早餐平台網站
02、X Fail 活動網站
03、鉅亨網債劵基金排行網頁
04、matchnow 網紅平台網站
05、上海在野設計網站
06、毅創投資網站
07、MBA 顧問網站
08、智夢網站
09、RocketAdmit網站
10、臺南市政府圖片資料庫平台網站
11、王爺水餃子網站
12、雕塑學會網站
13、亞太公私合夥建設發展協會網站
14、長風文教基金會網站
15、矽谷創業家協會網站
聯絡方式|
▹ 張互賓/Carlos
▹ 個人 FB( https://www.facebook.com/hubin )
▹ FB 專頁( https://www.facebook.com/webmix.cc/ )
▹ 個人 email: [email protected]
希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
課程大綱
- 1.基礎簡介
簡介前端主要程式:HTML、CSS、JS
02:19
QUIZ:簡介前端主要程式:HTML、CSS、JS
共2題
工具:編輯器及瀏覽器
03:06
QUIZ:工具:編輯器及瀏覽器
共1題
第一個網頁快速上手
04:34
QUIZ:第一個網頁快速上手
共1題
- 2.HTML 基本寫法
HTML 網頁文件基本結構
01:59
QUIZ:HTML 網頁文件基本結構
共1題
認識版本宣告、標籤、元素、屬性
01:08
QUIZ:認識版本宣告、標籤、元素、屬性
共2題
HTML 撰寫注意事項
04:40
QUIZ:HTML 撰寫注意事項
共1題
- 3.HTML 語意標籤 - 基本標籤
保留文字格式
01:31
QUIZ:保留文字格式
共1題
表示程式的標籤
01:56
QUIZ:表示程式的標籤
共1題
註解
01:37
QUIZ:註解
共1題
網頁標題
00:55
QUIZ:網頁標題
共1題
中介資料(Meta Data)
02:24
QUIZ:中介資料(Meta Data)
共1題
時間
02:04
QUIZ:時間
共1題
縮寫
01:38
QUIZ:縮寫
共1題
斷行與水平分隔線
01:26
QUIZ:斷行與水平分隔線
共1題
段落
00:38
QUIZ:段落
共1題
內容標題
01:47
QUIZ:內容標題
共1題
引用
01:35
QUIZ:引用
共1題
結構練習一
01:58
QUIZ:結構練習一
共1題
- 4.HTML 語意標籤 - 固定結構及功能性標籤
列表
02:33
QUIZ:列表
共1題
清單
02:08
QUIZ:清單
共1題
連結
02:58
QUIZ:連結
共1題
圖片
05:08
QUIZ:圖片
共1題
獨立內容
02:11
QUIZ:獨立內容
共1題
表格
06:35
QUIZ:表格
共1題
嵌入外站
03:35
QUIZ:嵌入外站
共1題
span 和 div
02:33
QUIZ:span 和 div
共1題
有語意的結構標籤
02:23
QUIZ:有語意的結構標籤
共2題
結構練習二
02:52
QUIZ:結構練習二
共1題
- 5.HTML 語意標籤 - 媒體類型標籤及其它
HTML Entity(實體)
03:16
QUIZ:HTML Entity(實體)
共1題
簡介 SVG
04:48
QUIZ:簡介 SVG
共1題
簡介 canvas
02:02
QUIZ:簡介 canvas
共1題
影片
04:29
QUIZ:影片
共1題
音訊
02:59
QUIZ:音訊
共1題
其它標籤
03:11
QUIZ:其它標籤
共1題
HTML 所有標籤
02:12
QUIZ:HTML 所有標籤
共1題
- 6.HTML 表單
基本結構
01:55
QUIZ:基本結構
共1題
文字框:一般文字
03:53
QUIZ:文字框:一般文字
共1題
文字框:密碼
01:00
QUIZ:文字框:密碼
共1題
文字框:隱藏
02:40
QUIZ:文字框:隱藏
共1題
多行文字框
01:50
QUIZ:多行文字框
共1題
單選
02:56
QUIZ:單選
共1題
勾選(核取方塊)
03:51
QUIZ:勾選(核取方塊)
共1題
下拉選單
02:47
QUIZ:下拉選單
共1題
一般按鈕與資料送出按鈕
02:37
QUIZ:一般按鈕與資料送出按鈕
共1題
認識資料傳遞方式
01:43
QUIZ:認識資料傳遞方式
共1題
傳遞檔案
04:38
QUIZ:傳遞檔案
共2題
表單練習(上)
06:15
表單練習(下)
05:57
QUIZ:表單練習
共1題
- 7.CSS 基礎套用
套用 CSS
05:41
QUIZ:套用 CSS
共2題
註解
01:31
QUIZ:註解
共1題
選取器 - 屬性及值
06:38
QUIZ:選取器 - 屬性及值
共1題
選取器 - 符號
05:48
QUIZ:選取器 - 符號
共1題
選器取 - class 和 id
06:32
QUIZ:選器取 - class 和 id
共1題
關於優先權
03:06
QUIZ:關於優先權
共1題
- 8.CSS 偽元素與偽類別
偽元素(Pseudo Element)
05:15
QUIZ:偽元素(Pseudo Element)
共1題
偽類別(Pseudo Class)(上)
06:36
偽類別(Pseudo Class)(下)
05:06
QUIZ:偽類別(Pseudo Class)
共1題
- 9.CSS 基礎排版樣式
display 屬性
04:24
QUIZ:display 屬性
共1題
區塊模型(Box Model) (上)
07:13
區塊模型(Box Model) (下)
06:50
QUIZ:區塊模型(Box Model)
共1題
同層對齊(vertical-align)
04:59
QUIZ:同層對齊(vertical-align)
共1題
定位(position)- 固定定位
05:49
QUIZ:定位(position)- 固定定位
共1題
定位(position)- 相對定位
02:10
QUIZ:定位(position)- 相對定位
共1題
定位(position)- 絕對定位
03:26
QUIZ:定位(position)- 絕對定位
共1題
定位(position)- sticky 定位
03:29
QUIZ:定位(position)- sticky 定位
共1題
浮動(float)
06:08
QUIZ:浮動(float)
共1題
二欄固定式版型(上)
07:50
二欄固定式版型(下)
05:54
QUIZ:二欄固定式版型
共1題
練習導覽列(上)
05:11
練習導覽列(下)
07:30
QUIZ:練習導覽列
共1題
- 10.CSS 文字樣式
文字大小(font-size)
07:27
QUIZ:文字大小(font-size)
共1題
文字粗體(font-weight)
04:29
QUIZ:文字粗體(font-weight)
共1題
字體樣式(font-style)
01:25
QUIZ:字體樣式(font-style)
共1題
文字畫線(text-decoration)
05:52
QUIZ:文字畫線(text-decoration)
共1題
英文字大小寫(text-transform)
02:25
QUIZ:英文字大小寫(text-transform)
共1題
文字水平對齊(text-align)
02:02
QUIZ:文字水平對齊(text-align)
共1題
文字行高(line-height)
02:36
QUIZ:文字行高(line-height)
共1題
關於空格(white-space)
02:43
QUIZ:關於空格(white-space)
共1題
文字斷行(word-break)及連字符號(hyphens)
04:37
QUIZ:文字斷行(word-break)及連字符號(hyphens)
共1題
文字顏色(color)
09:22
QUIZ:文字顏色(color)
共1題
指定字體(font-family)
11:13
QUIZ:指定字體(font-family)
共1題
- 11.CSS 背景樣式
背景顏色(background-color)
02:25
QUIZ:背景顏色(background-color)
共1題
背景圖(background-image)
06:26
QUIZ:背景圖(background-image)
共1題
背景圖反覆出現(background-repeat)
05:35
QUIZ:背景圖反覆出現(background-repeat)
共1題
背景圖大小(background-size)
06:11
QUIZ:背景圖大小(background-size)
共1題
背景圖位置(background-position)
04:32
QUIZ:背景圖位置(background-position)
共1題
背景圖固定模式(background-attachment)
09:57
QUIZ:背景圖固定模式(background-attachment)
共1題
背景圖顯示區域(background-origin)
04:23
QUIZ:背景圖顯示區域(background-origin)
共1題
背景圖裁切(background-clip)
03:53
QUIZ:背景圖裁切(background-clip)
共1題
背景線性漸層
09:37
QUIZ:背景線性漸層
共1題
同個區域可設定多個背景
03:51
QUIZ:同個區域可設定多個背景
共1題
- 12.CSS 溢載樣式
內容超出區域(overflow)
06:34
QUIZ:內容超出區域(overflow)
共1題
限制單行文字,出現省略符號(text-overflow)
02:39
QUIZ:限制單行文字,出現省略符號(text-overflow)
共1題
- 13.CSS 特定標籤主題樣式
連結樣式
04:53
QUIZ:連結樣式
共1題
列表樣式
05:56
QUIZ:列表樣式
共1題
表格樣式
04:10
QUIZ:表格樣式
共1題
- 14.CSS 基本效果樣式
元素不透明度(opacity)
04:32
QUIZ:元素不透明度(opacity)
共1題
元素是否可見(visibility)
02:39
QUIZ:元素是否可見(visibility)
共1題
元素輪廓(outline)
04:35
QUIZ:元素輪廓(outline)
共1題
游標(cursor)
04:37
QUIZ:游標(cursor)
共1題
圓角(border-radius)
05:52
QUIZ:圓角(border-radius)
共2題
區塊陰影(box-shadow)
06:11
QUIZ:區塊陰影(box-shadow)
共1題
文字陰影(text-shadow)
03:49
QUIZ:文字陰影(text-shadow)
共1題
- 15.CSS 形變效果樣式 - transform 2D
旋轉
05:36
QUIZ:旋轉
共1題
縮放
04:06
QUIZ:縮放
共1題
偏移
05:36
QUIZ:偏移
共1題
傾斜
05:18
QUIZ:傾斜
共1題
同時套用多種形變效果
03:46
QUIZ:同時套用多種形變效果
共1題
- 16.CSS 進階排版樣式 - Flexbox 觀念
flex 和 inline-flex
02:35
QUIZ:flex 和 inline-flex
共1題
Flex Container 和 Flex Items
03:24
QUIZ:Flex Container 和 Flex Items
共1題
主軸(Main Axis)和交錯軸(Cross Axis)
02:12
QUIZ:主軸(Main Axis)和交錯軸(Cross Axis)
共1題
- 17.CSS 進階排版樣式 - Flexbox Container
方向如何排列(flex-direction)
04:32
QUIZ:方向如何排列(flex-direction)
共1題
是否斷行(flex-wrap)
03:53
QUIZ:是否斷行(flex-wrap)
共1題
方向與斷行的縮寫(flex-flow)
01:49
QUIZ:方向與斷行的縮寫(flex-flow)
共1題
Items 在主軸中如何排列(justify-content)
05:46
QUIZ:Items 在主軸中如何排列(justify-content)
共1題
Items 在交錯軸中如何排列(align-content)
08:01
QUIZ:Items 在交錯軸中如何排列(align-content)
共1題
各 Items 之間,在交錯軸中如何排列(align-items)
06:59
QUIZ:各 Items 之間,在交錯軸中如何排列(align-items)
共1題
- 18.CSS 進階排版樣式 - Flexbox Items
只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
04:30
QUIZ:只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
共1題
指定順序(order)
02:48
QUIZ:指定順序(order)
共1題
自動擴展(flex-grow)
05:08
QUIZ:自動擴展(flex-grow)
共1題
自動壓縮(flex-shrink)
05:02
QUIZ:自動壓縮(flex-shrink)
共1題
設定寬或高(flex-basis)
02:53
QUIZ:設定寬或高(flex-basis)
共1題
縮寫形式(flex)
03:09
QUIZ:縮寫形式(flex)
共1題
使用 Flexbox 建立固定式二欄排版
05:05
QUIZ:使用 Flexbox 建立固定式二欄排版
共1題
- 19.固定式版型切版 - 商品列表頁
網頁建立、header 區塊及變數寫法(上)
07:11
網頁建立、header 區塊及變數寫法(下)
08:21
QUIZ:網頁建立、header 區塊及變數寫法
共1題
LOGO 及導覽列左側
11:30
QUIZ:LOGO 及導覽列左側
共1題
導覽列右側(上)
08:46
導覽列右側(下)
08:44
QUIZ:導覽列右側
共1題
滿版背景圖
04:30
QUIZ:滿版背景圖
共1題
footer 區域
05:35
QUIZ:footer 區域
共1題
中間區域及二欄式切版
10:04
QUIZ:中間區域及二欄式切版
共1題
側邊欄表單分類
10:06
QUIZ:側邊欄表單分類
共1題
商品列表區域(上)
10:52
商品列表區域(下)
09:23
QUIZ:商品列表切版
共1題
- 20.固定式版型切版 - 商品詳細頁
商品簡介及購買表單(上)
11:14
商品簡介及購買表單(下)
11:02
QUIZ:商品簡介及購買表單
共1題
商品圖文編排(上)
05:56
商品圖文編排(下)
07:30
QUIZ:商品圖文編排
共1題
詢問表單排版(上)
06:24
詢問表單排版(下)
07:45
QUIZ:詢問表單排版
共1題
- 21.介面實作
麵包屑(Breadcrumb)
08:26
QUIZ:麵包屑(Breadcrumb)
共1題
直向圖文編排
09:37
QUIZ:直向圖文編排
共1題
文繞圖
11:07
QUIZ:文繞圖
共1題
自訂下拉選單外觀
05:10
QUIZ:自訂下拉選單外觀
共1題
分頁(Pagination)(上)
06:22
分頁(Pagination)(下)
06:15
QUIZ:分頁(Pagination)
共1題
三角形
04:10
QUIZ:三角形
共1題
tooltip
08:53
QUIZ:tooltip
共1題
popover
11:08
QUIZ:popover
共1題
表單欄位群組化(Input Group)
09:33
QUIZ:表單欄位群組化(Input Group)
共1題
進度條(Progress Bar)
04:48
QUIZ:進度條(Progress Bar)
共1題
自訂核取方塊
08:46
QUIZ:自訂核取方塊
共1題
雙態開關
06:28
QUIZ:雙態開關
共1題
列表項目符號替換
04:15
QUIZ:列表項目符號替換
共1題
影片第一屏滿版
07:03
QUIZ:影片第一屏滿版
共1題
頁籤(Tab)(上)
07:37
頁籤(Tab)(下)
09:02
QUIZ:頁籤(Tab)
共1題