Download
html 5 n.
Skip this Video
Loading SlideShow in 5 Seconds..
HTML 5 與課程簡介 PowerPoint Presentation
Download Presentation
HTML 5 與課程簡介

HTML 5 與課程簡介

287 Vues Download Presentation
Télécharger la présentation

HTML 5 與課程簡介

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HTML 5與課程簡介 靜宜大學 資管系 楊子青

  2. 大綱 • HTML5 • 靜態網頁與動態網頁 • 關於本課程

  3. Rough Timeline of Web Technologies HTML5標準還在制定中

  4. 1. HTML 5 • HTML 5 • CSS 3 • JavaScript

  5. HTML5與HTML4差異(1) • 語法簡化,例如文件型態定義: • HTML4 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML5 • <!DOCTYPE html>

  6. HTML5與HTML4差異(2) • 廢除一些舊有標籤,例如<font>、<center>、<frame>等 • <frame>由<iframe>取代 • 測試網址:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe

  7. HTML5與HTML4差異(3) • 新增語意標籤,例如 <header>、<footer>、<section> 和 <article> • HTML5的設計是要更好的描繪網站的結構,讓搜尋引擎更容易擷取到網頁重點 • 位置可自由搭配

  8. 語意標籤實例

  9. HTML5與HTML4差異(4) • 全新的表單設計

  10. Form field types on mobile

  11. HTML5與HTML4差異(5) • 嵌入音訊和視頻檔,例如新的 <audio> 和 <video> 標記

  12. HTML5與HTML4差異(6) • 逐漸改用<canvas>標籤,取代flash • 實例:http://slides.html5rocks.com/#canvas-3d

  13. HTML5與HTML4差異(7) • CSS顯示效果

  14. 2. 靜態網頁與動態網頁 • 網頁的資料內容與顯示方式 • 瀏覽網站時 • 伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』, HTML 標準定義了文字與排版的效果。 • 瀏覽器收到網頁後,解析其中的 HTML 標籤,將網頁依 HTML 標籤指示的效果顯示出來。 • 例如文字、圖片或多媒體資料 • 隨著網際網路的應用日漸廣泛,靜態的效果已無法滿足人們的需求,希望網頁的效果更豐富多樣。 • 讓網頁依照不同狀況,顯示不同的訊息 • 網站可以和使用者產生互動…

  15. 動態網頁技術 • 用戶端動態網頁技術 • 例如JavaScript • 在瀏覽器上執行程式,使用者可立即得到程式執行結果,並減輕伺服器的負擔 • 伺服器端動態網頁技術 • 例如:ASP.NET、PHP、JSP • 由伺服器執行程式,產生不同內容的網頁,再傳送給瀏覽器 • 程式設計的彈性相當大,還可以搭配資料庫系統,設計出複雜的應用

  16. 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等軟體,進行網頁編輯

  17. 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)

  18. 參考資料 • 教科書 • 榮欽科技、陳婉凌,網頁設計必學的程式實作技術: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之間的不同