中學生電腦作品網頁設計與製作論文

摘要：本文主要介紹網絡設計人員對網站進行排版和佈局時，所用到的div+css技術及相關應用案例，還有網頁的色彩搭配、版面佈局等平面設計元素的相關理論和內容。

關鍵詞：網頁設計與製作論文

縱觀國內外眾多大型商業站、個人網站、行業網站、企業網站等，其不僅設計風格迥異，顏色佈局多變，給人以完全不同的視覺衝擊和美觀享受，而且網站的開發與設計呈現出日新月異的發展趨勢出來。伴隨着互聯網的發展與崛起，信息技術的不斷成熟與革新，如今網頁設計已經不再從前那般簡潔樸素，界面醜陋，反而愈加註重網頁的編排，平面元素的應用，與用户的交互等等。因而，本文試圖探討並介紹網頁設計中利用CSS+DIV的佈局方法，網頁製作的色彩搭配，文字的編排搭配，以及在網頁設計中經常用到的經典版面佈局風格，來重點論述網頁設計人員是如何將平面視覺元素運用到各大網站中的網頁設計裏來的。

1Div+CSS的佈局技術

1）Div技術從其本質上而言，是將網頁HTML文件當中混亂臃腫的`文字、圖片等內容通過Div元素將其分割成每一個單獨的區域，以此來形成一種邏輯清晰，結構明確的模塊組合體。Div元素，憑藉其擁有眾多具有獨特作用的屬性，經常被開發人員用來賦予特殊的值，並將網頁內容的開頭和結尾處放置DIV標籤，以此來構成完成的一個模塊。2）CSS是一種具有標記行的特殊語言，通過CSS，設計人員可以把對網頁層級結構的設計樣式和網頁內容兩者之間完全分離開來，獨立存在，這樣一來，不僅有利於對網站中各網頁以統一設計風格的樣式進行佈局，而且還有利於提升網頁的加載速度，縮短其響應時間。從當前CSS與Div在網頁設計中的運用案例中來看，這種佈局技術不僅可以使得網頁設計人員通過屬性值的設定精準的將各類網頁內容精準的進行編排和定位，而且還能夠使得文字和圖片之間以精美的排版樣式為網頁的整體瀏覽效果增色不少。另一方面，由於網頁內容同其設計樣式兩者之間互相分離，因而當網頁設計人員需要對其網頁樣式重新編排，或者在CSS樣式中的某幾項屬性值修改時，只需要在單獨存在的CSS文件中對佈局元素加以重新設計即可達到目的，從而使得頁面的佈局與後期迭代工作變得更加輕鬆簡單。此外，由於內容樣式的分離，使得網頁本身不僅在代碼內容上大為減少，而且極大程度上減少了網頁重新改變版面佈局的時間，使得網站部署的帶寬成本節省不少。

2網頁設計的色彩搭配

網頁設計這項工作，從其技術角度來看，不僅要包含各種平面設計元素，而且還需要嚴格遵循其固有的設計原則。而且網頁設計本身所體現出來的藝術高度通常決定着網頁的瀏覽量和點擊量，同時也是網站開發人員同互聯網用户之間進行互動和交流的重要媒介。一個網站在色彩上的搭配和選用不僅有利於傳遞網頁設計人員所要表達的主題及內容，而且可以為用户帶來極為強烈的視覺衝擊，增強其網站本身的觀賞性。

2.1劃分網頁層次

從人欣賞事物的角度而言，色彩能夠為人類感知事物提供極大的視覺刺激，使其從情感上產生共鳴。因而，如果通過將帶有不同色調的色彩進行均衡組合，會形成風格非常鮮明，內容極為出彩的頁面。由於網頁中通常有不同的層次和不同作用的文字內容，根據文字內容的重點、情感、風格，選用比例均勻，搭配得當的幾種色彩，會使得網頁內容隨色彩的分佈而顯得更加錯落有致，主次分明，從而將網頁的層次感劃分得一目瞭然，以便於網民在網頁的閲讀瀏覽過程中抓住重點來獲取信息量。這樣一來，不但網頁的導向性得以凸現出來，而且其視覺表達效果也十分出彩。下圖是國外一家社交網站的網頁設計作品，從該圖中可以看出其在好友動態上色彩選用上用白色和藍色交替組合的形式進行搭配，而在個人資料及其社交功能上選用的黑色作為背景，黑色和藍白色形成強烈的視覺區域和對比，因而使得當用户在瀏覽該社交網站時將焦點更多的關注於內容本身上面。