Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
30-Day Money-Back Guarantee
Development Web Development Responsive Design

一變應萬變的響應式網頁設計

還不會目前業界最為流行的響應式網頁設計嗎?讓六角學院線上手把手教會你/妳!
Rating: 4.5 out of 54.5 (710 ratings)
2,507 students
Created by 廖洧杰 liao, 卡斯伯 六角學院, 六角 學院, Evangelin Lin
Last updated 11/2020
Traditional Chinese
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 掌握響應式網頁設計細節
  • 了解如何跨部門協作響應式網頁設計
  • 懂得如何以 UI / UX 角度設計好的響應式網頁設計

Course content

14 sections • 95 lectures • 8h 41m total length

  • 六角學院線上社團
    00:32

  • Preview04:35
  • 什麼是響應式網頁設計?(下)
    04:07
  • 基本環境建立 (上)
    03:50
  • 基本環境建立 (下)
    05:51
  • 基本環境建立 (下) -課程補充
    00:24
  • CSS 3 Media Query 觀念 (上)
    07:02
  • Preview04:48
  • min-width 語法教學
    02:51
  • 你知道瀏覽器內建就有模擬 Mobile 介面工具了嗎?
    06:20
  • 第一章測驗
    6 questions
  • 課程最終任務說明
    00:10

  • Preview00:19
  • 禁止顯示 x 軸法則
    02:16
  • max-width:一個小設定輕易將網頁設定成流體式佈局
    05:52
  • max-width:一個小設定輕易將網頁設定成流體式佈局-課程補充
    00:13
  • 版型單位 % 數觀念
    07:16
  • 三欄流體式設計
    07:50
  • 左側 Float固定、右側流體式設計
    06:27
  • Float:none 清除浮動並排效果
    05:59
  • 網站版型框架設定
    08:07
  • 第二章作業
    04:37

  • Preview04:19
  • 斷點時機:設計多欄式佈局的必要觀念
    04:11
  • 斷點時機:設計多欄式佈局的必要觀念-課程補充
    00:13
  • Preview03:39
  • 少即是多:避免資訊量爆炸
    02:56
  • 載具特性:使用者行為 touch、hover 傻傻分不清楚
    03:20
  • 斷點元素:只有手機才會顯示的功能與Layout切換
    05:06
  • 斷點元素:只有手機才會顯示的功能與Layout切換-課程補充
    00:17

  • 先要有個認知,響應式無法讓所有螢幕解析度都最佳化
    03:34
  • 遵循 80/20 法則,先兼容熱門瀏覽器吧!
    06:48
  • 什麼是 Mobile First 與 Desktop First 優先?
    05:29
  • 為何要考量 Mobile First 與 Desktop 優先的網頁版型?
    05:34
  • 常見 PC 解析度斷點設計
    10:56
  • Viewport Sizes 服務網站介紹
    02:41
  • Viewport Sizes 服務網站介紹-課程補充
    00:14
  • 六角講師斷點設計分享
    01:10

  • 響應式表格設計 (上)
    07:27
  • 響應式表格設計 (下)
    04:08
  • pure.css:加強你對網頁元素的了解
    04:30
  • pure.css:按鈕設計原理
    08:12
  • pure.css:自行新增子模組
    08:34
  • pure.css:重新認識表單狀態
    11:24
  • pure.css:如何將表單整合至網頁
    12:55
  • Preview04:10
  • 表單設計:文字欄位並非只有「text」-課程補充
    00:09

  • Preview05:28
  • Preview03:27
  • Preview08:40
  • Preview03:38
  • SVG 篇:向量圖片介紹
    05:20
  • SVG 篇:繪圖軟體匯出 svg 與 png 圖片流程
    03:55
  • Preview03:27
  • SVG 篇:將 LOGO 取代為 SVG 格式-課程補充
    00:25
  • Preview07:41
  • Preview04:05
  • 工具篇: tinypng 壓縮圖片服務
    03:51

  • 響應式選單常見樣式
    07:46
  • 多欄多列式設計細節
    09:03
  • 漢堡選單設計
    09:40
  • 固定式選單 (Fixed)
    04:11
  • Off Canvas 選單設計
    07:41
  • 選單設計總結
    04:24

  • 確認你的 media query 設定
    05:21
  • media 到底要全部寫在一起還是隔離
    06:24
  • 請不要習慣寫死高度
    02:39

  • 最終作業寄送變更
    01:09
  • Preview08:16
  • 最後一版作業細節 (多頁設計)
    04:28
  • Preview08:25

Requirements

  • 不適合沒學過 HTML、CSS 的初學者
  • 需要安裝 Chrome 網頁瀏覽器
  • 需要安裝 Sublime Text 3網頁編輯器

Description

本課程將會講解如何從無到有設計響應式網頁設計,除了基礎教學外,我們也提供許多實務上與其他部門合作時的心法通通傳授給你,
不論你是網頁設計師、前端工程師都相當適合從中了解真正實務上設計響應式網頁時所需要注意的細節!
六角學院除了提供線上影音課程外也提供:

  • 無限期、無限次數地觀看線上教學影片
  • 隨時可提問的 udemy 發問社群
  • 每週三晚上七點半的線上問答
  • 提供三次 程式碼檢視,以確保各位學生觀念正確

Who this course is for:

  • 已經會 HTML、CSS 的網頁初學者
  • 想要了解更多網頁排版細節的潛在網頁工程師、網頁師

Instructors

廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.7 Instructor Rating
  • 11,208 Reviews
  • 22,336 Students
  • 20 Courses

你好,我是六角學院的校長,洧杰。

我是熱愛分享與交流的前端工程師,目前專注於兼容桌面/移動網頁前端開發,期間已協助數百位平面設計師,網頁設計師導入標準網頁設計。


如果你有意成為網頁設計師,前端工程師,歡迎參考我們的課程,我們是六角學院,希望能帶領您進入程式領域,線上帶您學到會 :D

 

卡斯伯 六角學院
前端設計師、前端工程師
卡斯伯 六角學院
  • 4.7 Instructor Rating
  • 11,208 Reviews
  • 22,336 Students
  • 20 Courses

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

六角 學院
Udemy 台灣合作夥伴
六角 學院
  • 4.7 Instructor Rating
  • 11,208 Reviews
  • 22,335 Students
  • 20 Courses

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

我們承諾以下事項:

  • 一次付費,課程內容沒有期限
  • 課程內容更新,無需額外付費
  • 價格調整,已付費者不受影響
  • Udemy、Mail、Facebook 等各頻道發問一定會得到回答
  • 30 天內無條件退款


Evangelin Lin
Evangelin Lin
  • 4.7 Instructor Rating
  • 2,717 Reviews
  • 8,859 Students
  • 4 Courses

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.