因為相對于主體來說，內容部分并不是很輕易出彩，所以其設計比主體更加需要清楚的思路，并非常考驗制作者的耐心。通常情況下內容部分的主要工作都是在Dreamweaver 中，所以這里我們在Photoshop 中所設計的只是一個供參照的外觀。

　　1. 在頁面的右側用矢量“矩形工具”繪制一個淡綠色的背景填充，該綠色的十六進制值為“#eefded”，幾乎接近于白色，這是為了突出前景深綠色的文字。這里的文字內容都是虛構的，其十六進制顏色值為“#054d00”，布局的位置如圖1-2-1 所示。

 

圖1-2-1

　　2. 在文字的下面是播放在線視頻的地方，我們這里插入一些圖片進行占位。圖片推薦在Adobe Stock Photos CS3 中進行查找，這是Adobe 提供的一個龐大的圖片素材庫，包含在Adobe Bridge CS3中，低質量的圖片小樣是完全免費的。因為網頁需較高的下載速度，因此低質量的照片反而更適合于網頁設計師。需要注重的是，該搜索功能暫時還不支持中文，所以這里我們搜索“bridge”來下載一些關于橋的照片，如圖1-2-2 所示。

 

圖1-2-2

　　3. 我們用多張“橋”和“花園”的圖片合成了這部分的圖像內容，這里使用的石橋剪影字體為“方正古隸簡體”，合成的方法因為非常簡單，這里就不再贅述，如圖1-2-3 所示。

 

圖1-2-3

　　4. 在下面繪制深灰色矩形，十六進制顏色值為“#2a2a2a”。輸入文字“ShiQiao Garden”，字體為“Trajan Pro”，這些均是作為中間的隔斷和裝飾，如圖1-2-4 所示。

 

圖1-2-4

　　5. 在隔斷下面再繪制一個較淺的灰色矩形，十六進制值為“#7a7a7a”。在該矩形上面再并排繪制兩個顏色更淺的灰色矩形，十六進制值為“#efefef”。這些矩形的繪制主要是用來布局，頻繁的使用灰色有兩個原因，一是因為灰色通常在設計中表示高級，另外，網頁的主體過于鮮艷，使用灰色可以平衡一下，以避免“搶了主角兒的戲”，如圖1-2-5 所示。

 

圖1-2-5