RITA
TEACHING
網頁技術簡介
老田講座
ENTER
田甜
甜教
案實
驗室
http://tutor ial . jumpdesign.tw/
田甜
甜教
案實
驗室
http://tutor ial . jumpdesign.tw/
田甜
甜教
案實
驗室
http://tutor ial . jumpdesign.tw/
田甜
甜教
案實
驗室
http://tutor ial . jumpdesign.tw/
v5.0
01 02
03 HTML
04 HTML5
05 CSS
06 CSS3
07 JavaScript
08 jQuery
09 RWD
10 SEO
Outline
What’s Work \ 網頁制作分工
設計概念、色彩使用、視覺傳達、使用者介面(UI)、使用者經驗(UX)，不參與程式撰寫。
雖然版面漂亮，但因不了解
程式邏輯，容易設計出與使
用者互動不明確的版型。
所有網頁上，會跟使用者互動
的部份(特效制作等)，能夠
把視覺及互動獨立分工。
了解使用者需求，具備設計介面與互動開發能力，擔任設計人員與後端人員相互溝通的橋樑，能打造最佳使用者經驗環境。
網頁互動有效率，功能也完整，但因為較不重視美觀，或偏向資料庫操作方式，容易造成使用者艱澀難懂。
資料庫設計、軟體工程、bug追蹤、系統架構、演算法設計、通訊協定，各類運算需求，網站後台自動化系統程式撰寫。
視覺設計師
前端工程師 後端工程師
自動化後台管理功能
執行程式碼來產生使用者瀏覽的網頁。自動化網頁如「最新消息」等需要常常更新的頁面，
就會用到自動化，而自動化功能目前以「.php」、「. aspx」系統程式語言使用最廣泛。
靜態網頁設計
為單一的超文件標示語言(html)檔案，僅展
示網頁資料內容，無任何功能及特效，大多以
視覺排版設計為重點
WEB Analysis \
動態特效網頁設計
利用javascript,jQuery,flash等語法加
入特效讓使用者可以與網頁互動或加入動態影
片使網頁更加生動有趣
WEB Structure \
HTML超文件標示語言(文件內容架構)
CSS層疊樣式表(外觀呈現)
JavaScript行為腳本(動態效果)
Flash
ViVAGRAPHICS DREAM Studio Design
www.viva-graphics.com/ www.dreamstudiodesign.com
HTML
( )
( php aspx)
HTML
HTMLHTML
HTML5 2014
HTML5
html+css3+javascript
JavaScript CSS ( )
JavaScript
Video \
LUCKIIS穿透力行銷
www.ptt.com.tw luckiis.com
html
html ( )
html CSS
( )
CSS
• CSS
• CSS2
• ( )
•
•
•
•
• CSS
互動式技術網頁設計
Chrome Experiments(Chrome瀏覽器實驗)
The Wilderness Downtown Chrome Experiment #1000
www.thewildernessdowntown.com 1000.chromeexperiments.com
‧是當今最受歡迎的程式之一
‧各種平台均支援，有非常大的應用性
‧可建立動態效果網頁
‧使網頁與DOM具有互動性 (DOM是瀏覽器對網頁內部表達的方式)
‧可利用程式，存取元件、改變元件、增加新元件
‧讓我們可以控制html5各個面像 (如：平面繪圖、影音播放控制)
javascript
javascript
javascritp Ajax
( gmail facebook)
Parallax Scrolling
垂直視差捲動網頁設計
Make Your Money Matter Tiffany & Co.
makeyourmoneymatter.org international.tiffany.com
Responsive Web Design (RWD，響應式網頁設計)
● 它是一組方法的集合，讓網頁的內容適應使用者環境
● 結合CSS3的媒體查詢、非固定網格配置與非固定圖像的結合，可配合各種裝置思考版面配置方式
● 字體設置、物件樣式等更靈活有彈性
RWD
RWD
SHITSURAI Media Queries
www.shitsurai.tv mediaqueri.es
SEO ( Search Engine Optimization)“ ” “ ” ”SEO “ “ ”
“ ”
SEOgoogle (SEO)
https://support.google.com/webmasters/answer/7451184?hl=zh-Hant
Ｑ＆Ａ
