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

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

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

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

利用HTML5快速組織

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

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

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

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

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

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

在定位標(biāo)簽之前，組織必需是可視化，沒有包括任何內(nèi)容。幻想的方式應(yīng)當(dāng)是易于稍后移除并且不會影響設(shè)計。