第二篇：項(xiàng)目實(shí)戰(zhàn)篇任務(wù)2：“英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備2.1設(shè)計(jì)網(wǎng)站LOGO2.1設(shè)計(jì)網(wǎng)站LOGO（1）學(xué)會(huì)使用Photoshop工具設(shè)計(jì)制作網(wǎng)站LOGO。（2）學(xué)會(huì)對(duì)LOGO進(jìn)行美化處理，如特殊文字效果等。（3）能根據(jù)網(wǎng)站的主題自主設(shè)計(jì)LOGO。（4）會(huì)利用文字闡述LOGO設(shè)計(jì)的思想。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述制作“英博特智能科技”企業(yè)網(wǎng)站LOGO，學(xué)會(huì)Photoshop軟件的基本使用，掌握?qǐng)D層、選區(qū)的基本概念，最終完成的企業(yè)網(wǎng)站LOGO的設(shè)計(jì)。2.1設(shè)計(jì)網(wǎng)站LOGO任務(wù)思考（1）使用Photoshop軟件如何繪制同心圓？（2）圖層之間如何設(shè)置水平居中、垂直居中？（3）透明背景的圖片應(yīng)該保存為什么格式？

2.1設(shè)計(jì)網(wǎng)站LOGOLOGO設(shè)計(jì)思想與原則設(shè)計(jì)LOGO的工具LOGO在視覺的品牌傳播和傳達(dá)企業(yè)對(duì)內(nèi)對(duì)外的精神和文化理念方面均起著舉足輕重的作用。2.1設(shè)計(jì)網(wǎng)站LOGOLOGO設(shè)計(jì)思想與原則蘋果公司LOGO的演變LOGO應(yīng)具有代表性的寓意2.1設(shè)計(jì)網(wǎng)站LOGOLOGO設(shè)計(jì)思想與原則LOGO的用色能表達(dá)品牌特性“藍(lán)色巨人”（BigBlue）信任、可靠吉祥、挑戰(zhàn)能量、溫度三大主要用色2.1設(shè)計(jì)網(wǎng)站LOGOLOGO設(shè)計(jì)思想與原則LOGO的字體能反映品牌定位LOGO的字體2.1設(shè)計(jì)網(wǎng)站LOGOLOGO設(shè)計(jì)思想與原則LOGO設(shè)計(jì)常用技巧比例對(duì)比復(fù)制2.1設(shè)計(jì)網(wǎng)站LOGO網(wǎng)站常用圖片格式GIF格式的特點(diǎn)是壓縮比高，磁盤空間占用較少，下載速度快GIF的缺點(diǎn)是不能存儲(chǔ)超過256色的圖像JPEG可以用最少的磁盤空間得到較好的圖像質(zhì)量，文件尺寸較小，下載速度快。PNG是目前保證最不失真的格式，它存儲(chǔ)形式豐富，兼有GIF和JPEG的色彩模式；能把圖像文件壓縮到極限以利于網(wǎng)絡(luò)傳輸，但又能保留所有與圖像品質(zhì)有關(guān)的信息，顯示速度快，支持透明圖像的制作JPEGGIFPNG2.1設(shè)計(jì)網(wǎng)站LOGO任務(wù)實(shí)施制作LOGO02.保存文檔03.01.新建文檔具體要求見任務(wù)書2.1設(shè)計(jì)網(wǎng)站LOGO討論區(qū)運(yùn)用所學(xué)知識(shí)，完成英博特網(wǎng)站LOGO的制作，截圖上傳討論區(qū)。2.1設(shè)計(jì)網(wǎng)站LOGO完成5個(gè)在線測(cè)試題運(yùn)用本課學(xué)習(xí)的技術(shù)，根據(jù)自選主題的網(wǎng)站項(xiàng)目策劃書，設(shè)計(jì)網(wǎng)站LOGO，并使用Photoshop軟件完成LOGO的制作。（詳見能力拓展）。2.1設(shè)計(jì)網(wǎng)站LOGO學(xué)習(xí)從來無捷徑，循序漸進(jìn)登高峰。Web前端技術(shù)基礎(chǔ)高永祚第二篇：項(xiàng)目實(shí)戰(zhàn)篇任務(wù)2：“英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備2.2加工圖像素材2.2設(shè)計(jì)加工圖像素材（1）進(jìn)一步理解Web圖像格式（GIF、JPEG、PNG）。（2）學(xué)會(huì)批量處理圖像（如更改圖像大?。＃?）學(xué)會(huì)去除圖片上的水印。（4）學(xué)會(huì)調(diào)整圖像屬性（如亮度/對(duì)比度、色相/飽和度、色階、曲線等）。（5）學(xué)會(huì)美化加工圖像。（6）學(xué)會(huì)應(yīng)用特殊文字。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述為“英博特智能科技”企業(yè)網(wǎng)站加工圖像素材，熟練掌握Photoshop軟件的使用，學(xué)會(huì)批量更改圖像大小，去除圖片上的水印，調(diào)整圖像屬性，改變圖像的背景顏色，使用圖層蒙版合成圖像，應(yīng)用特殊文字等。2.2加工圖像素材任務(wù)思考（1）Photoshop中如何在不改變?cè)瓐D層的基礎(chǔ)上調(diào)整圖像屬性？（2）Photoshop中有哪些方法可以完成摳圖？（3）Photoshop中常用的圖層樣式有哪些？2.2加工圖像素材任務(wù)實(shí)施01.批量處理圖像2.2加工圖像素材動(dòng)作具體要求見任務(wù)書討論區(qū)請(qǐng)對(duì)提供的before文件夾中的圖片進(jìn)行批量裁剪大小的處理，處理的圖片放在after文件夾中，并截圖上傳討論區(qū)：2.2.1批量處理圖片。2.2加工圖像素材任務(wù)實(shí)施02.去除圖片水印2.2加工圖像素材具體要求見任務(wù)書去除水印后“內(nèi)容感知移動(dòng)工具”討論區(qū)請(qǐng)對(duì)提供素材圖片進(jìn)行去除水印處理，并截圖上傳討論區(qū)：2.2.2去除圖片水印。2.2加工圖像素材任務(wù)實(shí)施03.調(diào)整圖像屬性2.2加工圖像素材具體要求見任務(wù)書調(diào)整亮度/對(duì)比度“調(diào)整亮度/對(duì)比度”、“調(diào)整色相/飽和度”、“使用“色階”功能”討論區(qū)請(qǐng)對(duì)提供素材圖片進(jìn)行調(diào)色處理，并截圖上傳討論區(qū)：2.2.3調(diào)整圖像屬性。2.2加工圖像素材任務(wù)實(shí)施04.美化加工圖像2.2加工圖像素材具體要求見任務(wù)書改變圖像背景“魔棒工具”、“鋼筆工具”鋼筆工具摳圖討論區(qū)請(qǐng)運(yùn)用“魔棒工具”和“鋼筆工具”對(duì)提供素材圖片美化處理，并截圖上傳討論區(qū)：2.2.4美化加工圖像。2.2加工圖像素材任務(wù)實(shí)施05.應(yīng)用特殊文字2.2加工圖像素材具體要求見任務(wù)書方正小標(biāo)宋簡(jiǎn)體討論區(qū)請(qǐng)參照效果圖進(jìn)行制作，并截圖上傳討論區(qū)：2.2.5應(yīng)用特殊文字。2.2加工圖像素材完成5個(gè)在線測(cè)試題運(yùn)用本課學(xué)習(xí)的技術(shù)，根據(jù)自選的網(wǎng)站主題完成網(wǎng)站圖像素材的加工，并將加工前后對(duì)比效果粘貼在功能表中。（詳見能力拓展）。2.2加工圖像素材千教萬教教人求真，千學(xué)萬學(xué)學(xué)做真人。Web前端技術(shù)基礎(chǔ)陶行知第二篇：項(xiàng)目實(shí)戰(zhàn)篇任務(wù)2：“英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備2.3設(shè)計(jì)網(wǎng)站首頁效果圖2.3設(shè)計(jì)網(wǎng)站首頁效果圖（1）能合理布局使網(wǎng)頁內(nèi)容的分布主次分明，便于操作。（2）能合理運(yùn)用色彩搭配，滿足客戶的需求。（3）能熟練使用Photoshop軟件創(chuàng)作網(wǎng)頁界面。（4）培養(yǎng)藝術(shù)欣賞能力。（5）培養(yǎng)權(quán)益意識(shí)。（6）培養(yǎng)協(xié)作能力和交流能力。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述“英博特智能科技”企業(yè)網(wǎng)站的首頁包括LOGO、導(dǎo)航、banner、公司優(yōu)勢(shì)、關(guān)于我們、服務(wù)范圍、產(chǎn)品展示、案例展示、新聞中心、合作伙伴及版權(quán)幾個(gè)部分。2.3設(shè)計(jì)網(wǎng)站首頁效果圖任務(wù)思考（1）目前最常見的PC端屏幕分辨率是多少？（2）Photoshop中圖像大小和畫布大小的區(qū)別？（3）Photoshop中如何增加畫布的高度？2.3設(shè)計(jì)網(wǎng)站首頁效果圖頁面大小2.3設(shè)計(jì)網(wǎng)站首頁效果圖屏幕分辨率（px）安全寬度范圍（px）推薦值寬度（px）高度（px）1024×768980-10029805481280×8001190-120011905801366×7681200-133112005481440×9001200-1405120010801200-1405120016001689-188516891220安全寬度請(qǐng)創(chuàng)建名為“英博特智能科技”網(wǎng)站首頁效果圖的PSD源文件。規(guī)劃首頁內(nèi)容根據(jù)本篇任務(wù)1中完成的策劃書，可以得到首頁規(guī)劃的具體內(nèi)容：LOGO、導(dǎo)航、banner、內(nèi)容塊（公司優(yōu)勢(shì)、關(guān)于我們、服務(wù)范圍、產(chǎn)品展示、案例展示、新聞中心、合作伙伴）以及版權(quán)等幾個(gè)部分。2.3設(shè)計(jì)網(wǎng)站首頁效果圖Navigation導(dǎo)航Header頭部區(qū)域、頁頭BodyPageTitleBreadcrumbNavigationPagingNavigationPageTitle內(nèi)容主體（包含了下面的常用元素）頁面標(biāo)題面包屑導(dǎo)航分頁頁面標(biāo)題Footer底部區(qū)域、頁腳LogoorIdentity網(wǎng)站標(biāo)識(shí)、網(wǎng)站名稱Copyright版權(quán)聲明、版權(quán)信息區(qū)域Banner橫幅區(qū)、由符號(hào)、圖形、口號(hào)、材質(zhì)等元素組合而成設(shè)計(jì)首頁版式在Photoshop中使用參考線對(duì)頁面進(jìn)行劃分，分成上部、中部、底部，中部又分成七個(gè)內(nèi)容塊，其中服務(wù)范圍、產(chǎn)品展示、案例展示內(nèi)容塊均分為三列，可設(shè)置每列“382像素”，列間距“17像素”。在設(shè)計(jì)頁面草稿圖時(shí)應(yīng)該同時(shí)考慮每個(gè)模塊打算放什么內(nèi)容，占多大比例等，比例可以參考三分之一法則（簡(jiǎn)化的黃金比例）來分配每個(gè)模塊2.3設(shè)計(jì)網(wǎng)站首頁效果圖確定配色方案“英博特智能科技”網(wǎng)站采用的是暖色調(diào)黃色（#FEC502），配合灰白輔助色。2.3設(shè)計(jì)網(wǎng)站首頁效果圖單色調(diào)相近色調(diào)互補(bǔ)色調(diào)三重色調(diào)經(jīng)典的配色方案任務(wù)實(shí)施01.設(shè)計(jì)制作首頁上部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“公司優(yōu)勢(shì)”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“關(guān)于我們”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“服務(wù)范圍”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“產(chǎn)品展示”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“案例展示”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“新聞中心”內(nèi)容塊任務(wù)實(shí)施02.設(shè)計(jì)制作首頁中部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖“合作伙伴”內(nèi)容塊任務(wù)實(shí)施03.設(shè)計(jì)制作首頁底部具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖討論區(qū)請(qǐng)完成“英博特智能科技”網(wǎng)站首頁效果圖的設(shè)計(jì)與制作，并截圖上傳討論區(qū)。2.3設(shè)計(jì)網(wǎng)站首頁效果圖任務(wù)實(shí)施04.以首頁為模板制作子頁效果具體要求見任務(wù)書2.3設(shè)計(jì)網(wǎng)站首頁效果圖討論區(qū)請(qǐng)完成“英博特智能科技”網(wǎng)站子頁效果圖的設(shè)計(jì)與制作，并截圖上傳討論區(qū)。2.3設(shè)計(jì)網(wǎng)站首頁效果圖完成5個(gè)在線測(cè)試題運(yùn)用本課學(xué)習(xí)的技術(shù)，根據(jù)網(wǎng)站項(xiàng)目策劃書，完成主題網(wǎng)站首頁及子頁效果圖的設(shè)計(jì)制作。（詳見能力拓展）。2.3設(shè)計(jì)網(wǎng)站首頁效果圖只要還有什么東西不知道，就永遠(yuǎn)應(yīng)當(dāng)學(xué)習(xí)。Web前端技術(shù)基礎(chǔ)小塞涅卡（古羅馬哲學(xué)家）第二篇：項(xiàng)目實(shí)戰(zhàn)篇任務(wù)2：“英博特智能科技”企業(yè)網(wǎng)站開發(fā)準(zhǔn)備2.4裁切網(wǎng)站首頁效果圖2.4裁切網(wǎng)站首頁效果圖（1）熟練使用Photoshop軟件裁切網(wǎng)頁效果圖。（2）掌握創(chuàng)建和編輯切片的方法。能力要求學(xué)習(xí)導(dǎo)覽任務(wù)概述在Photoshop中將“英博特智能科技”企業(yè)網(wǎng)站首頁設(shè)計(jì)圖進(jìn)行裁切，獲取網(wǎng)頁制作的圖片素材文件2.4裁切網(wǎng)站首頁效果圖任務(wù)思考（1）Photoshop切片工具的作用？（2）純色背景需要?jiǎng)?chuàng)建切片嗎？（3）切片的原則有哪些？2.4裁切網(wǎng)站首頁效果圖切片作用2.4裁切網(wǎng)站首頁效果圖切片可以使整個(gè)圖片分為多個(gè)不同的小圖片分開下載，這樣下載的時(shí)間就大大地縮短了，能夠節(jié)約很多時(shí)間。切片可以優(yōu)化圖像。對(duì)于作為切片的各幅小圖片就可以分別對(duì)其優(yōu)化，并根據(jù)各幅切片的情況還可以存為不同的文件格式。切片原則2.4裁切網(wǎng)站首頁效果圖（1）切片是使用HTML+CSS實(shí)現(xiàn)網(wǎng)頁布局的依據(jù)，切片的過程要先總體后局部，即先把網(wǎng)頁整體切分成幾個(gè)大部分，再細(xì)切其中的小部分。（2）沒有使用特殊文字效果的網(wǎng)頁正文不需要切，可以直接使用HTML代碼來實(shí)現(xiàn)。（3）裁切的時(shí)候要注意平衡，比如右側(cè)裁切了，那么左側(cè)也要等高地裁切一下。（4）純色背景和線型邊框線不需要切片，可以直接由CSS代碼實(shí)現(xiàn)。（5）如果某個(gè)對(duì)象的范圍正好是要裁切的大小，可以直接使用“新建基于圖層的切片”功能。（6）如果區(qū)域面積不大，可以不進(jìn)行細(xì)致劃分，只需將其整體裁切即可。（7）如果圖片上面不需要添加文字，也就沒有必要將其作為背景圖案，直接作為圖片處理即可。切片種類（1）用戶切片：使用切片工具創(chuàng)建的切片。（2）基于圖層的切片：從圖層創(chuàng)建的切片。（3）自動(dòng)切片：創(chuàng)建新的用戶切片或基于圖層的切片時(shí)，將生成占據(jù)圖像其余區(qū)域的附加切片