數(shù)字圖像處理項目教程-CorelDRAW 資源 課件 項目9

項目9網(wǎng)頁界面設計知識目標：掌握復雜圖形的編輯方法，了解網(wǎng)頁界面設計的基礎常識，了解網(wǎng)頁界面設計的基本流程。技能目標：能根據(jù)客戶的需求，應用該軟件的工具進行網(wǎng)頁界面設計的能力。情感目標：具備較強的自助學習能力、分析與解決問題的能力，具備良好的服務意識和團隊合作協(xié)調精神。機械工業(yè)出版社項目9網(wǎng)頁界面設計項目描述

本項目為地方幼兒園設計網(wǎng)站主頁客戶要求幫助幼兒園建立有效的幼兒形象宣傳、幼兒園風采展示、幼兒園招生宣傳，打造幼兒園新形象，突出幼兒園的特色教育模式；充分利用網(wǎng)絡進行信息傳遞，對幼兒園的新聞進行及時的報道；為幼兒園和學生提供網(wǎng)上開發(fā)平臺，增加系統(tǒng)內(nèi)外信息互通、經(jīng)驗交流；通過網(wǎng)站鏈接可以看到孩子的平時表現(xiàn)（包括用圖片、視頻展示）；通過網(wǎng)站首頁展示幼兒作品等。工作任務任務一：京京幼兒園網(wǎng)站界面設計任務二：樂澄澄幼兒園網(wǎng)站界面設計機械工業(yè)出版社任務1

京京幼兒園網(wǎng)站界面設計任務分析本例網(wǎng)站主題主要表現(xiàn)為清爽、可愛、活潑，網(wǎng)站整體基調主要以淡黃色為主，背景可以搭配木紋色與主基色加以強烈反差，開頭以葉子懸掛，配以藤條、雪糕筒等裝飾物，讓人看上去較穩(wěn)重，內(nèi)文以淡黃色為主，配以各種圖形圖案，點綴亮色色彩，看上充滿調皮、活潑、陽光信息。機械工業(yè)出版社1任務實施主要結合繪圖工具和文字工具的輸入和編輯等命令，完成網(wǎng)站界面設計。京京幼兒園網(wǎng)站界面設計效果圖機械工業(yè)出版社任務1

京京幼兒園網(wǎng)站界面設計1）背景填充木紋效果：繪制頁面矩形框，執(zhí)行工具箱中的【填充工具|圖樣填充】命令，選擇“位圖”，單擊瀏覽導入圖片“底紋.jpg”，寬度為354mm，高度為24mm。2）制作背景頂端裝飾效果：在頁面的頂部繪制葉子，葉子圖形來源于使用“藝術筆工具”，單擊“噴涂”，藝術筆的類別為

。3）在頁面的空白地方繪制得到圖形

，執(zhí)行【排列|拆分藝術筆群組(B)】命令，執(zhí)行CTRL+U取消群組命令，取消圖形的群組，參考圖9-2組合出最終的效果。4）繪制其他裝飾物。機械工業(yè)出版社任務1

京京幼兒園網(wǎng)站界面設計2制作背景操作步驟：任務1

京京幼兒園網(wǎng)站界面設計1）繪制圓角矩形2）制作導航條機械工業(yè)出版社3）制作登陸區(qū)3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計4）繪制如圖圖形使用橢圓工具繪制圖形，并將圖形進行組合，將圖形轉換為曲線，通過調整控制柄得到圖形，填充對應的顏色機械工業(yè)出版社5）繪制如圖圖形使用“貝塞爾工具”繪制圖形，填充對應的顏色。將繪制的圖形參考效果圖放置合適的位置。3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計6）制作“新聞動態(tài)”和“通知公告區(qū)”機械工業(yè)出版社繪制一個圓角矩形框，輪廓色為灰色，無填充色；復制該圓角矩形等比縮小，更改輪廓線型為虛線，輪廓色為粉紅色；在圓角矩形的左上角繪制一個心形，填充顏色（C0M40Y20K0），輸入文字“新聞動態(tài)”，文字填充紅色，輪廓色為白色；在圓角矩形的右上角使用“貝塞爾工具”繪制圖形，填充顏色（C0M40Y20K0），輪廓色為灰色，輸入文字“更多>>”3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計6）制作“新聞動態(tài)”和“通知公告區(qū)”機械工業(yè)出版社在圓角矩形的左下角繪制圖形：圖形來源于使用“藝術筆工具”，單擊“噴涂”，藝術筆的類別為

，在頁面的空白地方繪制得到圖形

，使用選擇工具選擇繪制的圖形，執(zhí)行【排列|拆分藝術筆群組(B)】命令，使用選擇工具選擇繪制的圖形，執(zhí)行CTRL+U取消群組命令，得到圖形

。使用文字工具錄入“新聞動態(tài)的內(nèi)容”。繪制“通知公告”區(qū)3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計7）制作“溫馨提示”、“幼兒作品”區(qū)機械工業(yè)出版社繪制圓角矩形，填充顏色（C0M40Y20K0）；輸入文字“溫馨提示”，字體為“微軟雅黑”，填充顏色為（C0M100Y0K0）。繪制圓角矩形，填充白色，輸入如圖所示的文本。繪制圓角矩形，填充顏色（C0M40Y20K0）；輸入文字“溫馨提示”，字體為“微軟雅黑”，填充顏色為（C0M100Y0K0）。繪制兩個圓角矩形，填充白色，分別置入圖片“作品1.png”、“作品2.png”。3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計8）制作“歡樂時光”區(qū)機械工業(yè)出版社復制部分頁面頂端的葉子圖形置于如圖9-8所示的位置。繪制圓角矩形，填充白色，輪廓色為灰色。在圓角矩形的左上角繪制如圖所示的圖形。在圓角矩形的右上角繪制圓角矩形，填充顏色（C0M40Y20K0），輪廓色為白色，輪廓寬度為2.5mm，輸入文字“歡樂時光”；選擇圖形。在圓角矩形的居中位置置入圖片“作品3.png”。3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計機械工業(yè)出版社9）制作“園長信箱”區(qū)使用【橢圓工具】繪制橢圓，轉換為曲線，并使用【形狀工具】修飾橢圓形的形狀，填充顏色（C31M0Y86K0）。在橢圓圖形上繪制圖案，制作出葉子的效果。使用【貝塞爾工具】繪制樹干，填充漸變色（C6M20Y33K0）-（C15M50Y80K0）-(C46M67Y00K0)3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計機械工業(yè)出版社9）制作“園長信箱”區(qū)將橢圓、葉子、樹干疊放在一起，并調整好順序。繪制下方的草地和花朵。繪制“每周食譜”區(qū)，桌子的顏色為（C10M30Y53K0）。輸入文字“每周食譜”，字體顏色為紅色，使用【輪廓工具】給文字添加輪廓圖，輪廓圖的輪廓色為灰色，填充色為白色，輪廓偏移0.3mm。分別為文字“問卷調查”、“在線報名”、“園長信箱”使用【輪廓工具】給文字添加輪廓圖，設置合適的輪廓色和填充色。3制作正文區(qū)操作步驟：任務1

京京幼兒園網(wǎng)站界面設計10）繪制“友情鏈接區(qū)”機械工業(yè)出版社繪制“友情鏈接區(qū)”：下方的圖形來源于使用“藝術筆工具”，單擊“噴涂”，藝術筆的類別為

，如圖9-10所示。11）繪制“狀態(tài)欄”3制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計任務分析本例網(wǎng)站主題主要表現(xiàn)為陽光、活潑，網(wǎng)站整體基調主要以橙色為主，背景搭配橙色到粉紅色的漸變，左上角裝飾氣球；導航條使用掛牌形式，讓人看上去較穩(wěn)重，添加左側導航條，導航條上放置圖形元素，內(nèi)文裝飾各種圖形圖案，點綴亮色色彩，看上充滿調皮、活潑、陽光信息。機械工業(yè)出版社1任務實施主要結合繪圖工具和文字工具的輸入和編輯等命令，完成網(wǎng)頁界面設計。樂澄澄幼兒園網(wǎng)頁界面設計效果圖機械工業(yè)出版社任務2

樂澄澄幼兒園網(wǎng)頁界面設計任務2

樂澄澄幼兒園網(wǎng)頁界面設計1）繪制一個大的矩形框作為頁面背景，填充漸變色。2）選定背景，執(zhí)行【排列|鎖定對象】菜單命令，將背景圖形鎖定。機械工業(yè)出版社2制作背景操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計1）置入幼兒園的Logo圖片：執(zhí)行“文件”→“導入”菜單命令，導入圖片并將其放置在左上角。2）使用“折線工具”繪制六邊型，填充漸變色為“橘紅色→白色”的漸變，在其中繪制小圓圈，如圖9-14a所示。3）在圖形上方繪制扇形，填充白色，使用透明工具制作如圖9-14b所示的透明效果。4）在圖形頂部繪制掛繩，輪廓色為灰色，如圖9-14c所示，并將該圖形所有對象群組，放置在合適的位置。機械工業(yè)出版社3制作導航條操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計5）制作其他掛牌，顏色分別為“洋紅色→白色”“靛藍色→白色”“深碧藍色→白色”，“酒綠色→白色”“霓虹紫色→白色”的漸變，分別將掛牌放置在合適的位置。6）在掛牌上分別錄入文字“首頁”“家園互動”“圓所介紹”“幼兒保健”“特色展示”“教學教研”，字體為“華文琥珀”。7）調整掛牌角度，效果如圖9-15所示，放置在合適的位置。機械工業(yè)出版社3制作導航條操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社1）使用矩形工具繪制矩形，將左上角的圓角半徑改為5mm，填充黃色，取消輪廓線。2）將第1個圖形、第5個圖形的右下角的圓角半徑改為5mm，得到的效果。3）使用選擇工具選擇繪制的圖形，執(zhí)行【排列|拆分藝術筆群組(B)】命令，鼠標單擊頁面空白地方。4制作左側導航條操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社4）使用選擇工具選擇繪制的圖形，執(zhí)行CTRL+U|取消群組命令，得到圖形

，將圖形移動到合適的位置。5）繪制其他導航條的圖形，效果如圖在導航條上分別錄入文字：在線報名、園長信箱、每周食譜、精彩視頻、友情鏈接6）制作文字效果：比如選定文字“園長信箱”，使用【封套工具】，拖動相應的控點，得到文字效果

。設置好所有對象后移至合適位置，最終效果如圖4制作左側導航條操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社1）制作“溫馨提示”區(qū)繪制長矩形，修改矩形的圓角半徑，使矩形變?yōu)閳A角長條形，將圖形轉換為曲線，在圖形的上方和下方的中心點添加節(jié)點，并單擊“轉換曲線”按鈕，拖動節(jié)點，得到圖形，填充漸變色：（C0M40Y80K0）-白色-（C0M40Y80K0），輪廓線為橙色。效果如制作“發(fā)光”部分：輸入文字“溫馨提示”5制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社2）制作“通知公告”區(qū)使用“貝塞爾工具”繪制圖形，最終效果如圖所示。錄入文字“通知公告”，填充多彩漸變色；使用“封套工具”更改文字的形狀，錄入公告內(nèi)容，效果如圖所示。5制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社3）制作“新聞動態(tài)”區(qū)將“通知公告”區(qū)的圖形復制一份到右側，并在改圖形下方繪制線條和三個長條形，如圖。錄入文字“新聞動態(tài)”，填充多彩漸變色；使用“封套工具”更文字的形狀。使用文字工具錄入新聞動態(tài)內(nèi)容，效果如圖。5制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社4）制作“新班級列表”區(qū)繪制如圖9-22圖形，填充顏色（C0M60Y60K40）。原位復制該圖形，填充雙色漸變色桃黃-白色，漸變類型為輻射，將兩個圖形疊加在一起，調整位置，效果如圖。原位復制圖形，填充顏色（C0M60Y60K40），等比縮放圖形大小，如圖原位復制圖形，填充白色，縮放圖形大小，如圖。輸入文字“班級列表”，字體為華文琥珀，填充黃色，輪廓色為紅色。輸入文字，繪制線條，最終效果如圖5制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社5）制作“幼兒作品”區(qū)繪制圖形，復制3份該圖形，參考樣圖調整大小及位置。繪制長方形，填充白色，放置圖形前面。置入圖片，輸入文字“幼兒作品”，放置合適位置。5制作正文區(qū)操作步驟：任務2

樂澄澄幼兒園網(wǎng)頁界面設計機械工業(yè)出版社1）繪制圖形使用“橢圓工具”繪制如圖9-26所示圖形，填充漸變色。使用“橢圓工具”繪制如圖所示圖形，打開“旋轉”泊塢窗，設置相應參數(shù)，做出如圖所9-26示效果；并將該圖形分布在橢圓上，如圖9-26所示。分別繪制圖形，并將該圖形分布在橢圓上