本課程將手把手帶你 3 天學會網頁基礎。
Taker Wu
講師介紹
設計
程式
網頁設計
網頁設計
3 天動手寫網頁實戰系列
這堂課我會學到
-
理解切版流程看到設計圖就能規劃架構並且做出真實的網頁
-
設計師可以做出符合網頁架構的設計
-
釐清常用的 CSS 概念及運作方式讓你恍然大悟 —「喔喔，原來是這樣子！」
課前資訊
學員上課前需具備哪些軟、硬體設備或常識
一台可以上網的電腦
一顆誠摯的心
課程適合對象
新手：從 HTML、CSS 基本的介紹、架構說明、網頁分析、工具使用、到實戰練習，一步步帶領你快速，並不慌不忙的學會網頁的製作
想轉職的朋友：如果你沒做過相關工作，遇到的問題跟新手一樣，放心去學吧 :)
設計師：能了解什麼是網頁設計，富有網頁架構的思考，做出適合網頁的設計，不需要再跟工程師打架
課程大綱
49節
09:00:53
-
課程介紹
-
課程介紹短片
-
-
網站的骨架 HTML 基礎5節33:37
-
intro01:03
-
HTML structure + what is tag04:03
-
common tags11:24
-
id _ class11:30
-
DOM tree05:37
-
-
CSS 選擇器 (selector) 選擇要改變【誰】的長相2節19:36
-
what is CSS + CSS selector14:19
-
CSS selector practice05:17
-
-
CSS layout 排版工程學3節26:50
-
display03:24
-
position18:50
-
float04:36
-
-
CSS 細節設定3節27:38
-
box model10:04
-
background08:20
-
font + others09:14
-
-
CSS 權重1節07:38
-
CSS specificity07:38
-
-
【實戰練習】「設計圖」大解析2節44:57
-
IDE22:26
-
wireframe22:31
-
-
【實戰練習】使用 HTML 製作網站架構8節01:00:18
-
init05:04
-
header _ nav14:07
-
content _ slider _ category08:17
-
content _ recent-product _ event07:21
-
content _ event _ feature07:01
-
content _ outlets07:52
-
footer05:26
-
result + homework05:10
-
-
【實戰練習】CSS 魔法替架構披上美麗外皮10節01:48:17
-
init11:59
-
container _ header11:13
-
nav details + clearfix17:51
-
#header review03:40
-
slider _ category08:25
-
category + review14:52
-
recent product + Grid alignment14:48
-
product details07:22
-
product cover info structure + hover15:23
-
recent product review + homework02:44
-
-
【實戰練習】CSS 魔法 #2 將簡陋架構轉變為美麗網頁8節01:34:06
-
CSS Units23:31
-
event14:24
-
feature11:23
-
buttons + margin collapse10:12
-
feature _ outlets11:30
-
footer16:03
-
go top + review06:44
-
after practice00:19
-
-
外傳【切版秘笈】7節01:57:56
-
layout center16:49
-
grid cols18:04
-
nav30:15
-
positioning12:39
-
img12:47
-
cover info25:30
-
after course01:52
-
課程介紹
為什麼要選本課程
3 天學會網頁基礎，許多人覺得不可能也包含我自己，因為我自己是過來人花了好多年時間才有比較紮實的基礎，學很久基礎很差的人也比比皆是；為什麼會需要那麼久？因為網頁的東西是零散的，沒有人把基礎整理好給你真正常用的東西、這些東西的用法、觀念等等一次把它們說清楚。
在整理自己的知識並不斷修正之後，發現學生在學習後的第二天、第三天都能夠自己把一個完整網頁做出來，不一定很完美、可能很多小缺陷，但它們已經知道該怎麼做了，3 天學會網頁基礎，嗯，還真的可以！
滿滿實戰練習
實戰練習前的準備安裝好軟體以及最重要的【分析網站的架構】。
透過分析逐一把它轉化成 HTML 建構網站的架構。
HTML 只有架構與內容，看起來就像不起眼的文章，透過 CSS 慢慢把畫面變成我們想要的樣子。
做 CSS 設定是很花時間的，上半場休息過後，讓我們繼續把剩下的網頁完成。
經過實戰的練習與紮實的架構分析、建構，並且把畫面做出來，我們會經歷到許多真實世界才會遇到的問題與作法。
- 【實戰練習】「設計圖」大解析
- 【實戰練習】使用 HTML 製作網站架構
- 【實戰練習】CSS 魔法－替架構披上美麗外皮
- 【實戰練習】CSS 魔法－將簡陋架構轉變為美麗網頁
誰適合本課程
Taker 老師把常見的排版方式與製作方法整理出來，再一次的進行討論與練習，讓你可以更熟悉如何對平面設計圖做網頁的版面規劃，讓新手可以快速上手實際應用。如果你是設計師，學完切版秘笈，應該再也不會跟工程師雞同鴨講，從此溝通一路順暢！Junior 網頁工程師們更應該好好學習這個章節，因為你終於可以回家吃晚餐了。
課程討論與問答
-
要先登入才能做留言
