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

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

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

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

利用HTML5快速組織

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

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

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

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

這些標(biāo)簽和div沒(méi)有標(biāo)準(zhǔn)巨細(xì)且弗成見(jiàn)，除非你設(shè)置標(biāo)簽樣式屬性或在此中填寫(xiě)內(nèi)容。為了使這些標(biāo)簽有用，必需臨時(shí)給這些標(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)簽之前，組織必需是可視化，沒(méi)有包括任何內(nèi)容。幻想的方式應(yīng)當(dāng)是易于稍后移除并且不會(huì)影響設(shè)計(jì)。