使用 HTML、CSS 開發一個網站

為您打造就算沒有程式基礎,也能夠逐步學習獲得網頁排版技巧的紮實觀念,六角學院的講師將協助您成就更好的自己!
4.8 (225 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
710 students enrolled
$50
Take This Course
  • Lectures 77
  • Length 8 hours
  • Skill Level Beginner Level
  • Languages Traditional Chinese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 Traditional Chinese

Course Description

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

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

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

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

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

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

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

What are the requirements?

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

What am I going to get from this course?

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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 網頁編輯器、HTML基礎教學
認識網頁編輯器 Sublime Text 3 ,來寫第一個 Hello word 網頁吧!
Preview
08:32
六角學院線上問答會資訊
Article
認識 HTML 標籤,設計具有語意化的網頁結構
16:33
10:25

如果發現在網頁打中文字變成亂碼,請在 head 裡面加上UTF-8程式碼,讓網頁變成能夠支援中文:

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
HTML 環境程式碼
Article
插入圖片,了解圖片路徑與 HTML 屬性
09:59
加上連結,讓網頁開始具有互動性
08:18
認識 ul、li 清單標籤
10:56
作業:設計一個簡單網站吧
03:58
6 questions

確保你對 HTML、sublime 有一定的了解

Section 2: CSS 常用語法
12:16

插入CSS:<link rel="stylesheet" href="你的CSS檔案位置">

12:20

Windows 安裝流程

1.到 install package control,複製程式碼後,到編輯器按 CTRL+` ,將程式碼貼上去按ENTER
2..步驟有成功的話,按Ctrl+SHIFT+P 搜尋 install package 後按 enter
3..找到 emmet後按enter
4.在html檔案  按 html:5後按tab展開就表示安裝成功

Mac 安裝流程
1.到 install package control,複製程式碼後,到編輯器按 Command+` ,將程式碼貼上去按ENTER
2..步驟有成功的話,按 Command+SHIFT+P 搜尋 install package 後按 enter
3..找到 emmet後按enter
4..在html檔案  按  html:5 後按 tab 展開就表示安裝成功

CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式
06:21
CSS 擬態選擇器 - 設計 a 連結動作觸發樣式
06:33
使用 CSS 設定優化文字排版
08:35
05:41

裡面有介紹一個 Sublime 套件名稱,名字叫做 AutoFileName,可自動抓取圖片路徑,讓學生們不用自己輸入圖片路徑與名稱,也建議各同學安裝此插件。

作業:優化第一節作業吧!
02:50
第二章測驗
6 questions
Section 3: 使用CSS變更HTML標籤特性
CSS Reset,讓所有瀏覽器都長得一致
Preview
09:06
行內元素 & 區塊元素的差異
09:08
DIV 與 SPAN 的使用時機、CSS 後代選擇器
11:43
使用 margin、padding 來推擠距離
06:37
Box Model(盒模型)
Preview
07:45
使用 margin: auto 讓版型置中
08:23
作業:優化第二節作業吧
03:04
第三章測驗
8 questions
補充教材:不想算盒模型的推擠?試試 CSS3 box-sizing 吧!
09:02
CODEPEN:線上撰寫網頁服務
Preview
05:58
Section 4: 網頁排版技巧 Part I
Float 浮動定位技巧
06:39
使用 clear 清除浮動
Preview
07:37
兩欄式、三欄式版面定位技巧
08:48
設計並排式選單
10:12
LOGO 與選單並排設計技巧
08:47
03:48

作業範例程式碼已放在附件,請各位同學練習完後,再來拿我的範例程式碼來比對哦。

第四章測驗
2 questions
Section 5: 網頁排版技巧 Part II
使用絕對定位 / 相對定位 設計版型
09:06
相對定位、絕對定位元素技巧:z-index - relative、absolute
05:27
簡報呈現相對定位跟絕對定位的技巧
Preview
03:49
使用 ul li 設計產品列表
14:08
絕對定位設計優惠價
05:04
position: fixed 技巧
05:14
第五章測驗
2 questions
Section 6: 切圖技巧
Photoshop 繪圖軟體下載流程。 備註:請先使用 CC試用版本,免費的CS2在新系統已失效。
04:46
備註
Article
08:59

同學可到附件檔案下載壓縮檔,裡面有提供 psd 設計稿給各位練習

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
第六節作業
02:00
第六章測驗
1 question
Section 7: 表格與表單設計技巧
認識 HTML 表格 (Table) 標籤
07:36
設定表格(Table)上的 CSS樣 式
07:41
表單 (Form) 簡介
02:11
表單三劍客:Form、輸入欄位、Submit
08:07
Form、Text、Submit 範例程式碼
Article
使用 label、placeholder 提升表單使用者體驗
Preview
04:49
label、placeholder 範例程式碼
Article
表單元素:radio、checkbox
06:16
表單元素:select、textarea
06:13
使用 CSS 修改表單 (Form) 樣式
10:40
第七章測驗
1 question
Section 8: CSS3技巧
CSS3 圓弧效果
05:22
CSS3 漸層效果
06:43
CSS3 陰影效果
05:06
使用 can I use 查詢 HTML、CSS 瀏覽器兼容度
Preview
05:38
使用 Statcounter 瀏覽各國瀏覽器趨勢
Preview
08:05
Section 9: 最後,讓你的網頁變得更專業
CSS 權重觀念
Preview
15:48
如何規劃你的網頁結構
04:51
head 進階資訊設定
09:39
head 常用語法
Article
十種初學者常犯的錯誤
Article
01:55

請各位同學切版完後,將網頁壓縮起來 mail 到我的信箱:service@hexschool.com,我們會再為您進行程式碼檢視,以確保您學習的網頁排版觀念是否正確 :D

最後一版PSD作業細節
Article
最後一版作業PSD評分標準
Preview
03:44
第九章測驗
1 question
Iconfinder:免費下載 ICON 服務平台
Preview
05:09
unsplash、Flickr:免費高解析圖庫下載資源
Preview
05:03
Section 10: 接下來,你還可以學什麼?
響應式網頁設計 ( Responsive Web Design )
Article
使用 SASS + COMPASS 管理網頁版型
Article
如何從網路上找到適合自己的學習教材
Article
網頁關鍵字速記表
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

廖洧杰 liao, 前端工程師

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

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

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。

Instructor Biography

王志誠 Wang, 前端設計師、前端工程師

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

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

Instructor Biography

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

Instructor Biography

包子 林, 前端實習生

Ready to start learning?
Take This Course