NT$1,650
【課程通知】HTML & CSS 下集 上架啦～
最新討論
課程資訊
課程時長 13 小時 5 分
課程共 21 單元 303 小節
2 個可下載的 學習資源
提供完訓證書
提供制定 學習計畫建議學習 7 週 (每週 2 小時)【課程通知】HTML & CSS 下集 上架啦～
適合對象
- 無設計、程式基礎的初學者
- 有設計或是程式基礎且對網頁設計有興趣者
- 嚮往網頁設計師、前端工程師、軟體工程師的職涯發展者
- 網頁設計領域的入門者
- 想自我進修專業能力者
- 想自己設計網站的 DIY 者
你可以學到
你是否曾經有過以下情況呢？
➔ 曾在瀏覽網頁時，對於畫面的介面設計感到很驚奇？
➔ 在瀏覽網頁時總是好奇到底要如何才能產出這些美觀的畫面設計？
➔ 在不經意拉動瀏覽器視窗，好奇網頁如何變化出不同樣式的風格？
現代科技已完全融入在我們的生活，幾乎人手一機
手機、電腦打開都是滿滿各種玲琅滿目的網頁，
到底要如何從眾多網頁中抓住瀏覽者的眼球呢？
此時「網頁設計」就將成為能夠讓你從眾多競爭者當中脫穎而出的重要技能！
「網頁設計」是指設計及建構一個網頁。舉例像是「網站架構、版面、顏色、字體、圖像」等等各元素的設計以及整體效果呈現。
此門課將帶你學會網頁設計技巧，
透過「 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 個測驗評量」。準備好跟上腳步了嗎？我們將一同陪你一步一步踏入前端工程師世界並挖掘滿滿的網頁設計知識。
學習前基本能力
- 熟悉 Windows 或 MacOS 作業系統基本操作
學習前準備
課程資訊
課程時長 13 小時 5 分課程共 21 單元 303 小節2 個可下載的 學習資源提供完訓證書提供制定 學習計畫建議學習 7 週 (每週 2 小時)關於講師
張互賓
自 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
希望 學員/讀者 在這學習領域中，有遇到任何問題，可直接與我聯繫，盼能協助各位在這領域上精進。
簡介前端主要程式：HTML、CSS、JS
QUIZ：簡介前端主要程式：HTML、CSS、JS
工具：編輯器及瀏覽器
QUIZ：工具：編輯器及瀏覽器
第一個網頁快速上手
QUIZ：第一個網頁快速上手
HTML 網頁文件基本結構
QUIZ：HTML 網頁文件基本結構
認識版本宣告、標籤、元素、屬性
QUIZ：認識版本宣告、標籤、元素、屬性
HTML 撰寫注意事項
QUIZ：HTML 撰寫注意事項
保留文字格式
QUIZ：保留文字格式
表示程式的標籤
QUIZ：表示程式的標籤
註解
QUIZ：註解
網頁標題
QUIZ：網頁標題
中介資料（Meta Data）
QUIZ：中介資料（Meta Data）
時間
QUIZ：時間
縮寫
QUIZ：縮寫
斷行與水平分隔線
QUIZ：斷行與水平分隔線
段落
QUIZ：段落
內容標題
QUIZ：內容標題
引用
QUIZ：引用
結構練習一
QUIZ：結構練習一
列表
QUIZ：列表
清單
QUIZ：清單
連結
QUIZ：連結
圖片
QUIZ：圖片
獨立內容
QUIZ：獨立內容
表格
QUIZ：表格
嵌入外站
QUIZ：嵌入外站
span 和 div
QUIZ：span 和 div
有語意的結構標籤
QUIZ：有語意的結構標籤
結構練習二
QUIZ：結構練習二
HTML Entity（實體）
QUIZ：HTML Entity（實體）
簡介 SVG
QUIZ：簡介 SVG
簡介 canvas
QUIZ：簡介 canvas
影片
QUIZ：影片
音訊
QUIZ：音訊
其它標籤
QUIZ：其它標籤
HTML 所有標籤
QUIZ：HTML 所有標籤
基本結構
QUIZ：基本結構
文字框：一般文字
QUIZ：文字框：一般文字
文字框：密碼
QUIZ：文字框：密碼
文字框：隱藏
QUIZ：文字框：隱藏
多行文字框
QUIZ：多行文字框
單選
QUIZ：單選
勾選（核取方塊）
QUIZ：勾選（核取方塊）
下拉選單
QUIZ：下拉選單
一般按鈕與資料送出按鈕
QUIZ：一般按鈕與資料送出按鈕
認識資料傳遞方式
QUIZ：認識資料傳遞方式
傳遞檔案
QUIZ：傳遞檔案
表單練習（上）
表單練習（下）
QUIZ：表單練習
套用 CSS
QUIZ：套用 CSS
註解
QUIZ：註解
選取器 - 屬性及值
QUIZ：選取器 - 屬性及值
選取器 - 符號
QUIZ：選取器 - 符號
選器取 - class 和 id
QUIZ：選器取 - class 和 id
關於優先權
QUIZ：關於優先權
偽元素（Pseudo Element）
QUIZ：偽元素（Pseudo Element）
偽類別（Pseudo Class）（上）
偽類別（Pseudo Class）（下）
QUIZ：偽類別（Pseudo Class）
display 屬性
QUIZ：display 屬性
區塊模型（Box Model） （上）
區塊模型（Box Model） （下）
QUIZ：區塊模型（Box Model）
同層對齊（vertical-align）
QUIZ：同層對齊（vertical-align）
定位（position）- 固定定位
QUIZ：定位（position）- 固定定位
定位（position）- 相對定位
QUIZ：定位（position）- 相對定位
定位（position）- 絕對定位
QUIZ：定位（position）- 絕對定位
定位（position）- sticky 定位
QUIZ：定位（position）- sticky 定位
浮動（float）
QUIZ：浮動（float）
二欄固定式版型（上）
二欄固定式版型（下）
QUIZ：二欄固定式版型
練習導覽列（上）
練習導覽列（下）
QUIZ：練習導覽列
文字大小（font-size）
QUIZ：文字大小（font-size）
文字粗體（font-weight）
QUIZ：文字粗體（font-weight）
字體樣式（font-style）
QUIZ：字體樣式（font-style）
文字畫線（text-decoration）
QUIZ：文字畫線（text-decoration）
英文字大小寫（text-transform）
QUIZ：英文字大小寫（text-transform）
文字水平對齊（text-align）
QUIZ：文字水平對齊（text-align）
文字行高（line-height）
QUIZ：文字行高（line-height）
關於空格（white-space）
QUIZ：關於空格（white-space）
文字斷行（word-break）及連字符號（hyphens）
QUIZ：文字斷行（word-break）及連字符號（hyphens）
文字顏色（color）
QUIZ：文字顏色（color）
指定字體（font-family）
QUIZ：指定字體（font-family）
背景顏色（background-color）
QUIZ：背景顏色（background-color）
背景圖（background-image）
QUIZ：背景圖（background-image）
背景圖反覆出現（background-repeat）
QUIZ：背景圖反覆出現（background-repeat）
背景圖大小（background-size）
QUIZ：背景圖大小（background-size）
背景圖位置（background-position）
QUIZ：背景圖位置（background-position）
背景圖固定模式（background-attachment）
QUIZ：背景圖固定模式（background-attachment）
背景圖顯示區域（background-origin）
QUIZ：背景圖顯示區域（background-origin）
背景圖裁切（background-clip）
QUIZ：背景圖裁切（background-clip）
背景線性漸層
QUIZ：背景線性漸層
同個區域可設定多個背景
QUIZ：同個區域可設定多個背景
內容超出區域（overflow）
QUIZ：內容超出區域（overflow）
限制單行文字，出現省略符號（text-overflow）
QUIZ：限制單行文字，出現省略符號（text-overflow）
連結樣式
QUIZ：連結樣式
列表樣式
QUIZ：列表樣式
表格樣式
QUIZ：表格樣式
元素不透明度（opacity）
QUIZ：元素不透明度（opacity）
元素是否可見（visibility）
QUIZ：元素是否可見（visibility）
元素輪廓（outline）
QUIZ：元素輪廓（outline）
游標（cursor）
QUIZ：游標（cursor）
圓角（border-radius）
QUIZ：圓角（border-radius）
區塊陰影（box-shadow）
QUIZ：區塊陰影（box-shadow）
文字陰影（text-shadow）
QUIZ：文字陰影（text-shadow）
旋轉
QUIZ：旋轉
縮放
QUIZ：縮放
偏移
QUIZ：偏移
傾斜
QUIZ：傾斜
同時套用多種形變效果
QUIZ：同時套用多種形變效果
flex 和 inline-flex
QUIZ：flex 和 inline-flex
Flex Container 和 Flex Items
QUIZ：Flex Container 和 Flex Items
主軸（Main Axis）和交錯軸（Cross Axis）
QUIZ：主軸（Main Axis）和交錯軸（Cross Axis）
方向如何排列（flex-direction）
QUIZ：方向如何排列（flex-direction）
是否斷行（flex-wrap）
QUIZ：是否斷行（flex-wrap）
方向與斷行的縮寫（flex-flow）
QUIZ：方向與斷行的縮寫（flex-flow）
Items 在主軸中如何排列（justify-content）
QUIZ：Items 在主軸中如何排列（justify-content）
Items 在交錯軸中如何排列（align-content）
QUIZ：Items 在交錯軸中如何排列（align-content）
各 Items 之間，在交錯軸中如何排列（align-items）
QUIZ：各 Items 之間，在交錯軸中如何排列（align-items）
只設定自己，在各 Items 之間，於交錯軸中如何排列（align-self）
QUIZ：只設定自己，在各 Items 之間，於交錯軸中如何排列（align-self）
指定順序（order）
QUIZ：指定順序（order）
自動擴展（flex-grow）
QUIZ：自動擴展（flex-grow）
自動壓縮（flex-shrink）
QUIZ：自動壓縮（flex-shrink）
設定寬或高（flex-basis）
QUIZ：設定寬或高（flex-basis）
縮寫形式（flex）
QUIZ：縮寫形式（flex）
使用 Flexbox 建立固定式二欄排版
QUIZ：使用 Flexbox 建立固定式二欄排版
網頁建立、header 區塊及變數寫法（上）
網頁建立、header 區塊及變數寫法（下）
QUIZ：網頁建立、header 區塊及變數寫法
LOGO 及導覽列左側
QUIZ：LOGO 及導覽列左側
導覽列右側（上）
導覽列右側（下）
QUIZ：導覽列右側
滿版背景圖
QUIZ：滿版背景圖
footer 區域
QUIZ：footer 區域
中間區域及二欄式切版
QUIZ：中間區域及二欄式切版
側邊欄表單分類
QUIZ：側邊欄表單分類
商品列表區域（上）
商品列表區域（下）
QUIZ：商品列表切版
商品簡介及購買表單（上）
商品簡介及購買表單（下）
QUIZ：商品簡介及購買表單
商品圖文編排（上）
商品圖文編排（下）
QUIZ：商品圖文編排
詢問表單排版（上）
詢問表單排版（下）
QUIZ：詢問表單排版
麵包屑（Breadcrumb）
QUIZ：麵包屑（Breadcrumb）
直向圖文編排
QUIZ：直向圖文編排
文繞圖
QUIZ：文繞圖
自訂下拉選單外觀
QUIZ：自訂下拉選單外觀
分頁（Pagination）（上）
分頁（Pagination）（下）
QUIZ：分頁（Pagination）
三角形
QUIZ：三角形
tooltip
QUIZ：tooltip
popover
QUIZ：popover
表單欄位群組化（Input Group）
QUIZ：表單欄位群組化（Input Group）
進度條（Progress Bar）
QUIZ：進度條（Progress Bar）
自訂核取方塊
QUIZ：自訂核取方塊
雙態開關
QUIZ：雙態開關
列表項目符號替換
QUIZ：列表項目符號替換
影片第一屏滿版
QUIZ：影片第一屏滿版
頁籤（Tab）（上）
頁籤（Tab）（下）
QUIZ：頁籤（Tab）
學習附件
購買此課程後，才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人！在問答中找到學習的捷徑。關於講師
張互賓
自 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
希望 學員/讀者 在這學習領域中，有遇到任何問題，可直接與我聯繫，盼能協助各位在這領域上精進。
