【譯者的話】 將一張漂亮開闊的照片作為網(wǎng)頁(yè)背景圖，不但漂亮吸引，而且也讓觀眾有一種親臨其境的體驗(yàn)感，加強(qiáng)了網(wǎng)頁(yè)所傳達(dá)的信息。而設(shè)計(jì)這樣一個(gè)網(wǎng)頁(yè)，技術(shù)上并不難，但在圖片處理上卻有注意的地方。讓我們一起來體驗(yàn)這種充滿視覺沖擊力的網(wǎng)頁(yè)制作。

原文出處：www.bamagazine.com

北卡羅萊納州商務(wù)部下屬的旅游網(wǎng)站并沒有象其它網(wǎng)站一樣僅僅介紹該州的迷人景色，而是讓你恍如置身于該州的景色之中。因?yàn)樵摼W(wǎng)站采用了視野開闊、漂亮迷人的照片作為背景。寬廣的圖片給人一種超大屏幕影院（ IMAX ）的視覺效果，傳達(dá)出空間感及真實(shí)感。整個(gè)網(wǎng)頁(yè)顯得漂亮迷人。還有一點(diǎn)：這種效果其實(shí)很容易制作。

漂亮網(wǎng)頁(yè)從漂亮圖片開始。為了設(shè)計(jì)這樣的一種超大屏幕感的視覺效果，背景圖片必須很寬――至少 22 英寸 ――比一般的顯示器都要寬，這樣就算在大小不一的顯示器中觀看，也一樣能占滿背景。為了使視覺統(tǒng)一協(xié)調(diào)，無論網(wǎng)頁(yè)窗口是拉大拉小，我們都要保證背景圖片及內(nèi)容網(wǎng)頁(yè)都仍然居中。

使用具有強(qiáng)烈中心焦點(diǎn)的圖片

焦點(diǎn)是最大的關(guān)鍵：上述圖片上方的中心位置形成一個(gè)視覺焦點(diǎn)，這讓我們?cè)谟^看這個(gè)網(wǎng)頁(yè)時(shí)有了一個(gè)起點(diǎn)。所以我們要選擇那些具有中心焦點(diǎn)的圖片（參考上方三張圖片）。最好是選擇那些視野開闊、較少細(xì)節(jié)的圖片。留意上述三張圖片中，透視消失點(diǎn)與圖片的焦點(diǎn)是處于同一個(gè)位置的（或非常接近）。避免構(gòu)圖發(fā)散、繁瑣或焦點(diǎn)偏離中心的圖片，否則會(huì)使整個(gè)網(wǎng)頁(yè)顯得擁擠，讓讀者無法適從。

在 Photoshop 里準(zhǔn)備圖片

尺寸及象素：處理圖片最好的方法就是將一張?jiān)?00dpi 的圖片變成 72dpi 。在 PS 里很容易完成，選擇：圖像 > 圖像大小，然后在對(duì)話框中，不要選“重定圖像像素”選項(xiàng)，在分辨率一欄中輸入 72 后，按確定即可。

發(fā)掘焦點(diǎn)：觀察圖片，發(fā)現(xiàn)一個(gè)合適的焦點(diǎn)，定下一下寬度大約為 22 英寸的區(qū)域后剪切。然后選擇：文件 > 儲(chǔ)存為 web 所有格式，選擇 JPEG ，在“品質(zhì)”一欄中，選擇最低的壓縮質(zhì)量（這里，我們選擇“中”），盡可能不使圖像質(zhì)量變差而且圖片大小不會(huì)太大。按“存儲(chǔ)”鍵保存文件。

在 Photoshop 里處理圖片過渡

將圖片邊緣過渡至實(shí)色區(qū)域

你只是希望背景圖片在網(wǎng)頁(yè)上方出現(xiàn)，而圖片下方則過渡到一個(gè)實(shí)色區(qū)域，這個(gè)實(shí)色區(qū)域是這個(gè)網(wǎng)頁(yè)下方的背景色。這樣可保證背景圖片不會(huì)太大，也可以保證下方的背景平實(shí)，不會(huì)干擾網(wǎng)頁(yè)上的內(nèi)容。

用吸管取色然后填充：我們?cè)趫D片底部區(qū)域中取一種主要顏色（注意這里的顏色模式應(yīng)為 RGB ，記下顏色數(shù)值，因?yàn)樵谟?Golive 軟件做網(wǎng)頁(yè)時(shí)你還用得著）。然后我們可以用漸變工具或一枝柔軟的毛筆將圖片底部填充，使到圖片過渡到實(shí)色區(qū)域顯得溫和自然。

在 Adobe GoLive 建立網(wǎng)頁(yè)

在 GoLive 軟件中，建立一個(gè)新的網(wǎng)頁(yè)，并存儲(chǔ)文件作為你的根文件夾。然后選擇 View>CSS Editor ，打開對(duì)話框，點(diǎn)擊“ Create a Style That Applies to Markup Elements ”鍵，在子菜單中選擇“ body ”。

點(diǎn)擊“背景特性”（ Background Properties ）按鈕并進(jìn)行如下設(shè)置：

在圖像： URL （相對(duì)地址）區(qū)域中，點(diǎn)擊下方“瀏覽”按鈕，然后選擇你剛才處理好的圖片。您可以通過點(diǎn)擊頁(yè)里上方的預(yù)覽按鈕來觀看背景圖片的情況，默認(rèn)模式下，該圖片會(huì)以水平及垂直方向重復(fù)填充背景區(qū)域。我們會(huì)在下面的步驟中修正這一點(diǎn)。

顏色 (Color) ：點(diǎn)擊顏色庫(kù)，在這里，輸入我們剛才取色時(shí)確定的 RGB 色值作為網(wǎng)頁(yè)背景顏色。

水平方向（ horizontal ） ：設(shè)為“居中”（ Center ），這可以保證需要背景圖片無論顯示器如何縮放都是處于居中位置。

垂直方向 (Vertical) ： 選擇“上方“（ top ），這保證圖片是處于網(wǎng)頁(yè)最上方的；

重復(fù)（ Repeat ）： 選擇“一次”（ once ），這表示圖片只會(huì)放置一次，而不會(huì)在背景中重復(fù)圖片。

放置（ Attach ）： 選擇“固定”（ Fixed ），這保證圖片不會(huì)隨著滾動(dòng)條上下移動(dòng)；

這樣，我們的背景完成了。

當(dāng)背景圖片處理好后，我們就可按照常規(guī)的網(wǎng)頁(yè)制作方法建立網(wǎng)頁(yè)。如果你是按表格來安排網(wǎng)頁(yè)內(nèi)容，則將表格設(shè)為居中，主要內(nèi)容最好也放置在中間區(qū)域，圖片上方要空出一定的區(qū)域來顯示背景圖片，空出來的區(qū)域高度應(yīng)該統(tǒng)一，這樣整個(gè)網(wǎng)站看起來才顯得協(xié)調(diào)。

（譯注：本文中涉及的網(wǎng)頁(yè)制作，在其它軟件如Dreamweaver中，一樣可以完成及達(dá)到相同的效果。）