1、第9章 網(wǎng)頁設(shè)計圖文并茂的宣傳本章主要內(nèi)容：1、網(wǎng)頁設(shè)計知識 ，包含：網(wǎng)頁設(shè)計原則 、網(wǎng)頁設(shè)計元素 、網(wǎng)頁色彩運用 、常見的網(wǎng)頁布局。 2、輕松驛站的網(wǎng)頁制作 。9.1 網(wǎng)頁設(shè)計知識網(wǎng)頁設(shè)計知識包含內(nèi)容：1、網(wǎng)頁設(shè)計原則 2、網(wǎng)頁設(shè)計元素3、網(wǎng)頁色彩運用4、常見的網(wǎng)頁布局 9.1.1網(wǎng)頁設(shè)計原則網(wǎng)頁設(shè)計的原則有簡潔、一致和對比三個主要原則 ：1.簡潔：頁面中不要放置太多的元素和信息 一個醒目的標題 限制所用的字體和顏色的數(shù)目 元素都應(yīng)當有明確的含義和用途 9.1.1網(wǎng)頁設(shè)計原則2.一致性頁面使用相同的頁邊距文本，圖形之間保持相同的間距 圖形、標題、符號旁邊留下相同的空白 公司標志處理圖標導航處

2、理9.1.1網(wǎng)頁設(shè)計原則頁面中的每個元素與整個頁面的色彩和風格上的一致 字體和顏色和諧3.對比顏色的對比 字體變化 強調(diào)突出關(guān)鍵內(nèi)容 9.1.2 網(wǎng)頁設(shè)計元素網(wǎng)頁的設(shè)計元素主要包括背景，文本，導航，圖像，表格，顏色，多媒體等元素。背景：給頁面添加背景，包括紋理填充、水印式背景和長條狀背景等；文本：是為網(wǎng)頁提供信息的元素。導航：按鈕、圖標和其他導航工具。9.1.2 網(wǎng)頁設(shè)計元素圖像：可加入圖片、圖形等；表格：用來顯示按行和列組織的信息；顏色：包括圖片的色彩、文本和背景的色彩等；多媒體：包括聲音、動畫、視頻片斷、背景音樂等。9.1.3 網(wǎng)頁色彩運用色彩能產(chǎn)生強烈的視覺效果色彩搭配合理還可以讓網(wǎng)頁生

3、動活潑，傳遞設(shè)計者的思想情感使用色彩要慎重，否則很可能弄巧成拙一個網(wǎng)頁中要使用相近的色彩 背景色不要太刺眼 9.1.3 網(wǎng)頁色彩運用色彩要拉開一定的對比注意色彩的冷暖問題 考慮色彩帶給人心理上的感覺 網(wǎng)頁作品點評9.1.4 常見的網(wǎng)頁布局常見的網(wǎng)頁布局有“T”型布局、“口”型布局、“三”型布局、對稱對比布局和POP布局等 。1.“T”型布局。所謂“T”型布局，就是指網(wǎng)頁上邊和左邊相結(jié)合，頁面頂部為橫條網(wǎng)站標志和廣告條，左邊為主菜單，右邊顯示內(nèi)容。 9.1.4 常見的網(wǎng)頁布局2.“口”型布局。就是頁面上下各有一個廣告條，左邊為主菜單，右邊為鏈接，中間是主要內(nèi)容。 3.“三”型布局。是頁面上橫向兩

4、條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。 9.1.4 常見的網(wǎng)頁布局 4.對稱對比布局。采用左右或上下對稱布局，一半深色，一半淺色，一般用于設(shè)計型站點 。5.POP布局。POP引自廣告術(shù)語，是指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。通常用于設(shè)計時尚站點，漂亮吸引人，但是瀏覽速度慢。 9.2輕松驛站的網(wǎng)頁制作1.在Photoshop中，執(zhí)行“文件/新建”，設(shè)置對話框。2.執(zhí)行“文件/打開”，打開“網(wǎng)頁背景1”文件。選擇矩形選擇工具，執(zhí)行“編輯/拷貝”。 3.切換文件，執(zhí)行“編輯/粘貼”，粘貼。執(zhí)行“編輯/自由變換”，拖動圖像四周的變換手柄，將圖像壓縮為一個長條，放

5、在圖像窗口的上方。9.2輕松驛站的網(wǎng)頁制作4.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。選擇矩形選擇工具，在圖像中按下鼠標拖動，繪制一個矩形的選擇區(qū) 。5.點擊前景色工具，在拾色器中，設(shè)置R=27，G=60，B=4，選擇油漆桶工具，將其噴繪為深綠色 。9.2輕松驛站的網(wǎng)頁制作6.執(zhí)行“選擇/取消選擇”，選擇移動工具，按住Alt鍵，把色條向下拖動，復(fù)制一份。使用移動工具把它拖動到圖像的下方。7.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。選擇矩形選擇工具，在圖像中按下鼠標拖動，繪制一個矩形的選擇區(qū)。 9.2輕松驛站的網(wǎng)頁制作8.點擊前景色工具，在拾色器中設(shè)置R=194，G=244，B=14

6、4，選擇油漆桶工具，在選擇區(qū)內(nèi)噴繪為淺綠色。9.在圖形調(diào)板中，把剛才制作的淡綠色矩形所在的圖層拖動到背景的上方 。10.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。選擇矩形選擇工具，在圖像中按下鼠標拖動，繪制一個矩形的選擇區(qū) 。9.2輕松驛站的網(wǎng)頁制作11.點擊前景色，在拾色器中設(shè)置R=80，G=164，B=21，點擊背景色，在拾色器中，設(shè)置R=27，G=60，B=4，選擇漸變工具，點擊工具選項欄上的漸變色條，在對話框中，選中“預(yù)置”中的第一個漸變，設(shè)置工具選項欄。在選擇區(qū)內(nèi)從上向下拖動鼠標，制作漸變色 。9.2輕松驛站的網(wǎng)頁制作12.執(zhí)行“選擇/取消選擇”，選擇移動工具，按住Alt鍵，將鼠

7、標移到剛才制作的漸變條上面向下拖動，把它復(fù)制一份 。13.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。點擊前景色工具，在拾色器中設(shè)置R=194，G=244，B=144，選擇工具箱中的形狀工具，設(shè)置工具選項欄，在圖像中拖動鼠標，繪制圓角矩形路徑。 9.2輕松驛站的網(wǎng)頁制作14.選擇工具箱中的形狀工具，設(shè)置工具選項欄。在圖像中拖動鼠標，再次繪制圓角矩形路徑。15.在路徑中點擊鼠標右鍵，在彈出的菜單中選擇“建立選區(qū)”，將路徑轉(zhuǎn)化為選區(qū) 。9.2輕松驛站的網(wǎng)頁制作16.點擊前景色，在拾色器中設(shè)置R=51，G=78，B=0，點擊背景色，在拾色器中設(shè)置R=127，G=163，B=26，選擇漸變工具，點擊

8、工具選項欄上的漸變色條，在打開的對話框中，選中“預(yù)置”中的第一個漸變，在圖像中的選擇區(qū)內(nèi)從上向下拖動鼠標，制作漸變色。9.2輕松驛站的網(wǎng)頁制作17.執(zhí)行“選擇/取消選擇”。選擇工具箱中的形狀工具，設(shè)置工具選項欄，將前景色設(shè)置為白色。在圖像中拖動鼠標，繪制十字形狀。18.點擊圖層調(diào)板下方的“添加圖層樣式”按鈕，在展開的菜單中選擇“描邊”，設(shè)置對話框，點擊“顏色”后邊的色塊，在拾色器中設(shè)置R=55，G=105，B=19。9.2輕松驛站的網(wǎng)頁制作19.在圖層調(diào)板中，選中圓角矩形所在的圖層，選擇工具箱中的移動工具，按住Alt鍵，按下鼠標拖動，進行復(fù)制，然后使用移動工具調(diào)整其位置。20.使用同樣的辦法再

9、復(fù)制兩個，使用移動工具調(diào)整其位置。21.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。使用矩形選擇工具在圖像的上方制作一個矩形選擇區(qū) 。9.2輕松驛站的網(wǎng)頁制作22.執(zhí)行“編輯/填充”，設(shè)置對話框，將圖案后面的方框內(nèi)選擇“抽線”圖案，將圖層調(diào)板上方的“不透明度”設(shè)為30。23.點擊圖層調(diào)板下方的“新建”按鈕，新建一個圖層。將前景色設(shè)置為白色。選擇單行選擇工具，在圖像上制作一個單行選區(qū)。同時按下鍵盤上的Alt鍵和Delete鍵，將選區(qū)填充為白色。24.執(zhí)行“選擇/取消選擇”，選擇移動工具，按住Alt鍵，將鼠標移到剛才制作的白線向下拖動，進行復(fù)制。使用同樣的方法總共復(fù)制4條白線 。25.選擇文字工具，設(shè)置工具選項欄，將前景色設(shè)為藍色。在圖像上方點擊鼠標，輸入文字“輕松”。 9.2輕松驛站的網(wǎng)頁制作26.點擊圖層調(diào)板下方的“添加圖層樣式”按鈕，在展開的菜單中為文字添加投影、外發(fā)光、描邊效果 。27.選擇文字工具，設(shè)置工具選項欄，將前景色設(shè)為橙色。在圖像上方點擊，輸入文字“驛站”。為文字添加圖層效果。28.在該頁面的其他地方輸入文字 。9.2輕松驛站的網(wǎng)頁制作這樣網(wǎng)頁的基本圖像框架就做好了。一個網(wǎng)頁的最后完成，還需要添加文字內(nèi)容