框架是Photoshop和網頁經典的魅力的處所。現有的框架和原型東西不得精確表現網站的需求。

靜態設計的網站不能在web閱讀器上閱讀。并且當你完成網站建設工作時，網頁上一些元素看起來和草稿中相對應元素不完全一樣，客戶端會發現那些字體定位上的細微的區分。

利用圖形編程反復襯著設計的作品視覺上可能更舒適，比HTML手寫代碼破費更多的時候。

但是，從一進手下手就在HTML建立框架的上風進手下手在二者比力中得不償掉：我們不但HTML5有新的組織元素，CSS3加倍壯大的選擇器和樣式，并且把這二者連系起來，我們能快速設計出簡單的組織。
許多新公司，好比，37Signals,Atomiq，其他等，都采取HTML原型方式。首要緣由是在適合的處所利用準確的東西，開辟進程就十分簡略單純。你很想領會這個進程到底有多簡單，當你這么做，
你將鄙人一步的編寫中有個杰出的初階。

利用HTML5快速組織

HTML5包括一整套優異新的組織元素，利用這些組織元素能快速開辟出更少類和id標識。一旦理解了這些元素的目標，就可以在幾分鐘內建立粗略的網頁組織。

假如不熟習這些新的元素，這里有個快速先容。這些新元素使文檔組織較之前加倍簡練，從而就不消大量得利用div。在“HTML5的簡介”，拉克.亨特很好地描寫了這些元素：

• article標簽  組織了文檔、頁面或網頁的自力分段，合用于放置新聞、博客貼子和論壇貼子和各條評論。
• section標簽 用于顯示文┞仿或運用的通用分段，好比一個章節。
• header 標簽用于顯示分段的題目。題目的內容不但僅只有分段的題目，好比，還可以插足副題目、版本汗青信息和簽名。
• nav 標簽包括了導航鏈接的部門，同時合用于網站導航和表格內容。
• aside 標簽是用于界說和內容相干的內容，對標識表記標幟出側邊欄很有用處。
• footer標簽標識表記標幟分段的頁腳。特殊是包括一些關于分段的具體信息好比作者名，相干文檔鏈接和版權數據。

示例網站的組織了居中頁面，包括了以鴟，左邊側邊欄，首要內容區域和頁腳。我已利用HTML5標簽標識表記標簽的方式，把所有內容都包括在內。

這些標簽和div沒有標準巨細且弗成見，除非你設置標簽樣式屬性或在此中填寫內容。為了使這些標簽有用，必需臨時給這些標簽設定高度屬性。我們應當設置HTML標簽屬性display: block;；如許閱讀器就可以辨認標簽，額外的工作由IE完成。

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

在定位標簽之前，組織必需是可視化，沒有包括任何內容。幻想的方式應當是易于稍后移除并且不會影響設計。