動畫互動網頁程式入門 (HTML/CSS/JS)
找相似
$2,000

動畫互動網頁程式入門 (HTML/CSS/JS)

Hahow 好學校-線上課程平台
搶購
訂單成立賺2%
下單享LINE POINTS點數
訂單成立賺2% 40
設定到價通知
Hahow 好學校-線上課程平台

Hahow 好學校-線上課程平台

【 消費提醒 】 1. 需透過 LINE 購物前往 Hahow 好學校官方網站消費,並在同一瀏覽器於 24 小時內結帳,方享有 LINE POINTS 回饋資格。 2. 唯有「精選課程」(https://hahow.in/apselect-event)符合回饋資格,在此頁面外的課程或任何學習補給與優惠商品合購組合皆不符合 LINE POINTS 回饋資格,可以於 LINE 購物商店直接搜尋課程名稱,確認是否符合回饋,自行連結至他處所購買之課程將不會回饋 LINE POINTS 點數。 3. 建議從 LINE 購物進入 Hahow 站上後,挑選課程加入購物車並直接完成結帳與付款流程,中間請勿跳出 Hahow 網站,以確保回饋資格。 4. 點數回饋上限以單筆訂單計算。 5. 取消訂單或退貨行為,不具贈點資格。 6. 點數將於付費並無退貨後 30 天前後發送, 是否符合回饋資格請洽 LINE購物客服詢問。

相關文章

浴室、房間的「除濕機」選哪台?梅雨季就靠日立、三菱、國際牌!

浴室、房間的「除濕機」選哪台?梅雨季就靠日立、三菱、國際牌!

每年五月、六月是台灣的梅雨季節,雨一直下,「除濕機」該開下去囉!台灣全年平均濕度約80%,而對人體最舒服的濕度區間落在 6...
47,407人已觀看
韓劇《淚之女王》絕美畫面來自德國!盤點5個德國必去景點,原來財閥夫婦的蜜月旅行在「這裡」取景!

韓劇《淚之女王》絕美畫面來自德國!盤點5個德國必去景點,原來財閥夫婦的蜜月旅行在「這裡」取景!

近期熱播韓劇《淚之女王》不只卡司強大,更在未播出前就透露有至德國取景,而現下劇情已進展到洪海仁(金智媛飾)隻身前往德國治療...
584人已觀看
什麼是塔吉鍋?這個原理「燒菜不加水」保留食物原汁原味!

什麼是塔吉鍋?這個原理「燒菜不加水」保留食物原汁原味!

北非摩洛哥的料理有著濃濃的異國風情,「燒菜不加水」熱騰騰塔吉料理的秘密是什麼呢?一起來看看2021塔吉鍋Top 5人氣排行...
22,523人已觀看
上班族通勤必備好包!網友激推提把托特包TOP8

上班族通勤必備好包!網友激推提把托特包TOP8

提把托特包的大容量是許多上班族珍愛的通勤好包,不僅可以放筆電,如果有1-2天短距離的出差公務需求時,也可以拿來當成旅行包使...
43,683人已觀看
水晶寶寶哪裡買到正確丟棄處理方式|懶人包

水晶寶寶哪裡買到正確丟棄處理方式|懶人包

水晶寶寶是什麼?是活得還死的? 水晶寶寶是沒有生命的非生物,水晶寶寶的成分屬於丙烯酸高分子聚合物,這種化學藥品具有強力吸水...
70,127人已觀看
不用花盆也能種植!療癒系苔球植栽超好照顧!

不用花盆也能種植!療癒系苔球植栽超好照顧!

喜歡植栽也想要增添室內綠意,卻又擔心植物不好照顧,還需要各式土壤及肥料,不僅費神又傷荷包。推薦你超容易種植又不需經常照料的...
74,032人已觀看
日本人都這樣收納!折疊家居用品超省空間!

日本人都這樣收納!折疊家居用品超省空間!

現今買房、租屋,多以小坪數、小宅為主,但在有限的空間裡,擺放所有想要的家具,是許多人的困擾!這次小編就為大家找尋多款居家實...
222,869人已觀看
香瓜堪稱水果界之王!盤點香瓜季節、營養價值與驚人好處!

香瓜堪稱水果界之王!盤點香瓜季節、營養價值與驚人好處!

雖說吃香瓜的季節還沒來到,但隨時都要為了這營養價值高的好水果,做好萬全的研究和準備呀!今天編輯要帶大家好好認識香瓜,從香瓜...
33,361人已觀看
咖啡因洗髮精好用嗎?網友大推5款咖啡因洗髮精

咖啡因洗髮精好用嗎?網友大推5款咖啡因洗髮精

想要提神,來杯咖啡準沒錯!不過把咖啡因添加在洗髮精中,你用過了嗎?咖啡因被認為能滋養頭皮及頭髮並強化髮根,而被廣泛使用於洗...
32,362人已觀看
TWG Tea 2024春季限定「櫻之頌!茗茶」浪漫登場!絕美日本櫻花粉色茶罐令人陶醉

TWG Tea 2024春季限定「櫻之頌!茗茶」浪漫登場!絕美日本櫻花粉色茶罐令人陶醉

春暖花開的季節,漫步在粉色櫻花雨中,一同追尋浪漫春日帶來的美好祝福!迎接2024春天的到來,奢華茶葉品牌TWG Tea獻上...
1,347人已觀看

相似商品

動畫互動網頁特效入門(JS/CANVAS)
找相似
2,500

動畫互動網頁特效入門(JS/CANVAS)

Hahow 好學校-線上課程平台
2%
【可開發票】立邦投影漆漆投影墻面漆幕布專業漆抗光投影涂料高清影院熒幕展會
找相似
1,931

【可開發票】立邦投影漆漆投影墻面漆幕布專業漆抗光投影涂料高清影院熒幕展會

台灣樂天市場
0.5%
Node.js、MongoDB 網站後端工程入門
找相似
3,200

Node.js、MongoDB 網站後端工程入門

Hahow 好學校-線上課程平台
2%
台北小巨蛋捷運站【椿・科學按摩】肌肉筋膜放鬆推拿全技法深層油推60分鐘舒壓券(MO)
找相似
降價
2,134 (降$66)

台北小巨蛋捷運站【椿・科學按摩】肌肉筋膜放鬆推拿全技法深層油推60分鐘舒壓券(MO)

神腦生活
2%
Procreate人體繪畫入門-扎實基礎養成
找相似
3,600

Procreate人體繪畫入門-扎實基礎養成

Hahow 好學校-線上課程平台
2%
FLAGS創客.自造者工作坊:用創客玩ChatGPT×Python AI語音大應
找相似
1,519

FLAGS創客.自造者工作坊:用創客玩ChatGPT×Python AI語音大應

Yahoo奇摩購物中心
1%
植物水彩繪 - 石斛蘭的觀察紀錄
找相似
2,500

植物水彩繪 - 石斛蘭的觀察紀錄

Hahow 好學校-線上課程平台
2%
動態設計全方位![動畫篇] 實戰入門一次搞定
找相似
2,000

動態設計全方位![動畫篇] 實戰入門一次搞定

Hahow 好學校-線上課程平台
2%
入門數據分析,掌握 Hive SQL 取數能力
找相似
2,680

入門數據分析,掌握 Hive SQL 取數能力

Hahow 好學校-線上課程平台
2%
Minmin Chang|Procreate療癒水彩美食插畫
找相似
3,000

Minmin Chang|Procreate療癒水彩美食插畫

Hahow 好學校-線上課程平台
2%
(全台多點)美夢成真DCTSPA百會神庭舒B.S.H護理40分鐘
找相似
1,580

(全台多點)美夢成真DCTSPA百會神庭舒B.S.H護理40分鐘

Yahoo奇摩購物中心
1%
零基礎轉職!網頁設計 HTML、CSS 快速入門
找相似
2,690

零基礎轉職!網頁設計 HTML、CSS 快速入門

Hahow 好學校-線上課程平台
2%
【台北】安琪時尚沙龍Angel Hair Design #GOMAJI吃喝玩樂券#電子票券#美髮
找相似
22折
1,099

【台北】安琪時尚沙龍Angel Hair Design #GOMAJI吃喝玩樂券#電子票券#美髮

Gomaji - 懂生活的好麻吉
0.5%
【台中】典宴亮麗生活莊園spa #GOMAJI吃喝玩樂券#電子票券#美體護膚
找相似
37折
1,288

【台中】典宴亮麗生活莊園spa #GOMAJI吃喝玩樂券#電子票券#美體護膚

Gomaji - 懂生活的好麻吉
0.5%
代收代付-【美容舒壓】台北小巨蛋捷運站【椿・科學按摩】肌肉筋膜放鬆推拿全技法深層油推60分鐘舒壓券(MO)
88折
2,200

代收代付-【美容舒壓】台北小巨蛋捷運站【椿・科學按摩】肌肉筋膜放鬆推拿全技法深層油推60分鐘舒壓券(MO)

新光三越skm online
0%
日本傳統樂器:津輕三味線入門課程
找相似
4,000

日本傳統樂器:津輕三味線入門課程

Hahow 好學校-線上課程平台
2%
Data Skills for Excel Professionals
找相似
1,537

Data Skills for Excel Professionals

coursera
4%
提問式職場領導力-專業提問者從你開始
找相似
1,600

提問式職場領導力-專業提問者從你開始

Hahow 好學校-線上課程平台
2%
零基礎學程式交易:MultiCharts基本語法撰寫
找相似
1,800

零基礎學程式交易:MultiCharts基本語法撰寫

Hahow 好學校-線上課程平台
2%
Adobe XD / PS  —  網頁設計 與 UI 教學
找相似
1,990

Adobe XD / PS — 網頁設計 與 UI 教學

Hahow 好學校-線上課程平台
2%
場景透視學,我選 Procreate!
找相似
2,850

場景透視學,我選 Procreate!

Hahow 好學校-線上課程平台
2%
基礎戳繡 Punch needle.食繡植繡|戳出療癒手感創作
找相似
2,300

基礎戳繡 Punch needle.食繡植繡|戳出療癒手感創作

Hahow 好學校-線上課程平台
2%
自造機會、人生創業! 社群時代「最誠實」的個人品牌建立指南
找相似
1,799

自造機會、人生創業! 社群時代「最誠實」的個人品牌建立指南

Hahow 好學校-線上課程平台
2%
從心練字:使書寫成為日常藝術
找相似
2,000

從心練字:使書寫成為日常藝術

Hahow 好學校-線上課程平台
2%

熱銷排行榜

更多

Canva 入門到進階實戰|零基礎做質感設計
找相似
2,780

Canva 入門到進階實戰|零基礎做質感設計

Hahow 好學校-線上課程平台
2%
英雄之旅:自己的故事,別當配角
找相似
2,049

英雄之旅:自己的故事,別當配角

Hahow 好學校-線上課程平台
2%
減法攝影,感官加乘:逐格收藏觀景窗裡的世界
找相似
2,800

減法攝影,感官加乘:逐格收藏觀景窗裡的世界

Hahow 好學校-線上課程平台
2%
跟著韓娛學韓文!發音到初級文法一次掌握
找相似
2,500

跟著韓娛學韓文!發音到初級文法一次掌握

Hahow 好學校-線上課程平台
2%
百萬 YouTuber 阿滴-攻心剪輯術!
找相似
1,800

百萬 YouTuber 阿滴-攻心剪輯術!

Hahow 好學校-線上課程平台
2%
Github 免費架站術!輕鬆打造個人品牌
找相似
890

Github 免費架站術!輕鬆打造個人品牌

Hahow 好學校-線上課程平台
2%
總經X產業X個股|財經M平方 股市隱者 強強聯手 突破重圍
找相似
7,200

總經X產業X個股|財經M平方 股市隱者 強強聯手 突破重圍

Hahow 好學校-線上課程平台
2%
你的文字接案計畫|迅速入門,幫自己加薪
找相似
2,860

你的文字接案計畫|迅速入門,幫自己加薪

Hahow 好學校-線上課程平台
2%
Notion 實戰課程:打造專屬數位工作術
找相似
3,380

Notion 實戰課程:打造專屬數位工作術

Hahow 好學校-線上課程平台
2%
電商人妻 IG 增粉攻略!三大領域經營術
找相似
4,980

電商人妻 IG 增粉攻略!三大領域經營術

Hahow 好學校-線上課程平台
2%
Python 入門特訓 - 基礎實作到證照攻略
找相似
1,790

Python 入門特訓 - 基礎實作到證照攻略

Hahow 好學校-線上課程平台
2%
手繪轉電繪,我選 Procreate!
找相似
2,600

手繪轉電繪,我選 Procreate!

Hahow 好學校-線上課程平台
2%
讓插畫走入生活-Procreate 文創物實作!
找相似
2,880

讓插畫走入生活-Procreate 文創物實作!

Hahow 好學校-線上課程平台
2%
靈魂的代言人-塔羅牌義全解析
找相似
800

靈魂的代言人-塔羅牌義全解析

Hahow 好學校-線上課程平台
2%
Python 的 50+ 練習:資料科學學習手冊
找相似
3,980

Python 的 50+ 練習:資料科學學習手冊

Hahow 好學校-線上課程平台
2%
如何成為資料分析師:從問題解決到行動方案
找相似
1,980

如何成為資料分析師:從問題解決到行動方案

Hahow 好學校-線上課程平台
2%
25K活頁空白筆記-漸層季節
找相似
4444

25K活頁空白筆記-漸層季節

2%
比價3個賣場 立即比價
九乘九購物網
股市投資新手策略筆記
找相似
1,500

股市投資新手策略筆記

Hahow 好學校-線上課程平台
2%
SV 科學歌唱|用運動科學高效學唱歌
找相似
2,400

SV 科學歌唱|用運動科學高效學唱歌

Hahow 好學校-線上課程平台
2%
DBA 訓練營 -  SQL Server 資料庫管理入門
找相似
2,600

DBA 訓練營 - SQL Server 資料庫管理入門

Hahow 好學校-線上課程平台
2%
Katie 凱蒂流動瑜珈:啟動熱能,身心修復
找相似
1,800

Katie 凱蒂流動瑜珈:啟動熱能,身心修復

Hahow 好學校-線上課程平台
2%
15 單元看懂經濟運行,掌握全球投資趨勢
找相似
3,600

15 單元看懂經濟運行,掌握全球投資趨勢

Hahow 好學校-線上課程平台
2%
王梓沅的高效英聽學習法:3 階段打造英聽腦
找相似
3,800

王梓沅的高效英聽學習法:3 階段打造英聽腦

Hahow 好學校-線上課程平台
2%
24 單元入門投資科學 一次搞懂投資必備知識
找相似
3,600

24 單元入門投資科學 一次搞懂投資必備知識

Hahow 好學校-線上課程平台
2%
AI 繪圖溝通術:搭上 AI 藝術的魔法列車
找相似
2,399

AI 繪圖溝通術:搭上 AI 藝術的魔法列車

Hahow 好學校-線上課程平台
2%
掌握鉤針編織邏輯:五種針法自造生活小物
找相似
2,980

掌握鉤針編織邏輯:五種針法自造生活小物

Hahow 好學校-線上課程平台
2%
用 Python 理財:打造小資族選股策略
找相似
3,200

用 Python 理財:打造小資族選股策略

Hahow 好學校-線上課程平台
2%
訓練部位總是無感?打造專屬的矯正訓練計畫
找相似
2,480

訓練部位總是無感?打造專屬的矯正訓練計畫

Hahow 好學校-線上課程平台
2%
看懂你的人生課題 給入門者的第一堂占星課
找相似
2,500

看懂你的人生課題 給入門者的第一堂占星課

Hahow 好學校-線上課程平台
2%
人人開團時代來了!微網紅帶你開啟團購第一步
找相似
1,899

人人開團時代來了!微網紅帶你開啟團購第一步

Hahow 好學校-線上課程平台
2%

商品描述

你曾經想學過網頁設計嗎?曾經看過線上課程,大部分的程式設計教學往往只講解功能沒教你如何讓網頁好看,好用學完做出來之後,總離真正上線的網頁有段距離而覺得沮喪寫一個網頁,往往不只是一個人的夢魘,設計師拉好了頁面交給工程師,卻怎麼樣也達不到想要的效果,而程式設計師也溝通的煩悶,改到不耐煩的說「要不然你來做阿」設計師能做的話,他早就自己做了,但上網一查語法html/js/css五花撩亂,我們早已脫離了無名小站修改網誌語法的美好時代,究竟該怎麼無痛入手網頁程式開發呢?「目前突破8000%!超過4000人一同學習」課程更新>1/26新增課程共筆共筆連結包含學習目錄與推薦時間/課程勘誤補充/推薦書籍(持續新增)可以一起編輯>1/17全部單元上線完畢>11/24更新課程預計上線時間>11/7新增即時作品集合系統已經超過一百件同學繳交作品與練習(至11/15之前已上線85單元共1230分鐘)>9/04新增FB討論社群動畫互動網頁程式入門課程討論社團>8/23詳細版課程綱要:課程綱要連結>7/4課程募資期間圓滿結束!!一目了然的教學環境這堂課會告訴你從網站的草稿跟結構開始,要怎麼規劃才能有組織,不會掛再螢幕前不知道要做什麼,會從設計師的角度看,去操作網頁,一切你會在以拉上面看到的美好事物,我們會網頁的程式語言呈現。不同於一般的網頁設計入門,以最好用,最簡便的平台--Codepen代替教學,學習中再也不用上下傳檔案預覽,也能即時看到更新的效果,以替代性的jade/sass樣版語言,能簡化大量HTML/CSS的繁瑣,讓程式易讀好懂,當然後續也會在額外教大家怎麼正式的架設自己的網站。這一切讓初期學習不會因為一點點打錯,網頁出不來而搥桌,跟著這堂課從零到一,就能入門網頁開發了!最後常見的問題是,結束了一個課程的同時,很多人遇到不會的問題就卡死,怎麼做也只做得出範例的幾個網頁,因此,特別規劃了「搜尋與問題解決技巧」,讓你以後不管遇到什麼都能靠自己的力量去解決!不論你是設計師、學生、程式設計師,一般想碰網頁設計的人,這堂課會準備好一切你需要的素材,讓你感受最少的阻力入門,即使你不懂設計,也能跟著做出來,且知道以後需要什麼樣的素材製作網頁「只有自學者才懂自學的痛」三年前接觸網頁程式設計,沒有經驗的我,接了一個國中網頁設計的案子,上個經歷還停留在會動的會跳的五顏六色Flash美好年代,只好搜尋線上各種網頁設計相關教學,卻都是一坨坨程式碼教你如何打H1到H4標題(還會由大到小好棒棒),CSS可愛的背景跟文字家族。打開記事本想要刻簡單的一個導覽列跟放張圖片,卻怎麼樣都調不到自己想要的位置,改了一整天,好不容易對齊了,螢幕大小一改變半個頁面就不見。我知道,這些慘痛經歷,我都經歷過,一直都是用繪圖軟體過來,設計的頁面平平都是軟體,為什麼網站方面的教學通病都停留在語法跟瑣碎的功能,總是沒人教怎麼把腦海中的頁面變成現實,讓設計的版面照著想像的運作。課程目標這堂課會告訴你從網站的草稿跟結構開始,要怎麼規劃才能有組織,不會掛在螢幕前不知道要做什麼這次的課程,著重在製作網頁的時候,究竟要怎麼把網站做『好』而不是單純的寫出來,卻不能看不好用不夠理想。從illustrator的思維來看:如何讓東西對齊彼此、至中排列到正確的位置如何調整每個東西的顏色、粗細、透明度與看起來的樣子如何讓文字脫離新細明體魔掌、行距、字距、讓文章看起來舒服如何做到裁切版面、遮罩、繪圖、框線,在網頁上實踐各種圖像設計的常用技巧如何讓東西有趣的跟滑鼠互動,使網頁變得好玩在素材的方面,會準備好可能用到的圖,以及各種幫助學習的工具,帶著完整走一次網站開發的流程,所以課程結束後,不會徬徨無助只能照著做範例,而是能一步一步自己找資源與參考資料,將夢想的網站與動畫實現。你也許會想說,我套模板就好啦,為什麼要學網頁設計呢?套模板是一種選擇,不過學完了這堂課,你也將會有自己的能力改造模板、看懂他們,更能有系統的規劃、或與他人合作,了解以技術觀點來看網頁能做到什麼讓你能夠快速上手一些網站視覺處理的撇步,享受做出屬於自己獨一無二網頁的成就感。課程中你將能做出1.從頭開始規畫一個網頁的結構、內容與呈現方式2.章節三、基礎html/css簡單的自我介紹頁面,練習網頁元素操縱、對位與外觀3.章節四、系統化管理網頁設計-sass變數化易於更改配色/樣式的網頁模板4.學習網站配色與視覺的基礎概念,實作icon匯出4.製作動態互動天氣盒子5.使用Bootstrap+Skrollr製作捲動式專題網頁6.練習如何從概念、發想到利用網格系統分析與繪製草稿5.學習分析並刻一個模仿Hahow募資頁面板型的網頁5.走過網頁框架、配色、佈局到平面稿的流程6.使用Vue.js練習資料性的網頁與製作一台互動鋼琴7.練習各種滑鼠互動與基礎動畫課程單元總覽2-楔子-課程進行模式說明3-楔子-網頁前後端如何運作4-基礎前期規劃-網站專案開發流程5-基礎前期規劃-網站主題名稱logo6-基礎前期規劃-網站瀏覽結構樹規劃7-基礎前期規劃-網站排版規劃與分類8-基礎前期規劃-網站視覺配色概念與資源9-本機環境架設-sublime操作與瀏覽器預覽網頁10-本機環境架設-伺服器瀏覽與原理講解11-Codepen環境架設-平台介紹/註冊與基礎設定12-Codepen環境架設-實際使用sublime中快速鍵13-基礎HTML/CSS-html中元素&排列的概念14-基礎HTML/CSS-html中結構&層級的概念15-基礎HTML/CSS-簡易版本自我介紹16-基礎HTML/CSS-css直接調整外觀與顏色框線17-基礎HTML/CSS-css分開撰寫-class&id概念18-基礎HTML/CSS-css顯示方式displayblock/inline19-基礎HTML/CSS-css元素位置-相對/絕對定位20-基礎HTML/CSS-css內間隔/外間隔(padding/margin)21-基礎HTML/CSS-css字體變化與span-在文章段落中製作變化22-基礎HTML/CSS-html/css大整合-製作獨特名片網頁23-​基礎HTML/CSS-功課說明-製作自己的技能網頁24-系統性管理開發-html縮寫模組-Emmet介紹25-系統性管理開發-html樣板語言-jade(pug)(課程主要使用)26-系統性管理開發-css樣板語言-sass(課程主要使用)27-系統性管理開發-sass-變數概念管理色彩&內容28-系統性管理開發-sass-動態產生模組mixin概念29-系統性管理開發-sass-常用mixin與累積資源30-系統性管理開發-html參考資料轉換jade31-系統性管理開發-實作網頁品牌視覺指導套色32-素材前期準備-如何在以拉中製作icon/圖像33-素材前期準備-如何輸出圖片jpeg/png/svg34-素材前期準備-將圖片上傳到imgur影像網站35-素材前期準備-管理網頁色彩(guideline/sass/js)36-前端基礎動畫互動-htmlattr與自定義屬性名稱37-前端基礎動畫互動-css綜合定位運用absolute/relative38-前端基礎動畫互動-css加入基礎滑鼠互動:hover/:active39-前端基礎動畫互動-css動畫基礎transition-duration/delay40-前端基礎動畫互動-css製作影格動畫animation/keyframes41-前端基礎動畫互動-css動畫速度曲線fillmode/speedcurve42-前端基礎動畫互動-SVG-繪製向量網頁圖片/logo43-前端基礎動畫互動-SVG-讓你的LOGO或圖像動起來44-前端基礎動畫互動-動態互動天氣盒子45-前端進階程式js-引言46-前端進階程式js-jquery動態改變css外觀/html內容47-前端進階程式js-jquery初階滑鼠事件-click/hover48-前端進階程式js-jquery變數概念-儲存修改與判斷49-前端進階程式js-json物件陣列概念&for遍歷50-前端進階程式js-Jquery切換class/css應用-手機demo51-前端進階程式js-jquery/json動態產生購物車清單52-前端進階程式js-Jqueryajax-非同步載入與應用介紹53-前端進階程式js-Jqueryajax-實作導入資料代辦清單54-前端進階程式js-實作購物車-動態新增購買物品與結算55-RWD原理與應用-內容流與概念說明56-RWD原理與應用-指定比例尺寸%與max-width/min-width57-RWD原理與應用-重新排版的原理-特定條件css-mediaquery58-RWD原理與應用-實作手機版面-模仿fb帳號頁面桌面/手機板變化59-RWD原理與應用-懶人工具-bootstrap原理與結構講解60-RWD原理與應用-bootstrap基礎案例與原理熟悉61-RWD原理與應用-bootstrap格線系統原理與RWD應用62-RWD原理與應用-bootstrap應用技巧padding型規劃63-實際應用範例bootstrap-結合skrollr製作捲動式網頁64-網頁視覺設計-概念-版面規劃概念與網格系統(AI/SKETCH/紙筆)65-網頁視覺設計-概念-與頁面結構/跳轉方式規劃66-網頁視覺設計-概念-樣式顏色規劃67-網頁視覺設計-概念-微互動元素動畫反應規劃68-網頁視覺設計-案例-從元素建構而上的設計69-網頁視覺設計-案例-從頁面整體切分而下的設計70-網頁視覺設計-案例-從設計轉換程式網頁的常用技巧71-實際網站應用案例-YellowStudio設計工作室網頁72-前端框架Vue.js-為什麼要用資料導向做網頁(回顧js)73-前端框架Vue.js-將變數代入模板中74-前端框架Vue.js-v-for列舉元素應用75-前端框架Vue.js-v-model使用者輸入雙向綁定76-前端框架Vue.js-v-if/v-show條件渲染與資料的後處理-實作博客來77-前端框架Vue.js-v-on/method建立js事件78-前端框架Vue.js-與AJAX的對接動態載入資訊79-前端框架Vue.js-綜合案例-使用hahow課程資料80-前端框架Vue.js-互動錄音播放鋼琴81-購買伺服器部署/網域-如何匯出codepen與網站結構82-購買伺服器部署/網域-現成主機與網址DNS設置83-購買伺服器部署/網域-linux主機設置與安裝apache84-購買伺服器部署/網域-使用filezilla軟體連線與上傳85-購買伺服器部署/網域-使用sublimesftp進行同步86-購買伺服器部署/網域-使用Prepros在電腦上動態編譯sass/jade87-購買伺服器部署/網域-網站上線GA追蹤與og(用在fb)顯示設定88-破除障礙-問題解決的技巧-ChromeDevtools89-後續發展與介紹-如何規劃自己的未來學習路程(前端/動畫)同學們的作品集作品集連結:http://2017.awiclass.monoame.com/proj/1?utm=class_1_description網站範例參考:臺北聲音地景計畫-「捷運站體環境音樂」徵選活動花旗聯合勸募2016複雜生活節DyverseStudio音樂工作室(舊)翔虹AutoCAD技術中心MonoameDesign墨雨設計新詩視覺化靠北交大2.0Abstract(將音樂轉成視覺形式)常見問題Q&A(6/24更新)沒有程式或設計基礎適合上這門課嗎?A:這堂課是為了讓設計相關或是沒有任何程式基礎的人,能上手真正“業界”網頁程式設計的課程!,其實在業界的大型網站往往都不是用軟體,而是用程式碼一行一行刻出來的,沒有圖形化介面也不容易親近,簡介中提到的codepen平台是線上的編輯環境,可以即時預覽打出來的程式,不會覺得學起來很抽象,也可以省去上傳檔案才能預覽的麻煩:),而且平台練習使用都是免費的!開啟網頁瀏覽器輸入網址就可以使用希望能幫助大家不害怕程式設計,懂得如何熟練跟用它操作網頁視覺互動,能做的東西絕對比單純用dreamweaver排版來的多而且專業,在業界也可以提升跟相關程式人員的溝通基礎唷!AdobeIllstrator/網頁開發的課程比例各占多少呢?不會以拉適合學嗎?A:可以的,主要的內容會放在網頁編輯開發上,以拉是輔助工具而已出場機會不多,課程中的範例都會準備好素材給各位練習唷!在後半課程我會提到多ㄧ些圖像設計跟介面的概念,與ㄧ些比較有趣的應用手法和案例,AI不是這次課程的主體,僅會拿來做版面的規劃跟視覺,不過還是會提到基礎的使用喔!如果沒有以拉,也可以用任何繪圖軟體、甚至紙筆做規劃都可以!重點是如何有系統的規劃結構跟版面。RWD(響應式網頁)會講到嗎?A:在課堂中會教學RWD是什麼,如何基礎的判斷裝置寬度改變對應的CSS,當了解基礎部分後,會進一步引入框架等RWD常用模組,希望讓大家不只會使用這些套件,更能了解背後運作的原理,才能夠能改能修,對於網頁有更高的操控度不會像拼裝車搖搖晃晃。課程使用的軟體要怎麼安裝跟使用呢?有分平台嗎?A:簡介中提到的codepen平台是線上的編輯環境,網址為http://www.codepen.io,可以即時預覽打出來的程式,開啟網頁瀏覽器輸入網址就可以使用!不論是MAC或是Windows都可以使用已經是html/css工程師了,適合上這門課嗎?A:這門課大約50%入門,50%是專攻介面設計跟動畫呈現,希望能夠快速抓住網頁美感跟互動規劃的工程師,十分適合來上這門課!常用的參考資料/學習資源有什麼呢?視覺部分,像是Pinterest/Dribble還有這次的教學平台Codepen,關於視覺介面只要搜尋關鍵字UI/UXWebDesign就可以找到很多不錯的案例!程式部分w3school在基礎的html/css都有方便的索引參考,想做什麼就查什麼,雖然偏向功能解析,只要掌握網頁基本概念了之後都能夠很快速的引用。可以分享相關接案經歷跟流程細節嗎?A:會特別有一個單元是針對自己的接案經驗做分享,如果大家有特別感興趣的部分都可以反應在平台上再安排內容:)圖文內容的排版跟結構規劃會提到嗎?A:會分析3-4個基本的網站案例,以及常見的網頁呈現形式,UI/UX部分有很多瑣碎的細節和視覺要安排,都會逐步分析與帶大家實際模仿大型頁面的思維做練習,累積能量創造自己的作品!上完這門課之後,有辦法獨立接案嗎?A:獨立接案需要經驗累積,不過把課程上提的東西練熟跟自己嘗試應用,能讓你熟悉網頁領域不害怕,容易與工程師合作,自行進修便能嘗試接案。能透過這門課做出購物車真正能結帳、或是社團的留言功能嗎?A:這堂課主要是針對前端跟介面,所以後端並沒有提到,但是能對網站有很完整的了解,也能自行上手其他技術,後端部分又是另一門學問,不是那麼快可以學到完成深入的東西了!想學更進階的JS跟繪圖嗎?第二堂課-動態互動網頁特效入門這堂課將帶領你,從零開始打造一個「打動人心」的互動特效網頁;賦予你堅實的網頁開發技術、靈活組合各式技巧的應變能力,透過從零開始的JS程式教學與Canvas繪圖概念,結合數學、物理與物件導向程式開發,幫助你實踐心中的想法。課程內容分為四階段,總共2000分鐘以上第一階段:將HTML/CSS融會貫通,輕鬆入門,順暢進階第二階段:JavaScript程式與動畫基礎,做出設計感的動畫應用第三階段:UI原理實作與Canvas運算藝術第四階段:結合Vue.js,打造輕巧完整的獨立網頁遊戲熱騰騰上線中課程連結個人經歷墨雨設計創辦人吳哲宇從動畫與平面設計起家,持續做到整體品牌形象CI設計到UI/UXAPP介面設計,目前專攻網頁動畫與互動,研究如何以網頁的技巧實踐MotionGraphics的精神,以設計的角度主宰網頁,讓網頁不只是能用、資訊呈現,更要有趣、好玩。第五屆宏碁數位創作獎國中組首獎第六屆宏碁數位創作獎國中組首獎第七屆宏碁數位創作獎高中普通組首獎+評審團超級大獎第八屆宏碁數位創作獎高中普通組優等第九屆宏碁數位創作獎高中專業組首獎+評審團超級大獎故事旅社啟程,故事總匯風視覺設計台北智慧城市黑客松評審團超級大獎Selinko&RemyMartin限量合作酒款APP界面設計聯合報國際美容展2015/2016前後台網頁暨系統開發2015世界健康大會前後台網頁暨系統開發翔虹AutoCAD技術中心網頁與管理系統開發其他作品

加入購物車

設定到價通知