Web Programming Style - Useful Cases of CSS (1)

Before writing web pages or Apps, you should learn CSS3 to design elegant and fluent UI for good UX. In this blog, several CSS codes are introduced for some partical cases. Futuermore, CSS must be seamlessly integrated with HTML5 and Javascript. All CSS style properties can be access by JS: object.style.property. E.g. body.style.background = "black" in JS codes.

Web Programming Style - HTML5 as Layouts and CSS3 as Templates

To learn Web UI Design based on HTML and CSS, you should start from the http://www.w3schools.com/. A good design of web pages, sites and Apps is based on optimal tool integrations of HTML5, CSS3, JavaScript, SQL, Web API, jQuery, etc.

 

寫部落格學HTML5

HTML5 tags used in this article: <video> | <textarea> | <div> | <style> | <span> |
HTML5最吸引人的的是整合Video的播放，並可偵測瀏覽器對於影像格時的支援，自動選取適合的codec。影片播放器控制項 (controls)、影片preload、poster圖片、和影片來源<source src="...">等，都可以簡單的tag attributes來表示。以下簡單HTML5 <video>寫法就可以製作影片播放器於網頁中。

<video width="300" height="220" controls="controls" preload="auto" poster="http://t0.gstatic.com/images?q=tbn:ANd9GcS8AGfW2qiVmmsZM9XeVdcgiwiVZ6ym8ptV7AUn2ks1iLDL-xlLNA"> <source src="http://webian.org/dev/export/14/prototypes/html5/videos/trailer_dvd.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

順便談談HTML5 <textarea>的新功能，在此範例用於顯示HTML5 codes，避免瀏覽次再次解讀<textarea>內的<video>內容。設定rows和cols屬性，如同程式碼的行列數，按照指定行列數大小顯示文字內容。使用style float=left主要是為了讓兩區塊可以浮動，若寬度夠，會顯示在同一列，如同兩欄顯示。

要排版整齊，就要善用<div> tag，以定義文件的區塊概念，讓版面整整齊齊。但這些工作要做好，就必須先瞭解CSS，也就是HTML5 <style>的運用。在此範例中，設計4個styles: content, explain, exp-left, exp-right，分別用於顯示部落格文字、解釋HTML碼和對應的效果區塊，所以exp-left,right分別用於設定左右區塊的大小位置。以現今設計HTML文件的趨勢和習慣，盡量用<div>而少用<table>，以免DOM結構過於複雜。過去習慣以<table>建立網頁區塊概念，在各區塊再獨立設計內容呈現，因此很容易照成<table>內的<td>再度使用<table>，DOM tree的巢狀深度過深，也就是DOM結構太複雜，造成DOM parser效能差。

但是自訂CSS styles和部落格網站內定版面styles可能衝突，導致網頁呈現變得很奇怪，又找不出錯誤在哪？因此，最好命名要特殊，在此都以 "il-" 為開頭，例如："il-content" 可避免和常用的 "content" style衝突。

結論：以部落格撰寫HTML5測試功能可以，但是使用到複雜的CSS使用方式，建議還是自己開新檔案測試，畢竟網站設計的版面CSS實在太雜亂了，導致偵錯困難！