框架是Photoshop和網(wǎng)頁(yè)經(jīng)典的魅力的處所。現有的框架和原型東西不得精確表現網(wǎng)站的需求。

靜態(tài)設計的網(wǎng)站不能在web閱讀器上閱讀。并且當你完成網(wǎng)站建設工作時(shí)，網(wǎng)頁(yè)上一些元素看起來(lái)和草稿中相對應元素不完全一樣，客戶(hù)端會(huì )發(fā)現那些字體定位上的細微的區分。

利用圖形編程反復襯著(zhù)設計的作品視覺(jué)上可能更舒適，比HTML手寫(xiě)代碼破費更多的時(shí)候。

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

利用HTML5快速組織

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

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

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

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

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

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

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