html 5 與課程簡介
DESCRIPTION
HTML 5 與課程簡介. 靜宜大學 資管系 楊子青. 大綱. HTML5 靜態網頁與動態網頁 關於本課程. Rough Timeline of Web Technologies. HTML5 標準還在制定中. 1. HTML 5. HTML 5 CSS 3 JavaScript. HTML5 與 HTML4 差異 (1). 語法簡化，例如文件型態定義： HTML4 HTML5 - PowerPoint PPT PresentationTRANSCRIPT
網頁設計實務
HTML 5與課程簡介靜宜大學 資管系 楊子青
網頁設計實務
22
大綱 HTML5
靜態網頁與動態網頁關於本課程
網頁設計實務
33
Rough Timeline of Web Technologies
HTML5 標準還在制定中
網頁設計實務
44
1. HTML 5
HTML 5
CSS 3
JavaScript
網頁設計實務
55
HTML5 與 HTML4差異 (1)
語法簡化，例如文件型態定義：– HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
– HTML5 <!DOCTYPE html>
網頁設計實務
66
HTML5 與 HTML4差異 (2)
廢除一些舊有標籤，例如<font> 、 <center> 、 <frame> 等– <frame> 由 <iframe> 取代
測試網址： http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
網頁設計實務
77
HTML5 與 HTML4差異 (3)
新增語意標籤，例如 <header> 、 <footer> 、 <section> 和 <article>– HTML5 的設計是要更好的描繪網站的結構，讓搜尋引擎更容易擷取到網頁重點– 位置可自由搭配
網頁設計實務
88
語意標籤實例
網頁設計實務
99
HTML5 與 HTML4差異 (4)
全新的表單設計
網頁設計實務
1010
Form field types on mobile
網頁設計實務
1111
HTML5 與 HTML4差異 (5)
嵌入音訊和視頻檔，例如新的 <audio> 和 <video> 標記
網頁設計實務
1212
HTML5 與 HTML4差異 (6)
逐漸改用 <canvas> 標籤，取代 flash– 實例： http://slides.html5rocks.com/#canvas-3d
網頁設計實務
1313
HTML5 與 HTML4差異 (7)
CSS 顯示效果
網頁設計實務
1414
2. 靜態網頁與動態網頁網頁的資料內容與顯示方式
– 瀏覽網站時伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』， HTML 標準定義了文字與排版的效果。瀏覽器收到網頁後，解析其中的 HTML 標籤，將網頁依 HTML 標籤指示的效果顯示出來。
– 例如文字、圖片或多媒體資料– 隨著網際網路的應用日漸廣泛，靜態的效果已無法滿足人們的需求，希望網頁的效果更豐富多樣。
讓網頁依照不同狀況，顯示不同的訊息網站可以和使用者產生互動…
網頁設計實務
1515
動態網頁技術
用戶端動態網頁技術 – 例如 JavaScript– 在瀏覽器上執行程式，使用者可立即得到程式執行結果，並減輕伺服器的負擔
伺服器端動態網頁技術 – 例如： ASP.NET 、 PHP 、 JSP– 由伺服器執行程式，產生不同內容的網頁，再傳送給瀏覽器– 程式設計的彈性相當大，還可以搭配資料庫系統，設計出複雜的應用
網頁設計實務
1616
3. 關於本課程 課程內容：
– 以 HTML5 為主 HTML 、 CSS 搭配 JavaScript JavaScript 的函式庫： JQuery 以 JQuery 為基礎的跨平台手機應用函式庫： JQuery
Mobile– 搭配介紹一些 ASP.NET C# 動態網頁技術– 本系大二、大三有 PHP 及 ASP.NET 課程
開發環境 – 以「記事本」熟悉網頁標籤– Microsoft Visual Studio Express 2013 Preview for Web– 可自行使用 Dreamweaver CS6 等軟體，進行網頁編輯
網頁設計實務
1717
Visual Studio Express 2013 Preview
微軟公司的 Visual Studio– 提供開發 ASP.NET 網站使用– 除了付費的 Visual Studio 版本外，也提供免費版本 Express
Microsoft Visual Studio Express 2013 Preview for Web– http://www.microsoft.com/visualstudio/cht/2013-downloads– 線上安裝，或是下載 .iso 燒錄成光碟再安裝– 系統需求：支援的作業系統
Windows 7 SP1 (x86 和 x64) Windows 8 (x86 和 x64) Windows 8.1 (x86 和 x64) Windows Server 2008 R2 SP1 (x64) Windows Server 2012 (x64)
網頁設計實務
1818
參考資料教科書
– 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript ， 2012年，博碩。
Chap 04: HTML 入門網路資源
– http://slides.html5rocks.com/#timeline-slide– http://www.dotblogs.com.tw/yuan0716/archive/
2011/11/10/html5newtag.aspx– http://w3design.pixnet.net/blog/post/14352301-10 個
HTML5 和 HTML4之間的不同