以pixel juice為例，用XHTML\CSS全程制作其主頁。效果圖：
從輸出效果圖開始，用最自然的html元素構(gòu)建結(jié)構(gòu)，再用CSS裝飾起來。這是一個使用了多個div元素的網(wǎng)頁圖。
在有層的PSD文檔輸出背景圖片的切片。在彩色區(qū)域包含了細微紋理，做大的選擇范圍使紋理無縫結(jié)合。高質(zhì)量保存圖片。
緊貼logo區(qū)域?qū)⑵溥x出，按cmd+shift+c合并復(fù)制，保存。
重復(fù)同樣的步驟操作介紹性的標題。由于文本的字體繼續(xù)為標記而且有向下的陰影效果，它不能用CSS單純地顯示。所以用了很受歡迎的圖片替換。
選擇蘋果電腦圖。關(guān)掉包括特色網(wǎng)頁的層。
關(guān)閉側(cè)邊內(nèi)容的層，選擇包括上邊曲線和大部分主題的區(qū)域。
在新的文件中粘貼復(fù)制的邊欄。用裁剪工具垂直擴展畫布，選擇一個區(qū)域穿過圖片底部，要包括垂直的邊框和灰色的背景顏色。按cmd+d拉伸圖片來填滿更大的畫布區(qū)域。這樣就留下足夠的額外空間使html內(nèi)容來擴展。
回到主文件，選擇剩下的側(cè)邊圖片，包括下面的曲線部分。
復(fù)制邊欄的按鈕到一個新的文件，將畫布向下擴展200%。在相反方向適應(yīng)按鈕的傾斜度，得到向下的印記。然后粘貼圖片到新的空白區(qū)。
輸出導(dǎo)入圖片的副本，包括每個圖片的空白版本。
最終的文件集合包括了各種將會用在CSS中的背景圖片。
創(chuàng)建新的html文檔，以strict doctype為開始。輸入頁面標題，附加一個樣式表。用容器div開始填充文檔結(jié)構(gòu)，接著是一個站點名字的標題標簽，和無序列表的導(dǎo)航。任何包括浮動元素的div都需要clearing，在div上增加一個clear，后一階段會增加CSS編碼。
為大的紫色的標題創(chuàng)建一個div，在這個div里創(chuàng)建放置有關(guān)文字的div。用一個標題（<hx>）兩個標簽，以較小字作為介紹性語句和段落。再建一個div來放列表，每個列表項應(yīng)該包括一個截圖，再加一個alt標記。
拆分下一部分文檔到div中，并加上ID。成為一個叫main的div來放主要內(nèi)容。這部分以一個大的段落開始，用三個標題標記設(shè)置。下面的每段適合加一個段落標記。最新的新聞被拆分到另兩個段落，這些將需要浮動，所以增加一個latest—news的div類，并且要加clear。這個區(qū)域里面是兩個最新新聞標題的列表和一小片文本，最適宜的的html元素是ul。
新聞欄用一個id的div填充，這里包括了新聞欄目錄。這里也有合適的元素來附加兩個背景圖片做標題圖片。
頁底用一個灰色的條紋來呈現(xiàn)，所以在文檔底增加一個footer并在CSS中調(diào)整。在頁底創(chuàng)建div包含內(nèi)容，三部分分別用自己的div。登錄div用了虛擬的登錄盒，這里用的是form。這里有個觀念，井然有序的設(shè)計沒有使用分別的label，但應(yīng)該是容易靠近的原因。
現(xiàn)在開始用一些CSS來充實html結(jié)構(gòu)。添加一個簡單的重置樣式表，以防止任何默認的瀏覽器默認值。并且要添加代碼來明確類給出一個跨瀏覽器的解決方案。這個例子是一個clearfix的輕量級版本。主體的字體為常用字體，并且重復(fù)背景實現(xiàn)條紋。容器div的樣式為width:960px；margin: 0 auto;居中。
第20—22行為有height和top padding的最頂端頭部。緊接著是其中一個標簽的樣式，呈現(xiàn)的是用圖片替換pixel juice的logo。鏈接元素從內(nèi)聯(lián)元素轉(zhuǎn)為區(qū)塊元素，這樣就可以有寬度和高度來具體適應(yīng)logo的圖片尺寸。元素設(shè)為浮動這樣導(dǎo)航可以跟在后面，并且可以附加圖片背景文件。最終，初始的文本鏈接以反向文本縮進的方式。
通過移除默認的列表項符號，形成導(dǎo)航列，每個列表項向左浮動。最后的鏈接再給出專門的顏色和字體、hover狀態(tài)等。
在header里，div右側(cè)里放置了蘋果電腦的的背景圖片。特征性地文本用CSS圖片替換在headr里，然后段落用常用字體。 ‘Work with us’ 這個鏈接加背景顏色和hover變化。
該功能共顯示五個項目，但我們只想在“蘋果電腦”上一次只顯示一個。首先ul被用相對位置移動進去，然后截圖的寬度和高度增加。超出的部分隱藏，然后就簡單地隱藏了剩余四個圖片直到他們用javascript顯示出來。
一般的文本樣式加到內(nèi)容div下，設(shè)置段落和鏈接合適的顏色和大小。主要的內(nèi)容div向左浮動并按PS表格設(shè)置其寬度。最新的新聞列也向左浮動使它們并排顯示。他們被設(shè)置父容器一半的寬度，減去右邊padding的總量，這樣適應(yīng)盒模型。
側(cè)欄樣式設(shè)置為緊接著主要內(nèi)容浮動，背景為先前導(dǎo)出的圖片。子特色項目的div即派上用場，附加在圖片較低的部分。側(cè)欄的內(nèi)容樣式設(shè)為合適的顏色和大小。 ‘See more work’ 鏈接用按鈕圖片替換。
灰色的footer條紋可以容易地通過增加背景顏色到footer容器來創(chuàng)建。因為這個元素在容器div之外，它可以自動橫跨整個頁面寬度。然而，因為內(nèi)容不再在容器里，footer需要同樣的寬度、間距樣式。陰影圖片然后適宜地作為背景圖片。
footer區(qū)域用一系列樣式填充起來，來適應(yīng)字體顏色和大小。
在登錄表單里，作為輸入的一部分標簽需要一點CSS。這里用一點jQuery可以為沒有可用的Javascript的用戶呈現(xiàn)樣式。當用戶焦點在一個input，增加一個附加的類來恢復(fù)背景圖片為黑色。不像一個好的舊式CSS技術(shù)（使用focus selector），當用戶取消選擇元素時這個樣式保留了下來，輸入任何值時對任何背景文本輸入辨認。如果用戶沒有可用的js，表單呈現(xiàn)舊式的label，就不會對每個input是什么而不知道。但應(yīng)該有其他簡單的解決方案。
用html和CSS完成后，仍然有圖片播放功能要添加到蘋果電腦。增加jQuery框架、循環(huán)插件和一個空白的js文件到文本頭。
為了激活圖片播放，在jQuery命令中目標為ul，增加兩秒的暫停消失效果。通過五張圖片平滑消失的變換，在蘋果電腦上輪流顯示每張圖片。
經(jīng)過就是這樣，這已經(jīng)是很好的設(shè)計了。html在各種瀏覽器中驗證，沒有設(shè)計缺陷，甚至是IE6.
