NT$1,360
最新討論
課程資訊
課程時長 6 小時 11 分
課程共 11 單元 141 小節
1 個可下載的 學習資源
提供完訓證書
提供制定 學習計畫建議學習 4 週 (每週 2 小時)適合對象
具備 HTML & CSS 基礎概念，且有以下情形：
- 對網頁設計有興趣的你
- 想更進修網頁設計能力的你
- 想自己設計專業網站的你
- 想增加自家網站產品包裝頁面吸睛度的你
- 嚮往網頁設計師、前端工程師、軟體工程師的你
你可以學到
若你已經知道如何設計出一個網站頁面，卻總是覺得還少了點什麼？
以上有講到你心中的疑惑，那你就不能錯過此門「透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面」的下集！
｜上集和下集的差別在哪呢？
在 成為前端工程師｜透過 HTML 與 CSS 認識網頁設計，從 0 到 1 打造實用介面 (上集) 中，你將能學會使用 HTML、CSS 去實作出一個網站頁面，也能透過實際練習，了解從無到有的切版過程。
此門課程，將從上集的基本概念繼續向外延伸，帶你掌握更多網頁設計技術，去打造更有互動感的介面！
｜透過這門課你可以學到：
- Grid Layout 排版模式
- Column 多欄排版模式
- transition 轉場效果
- animation 動畫效果
- 動畫效果套件的使用
課程介紹
經過張互賓老師精心設計的這門課程，將帶你建立起自己腦中的靈感技能燈泡，學會運用三大技術去玩轉網頁介面的包裝，並跟著老師一起完成九大實作練習，掌握更多網頁設計要素！
張互賓老師擁有豐富的教學經驗，以及多年的接案經歷，同時在與多位學生的互動中，更是能夠以非常貼近學員的角度，去思考學員們可能遇到的問題，透過清楚的解說與實際範例的操作，詳細的為學員解答。
張互賓老師不僅在緯育 TibaMe 中擁有超高人氣，
所教授的網頁設計相關課程更是深受學員們愛戴，好評如潮！
我們統計了截至目前為止的學員評價：
在滿分為 5 分的講師教學評價中，平均有超過 90% 以上的學員都給予 4~5 分的高滿意分數呢！
想要體驗看看張互賓老師的課程嗎！點擊「課程試閱連結」，讓緯育 TibaMe 帶你進入搶先看：
｜購買本課程的所有學員，都可以擁有以下完整學習資源庫
- 程式碼範例下載：提供完整程式碼範例檔，讓你邊上課邊跟著講師逐步完成範例，清楚知道撰寫程式流程，並透過實作強化觀念。
- 課後作業練習：每個單元都會有課後評量，透過題目反覆練習讓你了解自身的學習狀況。
- 課程重複觀看：不限時間、不限次數，皆可反覆觀看課程影片進行複習。
- 課程討論區：有任何學習問題皆可在討論區發問，專業講師將會替你答題解惑。
｜提供便利線上學習環境
- 下載學習 App，行動學習最便利：
下載學習 App，隨時隨地都能學，聰明把握每個零碎時間，走到哪學到哪！ - 開啟學習計畫，彈性安排學習進度：
學習計畫結合 Google 日曆，學員可以依照建議的學習週期進行學習，也可依照個人學習步調安排學習時間，逐步完成課程學習。 - 完整拆解知識點，複習所學最便利：
將知識點進行拆解與分類，複習時更容易快速搜索，找到想要複習的課程內容。
完成所有課程，將可以獲得緯育 TibaMe 頒發的完課證書唷！
學習前基本能力
｜學習這門 HTML & CSS 課程之前，需要有什麼先備知識嗎？
- 需具備 HTML & CSS 基礎概念
- 建議若是有「javaScrupt」、「 jQury」的概念會更有助於學習唷！
沒有的話也不用怕，課程中互賓老師也會為你詳細解說運用到程式碼概念～
協助你獲得更好的學習效果！
｜那還不太會 HTML & CSS 基礎概念該怎麼辦？
別擔心～我們有推薦以下基礎課程！
建議可先學習「張互賓老師的 HTML & CSS 網頁設計（上集）」喔！
｜學習時遇到挫折好焦慮啊，可是又不敢發問嗎？
免煩惱！遇到任何困難都歡迎發問，在緯育 TibaMe 的「課程討論區」裡不用擔心自己是否會問錯問題，只要你是認真學習且積極發問的態度，獲取的知識都是屬於你自己的寶藏唷～而且還能能幫助討論區的其他同學一起互相觀摩、學習，共同提升學習成效，真是一舉多得呢！
｜還有其他對於 緯育 TibaMe 的問題？
歡迎點選 FAQ，你將可以得到更多解答喔！
學習前準備
請自備筆記型電腦或桌上型電腦並確認有穩定的網路以利學習唷～
課程資訊
課程時長 6 小時 11 分課程共 11 單元 141 小節1 個可下載的 學習資源提供完訓證書提供制定 學習計畫建議學習 4 週 (每週 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
希望 學員/讀者 在這學習領域中，有遇到任何問題，可直接與我聯繫，盼能協助各位在這領域上精進。
前言
認識 grid 和 inline-grid
QUIZ：認識 grid 和 inline-grid
認識基本術語
QUIZ：認識基本術語
grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
QUIZ：grid-template-columns 設定各欄寬度、grid-template-rows 設定各列高度
grid-auto-flow 設定流向
QUIZ：grid-auto-flow 設定流向
grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
QUIZ：grid-auto-rows 設定各列預設高度、grid-auto-columns 設定各欄預設寬度
grid-template-areas 屬性 與 grid-area 命名
QUIZ：grid-template-areas 屬性 與 grid-area 命名
grid-template 簡寫形式
QUIZ：grid-template 簡寫形式
grid 簡寫形式
QUIZ：grid 簡寫形式
repeat() 與 minmax() 函式與 fr 單位
QUIZ：repeat() 與 minmax() 函式與 fr 單位
column-gap 設定各欄間距
QUIZ：column-gap 設定各欄間距
row-gap 設定各列間距
QUIZ：row-gap 設定各列間距
gap 簡寫形式
QUIZ：gap 簡寫形式
justify-items 沿著 Row Axis 排列
QUIZ：justify-items 沿著 Row Axis 排列
align-items 沿著 Column Axis 排列
QUIZ：align-items 沿著 Column Axis 排列
place-items 簡寫形式
QUIZ：place-items 簡寫形式
justify-content 沿著 Row Axis 排列
QUIZ：justify-content 沿著 Row Axis 排列
align-content 沿著 Column Axis 排列
QUIZ：align-content 沿著 Column Axis 排列
place-content 簡寫形式
QUIZ：place-content 簡寫形式
grid-column 合併與 Grid Line 的命名
QUIZ：grid-column 合併與 Grid Line 的命名
grid-row 合併與 Grid Line 的命名
QUIZ：grid-row 合併與 Grid Line 的命名
justify-self 排列規則與 justify-items 相同
QUIZ：justify-self 排列規則與 justify-items 相同
align-self 排列規則與 align-items 相同
QUIZ：align-self 排列規則與 align-items 相同
place-self 簡寫形式
QUIZ：place-self 簡寫形式
grid-area 簡寫形式與命名
QUIZ：grid-area 簡寫形式與命名
column-count 決定欄數
QUIZ：column-count 決定欄數
column-fill 內容如何填滿欄數
QUIZ：column-fill 內容如何填滿欄數
column-gap 各欄間距
QUIZ：column-gap 各欄間距
column-rule 各欄之間的直線樣式
QUIZ：column-rule 各欄之間的直線樣式
column-span 元素跨欄
QUIZ：column-span 元素跨欄
column-width 每欄寬度
QUIZ：column-width 每欄寬度
transition-property 與 transition-duration 屬性
QUIZ：transition-property 與 transition-duration 屬性
transition-timing-function 漸變函式
QUIZ：transition-timing-function 漸變函式
transition-delay 效果的延遲
QUIZ：transition-delay 效果的延遲
transition 簡寫形式
QUIZ：transition 簡寫形式
第一個 animation
QUIZ：第一個 animation
關於 keyframes
QUIZ：關於 keyframes
同個元素套用多個 animation
QUIZ：同個元素套用多個 animation
animation-iteration-count 次數
QUIZ：animation-iteration-count 次數
animation-direction 方向
QUIZ：animation-direction 方向
animation-delay 效果的延遲
QUIZ：animation-delay 效果的延遲
animation-fill-mode 填滿模式
QUIZ：animation-fill-mode 填滿模式
animation-play-state 播放狀態
QUIZ：animation-play-state 播放狀態
animation-timing-function 漸變函式
QUIZ：animation-timing-function 漸變函式
動畫效果事件
QUIZ：動畫效果事件
簡介及直接加上 class 套用
QUIZ：簡介及直接加上 class 套用
效果永久的反覆執行
QUIZ：效果永久的反覆執行
自定義相關屬性
QUIZ：自定義相關屬性
透過 JS，動態的加上動畫效果 class
QUIZ：透過 JS，動態的加上動畫效果 class
讓動畫效果，透過按鈕可以執行多次
QUIZ：讓動畫效果，透過按鈕可以執行多次
動畫效果執行完畢後，再執行自己定義的 JS 程式
QUIZ：動畫效果執行完畢後，再執行自己定義的 JS 程式
基本套用
QUIZ：基本套用
瞭解 aos 基本屬性
QUIZ：瞭解 aos 基本屬性
瞭解 data-aos-offset
QUIZ： 瞭解 data-aos-offset
瞭解 data-aos-anchor-placement
QUIZ：瞭解 data-aos-anchor-placement
瞭解 data-aos-anchor
QUIZ：瞭解 data-aos-anchor
利用 AOS，套用自己寫的 transition
QUIZ：利用 AOS，套用自己寫的 transition
寫一個 keyframes 的簡單動畫效果，讓 AOS 套用
QUIZ：寫一個 keyframes 的簡單動畫效果，讓 AOS 套用
頁籤介面
QUIZ：頁籤介面
單個商品排版
QUIZ：單個商品排版
商品橫向檢視模式
QUIZ：商品橫向檢視模式
商品直向檢視模式
QUIZ：商品直向檢視模式
商品瀑布流檢視模式
QUIZ：商品瀑布流檢視模式
搜尋框：focus 狀態的轉場效果
QUIZ：搜尋框：focus 狀態的轉場效果
滑鼠移入，內容往上呈現
QUIZ：滑鼠移入，內容往上呈現
欄位左右擺動效果
QUIZ：欄位左右擺動效果
sprite 動畫效果
QUIZ：sprite 動畫效果
loading icon
QUIZ：loading icon
介面從螢幕右側向左滑入
QUIZ：介面從螢幕右側向左滑入
導覽列次選單淡入淡出
QUIZ：導覽列次選單淡入淡出
棋盤式版型
QUIZ：棋盤式版型
學習附件
購買此課程後，才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人！在問答中找到學習的捷徑。關於講師
張互賓
自 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
希望 學員/讀者 在這學習領域中，有遇到任何問題，可直接與我聯繫，盼能協助各位在這領域上精進。
