?設(shè)計(jì)一個(gè)網(wǎng)站的過程！
下面讓我們用線框來著手布局。下圖就是我們繪制的簡單布局，這么做的目的是要確定每個(gè)元素的位置。確定主導(dǎo)航欄包含幾個(gè)部分、以及最新增加的內(nèi)容在主頁面中的展示位置。
新建文件，寬960px、高1200px。這對于屏幕分辨率為1024*768的朋友來說是黃金尺寸。前景色設(shè)為#85848c，背景色設(shè)為#414048. 拉一個(gè)徑向漸變當(dāng)背景如下圖所示。
新建圖層，重命名為“Header”。使用鋼筆工具，繪制帽子形狀的路徑如下圖。右擊“Header”圖層，選擇“混合選項(xiàng)”。勾選“漸變疊加”，選擇”線性漸變”,把從上到下的顏色設(shè)為#242429->#363640。
技巧：使用鋼筆工具繪制直線的同時(shí)按住Shift鍵，能保證線的平直度。
新建圖層，重命名為“Containers”。使用顏色#2e2d33繼續(xù)根據(jù)之前設(shè)計(jì)好的草圖，繪制線框。
輸入文字
新建圖層，重命名為“Nav Divider”。使用鉛筆工具繪制垂直分界線。選擇鉛筆工具，直徑設(shè)為1px，顏色#000000，繪制另外一條1px的垂直分割線。然后繪制另外一條，顏色#6e6f74。
按Q進(jìn)入快速蒙版模式，點(diǎn)擊“漸變工具”，選擇“反射漸變”，拖拽出一個(gè)小的反射漸變?nèi)缦拢?/p>
?再次按Q推出快速蒙版模式，這時(shí)候我們?nèi)〉眠x區(qū)。按Delete鍵，你將獲得分割線上下兩邊緣隱去的效果
新建圖層，重命名為“Highlight”。前景色設(shè)為#242329，，繪制一個(gè)圓角矩形，右擊圖層，選擇“混合選項(xiàng)”。勾選“內(nèi)發(fā)光”，混合模式設(shè)為“正?！?，顏色#000000，不透明度30%，內(nèi)發(fā)光半徑5px。
新建圖層,? 重命名為“Search Box”。重復(fù)“Highlight”圖層的做法，繪制圓角搜索框框時(shí)，前景色設(shè)為#504f57.
?繪制搜索框的右半部分.(從上到下，顏色設(shè)置為#b8b7c5 -#95949c)
?放置必須的文章和搜索圖標(biāo)
現(xiàn)在看起來頁面還很粗糙，讓我們繼續(xù)制作中間的滑動模塊。
新建圖層，重命名為“Slideshow Border”。使用鋼筆工具繪制左上角、右上角突出的邊框。取得“header”選區(qū)，點(diǎn)擊Delete鍵得到邊框。
?在滑動模塊的兩次繪制兩個(gè)黑色的小圓角矩形按鈕。
拼合所有的黑色圖形到同一圖層，右擊圖層縮略圖，選擇“混合模式”。勾選“漸變疊加”，漸變色設(shè)置如下（從左到右依次是：#8d8e92, #cbcbcd, #323137, #c3c5d4）勾選“外發(fā)光”，混合模式設(shè)為“正?！?，外發(fā)光顏色：#000000，不透明度4%，外發(fā)光大小5px。
?繪制左側(cè)箭頭，復(fù)制“水平翻轉(zhuǎn)”得到右側(cè)箭頭。
現(xiàn)在看起來好多了。讓我們繼續(xù)為圖片展示區(qū)和短文區(qū)制作邊框。
新建圖層，重命名為“Thumbnail Border”。在原圖形下方繪制圓角矩形如左一，按住Ctrl鍵取得原圖形的選區(qū)，按Delete鍵刪除，只留下邊框。先復(fù)制之前做過的滑動模塊邊框的圖層樣式，右擊“Slideshow Border”圖層粘貼圖層樣式，效果如下：
在“Thumbnail Border”圖層上方新建圖層，沿邊框外邊緣繪制一條1px寬的環(huán)繞邊框，右擊圖層樣式，勾選“漸變疊加”，顏色從上到下設(shè)置為#ffffff-#666666，使用相同的方法為內(nèi)部矩形塊添加邊框，漸變色與前面相反。
?通過復(fù)制得到其他幾個(gè)邊框，這里不細(xì)說了。下面我們接著來補(bǔ)充文字內(nèi)容。
現(xiàn)在我們來到標(biāo)題這。字體顏色使用黑色#000000，然后為文字添加投影，投影色#ffffff，角度90°，大小2px，距離1px。
對所有的主副標(biāo)題應(yīng)用該圖層樣式。你可以增加必要的Icon圖標(biāo)來點(diǎn)綴頁面?？梢缘竭@里http://10steps.sg/freebies/icons/ultimate-collection-of-high-quality-icons/下載些免費(fèi)圖標(biāo)。
我們基本上已經(jīng)做好了，開始導(dǎo)入圖片。
?下面是導(dǎo)入圖片后的效果。
?最后我們要考慮下如何讓寬屏用戶得到良好的視覺效果，這是網(wǎng)站設(shè)計(jì)工作中經(jīng)常被忽視的一點(diǎn)
?教程結(jié)束。
1. 優(yōu)秀的網(wǎng)絡(luò)資源，穩(wěn)定的網(wǎng)站和速度保證
?（配送雙線獨(dú)立ip空間，國際A級BGP機(jī)房，99.5% 的主機(jī)在線時(shí)間）
2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
-----------------------------------------------------------------------------------------------------
?
我們的與眾不同之處：
????? 免費(fèi)網(wǎng)絡(luò)營銷顧問：我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營銷顧問服務(wù)，您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷，電子商務(wù)，網(wǎng)站設(shè)計(jì)等的事宜，歡迎隨時(shí)聯(lián)系我們。
???? ?seo友好的網(wǎng)站管理系統(tǒng)：除了優(yōu)質(zhì)的網(wǎng)站空間，網(wǎng)站管理系統(tǒng)，和網(wǎng)站設(shè)計(jì)外，我們的網(wǎng)站管理系統(tǒng)更是seo友好的，包括：自定義欄目名，Google Sitemap自動生成，靜態(tài)頁面生成等等，讓您的網(wǎng)站。
???? ?免費(fèi)網(wǎng)絡(luò)營銷培訓(xùn)：如何更好的投放網(wǎng)絡(luò)廣告，如何提高網(wǎng)絡(luò)廣告的投資回報(bào)，如何發(fā)帖子，
???? ?如何優(yōu)化網(wǎng)站，我們有豐富的經(jīng)驗(yàn)開放給您！祝君成功！
聯(lián)系我們：010-62199213?? 62122723-808?? 賈先生
傳誠信北京網(wǎng)站建設(shè)網(wǎng)站：m.jzztb.org.cn?點(diǎn)擊查看經(jīng)典網(wǎng)站案例！
北京網(wǎng)站建設(shè)2010年網(wǎng)站建設(shè)套餐及優(yōu)惠！
