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 Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness 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
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
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++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS

使用 HTML、CSS 開發一個網站

為您打造就算沒有程式基礎,也能夠逐步學習獲得網頁排版技巧的紮實觀念,六角學院的講師將協助您成就更好的自己!
Rating: 4.9 out of 54.9 (1,632 ratings)
3,480 students
Created by 卡斯伯 六角學院, 六角 學院, Leia Hsu, 廖洧杰 liao, 六角助教 六角學院
Last updated 1/2021
Traditional Chinese
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • 有能力排出具專業、語意化、美觀的網頁設計
  • 課程結束後,我們會提供給你一個完整的網頁設計稿,當你實作出網頁來後再轉交六角學院的講師們,我們會為您進行程式碼審視,以確保你吸收的網頁排版觀念是正確的。
  • 了解設計網頁的脈絡,你隨時可以在社群裡發問問題,我們永遠都會在這裡!
  • 獲得持續更新的講義教材,終身複習不會脫離趨勢的現代化線上課程

Course content

19 sections • 150 lectures • 15h 52m total length

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

  • 2020 更新改版講解
    01:43
  • 課程最終任務說明
    00:10
  • 六角學院線上問答會資訊
    00:31

  • Preview02:15
  • 安裝 VS Code 編輯器
    03:36
  • 安裝 VS Code 套件 - 讓介面變成中文化
    04:17
  • 開始撰寫 HTML
    06:28
  • 撰寫 h1 標籤、 p 段落
    08:11
  • CodePen 教學 - 將你的程式碼分享給別人
    04:20
  • 建立 HTML 環境
    07:40
  • HTML 環境語法
    00:08
  • Emmet 載入環境語法
    06:29
  • 插入圖片,了解圖片路徑規則
    08:48
  • 載入外部圖片方式
    04:30
  • 在網頁上加上 a 連結標籤
    06:18
  • 段落 p 與連結 a 的混合應用
    03:08
  • 認識 ul li 列表標籤
    08:26
  • HTML 標籤教學 - 小節作業
    03:55

  • HTML 與 CSS 的差異
    03:38
  • 插入 CSS 檔案,先寫一個 h1 讓文字變色
    05:48
  • CSS 寫法詳解介紹
    04:38
  • 新手常見 CSS 錯誤解析
    09:30
  • HTML 標籤選擇器
    05:44
  • 擬態選擇器 :hover
    06:07
  • 類別選擇器
    13:06
  • 使用 CSS 優化文字排版
    10:17
  • 在 HTML 標籤上加入線條
    08:10

  • 網頁容器介紹
    06:50
  • CSS Reset - 清空瀏覽器預設樣式
    11:42
  • display: block 區塊元素介紹
    12:39
  • display: inline 行內元素介紹
    12:15
  • display 容器特性 - 區塊跟行內
    05:49
  • div 與後代選擇器運用
    14:44
  • margin 產生外邊界距離
    11:52
  • padding 產生留白距離
    06:17
  • margin、padding 投影片介紹
    02:04
  • Box Model(盒模型)詳細介紹
    10:54
  • margin 0 auto 區塊水平置中
    10:15
  • text-align 文字水平調整
    05:16
  • 2020補充教材:不想算盒模型的推擠?試試 CSS3 box-sizing 吧!
    05:11

  • Flex 排版技巧介紹
    04:32
  • CodePen 講解 Flex 技巧
    01:47
  • Flex 外層屬性 (container) 介紹上集
    11:53
  • Flex 外層屬性 (container) 介紹下集
    09:20
  • 主軸介紹 - 要熟練 Flex ,必修軸線技巧
    02:13
  • flex-direction - 決定 flex 軸線
    06:16
  • justify-content - 決定主軸對齊方式
    11:45
  • 設計一個 Flex 並排選單吧!
    08:10
  • flex-wrap - 決定換行屬性
    04:29
  • align-items - 交錯軸對齊方式
    07:07
  • 透過 VS Code 插件,開啟一個即時預覽的 Web Server
    05:02
  • Flex 練習前置作業
    09:26
  • Flex 小節作業
    16:50

  • Flex 裡頭還可以包 Flex - 圖解教學
    09:46
  • Flex 裡頭還可以包 Flex - 程式碼開發
    13:34
  • Flex column 運用
    07:42
  • Markman 軟體教學
    04:23
  • Markman 章節補充
    00:13
  • Flex 修煉時光屋提交與自我檢核
    00:43
  • Flex 修煉時光屋提交作業注意事項
    02:24
  • Flex 修煉時光屋
    39:33

  • 使用絕對定位 / 相對定位 設計版型
    09:06
  • 相對定位、絕對定位元素技巧:z-index - relative、absolute
    05:27
  • Preview03:49
  • 使用 ul li 設計產品列表
    14:08
  • 絕對定位設計優惠價
    05:04
  • position: fixed 技巧
    05:14
  • 第五章測驗
    2 questions
  • 名片練習
    00:13
  • 絕對定位與相對定位的練習
    1 question
  • z-index 的練習
    1 question
  • position fixd 的練習
    1 question

  • Photoshop 繪圖軟體下載流程。 備註:請先使用 CC試用版本,免費的CS2在新系統已失效。
    04:46
  • 備註
    00:09
  • Preview08:59
  • background 在 html 元素上載入背景圖片,設定寬高
    06:59
  • background-repeat:將圖片重複顯示,repeat-x
    13:42
  • background-color:與背景圖片的混用
    09:24
  • background-position:移動 background 的位置
    04:28
  • background 縮寫教學
    02:37
  • 圖片取代文字技巧 - 以logo為例
    07:05
  • 圖片種類介紹 ( gif、jpg、png )
    10:34
  • 圖文並排範例
    00:14
  • 第六節作業
    02:00
  • 第六章測驗
    1 question
  • background-repeat 練習
    1 question
  • background-position 的練習
    1 question
  • background 縮寫練習
    1 question
  • 圖片取代文字技巧練習
    1 question

  • 認識 HTML 表格 (Table) 標籤
    07:36
  • 設定表格 (Table) 上的 CSS 樣式
    07:41
  • 表單 (Form) 簡介
    02:11
  • 表單三劍客:Form、輸入欄位、Submit
    08:07
  • Form、Text、Submit 範例程式碼
    00:10
  • Preview04:49
  • label、placeholder 範例程式碼
    00:22
  • 表單元素:radio、checkbox
    06:16
  • 表單元素:select、textarea
    06:13
  • 使用 CSS 修改表單 (Form) 樣式
    10:40
  • 第七章測驗
    1 question
  • radio、checkbox 練習
    1 question
  • label、placeholder 練習
    1 question

Requirements

  • 本課程將會使用 Chrome 網頁瀏覽器來除錯網頁內容
  • 本課程將會使用 Sublime Text 3 編輯器來設計網頁
  • 本課程適用於 Windows、OSX、Linux 的電腦系統

Description

如果你想找到 web 程式語言的入門磚,那麼你來對地方了

不論你是要找軟體工程師、網頁設計師的工作,具備紮實的網頁排版觀念是必要的條件,也是公司在徵才時必會填寫的加分條件!

在這個課程中你會學到如何從無到有來設計一個網站,同時也會教你如何善用軟體工具來提升你的開發效率。

不用擔心學不會,我們會親自檢視您的程式碼觀念

你不用擔心學完後無法驗證自己所學的觀念是否偏離,課程結束後我們會提供給您一個網頁設計稿,請您實作出來後再轉交給我們,六角學院的團隊成員個個都是在業界的專業工程師,我們會為您檢視程式碼,並指出您待改進的地方,讓你能夠設計出更加完美的網頁設計。

為什麼我們挑選 udemy 當作指定線上教學平台

  1. 具有完善的學生發問機制,以利我們隨時追蹤學生的學習進度
  2. 可隨時更新補充線上教材,讓學生們能夠終生複習
  3. 課程章節設計為精簡並易於吸收,讓學生們能夠把握零碎時間來進修
  4. 設計程式題目,以確保學生在每個章節的觀念是否正確

Who this course is for:

  • 適合完全沒有設計、程式基礎的初學者
  • 有志成為網頁設計師、前端工程師、軟體工程師的潛在開發者
  • 希望自己能夠從無到有設計一個網站

Instructors

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

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

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

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

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

我們承諾以下事項:

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


Leia Hsu
LH
  • 4.8 Instructor Rating
  • 2,683 Reviews
  • 4,523 Students
  • 2 Courses
廖洧杰 liao
前端工程師
廖洧杰 liao
  • 4.7 Instructor Rating
  • 11,201 Reviews
  • 22,331 Students
  • 20 Courses

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

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


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

 

六角助教 六角學院
六角學院助教
六角助教 六角學院
  • 4.7 Instructor Rating
  • 10,311 Reviews
  • 22,291 Students
  • 18 Courses

六角學院 是一所線上程式開發學習單位,目前已累積超過 15,000 名學員,讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是,如果您贊同我們的理念,歡迎加入六角。

我們將深入了解您想發展的領域,每位實習生我們都會量身打造專屬於您的舞台,並讓您實際瞭解公司營運 Know how。

  • 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.