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

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

課程分類 - 網頁開發
基礎
13.1 小時
8,845
NT$1,650

還在為網頁該如何設計煩惱嗎?在這門 HTML & CSS 課程中,將從 HTML 基本架構寫法開始,到 CSS 樣式撰寫,帶你完整認識並掌握各類語法,並透過實作練習,讓你學習如何完美操控 HTML & CSS,輕鬆打造網頁無負擔!

2021/09/16

【課程通知】HTML & CSS 下集 上架啦~

<span style="font-size: 18px; font-family: verdana, geneva;">大家好!HTML & CSS 這門課程的<span style="color: #800000; background-color: #ffff00;"><strong>下集</strong></span>也正式上架囉!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">在「下集」的課程中,將從課程「上集」的基本概念繼續向外延伸,<strong><span style="background-color: #ffff00; color: #3366ff;">帶你掌握更多網頁設計技術,去打造更有互動感的介面!</span></strong></span><br><br><span style="font-size: 18px; font-family: verdana, geneva;">你將可以學到:</span><br> <ul> <li><span style="font-size: 18px; font-family: verdana, geneva;">Grid Layout 排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">Column 多欄排版模式</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">transition 轉場效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">animation 動畫效果</span></li> <li><span style="font-family: verdana, geneva; font-size: 18px;">動畫效果套件的使用</span></li> </ul> <br><span style="font-size: 18px; font-family: verdana, geneva;">若想要更加深入了解 HTML & CSS 或是喜愛張互賓老師的朋友們!</span><br><span style="font-size: 18px; font-family: verdana, geneva;">歡迎至課程頁面觀看更詳細的資訊唷:</span><br><span style="font-family: verdana, geneva; font-size: 18px;"><a href="https://www.tibame.com/course/2075">https://www.tibame.com/course/2075</a></span><br><br><br><br><span style="font-size: 18px; font-family: verdana, geneva;">緯育 TibaMe 團隊祝您學習愉快~</span>

最新討論

無法下載atom-live-sever
洋蔥 · 2023/03/15 20:28
點擊時,無法跳出對話方塊。(編輯內容如下)
洋蔥 · 2023/03/15 20:09
影片來源
Angel Huang · 2023/03/10 16:02
Atom 編輯器無法下載
Angel Huang · 2023/02/28 18:43
老師您好,畫面可以跳轉,但僅顯示出3個項目, 且"radio"的部分有點選但跳轉後沒有顯示出來
邢立銘 · 2023/02/19 15:20
查看更多討論
default label基礎課程
default clock建議學習 7 週(每週 2 小時)
default video課程共 303 小節158 影片 ( 13.1 小時 )145 測驗
icon_info_certificate提供完訓證書
default plan提供制定學習計畫什麼是學習計畫?

課程目標


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

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

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

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



此門課將帶你學會網頁設計技巧,
透過「 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 作業系統基本操作

學習前需要準備什麼呢?

請學員自備筆記型電腦或桌上型電腦並確認有穩定的網路以利學習唷~

default label基礎課程
default clock建議學習 7 週(每週 2 小時)
default video課程共 303 小節158 影片 ( 13.1 小時 )145 測驗
icon_info_certificate提供完訓證書
default plan提供制定學習計畫什麼是學習計畫?
關於講師

張互賓老師
自 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.基礎簡介
  • video common icon

    簡介前端主要程式:HTML、CSS、JS


    02:19
    quiz common icon

    QUIZ:簡介前端主要程式:HTML、CSS、JS


    共2題
    video common icon

    工具:編輯器及瀏覽器


    03:06
    quiz common icon

    QUIZ:工具:編輯器及瀏覽器


    共1題
    video common icon

    第一個網頁快速上手


    04:34
    quiz common icon

    QUIZ:第一個網頁快速上手


    共1題
  • 2.HTML 基本寫法
  • video common icon

    HTML 網頁文件基本結構


    01:59
    quiz common icon

    QUIZ:HTML 網頁文件基本結構


    共1題
    video common icon

    認識版本宣告、標籤、元素、屬性


    01:08
    quiz common icon

    QUIZ:認識版本宣告、標籤、元素、屬性


    共2題
    video common icon

    HTML 撰寫注意事項


    04:40
    quiz common icon

    QUIZ:HTML 撰寫注意事項


    共1題
  • 3.HTML 語意標籤 - 基本標籤
  • video common icon

    保留文字格式


    01:31
    quiz common icon

    QUIZ:保留文字格式


    共1題
    video common icon

    表示程式的標籤


    01:56
    quiz common icon

    QUIZ:表示程式的標籤


    共1題
    video common icon

    註解


    01:37
    quiz common icon

    QUIZ:註解


    共1題
    video common icon

    網頁標題


    00:55
    quiz common icon

    QUIZ:網頁標題


    共1題
    video common icon

    中介資料(Meta Data)


    02:24
    quiz common icon

    QUIZ:中介資料(Meta Data)


    共1題
    video common icon

    時間


    02:04
    quiz common icon

    QUIZ:時間


    共1題
    video common icon

    縮寫


    01:38
    quiz common icon

    QUIZ:縮寫


    共1題
    video common icon

    斷行與水平分隔線


    01:26
    quiz common icon

    QUIZ:斷行與水平分隔線


    共1題
    video common icon

    段落


    00:38
    quiz common icon

    QUIZ:段落


    共1題
    video common icon

    內容標題


    01:47
    quiz common icon

    QUIZ:內容標題


    共1題
    video common icon

    引用


    01:35
    quiz common icon

    QUIZ:引用


    共1題
    video common icon

    結構練習一


    01:58
    quiz common icon

    QUIZ:結構練習一


    共1題
  • 4.HTML 語意標籤 - 固定結構及功能性標籤
  • video common icon

    列表


    02:33
    quiz common icon

    QUIZ:列表


    共1題
    video common icon

    清單


    02:08
    quiz common icon

    QUIZ:清單


    共1題
    video common icon

    連結


    02:58
    quiz common icon

    QUIZ:連結


    共1題
    video common icon

    圖片


    05:08
    quiz common icon

    QUIZ:圖片


    共1題
    video common icon

    獨立內容


    02:11
    quiz common icon

    QUIZ:獨立內容


    共1題
    video common icon

    表格


    06:35
    quiz common icon

    QUIZ:表格


    共1題
    video common icon

    嵌入外站


    03:35
    quiz common icon

    QUIZ:嵌入外站


    共1題
    video common icon

    span 和 div


    02:33
    quiz common icon

    QUIZ:span 和 div


    共1題
    video common icon

    有語意的結構標籤


    02:23
    quiz common icon

    QUIZ:有語意的結構標籤


    共2題
    video common icon

    結構練習二


    02:52
    quiz common icon

    QUIZ:結構練習二


    共1題
  • 5.HTML 語意標籤 - 媒體類型標籤及其它
  • video common icon

    HTML Entity(實體)


    03:16
    quiz common icon

    QUIZ:HTML Entity(實體)


    共1題
    video common icon

    簡介 SVG


    04:48
    quiz common icon

    QUIZ:簡介 SVG


    共1題
    video common icon

    簡介 canvas


    02:02
    quiz common icon

    QUIZ:簡介 canvas


    共1題
    video common icon

    影片


    04:29
    quiz common icon

    QUIZ:影片


    共1題
    video common icon

    音訊


    02:59
    quiz common icon

    QUIZ:音訊


    共1題
    video common icon

    其它標籤


    03:11
    quiz common icon

    QUIZ:其它標籤


    共1題
    video common icon

    HTML 所有標籤


    02:12
    quiz common icon

    QUIZ:HTML 所有標籤


    共1題
  • 6.HTML 表單
  • video common icon

    基本結構


    01:55
    quiz common icon

    QUIZ:基本結構


    共1題
    video common icon

    文字框:一般文字


    03:53
    quiz common icon

    QUIZ:文字框:一般文字


    共1題
    video common icon

    文字框:密碼


    01:00
    quiz common icon

    QUIZ:文字框:密碼


    共1題
    video common icon

    文字框:隱藏


    02:40
    quiz common icon

    QUIZ:文字框:隱藏


    共1題
    video common icon

    多行文字框


    01:50
    quiz common icon

    QUIZ:多行文字框


    共1題
    video common icon

    單選


    02:56
    quiz common icon

    QUIZ:單選


    共1題
    video common icon

    勾選(核取方塊)


    03:51
    quiz common icon

    QUIZ:勾選(核取方塊)


    共1題
    video common icon

    下拉選單


    02:47
    quiz common icon

    QUIZ:下拉選單


    共1題
    video common icon

    一般按鈕與資料送出按鈕


    02:37
    quiz common icon

    QUIZ:一般按鈕與資料送出按鈕


    共1題
    video common icon

    認識資料傳遞方式


    01:43
    quiz common icon

    QUIZ:認識資料傳遞方式


    共1題
    video common icon

    傳遞檔案


    04:38
    quiz common icon

    QUIZ:傳遞檔案


    共2題
    video common icon

    表單練習(上)


    06:15
    video common icon

    表單練習(下)


    05:57
    quiz common icon

    QUIZ:表單練習


    共1題
  • 7.CSS 基礎套用
  • video common icon

    套用 CSS


    05:41
    quiz common icon

    QUIZ:套用 CSS


    共2題
    video common icon

    註解


    01:31
    quiz common icon

    QUIZ:註解


    共1題
    video common icon

    選取器 - 屬性及值


    06:38
    quiz common icon

    QUIZ:選取器 - 屬性及值


    共1題
    video common icon

    選取器 - 符號


    05:48
    quiz common icon

    QUIZ:選取器 - 符號


    共1題
    video common icon

    選器取 - class 和 id


    06:32
    quiz common icon

    QUIZ:選器取 - class 和 id


    共1題
    video common icon

    關於優先權


    03:06
    quiz common icon

    QUIZ:關於優先權


    共1題
  • 8.CSS 偽元素與偽類別
  • video common icon

    偽元素(Pseudo Element)


    05:15
    quiz common icon

    QUIZ:偽元素(Pseudo Element)


    共1題
    video common icon

    偽類別(Pseudo Class)(上)


    06:36
    video common icon

    偽類別(Pseudo Class)(下)


    05:06
    quiz common icon

    QUIZ:偽類別(Pseudo Class)


    共1題
  • 9.CSS 基礎排版樣式
  • video common icon

    display 屬性


    04:24
    quiz common icon

    QUIZ:display 屬性


    共1題
    video common icon

    區塊模型(Box Model) (上)


    07:13
    video common icon

    區塊模型(Box Model) (下)


    06:50
    quiz common icon

    QUIZ:區塊模型(Box Model)


    共1題
    video common icon

    同層對齊(vertical-align)


    04:59
    quiz common icon

    QUIZ:同層對齊(vertical-align)


    共1題
    video common icon

    定位(position)- 固定定位


    05:49
    quiz common icon

    QUIZ:定位(position)- 固定定位


    共1題
    video common icon

    定位(position)- 相對定位


    02:10
    quiz common icon

    QUIZ:定位(position)- 相對定位


    共1題
    video common icon

    定位(position)- 絕對定位


    03:26
    quiz common icon

    QUIZ:定位(position)- 絕對定位


    共1題
    video common icon

    定位(position)- sticky 定位


    03:29
    quiz common icon

    QUIZ:定位(position)- sticky 定位


    共1題
    video common icon

    浮動(float)


    06:08
    quiz common icon

    QUIZ:浮動(float)


    共1題
    video common icon

    二欄固定式版型(上)


    07:50
    video common icon

    二欄固定式版型(下)


    05:54
    quiz common icon

    QUIZ:二欄固定式版型


    共1題
    video common icon

    練習導覽列(上)


    05:11
    video common icon

    練習導覽列(下)


    07:30
    quiz common icon

    QUIZ:練習導覽列


    共1題
  • 10.CSS 文字樣式
  • video common icon

    文字大小(font-size)


    07:27
    quiz common icon

    QUIZ:文字大小(font-size)


    共1題
    video common icon

    文字粗體(font-weight)


    04:29
    quiz common icon

    QUIZ:文字粗體(font-weight)


    共1題
    video common icon

    字體樣式(font-style)


    01:25
    quiz common icon

    QUIZ:字體樣式(font-style)


    共1題
    video common icon

    文字畫線(text-decoration)


    05:52
    quiz common icon

    QUIZ:文字畫線(text-decoration)


    共1題
    video common icon

    英文字大小寫(text-transform)


    02:25
    quiz common icon

    QUIZ:英文字大小寫(text-transform)


    共1題
    video common icon

    文字水平對齊(text-align)


    02:02
    quiz common icon

    QUIZ:文字水平對齊(text-align)


    共1題
    video common icon

    文字行高(line-height)


    02:36
    quiz common icon

    QUIZ:文字行高(line-height)


    共1題
    video common icon

    關於空格(white-space)


    02:43
    quiz common icon

    QUIZ:關於空格(white-space)


    共1題
    video common icon

    文字斷行(word-break)及連字符號(hyphens)


    04:37
    quiz common icon

    QUIZ:文字斷行(word-break)及連字符號(hyphens)


    共1題
    video common icon

    文字顏色(color)


    09:22
    quiz common icon

    QUIZ:文字顏色(color)


    共1題
    video common icon

    指定字體(font-family)


    11:13
    quiz common icon

    QUIZ:指定字體(font-family)


    共1題
  • 11.CSS 背景樣式
  • video common icon

    背景顏色(background-color)


    02:25
    quiz common icon

    QUIZ:背景顏色(background-color)


    共1題
    video common icon

    背景圖(background-image)


    06:26
    quiz common icon

    QUIZ:背景圖(background-image)


    共1題
    video common icon

    背景圖反覆出現(background-repeat)


    05:35
    quiz common icon

    QUIZ:背景圖反覆出現(background-repeat)


    共1題
    video common icon

    背景圖大小(background-size)


    06:11
    quiz common icon

    QUIZ:背景圖大小(background-size)


    共1題
    video common icon

    背景圖位置(background-position)


    04:32
    quiz common icon

    QUIZ:背景圖位置(background-position)


    共1題
    video common icon

    背景圖固定模式(background-attachment)


    09:57
    quiz common icon

    QUIZ:背景圖固定模式(background-attachment)


    共1題
    video common icon

    背景圖顯示區域(background-origin)


    04:23
    quiz common icon

    QUIZ:背景圖顯示區域(background-origin)


    共1題
    video common icon

    背景圖裁切(background-clip)


    03:53
    quiz common icon

    QUIZ:背景圖裁切(background-clip)


    共1題
    video common icon

    背景線性漸層


    09:37
    quiz common icon

    QUIZ:背景線性漸層


    共1題
    video common icon

    同個區域可設定多個背景


    03:51
    quiz common icon

    QUIZ:同個區域可設定多個背景


    共1題
  • 12.CSS 溢載樣式
  • video common icon

    內容超出區域(overflow)


    06:34
    quiz common icon

    QUIZ:內容超出區域(overflow)


    共1題
    video common icon

    限制單行文字,出現省略符號(text-overflow)


    02:39
    quiz common icon

    QUIZ:限制單行文字,出現省略符號(text-overflow)


    共1題
  • 13.CSS 特定標籤主題樣式
  • video common icon

    連結樣式


    04:53
    quiz common icon

    QUIZ:連結樣式


    共1題
    video common icon

    列表樣式


    05:56
    quiz common icon

    QUIZ:列表樣式


    共1題
    video common icon

    表格樣式


    04:10
    quiz common icon

    QUIZ:表格樣式


    共1題
  • 14.CSS 基本效果樣式
  • video common icon

    元素不透明度(opacity)


    04:32
    quiz common icon

    QUIZ:元素不透明度(opacity)


    共1題
    video common icon

    元素是否可見(visibility)


    02:39
    quiz common icon

    QUIZ:元素是否可見(visibility)


    共1題
    video common icon

    元素輪廓(outline)


    04:35
    quiz common icon

    QUIZ:元素輪廓(outline)


    共1題
    video common icon

    游標(cursor)


    04:37
    quiz common icon

    QUIZ:游標(cursor)


    共1題
    video common icon

    圓角(border-radius)


    05:52
    quiz common icon

    QUIZ:圓角(border-radius)


    共2題
    video common icon

    區塊陰影(box-shadow)


    06:11
    quiz common icon

    QUIZ:區塊陰影(box-shadow)


    共1題
    video common icon

    文字陰影(text-shadow)


    03:49
    quiz common icon

    QUIZ:文字陰影(text-shadow)


    共1題
  • 15.CSS 形變效果樣式 - transform 2D
  • video common icon

    旋轉


    05:36
    quiz common icon

    QUIZ:旋轉


    共1題
    video common icon

    縮放


    04:06
    quiz common icon

    QUIZ:縮放


    共1題
    video common icon

    偏移


    05:36
    quiz common icon

    QUIZ:偏移


    共1題
    video common icon

    傾斜


    05:18
    quiz common icon

    QUIZ:傾斜


    共1題
    video common icon

    同時套用多種形變效果


    03:46
    quiz common icon

    QUIZ:同時套用多種形變效果


    共1題
  • 16.CSS 進階排版樣式 - Flexbox 觀念
  • video common icon

    flex 和 inline-flex


    02:35
    quiz common icon

    QUIZ:flex 和 inline-flex


    共1題
    video common icon

    Flex Container 和 Flex Items


    03:24
    quiz common icon

    QUIZ:Flex Container 和 Flex Items


    共1題
    video common icon

    主軸(Main Axis)和交錯軸(Cross Axis)


    02:12
    quiz common icon

    QUIZ:主軸(Main Axis)和交錯軸(Cross Axis)


    共1題
  • 17.CSS 進階排版樣式 - Flexbox Container
  • video common icon

    方向如何排列(flex-direction)


    04:32
    quiz common icon

    QUIZ:方向如何排列(flex-direction)


    共1題
    video common icon

    是否斷行(flex-wrap)


    03:53
    quiz common icon

    QUIZ:是否斷行(flex-wrap)


    共1題
    video common icon

    方向與斷行的縮寫(flex-flow)


    01:49
    quiz common icon

    QUIZ:方向與斷行的縮寫(flex-flow)


    共1題
    video common icon

    Items 在主軸中如何排列(justify-content)


    05:46
    quiz common icon

    QUIZ:Items 在主軸中如何排列(justify-content)


    共1題
    video common icon

    Items 在交錯軸中如何排列(align-content)


    08:01
    quiz common icon

    QUIZ:Items 在交錯軸中如何排列(align-content)


    共1題
    video common icon

    各 Items 之間,在交錯軸中如何排列(align-items)


    06:59
    quiz common icon

    QUIZ:各 Items 之間,在交錯軸中如何排列(align-items)


    共1題
  • 18.CSS 進階排版樣式 - Flexbox Items
  • video common icon

    只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)


    04:30
    quiz common icon

    QUIZ:只設定自己,在各 Items 之間,於交錯軸中如何排列(align-self)


    共1題
    video common icon

    指定順序(order)


    02:48
    quiz common icon

    QUIZ:指定順序(order)


    共1題
    video common icon

    自動擴展(flex-grow)


    05:08
    quiz common icon

    QUIZ:自動擴展(flex-grow)


    共1題
    video common icon

    自動壓縮(flex-shrink)


    05:02
    quiz common icon

    QUIZ:自動壓縮(flex-shrink)


    共1題
    video common icon

    設定寬或高(flex-basis)


    02:53
    quiz common icon

    QUIZ:設定寬或高(flex-basis)


    共1題
    video common icon

    縮寫形式(flex)


    03:09
    quiz common icon

    QUIZ:縮寫形式(flex)


    共1題
    video common icon

    使用 Flexbox 建立固定式二欄排版


    05:05
    quiz common icon

    QUIZ:使用 Flexbox 建立固定式二欄排版


    共1題
  • 19.固定式版型切版 - 商品列表頁
  • video common icon

    網頁建立、header 區塊及變數寫法(上)


    07:11
    video common icon

    網頁建立、header 區塊及變數寫法(下)


    08:21
    quiz common icon

    QUIZ:網頁建立、header 區塊及變數寫法


    共1題
    video common icon

    LOGO 及導覽列左側


    11:30
    quiz common icon

    QUIZ:LOGO 及導覽列左側


    共1題
    video common icon

    導覽列右側(上)


    08:46
    video common icon

    導覽列右側(下)


    08:44
    quiz common icon

    QUIZ:導覽列右側


    共1題
    video common icon

    滿版背景圖


    04:30
    quiz common icon

    QUIZ:滿版背景圖


    共1題
    video common icon

    footer 區域


    05:35
    quiz common icon

    QUIZ:footer 區域


    共1題
    video common icon

    中間區域及二欄式切版


    10:04
    quiz common icon

    QUIZ:中間區域及二欄式切版


    共1題
    video common icon

    側邊欄表單分類


    10:06
    quiz common icon

    QUIZ:側邊欄表單分類


    共1題
    video common icon

    商品列表區域(上)


    10:52
    video common icon

    商品列表區域(下)


    09:23
    quiz common icon

    QUIZ:商品列表切版


    共1題
  • 20.固定式版型切版 - 商品詳細頁
  • video common icon

    商品簡介及購買表單(上)


    11:14
    video common icon

    商品簡介及購買表單(下)


    11:02
    quiz common icon

    QUIZ:商品簡介及購買表單


    共1題
    video common icon

    商品圖文編排(上)


    05:56
    video common icon

    商品圖文編排(下)


    07:30
    quiz common icon

    QUIZ:商品圖文編排


    共1題
    video common icon

    詢問表單排版(上)


    06:24
    video common icon

    詢問表單排版(下)


    07:45
    quiz common icon

    QUIZ:詢問表單排版


    共1題
  • 21.介面實作
  • video common icon

    麵包屑(Breadcrumb)


    08:26
    quiz common icon

    QUIZ:麵包屑(Breadcrumb)


    共1題
    video common icon

    直向圖文編排


    09:37
    quiz common icon

    QUIZ:直向圖文編排


    共1題
    video common icon

    文繞圖


    11:07
    quiz common icon

    QUIZ:文繞圖


    共1題
    video common icon

    自訂下拉選單外觀


    05:10
    quiz common icon

    QUIZ:自訂下拉選單外觀


    共1題
    video common icon

    分頁(Pagination)(上)


    06:22
    video common icon

    分頁(Pagination)(下)


    06:15
    quiz common icon

    QUIZ:分頁(Pagination)


    共1題
    video common icon

    三角形


    04:10
    quiz common icon

    QUIZ:三角形


    共1題
    video common icon

    tooltip


    08:53
    quiz common icon

    QUIZ:tooltip


    共1題
    video common icon

    popover


    11:08
    quiz common icon

    QUIZ:popover


    共1題
    video common icon

    表單欄位群組化(Input Group)


    09:33
    quiz common icon

    QUIZ:表單欄位群組化(Input Group)


    共1題
    video common icon

    進度條(Progress Bar)


    04:48
    quiz common icon

    QUIZ:進度條(Progress Bar)


    共1題
    video common icon

    自訂核取方塊


    08:46
    quiz common icon

    QUIZ:自訂核取方塊


    共1題
    video common icon

    雙態開關


    06:28
    quiz common icon

    QUIZ:雙態開關


    共1題
    video common icon

    列表項目符號替換


    04:15
    quiz common icon

    QUIZ:列表項目符號替換


    共1題
    video common icon

    影片第一屏滿版


    07:03
    quiz common icon

    QUIZ:影片第一屏滿版


    共1題
    video common icon

    頁籤(Tab)(上)


    07:37
    video common icon

    頁籤(Tab)(下)


    09:02
    quiz common icon

    QUIZ:頁籤(Tab)


    共1題

課程附件


file-icon
講義.pdf
15.91 MB
stage arrow to bottom
file-icon
html_css.zip
11.55 MB
stage arrow to bottom

購買此課程後,才能使用留言功能

沒有回應的問題

目前尚無任何討論主題

成為第一個發問的人!在問答中找到學習的捷徑。
登入
免費註冊
立即加入成為Line官方好友
become line friend
返回主選單
課程類型
影音課程
實體課程
返回主選單
返回主選單
返回主選單
返回主選單