全國中小學電腦制作培訓及作品賞析2網頁設計網頁設計作品要充分體現(xiàn)數(shù)字技術開放性、交互性和共享性的特征；內容上無論什么選題都要緊密結合作者自身的學習生活和社會實踐;要具有較強的探究性。使用HTML語言或網頁制作工具編制的、闡釋某個主題或傳遞某類專題信息的作品。作品應充分體現(xiàn)數(shù)字技術開放性、交互性和共享性的特征；內容要緊密結合作者的學習生活和社會實踐，避免簡單的資料堆砌。在水平分辨率為1024（或以上）像素的顯示屏上瀏覽時，頁面保持整齊、美觀。作品（非壓縮文件）大小建議不超過50MB。一、關于網頁設計二、網頁設計的要求：主題明確、內容積極向上，能科學、完整的表達主題思想。作品主題表達形式新穎；內容創(chuàng)作注重原創(chuàng)性，具有一定的想象力和個性表現(xiàn)力。能夠反映出作者有一定的審美和制作水平，界面美觀、設計布局合理。軟件使用熟練，視頻音頻完整，導航和鏈接無誤。三、網頁設計的內容與方法：(一)網頁設計的選題及內容要求(二)網頁設計的選題方向(三)網頁設計的板塊內容組織(四)網頁的版面設計(五)網頁設計的色彩規(guī)劃(六)網頁設計的基本步驟(七)網頁制作存在的主要問題（一）網頁設計的選題及內容要求孩子自身的真情實感、學習與生活、探究和創(chuàng)作的欲望、心得與收獲…反映當前學習、生活中的難點：探究性學習、研究性學習、綜合實踐活動…捕捉學習生活中的亮點：學習生活、校園文化、科技、航模、社會實踐與社區(qū)服務…留心社會生活中的熱點：德育建設、環(huán)境、交通、安全、旅游、民俗…觀察世界變化的焦點：國家、社會、學校、家庭…（一）網頁設計的選題及內容要求適合:選題要符合并緊扣時代要求新穎:題目要新穎，含蓄有韻味，有吸引力，有創(chuàng)意健康:內容要健康，內涵要深刻科學:選題要體現(xiàn)科學原則，不要違背科學常識促進:能促進學生的發(fā)展，實現(xiàn)信息共享有利:能發(fā)揮自身優(yōu)勢,揚長避短（二）網頁設計的選題方向

主題探索發(fā)現(xiàn)實踐活動網站（研究型學習網站）（學科知識型網站）對身邊的實物的細致觀察、親自實踐、研究：對科普科學知識、社會科技發(fā)展知識的學習和研究1.主題探索發(fā)現(xiàn)實踐活動網站1.主題探索發(fā)現(xiàn)實踐活動網站1.主題探索發(fā)現(xiàn)實踐活動網站1.主題探索發(fā)現(xiàn)實踐活動網站2.家鄉(xiāng)特色網站對家鄉(xiāng)文化的挖掘、探究；對當?shù)氐乩?、歷史、風俗、傳統(tǒng)文化的研究等2.家鄉(xiāng)特色網站2.家鄉(xiāng)特色網站2.家鄉(xiāng)特色網站

3.個人成長型網站對學習、興趣愛好、生活的感悟與收獲反映孩子內心世界、個性發(fā)展的網站；3.個人成長型網站-----反映孩子內心世界、個性發(fā)展的網站：3.個人成長型網站-----反映孩子內心世界、個性發(fā)展的網站：3.個人成長型網站-----對學習、興趣愛好、生活的感悟3.個人成長型網站-----對學習、興趣愛好、生活的感悟4.公益性網站表現(xiàn)對是社會公益、精神文明的關注。4.公益性網站4.公益性網站1.挖掘主題要深刻，內容要豐富

圍繞主題進行問題研究性學習

搜集整理有關資料、對問題的分析、所形成的觀點與結論

深入挖掘與主題相關的知識，積累研究性學習的過程性資料，將學習心得凝結成文

圍繞主題進行調查實踐，所準備資料應包括文字、圖片、音視頻、動畫及軟件等形式的素材

科學有序地整理與主題相關的各種資料

構思欄目的設置，應緊扣主題,分階段或分角度展現(xiàn)學生探究學習的過程、結果，特別是學生在不同階段、從不同方面、對問題研究的所得。構思要巧妙、創(chuàng)意要獨特，結構要清晰。（三）網頁設計的板塊內容組織·

首頁的畫面要生動、有趣，富于吸引力·

整個作品的音樂、畫面動態(tài)語言要有震撼力和感染力·

網頁頁面的設計要突出主題、引人入勝·

結構方式要與作品的內容吻合·

整體布局要合理、美觀，風格要統(tǒng)一，制作要精美·

人機交互方便，結構清晰，導航和鏈接無誤

2.表現(xiàn)方式要有創(chuàng)意，形式為內容服務響亮的主題據(jù)視覺沖擊力的開篇動畫撲面而來的孩子探究的身影探究的視頻原創(chuàng)的文章清晰的層級結構漂亮的版面設計

好的網頁設計：（四）網頁的版面設計2.封面設計即形象頁設計3.最佳視域----第一屏設計頁頭設計頁腳設計1.網站的層級結構網站的層級結構網站是由網頁組成的，網頁之間是由超鏈接來連接的，其連接方式有三種：線性網站、樹狀網站、非線性網站線性網站：一頁連接一頁樹狀網站：分層排列非線性網站：上述兩種網站的結合（四）網頁的版面設計2.封面設計即形象頁設計形象頁設計：動畫展示，增添趣味性，加深觀者的印象，突出主題。避免冗贅，過分渲染，文件過大（四）網頁的版面設計2.封面設計即形象頁設計（四）網頁的版面設計頁面中不同的視域，注目程度不同，給人心理上的感受也不同。網頁中最重要的信息，應安排在注目率最高的頁面位置，這個位置便是頁面的最佳視域。瀏覽者的眼睛首先看到的是屏幕的中間偏上的區(qū)域,即網頁的第一屏展示最為重要。根據(jù)視覺心理學的研究，人的視線對于版面的視覺訴求力大體是上部比下部強，左半部比右半部強。3.最佳視域----第一屏設計（四）網頁的版面設計3.最佳視域----第一屏設計頁頭設計頁腳信息完整最佳視域（四）網頁的版面設計3.最佳視域----第一屏設計頁頭設計頁腳信息完整最佳視域（四）網頁的版面設計3.最佳視域----第一屏設計（四）網頁的版面設計最佳視域3.最佳視域----第一屏設計（四）網頁的版面設計4.標題空間---明示主題（四）網頁的版面設計4.標題空間---明示主題（四）網頁的版面設計4.標題空間---明示主題A、標題大小、粗細要與標題相稱越大、越粗、越有力量檢查一下標題字號是否太小（四）網頁的版面設計4.標題空間---明示主題B、通過高色價明示標題鮮艷的色彩能夠強化標題強調主體性（四）網頁的版面設計4.標題空間---明示主題C、通過寬闊的領地襯托標題

標題的領地是指將標題周圍的圖像和文字移遠而得到的空白部分?？瞻椎牟糠譃闃祟}的支配空間，也就是我們所說的領地。領地越廣闊，標題越醒目，主體性也就越強。

（四）網頁的版面設計4.標題空間---明示主題C、通過寬闊的領地襯托標題（四）網頁的版面設計5.排版樣式---標明信息A、利用排版樣式傳遞信息排版樣式是不說話的口信（四）網頁的版面設計5.排版樣式---標明信息A、利用排版樣式傳遞信息排版樣式是不說話的口信（四）網頁的版面設計5.排版樣式---標明信息B、利用圖片傳遞信息圖片具有強烈的信息性看圖的一瞬間，信息就被確定下來（四）網頁的版面設計5.排版樣式---標明信息c、用圖片表示歡迎態(tài)度（四）網頁的版面設計5.排版樣式---標明信息c、用圖片表示歡迎態(tài)度（四）網頁的版面設計5.排版樣式---標明信息c、用圖片表示歡迎態(tài)度。歡迎過度，適得其反（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用留白和劃線進行分組（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用留白和劃線進行分組（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用色塊進行分組（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用色塊進行分組（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用色塊進行分組（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用色塊進行分組跳過（四）網頁的版面設計6.整理內容區(qū)---分組（群化）整理內容信息——利用色塊進行分組（四）網頁的版面設計跳過7.文本信息設計1）文字不同的字體具有不同的性格特征，設計者可以利用不同字體的形態(tài)創(chuàng)作具有多種表現(xiàn)力的視覺特效，可以用粗壯、穩(wěn)定的字體形態(tài)；也可以用精細、柔美的字體。（四）網頁的版面設計2）字號表示字號大小的單位有磅（Point）和像素（Pixel）。通常磅適用于所有的瀏覽器和操作平臺。12號和14號字的字號大小比較適合網頁的正文顯示。字號的大小影響文字的可識別性，根據(jù)信息內容的主次之分，需要使用不同大小的字號。例如，標題和需要強調的信息要用較大的字號，輔助信息可使用較小的字號。但在字號相同的情況下，瀏覽器中顯示的不同的字體也會有不同的顯示效果。7.文本信息設計（四）網頁的版面設計3）文字編排文字不只在其可讀性方面起到傳達信息的作用，在網絡形象設計的版面設計中，文字還可以通過不同的排列組合傳達不同的視覺藝術效果。因此，文字設計在現(xiàn)代網絡形象設計中作為一種藝術形式也起到不可忽視的作用。7.文本信息設計（四）網頁的版面設計

3）文字編排兩端對齊：無論豎排還是橫排，文字從左端到右端的長度是均奇的，文本段落形成一個規(guī)整的面，這種排列方式嚴謹，美觀。7.文本信息設計

3）文字編排居中排列：以頁面中心軸線為標準，文字居中向左右均分排列，行首和行尾根據(jù)每行字數(shù)的不同有長有短，視覺上有一定的動態(tài)感，產生對稱的形式美感。7.文本信息設計

3）文字編排左對齊或右對齊：左對齊是使文本行首在左側形成一條清晰的垂直線，右側行尾根據(jù)每行字數(shù)不同長短不一。右對齊是使文本行尾在右側形成一條清晰的垂直線，左側行首根據(jù)每行字數(shù)不同長短不一。這種編排方式有松有緊，視覺上有虛有實，產生一種節(jié)奏與韻律上的形式美感。左對齊的排列方式與從左到右的閱讀習慣相符合，但右對齊的視覺效果較獨特。7.文本信息設計

3）文字編排圖文結合排列：文字包圍圖片的排列方式，使文字在圖片的輔助說明下，更增強了其可讀性。在網絡形象設計中，一個頁面最好避免出現(xiàn)大段的文字，因為瀏覽器的色光容易使人眼產生視覺疲勞，如果在一個頁面中文本超過兩屏的話，就很難保證訪問者會把完整的內容看完，遇到這樣大段文字的時候，最好能分到幾個頁面中，在同一個頁面中的文字也要進行分段，每段的文字精簡一些，或者把大段的文字作為可下載的方式。還有一點值得注意的是，在文本的某個段落中間，或某句話中最好不要出現(xiàn)鏈接，為了能使訪問者完整的閱讀整段文本，要把相關鏈接單獨放置。7.文本信息設計4）圖形化的文字設計在網絡形象設計中，文字除了具有傳達語義信息的功能外，還可以作為圖形語言來表現(xiàn)。通過對文字進行圖形上和編排手法上的夸張、變形，使其更具有形式上的美感。通常運用的設計手法有文字與文字的重疊；文字與圖形的重疊；文字的大小、明暗、疏密、色彩等的變化。雖然有些手法會減弱文字的可識別性，但卻使畫面具有獨特的視覺效果，增強了網絡形象設計手法的多樣性。7.文本信息設計（四）網頁的版面設計色彩的聯(lián)想色彩的應用（五）網頁的色彩規(guī)劃

1）紅色（Red）紅色具有強烈的刺激作用，紅色代表熱的、活潑的、健康的、引人注目的，表達愉快、熱情、權勢、吉祥、幸福、活力等都適宜選用紅色。紅色與黑色組合能夠使紅色更加鮮艷；與黃色組合具有溫暖明快的意向；與綠色等色組合產生強烈的對比。在網絡形象設計中，紅色常作為主色和調和色出現(xiàn)。彩色的聯(lián)想

2）黃色（Yellow）黃色是最為光亮的顏色，它的明度很高，非常引人注目。黃色代表光明、快樂、健康、自信、希望、榮譽、警示等。黃色系的顏色與紅色系的顏色搭配顯得熱情；與紅、藍、綠、紫等原色、間色搭配，顯得明朗活潑，具有童話般的意象；與黑色搭配，具有很強的警示作用；與灰色搭配具有新潮浪漫的氣息。在網絡形象設計中，黃色常作為配色出現(xiàn)。

3）橙色（Orange）橙色具有很強的視覺沖擊力及引人注目的特點。橙色代表強烈的、沖動的、大膽的，表達光明、華麗、歡樂、興奮、悲傷等情感。橙色與明亮的黃綠或暖色組合，表達熱情、新潮；與黑、白、灰組合，產生強烈的視覺效果。在網絡形象設計中，橙色使用范圍較廣，適合表現(xiàn)運動、時尚、食品類網站。

4）藍色（Blue）藍色的性格頗為冷靜，在自然界中它就是天空、海洋的顏色。藍色也是想象力和創(chuàng)造力的象征。藍色代表沉靜、理智、遙遠、自由、永恒、憂郁等情感。藍色與無彩色的黑、白、灰白色組合，詼諧亮麗；與灰色組合，柔美清爽；與黑色組合，新潮大膽；與黃色組合，給人健康的感覺。在網絡形象設計中，藍色常用于科技類的商業(yè)設計中，還可用于政府或表現(xiàn)男性主題的網站中。

5）綠色（Green）綠色是自然界的顏色。綠色的刺激度和明視度均不高，對于生理和心理的作用都較溫和。綠色代表自然、新鮮、平靜、安寧、生命力、安全感、和平、理想等情感。綠色與其它色彩組合均能收到良好效果，與白色組合，清爽明快；與黑色組合，高貴自然；與灰色搭配，冷峻時尚。在網絡形象設計中，常用于服務業(yè)、衛(wèi)生保健業(yè)等類型。

6）紫色（Purple）紫色是由紅與藍兩色混合而成的中性色，它的補色是黃色。紫色具有華麗、優(yōu)雅、神秘、幻想的意味，代表優(yōu)美、情調、藝術、高貴、華麗、浪漫、尊嚴、孤獨、憂郁等情感。紫色是所有顏色中最捉摸不定的顏色。紫色與黑色、金色組合，具有戲劇性的效果，顯得華麗、莊重、有品位；與鮮艷的黃綠、黃灰色組合，充分顯示出紫色的注目性；與淺褐色組合，具有成熟、高貴、典雅的效果。在網絡形象設計中，常用于表現(xiàn)女性主題的網站。

7）黑色（Black）黑色屬于無彩色系，本身無刺激性，但與其它色彩相搭配時，會使其它任何一種顏色都表現(xiàn)的更為強烈，而增強刺激性。黑色代表黑暗、沉默、靜止、嚴肅、忠義、力量、死亡、恐怖、悲傷等情感。黑、白、灰的色彩搭配具有很強的個性，黑色與鮮艷的顏色組合醒目而艷麗。在網絡形象設計中，黑色的運用范圍很廣，通常與其它色彩搭配使用，常用于娛樂、科技、藝術等類型的網站。

8）白色（White）白色是黑色的補色，也屬于無彩色系，是中性色之一，白色的亮度最高。白色代表純潔，和任何色彩組合搭配都有良好的效果。白色代表純潔、明快、真理、神圣、平等、光明、無邪、自由、正直、冰冷等情感。白色與黃色系、灰色組合，具有恬靜、優(yōu)美的意象；與藍色系組合，具有清爽怡人的意味；與艷麗的顏色組合活潑多變；與深色調組合具有成熟典雅的魅力。在網絡形象設計中，白色屬于搭配色。

9）灰色（Grey）灰色也是中性色，也屬于無彩色系。灰色既不是彩色的，也不是明亮的，灰色就是淡黑色，灰色具有從淺灰色到暗灰色的層次變化，色感均有所不同?；疑瑯舆m用于與其它色彩搭配使用，起協(xié)調作用?；疑砥椒?、謙虛、安靜、成熟、中庸、無聊、消極等情感。黑白系列的組合，對比強烈，由于灰色的介入，是它們變得柔和協(xié)調起來。鮮艷色彩的組合，色彩對比過于刺激，加入灰色會提高畫面的對比質量。在網絡形象設計中，灰色主要運用在一些高科技產品或格調高雅的企業(yè)、藝術類網站中。2.色彩的應用

1、網頁色彩搭配的原則（1）適應性（2）獨特性（3）統(tǒng)一性（五）網頁的色彩規(guī)劃

2、網頁色彩搭配的技巧（2）有彩色系（紅、橙、黃、綠、青、藍、紫）使用單色調：選定一種顏色，通過調整其飽和度和透明度的方式，以產生新的色彩來豐富頁面的層次感和統(tǒng)一性。

2、網頁色彩搭配的技巧（2）有彩色系（紅、橙、黃、綠、青、藍、紫）

使用鄰近色：鄰近色是指在色相環(huán)上處于90度以內相鄰的顏色。鄰近色的搭配可以避免網頁色彩過于雜亂。

2、網頁色彩搭配的技巧（2）有彩色系（紅、橙、黃、綠、青、藍、紫）使用對比色：對比色是指在色相環(huán)上處于150度左右相對立排列的兩個顏色。使用對比色搭配可以使頁面突出重點，起強調作用。

2、網頁色彩搭配的技巧（3）不同色彩的組合嘗試

3、網頁色彩搭配應注意的問題⑴在網絡形象設計中并不是色彩運用得越多越好，而是需要確定一兩種主色調，根據(jù)主色調來搭配使用合理的輔助色，以使網