1、會(huì)計(jì)學(xué)1網(wǎng)站首頁(yè)制作網(wǎng)站首頁(yè)制作商務(wù)網(wǎng)頁(yè)設(shè)計(jì)1、觀察色調(diào)及布局商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二2、首頁(yè)的策劃分析3、首頁(yè)設(shè)計(jì)的最終效果圖子任務(wù)1：確定首頁(yè)風(fēng)格、色調(diào)及布局要點(diǎn)要點(diǎn)第2頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二子任務(wù)1：確定首頁(yè)風(fēng)格、色調(diào)及布局風(fēng)風(fēng)格格色調(diào)色調(diào) 布布局局簡(jiǎn)潔簡(jiǎn)潔大氣大氣精細(xì)精細(xì)實(shí)用實(shí)用藍(lán)色藍(lán)色灰色灰色紅色紅色白色白色第3頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二子任務(wù)1：確定首頁(yè)風(fēng)格、色調(diào)及布局第4頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二制作標(biāo)志區(qū)和導(dǎo)航區(qū)（1）從【開始】【程序】中打開Photoshop軟件新建文檔（快捷鍵：Ctrl+N），設(shè)置相應(yīng)屬。（提示：如果設(shè)計(jì)

2、中畫布的大小不合適，可以從菜單命令【圖像】【畫布大小】進(jìn)行調(diào)節(jié)。）（2）保存文件（快捷鍵：Ctrl+S），這里保存到文件夾“商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作/源文件”中。（提示：一般在網(wǎng)站項(xiàng)目開發(fā)時(shí)需要將文件夾分類建好，源文件單獨(dú)放在一起，方便以后查找編輯。例如這里存放源文件的文件夾“商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作”。）子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第5頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（3）在【圖層】面板中新建組，雙擊默認(rèn)組名重命名為“top”；（提示：雙擊組名稱，可在文字上雙擊，也可在文字旁邊雙擊，這時(shí)會(huì)彈出圖層組屬性窗口，可選擇組的顏色，以便區(qū)別于其他的組。）（4）在【圖層】面板中新建組，雙擊默認(rèn)組名重命名為

3、“導(dǎo)航欄”；（5）在【圖層】面板，新建圖層，雙擊默認(rèn)圖層名重命名為“導(dǎo)航欄背景”；4選擇工具欄中的【矩形選框工具】，繪制1280*100px的選區(qū)。制作標(biāo)志區(qū)和導(dǎo)航區(qū)子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第6頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（6）改變前景色為#ebebeb。（提示：“#”后為十六進(jìn)制的顏色值，每?jī)晌环謩e代表“R”“G”“B”的值。）（7）單擊【文件】按鈕，導(dǎo)入logo文件，右擊圖層，選擇復(fù)制該圖層，在彈出的“復(fù)制圖層”窗口中選擇需要復(fù)制到的目標(biāo)文檔為“index”文件。（8）選中l(wèi)ogo圖層，按“CTRL+T”鍵調(diào)整logo大??；打開標(biāo)尺（快捷建：Ctrl+R），按住鼠標(biāo)左鍵，從

4、標(biāo)尺上拖出參考線。制作標(biāo)志區(qū)和導(dǎo)航區(qū)子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第7頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（9）制作導(dǎo)航，在工具欄中選擇【文字工具】，輸入文字“首頁(yè) 公司簡(jiǎn)介 產(chǎn)品展示 行業(yè)動(dòng)態(tài) 售后服務(wù) 分銷合作”然后確認(rèn)。（10）在“窗口”中打開“字符”面板，在字符面板中更改文字屬性（大小12PX、字體：宋體、顏色：黑色）（11）打開本書配套資源“項(xiàng)目資料庫(kù)/素材”中的文件1.jpg（Ctrl+O）,使用工具欄中【移動(dòng)工具】或者方向鍵移動(dòng)紅色條紋，使其緊貼左邊緣和水平線。制作標(biāo)志區(qū)和導(dǎo)航區(qū)子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第8頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（12）制作導(dǎo)航，在工具欄中

5、選擇【文字工具】，輸入文字“首頁(yè) 公司簡(jiǎn)介 產(chǎn)品展示 行業(yè)動(dòng)態(tài) 售后服務(wù) 分銷合作”然后確認(rèn)。（13）在“窗口”中打開“字符”面板，在字符面板中更改文字屬性（大小12PX、字體：宋體、顏色：黑色。（14）打開本書配套資源“項(xiàng)目資料庫(kù)/素材”中的文件1.jpg（Ctrl+O）,使用工具欄中【移動(dòng)工具】或者方向鍵移動(dòng)紅色條紋，使其緊貼左邊緣和水平線。制作標(biāo)志區(qū)和導(dǎo)航區(qū)子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第9頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二導(dǎo)航區(qū)最終效果圖子任務(wù)2：設(shè)計(jì)首頁(yè)頁(yè)頭區(qū)第10頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二(15)在【圖層】面板中新建組，雙擊默認(rèn)組名，重命名為“banner”。

6、(16)在【圖層】面板，新建圖層，雙擊默認(rèn)圖層名重命名為“banner背景” 選擇工具欄中的【矩形選框工具】，繪制1280*185px的選區(qū)。(17)在【圖層】面板中，【添加圖層樣式】，選擇漸變疊加，漸變角度為0度，設(shè)置漸變顏色為#3271F0到#76A3FF。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第11頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（18）單擊【文件】按鈕打開素材中圖“pbdn.jpg”，在工具欄中選擇【磁性套索工具】,設(shè)置羽化值0.5px。（19）按快捷鍵Ctrl+M,打開“曲線”面板，調(diào)節(jié)界面。（20） 在工具欄中選擇【文字工具】選擇“橫排文字工具”建立文字圖層，在【窗口】中打開【字符

7、】面板設(shè)置字體為宋體，字號(hào)為16px,并輸入文字。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第12頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（21）創(chuàng)建文字圖層，輸入文字（開啟勁爆“約惠”模式），在【字符】面板中調(diào)節(jié)“約惠”字體大小為60px，并設(shè)置顏色為#FAFD01?！捌渌煮w”為36px并設(shè)置顏色為#FFFFFF。（22）在工具欄中選擇【形狀工具】中的矩形工具，繪制矩形并為其填充顏色。（23）選中形狀圖層，單擊【圖層】面板中的【添加圖層蒙板】按鈕為形狀圖層添加蒙版。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第13頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（24）選中蒙版圖層，利用多邊形套索選出要被隱藏遮蓋的區(qū)域，調(diào)

8、節(jié)前景色為黑色，按Alt+Delete填充。（25）復(fù)制“小白條”圖層，移動(dòng)到矩形右側(cè)。（26）新建字體圖層，輸入文字（百大品牌齊聚惠，好貨等搶），雙擊字體圖層，選中要改變大小的字體，設(shè)置為宋體，黑色、16px。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第14頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（27）在【形狀選擇工具】中選擇圓角矩形工具，在形狀屬性工具欄中設(shè)置顏色為#B1ABAB、半徑為30px。（28）新建文字圖層，在【字符】面板中設(shè)置顏色為EFOE19，字體為宋體，14px、顏色為ff0000,選中將形狀圖層和文字圖層右擊鼠標(biāo)懸著“合并圖層”，方便移動(dòng)。（29）打開本書配套資源“項(xiàng)目資料庫(kù)/素材

9、“white.png”、“rad.png”、“gray.png”文件。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第15頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（30）選中圖層“gray”,打開【圖層樣式】面板，在【投影】面板中設(shè)置投影角度為160度，距離為10px、大小為5px。（31）選中“giay”圖層右擊，選擇拷貝圖層樣式。（32）選中圖層“white”、“rad”,右擊選擇，粘貼圖層樣式。（33）調(diào)整圖層位置和圖層順序。 子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第16頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)Banner效果圖第17頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（34）

10、在菜單欄中選擇【矩形選框】，新建圖層，繪制矩形選區(qū)。選中圖層，單擊添加圖層樣式，打開圖層樣式面板，選擇漸變疊加，設(shè)置漸變屬性值。（35）在【圖層】面板中，單擊新建組按鈕，雙擊組名，重命名為“產(chǎn)品類別”。（36）在【圖層】面板中新建圖層，雙擊默認(rèn)圖層名稱，重命名為紅色小橫條。（37）在菜單面板中選擇【矩形工具】，繪制矩形選區(qū)。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第18頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（36）在工具欄中，選擇前景色，將前景色改為#EA1227,按“Alt+Delete” 鍵填充顏色。（37）復(fù)制“紅色小橫條”圖層，重命名為“灰色小橫條”填充色為“b5afaf”。（38）按Ctrl

11、+T調(diào)節(jié)圖層大小。（39）在工具欄中選擇【文字工具】中的橫排文字工具，新建文字圖層，設(shè)置文字宋體、填充顏色為#000000、字符大小為18px、加粗。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第19頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（40）打開素材文件夾中的“3.png”。將“3.png”圖層重命名為“項(xiàng)目符號(hào)”，并將其復(fù)制移動(dòng)至相應(yīng)的位置。（41）打開素材文件中的“4.jpg”文件，將其移動(dòng)到相應(yīng)的位置。（42）新建圖層，用選框工區(qū)畫出1280px*715px的選區(qū)，并將其顏色填充為“#ebebeb” ，繪制虛線在圖層面板中新建圖層，重命名為“虛線”，在工具欄中選擇畫筆工具。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)

12、容區(qū)第20頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（43）在【畫筆】面板中，設(shè)置形狀為圓點(diǎn)、像素大小為3px、顏色為“b8b2b2”、間距為200px,如圖所示。（44）在【圖層】面板中，選中“虛線”的圖層。按住鼠標(biāo)左鍵，拖動(dòng)到新建圖層按鈕上，進(jìn)行圖層復(fù)制。（45）新建文字圖層，輸入下面文字在【字符】屬性面板中，設(shè)置文字屬性為宋體、黑色和#686565、12px。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第21頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（46）在【畫筆】面板中，設(shè)置形狀為圓點(diǎn)、像素大小為3px、顏色為“b8b2b2”、間距為200px（47）在【圖層】面板中，選中“虛線”的圖層。按住鼠標(biāo)

13、左鍵，拖動(dòng)到新建圖層按鈕上，進(jìn)行圖層復(fù)制。（48）新建文字圖層，輸入下面文字在【字符】屬性面板中，設(shè)置文字屬性為宋體、黑色和#686565、12px。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第22頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（49）在【圖層】面板中新建組，雙擊重命名組為“站內(nèi)公告” 。（50）打開“素材”文件夾中的“6.png”文件，并復(fù)制圖層移動(dòng)到相應(yīng)的位置。步驟66：新建文字圖層“站內(nèi)公告”在圖層面板中設(shè)置文字屬性，字體為宋體、14px、加粗、#ffffff。（51）復(fù)制組“產(chǎn)品分類”中的“虛線”調(diào)整大小，并移動(dòng)到相應(yīng)的位置。復(fù)制組“產(chǎn)品分類”中的“項(xiàng)目符號(hào)”圖層，并移動(dòng)到相應(yīng)的位置。復(fù)

14、制組“產(chǎn)品分類”中“虛線”圖層，并移動(dòng)到相應(yīng)的位置。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第23頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（52）打開“素材”文件中“7.jpg”文件，并將其移動(dòng)到相應(yīng)的位置。（53）新建文字圖層，輸入以下文字，在字符面板中設(shè)置文字屬性為字體宋體、12px、#191717。復(fù)制組“站內(nèi)公告”，將其移動(dòng)到相應(yīng)的位置，更改組名為“行業(yè)動(dòng)態(tài)”。（54）新建文字圖層，輸入以下文字，在字符面板中設(shè)置位置屬性為字體宋體、12px、#bcbbbb。子任務(wù)3：設(shè)計(jì)首頁(yè)主內(nèi)容區(qū)第24頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（55）：復(fù)制“價(jià)格圖層”移動(dòng)到相應(yīng)的位置。新建文字圖層，并在相應(yīng)位置輸入以下文字，設(shè)置字體為宋體、加粗、12.03px，顏色為白色。（56）：在【圖層】面板中新建組，重命名為 “次導(dǎo)航”，如圖2-49所示。（57）：新建文字圖層，在【字符】面板中設(shè)置字體為宋體，14px,顏色為#1C8CBA。輸入“次導(dǎo)航”文字“+返回首頁(yè) +添加收藏 +友情鏈接 +聯(lián)系我們” 。子任務(wù)4：設(shè)計(jì)首頁(yè)頁(yè)尾區(qū)第25頁(yè)/共28頁(yè)商務(wù)網(wǎng)頁(yè)設(shè)計(jì)商務(wù)網(wǎng)頁(yè)設(shè)計(jì) 項(xiàng)目二（58）：新建圖層，使用選框工具畫出“1280px*100px”的選框，填充為“