規(guī)劃動態(tài)網(wǎng)站學習單元課件1

1、學習單元一規(guī)劃靜態(tài)網(wǎng)站學習單元一規(guī)劃靜態(tài)網(wǎng)站工作描述網(wǎng)站規(guī)劃設(shè)計的基本的流程：首先，要認真解讀網(wǎng)站項目策劃書，了解客戶的背景、網(wǎng)站的定位、網(wǎng)站的結(jié)構(gòu)以及網(wǎng)站的主要內(nèi)容，獲取全面資料；其次，與客戶的進一步溝通交流，確定網(wǎng)站的設(shè)計風格、網(wǎng)站的頁面版式布局，細化頁面元素（文字、圖片）的呈現(xiàn)形式，撰寫網(wǎng)站整體設(shè)計說明書；最后，使用圖像處理軟件進行繪制，具體呈現(xiàn)出高保真的網(wǎng)站美工效果圖（PSD文件），呈交給客戶。工作描述網(wǎng)站規(guī)劃設(shè)計的基本的流程：首先，要認真解讀網(wǎng)站項目目錄任務(wù)一 解讀靜態(tài)網(wǎng)站策劃書任務(wù)二 撰寫網(wǎng)站整體設(shè)計說明書任務(wù)三 繪制靜態(tài)網(wǎng)站頁面效果圖目錄任務(wù)一 解讀靜態(tài)網(wǎng)站策劃書任務(wù)二 撰寫網(wǎng)站

2、整體設(shè)計說明書任務(wù)一 解讀靜態(tài)網(wǎng)站策劃書為了更好地理解客戶的需求，美工在策劃師的協(xié)助下，認真解讀策劃書，了解客戶的經(jīng)營理念和發(fā)展背景，進一步對網(wǎng)站的風格進行了定位，了解網(wǎng)站的功能，確定網(wǎng)站的設(shè)計結(jié)構(gòu)，并依此規(guī)劃網(wǎng)站的設(shè)計內(nèi)容。解讀網(wǎng)站策劃書的具體流程如圖所示：任務(wù)一 解讀靜態(tài)網(wǎng)站策劃書為了更好地理解客戶的需求，美工在策網(wǎng)站策劃書的基本構(gòu)成文本文本文本文本文本文本文本文本網(wǎng)站策劃書的基本構(gòu)成文本文本文本文本文本文本文本文本任務(wù)實施1、了解客戶的背景信息公司組織架構(gòu)了解客戶需求任務(wù)實施1、了解客戶的背景信息公司組織架構(gòu)了解客戶需求2.了解網(wǎng)站定位2.了解網(wǎng)站定位3了解網(wǎng)站結(jié)構(gòu)設(shè)計網(wǎng)站的結(jié)構(gòu)設(shè)計是體

3、現(xiàn)內(nèi)容設(shè)計與創(chuàng)意設(shè)計的關(guān)鍵環(huán)節(jié)。北京緣藝花卉有限公司的結(jié)構(gòu)設(shè)計如圖所示。該結(jié)構(gòu)設(shè)計采用最簡單的組織結(jié)構(gòu)方式，將導航和內(nèi)容結(jié)合在一起，從而構(gòu)成了整個網(wǎng)站的結(jié)構(gòu)體系。3了解網(wǎng)站結(jié)構(gòu)設(shè)計網(wǎng)站的結(jié)構(gòu)設(shè)計是體現(xiàn)內(nèi)容設(shè)計與創(chuàng)意設(shè)計的4了解網(wǎng)站內(nèi)容規(guī)劃產(chǎn)品的分類與網(wǎng)站中產(chǎn)品相關(guān)欄目的設(shè)置有直接的關(guān)系，對產(chǎn)品相關(guān)頁面的布局也會有很大的影響?？蛻艄井a(chǎn)品系列4了解網(wǎng)站內(nèi)容規(guī)劃產(chǎn)品的分類與網(wǎng)站中產(chǎn)品相關(guān)欄目的設(shè)置有直1、列表形式根據(jù)客戶公司的產(chǎn)品分類，頁面設(shè)計中就會有很多的實現(xiàn)方法。1、列表形式根據(jù)客戶公司的產(chǎn)品分類，2、橫排形式2、橫排形式 通過閱讀本策劃書，發(fā)現(xiàn)還缺少企業(yè)聯(lián)系方式、企業(yè)的logo、域名信息、備

4、案信息等介紹性資料，以及成功案例、服務(wù)項目說明、相關(guān)圖片等業(yè)務(wù)性資料。為此，美工將需要客戶提供的資料，形成列表文檔，如資料列表所示。美工將根據(jù)網(wǎng)站建設(shè)進度，向用戶索要相關(guān)的資料。 通過閱讀本策劃書，發(fā)現(xiàn)還缺少企業(yè)聯(lián)系方式、企業(yè)的lo5了解網(wǎng)站建設(shè)進度計劃按照網(wǎng)站建設(shè)的項目流程，北京緣藝花卉有限公司網(wǎng)站的制作進度計劃如圖所示。5了解網(wǎng)站建設(shè)進度計劃按照網(wǎng)站建設(shè)的項目流程，北京緣藝花卉任務(wù)二 撰寫網(wǎng)站整體設(shè)計說明書任務(wù)描述：在策劃師的幫助下，美工完成了網(wǎng)站策劃書的解讀，了解到客戶需求以及網(wǎng)站策劃書所表達的設(shè)計思想，現(xiàn)要根據(jù)網(wǎng)站的功能確定網(wǎng)站的鏈接結(jié)構(gòu)，根據(jù)網(wǎng)站的風格確定網(wǎng)站的版式和色彩。經(jīng)與客戶反

5、復溝通交流后，將最終的設(shè)計方案和設(shè)計思想以文字的形式記錄到網(wǎng)站整體設(shè)計說明文檔中，交予客戶，雙方在網(wǎng)站整體設(shè)計說明書文檔上簽字確認。任務(wù)二 撰寫網(wǎng)站整體設(shè)計說明書任務(wù)描述：任務(wù)分析： 靜態(tài)網(wǎng)站網(wǎng)站整體設(shè)計說明書的編寫將從以下幾個方面開展工作 1.網(wǎng)站整體設(shè)計風格 2.網(wǎng)站版式布局：首先以不同色塊設(shè)計頁面的版式草圖，然后使用框線圖具體呈現(xiàn)頁面內(nèi)容。 3.網(wǎng)站配色方案：包括主色調(diào)和輔助色。 4.網(wǎng)站視覺元素設(shè)計：文字（標題文字、正文）的字體、字號以及圖片的規(guī)格等任務(wù)分析：任務(wù)實施：1、確定網(wǎng)頁版式布局，繪制線框圖通常，一個網(wǎng)站的頁面是由頁面頂部、頁面主體和頁面底部三部分構(gòu)成，如圖所示：任務(wù)實施：1

6、、確定網(wǎng)頁版式布局，繪制線框圖通常，一個網(wǎng)站的頁頁面頂部【Head】一般，在企業(yè)形象宣傳類網(wǎng)站的頁面頂部會放置右圖的內(nèi)容。頁面頂部【Head】一般，在企業(yè)形象宣傳類網(wǎng)站的頁面頂部會放頁面主體【BODY】 美工在設(shè)計版式時，要注意把握整體布局，將重點版塊放在突出位置，同時要注意各版塊之間大小和色彩的平衡。對于所放內(nèi)容在頁面中的位置，應按照其內(nèi)容的重要程度，結(jié)合人的視覺流程來確定?？紤]到大多數(shù)人的閱讀習慣是按照從上到下、從左到右的方向，所以重要的內(nèi)容一般安排的頁面的左上位置。頁面主體【BODY】 美工在設(shè)計版式時，要注意把握整體頁面底部通常用來標注網(wǎng)站所屬公司的名稱、地址、網(wǎng)站版權(quán)信息、備案信息和

7、郵件地址等。使瀏覽者能夠從中了解到該站點所有者的一些基本情況，如圖所示。頁面底部【Footer】頁面底部通常用來標注網(wǎng)站所屬公司的名稱、地址、網(wǎng)站版權(quán)信息、至此，網(wǎng)站頁面的版式草圖已經(jīng)形成，網(wǎng)站版式布局規(guī)劃設(shè)計完畢至此，網(wǎng)站頁面的版式草圖已經(jīng)形成，網(wǎng)站版式布局規(guī)劃設(shè)計完畢 通過首頁線框圖，再根據(jù)客戶需求進行進一步的細化，美工還需要標明首頁各部分的尺寸。 通過首頁線框圖，再根據(jù)客戶需求進行進一步的細2、確定網(wǎng)頁色彩方案 客戶公司所屬的行業(yè)類型為農(nóng)業(yè)、種植業(yè)，網(wǎng)站應力求體現(xiàn)出健康、自然和清爽，有生機、有活力 - 在色調(diào)方面綠色是最好的選擇，能給人以青春和活力，使人聯(lián)想設(shè)計想到自然界的植物。 2、確

8、定網(wǎng)頁色彩方案 客戶公司所屬的行業(yè)類型為農(nóng)業(yè)、種3、網(wǎng)站視覺元素設(shè)計網(wǎng)站視覺元素包括文字、圖片、表單、列表、多媒體等等，是網(wǎng)站外觀設(shè)計的組成部分，服從于網(wǎng)站的整體風格需要。在北京緣藝花卉有限公司網(wǎng)站的頁面字體選取上，考慮到流行性、通用性，將導航文字選用了網(wǎng)頁上流行使用的微軟雅黑字體，因為是標題文字，字號設(shè)置為14像素，便于導航文字的閱讀，文字顏色配合網(wǎng)站顏色選擇了深綠色（#128500）。正文文字使用了系統(tǒng)默認的宋體，字號為12像素，文字顏色為黑色.3、網(wǎng)站視覺元素設(shè)計網(wǎng)站視覺元素包括文字、圖片、表單、列表、4、確定網(wǎng)站鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是頁面間鏈接關(guān)系的結(jié)構(gòu)，反映了頁面間的層次關(guān)系，也稱

9、為網(wǎng)站的邏輯結(jié)構(gòu)。邏輯結(jié)構(gòu)設(shè)計的目的在于合理使用鏈接、提高導航效率。一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式： 樹狀鏈接結(jié)構(gòu)（一對一），這類似DOS的目錄結(jié)構(gòu)，星狀鏈接結(jié)構(gòu)（一對多），類似網(wǎng)絡(luò)服務(wù)器的鏈接。4、確定網(wǎng)站鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是頁面間鏈接關(guān)系的結(jié)構(gòu)，反任務(wù)三 繪制靜態(tài)網(wǎng)站頁面效果圖子任務(wù)1：繪制網(wǎng)站首頁效果圖 任務(wù)描述： 本任務(wù)是靜態(tài)企業(yè)網(wǎng)站項目“緣藝花卉公司”的首頁頁面設(shè)計，使用Photoshop中的基本繪圖工具完成線條簡潔、布局規(guī)整的頁面繪制，要求能擴大公司的宣傳，樹立公司的企業(yè)形象，體現(xiàn)出公司的業(yè)務(wù)職能，頁面的整體設(shè)計要能表現(xiàn)出園藝行業(yè)的清爽感。任務(wù)分析： 網(wǎng)站首頁效果圖將

10、按照頁面頂部、頁面主體和頁面底部三大版塊進行繪制。任務(wù)三 繪制靜態(tài)網(wǎng)站頁面效果圖子任務(wù)1：繪制網(wǎng)站首頁效果圖 1、頁面頂部：網(wǎng)站標識Logo（客戶提供）、網(wǎng)站Banner、網(wǎng)站導航網(wǎng)站標識Logo： 花朵般的網(wǎng)站LOGO很放置在頁面的左上角，突出主題，不經(jīng)意間點綴了畫面，與Banner畫面和諧自然地融合到一起。網(wǎng)站Banner： 北京緣藝花卉有限公司的產(chǎn)品是花卉、綠植，客戶希望網(wǎng)站Banner廣告能呈現(xiàn)出一幅唯美的自然田園風光，給人以清新、寧靜、生機盎然的感覺。為此我們進行了如下的創(chuàng)意構(gòu)思：在綠葉的掩映下，一條小路蜿蜒而去，路旁是一望無邊的茵茵綠草地，座落于小路盡頭的是一座被彩虹環(huán)繞著的古堡。

11、網(wǎng)站導航： 北京緣藝花卉有限公司網(wǎng)站的頻道導航不多，為了與Banner渾然一體、過渡自然，考慮將網(wǎng)站橫向水平導航與網(wǎng)站Banner交錯、疊加在一起，設(shè)計成立體地面的感覺。2、頁面主體：服務(wù)項目、產(chǎn)品展示、聯(lián)系我們、成功案例3、頁面底部：版權(quán)信息1、頁面頂部：網(wǎng)站標識Logo（客戶提供）、網(wǎng)站Banner任務(wù)實施：一、準備繪制1. 啟動Photoshop CS3軟件，執(zhí)行“文件”“新建”命令，按照網(wǎng)站整體設(shè)計說明書中對頁面尺寸的約束要求，新建寬度為1000像素、高度為800像素的文件，分辨率為72像素/英寸，RGB顏色模式，如圖所示。行業(yè)經(jīng)驗：圖片分辨率的選擇 圖片的分辨率不是越高越好，這與圖片

12、的用途相關(guān)，一般的屏幕上顯示的圖片，分辨率為72PPI就足夠了，需要打印輸出的圖片，分辨率應在300PPI以上。任務(wù)實施：一、準備繪制2. 參考標注尺寸的首頁結(jié)構(gòu)圖，如圖所示，添加標尺和參考線，進行頁面布局。2. 參考標注尺寸的首頁結(jié)構(gòu)圖，如圖所示，添加標尺和參考線，選擇“視圖”菜單 “標尺”命令，顯示出標尺，如下左圖所示。操作技巧：精確設(shè)置參考線選擇“視圖”菜單“新建參考線”命令，精準輸入數(shù)值，如圖下所示。選擇“視圖”菜單 “標尺”命令，顯示出標尺，如下左圖所示。參考網(wǎng)頁版式布局圖上的數(shù)據(jù)，新建參考線。將頁面劃分為頁面頂部、頁面主體和頁面底部，頁面主體又分成左右兩部分，如圖所示。操作技巧：編

13、輯參考線移動參考線：使用工具箱中的“移動工具”，可以拖拽參考線到所需的位置。刪除參考線：使用工具箱中的“移動工具”，將參考線拖出圖像窗口之外，如果要刪除所有參考線，可以選擇“視圖”菜單“清除參考線”。鎖定參考線：鎖定參考線，使其不能被移動，只需選擇“視圖”菜單“鎖定參考線”命令。隱藏參考線：選擇“視圖”菜單“顯示”“參考線”命令。參考網(wǎng)頁版式布局圖上的數(shù)據(jù)，新建參考線。將頁面劃分為頁面頂部3. 創(chuàng)建圖層組，分類管理按照頁面結(jié)構(gòu)圖，如左圖所示，構(gòu)建圖層組結(jié)構(gòu)，如右圖所示。3. 創(chuàng)建圖層組，分類管理按照頁面結(jié)構(gòu)圖，如左圖所示，構(gòu)建二、設(shè)計制作網(wǎng)站Banner 按照網(wǎng)站BANNER的構(gòu)思設(shè)想，在網(wǎng)絡(luò)

14、的素材庫中收集所需的各種格式素材，并根據(jù)圖片的特點，選擇適合的摳像工具（魔棒工具、快速選擇工具），提取素材圖片中所需的元素。1. 將素材放入文件 選擇“文件” “置入”命令我使用的PS內(nèi)沒有此功能，請老師核實。（PS CS3、CS4都有此功能），單擊“進行變換”按鈕，將田間小路的素材置入畫布中，素材圖片作為智能對象存放在自動生成的新圖層中。將此圖層命名為“田間小路”，并將圖層放置于“頁面頂部”圖層組中。右鍵該圖層，選中“柵格化圖層”命令將素材圖層轉(zhuǎn)化為常規(guī)圖層，如圖所示。二、設(shè)計制作網(wǎng)站Banner 按照網(wǎng)站BANNER的構(gòu)選用工具箱中的“快速選擇工具”，將草地以外的藍天區(qū)域選中，按Delet

15、e鍵刪除，按Ctrl+D取消選區(qū)。使用“移動工具”，拖拽圖像到指定的位置，效果如圖所示。選用工具箱中的“快速選擇工具”，將草地以外的藍天區(qū)域選中，按2.運用同樣的方法，將樹葉素材置入畫布中，選用工具箱中的“魔棒工具”，設(shè)置容差值，如圖所示。將樹葉的白色背景選中，按Delete鍵刪除，再按Ctrl+D取消選區(qū)，如圖所示。選用帶露珠的樹葉，是為了更好呈現(xiàn)花卉鮮活的生命力。2.運用同樣的方法，將樹葉素材置入畫布中，選用工具箱中的“魔背景效果布局，使用“移動工具”，拖拽圖像到指定的位置，如圖所示。背景效果布局，使用“移動工具”，拖拽圖像到指定的位置，如圖所3.運用同樣的方法，將古堡素材、鮮花素材、盆栽

16、素材、樹叢素材等以及網(wǎng)站LOGO置入畫布中，使用“移動工具”，拖拽圖像到指定的位置。調(diào)整古堡圖層和草地圖層的上下順序，讓古堡在后方出現(xiàn)，如圖所示。3.運用同樣的方法，將古堡素材、鮮花素材、盆栽素材、樹叢素材4.制作網(wǎng)站宣傳標語。 利用橫排文字工具輸入網(wǎng)站宣傳語“以花卉服務(wù)客戶，為客戶建立溫馨協(xié)調(diào)的綠色環(huán)境，打造花卉文化！”，設(shè)置文字的字體為“華文新魏”、字體大小為24點，文字顏色為白色（#FFFFFF），如圖所示。 為了使輸入的文字與圖片更好的融為一體，考慮給文字增加一些效果，由于宣傳標語的字數(shù)比較多，又要保持文字圖層可編輯，因此決定利用圖層樣式為文字添加效果。 選中文字圖層，單擊圖層調(diào)板下方

17、的“添加圖層樣式”按鈕，如右圖所示。4.制作網(wǎng)站宣傳標語。 利用橫排文字工具輸入網(wǎng)站宣傳語添加圖層樣式中的描邊和投影，設(shè)置參數(shù)如圖所示。添加圖層樣式中的描邊和投影，設(shè)置參數(shù)如圖所示。最終的完成效果，如圖所示：最終的完成效果，如圖所示：三、設(shè)計制作網(wǎng)站導航1. 單擊圖層面板上的“創(chuàng)建新圖層”按鈕新建一個圖層，選擇工具箱中的“圓角矩形工具”，如圖所示。在屬性欄中選擇“路徑”，設(shè)置圓角的半徑為15px，拖拽鼠標繪制大小為900300像素的圓角矩形，按轉(zhuǎn)化為選區(qū)，按填充任意前景色。按Ctrl+T工具進行自由變形，可以來調(diào)整導航欄的大小。三、設(shè)計制作網(wǎng)站導航1. 單擊圖層面板上的“創(chuàng)建新圖層”按鈕2.添

18、加圖層樣式美化導航欄。單擊“圖層”面板底部的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，然后在打開的“漸變疊加”面板中設(shè)置漸變的顏色從#e5e5e5到#ffffff，樣式為線性，如圖漸變疊加所示。2.添加圖層樣式美化導航欄。單擊“圖層”面板底部的“添加圖層單擊“圖層”面板底部的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，然后在打開的“描邊”面板中設(shè)置描邊的顏色為#ffffff，描邊大小為2像素，如圖描邊樣式所示。單擊“圖層”面板底部的“添加圖層樣式”按鈕，在彈出的菜單中選3.添加導航文字 使用橫排文字工具，在屬性欄進行設(shè)置，如圖文字設(shè)置所示，設(shè)置字體系列為微軟雅黑，設(shè)置

19、字體大小為14px，設(shè)置文本顏色為#128500，之后分別輸入導航文字“首頁”、“產(chǎn)品展示”、“綠植租擺”、“園林綠化”、“服務(wù)流程”、“成功案例”和“關(guān)于我們”。操作技巧：對齊多個文字。選中所有文字層，在對齊面板上進行設(shè)置，如下圖對齊面板所示。3.添加導航文字 使用橫排文字工具，在屬性欄進行設(shè)置，4.添加文字分割線。新建圖層，選擇“矩形選框工具”，設(shè)置樣式為“固定大小”，寬度1px，高度11px，效果如圖所示。按Ctrl+Alt填充顏色灰色（# cccccc ）， 效果如圖所示。4.添加文字分割線。新建圖層，選擇“矩形選框工具”，設(shè)置樣式操作技巧：復制圖層樣式法1：選中圖層，執(zhí)行“圖層”“圖

20、層樣式”“拷貝圖層樣式”命令，選中要添加圖層樣式的圖層，執(zhí)行“圖層”“圖層樣式”“粘貼圖層樣式”命令。法2：選中圖層，按住ALT鍵不放，將圖層樣式拖動到另一圖層上。5、制作完所有的Menu部分后，按住shift鍵選擇所有的圖層，移動到“網(wǎng)站導航Menu”圖層組中，并且鎖定這個圖層組，避免編輯。水平導航欄也可以變換出很多效果：【直角邊按鈕水平導航1】1. 繪制導航欄背景。使用矩形工具繪制導航欄，添加圖層樣式中的漸變疊加，參數(shù)設(shè)置如圖所示。2. 制作導航文字。輸入文字，設(shè)置字體為黑體，字號為14點，綠色#009900，添加圖層樣式中的描邊，參數(shù)設(shè)置如圖所示。3. 依次制作完所有的導航按鈕和文字。操

21、作技巧：復制圖層樣式5、制作完所有的Menu部分后，按住s【直角邊按鈕水平導航2】 直角邊按鈕水平導航主要是使用矩形工具繪制直角導航欄背景，使用漸變疊加進行顏色填充，添加白色導航文字，制作鼠標經(jīng)過時變化為黃色圓角背景、綠色文字，效果如圖所示。1. 繪制導航欄背景。使用矩形工具繪制導航欄，添加圖層樣式中的漸變疊加（#339933 - #66cc00）、內(nèi)發(fā)光和描邊（#ccff33）。2. 制作導航文字。輸入文字，設(shè)置字體為黑體，白色#ffffff。3. 制作鼠標經(jīng)過狀態(tài)。新建圖層，使用圓角矩形工具繪制圓角矩形、使用矩形工具繪制矩形，將路徑轉(zhuǎn)換為選區(qū)（ctrl+enter），填充顏色#ccff33

22、，使用選區(qū)工具刪除多余部分，文字顏色改為# 339933。如圖所示?！局苯沁叞粹o水平導航2】 直角邊按鈕水平導航主要是使四、設(shè)計制作網(wǎng)站內(nèi)容區(qū)域1. 選擇“矩形工具”，設(shè)置“形狀圖層”，如圖矩形工具所示。設(shè)置“新圖層顏色”為白色（#ffffff），按參考線進行拖拽，自動生成圖層。給圖層添加“描邊”樣式，設(shè)置描邊的顏色為#99cc66，描邊大小為1像素。同樣的方法，選擇 “矩形工具”繪制服務(wù)項目的區(qū)塊，填充顏色為灰色（#cccccc）。分別輸入服務(wù)項目文字，設(shè)置字體系列為微軟雅黑，設(shè)置字體大小為14px，設(shè)置文本顏色為綠色（#009900）和黑色（#333333）。將欄目標題素材置入畫布中，使用

23、“移動工具”，拖拽圖像到指定的位置，如圖服務(wù)項目所示。四、設(shè)計制作網(wǎng)站內(nèi)容區(qū)域1. 選擇“矩形工具”，設(shè)置“形狀圖2制作完所有的服務(wù)項目部分后，按住shift鍵選擇所有的圖層，移動到“服務(wù)項目”圖層組中，并且鎖定這個圖層組，避免編輯。3同樣的方法，完成“產(chǎn)品展示”部分，如圖“產(chǎn)品展示”所示。按住shift鍵選擇所有的圖層，移動到“產(chǎn)品展示”圖層組中，并且鎖定這個圖層組。2制作完所有的服務(wù)項目部分后，按住shift鍵選擇所有的圖4同樣的方法，完成“聯(lián)系方式”部分后，如圖“聯(lián)系方式”所示。按住shift鍵選擇所有的圖層，移動到“聯(lián)系方式”圖層組中，并且鎖定這個圖層組。5同樣的方法，完成“成功案例”部分，如圖“成功案例”所示，按住shift鍵選擇所有的圖層，移動到“成功案例”圖層組中，并且鎖定這個圖層組。4同樣的方法，完成“聯(lián)系方式”部分后，如圖“聯(lián)系方式”所示整個網(wǎng)頁的繪制也接近了尾聲，如圖效果所示。整個網(wǎng)頁的繪制也接近了尾聲，如圖效果所示。五、設(shè)計制作首頁頁面底部Footer區(qū)域1. 使用矩形工具，選擇形狀圖層選項，繪制尾部區(qū)域，設(shè)置新圖層顏色“#128500”。2. 輸入版權(quán)文字“北京緣藝花卉有限公司版權(quán)所有 copyright2010 ALL Rights Reserved 京ICP備050