DHTML Tutorial & Designer Guide
機械所 劉立業
Outline
• • • • • What is DHTML? Tutorial Designer Guidelines What is Web 2.0? References & Further Readings
What is DHTML?
• Dynamic HTML並非指單一技術, 而是一群技 術的集合, 目的為了創造出動態/互動網頁 • 一般認為DHTML結合了以下四類技術
– – – – static markup language presentation definition language Document Object Model client-side scripting language
Tutorial
• W3C School DHTML Tutorial
Design Guidelines
• 以符合網頁標準為設計準則
– – – – HTML, XHTML, XML CSS ECMAScript, Javascript HTML DOM
Design Guidelines
• Structure • Presentation • Behavior
Design Guidelines
• 結構/呈現/行為 三者劃分清楚
– 取用便利: device independent – 效率: 對使用者:小,快; 對設計師:撰寫容易, 模組化,樣板,分工合作,維護輕鬆 – 相容: 遵守W3C標準, 拒絕專屬語法
Design Guidelines
• 相容性問題
– 早期: 標準不受重視(Browser Wars) CSS 支援性太差 Sol: 表格排版, CSS filter, Javascript fix – 今日: 設計軟體不夠好, 設計師缺乏概念 Sol: 建立網頁設計正確觀念
Design Guidelines
• 網頁設計要點
– – – – 以符合標準的瀏覽器作為基準 為不符合標準的瀏覽器補強 瀏覽器作為開發工具 確實驗證原始碼 W3C Validator
What is Web 2.0?
• It’s a phrase coined by O'Reilly Media in 2004 • If Netscape was the standard bearer for Web 1.0, Google is most certainly the standard bearer for Web 2.0 • It’s an attitude, not a technology
What Is Web 2.0
Design Patterns and Business Models for the Next Generation of Software by Tim O'Reilly
References & Further Readings
• • • W3C School: http://www.w3.org/ 當代網頁設計第一講by薛良斌(hlb): http://hlb.yichi.org/blog/ W3C:
– – – – – – – – http://www.w3.org/ http://www.w3.org/DOM/ http://www.w3.org/QA/Tools/
•
Wikipedia:
• •
What Is Web 2.0: AJAX:
– –
http://en.wikipedia.org/wiki/Document_object_model http://en.wikipedia.org/wiki/DOM_Events http://en.wikipedia.org/wiki/Ajax_%28programming%29 http://en.wikipedia.org/wiki/Web_2.0 http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web20.html http://developer.mozilla.org/en/docs/AJAX http://maps.google.com/