NT$2,990
最新討論
課程資訊
適合對象
✔ 想轉職的朋友
✔ 設計師
✔ Junior 網頁工程師
你可以學到
✔ 理解切版流程,看到設計圖就能規劃網頁架構
✔ 釐清常用的 CSS 概念及運作方式,讓你恍然大悟「喔喔原來是這樣子喔!!!」
課程介紹
許多人覺得不可能,我一開始也這麼覺得
像我們過來人,學習花了很多時間,才有紮實的基礎
甚至學很久基礎很差的人也比比皆是
會需要那麼久,是因為沒有人幫你把基礎整理好
真正常用的東西、這些東西的用法、觀念等,一次把他們說清楚
至少在我們那時候,是沒有這種東西的
在整理自己所得的知識,整理並不斷修正、更新之後
發現學生在學習後的第二天、第三天,都能夠自己把作業(一個完整網頁)刻出來
不一定很完美、可能很多小缺陷,但至少他們知道該怎麼做了
我也就放心了
3天學會網頁基礎
嗯,還真的可以
非學不可的理由
✔ 時間短
如果你有時間,學習+練習,完整的空出3天即可完成學習
如果沒時間,下班後每天花一小時,學習+練習,2個禮拜後也可完成
✔ 精華中的精華
這個課程其實是經過不斷的修改、精進之後完成的成品
除了自己8年的工程師經驗,2、3年的教學經驗
重點是學生的成果,驗證了學習成效
✔ 接近實務的訓練
通常網路上的資源、或者小課程,都是教一些小東西、或者較小的練習
但接案或工作,自己寫出一個、多個完整的網頁是不可或缺的
這樣的實戰會遇到的問題非常多,不是學習一個小單元的滿足感可以解決的
所以 Taker 會拿幾近真實的例子,帶大家做實戰練習
得到最真實的體驗
✔ 基礎!基礎!基礎!
為什麼基礎那麼重要?
基礎不好,寫得慢,而且問題一堆
A問題修好、B問題就跑出來,卻不知道到問題是出在哪裡
有正確的觀念,才知道自己在做什麼、以及為什麼要這樣做
另外,有好的基礎
在學新的東西的時候,因為觀念正確,理解也快,學習自然事半功倍
✔ 對網頁架構的概念
很多人對網頁其實都沒有概念
學了很多 HTML 標籤、CSS 語法,一個一個拿出來看都沒問題
但要把他們兜在一起的時候就掛點了
那是因為沒有網頁的觀念,即使會了那些東西,依舊是無法有架構的分析網頁
也就無法順利的把學到的 HTML、CSS 兜在一起
而網站的分析也是我們的一大重點
如此一來,當大家拿到新的設計圖的時候,也有能力把他實作出來喔 :)
如果你是...
✔ 新手
此課程是針對新手、設計師設計的課程
從 HTML、CSS 基本的介紹、架構說明、網頁分析、工具使用、到實戰練習
一步一步的引導,帶領你快速,卻又不慌不忙的學會網頁的製作
✔ 轉職
如果你沒做過相關工作,你的問題跟新手一樣
放心的去學吧 :)
✔ 設計師
此課程讓你知道什麼是網頁設計,使你富有網頁架構的思考
你將能做出適合網頁的設計、不需要再跟工程師打架(咦)
甚至、講100遍改不動的東西,你可以「X的老娘自己來!」(or 林北)
✔ Junior 網頁工程師
工程師在前幾年是最辛苦的,因為很多基礎都不是很清楚
如果在一開始就搞清楚基礎,不管是對工作、還是未來的學習都非常有幫助
如果你常常有【改來改去就是改不出來】的問題
或者【其實不確定怎麼做,只好把 CSS 屬性都拿來試試看好了】的作法
那快來試試這個訓練課程吧 :P
學習前基本能力
學習前準備
課程資訊
關於講師
taker.wu
期間開發了許多網站、手機 app、網路服務等
後因設計師朋友想學網頁相關的技能
遂開發【網頁基礎15天】等相關課程
以簡單易懂、貼近實際應用的訓練著稱
課前閒聊
【網頁架構】到底是什麼?
【HTML 標籤】(tag) 是什麼?
【常用標籤】與他們的用途
替【架構】取名字:如何使用【id】與【class】
HTML 其實是一種【樹狀結構】嗯?可以吃嗎?
CSS 的寫法
【CSS 選擇器】
練習:一起來選選看吧!
display:顯示的特性
position:相對位置屬性
float & clear:文繞圖與排版
box model
background:背景設定
font 相關:文字相關設定
其他
【權重】觀念與調整方法
行前準備:IDE 工具
Wireframe:手繪分析稿,讓架構一清二楚
初始設定
header > nav 與假資料們
content > slider / category / Grid 概念 / HTML 特殊字元
content > recent-product / event / 假字
content > event / feature / 假按鈕
content > outlets / email 連結 / 新分頁連結
footer > 內容 / go top
HTML 架構完成後的長相
額外練習
初始設定:串連 HTML 與 CSS 檔案
container / header / 置中的辦法 / 用 float 來排版
nav 的諸多調整,與 UX 細節
關於 clearfix
#header 回顧
slider / category / Grid 的實作方法 / 圖片服貼容器 / 文字的設定
slider 與 category 回顧
recent product / 標題
Grid 左右邊界 對齊問題
product 的細節設定
大解析:滑鼠移上 product 後顯示資訊的架構
CSS 3:滑鼠移上 product 後的動態效果
recent product 回顧
額外練習
休息一下:談談 CSS 的單位
繼續練習:event / 背景圖片設定 / 假按鈕外觀
feature
按鈕的多樣性
margin 崩塌 (margin collapse)
feature / outlets / 分割線
footer / logo 的出格 / 第三種置中 / 用 CSS 做出圓形
go top 回到頂端按鈕
整體回顧
訓練總結
基礎切版架構:版面置中
兩欄式架構、三欄式架構
常見版面介紹:nav
破格設計
特殊版面介紹:圖片常見的問題與解法
cover info:覆蓋在圖片上的資訊
下一步?
學習附件
購買此課程後,才能使用留言功能
目前尚無任何討論主題
成為第一個發問的人!在問答中找到學習的捷徑。關於講師
taker.wu
期間開發了許多網站、手機 app、網路服務等
後因設計師朋友想學網頁相關的技能
遂開發【網頁基礎15天】等相關課程
以簡單易懂、貼近實際應用的訓練著稱