1 / 15

HTML 簡介

Part 1 HTML 篇. 01. HTML 簡介. 1-1 網頁設計的流程 1-2 網頁設計相關的程式語言 1-3 行動網頁 V.S. 電腦網頁 1-4 行動網頁 V.S. 行動應用程式 (App) 1-5 行動網頁的設計原則 1-6 回應式網頁設計 (RWD) 1-7 HTML 的演進 1-8 HTML 5 的新功能 1-9 HTML 5 文件的撰寫方式. 1-1 網頁設計的流程 網頁設計的流程大致上可以分成如下圖的四個階段。. 回首頁. P.1-2. 1-2 網頁設計相關的程式語言

alima
Télécharger la présentation

HTML 簡介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Part1HTML 篇 • 01 • HTML 簡介 • 1-1 網頁設計的流程 • 1-2 網頁設計相關的程式語言 • 1-3 行動網頁V.S. 電腦網頁 • 1-4 行動網頁V.S. 行動應用程式 (App) • 1-5 行動網頁的設計原則 • 1-6 回應式網頁設計 (RWD) • 1-7 HTML 的演進 • 1-8 HTML 5 的新功能 • 1-9 HTML 5 文件的撰寫方式

  2. 1-1 網頁設計的流程 • 網頁設計的流程大致上可以分成如下圖的四個階段。 回首頁 • P.1-2

  3. 1-2 網頁設計相關的程式語言 • 常見的如下： • HTML (HyperText Markup Language) • CSS (Cascading Style Sheets) • VRML (Virtual Reality Modeling Language) • XML、XSL (eXtensible Markup Language、eXtensible Style Language) • XHTML (eXtensible HTML) • DHTML (Dynamic HTML) • Java Applets • ActiveX Controls • 瀏覽器端Scripts • 伺服器端Scripts • CGI (Common Gateway Interface) • JSP (Java Server Pages) • ASP (Active Server Pages)/ASP.NET • PHP (PHP:Hypertext Preprocessor) 回首頁 • P.1-7~11

  4. 1-3 行動網頁V.S. 電腦網頁 隨著無線網路與行動通訊的蓬勃發展，以及行動裝置的快速普及，有愈來愈多網站推出所謂的「行動版」，也就是行動網站 (mobile website)，例如： 回首頁 傳統網站 行動網站 • P.1-12 請參閱書籍

  5. 1-4 行動網頁V.S. 行動應用程式 (App) • Native App (原生應用程式) ：根據不同的平台，使用官方建議的程式語言來撰寫程式，然後使用官方提供的SDK將程式編譯成可安裝與可執行的應用程式。 • ™™Web App (Web應用程式)：使用HTML 5與CSS 3開發行動應用程式，我們將這類透過瀏覽器執行的行動應用程式稱為Web App。 • ™™Hybrid App (混合型應用程式)：使用HTML 5、CSS 3、JavaScript等技術開發Web App，然後透過諸如PhoneGap等包裝框架，將Web App包裝成像Native App一樣可以離線操作的行動應用程式，然後透過軟體商店進行下載與安裝，而不再需要透過瀏覽器執行。 回首頁 Native App Web App • P.1-13 請參閱書籍

  6. 1-5 行動網頁的設計原則 • 確認行動網頁的內容是要打造全新的行動網頁，還是要取材自傳統的電腦網頁，然後增設一個行動網頁。 • ™™確認主題、品牌或產品的形象。 • ™™把握簡明扼要的原則，行動網頁要列出重點，檔案愈小愈好。 • 建議採用單欄設計，比較容易閱讀。 • 建議採用直式的摺疊目錄來呈現數個主題。 • 行動網頁上的按鈕要醒目容易觸碰。 回首頁 單欄設計 直式的摺疊目錄 • P.1-16~17 請參閱書籍

  7. 1-6 響應式網頁設計 (RWD) 響應式網頁設計 (RWD，Responsive Web Design) 指的是一種網頁設計方式，目標是根據使用者的瀏覽器環境，自動調整網頁的版面配置，主要的技巧如下： • 媒體查詢 (Media Query) • 按比例縮放的元素 • ™™非固定的版面配置 回首頁 • P.1-18 請參閱書籍

  8. 1-7 HTML 的演進 • HTML 2.0：1995 年11 月發布。 • ™™HTML 3.2：1997 年1 月發布為W3C 推薦標準 (W3C Recommendation)。 • ™™HTML 4.0：1997 年12 月發布為W3C 推薦標準。 • ™™HTML 4.01 ( 小幅修正)：1999 年12 月發布為W3C 推薦標準。 • HTML 5：2012年發布為W3C 候選推薦。 回首頁 • P.1-20 請參閱書籍

  9. 1-8 HTML 5 的新功能 • HTML 5 增加、修改或移除的元素 • 簡化的文件類型定義 • 簡化的字元集指定方式 • 新增的元素：HTML 5 增加了一些新的元素，例如<section>、<article>、<aside>、<nav>、<header>、<footer>、<hgroup>、<video>、<audio>、<source>、<embed>、<figure>、<figcaption>、<canvas>、<progress>、<keygen>、<output>、<meter>、<time>、<menu>、<command>、<datalist>、<details>、<summary>、<ruby>、<rt>、<rp>、<mark>等。 回首頁 • P.1-22~23

  10. 修改的元素：HTML 5 修改了一些既有的元素，例如 <em>、<i>、<strong>、<b>、<address>、<ol> 等。 • 移除的元素：HTML 移除了一些既有的元素，例如<frame>、<frameset>、<noframes>、<font>、<basefont>、<big>、<blink>、<center>、<strike>、<tt>、<nobr>、<spacer>、<marquee>、<bgsound>、<noembed>、<acronym>、<applet>、<dir>、<plaintext>、<listing>、<xmp>、<rb>等。 • 新增的全域屬性 • 新增的表單驗證功能 • P.1-24~25

  11. HTML 5 提供的API • HTML 5 提供了功能強大的API，例如： • Video/Audio API ( 影音多媒體) • Canvas API ( 繪圖) • Drag and Drop API ( 拖放操作) • Editing API (RichText編輯) • Offline Web Applications ( 離線網頁應用程式) • Web Storage API ( 網頁儲存) • Web SQL Database ( 網頁SQL 資料庫) • Indexed Database API ( 索引資料庫) • Geolocation API ( 地理定位) • File API ( 用戶端檔案存取) • Communication API ( 跨文件通訊) • Web Workers API ( 背景執行) • Web Sockets API ( 用戶端與伺服器端的雙向通訊) • XMLHttpRequest Level 2 (Ajax 技術) • Server-Sent Events ( 伺服器端的資料推播) • Microdata ( 微資料，用來自訂元素) • P.1-26

  12. 1-9 HTML 5 文件的撰寫方式 • 1-9-1 HTML 5 文件的編輯工具 回首頁 • P.1-27

  13. 1-9-2 HTML 5 文件的基本語法 • HTML 5 文件通常包含下列幾個部分 ( 依照由先到後的順序)： • 1. BOM ( 選擇性字元，建議不要在檔首插入BOM) • 2. 任何數目的註解與空白字元 • 3. DOCTYPE • 4. 任何數目的註解與空白字元 • 5. 根元素 • 6. 任何數目的註解與空白字元 • P.1-30

  14. 1-9-3 撰寫您的第一份HTML 5 文件 • HTML 5 文件包含DOCTYPE、標頭 (header) 與主體 (body) 等三個部分，下面是一個例子。 • P.1-36~37

More Related