Submit Search
Upload
台科大暑期資工營 - 前端入門
•
2 likes
•
1,199 views
Yi-Feng Xie
Follow
台科大暑期資工營 - 前端入門
Read less
Read more
Education
Report
Share
Report
Share
1 of 48
Download now
Download to read offline
Recommended
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
Koubei banquet 34
Koubei banquet 34
Koubei UED
Fitness Club 範例網站建置
Fitness Club 範例網站建置
Molly Lin
Recommended
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
自從學會Sass / Compass後,考試都考100分!
自從學會Sass / Compass後,考試都考100分!
洧杰 廖
Vertical rhythm
Vertical rhythm
洧杰 廖
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
高雄前端社群 #3 SASS workshop
高雄前端社群 #3 SASS workshop
洧杰 廖
Koubei banquet 34
Koubei banquet 34
Koubei UED
Fitness Club 範例網站建置
Fitness Club 範例網站建置
Molly Lin
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
Css性能优化
Css性能优化
linxz
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
编辑器设计2
编辑器设计2
yiming he
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
Html js css_aha
Html js css_aha
Cheng-Yu Lin
HTML教學
HTML教學
TONY LEE
My Watercolor Painting Class Journey
My Watercolor Painting Class Journey
momiji chen
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Joseph Chiang
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
網頁三本柱之Html與css
網頁三本柱之Html與css
Aaron King
標籤設計 - 100網站規劃必備的知識
標籤設計 - 100網站規劃必備的知識
mouson chen
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
Css教學
Css教學
蘇姵欣 PeiSu
好的網頁設計概念
好的網頁設計概念
蘇姵欣 PeiSu
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
More Related Content
What's hot
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
蘇姵欣 PeiSu
網頁開發工具 20140630
網頁開發工具 20140630
Yeh Yung-Hsin
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
知世‧安索帕 台北 (使用經驗設計中心)
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
洧杰 廖
Css性能优化
Css性能优化
linxz
Style基础优化之独角兽篇
Style基础优化之独角兽篇
fangdeng
编辑器设计2
编辑器设计2
yiming he
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
Html js css_aha
Html js css_aha
Cheng-Yu Lin
What's hot
(10)
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
OPENCART 購物平台開發實務 DAY3教學 for 1.5.X
網頁開發工具 20140630
網頁開發工具 20140630
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
CSS 分享 (2) CSS 基本概念與語法
CSS 分享 (2) CSS 基本概念與語法
高雄前端社群 #4 psdtohtml workshop
高雄前端社群 #4 psdtohtml workshop
Css性能优化
Css性能优化
Style基础优化之独角兽篇
Style基础优化之独角兽篇
编辑器设计2
编辑器设计2
2011新版首页总结 技术篇
2011新版首页总结 技术篇
Html js css_aha
Html js css_aha
Viewers also liked
HTML教學
HTML教學
TONY LEE
My Watercolor Painting Class Journey
My Watercolor Painting Class Journey
momiji chen
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Joseph Chiang
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
網頁三本柱之Html與css
網頁三本柱之Html與css
Aaron King
標籤設計 - 100網站規劃必備的知識
標籤設計 - 100網站規劃必備的知識
mouson chen
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
Css教學
Css教學
蘇姵欣 PeiSu
好的網頁設計概念
好的網頁設計概念
蘇姵欣 PeiSu
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
Sublime Text 入門
Sublime Text 入門
Kah Wai Liew
Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
Viewers also liked
(14)
HTML教學
HTML教學
My Watercolor Painting Class Journey
My Watercolor Painting Class Journey
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
網頁三本柱之Html與css
網頁三本柱之Html與css
標籤設計 - 100網站規劃必備的知識
標籤設計 - 100網站規劃必備的知識
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Css教學
Css教學
好的網頁設計概念
好的網頁設計概念
前端工程開發實務訓練
前端工程開發實務訓練
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
Sublime Text 入門
Sublime Text 入門
Node.js從無到有 基本課程
Node.js從無到有 基本課程
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
Similar to 台科大暑期資工營 - 前端入門
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
輕鬆學會網頁前端
輕鬆學會網頁前端
Xi-Zhe Lin
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
Html&css基础
Html&css基础
KenerLinfeng
深入剖析浏览器
深入剖析浏览器
jay li
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
Html5和css3入门
Html5和css3入门
Xiujun Ma
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
FCUGDSC
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
网页制作基础
网页制作基础
loo2k
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
Browser Object Model
Browser Object Model
jay li
Web Development Roadmap
Web Development Roadmap
Alexander Shieh
Css and Xhtml part01
Css and Xhtml part01
Sean Yeh
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
[數學軟體應用] 05 HTML+CSS
[數學軟體應用] 05 HTML+CSS
Yen-lung Tsai
無碼設計.pdf
無碼設計.pdf
zola zhou
第七章解答
第七章解答
jiannrong
Similar to 台科大暑期資工營 - 前端入門
(20)
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
輕鬆學會網頁前端
輕鬆學會網頁前端
浅析浏览器解析和渲染
浅析浏览器解析和渲染
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Html&css基础
Html&css基础
深入剖析浏览器
深入剖析浏览器
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Html5和css3入门
Html5和css3入门
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
GDSC FCU 第1堂 前端新手村 - HTML, CSS, JavaScript介紹
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
网页制作基础
网页制作基础
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Browser Object Model
Browser Object Model
Web Development Roadmap
Web Development Roadmap
Css and Xhtml part01
Css and Xhtml part01
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
[數學軟體應用] 05 HTML+CSS
[數學軟體應用] 05 HTML+CSS
無碼設計.pdf
無碼設計.pdf
第七章解答
第七章解答
Recently uploaded
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
jakepaige317
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
mekosin001123
日本姫路独协大学毕业证制作/修士学位记多少钱/哪里可以购买假美国圣何塞州立大学成绩单
日本姫路独协大学毕业证制作/修士学位记多少钱/哪里可以购买假美国圣何塞州立大学成绩单
kathrynalvarez364
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
jakepaige317
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
黑客 接单【TG/微信qoqoqdqd】
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
kathrynalvarez364
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
mekosin001123
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
kathrynalvarez364
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
mekosin001123
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
Xin Yun Teo
Recently uploaded
(10)
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
日本姫路独协大学毕业证制作/修士学位记多少钱/哪里可以购买假美国圣何塞州立大学成绩单
日本姫路独协大学毕业证制作/修士学位记多少钱/哪里可以购买假美国圣何塞州立大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
日本九州齿科大学毕业证制作🚩定制本科卒业证书🚩哪里可以购买假美国西南基督复临安息日会大学成绩单
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
布莱德福德大学毕业证制作/英国本科学历如何认证/购买一个假的香港中文大学专业进修学院硕士学位证书
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
澳洲圣母大学毕业证制作/加拿大硕士学历代办/购买一个假的中央警察大学硕士学位证书
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
台科大暑期資工營 - 前端入門
1.
前端開發⼊入⾨門 NTUST CSIE CAMP
2.
Contents • 前端⼊入⾨門 HTML、CSS、JavaScript •
HTML5、CSS3 簡介 • 響應式網⾴頁設計 • 體驗 jQuery、AngularJS 課程時間: 2⼩小時
3.
前端⼊入⾨門 了解HTML、CSS、JavaScript
4.
網⾴頁組成 • HTML -
structure(layout) and content(text) • CSS - stylesheets to set visual appearance • JavaScript - programming to alter the page
5.
HTML ⼀一堆的<標籤>描述⼀一個網⾴頁所有的零件。
6.
HTML 常⽤用標籤 <html> <head> <body>
<meta/> <title> <br/> <p> <a> <table> <h1>~<h6> <ul> <ol> <li> <div> <span> <form> <input> <select> <button> <textarea> <img/> <iframe> <hr/> <script> <style>
7.
DEMO
8.
Practice 使⽤用HTML設計⼀一個單⾴頁個⼈人簡介⾴頁⾯面 ⾴頁⾯面內容 -> 如何呈現(表格?段落?圖⽚片?標題?) 先不⽤用管樣式,完成後請命名為index.html Graph
API: graph.facebook.com/username/picture
9.
CSS 選擇器 { 外觀屬性: 屬性值; }
10.
CSS 選擇器 ⽤用來選擇所要描述外觀的對象。 標籤選擇 {
} #ID選擇 { } .類別選擇 { }
11.
CSS 其它常⽤用Selector Descendant Selector {
} Child > Selector { } Selector[attr] { }
12.
CSS 常⽤用屬性 display background line-height
visible float clear width height font-size font-family color text-align padding margin border letter-spacing position top, …,left overflow z-index
13.
CSS 將CSS寫在⼀一個獨⽴立的檔案命名為 stylesheet.css 檔 在HTML的head內加⼊入 <link
rel="stylesheet" href="./stylesheet.css">
14.
DEMO
15.
Practice 使⽤用CSS調整個⼈人簡介⾴頁⾯面的樣式
16.
JavaScript 程式語⾔言 控制網⾴頁的⾏行為以及動態調整網⾴頁
17.
JavaScript 取得物件
18.
JavaScript 變數、函數、控制流程、迴圈 … 學會使⽤用開發者⼯工具
19.
JavaScript 將 JavaScript 寫在⼀一個獨⽴立的檔案命名為
main.js 在HTML的</body>前加⼊入 <script src=“./main.js”>
20.
DEMO
21.
Practice 在個⼈人⾴頁⾯面上使⽤用 JavaScript 與
HTML物件 設計⼀一個簡單的四則運算計算機
22.
HTML、CSS、JavaScript 都可以寫成⼀一本書 有興趣的同學可以⾃自⼰己鑽研
23.
HTML5 HTML4的擴充 為常⾒見的需求加⼊入新功能、標籤、屬性
24.
Canvas <canvas>只是⼀一個畫布標籤 畫布的內容需透過 JavaScript 進⾏行繪製 http://www.w3schools.com/html/ html5_canvas.asp
25.
More… http://www.w3schools.com/html/ html5_new_elements.asp
26.
DEMO
27.
CSS 響應式網⾴頁設計(Responsive Web Design) 依據不同裝置的解析度,利⽤用CSS呈現適應於該裝置的網⾴頁 Phone
< 768px Tablets >= 768px Medium Device >= 992px Large Device >= 1200px
28.
CSS3 http://www.w3schools.com/css/css3_intro.asp
29.
DEMO
30.
Bootstrap //maxcdn.bootstrapcdn.com/bootstrap/ 3.2.0/css/bootstrap.min.css
31.
32.
jQuery JavaScript library 更容易地使⽤用 JavaScript
同時兼顧跨瀏覽器
33.
引⼊入jQuery http://code.jquery.com/jquery-1.11.1.min.js
34.
DEMO
35.
前端MVC Framework
36.
Before starting, forget
jQuery.
37.
引⼊入AngularJS 加入 ng-app 決定AngularJS的Scope
雙括號內的程式將會被運算
38.
Directives directives are marked
on a DOM element. ng-model ng-bind ng-show ng-hide ng-click ng-click attach a specified behavior to that DOM element. You can also define custom directive.
39.
Data Binding use ng-model
model live in $scope
40.
Two-way Data Binding
41.
jQuery’s way
42.
Controller js/app.js
43.
$scope js/app.js
44.
$scope js/app.js
45.
Filters Use pipe combine
filters. There are many built-in filters. You can also define custom filter.
46.
DEMO
47.
Q&A
48.
Thanks for your
attention
Download now