項目8網頁設計任務8.1學習網頁設計的基礎知識圖形圖像處理技術主要內容01網頁的基本結構02網頁設計的基本原則03網站的分類重點難點12341.明確網頁設計基本結構、原則及分類。2.靈活運用網頁設計原則在具體案例中。3.培養學生賞析意識，提升專業能力。.4.培養學生的家國情懷和中華民族文化素養。知識目標素質目標教學目標技能目標能力目標任務情境

【任務場景】

Photoshop的應用十分廣泛，不僅可以用于修改圖像，而且可以運用圖層、蒙版設計簡單網頁，通過文字排版和網頁優化，可以完成網頁的設計與制作。網頁是用戶訪問網站的界面，是用戶通過網絡獲得信息與資源的手段。

【任務布置】學習網頁設計的結構、基本原則；了解網站的分類并分析不同網站的特點；根據網頁制作的原則，分析在網頁制作過程中需要使用到的Photoshop工具。分析網頁設計的基本結構，包括網站標識、功能區、導航欄、正文內容、附加信息；掌握網頁設計的基本原則，包括網頁整體布局統一、網頁內容連貫、頁面分割合理、內容及色彩既有對比又要做到和諧一致；了解網站的分類及各類網站的特點。8.1.1網頁的基本結構

網站標識由文字、字母、數字、圖案等組成。網站名稱多指網站標識中的文字部分。

網站標識是網站的名稱或網站的特殊標志。網站標識就是網站的名片，可以反映出網站及設計者的相關信息。好的網站標識具有精美、獨特的特點。制作網站標識應注意網站標識與網站整體風格的統一，如圖8-1所示。知識準備1.網站標識圖8-1網站標識8.1.1網頁的基本結構

功能區一般在網頁的頂部，網站種類不同，功能區含有的內容也會有差別。功能區可能包含登錄、注冊或個人信息等內容，如圖8-2所示。知識準備2.功能區圖8-2“中國烹飪協會”官網功能區8.1.1網頁的基本結構

導航欄是指位于網頁頂部或側面區域的一排導航按鈕。導航欄是網站設計中非常重要的元素，它鏈接著整個網站中的各個網頁。導航欄在制作時以文字為主，也可以使用圖形或圖標。進入網站，首先看到的是導航欄，它的功能是幫助用戶在較短的時間內快速、準確地找到所需要的內容，起到一個引導作用。因此導航欄的設置應該符合網站的特點，要求設置合理、簡潔、醒目。按導航欄的分布方向可以分為橫向導航欄和縱向導航欄，如圖8-3和圖8-4所示。知識準備3.導航欄8.1.1網頁的基本結構知識準備3.導航欄圖8-3“中國刺繡網”網站橫向導航欄圖8-4購物網站縱向導航欄8.1.1網頁的基本結構知識準備4.正文內容

正文內容是指網頁中的主體內容，即網頁中展示給用戶的主體信息。正文內容是網頁中的主要元素，一般正文內容并不完整，主要是內容標題或摘要的超鏈接。用戶通過單擊這些超鏈接，才能在網頁中看到正文內容。正文內容一般可以是文字、圖像、視頻和音頻等。8.1.1網頁的基本結構知識準備5.附加信息圖8-5“中國傳統文化網”網頁底部附加信息

附加信息分布在網頁的底部，又被稱為“頁腳”，通常用于介紹網站所有者的具體信息和聯絡方式，如網站地址、聯系方式、版權信息、法律聲明、網站的備案信息、友情鏈接信息、合作伙伴信息等，如圖8-5所示。8.1.1網頁的基本結構知識準備【提示】在網頁中經常會設置一些廣告區。廣告區是網站盈利或自我宣傳的區域，一般位于網頁的頂部或底部。廣告內容可以是文字、圖像、動畫等。在設置廣告區時，既要合理、引人注目，又不能影響網頁的整體布局。8.1.2網頁設計的基本原則知識準備

設計作品的整體效果是至關重要的。布局統一是指設計作品的整體性、一致性，包括風格和色彩兩個方面。在網頁設計時，盡量保持網站的主題顏色、字體、風格等一致性，保證網頁的美觀、和諧。1.整體布局統一8.1.2網頁設計的基本原則知識準備1）風格統一

網頁設計風格統一非常重要，在設計過程中應該保持每個頁面的設計風格基本相同。比如字體大小、標題、子標題、布局和按鈕樣式等在整個網站中要保持一致的風格。在進行網頁設計時應該提前規劃網頁的整體布局，確保網頁設計效果，如圖8-6所示。1.整體布局統一圖8-6“故宮博物院”網站圖案與文字8.1.2網頁設計的基本原則知識準備2）色彩統一

網頁設計既要傳達信息又要符合人們的審美。網頁色彩設計應該遵循“總體協調，局部對比”的原則。網頁色彩搭配合理可以使人心情愉悅，網頁色彩設計在保證色彩生動的同時更應該保證與整體設計相呼應，如圖8-7所示。1.整體布局統一圖8-7旅游網站的網頁色彩8.1.2網頁設計的基本原則知識準備

網頁設計要保持內容連貫。在設計過程中應該注意頁面的相互關系，注意各部分內容在聯系和表現形式上的相互呼應，保持設計風格的一致性，實現視覺上和心理上的連貫。文本是大部分網頁內容的主要呈現形式，也是為用戶提供信息的主要手段。成功的網頁設計不僅僅可以在視覺上吸引用戶，還應該使內容更方便用戶閱讀。網頁內容連貫、造型一致、風格統一、布局合理可以更好地滿足用戶各方面的需求。2.網頁內容連貫8.1.2網頁設計的基本原則知識準備

頁面分割是指將網頁分成若干區域，各區域之間色彩、組成元素、內容等分別體現出各自的特點，用戶使用時可以一目了然。當網頁信息量大時，為了使用戶得到良好的使用體驗，一定要注意對頁面進行有效的分割。

分割不僅是表現形式的需要，也是對于網頁內容的分類歸納。為了使網頁內容能夠更好地呈現在用戶面前，在設計網頁時一定要避免過度堆砌。3.頁面分割合理8.1.2網頁設計的基本原則知識準備

對比是指通過顏色、尺寸、圖像和分區等對比表現矛盾和沖突，使設計更加靈動，富有生氣。在制作網頁過程中，應該靈活準確運用對比手法，對比過強容易破壞網頁的美感，影響用戶感受；對比不夠強烈，達不到想要的視覺沖擊效果。

和諧是指整個網頁和諧統一渾然一體，也指在制作與使用網頁的過程中，維護社會和諧，傳播正能量。成功的網頁設計既有色彩、形狀、線條、文本等的合理搭配，也有結構形式的合理布局，在保證網頁功能的同時，形成的視覺效果與人的心理產生共鳴。網頁設計必須做到內容健康并傳播正確的價值觀，維護網絡世界純凈和諧，如圖8-8所示。4.對比、和諧8.1.2網頁設計的基本原則知識準備4.對比、和諧圖8-8“古典文學網”網站布局【提示】在網頁設計中，應該注意在網頁中適當“留白”。留白是指網頁中不輸入內容的位置，包括頁面分割時各區域之間的界線，也包括為了保證網頁效果設置的空白區域。留白區域根據網頁布局進行設計，如果留白區域過大，則會有一種內容空虛，不夠充實的使用感受；相反，如果留白區域過小，則會給人一種逼仄、緊張的局促感。8.1.3網站的分類知識準備

網站是指將多個網頁系統地進行鏈接而形成的網頁集合。網站可以分為多種類型，根據網站的內容不同，可以將網站分為門戶網站、綜合網站、行業網站、企業網站、娛樂休閑網站、電子商務網站、社交網站等；根據網站的商業用途不同，可以將網站分為營利性網站（如行業網站）和非營利性網站（如學校網站）；根據網站的所有權不同，可以將網站分為個人網站、機構網站、政府網站。

8.1.3網站的分類知識準備

門戶網站是指通向某類綜合性互聯網信息資源并提供有關信息服務的應用系統。門戶網站可以使用特定的程序從互聯網上搜集信息，再對信息進行組織和處理，為用戶提供各類信息資源和與之相對應的信息服務，是用戶了解資訊和各類信息的平臺。門戶網站的內容是多種多樣的，按照信息服務種類劃分，可以分為資訊類門戶網站和搜索類門戶網站兩種類型。比較著名的資訊類門戶網站有騰訊、網易、搜狐、新浪；搜索類門戶網站有百度、中國搜索、谷歌等。雖然不同的門戶網站有著不同的內容和領域，但是都具有功能明確、實時信息傳遞及信息整合的特點。搜索類門戶網站可以為用戶提供強大的搜索引擎，便于用戶搜索信息；而資訊類門戶網站則可以為用戶提供各類新聞資訊。1.門戶網站8.1.3網站的分類知識準備

政府網站是指各級政府為了更好地履行職能，在各部門的信息化建設基礎之上，建立起的跨部門綜合業務應用系統，是政府機關面向社會提供服務，實現政務信息公開、服務企業和社會公眾、互動交流的重要渠道，可以使公民、企業與政府工作人員快速便捷地接入政府部門的政務信息與業務應用，更好地執行政府職能。

從功能上講，中央政府網站向全社會甚至世界展示中國政府形象，向公眾提供法律、法規、規范性政府文件等；地方政府網站是直接面向當地社會公眾，處理與民眾密切相關的事務，為提高政府工作效率、發展地方經濟、改善社會環境服務提供幫助。2.政府網站8.1.3網站的分類知識準備1）企業網站

企業網站作為企業名片，可以展現企業品牌形象、公司產品或公示業務流程、企業資訊新聞、企業信息等內容。完整的企業網站可以成為企業宣傳品牌、展示服務與產品并進行經營活動的平臺，是企業對外開放宣傳、策劃、溝通、交流的窗口。通過企業網站可以展示企業形象、擴大社會影響力、提高企業的知名度。在企業網站的基礎上，融合產品推廣的思維方法，發展線上推廣，可以建設與企業產品相關的營銷推廣網站。2）行業網站

行業網站是介紹某個具體行業的網站，可以為專業人員提供行業動態，反映行業特點。網站主要介紹的是行業的動態信息、產品知識、生產廠家信息、行業新聞等，專業性很強，如食品伙伴網、醫藥網、中國家電網等。3.企業網站與行業網站8.1.3網站的分類知識準備

電子商務是指買賣雙方通過使用電子通信方式進行各種商貿活動。通俗地講，電子商務就是在網上進行商品買賣，購買的對象可以是企業，也可以是消費者。電子商務包括兩方面內容：電子方式和商貿活動。

電子商務網站分公司商城網站和電商網站兩種。公司商城網站是在企業網站的基礎上，添加了商品購買功能，使用戶能夠使用電子設備，完成購買。電商網站包括O2O/B2B/B2C/C2C/分銷商等電子商務種類。電子商務網站可以促進網上銷售市場的發展。4.電子商務網站8.1.3網站的分類知識準備

娛樂休閑網站是以提供娛樂信息和相應的娛樂服務功能為目的建立的網站，是專門從事經營性文化娛樂活動的網絡媒體，可以為用戶提供豐富多彩的娛樂內容，包括音樂、視頻、游戲等娛樂項目的網站，還包括小說網站、視頻網站、音頻網站、游戲網站、社交網站等，這類網站通常色彩鮮艷明快、內容豐富，設計風格輕松活潑，設計要求比較高。5.娛樂休閑網站8.1.3網站的分類知識準備

社交網站是支持用戶通過網絡進行社交的工具，負責人與人之間的溝通，其中社交是目的，網絡是途徑。典型的社交網站包括QQ空間、微信、微博、博客、論壇等，如圖8-9和圖8-10所示。個人網站也屬于社交網站。6.社交網站圖8-9QQ空間圖8-10個人微博8.1.3網站的分類知識準備【提示】個人網站是由個人在網上開通的，可以發布個人信息的網站。個人網站的設計比商業網站的設計自由，設計目的不同，網站的設計也會有很大的差別，個人網站不一定是自己制作的，也不一定很優美、很完善，但設計一定要和諧有個性，一定要以個人信息為主，既可以發表個人見解和觀點，也可以發布個人作品等。本節內容總結1．網頁的基本結構2.網頁設計的基本原則3.網站的分類謝謝！項目8網頁設計任務8.2學習網頁設計流程圖形圖像處理技術主要內容01網頁設計步驟02網頁設計流程重點難點12341.掌握網頁設計的步驟和流程。2.能夠獨立制定網頁設計方案并根據需要整理素材。3.培養學生主動學習，創新設計的能力。.4.培養學生細致工作，愛崗敬業的職業素養。知識目標素質目標教學目標技能目標能力目標任務情境【任務場景】在互聯網高速發展的今天，網絡已經成為人們獲取信息資源的重要途徑。主要信息的獲取離不開網頁，網頁的主要作用是將用戶需要的信息與資源采用一定的手段進行組織，通過網絡呈現給用戶。網站都是由多個網頁構成的，用戶訪問網站的界面是網頁，所以網站設計就是對網站中的每個網頁進行設計。在制作網站時，首先要設計網站的整體布局。任務情境【任務布置】掌握網頁設計步驟，包括網站設計目的分析、確定網頁設計方案、收集制作素材；了解網頁設計的流程，包括設計主題、規劃內部結構、設計版面；掌握網頁的色彩搭配；制定合理的網頁設計方案。8.2.1網頁設計步驟網頁的主要作用是將用戶需要的信息與資源，使用一定的技術手段進行編輯，通過網絡呈現給用戶。由于制作者需要通過網站向使用者提供某些服務，所以網頁設計必須首先明確設計站點的目的和用戶的需求，網頁設計就是根據制作者希望向用戶傳遞的內容（包括產品、服務、理念、信息）進行策劃，并對頁面進行美化，作為網站主體對外宣傳的一種方式。知識準備1．網站設計目的分析8.2.1網頁設計步驟不同類型的網站設計也會有區別，確定將要制作個人網站、企業網站或者門戶網站中的哪一種后，再進行合理規劃，包括明確網站的功能、設計版式類型和確定網站面對的用戶等。知識準備2．確定網頁設計方案8.2.1網頁設計步驟在網頁設計方案確定以后，就可以根據主題和結構的規劃收集素材。素材大致包括:文字、音頻、視頻、動畫、表格、超鏈接、動圖、圖像等。知識準備3．收集素材8.2.1網頁設計步驟做好各項準備工作之后，開始編輯網頁，也就是對收集到的素材進行處理，根據設計要求，將這些文字、圖像、動畫等按照設計好的方案合理安排，組合到網頁中。根據網站類型，面向用戶來設計，網站的版面不宜太過雜亂，一定要簡潔，保證提供良好的用戶體驗。知識準備4．編輯網頁8.2.1網頁設計步驟網頁制作完成后，在發布之前，需要對網頁進行檢查，包括內容的合理性、合法性、科學性和實用性，網頁中鏈接的正確性及網頁整體美觀性等。在網站程序編寫完成后，網站的雛形就形成了，但這時候網站還是不完善的，需要進行測試評估，從用戶的角度去體驗和觀察，逐漸完善和更新網站。網頁設計需要不斷更新換代、推陳出新，應隨時把握最新的設計趨勢，時常更新網頁內容。知識準備5．檢查網頁8.2.2網頁設計流程知識準備無論哪一種類型的網站，在進行網頁設計的時候，都是有計劃并且對計劃不斷完善的過程，大多都遵循“主題—結構—布局—色彩搭配”的基本流程，不同的網頁設計流程也會有差異，如圖8-11所示，即為網頁設計流程中的一種。 圖8-11網頁設計流程圖8.2.2網頁設計流程知識準備網頁設計的首要任務就是確定網站的主題，網站主題取決于網站的應用范圍與建設目的。在明確了網站的應用范圍與建設目的后，即可對網站的整體風格和特色做出定位，設計網站的主題。1．主題設計8.2.2網頁設計流程知識準備在設計網頁之前應該提前規劃好布局樣式，確定文本、按鈕等的字體和顏色，并在開發過程中保持風格一致。網頁設計風格的一致性非常重要，盡量保持每個頁面的設計風格基本相同。網站中的所有圖像、文字，還有背景顏色、分割線、標題、注腳，要統一一致，貫穿整個網站，為用戶提供舒適、友好、簡單的訪問體驗。2．規劃內部結構8.2.2網頁設計流程知識準備網頁是網站構成的基本元素。網頁是否精美的因素不僅包括色彩的搭配、文字的變化、圖片的處理等，還有一個非常重要的因素——網頁的布局。網頁布局就是以最適合用戶瀏覽的方式將素材排放在網頁的不同位置，將用戶需要的內容充分展示出來，通過文字圖形的空間組合，表達出和諧與美感。網頁布局種類包括“國”字型布局、拐角型布局、標題正文布局、封面布局、“T”字型布局、“口”字型布局、對稱對比布局、POP布局。3．版面布局設計8.2.2網頁設計流程知識準備色彩是藝術表現的要素之一。在網頁設計中，根據和諧、均衡和重點突出的原則，可以將不同的色彩進行組合、搭配，根據色彩對人們心理的影響，合理地加以運用，構成漂亮的網頁。為了做到主題鮮明突出，要點明確，將不同的色彩進行組合，使配色和圖片圍繞主題，充分表現網站的個性，使網站更有特點。4．網頁色彩搭配設計本節內容總結1．網頁設計步驟2.網頁設計流程謝謝！項目8網頁設計任務8.3制作“圖書銷售”網站首頁圖形圖像處理技術主要內容01任務解析02制作網頁重點難點12341.了解網頁的設計。2.掌握制作導航欄、分割線及登錄區的方法。3.培養學生綜合運用創意、美學知識設計創新的能力。.4.培養學生健康樂觀的心理素質，使學生懂得奉獻、分享與感恩。知識目標素質目標教學目標技能目標能力目標任務情境【任務場景】在Photoshop中制作網頁，主要制作網頁的框架。網頁中的元素有很多，包括導航條，網頁底部的頁腳設計，網頁主題內容的確定，特效文字的制作，動作按鈕的設計等等。【任務布置】分析要制作的網站在同類網站中的特色和市場定位，確定網站風格；制定設計方案并收集整理素材；制作網頁要素包括背景主題、網頁標題、導航欄及分割線、登錄區、網頁內容和附加信息。8.3.1任務解析網上在線交易是通過網絡去查詢和購買所需商品，使人們有更多的選擇。如今快節奏的生活狀態，使人們減少了去實體店購買商品的時間，新手父母們忙于家務、工作和育兒，繁忙的事務導致他們更喜歡網上購物和交流。知識準備1．分析網站的市場定位8.3.1任務解析網站主題越集中，網站提供信息的質量也會越高；網站內容豐富更受用戶歡迎，在推薦網站時位置也會越靠前。網站風格與主題相適應，更有利于網站的推廣。趣味性是培養兒童學習知識的原動力。根據兒童的生理和心理特點，可以通過有趣的內容調動兒童的積極性，在潛移默化中培養兒童學習知識的興趣。知識準備2．確定網站風格8.3.1任務解析綜合以上的網站風格及市場定位，制定網站的設計方案：為了適應兒童的心理特點，以卡通圖案和艷麗的色彩為主題；確定網站名稱為“寶貝書房”；在網站標識中含有圖書和兒童的元素；設計版面為“國”字型結構布局；對所收集的素材進行裁剪并調整色彩，保證布局的和諧統一。知識準備3．制定設計方案8.3.1任務解析在收集整理素材時應根據已經確定的網站風格進行適當的調整，使圖像素材的色彩、色調與主題相符，使音樂、視頻素材與網站風格一致。知識準備4．收集整理素材8.3.2制作網頁根據任務目的，制作圖書銷售網站首頁，如圖8-12所示。知識準備圖8-12圖書銷售網站首頁效果圖8.3.2制作網頁（1）打開Photoshop，按快捷鍵Ctrl+N或執行“文件”→“新建”命令，在打開的“新建文檔”對話框中設置文檔：名稱為圖書銷售網站背景，寬度為1000像素，高度為600像素，分辨率為72像素，顏色模式為RGB，背景為白色，如圖8-13所示。單擊“創建”按鈕，完成畫布的創建，效果如圖8-14所示。知識準備1．背景主題圖8-13“新建文檔”對話框圖8-14圖書銷售網站背景效果圖8.3.2制作網頁（2）選擇素材文件“8-1.psd”，建立新的圖層。執行“文件”→“置入嵌入的對象”命令，在打開的對話框中選擇素材文件。調整圖像與畫布大小一致。設置圖層：不透明度為30%，填充為50%。使用同樣的方法，選擇素材文件“8-2.psd”建立新的圖層，調整圖層的位置與大小，設置不透明度為80%，填充為70%。知識準備8.3.2制作網頁（3）執行“文件”→“打開”命令，打開素材文件“8-3.psd”，使用“橢圓選框工具”制作橢圓選區，使用“移動工具”將選區移動到文件“圖書銷售網站背景”中，調整選區的大小和位置，建立新圖層；使用同樣的方法，選擇素材文件“8-4.psd”建立新圖層。設置圖層：不透明度為100%，填充為80%。效果如圖8-15所示。知識準備圖8-15背景主題效果圖8.3.2制作網頁（1）設置網頁標題：選擇“橫排文字工具”，在網頁頂端輸入文字“寶貝書房”。設置文字：華文琥珀、60點、抗鋸齒為無、黑色。設置變形文字：扇形、彎曲49%、水平扭曲為13%、垂直扭曲為-59%。知識準備2．網頁標題8.3.2制作網頁（2）設置標題色彩：單擊圖層功能區右下角的“新建圖層”按鈕，建立新圖層“圖層3”。選擇“圖層3”后，選擇“畫筆工具”，設置筆尖大小為60。在屬性欄中打開“畫筆設置”對話框，在左側的畫筆筆尖形狀區域勾選“散布”復選框，設置散布值為1000%，數量為2，如圖8-16所示。知識準備2．網頁標題圖8-16“散布”參數8.3.2制作網頁（2）設置標題色彩：勾選“顏色動態”復選框，并勾選“應用每個筆尖”復選框；設置色相抖動值為100%，飽和度抖動值和亮度值抖動均為10%，如圖8-17所示。選擇兩種顏色，作為前景色和背景色，顏色可以任選，但一定要新鮮艷麗。設置完成后，在“圖層3”中單擊鼠標添加色彩，色彩添加越密集，色彩種類越多，后面的效果越明顯。知識準備2．網頁標題圖8-17“顏色動態”參數8.3.2制作網頁（3）色彩添加完成后，在按住Alt鍵的同時，單擊圖層名稱區域中“圖層3”與“寶貝書房”兩個圖層的中間位置，得到彩色的文字效果，如圖8-18所示。知識準備2．網頁標題圖8-18網頁標題效果圖8.3.2制作網頁知識準備（1）制作導航欄：選擇“矩形工具”，在網頁適當位置繪制矩形，屬性設置如圖8-19所示。3．導航欄、分割線圖8-19“導航欄”屬性設置8.3.2制作網頁知識準備（2）繪制分割線：設置圖層的前景色為灰色。選擇“單列選框工具”，將導航欄分割為寬度相等的5份。單擊鼠標右鍵，在彈出的快捷菜單中執行“填充”命令，在彈出的對話框中設置“內容”為“前景色”。完成顏色設置后，再一次單擊鼠標右鍵，在彈出的快捷菜單中執行“取消選區”命令。灰色分割線制作完成。3．導航欄、分割線8.3.2制作網頁知識準備（3）選擇“橫排文字工具”，在導航欄內輸入文字“網站導航、聯系客服、商品分類、合作伙伴、放入書架”。設置文字：黑體、18點、抗鋸齒為銳利、黑色，效果如圖8-20所示。3．導航欄、分割線圖8-20導航條與分割線效果圖8.3.2制作網頁知識準