|
| 商品編號: | DUC0072 | |
| 商品名稱: | 9比1線上課程 3 天動手寫網頁實戰系列 講師:Taker Wu 影音教學 中文發音 繁體中文版(DVD版) | | | 語系版本: | 中文發音 繁體中文版 | |
| 運行平台: | 官方原版畫質MP4檔,沒有任何平台限制,終身使用 | |
| 更新日期: | 2026-01-01 | |
| 光碟片數: | 1片DVD光碟 | |
| 銷售價格: | $350元 | |
| 熱門標籤: | 9比1線上課程
Taker
| |
9比1線上課程 3 天動手寫網頁實戰系列 講師:Taker Wu 影音教學 中文發音 繁體中文版(DVD版)
這堂課我會學到
理解切版流程看到設計圖就能規劃架構並且做出真實的網頁
設計師可以做出符合網頁架構的設計
釐清常用的 CSS 概念及運作方式讓你恍然大悟 —「喔喔,原來是這樣子!」
課前資訊
學員上課前需具備哪些軟、硬體設備或常識
一台可以上網的電腦
一顆誠摯的心
課程適合對象
新手:從 HTML、CSS 基本的介紹、架構說明、網頁分析、工具使用、到實戰練習,一步步帶領你快速,並不慌不忙的學會網頁的製作
想轉職的朋友:如果你沒做過相關工作,遇到的問題跟新手一樣,放心去學吧 :)
設計師:能了解什麼是網頁設計,富有網頁架構的思考,做出適合網頁的設計,不需要再跟工程師打架
課程介紹
本課程將手把手帶你 3 天學會網頁基礎。
為什麼要選本課程
3 天學會網頁基礎,許多人覺得不可能也包含我自己,因為我自己是過來人花了好多年時間才有比較紮實的基礎,學很久基礎很差的人也比比皆是;為什麼會需要那麼久?因為網頁的東西是零散的,沒有人把基礎整理好給你真正常用的東西、這些東西的用法、觀念等等一次把它們說清楚。
在整理自己的知識並不斷修正之後,發現學生在學習後的第二天、第三天都能夠自己把一個完整網頁做出來,不一定很完美、可能很多小缺陷,但它們已經知道該怎麼做了,3 天學會網頁基礎,嗯,還真的可以!
滿滿實戰練習
實戰練習前的準備安裝好軟體以及最重要的【分析網站的架構】。
透過分析逐一把它轉化成 HTML 建構網站的架構。
HTML 只有架構與內容,看起來就像不起眼的文章,透過 CSS 慢慢把畫面變成我們想要的樣子。
做 CSS 設定是很花時間的,上半場休息過後,讓我們繼續把剩下的網頁完成。
經過實戰的練習與紮實的架構分析、建構,並且把畫面做出來,我們會經歷到許多真實世界才會遇到的問題與作法。
【實戰練習】「設計圖」大解析
【實戰練習】使用 HTML 製作網站架構
【實戰練習】CSS 魔法-替架構披上美麗外皮
【實戰練習】CSS 魔法-將簡陋架構轉變為美麗網頁
誰適合本課程
Taker 老師把常見的排版方式與製作方法整理出來,再一次的進行討論與練習,讓你可以更熟悉如何對平面設計圖做網頁的版面規劃,讓新手可以快速上手實際應用。如果你是設計師,學完切版秘笈,應該再也不會跟工程師雞同鴨講,從此溝通一路順暢!Junior 網頁工程師們更應該好好學習這個章節,因為你終於可以回家吃晚餐了。
00_課程介紹
001_課程介紹短片.mp4
01_網站的骨架 HTML 基礎
002_intro.mp4
003_HTML structure + what is tag.mp4
004_common tags.mp4
005_id _ class.mp4
006_DOM tree.mp4
02_CSS 選擇器 (selector) 選擇要改變【誰】的長相
007_what is CSS + CSS selector.mp4
008_CSS selector practice.mp4
03_CSS layout 排版工程學
009_display.mp4
010_position.mp4
011_float.mp4
04_CSS 細節設定
012_box model.mp4
013_background.mp4
014_font + others.mp4
05_CSS 權重
015_CSS specificity.mp4
06_【實戰練習】「設計圖」大解析
016_IDE.mp4
017_wireframe.mp4
07_【實戰練習】使用 HTML 製作網站架構
018_init.mp4
019_header _ nav.mp4
020_content _ slider _ category.mp4
021_content _ recent-product _ event.mp4
022_content _ event _ feature.mp4
023_content _ outlets.mp4
024_footer.mp4
025_result + homework.mp4
08_【實戰練習】CSS 魔法替架構披上美麗外皮
026_init.mp4
027_container _ header.mp4
028_nav details + clearfix.mp4
029_#header review.mp4
030_slider _ category.mp4
031_category + review.mp4
032_recent product + Grid alignment.mp4
033_product details.mp4
034_product cover info structure + hover.mp4
035_recent product review + homework.mp4
09_【實戰練習】CSS 魔法 #2 將簡陋架構轉變為美麗網頁
036_CSS Units.mp4
037_event.mp4
038_feature.mp4
039_buttons + margin collapse.mp4
040_feature _ outlets.mp4
041_footer.mp4
042_go top + review.mp4
043_after practice.mp4
10_外傳【切版秘笈】
044_layout center.mp4
045_grid cols.mp4
046_nav.mp4
047_positioning.mp4
048_img.mp4
049_cover info.mp4
050_after course.mp4
|