Download
1 / 15
150 likes | 280 Views
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 網頁設計相關的程式語言
E N D
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 文件的撰寫方式
1-1 網頁設計的流程 • 網頁設計的流程大致上可以分成如下圖的四個階段。 回首頁 • P.1-2
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
1-3 行動網頁V.S. 電腦網頁 隨著無線網路與行動通訊的蓬勃發展，以及行動裝置的快速普及，有愈來愈多網站推出所謂的「行動版」，也就是行動網站 (mobile website)，例如： 回首頁 傳統網站 行動網站 • P.1-12 請參閱書籍
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 請參閱書籍
1-5 行動網頁的設計原則 • 確認行動網頁的內容是要打造全新的行動網頁，還是要取材自傳統的電腦網頁，然後增設一個行動網頁。 • 確認主題、品牌或產品的形象。 • 把握簡明扼要的原則，行動網頁要列出重點，檔案愈小愈好。 • 建議採用單欄設計，比較容易閱讀。 • 建議採用直式的摺疊目錄來呈現數個主題。 • 行動網頁上的按鈕要醒目容易觸碰。 回首頁 單欄設計 直式的摺疊目錄 • P.1-16~17 請參閱書籍
1-6 響應式網頁設計 (RWD) 響應式網頁設計 (RWD，Responsive Web Design) 指的是一種網頁設計方式，目標是根據使用者的瀏覽器環境，自動調整網頁的版面配置，主要的技巧如下： • 媒體查詢 (Media Query) • 按比例縮放的元素 • 非固定的版面配置 回首頁 • P.1-18 請參閱書籍
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 請參閱書籍
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
修改的元素：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
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
1-9 HTML 5 文件的撰寫方式 • 1-9-1 HTML 5 文件的編輯工具 回首頁 • P.1-27
1-9-2 HTML 5 文件的基本語法 • HTML 5 文件通常包含下列幾個部分 ( 依照由先到後的順序)： • 1. BOM ( 選擇性字元，建議不要在檔首插入BOM) • 2. 任何數目的註解與空白字元 • 3. DOCTYPE • 4. 任何數目的註解與空白字元 • 5. 根元素 • 6. 任何數目的註解與空白字元 • P.1-30
1-9-3 撰寫您的第一份HTML 5 文件 • HTML 5 文件包含DOCTYPE、標頭 (header) 與主體 (body) 等三個部分，下面是一個例子。 • P.1-36~37
