16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小

Presentation on theme: "16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小"— Presentation transcript:

1 16 邁向網頁的未來-HTML5 Pack 與 Widget Browser 使用 HTML5 來為多重螢幕裝置進行設計 變更檢視區大小
支援對 CSS3 代碼提示 用 video 標籤在網頁中加入視訊 用 audio 標籤在網頁中加入音效 Adobe Widget Browser 的應用

2 16-1 用 HTML5 編織網頁的未來 16-1-1 現在的網頁到底出了什麼問題？
HTML5 是新一代網頁的標準，希望能夠減少瀏覽器對於的外掛程式需求並可促進更豐富的網路應用服務產生。未來的網頁會是什麼模樣？在 HTML5 的藍圖上似乎已經有了一個較為明顯的雛型。 現在的網頁到底出了什麼問題？ 隨著網路的普及，現代人依賴網頁提供資訊的程度越來越嚴重，有八成以上的人 一天使用瀏覽器的時間遠勝過其他的軟體。人們在網頁中閱讀、分享、娛樂與工 作，網頁能提供的內容也越來越多樣與複雜。 但是您知道嗎？現在網頁語法的標準，原來是不能提供那麼多功能的！於是程式 設計師只能自行研發許多瀏覽器的外掛程式，或是要求瀏覽器加入特有的標籤來 新增某些功能。這樣的結果就造成了在網頁上使用某些功能就必須加裝外掛程 式，甚至要選擇某些特定的瀏覽器。所以你沒有裝 Flash 的播放程式就沒有辦法 在網頁上看 Flash 動畫、玩 Flash 遊戲，沒有使用 IE 就沒有辦法在網頁上 ATM 匯款，都是這個原因。

3

4 HTML5 的出現 於是有越來越多人開始正視這個問題，想要創造出新一代的 HTML 標準，希望 能夠減少瀏覽器對於的外掛程式需求並可促進更豐富的網路應用服務產生。只要 瀏覽器支援這個標準，即可不用經由外掛程式完成要求的內容，這就是 HTML5 誕生的原因了。 不過很可惜的，HTML5 的標準還並未完全擬定，許多功能目前也尚未實現。但 這不代表學習 HTML5 是完全沒有價值，對於 HTML5 的學習可以掌握未來網頁 發展的動向。目前也有越來越多的瀏覽器開始支援 HTML5 的部份功能，這個標 準的到來是可以期待的。

5 HTML5 的新增功能 那 HTML5 到底新增或改善了什麼？雖然 HTML5 的標準沒有完全確定，但是以 下的功能是正在執行，甚至已經實作在許多瀏覽器當中： 新的標籤元素：以過去用來標示網頁基本結構的標籤來說，新增了許多標籤元 素讓瀏覽器更容易辨識，方便搜尋引擎以及特殊的程式來處理。例如 <header>、<nav>、<article>、<aside> 及 <foot>，很容易就可字義上判別 該區域的內容。 表單功能的提升：對於表單標籤增加並強化功能，並力求在行動裝置上有更好 的使用表現。如輸入自動完成、表單欄位驗證，都是增進使用者操作方便的好工 具。 影訊視訊的支援：在 HTML5 中不再使用 <object>、<embed> 這些原有不 好記的標籤，而是使用 <video>、<audio> 這些作用一目瞭然的標籤名稱，只 要音樂及影片格式符合標準，就可以直接使用對應的標籤進行播放，不用再擔心 瀏覽器是有安裝相關的外掛程式。

6 新的繪圖標籤：HTML5 提供了新的繪圖標籤如 Canvas，除了可以在網頁上 進行繪圖動作外，還能藉由 Javascript 進行播放控制，完成動畫的製作。3D 的繪圖也不是難事了，如 WebGL 就能實現這個想法。 其他：如 Web Socket 的使用、離頁瀏覽、網頁保存、多執行緒操作等，都 是 HTML5 準備提供的功能。

7 16-2 Dreamweaver 的 HTML5 擴充套件
Adobe 在剛結束的 Google I/O 開發者大會中正式宣布，將為全球網頁設計及開發人員，推出一項 HTML5 最新解決方案 - Adobe HTML5 Pack，這個擴充套件將讓 CS5 中的軟體可以進行 HTML5 網頁的相關開發。 關於 Adobe HTML5 Pack Adobe HTML5 Pack 是為了擴充 Dreamweaver CS5 進行 HTML5 與 CSS3 開發 的最新解決方案。使用者可以為不同的裝置，以最熟悉的工具進行 HTML5 網頁 的編輯。目前 Dreamweaver CS5 HTML5 Pack 擴充套件已經可以在 Adobe Labs 網站中免費下載： 「

8 安裝 Adobe HTML5 Pack HTML5 Pack 擴充套件下載完成後，它的副檔名為 <.exe>，請 直接在該檔案上連按二下滑鼠左鍵進行安裝。若 Dreamweaver 是在開啟的狀況之下，必須重新啟動 Dreamweaver 程式的狀態 才會生效：

9 16-3 HTML5 Pack 新增的功能 HTML5 與 CSS3 是 HTML5 Pack 擴充程式中最重要的二個主角，幾乎所有加強的功能都圍繞在這個二個主題上。HTML5 新標籤、多螢幕預覽、HTML5 與 CSS3 程式碼提示，都是你不能錯過的重點。 為了方便測試與示範，請複製本章範例練習資料夾中的 <HTML5> 到磁碟 C 中，並進入 Dreamweaver 定義該網站為：「HTML5 測試」。

10 16-3-1 多螢幕預覽 使用多螢幕預覽面板來預視頁面
多螢幕預覽 使用多螢幕預覽面板來預視頁面 隨著行動裝置的流行，相同的網頁內容要求在不同平台下有合適當展現，是很重 要的工作。Dreamweaver 中的多螢幕預覽會將目前編輯的頁面放置在不同的 畫面大小下提供預 覽。請開啟 <html5.htm> 於 文件工具列 選按 多螢幕 鈕進入多螢 幕預覽的顯示，如 下圖會看到該預覽 能夠顯示頁面在支 援不同螢幕大小的 設備上的呈現方式。

11 變更檢視區大小 多螢幕預覽可支援的螢幕類型：手機 (預設螢幕大小：320 x 像素) 、平板 電腦 (預設螢幕大小：768x300 像素) 、 桌面 (預設螢幕寬度：1108 像素)。 如果想修改成其他螢幕大小的設備，請選按 多螢幕預覽 面板右上角的 檢視區大 小 鈕進入 檢視區大小 對話方塊，在 寬度 和 高度 欄位輸設要要使用的檢視區大 小後按 確定 鈕完成修改。 若是設定後不理想，想回復預設值，可以選按 檢視區大小 面板中的 重設為預設 值 鈕即可。

12 新增媒體查詢 所謂媒體查詢就是讓不同的媒體裝置套用不同的 CSS 樣式，設計者可以根據不 同的畫面大小設計適合的樣式版型。請在 多螢幕預覽 面板中，選按 媒體查詢 鈕 進行設定。

13 16-3-2 支援對 HTML 5 新增的標籤庫的代碼提示
在 Dreamweaver 中可以輕鬆建立空白的 HTML5 頁面，方式如下： 按一下 檔案 \ 開新檔案 後在 頁面類型 中選取 HTML。再由 文件類型 選 單中 選取 HTML5 後按下 建立 鈕即可。 按一下 檔案 \ 開新檔案 後在 頁面類型 中選取 HTML。再由 文件類型 選 單中 選取選取下方二種 HTML5 的版面設定後按 建立 鈕即可。

14 HTML5 程式碼提示 進人建立好的 HTML5 頁面時，請切換到 程式碼檢視。若開始輸入任何 HTML5 標籤時，例如新的標籤：<nav>、<header>、<footer> 以及 <aside>， Dreamweaver 就會提供程式碼提示。

15 支援對 CSS3 代碼提示 為了改善並滿足目前人們對於網頁瀏覽的需求，除了 HTML5 之外，CSS3 也是 另一個重要的角色。CSS3 除了向下相容原來的 CSS 規則外，還包含了更多的 選擇器和屬性，讓網頁開發人員可以實現更多樣式與功能。雖然 HTML5 和 CSS3 的規格還沒有完全確定，但是在目前主流的瀏覽器在最新版本中，都至少 支援了部份的功能，使用者可以在這些瀏覽器上先感受 HTML5 與 CSS3 所帶來 的不同。

16 16-3-4 用 video 標籤在網頁中加入視訊 video 標籤的格式支援
HTML5 有特別為視訊與音效新增了標籤，這意味著未來瀏覽器可以不依靠任何 外掛程式或是播放程式，即可在網頁上播放視訊與音效的內容。雖然目前這個標 準還沒有普及到所有的瀏覽器，但是在未來實現是可以預期的。 video 標籤的格式支援 video 標籤目前所使用的格式與瀏覽器版本支援的狀況如下：

17 認識 video 標籤 以下是在 HTML5 中利用 video 標籤顯示視訊的標格語法：

18 用 video 標籤在網頁中加入視訊 請進入「HTML5 測試」網站開啟 <html5.htm> 檔案，接著將程式碼 插入到要添加視訊檔的位置： 完成檔案編輯後請選按功能表列 檔 案 \ 儲存檔案，然後在 Safari 瀏覽 器預覽看看。

19 用 audio 標籤在網頁中加入音效 audio 標籤的格式支援 audio 標籤目前所使用的格式與瀏覽器版本支援的狀況如下：

20 認識 audio 標籤 以下是在 HTML5 中利用 audio 標籤顯示視訊的標格語法：

21 用 audio 標籤在網頁中加入音效 插入音效檔其方法與視訊檔大同小異。請繼續使用 <html5.htm> 檔案，接 著將以上程式碼插入到要添加音效檔的位置，操作步驟如下： 完成檔案編輯後請選按功能表列 檔案 \ 儲存檔案，然後在 Safari 瀏覽器預覽 看看。

22 16-4-1 Adobe Widget Browser 的下載安裝
Adobe Dreamweaver Widget Browser 是一個使用 Adobe AIR 技術進行開發的應用，提供了一個平台可以安裝或自行開發 HTML、CSS 及 Javascript 的工具集。 Adobe Widget Browser 的下載安裝 在網站的開發過程中，常會在某些區塊加入一些特別的效果或是功能，例如折疊 式或標籤面板，月曆表格或是圖片展示區塊等，它們常是應用 HTML、CSS 和 Javascript 來完成的。Adobe Widget Browser 應用 AIR 的技術開發了一個 平台，使用者可以在上面尋找他人開發好的工具集套用在頁面中，也可自行開發 儲存在平台中。要使用 Adobe Widget Browser 前進行到以下網址下載並安 裝：「

23 Adobe Widget Browser 下載完成後它的副檔名為 <.air>， 請直接在該檔案上連按二下滑鼠左鍵進行安裝。

24 16-4-2 Adobe Widget Browser 的應用
Adobe Widget Browser 裡面有不少已經製作好的小程式可以直接應用到網頁 上。為了製作出更炫的選單效果，這裡將應用 Menu Matic 擴充程式更簡單、更 快速製作選單。

25 自訂 Menu Matic 選單樣式 設計者可以藉由變更 Menu Matic 中的配置功能，建立所喜愛的與網站統一風 格的樣式選單列。

26 加入 Menu Matic 在第14章中使用 Spry選單列 來製作選單，而在這裡將採用自訂的 Menu Matic 樣式來完成，效果更是出乎想像。 請進入「映象東京」範例網站開啟 <tokyolayout.htm> 檔案，首先要清除原 來的選單列： 接著要在 <div#menuList> 標籤中加入剛才設定的 Menu Matic： 完成以上動作後，接著請根據網站的內容對選單進行調整： 目前 Menu Matic 選單項的背景和邊線都是圓角，看起來不太協調，接著要 進行 CSS 樣式的修改即可。請將 <tokyolayout.htm> 切換到 程式碼檢視，將 下方二個樣式中的 -moz-border-radius (大約在 254列和301列) 設定為 0px 即 可。