網(wǎng)頁設(shè)計與制作項目教程.ppt

1、標(biāo)題：網(wǎng)頁設(shè)計與制作項目教程ISBN: 978-7-111-49182-8作者：陳出版社：機械工業(yè)出版社本書配有電子課件，項目1:網(wǎng)站規(guī)劃與設(shè)計，系：廣東女子職業(yè)技術(shù)學(xué)院經(jīng)濟(jì)與貿(mào)易系主講人：陳，能力開發(fā)2網(wǎng)站主頁布局設(shè)計，任務(wù)要求，用Photoshop軟件設(shè)計網(wǎng)站主頁布局，掌握頁面設(shè)計方法，制作技巧，最終效果和操作技巧，并創(chuàng)建新的1000像素x800像素圖像，操作提示，將頁面分為五個部分：頁眉、導(dǎo)航、橫幅廣告、友情鏈接和頁腳，并在圖層面板上分別創(chuàng)建“Logo”、“nav”、“橫幅”、“Link”和“foot”組。操作提示，在“Logo”組下新建一個“Logo BG”圖層，如圖1-16所示，操作

2、提示，選擇“線性漸變工具”，設(shè)置漸變顏色：前景色為“#FFFFFF”，背景色為“#0099CC”。從選擇的中間位置開始，按住鍵進(jìn)行拖放，效果如圖1-17所示。操作提示，選擇菜單“文件”“放置”命令，將徽標(biāo)圖像插入“徽標(biāo)”區(qū)域，并將其調(diào)整到合適的位置。在“Logo”組下創(chuàng)建一個新的“Logo RIGHT”圖層，選擇“鋼筆工具”，在右側(cè)三分之一處畫出如圖1-18所示的閉合路徑。操作提示，按住組合鍵，將路徑轉(zhuǎn)換為選擇，并用“白色”填充該區(qū)域，如圖1-13所示。選擇菜單“文件”和“地點”命令，將相應(yīng)的“聯(lián)系我們”、“公司郵箱”和“收藏網(wǎng)站”圖標(biāo)插入“標(biāo)識”區(qū)域，并調(diào)整它們的位置，如圖1-13所示。選擇

3、“文本工具”，創(chuàng)建三個文本層：“聯(lián)系我們”、“公司郵箱”和“喜歡的網(wǎng)站”，如圖1-19所示。操作提示，在“nav”組下新建一個“Navbg”圖層，選擇“選框工具”，將其固定大小設(shè)置為“1000px38px”，并將前景色填充為“#19a4c2”。修改后的復(fù)選框的固定大小為“1000px1px”，前景顏色為距離上邊緣1px處的“#c7deec”，如圖1-20所示。操作提示，將選擇框的固定大小修改為“1000px18px”，并在前景填充“#6fc4d9”，在背景填充“#32aac6”，如圖1-21所示。操作提示，創(chuàng)建一個新的導(dǎo)航分隔線圖層，將選擇框的固定大小設(shè)置為“1px38px”，分別繪制兩條1p

4、x填充顏色為“#1a92ae”和“#c7deec”的豎線，填充顏色時將兩條線水平放在一起。然后添加遮罩層，設(shè)置“漸變工具”，如圖1-22所示，從上到下拖動漸變，效果如圖1-13所示。操作提示，以同樣的方式制作其他分割線，或者復(fù)制6個相同的圖層并均勻分布。創(chuàng)建一個導(dǎo)航文本層，并將字體設(shè)置為“Tahoma”，大小設(shè)置為“14點”，抗鋸齒模式設(shè)置為“無”，如圖1-23所示。輸入相應(yīng)的導(dǎo)航文本并調(diào)整其位置。操作提示，創(chuàng)建懸停效果圖層。選擇工具欄中的圓角矩形工具，切換到屬性面板中的形狀選項，將填充顏色設(shè)置為# ffff，固定大小設(shè)置為“102px25px”，半徑設(shè)置為“8px”，如圖1-24所示。操作提

5、示，畫一個圓角矩形，并將該層的透明度調(diào)整到 25%完成導(dǎo)航區(qū)域的制作。相關(guān)層如圖1-25所示。操作提示，選擇“橫幅”組，執(zhí)行菜單“文件”和“放置”命令，插入橫幅廣告圖像，按住鍵將圖像放大到“1000像素”，以中心點為原點，定位圖像的x值和y值參數(shù)，如圖1-26所示。在“鏈接”組下，創(chuàng)建一個新的鏈接圖層，將選框工具的固定大小設(shè)置為1000像素x110px，并用白色填充選區(qū)。操作提示，新建一個“鏈接邊框”圖層，選擇“圓角矩形工具”，將圓角半徑設(shè)置為“5px”，將固定尺寸設(shè)置為“980px93px”，如圖1-27所示。畫出路徑，用“1px”大小的“cfcfcf”的顏色描邊。，操作提示，將圓角矩形選擇

6、降低到“25px”的高度，選擇“對稱漸變工具”，將漸變前景色設(shè)置為“eeeeee，背景色設(shè)置為“#”fdfdfdfd，使?jié)u變效果如圖1-28所示，再用1px筆畫，筆畫顏色仍為“cfcfcf。操作提示，創(chuàng)建“友誼鏈接”文本層，并選擇“橢圓工具”制作紅色空心圓。創(chuàng)建一個文本層，并輸入鏈接項目的文本。此時，鏈接部分完成，相關(guān)的層如圖1-29所示。在“foot”組下創(chuàng)建一個新的“related navigation background”層，將“box selection tool”的固定大小設(shè)置為“1000px33px”，繪制該區(qū)域并用顏色“#5db9cf”填充，然后用“3px”的顏色“#199dba”填充頂部以完成底部導(dǎo)航背景。操作提示，創(chuàng)建一個新的“浮雕”層，選擇“鋼筆工具”，繪制如圖1-30所示的路徑，將路徑轉(zhuǎn)