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

書名：網(wǎng)頁設(shè)計與制作項目教程ISBN：978-7-111-49182-8作者：陳義文出版社：機械工業(yè)出版社本書配有電子課件項目一網(wǎng)站規(guī)劃與設(shè)計

院系：廣東女子職業(yè)技術(shù)學院經(jīng)貿(mào)系主講：陳義文

能力拓展2網(wǎng)站首頁版式設(shè)計

任務要求利用Photoshop軟件設(shè)計網(wǎng)站首頁版式，掌握頁面設(shè)計的方法及制作技巧最終效果操作提示在Photoshop編輯窗口中，新建1000px800px的圖像文件，白色背景，如圖1-14所示。操作提示將頁面分成頁眉、導航、橫幅廣告、友情鏈接、頁腳5大部分，并在圖層面板分別創(chuàng)建“Logo”組、“Nav”組、“Banner”組、“Link”組和“foot”組

操作提示在“Logo”組下新建“LogoBg”圖層，選擇“選框工具”，并設(shè)置其固定大小為1000px100px，如圖1-16所示

操作提示選擇“線性漸變工具”，設(shè)置漸變色：前景色為“#FFFFFF”，背景色為“#0099CC”。以選區(qū)的中間位置為起點，按住<Shift>鍵進行拖放，效果如圖1-17所示。

操作提示選擇菜單“文件”→“置入”命令，將logo圖像插入“Logo”區(qū)域，并調(diào)整至合適的位置。在“Logo”組下新建“LogoRight”圖層，選擇“鋼筆工具”，在距離右邊1/3處繪制如圖1-18所示封閉路徑。操作提示按住<Ctrl+Enter>組合鍵，將路徑轉(zhuǎn)換為選區(qū)，將區(qū)域填充為“白色”，如圖1-13所示。選擇菜單“文件”→“置入”命令，分別將“聯(lián)系我們”“公司郵箱”和“收藏本站”的對應圖標插入“Logo”區(qū)域，并調(diào)整其位置，如圖1-13所示。選擇“文字工具”，分別創(chuàng)建“聯(lián)系我們”“公司郵箱”和“收藏本站”3個文字圖層，如圖1-19所示。操作提示在“Nav”組下新建“NavBg”圖層，選擇“選框工具”，設(shè)置其固定大小為“1000px

38px”，填充前景色為“#19a4c2”。修改選框的固定大小為“1000px1px”，在距離上邊緣1px處，填充前景色為“#c7deec”，如圖1-20所示。

操作提示修改選框的固定大小為“1000px18px”，距離上邊緣2px處，填充前景色為“#6fc4d9”、背景顏色為“#32aac6”的漸變效果，如圖1-21所示。操作提示新建導航分隔線圖層，將選框的固定大小設(shè)置為“1px38px”，分別繪制兩根1px的填充色為“#1a92ae”和“#c7deec”的垂直線條，填充顏色時將兩線條水平并放在一起。然后添加蒙版圖層，設(shè)置“漸變工具”，如圖1-22所示，并自上而下拖動漸變，效果如圖1-13所示。操作提示按照相同的方法制作其他分隔線，或復制6個相同的圖層，并將其平均分布。創(chuàng)建導航文字圖層，設(shè)置字體為“宋體”、大小為“14點”、消除鋸齒方式為“無”，如圖1-23所示。輸入對應導航文字，并調(diào)整其位置。操作提示創(chuàng)建“hover效果”圖層。在工具欄中選擇“圓角矩形工具”，在“屬性”面板切換至“形狀”選項，并設(shè)置填充顏色為“#ffffff”、固定大小為“102px25px”、半徑為“8px”，如圖1-24所示。操作冰提示繪制衣圓角無矩形狂形狀府，并影將該錯圖層泛的透浴明度樓調(diào)整粥為“25影%”，完茅成導留航區(qū)障域的哥制作肌，相猶關(guān)圖完層如耽圖1-畫25所示致。操作呢提示選擇仁“Ba帽nn哨er蝦”組，雨執(zhí)行鬼菜單戚“文吧件”爛→“暫置入燦”命壓令，徒插入Ba免nn獨er廣告行圖像彩，按睜住<S完hi敏ft稿>鍵將漸圖像占放大窮至“10耍00畏px存”，并新以中酷心點娃為原既點，花定位王圖像廁的X值和Y值的充參數(shù)侄如圖1-肝26所示乞。在“Li漫nk藥”組下她新建琴“Li絹nk凱Bg膚”圖層自，設(shè)槍置“瀉選框愿工具坊”的墨固定梯大小裳為“10墳00嚇px11槐0p國x”，并逆將選載區(qū)填圈充為巡壽白色過。操作給提示新建超“Li搬nk監(jiān)Bo肺rd忍er止”圖層解，選庭擇“境圓角禮矩形古工具掩”，柳設(shè)置京圓角工半徑殿為“5p姿x”，固幼定大蘭小為若“98閘0p鬧x93鬼px繩”，如探圖1-伴27所示叼。繪臨制路夏徑，喇并以鼓“#c距fc鄙fc青f”的顏掩色進火行描分邊、芒大小敬為“1p作x”。操作柴提示將圓林角矩啞形選鈴區(qū)縮事小至饑“25遼px普”的高點度，遮選擇然“對壓稱漸跪變工醉具”慨，設(shè)暖置漸序變前蜜景色斤為“#e娘ee沸ee哲e”、背某景色法為“#f照df葬df睬d”，制語作漸錢變效汁果如似圖1-局28所示肢，并醋再次貼執(zhí)行1p慈x的描糞邊，橋描邊憲顏色次仍為惠“#c閥fc輝fc夏f”。操作候提示創(chuàng)建填“友兄情鏈權(quán)接”災文字河圖層蓋，并偷選擇爭“橢枯圓工慎具”拆，制也作紅性色空糠心圓偵圈。創(chuàng)建勞文字年圖層登，輸纖入鏈夜接項即文字肚。至敞此，慶完成Li蒼nk部分返的制險作，屢相關(guān)篩圖層留如圖1-哪29所示帥。在“fo幼ot眠”組下雷新建攝“相必關(guān)導沾航背揭景”逗圖層烈，設(shè)該置“頓選框昨工具欲”的橫固定您大小屑為“10遍00騎px33穩(wěn)px”，繪蹈制區(qū)賺域并鋪填充擱顏色遼為“#5樂db河9c捷f”，然父后在鑰頂部要填充愈“3p鄉(xiāng)豐x”的“#1牌99職db已a”顏色浩，完瞧成底兼部導葬航背督景的興制作段。操作掙提示新建愿“浮濁雕”和圖層倡，選創(chuàng)擇“缸鋼筆介工具夕”，豪繪制歸如圖1-覺30所示別路徑樸，將襲路徑析轉(zhuǎn)換齒成選拆區(qū)，壯并填模充白研色背酒景。操作焦提示為“礙浮雕眼”圖餃層添腿加斜李面浮迫雕和點投影狠效果那