成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)

課程資訊 課程大綱 開課單位 常見問答
Loading...
線上課程

成為前端工程師|透過 HTML 與 CSS 認識網頁設計,從 0 到 1 打造實用介面 (上集)

18745次瀏覽
NT$1,650
優惠現領
85 折
【4/9-5/5限時85折】
課程資訊
本頁面課程內容及活動資訊概由廠商提供,部分內容非屬104服務範疇,會員應遵守之規範悉依 104課程中心會員規約 所載。
上課時間 無限期觀看課程查看更多
上課方式 於開課單位網站兌換後觀看課程
課程內容
課程大綱
展開全部
1 基礎簡介
01
簡介前端主要程式:HTML、CSS、JS
02
QUIZ:簡介前端主要程式:HTML、CSS、JS
03
工具:編輯器及瀏覽器
04
QUIZ:工具:編輯器及瀏覽器
05
第一個網頁快速上手
06
QUIZ:第一個網頁快速上手
2 HTML 基本寫法
01
HTML 網頁文件基本結構
02
QUIZ:HTML 網頁文件基本結構
03
認識版本宣告、標籤、元素、屬性
04
QUIZ:認識版本宣告、標籤、元素、屬性
05
HTML 撰寫注意事項
06
QUIZ:HTML 撰寫注意事項
3 HTML 語意標籤 - 基本標籤
01
保留文字格式
02
QUIZ:保留文字格式
03
表示程式的標籤
04
QUIZ:表示程式的標籤
05
註解
06
QUIZ:註解
07
網頁標題
08
QUIZ:網頁標題
09
中介資料(Meta Data)
10
QUIZ:中介資料(Meta Data)
11
時間
12
QUIZ:時間
13
縮寫
14
QUIZ:縮寫
15
斷行與水平分隔線
16
QUIZ:斷行與水平分隔線
17
段落
18
QUIZ:段落
19
內容標題
20
QUIZ:內容標題
21
引用
22
QUIZ:引用
23
結構練習一
24
QUIZ:結構練習一
4 HTML 語意標籤 - 固定結構及功能性標籤
01
列表
02
QUIZ:列表
03
清單
04
QUIZ:清單
05
連結
06
QUIZ:連結
07
圖片
08
QUIZ:圖片
09
獨立內容
10
QUIZ:獨立內容
11
表格
12
QUIZ:表格
13
嵌入外站
14
QUIZ:嵌入外站
15
span 和 div
16
QUIZ:span 和 div
17
有語意的結構標籤
18
QUIZ:有語意的結構標籤
19
結構練習二
20
QUIZ:結構練習二
5 HTML 語意標籤 - 媒體類型標籤及其它
01
HTML Entity(實體)
02
QUIZ:HTML Entity(實體)
03
簡介 SVG
04
QUIZ:簡介 SVG
05
簡介 canvas
06
QUIZ:簡介 canvas
07
影片
08
QUIZ:影片
09
音訊
10
QUIZ:音訊
11
其它標籤
12
QUIZ:其它標籤
13
HTML 所有標籤
14
QUIZ:HTML 所有標籤
6 HTML 表單
01
基本結構
02
QUIZ:基本結構
03
文字框:一般文字
04
QUIZ:文字框:一般文字
05
文字框:密碼
06
QUIZ:文字框:密碼
07
文字框:隱藏
08
QUIZ:文字框:隱藏
09
多行文字框
10
QUIZ:多行文字框
11
單選
12
QUIZ:單選
13
勾選(核取方塊)
14
QUIZ:勾選(核取方塊)
15
下拉選單
16
QUIZ:下拉選單
17
一般按鈕與資料送出按鈕
18
QUIZ:一般按鈕與資料送出按鈕
19
認識資料傳遞方式
20
QUIZ:認識資料傳遞方式
21
傳遞檔案
22
QUIZ:傳遞檔案
23
表單練習(上)
24
表單練習(下)
25
QUIZ:表單練習
7 CSS 基礎套用
01
套用 CSS
02
QUIZ:套用 CSS
03
註解
04
QUIZ:註解
05
選取器 - 屬性及值
06
QUIZ:選取器 - 屬性及值
07
選取器 - 符號
08
QUIZ:選取器 - 符號
09
選器取 - class 和 id
10
QUIZ:選器取 - class 和 id
11
關於優先權
12
QUIZ:關於優先權
8 CSS 偽元素與偽類別
01
偽元素(Pseudo Element)
02
QUIZ:偽元素(Pseudo Element)
03
偽類別(Pseudo Class)(上)
04
偽類別(Pseudo Class)(下)
05
QUIZ:偽類別(Pseudo Class)
9 CSS 基礎排版樣式
01
display 屬性
02
QUIZ:display 屬性
03
區塊模型(Box Model) (上)
04
區塊模型(Box Model) (下)
05
QUIZ:區塊模型(Box Model)
06
同層對齊(vertical-align)
07
QUIZ:同層對齊(vertical-align)
08
定位(position)- 固定定位
09
QUIZ:定位(position)- 固定定位
10
定位(position)- 相對定位
11
QUIZ:定位(position)- 相對定位
12
定位(position)- 絕對定位
13
QUIZ:定位(position)- 絕對定位
14
定位(position)- sticky 定位
15
QUIZ:定位(position)- sticky 定位
16
浮動(float)
17
QUIZ:浮動(float)
18
二欄固定式版型(上)
19
二欄固定式版型(下)
20
QUIZ:二欄固定式版型
21
練習導覽列(上)
22
練習導覽列(下)
23
QUIZ:練習導覽列
10 CSS 文字樣式
01
文字大小(font-size)
02
QUIZ:文字大小(font-size)
03
文字粗體(font-weight)
04
QUIZ:文字粗體(font-weight)
05
字體樣式(font-style)
06
QUIZ:字體樣式(font-style)
07
文字畫線(text-decoration)
08
QUIZ:文字畫線(text-decoration)
09
英文字大小寫(text-transform)
10
QUIZ:英文字大小寫(text-transform)
11
文字水平對齊(text-align)
12
QUIZ:文字水平對齊(text-align)
13
文字行高(line-height)
14
QUIZ:文字行高(line-height)
15
關於空格(white-space)
16
QUIZ:關於空格(white-space)
17
文字斷行(word-break)及連字符號(hyphens)
18
QUIZ:文字斷行(word-break)及連字符號(hyphens)
19
文字顏色(color)
20
QUIZ:文字顏色(color)
21
指定字體(font-family)
22
QUIZ:指定字體(font-family)
11 CSS 背景樣式
01
背景顏色(background-color)
02
QUIZ:背景顏色(background-color)
03
背景圖(background-image)
04
QUIZ:背景圖(background-image)
05
背景圖反覆出現(background-repeat)
06
QUIZ:背景圖反覆出現(background-repeat)
07
背景圖大小(background-size)
08
QUIZ:背景圖大小(background-size)
09
背景圖位置(background-position)
10
QUIZ:背景圖位置(background-position)
11
背景圖固定模式(background-attachment)
12
QUIZ:背景圖固定模式(background-attachment)
13
背景圖顯示區域(background-origin)
14
QUIZ:背景圖顯示區域(background-origin)
15
背景圖裁切(background-clip)
16
QUIZ:背景圖裁切(background-clip)
17
背景線性漸層
18
QUIZ:背景線性漸層
19
同個區域可設定多個背景
20
QUIZ:同個區域可設定多個背景
12 CSS 溢載樣式
01
內容超出區域(overflow)
02
QUIZ:內容超出區域(overflow)
03
限制單行文字,出現省略符號(text-overflow)
04
QUIZ:限制單行文字,出現省略符號(text-overflow)
13 CSS 特定標籤主題樣式
01
連結樣式
02
QUIZ:連結樣式
03
列表樣式
04
QUIZ:列表樣式
05
表格樣式
06
QUIZ:表格樣式
14 CSS 基本效果樣式
01
元素不透明度(opacity)
02
QUIZ:元素不透明度(opacity)
03
元素是否可見(visibility)
04
QUIZ:元素是否可見(visibility)
05
元素輪廓(outline)
06
QUIZ:元素輪廓(outline)
07
游標(cursor)
08
QUIZ:游標(cursor)
09
圓角(border-radius)
10
QUIZ:圓角(border-radius)
11
區塊陰影(box-shadow)
12
QUIZ:區塊陰影(box-shadow)
13
文字陰影(text-shadow)
14
QUIZ:文字陰影(text-shadow)
15 CSS 形變效果樣式 - transform 2D
01
旋轉
02
QUIZ:旋轉
03
縮放
04
QUIZ:縮放
05
偏移
06
QUIZ:偏移
07
傾斜
08
QUIZ:傾斜
09
同時套用多種形變效果
10
QUIZ:同時套用多種形變效果
16 CSS 進階排版樣式 - Flexbox 觀念
01
flex 和 inline-flex
02
QUIZ:flex 和 inline-flex
03
Flex Container 和 Flex Items
04
QUIZ:Flex Container 和 Flex Items
05
主軸(Main Axis)和交錯軸(Cross Axis)
06
QUIZ:主軸(Main Axis)和交錯軸(Cross Axis)
17 CSS 進階排版樣式 - Flexbox Container
01
方向如何排列(flex-direction)
02
QUIZ:方向如何排列(flex-direction)
03
是否斷行(flex-wrap)
04
QUIZ:是否斷行(flex-wrap)
05
方向與斷行的縮寫(flex-flow)
06
QUIZ:方向與斷行的縮寫(flex-flow)
07
Items 在主軸中如何排列(justify-content)
08
QUIZ:Items 在主軸中如何排列(justify-content)
09
Items 在交錯軸中如何排列(align-content)
10
QUIZ:Items 在交錯軸中如何排列(align-content)
11
各 Items 之間,在交錯軸中如何排列(align-items)
12
QUIZ:各 Items 之間,在交錯軸中如何排列(align-items)
18 CSS 進階排版樣式 - Flexbox Items
01
只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
02
QUIZ:只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)
03
指定順序(order)
04
QUIZ:指定順序(order)
05
自動擴展(flex-grow)
06
QUIZ:自動擴展(flex-grow)
07
自動壓縮(flex-shrink)
08
QUIZ:自動壓縮(flex-shrink)
09
設定寬或高(flex-basis)
10
QUIZ:設定寬或高(flex-basis)
11
縮寫形式(flex)
12
QUIZ:縮寫形式(flex)
13
使用 Flexbox 建立固定式二欄排版
14
QUIZ:使用 Flexbox 建立固定式二欄排版
19 固定式版型切版 - 商品列表頁
01
網頁建立、header 區塊及變數寫法(上)
02
網頁建立、header 區塊及變數寫法(下)
03
QUIZ:網頁建立、header 區塊及變數寫法
04
LOGO 及導覽列左側
05
QUIZ:LOGO 及導覽列左側
06
導覽列右側(上)
07
導覽列右側(下)
08
QUIZ:導覽列右側
09
滿版背景圖
10
QUIZ:滿版背景圖
11
footer 區域
12
QUIZ:footer 區域
13
中間區域及二欄式切版
14
QUIZ:中間區域及二欄式切版
15
側邊欄表單分類
16
QUIZ:側邊欄表單分類
17
商品列表區域(上)
18
商品列表區域(下)
19
QUIZ:商品列表切版
20 固定式版型切版 - 商品詳細頁
01
商品簡介及購買表單(上)
02
商品簡介及購買表單(下)
03
QUIZ:商品簡介及購買表單
04
商品圖文編排(上)
05
商品圖文編排(下)
06
QUIZ:商品圖文編排
07
詢問表單排版(上)
08
詢問表單排版(下)
09
QUIZ:詢問表單排版
21 介面實作
01
麵包屑(Breadcrumb)
02
QUIZ:麵包屑(Breadcrumb)
03
直向圖文編排
04
QUIZ:直向圖文編排
05
文繞圖
06
QUIZ:文繞圖
07
自訂下拉選單外觀
08
QUIZ:自訂下拉選單外觀
09
分頁(Pagination)(上)
10
分頁(Pagination)(下)
11
QUIZ:分頁(Pagination)
12
三角形
13
QUIZ:三角形
14
tooltip
15
QUIZ:tooltip
16
popover
17
QUIZ:popover
18
表單欄位群組化(Input Group)
19
QUIZ:表單欄位群組化(Input Group)
20
進度條(Progress Bar)
21
QUIZ:進度條(Progress Bar)
22
自訂核取方塊
23
QUIZ:自訂核取方塊
24
雙態開關
25
QUIZ:雙態開關
26
列表項目符號替換
27
QUIZ:列表項目符號替換
28
影片第一屏滿版
29
QUIZ:影片第一屏滿版
30
頁籤(Tab)(上)
31
頁籤(Tab)(下)
32
QUIZ:頁籤(Tab)
你可以學到


你是否曾經有過以下情況呢?

    ➔  曾在瀏覽網頁時,對於畫面的介面設計感到很驚奇?
    ➔  在瀏覽網頁時總是好奇到底要如何才能產出這些美觀的畫面設計?
    ➔  在不經意拉動瀏覽器視窗,好奇網頁如何變化出不同樣式的風格?

現代科技已完全融入在我們的生活,幾乎人手一機
手機、電腦打開都是滿滿各種玲琅滿目的網頁,
到底要如何從眾多網頁中抓住瀏覽者的眼球呢?
此時「網頁設計」就將成為能夠讓你從眾多競爭者當中脫穎而出的重要技能!

「網頁設計」是指設計及建構一個網頁。舉例像是「網站架構、版面、顏色、字體、圖像」等等各元素的設計以及整體效果呈現。



此門課將帶你學會網頁設計技巧,
透過「 HTML」 與 「CSS」兩大網頁元素建造出實用又吸引人的介面,
從版面到顏色、從文字到圖像,馬上學馬上建!
適合對象
  • 無設計、程式基礎的初學者
  • 有設計或是程式基礎且對網頁設計有興趣者
  • 嚮往網頁設計師、前端工程師、軟體工程師的職涯發展者
  • 網頁設計領域的入門者
  • 想自我進修專業能力者
  • 想自己設計網站的 DIY 者
課程講師
張互賓
張互賓老師自 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: chang.abin@gmail.com希望 學員/讀者 在這學習領域中,有遇到任何問題,可直接與我聯繫,盼能協助各位在這領域上精進。
展開全部
開課單位
緯育TibaMe
緯育TibaMe由全球最大資通訊集團之一的緯創資通集團於2015年正式成立,我們專注於人才培訓與平台服務,發展多元的授課模式,並結合緯育開發的雲端智能化學習系統,有效培育新世代數位化人才。在行動與雲端時代,用科技加值人才培育,持續發展創新與有效的數位教育學習服務。
最新動態 看所有動態

從想轉職到成功轉職-學長姊現身說最真實

🎤 學長姊分享 想跨域轉職一路上的 ✅ 心態調適 ✅ 準備過程 ✅ 成功經驗 ✅ 職場真實樣貌 聽我們說不如聽過來人──轉職成功的學長姊現身說最真實~ 這裡報名線上與學長聊聊>> https://bit.ly/4cGHC9f ▍誰適合參加 🔹即將從就業培訓班結訓的你 🔹剛結訓想繼續物色優質職缺的你 🔹想跨域域轉職猶豫中的你 ▍從財金系畢業轉職為後端工程師的學長要跟你分享 🔥 如何結合非本科系的背景創造自己的優勢 🔥 專題作品準備心法 🔥 履歷撰寫技巧與面試準備方向 🔥 進入職場的實際狀況與持續進修該學什麼 🔥 後端工程師未來職涯發展的可能性 ▍直播資訊 時間:4/23 (三) 晚上 8 點至 9 點 型式:線上直播 (直播連結將於報名後2~3個工作天email提供) 報名連結: https://bit.ly/4cGHC9f

AI × Python × 商務應用開發,跨域實戰訓練開放報名!

📢 AI × Python × 商務應用開發,跨域實戰訓練開放報名! 還在等自學開竅?與其被AI浪潮甩在後頭,不如現在就開始打好根基,從AI開發到商務應用一次搞定! 🔥 【商務AI應用人才養成班】第01期 即日起開放報名 系統化訓練從 Python、ChatGPT、LINE Bot、LLM 到雲端部署與專案實戰, 讓你不只能寫程式,還能部署應用、主導AI專案! 📍 上課地點:台北市中山區/部分遠距授課 📆 上課時間:2025/5/27~2025/8/28(共322小時) 🧠 甄試日期:2025/5/15(含 Python 筆試與口試) 💰 訓練費用:勞動部補助 💡 你將學到: Python 程式設計 × 雲端資料處理 × ChatGPT × Gradio × LINE Bot × Azure AI × Docker × LLM 整合應用 AI 協助簡報設計、圖像生成、影片剪輯等商務應用 NLP開發、AI前端、專題實作、專案管理與求職技巧 🎯 就業發展方向: AI應用工程師、提示詞工程師、產品專案經理、Pre-Sales 工程師、商務開發等 課程說明會: https://www.surveycake.com/s/46o6g 課程頁面>> https://www.tibame.com/goodjob/AItalent
常見問答
如何購買課程並開始上課
於欲購買 1. 線上課程之頁面,點擊「立即購買」,成功使用信用卡完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」,後續兌換學習有兩種形式:(A) 若購買學習廠商提供課程,購買後「提供課程兌換序號、兌換連結、兌換碼使用說明」,引導您至購買課程之出版廠商兌換並上課、(B)若購買是104學習系統,購買完可以從郵件、訂單明細、課程詳細頁直接進到站內線上學習。 2. 實體課程之頁面,點擊「立即購買」,成功完成付款並確立訂單成立後,本平台將透過購買填寫之信箱,以郵件方式通知「訂單成立」即可完成報名,後續開課單位會有專員與您聯繫後續事宜。
購買與報名課程付款方式?
僅提供信用卡付款。
有支援信用卡分期嗎?
平台有提供分期服務:結帳金額滿$4,000可享三期零利率,滿$12,000可享六期零利率;分期服務支援銀行公司為:中國信託、台新銀行、玉山銀行,實際分期金額依各發卡行規定
已完成付款,但用錯折扣碼怎麼辦?
請申請退款並重新下單,已使用之折扣碼,本平台將不進行退回,敬請見諒。
線上刷卡後訂單狀態顯示「待付款」
代表您的結帳流程尚未完成,請儘速完成結帳程序,以免課程相關優惠權益失效。
刷卡失敗的原因
可能為以下原因: 1.授權失敗(例:信用卡發卡銀行系統忙碌、網路塞車、刷卡等待時間過久造成系統確認失敗等問題),建議稍待一段時間再重新刷卡。 2.輸入信用卡卡號等相關資料不正確(例:輸入資料不正確、卡號過期、尚未開卡等問題),建議重新確認輸入資訊。
如何選擇紙本發票
為響應政府政策,不主動提供紙本發票,委由金財通系統寄發電子發票開立通知信至學員購買課程時填寫之Email,發票自動存入會員載具,若未收到請告知。
企業請款之憑證,如何申請
若需要進行企業請款,請於購買時輸入統一編號、發票抬頭,本平台將以郵件寄送電子發票方式,至您填寫之信箱。
多久會收到發票
發票將於付款成功,3個工作天內開立,敬請稍候。
如何退款
請參考下方退款須知與流程 1.若您於本平台成功完成付款購買課程,有退款需求,於外部學習廠商兌換之線上課程自購買日起7天內,且未進行課程兌換,可申請全額退費;於104課程中心站內學習課程若購買日起7天內後「未進到學習頁」,可申請全額退費;實體課程須於開課日前 1 日之非假日上班時段前與104學習精靈提出申請,始得要求全額退費。 2.若需申請退款,請使用信件主旨:「課程中心退款申請」,並於信件內容寫明購買人姓名、訂單編號、欲退款之課程名稱,郵件至nabiservice@104.com.tw,本平台將於5個工作天內盡快為您處理。 3.確認提出退款申請時間為課程購買日起7天內,且未進行課程兌換,本平台將與欲申請退款課程之出版廠商,提出會員資料與學習紀錄查詢,確認您課程的觀看紀錄,並同步確認出版廠商訂定之退款事項,是否全數符合。申請退款的同時,即代表您同意本平台與退款課程之出版廠商,提出查詢會員資料與學習紀錄。 4.若您單一訂單中購買兩堂(含)以上課程,不需要整張訂單退款(只退其中幾堂課),退款金額為欲退款課程售價加總後,扣除此張訂單所使用之折扣碼(若折扣碼為整張訂單之折數折扣,則退款金額為欲退款課程售價加總後乘以折數折扣),若計算後退款金額低於(含)0元,本平台將不執行退款。5.上述退款方式僅限於本平台成功完成付款購買之課程,若付款與訂單成立之任一程序不在本平台完成,退款方式需依照課程出版之廠商所訂定之規則提出申請,並由課程出版廠商協助處理,本平台不介入。 6.若您的發票沒有填寫統一編號,並需要辦理退款時,由本平台代為處理發票相關作業 (如作廢電子發票或開立電子發票折讓單),以加速退款作業時程。 7.若您原訂單信用卡分期,其申請退費時,須整筆訂單全額退費,無法部分或擇一課程退費。
款項何時退回
課程退費採原信用卡退刷方式,退費所需之工作天依各金融機構實際作業時間為準。