使用 HTML、CSS 開發一個網站
4.8 (320 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.
868 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 使用 HTML、CSS 開發一個網站 to your Wishlist.

Add to Wishlist

使用 HTML、CSS 開發一個網站

為您打造就算沒有程式基礎,也能夠逐步學習獲得網頁排版技巧的紮實觀念,六角學院的講師將協助您成就更好的自己!
4.8 (320 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.
868 students enrolled
Last updated 12/2016
Traditional Chinese
Price: $50
30-Day Money-Back Guarantee
Includes:
  • 8 hours on-demand video
  • 14 Articles
  • 8 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
有能力排出具專業、語意化、美觀的網頁設計
課程結束後,我們會提供給你一個完整的網頁設計稿,當你實作出網頁來後再轉交六角學院的講師們,我們會為您進行程式碼審視,以確保你吸收的網頁排版觀念是正確的。
了解設計網頁的脈絡,你隨時可以在社群裡發問問題,我們永遠都會在這裡!
獲得持續更新的講義教材,終身複習不會脫離趨勢的現代化線上課程
View Curriculum
Requirements
  • 本課程將會使用 Chrome 網頁瀏覽器來除錯網頁內容
  • 本課程將會使用 Sublime Text 3 編輯器來設計網頁
  • 本課程適用於 Windows、OSX、Linux 的電腦系統
Description

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

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

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

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

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

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

  1. 具有完善的學生發問機制,以利我們隨時追蹤學生的學習進度
  2. 可隨時更新補充線上教材,讓學生們能夠終生複習
  3. 課程章節設計為精簡並易於吸收,讓學生們能夠把握零碎時間來進修
  4. 設計程式題目,以確保學生在每個章節的觀念是否正確
Who is the target audience?
  • 適合完全沒有設計、程式基礎的初學者
  • 有志成為網頁設計師、前端工程師、軟體工程師的潛在開發者
  • 希望自己能夠從無到有設計一個網站
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 79 Lectures Collapse All 79 Lectures 08:07:38
+
網頁編輯器、HTML基礎教學
9 Lectures 01:08:49

六角學院線上問答會資訊
00:04

認識 HTML 標籤,設計具有語意化的網頁結構
16:33

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
建立 HTML 環境,賦予網頁新生命
10:25

HTML 環境程式碼
00:04

插入圖片,了解圖片路徑與 HTML 屬性
09:59

加上連結,讓網頁開始具有互動性
08:18

認識 ul、li 清單標籤
10:56

作業:設計一個簡單網站吧
03:58

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

第一章測驗
6 questions
+
CSS 常用語法
7 Lectures 54:36

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

Preview 12:16

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 展開就表示安裝成功

套用第一個 Sublime Plugin,利用 emmet 提升寫 HTML、CSS 效率
12:20

CSS 類別選擇器 - 如何透過 Class 來指定 HTML 樣式
06:21

CSS 擬態選擇器 - 設計 a 連結動作觸發樣式
06:33

使用 CSS 設定優化文字排版
08:35

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

在 HTML 標籤上加上線條(border)
05:41

作業:優化第一節作業吧!
02:50

第二章測驗
6 questions
+
使用CSS變更HTML標籤特性
9 Lectures 01:10:46

行內元素 & 區塊元素的差異
09:08

DIV 與 SPAN 的使用時機、CSS 後代選擇器
11:43

使用 margin、padding 來推擠距離
06:37


使用 margin: auto 讓版型置中
08:23

作業:優化第二節作業吧
03:04

第三章測驗
8 questions

補充教材:不想算盒模型的推擠?試試 CSS3 box-sizing 吧!
09:02

+
網頁排版技巧 Part I
7 Lectures 45:55
Float 浮動定位技巧
06:39


兩欄式、三欄式版面定位技巧
08:48

設計並排式選單
10:12

LOGO 與選單並排設計技巧
08:47

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

作業:設計一個三欄式版面,具有表頭表尾的版面吧!
03:48

第四章測驗
2 questions

其他常見 clear 清除浮動效果
00:04
+
網頁排版技巧 Part II
6 Lectures 42:48
使用絕對定位 / 相對定位 設計版型
09:06

相對定位、絕對定位元素技巧:z-index - relative、absolute
05:27


使用 ul li 設計產品列表
14:08

絕對定位設計優惠價
05:04

position: fixed 技巧
05:14

第五章測驗
2 questions
+
切圖技巧
12 Lectures 01:10:39
Photoshop 繪圖軟體下載流程。 備註:請先使用 CC試用版本,免費的CS2在新系統已失效。
04:46

備註
00:01

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

Preview 08: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:03

第六節作業
02:00

第六章測驗
1 question
+
表格與表單設計技巧
10 Lectures 53:41
認識 HTML 表格 (Table) 標籤
07:36

設定表格(Table)上的 CSS樣 式
07:41

表單 (Form) 簡介
02:11

表單三劍客:Form、輸入欄位、Submit
08:07

Form、Text、Submit 範例程式碼
00:03


label、placeholder 範例程式碼
00:05

表單元素:radio、checkbox
06:16

表單元素:select、textarea
06:13

使用 CSS 修改表單 (Form) 樣式
10:40

第七章測驗
1 question
+
CSS3技巧
5 Lectures 30:54
CSS3 圓弧效果
05:22

CSS3 漸層效果
06:43

CSS3 陰影效果
05:06


+
最後,讓你的網頁變得更專業
10 Lectures 46:23

如何規劃你的網頁結構
04:51

head 進階資訊設定
09:39

head 常用語法
00:12

十種初學者常犯的錯誤
00:01

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

Preview 01:55

最後一版PSD作業細節
00:01


第九章測驗
1 question


+
接下來,你還可以學什麼?
4 Lectures 00:09
響應式網頁設計 ( Responsive Web Design )
00:02

使用 SASS + COMPASS 管理網頁版型
00:02

如何從網路上找到適合自己的學習教材
00:01

網頁關鍵字速記表
00:02
About the Instructor
廖洧杰 liao
4.6 Average rating
1,850 Reviews
8,561 Students
8 Courses
前端工程師

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

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

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

王志誠 Wang
4.6 Average rating
1,850 Reviews
8,561 Students
8 Courses
前端設計師、前端工程師

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

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

六角學院 hexschool
4.6 Average rating
1,850 Reviews
8,561 Students
8 Courses

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

Joyce lin
4.8 Average rating
635 Reviews
1,184 Students
4 Courses
前端實習生