2014年1月6日 星期一

Visual Studio HTML5與CSS3 的概觀

HTML5是HTML下一個主要的修訂版本,目標是取代HTML 4.01和XHTML 1.0標準,以期能在網際網路應用迅速發展的時候,使網路標準達到符合當代的網路需求。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對於需要外掛程式的豐富性網路應用服務(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,與Oracle JavaFX的需求,並且提供更多能有效增強網路應用的標準集。
HTML5添加了許多新的語法特徵,像是<video>, <audio>,和<canvas>元素,同時整合了SVG內容。這些元素是為了更容易的在網頁中添加和處理多媒體和圖片內容而添加的。其它新的元素包括<section>, <article>, <header>, 和<nav>,是為了豐富文件的資料內容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。一些元素,像<a>, 和<menu>被修改,重新定義或標準化了。同時APIs和DOM已經成為HTML5中的基礎部分了。HTML5還定義了處理非法文件的具體細節,使得所有瀏覽器和客戶端程式能夠一致地處理語法錯誤。

HTML5 為一開放式技術,相關的程式檔案均是純文字檔,只要文字編輯器就可以開始開發 HTML5 應用程式。工欲善其事,必先利其器,有一套好的工具在學習過程是相當重要的,相關的工具相當多,完全沒有基礎,想要開始學習者,Visual Studio 是首選,ASP.NET MVC 也已進展到 4.0 版本,新版本加強了行動裝置網站開發的功能,也大幅強化了 HTML5 & JavaScript 開發支援。

HTML5 入門的幾項重要技術 :

  • HTML+JavaScript+CSS (無論走到那裏一定要會的入門基礎)
  • jQuery (提升 JavaScript 開發速度與網頁相容性)


除此之外,目前開發市場最受歡迎的行動裝置應用,則能透過  jQuery Mobile+PhoneGap 進行無縫銜接,有了一定的基礎之後, 便可以透過這兩組套件進動裝置應用開發,HTML5 也支援程式碼片段與 Intellisense。

下面是HTML5基本結構:
<audio id="audio" controls="controls">
 <source src="./mp3/spt.mp3" type="audio/mp3" />
 <source src="file.ogg" type="audio/ogg" />
</audio>


好啦,以上大部分也是取至網上的資訊精簡出來的,看不懂的可以自已爬文。


這邊想說的是微軟從Visual Studio 2008開始 增加 HTML5 與 CSS3 的支援(需要手動設定),到Visaul Studio 2010已經內建支援了HTML5 與 CSS3,Visual Studio 支援可以輸入 <audio 或 <video 後連按兩次 tab 鍵,這樣就會自動跳出關鍵字出來。

下面提供Visual Studio 2008如何支援HTML5 與 CSS3,

透過Visual Studio方便性的功能,開發者很快的就可以快速寫出HTML5的基本結構。

按照下面的方式讓 VS2008 有 HTML5 的功能支援,以下是壓縮檔的內容,

Html 5 Reg下載



























裡面有「VWD」檔是提供給 Visual Web Express 2008 使用的,依電腦的作業系統是 32 位元還是 64 位元而使用,在執行 reg 檔案之前,首先要把「html_5.xsd」檔案給複製到指定目錄下,

32 位元作業系統,請複製到以下的目錄裡:

C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html

64 位元作業系統,請複製到以下的目錄裡:

C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\Packages\schemas\html









接下來就是執行指定的 reg 檔案,執行 reg 檔案之前請先關閉 VS2008後執行 reg 檔案登入機碼。

重新開啟 VS2008,然後在 ASPX 開啟的狀態裡就可以看到有 HTML5 的支援,在編輯時也有 HTML5 的 tag 可以選用。





























增加 CSS3 的支援

首先就是先找一個 CSS3 的 schema 檔案,可以從網路上Google找到CSS3 的 schema 檔案,把檔案給複製到 VS2008 的目錄下:

32 bits:

C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\1028\schemas\CSS

64 bits:
C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\Packages\1028\schemas\CSS


系統不同安裝目錄也會不一樣,通常是在1028這個資料夾的數字會不一樣 , 這點要注意。

接下來就是要到登錄編輯程式去增加機碼與內容,使用 Win + R 叫出執行,輸入「regedit」叫出登錄編輯程式,機碼的位置也會因為作業系統的位元不同而有所變化,

32 bits:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas

64 bits:

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas

上圖已經有增加了 Schema 5 的機碼與內容,這就是我們要手動增加的內容,

空白處按下滑鼠右鍵,新增字串值,這個動作要做兩次,分別增加「File」與「Friendly Name」,

新增 File 字串值後,編輯字串並輸入「css30.xml」

新增 Friendly Name 字串值後,編輯字串並輸入「CSS 3.0」



完成上面的操作過後,就可以關閉登錄編輯程式,然後接著重新開啟 VS2008,打開專案的 CSS 檔案,就可以看到樣式表下拉選單裡增加了 CSS 3.0 的項目。



















































-雲遊山水為知已逍遙一生而忘齡- 電腦神手





沒有留言:

張貼留言