資源描述：
《網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、書名：網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程ISBN：978-7-111-49182-8作者：陳義文出版社：機(jī)械工業(yè)出版社本書配有電子課件項(xiàng)目一網(wǎng)站規(guī)劃與設(shè)計(jì)院系：廣東女子職業(yè)技術(shù)學(xué)院經(jīng)貿(mào)系主講：陳義文能力拓展2網(wǎng)站首頁版式設(shè)計(jì)任務(wù)要求利用Photoshop軟件設(shè)計(jì)網(wǎng)站首頁版式，掌握頁面設(shè)計(jì)的方法及制作技巧最終效果操作提示?在Photoshop編輯窗口中，新建1000px?800px的圖像文件，白色背景，如圖1-14所示。操作提示?將頁面分成頁眉、導(dǎo)航、橫幅廣告、友情鏈接、頁腳5大部分，并在圖層面板分別創(chuàng)建“Logo”組、“
2、Nav”組、“Banner”組、“Link”組和“foot”組操作提示?在“Logo”組下新建“LogoBg”圖層，選擇“選框工具”，并設(shè)置其固定大小為1000px?100px，如圖1-16所示操作提示?選擇“線性漸變工具”，設(shè)置漸變色：前景色為“#FFFFFF”，背景色為“#0099CC”。以選區(qū)的中間位置為起點(diǎn)，按住鍵進(jìn)行拖放，效果如圖1-17所示。操作提示?選擇菜單“文件”→“置入”命令，將logo圖像插入“Logo”區(qū)域，并調(diào)整至合適的位置。?在“Logo”組下新建“LogoRight”
3、圖層，選擇“鋼筆工具”，在距離右邊1/3處繪制如圖1-18所示封閉路徑。操作提示?按住組合鍵，將路徑轉(zhuǎn)換為選區(qū)，將區(qū)域填充為“白色”，如圖1-13所示。?選擇菜單“文件”→“置入”命令，分別將“聯(lián)系我們”“公司郵箱”和“收藏本站”的對應(yīng)圖標(biāo)插入“Logo”區(qū)域，并調(diào)整其位置，如圖1-13所示。?選擇“文字工具”，分別創(chuàng)建“聯(lián)系我們”“公司郵箱”和“收藏本站”3個(gè)文字圖層，如圖1-19所示。操作提示?在“Nav”組下新建“NavBg”圖層，選擇“選框工具”，設(shè)置其固定大小為“1000px
4、?38px”，填充前景色為“#19a4c2”。修改選框的固定大小為“1000px?1px”，在距離上邊緣1px處，填充前景色為“#c7deec”，如圖1-20所示。操作提示修改選框的固定大小為“1000px?18px”，距離上邊緣2px處，填充前景色為“#6fc4d9”、背景顏色為“#32aac6”的漸變效果，如圖1-21所示。操作提示新建導(dǎo)航分隔線圖層，將選框的固定大小設(shè)置為“1px?38px”，分別繪制兩根1px的填充色為“#1a92ae”和“#c7deec”的垂直線條，填充顏色時(shí)將兩線條水平并放在一起。
5、然后添加蒙版圖層，設(shè)置“漸變工具”，如圖1-22所示，并自上而下拖動(dòng)漸變，效果如圖1-13所示。操作提示按照相同的方法制作其他分隔線，或復(fù)制6個(gè)相同的圖層，并將其平均分布。創(chuàng)建導(dǎo)航文字圖層，設(shè)置字體為“宋體”、大小為“14點(diǎn)”、消除鋸齒方式為“無”，如圖1-23所示。輸入對應(yīng)導(dǎo)航文字，并調(diào)整其位置。操作提示創(chuàng)建“hover效果”圖層。在工具欄中選擇“圓角矩形工具”，在“屬性”面板切換至“形狀”選項(xiàng)，并設(shè)置填充顏色為“#ffffff”、固定大小為“102px?25px”、半徑為“8px”，如圖1-24所示。操作
6、提示繪制圓角矩形形狀，并將該圖層的透明度調(diào)整為“25%”，完成導(dǎo)航區(qū)域的制作，相關(guān)圖層如圖1-25所示。操作提示選擇“Banner”組，執(zhí)行菜單“文件”→“置入”命令，插入Banner廣告圖像，按住鍵將圖像放大至“1000px”，并以中心點(diǎn)為原點(diǎn)，定位圖像的X值和Y值的參數(shù)如圖1-26所示。在“Link”組下新建“LinkBg”圖層，設(shè)置“選框工具”的固定大小為“1000px?110px”，并將選區(qū)填充為白色。操作提示新建“LinkBorder”圖層，選擇“圓角矩形工具”，設(shè)置圓角半徑為“5px
7、”，固定大小為“980px?93px”，如圖1-27所示。繪制路徑，并以“#cfcfcf”的顏色進(jìn)行描邊、大小為“1px”。操作提示將圓角矩形選區(qū)縮小至“25px”的高度，選擇“對稱漸變工具”，設(shè)置漸變前景色為“#eeeeee”、背景色為“#fdfdfd”，制作漸變效果如圖1-28所示，并再次執(zhí)行1px的描邊，描邊顏色仍為“#cfcfcf”。操作提示創(chuàng)建“友情鏈接”文字圖層，并選擇“橢圓工具”，制作紅色空心圓圈。創(chuàng)建文字圖層，輸入鏈接項(xiàng)文字。至此，完成Link部分的制作，相關(guān)圖層如圖1-29所示。在“foot
8、”組下新建“相關(guān)導(dǎo)航背景”圖層，設(shè)置“選框工具”的固定大小為“1000px?33px”，繪制區(qū)域并填充顏色為“#5db9cf”，然后在頂部填充“3px”的“#199dba”顏色，完成底部導(dǎo)航背景的制作。操作提示新建“浮雕”圖層，選擇“鋼筆工具”，繪制如圖1-30所示路徑，將路徑轉(zhuǎn)換成選區(qū)，并填充白色背景。操作提示為“浮雕”圖層添加斜面浮雕和投影效果，相關(guān)參數(shù)設(shè)置如圖1-31所示。操作提示創(chuàng)建文字圖層
