前言：中文期刊網精心挑選了網頁設計范文供你參考和學習，希望我們的參考范文能激發你的文章創作靈感，歡迎閱讀。
網頁設計范文1
2010年，EthanMarcotte提出響應式網頁設計(RWD，ResponsiveWebDesign)，其實，這并不是一項新技術，而是已有技術———媒介查詢(MediaQueries)、流式布局(FluidGrids)、自適應圖片(ScalableImages)的有機組合。隨著技術標準的擴展，這三項技術(媒介查詢、流式布局、自適應圖片)雖然仍是響應式網頁設計的核心，但并不是全部。響應式網頁設計無論從觀念還是技術都正在經歷著優勝劣汰的進化過程。響應式網頁設計，是指根據用戶的使用設備，使用情境以及使用行為來調整網頁的版式、內容、功能和交互方式的設計方法。響應式網頁設計為適應多樣的瀏覽情況而設計更流暢、更靈活的頁面，達到良好設計實踐，為用戶提供更優化的體驗。
二、響應式網頁設計的方法
響應式網頁設計是以用戶為中心的設計，關注特定情境下的用戶體驗，它既要適應設備的功能和限制又要適應用戶的使用環境。響應式網頁設計的方法主要包括以下幾個方面。(一)移動優先(MobileFirst)在網站策劃與制作的初步階段，響應式技術比常規方法費時耗力。一般來講，開發人員需要了解用戶設備及不同使用情境，優先從移動端開始設計，從創建具有一定可用性的基本體驗開始，滿足用戶簡潔、順暢的情境需求。然后，漸進增強，布局顯示內容，提高圖片質素，增加必要的服務，提供恰當的交互，創造更豐富的體驗。移動優先采用漸進增強(ProgressiveEnhance-ment)原則，而非早期網站設計提倡的優雅降級(GracefulDegradation)原則。移動優先既可以為不支持媒介查詢的移動設備提供適合的布局，聚焦當下最重要的事，也可以降低CSS代碼復雜性，減少冗余代碼。(二)媒介查詢(MediaQueries)媒介查詢是指根據用戶特定情境，查詢設備各種屬性來布局樣式和內容。測試的屬性包括:設備屏幕寬高(device-width，device-height);視窗顯示區域的寬高(width，height)，例如瀏覽器窗口的大小;屏幕方向媒體特性決定一個設備是處于橫屏還是豎屏，即設備處于垂直或水平的狀態(orienta-tion)，寬長比例等特性(aspect－ratio);設備屏幕分辨率(resolution)，每平方英寸像素數(ppi)，一般的屏幕為163ppi，視網膜(Retina)屏為326ppi。這些屬性可以通過“與或非”等邏輯運算符形成復雜的表達式，以此判斷是否為特定目標設備類型，從而加載特殊樣式、調整頁面布局、提供適合的功能和交互。(三)流式布局(FluidLayouts)傳統的固定寬度(FixedWidth)布局以像素為單位，是網頁布局中最常見的方法，它簡單粗暴地固定了頁面的寬度，使用戶在不同設備上瀏覽相同的頁面。屏幕較大時，頁面兩側出現大片的空白區域未加利用;屏幕較小時，頁面內容位置不變，用戶只能不斷地通過手指滑動進行瀏覽和界面交互。流動寬度(FluidWidth)布局的單位是百分比。流動布局根據瀏覽器窗口寬度自動調整頁面布局，不會出現水平滾動條。大屏幕時，頁面兩側不會出現固定布局中的大面積空白;小屏幕時，內容也不會擠成一團難以閱讀。彈性寬度(ElasticWidth)布局以“em”為單位，隨著文本大小的改變，容器的寬度也等比例地改變，將容器調整到合適的寬度。因為行寬過短，眼睛往復跳躍掃視會破壞閱讀節奏;而行寬過長，容易造成持續行進閱讀失誤。為了提高文本的可讀性，盡量使每行的中文字符個數介于25～45之間，英文字符個數介于45～70之間。網格布局(GridLayouts)可以使信息展示得有序、和諧，間距均衡、布局工整的頁面提高了可讀性，添加或更新內容時也更加容易。網格布局多采用8列、10列、12列、16列，由于12可以被2、3、4、6整除，因此它是最常用的網格布局列數?；旌喜季?HybridLayouts)則結合上述兩種及以上的布局方法。相對固定布局，其他布局更具靈活性，但每種方法都各有優勢和缺點。目前，響應式網頁設計較常用的流式布局方法是利用CSS表格屬性(display:table-cell)混合內容列為流動寬度，側邊列為固定寬度的方法。頁面布局采用內容優先(ContentFirst)原則，即權衡如:圖片、視頻、文本、廣告等不同內容的重要性來決定網格的編排。(四)文本單位(SizingFont)設計師常用像素(px)來設置文本大小，不同的設備屏幕具有不同的長寬尺寸和像素密度，這就造成了以像素為單位的文本可能在這臺設備上顯示的效果不錯，在另一臺設備上看起來太大或太小。并且，由于像素的精確控制，不同的文本大小需要分別逐一設置，調整時也更繁瑣。在響應式網頁設計中默認文本大小(em)的比例和百分比(%)卻具有更好的可訪問性和靈活性?！癳m”可以進行跨瀏覽器縮放，1em相當于當前默認文本大小，指定了默認文本大小以后，調整默認基準或倍數，其余的文本就會自動按比例進行縮放，從而簡化了維護?！?”和“em”類似，文本尺寸也可以按比例縮放，兩者在技術上沒有太大區別，且都是隨父級容器級聯的，只是“em”在語意上作為默認文本大小的比例設置更容易理解。另外，還有一種更具靈活性的單位“rem”(rootem)，其設置的大小只與HTML元素有關，避免了在嵌套元素中產生的級聯問題。但是，目前“rem”雖然在桌面設備瀏覽器的支持較好，在移動平臺卻沒有得到廣泛的支持。(五)自適應圖片和視頻(ScalableImages＆Vidoes-)許多網站在小屏幕設備上采取簡單的方法來處理圖片:方法一，設置圖片的CSS的display屬性為none，從視覺上隱藏圖片;方法二，通過媒介查詢簡單地控制縮放圖片的比例。采用這兩種方式的圖片依然會被按照原始文件量下載，既沒有節省流量也沒有節省下載時間，因此都是不可取的。目前最優的方法是在加載頁面之后，按照頁面布局確定加載哪張圖片。根據圖片容器在不同設備上的寬度設置斷點，通過媒介查詢為不同斷點提供不同的圖片，如果圖片等比縮放的藝術效果不夠好，則需要視覺設計師為其單獨切割畫面以保證藝術感染力。對于Retina高分辨率屏幕，需要創建較大面積和文件量的圖片，達到細致清晰的顯示效果，而不需要在小屏幕低質素的設備上加載這樣大的圖片。可伸縮矢量圖形(SVG，ScalableVectorGraphics)，可以自如縮放而不失真、文件量也不會增大，是未來屏幕顯示矢量圖形的理想解決方案。視頻的處理與圖片不同，在小屏幕中可以只提供一個視頻鏈接來提高頁面的加載速度;在大屏幕中則按照布局需要成比例縮放，關鍵是視頻的容器要設置與視頻的長寬比例一致，這樣，視頻才能夠隨著容器的變化而成比例調整。(六)導航方式(NavigationMode)不論在哪種設備中，導航都是引導用戶交互的重要元素，其可訪問性和易用性是至關重要的，尤其在小屏幕中如何布局導航成為影響用戶體驗的重要課題。最簡單的方式是任導航欄目流動堆疊下來，雖然直觀整齊，但卻占用了屏幕的寶貴空間，把主要內容信息擠了下去。第二種方法是把導航轉化為下拉列表，節省空間，但不夠直觀，很多用戶還不能把原本用于表單中的組件和導航欄目結合起來，另外，目前大多數設備都不支持下拉列表的樣式化。第三種方法則是先隱藏導航，然后通過單擊一個形象化的按鈕來展開導航欄目，節省了屏幕空間，相對于下拉列表也比較容易理解，但增加了一個單擊的操作步驟。
三、響應式網頁設計的特點
響應式網頁設計是為了讓瀏覽者使用不同設備時獲得一致的用戶體驗而開發的，不只是針對移動設備。在互聯網產品、技術和標準不斷發展的過程中，響應式網頁設計也是不斷進化的，只有了解其利弊，才能更好地為用戶服務。首先，響應式網頁設計操作靈活，可以針對某個頁面調整，而不必影響網站中的其他頁面;其次，響應式網頁設計適應性強，相對傳統方法更容易調整以適應層出不窮的新設備;再次，響應式網頁設計雖然在規劃階段有些耗時費力，但從長遠看，卻可以節省產品整體的開發維護成本，節約時間;最后，響應式網頁設計可以促使產品在不同設備上保持視覺體驗的統一性，維護品牌體驗的一致性。響應式網頁設計并非總是最合適的方法。有的網絡服務商需要為大屏幕、固定位置用戶和小屏幕、移動用戶提供的內容差別非常大，兩者的生命周期不同，動態效果和交互體驗不同，以及移動定位、傳感器和大數據帶來的諸多因素，設計師就需要為不同用戶的不同使用情境分別設計網站，然后通過媒介查詢自動定位到適合的站點。
四、結語
網頁設計范文2
關鍵詞：網頁設計 留白 版面設計
一、關于網頁設計的“虛實”和“留白”
“留白”是中國傳統繪畫藝術千錘百煉的結晶，這種藝術思想源于傳統的中國哲學思想，基于陰陽辯證、虛實相生的原理。虛與實作為我國古代美學的一對范疇，在古代哲學思想中有很深淵源。古代的虛實相生正是哲學上的樸素辯證法在藝術領域的應用。網頁設計通過網頁上的文字、圖形、音視頻、動畫等元素向用戶傳達信息，把各種網頁元素做藝術而合理的處理，讓用戶在接受信息的同時享受到美感，獲得良好的用戶體驗。虛實與留白是網頁設計要遵循形式美的法則之一。網頁設計留白的內涵包括三個方面：一是頁面的空白部分。“白色是一切色彩中最完美的顏色，我們幾乎找不到白色有消極意義的情境?！比鏻ogo區的空白、標題區的空白、內容和圖片周圍的空白、網頁背景空白等等。二是大面積的有色范圍。如在頁面設計中只放置極少的必要元素，背景則用大面積的單純色彩渲染，利用單純色彩的力量來突出和烘托網頁上的主要元素。
二、Web標準網頁設計留白的功能
留白是一種藝術形式，在Web標準網頁設計中，留白可以發揮重要作用。利用留白來達到頁面平衡，使整個頁面布局松緊有度，形成虛實、濃淡、動靜、輕重的效果，給人以跌宕起伏之感。與其他藝術形式不同的是，網頁設計是以傳達頁面信息為主要目的的，留白更多的是服務和服從于網頁的可用性。無數的可用性研究證實了一個事實：在Web中，用戶對網頁信息是進行瀏覽，而不是閱讀。簡潔明快、富于美感的頁面更具有可瀏覽性，可使用戶獲得更加良好的瀏覽體驗。
1.可用性體現。突出設計主題。人們在完整地接收平面元素信息時，視線會形成一個習慣性的流動順序：視點先落入視覺焦點，后隨個元素間的強弱變化而作有序流動，最后完成對全部分元素信息的吸收。認知心理學的研究證明，留在空白之中的東西更容易被人注意和想起，留白對瀏覽起強調和停頓的作用，有助于視覺向主體元素集中凝聚，它所創造出的空間形成一種路徑進而左右用戶的瀏覽方向。
2.簡潔頁面元素。少就是多，簡潔就是豐富，單純就是飽滿。在單純中求豐富，在簡練中求明快。網頁設計可用性的研究表明，簡潔的、瀏覽性強的網頁能使用戶獲得更加良好的體驗。過多的裝飾性元素或重復強調往往會導致讀者的拋棄性反應，使刻意設置的形象失去震撼效應。
3.節約網絡帶寬。在網頁設計布局中，所有用戶界面設計的一般原則是：瀏覽器所有的設計元件中，如果少了某個設計元件，該設計仍然能夠工作，就把它刪掉。
4.藝術性體現。網頁設計中的藝術性是從屬于可用性的，但這并不影響網頁藝術性的存在和它帶給用戶的美感體驗。恰恰相反，網頁的藝術性是可用性延伸和擴展。當用戶被網頁上滿滿的文字、聲音、圖像等淹沒時，適當合理的留白空恰似一個心靈歇息的驛站，讓我們的神經得到了有效的緩和，從而使用戶輕松瀏覽。當下網站建設中，功利色彩非常濃厚，網頁上堆積的信息可以“多”、“擠”、“滿”、“亂”形容，從視覺的角度解決辦法之一就是運用網頁留白，這種留白可以是空白，也可以是大面積的單純色彩，或者是規則圖形的組合，無一例個地，它使文字之間、圖形之間形成頁面節奏感、版塊層次感、內容主次感，創造“透氣”的感覺，以化解大量信息聚集起來造成的壓迫感，尋求心理釋放，給瀏覽者帶來輕松、愉悅的享受和無限的想象空間，最大限度地激發他們的藝術想象力，從而更好地體會頁面信息中所潛藏的深刻含意。這正是網頁留白在更高層次上的藝術韻律之美。
三、Web標準網頁設計留白處理方法
在版面設計中，處理好大與小、主與次、疏與密、虛與實，都是美的比例基礎，可謂是一種既可瀏覽又可休閑的兩全其美的藝術享受。但對留白如果不加控制的任意使用，它不僅不能有效發揮作用，反而會造成版面混亂，影響整個頁面設計。Web標準網頁設計留白可從兩個方面把握。
（一）網站整體設計留白。在網站設計的整體方案中，廣泛利用留白的方法構建設計框架，創造統一的視覺傳達意境，使整個設計理念能夠準確而有效，形成網站獨特的風格和廣闊的系統擴展空間，使的頁面中的各個元素更加具有活力和結構組織的多元性，激發出強大的視覺能量。這種留白的思維方式是把整個系統作為留白的載體，而不是單獨的某一頁、某一偵，這需要設計師從設計的全方位去考慮網站的架構，做到設計的全面統一，從整體氣質上定義網站文化的含義，傳達更容易被識別和認同的企業品質。
（二）網站頁面設計留白。在網頁設計中，也要注重細節的處理，尋求設計在不角度的精致表現，力求把設計延伸到每一個角落，無論從哪一個角度審視，都展現出完美的設計魅力，從而達到局部帶動整體的設計目的。
網頁設計范文3
摘要:隨著互聯網的蓬勃發展,出現了許多優秀的企業主頁
>> 淺析網頁設計原則與制作技巧 網頁設計原則及技巧 網頁設計的小技巧 Dreamweaver必備網頁設計技巧 淺談網頁藝術設計中的網頁版式設計與編排 對網頁設計藝術的探討與研究 藝術高職院校網頁設計教學的研究與實踐 網頁設計中藝術創新的研究與實現探討 探討網頁設計的藝術與處理原則 淺談網頁藝術設計 網頁藝術設計探索 網頁藝術設計初探 《網頁設計與制作》 網頁設計的布局和用色技巧 網站設計及網頁制作技巧 網頁的版式設計技巧探討 網頁新聞編譯的原則與技巧 網頁配色的方法與技巧 淺談網頁制作的經驗與技巧 板式設計課程中的網頁版式設計結構與藝術性探索 常見問題解答 當前所在位置：或.html即可。這時,保存的位置中會出現相應的網頁文件了,直接打開,就可看到網頁的效果。但是單由記事本編輯出的網頁在效果上會過于簡單,不美觀,或功能不是很完善,這就需要我們在簡單掌握html語言后,利用其它的,更為直觀的網頁制作工具來進行網頁的制作了。
1.2 掌握網頁三劍客和簡單的數據庫使用
何為網頁三劍客?是目前比較流行的制作網頁的三個工具軟件,Dreamweaver、Fireworks和Flash。其中Dreamweaver可用來制作靜態網頁、動態網頁、創建和管理網站、制作樣式表等等,功能強大,應用范圍很廣。Fireworks是圖像處理軟件,不僅具備復雜的圖像處理功能,并且能輕松地把圖形輸出到第三方的應用程序中,它最大的特點是,應用網頁制作方面的切片功能,使網頁圖片處理起來更方便,快捷了。Flas制作軟件,目前,大大小小的網頁中,都有flas存在著,給網頁增添了精彩的效果,使網頁更加精致,還可利用flash制作出有趣的游戲,留言板,聊天室等等,是功能強大的應用軟件。
網頁中經常會用到聊天室、留言板、用戶注冊、網上問答等等內容,這樣網頁就被分成了動態網頁和靜態網頁二種,不使用服務器相關內容,不使用數據庫鏈接的網頁被稱為靜態網頁,直接使用Dreamweaver來進行編輯就可以了,它的文件名中的擴展名為.htm或.html。而動態網頁正是相對于靜態網頁來說的,它的擴展名一般為.asp或.php等等。這種網頁要使用相應的服務器技術,并用到數據庫和數據庫鏈接知識。常用的數據庫有Access數據庫、SQL Server數據庫等[2]。
3 網頁內容的選取
網頁的內容是靈魂,制作的網頁是否受歡迎,是否能吸引訪問者的眼球,是否能達到預期的效果。這些都是網頁制作時我們必須要預先考慮的問題。
那么如何完成內容的定位泥?
① 在定位網站內容時,要做到小而精,切忌包羅萬象。把你認為最精彩的東西都放在上面,那么往往會事與愿違,給人以內容泛泛,大而空的感覺.最好做比較專一的內容。試想,如果我們將自己最擅長的某種知識或技術等內容做到網頁中,建立一個專題的站點,那么一旦有訪問者第一次在這里一下子就找到了他想找的內容的話。那么如果再有這方面的需求,首先就會想到你的站點。
② 如果是個人網頁,那就一定要突出自身的個性,當今社會是提倡張揚個性的時代,除了別人都有的內容之外,自己還要融入一些自身的特點,是內容要有亮點,配色也可不拘一格,大膽用色。從各個角度烘托出制作者的獨特性格。
③ 如果是企業的站點,要注意的是:企業的運營宗旨是否能完好體現,能否在網頁中最大限度體現企業網站功能和用戶最需要的內容,用戶的操作是否簡便等;要做到網頁內容主次分明,結構要清晰簡潔。
④ 對于能留住訪問者的另一個重要問題,就是網頁的速度。對于一個瀏覽頁面時間超長的網頁,我想不會讓人有再次訪問的想法。對于線路和網路本身的速度我們不能控制,但我們可以在網頁設計中避免一些影響速度的因素。好的網頁應是越簡單易讀越好。我們可以從以下幾個方面來考慮。首先,影響瀏覽速度的最重要因素之一是圖片容量大小,漂亮的圖片、絢麗的動畫效果,會使你的主頁增光添彩,但圖片的容量大小卻是直接導致瀏覽速度慢嚴重后果。盡管你的內容精彩絕倫,網頁漂亮,但打開你的網頁需要等上半天,在這時間就是金錢的時代,誰會再次的光顧呢?可利用圖片制作工具將圖片進行加工,在不太影響效果的前提下,可利用修改存儲格式,降低像素,分辨率,減少動畫應用等途經來達到目的。
4 網頁制作步驟
制作網頁和裝修差不多,先從整體的角度構思出網頁的內容、色彩等,然后利用相應的軟件進行實際操作。
① 網站定位
先確定所要建立的網站的類型,確定網站風格,網站色調,網站層次,將網站結構先確立出來。
② 收集素材
現在的互聯上的資源非常豐富,各種各樣的圖片資源、動畫資源等多媒體資源比比皆是,就所確定的網站風格等因素,收集相關素材。
③ 使用Fireworks等圖型制作軟件將網頁先畫出來
這一步驟很關鍵,無論使用哪種網頁制作軟件,在進行編輯時經常用到表格,用表格來定位圖片,用表格來定位文本,用表格來組合被切割的小圖片等。因為網頁時經常會出現后位置更改的現象,使用表格來規劃網頁,會得到事半功倍的效果。另外,小圖片的下載速度要比一整張大圖片的下載速度快的多,所以在網頁中多是將大的圖片切割成小部分后,利用無邊框,無間距的表格將小圖片組合成一張大圖。那么,第一步,在使用表格制作前,應用圖片處理軟件進行網頁設計,將整個網頁的效果圖片畫出來。第二步,利用Fireworks的切片工具,將所畫出的效果圖切成適合的小圖片,以備使用。
④ 利用Flas制作軟件制作LOGO和Banner動畫
LOGO是網站的標識,是一個站點的象征,是網站形象的重要體現。一個精美的LOGO可以很好地樹立網站的形像。LOGO一般放在網頁的左上角,大小有三種常用規格:88×31、120×60和120×90。Banner被稱為網幅廣告、旗幟廣告或橫幅廣告,是網絡廣告的主要形式,一般使用GIF格式的圖像文件,也可以使用靜態圖形,也可用多幀圖像拼接為動畫圖像等[2]。
⑤ 添加相應的服務技術
網頁如果被制作成動態網頁形式,首先要添加相應的服務技術,在我們常用的windows系統中,先要添加IIS網絡服務組件,這是windows系統的組件,需要到控制面板中的添加或刪除程序對話框中,選擇添加刪除windows組件一項中進行internet信息服務(IIS)的添加,這時需要我們在光驅中放入系統,或者可以到網絡上進行下載。
⑥ 創建數據庫
網頁中留言板、信息反饋、用戶注冊等等內容都要通過數據庫對其內容進行存儲,以備網頁調用[3]。一般的asp動態網頁使用Access做為數據庫,Access使用起來很方便,可以根據向導來創建數據庫內容。
⑦ 使用Dreamweaver制作網頁
所有的準備工作已經差不多了,我們現在要做的是,用Dreamweaver網頁制作軟件將已有的圖片、文本、數據庫等等內容組合到一起,形成我們的網站。首先,創建一個新的站點,在站點內新建網頁,一般使用index.htm或index.asp做主頁名稱。其次,在網頁中插入表格,將已經完成的圖片、動畫等多媒體內容插入到網頁中。然后,加入相應的圖片效果、鼠標經過、超級鏈接等內容。最后添加相應的樣式表內容,還可以利用行為面板,給網頁加入一些特效,如彈出窗口、時間軸特效等。還可以從網站上下載插件,安裝在Dreamweaver中,以增添效果。如果動態網頁內容需要添加數據庫鏈接內容,那我們就要在Dreamweaver中的數據庫面板中進行操作,添加數據源、綁定數據、記錄集和服務器等內容。使網頁更具有實效性。
5 結束語
網頁設計是一個注重實踐操作和設計的課程,需要我們在制作中不斷的學習,不斷的探索;在互聯網應用如此廣泛的今天,網頁制作的是否精美、實用,是否有訪問量等等是評價網頁優劣的最好方法。讓我們在實踐中進步,在實踐中走出一條屬于自己的路。
參考文獻:
[1] 丁桂芝.ASP動態網頁設計教程[M].北京:中國鐵道出版社,2005:16-18.
網頁設計范文4
關鍵詞:網頁藝術設計;技術;藝術
中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2010)05-1191-02
The Art of Webpage Design
JIANG Gui-mei
(Dept. of Arts Design and Information Technology, Guangdong Women's Polytechnic College, Guangzhou 511450, China)
Abstract: It analyzes thoroughly the artistic of webpage design from three aspects: the content, the principles and the characteristics of the art design of webpage. And it proposes the direction of development in webpage design.
Key words: art design of webpage; technology; art
網頁藝術設計是伴隨著計算機互聯網的產生而形成的視聽設計新課題,是數碼藝術中的一個重要門類,是網頁設計者以所處時代所能獲取的技術和藝術經驗為基礎,依照設計目的和要求自覺地對網頁的構成元素進行藝術規劃的創造性思維活動,它必然會成為設計藝術的重要組成部分,并隨著網絡技術的發展而發展。表面上看,它不過是關于網頁版式編排的技巧與方法,而實際上,它不僅是一種技能,更是藝術與技術的高度統一。
1 網頁設計的原則
一個成功的網頁是依靠設計者的美術觀念、對色彩和布局的掌控、對瀏覽者心理的把握、結合創意設計出來的,再應用合理的技術表現出來。
1.1 圍繞網站的主題,明確設計的風格
網頁設計的第一步就是要分析和明確建站者通過網站要達到的目的及瀏覽者要獲取的信息,從而確定網頁的主題思想及圍繞主題進行條理性處理,針對瀏覽者是兒童、男人、女人、年輕人、中年人、老年人等的習慣、愛好,從而明確網頁設計的風格。圍繞主題,運用藝術形式美法傳達網頁內容和表現網頁風格,既要內容充實,又要吸引瀏覽者的注意力,使網頁信息傳送效率最大化。
1.2 網頁整體形象統一
網頁是由多鏈接的頁面和元素組合而成,在設計時強調整體和諧性,表達一個統一的視覺印象和文化意境。整體和諧性不僅是在各網頁頁面上有共同的形式特征,如色彩、造型、版式等上的外部完整的美感,也要在文化內涵和意境上體現出一種連慣性和整體性,給人一種內部有機聯系。
1.3 應用技術要合理
應用網頁技術可以使網頁有視覺沖擊和動態效果,但也要注意合理應用,技術應用與藝術設計要相輔相成,技術是為內容和形式服務的。1)考慮瀏覽器的兼容性。2)注意網頁容量。不要將圖片和動畫過多加入,否則網頁容量過大,網頁下載速度過慢,瀏覽者也就失去看下去的興趣。3)合理應用動態網頁技術。CGI、ASP等動態網頁技術上很先進,但相當一部分引擎還是不支持它的。4)適當應用各種網頁設計方法和技術。比如,特殊字體的使用可能在有些瀏覽者的電腦上可能不能顯示。
2 網頁藝術設計的特點
網頁藝術設計既是計算機技術的應用,也是視覺藝術在網絡世界的表現。
2.1 技術與藝術結合的緊密性
技術與藝術的緊密結合在網頁藝術設計中體現得尤為突出,是網頁藝術設計最大特點。雖然技術是表現藝術的方法而已,但是如果沒有過硬的技術基礎,那么,想要表達出藝術內涵恐怕是難于登天,技術和藝術間是相輔相成,相互促進發展。技術越進步,可以表現的網頁形態越豐富;同樣,為達到網頁藝術表達的要求,往往促進一項新技術的誕生。
2.2 實時互動性
網頁具有實時交互的功能,網頁設計者將網頁上傳到網絡后,點擊率和受歡迎程度是可知的,網頁設計者需不斷更新內容和更換不同的界面環境才能讓瀏覽者持續對它的喜愛。瀏覽者不再是被動的接受者,而是藝術建構的參與者之一[1],從而促進設計者與瀏覽者進行良性的溝通。網頁設計人員也應在不同的時期和階段、依據不同對象、不同的經營策略等對網頁做出相應的變化,網頁藝術設計也是動態變化的設計。
2.3 非線性的導航
非線性的導航是指一種自由的、多方向和不確定的網頁組織結構[2],而不是線性單一的,清晰的導航性使得瀏覽者在網頁間的跳轉而不會迷失方向,給人以清晰的層次感。網頁設計者要做到不同角度的鏈接、告知瀏覽者當前的位置、當前頁與其它頁面間的關系等,每頁應有一個返回主頁的按鈕或鏈接。
2.4 媒體的多元性
網頁設計是一門新型的綜合媒體藝術,是多種元素的綜合體。多媒體的視聽元素有文字、圖像、聲音、視頻、動畫等多樣[3],網頁是視聽元素的創造和應用。
2.5 終端的不可控性
網頁的顯示效果會隨著終端的變化而出現不可控性,網頁的顯示終端包括瀏覽器和顯示器,這種不可控性主要體現在:
1)當前瀏覽器窗口大小不同,看到的頁面不同;
2)不同種類、版本的瀏覽器觀察同一個網頁頁面,效果會不同;
3)網頁的瀏覽者可以控制網頁頁面在瀏覽器中的顯示方式,如字體大小、網頁縮放等;
4)屏幕采用不同的分辨率,網頁顯示效果不同。
3 網頁設計的發展
曾有人認為,當每個企業都有了自己的網站,網頁設計行業就將從飽和中走向消亡。這是錯誤的,網絡更新發展之快、蘊涵潛力之大、覆蓋之廣都是前所未有的,網絡的未來不可限量。網頁設計的在以下三方面有著廣闊的發展:
3.1 技藝結合
雖然現在每個企業幾乎都有自己的網站,但不是每個網站都是技術與藝術的融合,網頁設計人員往往懂技術的而不懂藝術,懂藝術的又不懂技術。隨著時代的發展,網頁的藝術設計,日益被網站建設者所注重。
3.2 虛擬現實在網絡中的應用
虛擬現實的沉浸感、交互性、構想性的特征讓它成為研究者們的熱點。隨著網絡的發展,網絡虛擬環境今天已存在,讓多個用戶(特別是不在同一地理位置的多個用戶)參與到同一個虛擬環境中來,但這項技術還不成熟。網絡虛擬環境是多領域技術的集成,這些技術包括允許不同地域間異質網絡互聯的技術,支持視覺、聽覺甚至觸覺/力覺反饋技術以及相應的多種交互設備。隨著技術的日趨成熟,在線教育、在線就醫、遠程會診等都會成為現實。
3.3 多媒體的綜合應用
目前國內網頁已經出現了模擬三維的操作界面,在數據壓縮技術的改進和流技術的推動下,Internet網上出現實時的音頻和視頻服務,典型的有在線音樂、在線廣播、網上電影、網上直播、三維看房、看地圖、網上逛商場和校園等。因此,多種媒體的綜合運用是網頁藝術設計的特點之一,是網頁設計必然的發展方向。隨著技術的發展,在網絡環境流暢地播放三維實時動畫,實現網絡漫游等都已實現。
4 結論
網頁藝術設計具有技術與藝術的結合性,伴隨著網頁技術與媒體藝術的發展而發展,也是平面設計在網絡世界的延伸。隨著時代的發展和需要,網頁的藝術設計,日益被網站建設者所注重。
參考文獻:
[1] 顧群業.網頁藝術設計[M].山東:山東美術出版社,2002.
網頁設計范文5
關鍵詞：網頁設計;排版與布局;原則;方法
前言
隨著我國信息時代的不斷發展，人們主要通過網絡來獲取相關信息，網絡的作用也日益凸顯，而網頁作為網絡的重要展現形式，其在設計過程中的排版與布局會直接影響一個網頁的瀏覽量。因此，對網頁設計中排版與布局研究有著重要意義。
一、網頁設計中的排版與布局的原則
排版與布局是網頁設計中的重要組成部分，其主要目的是讓信息頁面更加美觀，使信息內容更加合理且條理清晰，讓瀏覽者得到更好的客戶體驗。因此，在進行網頁排版與布局的過程中，為達到預期效果應遵循一定原則：首先，縱觀全局，整體規劃。通過對頁面的文字和圖片進行整體平衡，并融入趣味內容，實現頁面的和諧統一；其次，突出網頁主題。即利用網頁版面的主次關系，將具有較高價值的信息放在版面上部位置，起到重點突出的作用；再次，版面恰當裝飾。即在不影響網頁功能的前提下，對網頁予以簡單裝飾，做到疏密有度、圖文并茂；最后，遵循色彩原則。為了讓一個網頁在眾多網頁中脫穎而出，在對網頁進行排版設計的過程中，應對頁面色彩進行合理組合，形成強烈的視覺沖擊力，以引起瀏覽者的重點關注[1]。
二、網頁設計中的排版與布局的內容
網頁設計中排版與布局主要是對文字和圖像進行版式設計，使兩者合理組合，向瀏覽者準確傳遞相關信息的同時展現頁面美感。其基本內容主要包括網頁標題設計、網頁文字編排、網頁圖文結合及頁面設計的節奏感。其中網頁標題一般被放在網頁最上方且位置居中，根據不同需求還可使用圖片予以裝飾，而剩余頁面文字則根據網頁的具體需要以點、線、面等方式進行合理編排。不過通篇的文字敘述易使瀏覽者產生厭煩感，進而放棄閱讀，于是頁面內容文字還應配圖說明，通過圖文結合的形式，依據不同網頁類別將相關圖片與文字進行靈活搭配，使頁面內容變得更加生動活潑，從而激發瀏覽者的閱讀興趣，充分發揮網頁傳遞信息的作用[2]。
三、網頁設計中的排版與布局的方法
在進行網頁設計之前，首先，要對頁面的表達內容予以整體規劃，通過簡潔明了的布局排版方法對主要信息予以重點突出。其次，合理控制頁面主色調，即主色彩控制在五種之內，并確定一種為主色調，其它幾種只起到烘托作用即可。最后，注重字體的設置。整體頁面的字體在三種以內，且大小適中，同時對標題與正文的字體大小和顏色加以區分。
四、網頁設計中的排版與布局的常見類型
目前，網站種類眾多，從形式上劃分主要包括門戶類、形象類、電子商務類、企業類和政府類等，盡管不同種類的網站對網頁版面要求也不盡相同，但網頁排版與布局的常見類型也就幾種。（一）排版的主要類型。排版的基本類型大致被分成十類，其中最為常見的有以下三種：一是滿版型。滿版型的整個頁面被圖像占滿，采取圖像為主、文字為輔的排版設計，使頁面具有開闊之感；二是分割型。分割型是把頁面進行上下分割或者左右分割，然后將文字和圖片分別在兩個不同區域，形成直觀的視覺感受；三是傾斜型。傾斜型是將文字和圖片做傾斜式編排，使頁面整體形成視覺沖擊效果。（二）布局的主要類型。常見的布局類型有T型、口字型和同字型，其中T型是指頁面的頂部為標語和橫幅部分，左下方和右下方分別分布著主菜單和詳細內容。這種布局模式能使整個頁面主次分明、清晰明了，但也缺乏一定靈活性，顯得相對枯燥。而口字型的最大優勢則是可以充分利用版面，將主題內容放在中間位置，在其上下左右分別放入橫條廣告、菜單、內容導航、友情鏈接等內容，整個布局類似一個口字型。這種布局在國外站點較為常見，在國內的使用率相對較低。除此之外，還有一種同字型布局，這種布局一般設有大標題和小標題，其位置均在頁面上方，相應內容被布置在左右兩側，而頁面下方通常情況下會被留白，即使有內容也多為網站基礎信息及網站制造方。
五、結論
綜上所述，網頁設計中的排版與布局影響著網頁的成敗，為不斷滿足人們對網絡的需求，網頁設計人員應針對不同類型的內容采取相應的排版與布局方式，進而提高網頁質量和優化網頁視覺效果，為人們帶來更好的瀏覽體驗。
參考文獻
[1]王樹琴.網頁設計中元素定位和布局問題的研究[J].中國新通信,2013,(13):65-66.
網頁設計范文6
【關鍵詞】網頁 設計 理性
網頁設計是互聯網發展之后形成的一個新興設計門類，其綜合了平面設計、界面設計、交互設計、產品設計的相關知識和能力。其既是一個信息傳達的媒介，同時也是一個供人們交互使用的軟件產品，好的網頁設計不但要美觀、漂亮，還要易學、易用。要做到易學、易用，在設計時需要充分調動理性思維，綜合考慮技術環境，用戶生理特點、心理特點、認知特點、行為習慣等多個方面，做出理性的設計分析和判斷。
一、設計必須符合媒介特性
用戶在網頁上獲取信息和在紙質媒介上獲取信息有很大的不同。在紙質上的信息是預先印刷在上面的，是已經固化不變的，設計者的預設視覺效果會按照既定目標傳達給讀者。而網頁信息完全不同，信息并沒有預先固化在瀏覽者的信息顯示媒介上，信息是一種動態的“信息流”形態，在瀏覽者的互動作用下，“信息流”從網頁的服務器上，經過網絡傳輸系統不斷地傳輸到瀏覽者的顯示媒介上，而瀏覽者的顯示媒介還有多種不同的規格和形式，導致瀏覽者看到的網頁形態并不一樣。
在設計網頁時，我們必須考慮網頁服務器的處理能力、網絡傳輸的帶寬，以及用戶瀏覽網頁的終端處理能力、顯示媒介的尺寸大小、分辨率高低等要素。服務器的處理能力、網絡帶寬、終端處理能力都會影響網頁傳輸的速度，而顯示媒介的尺寸大小和分辨率則會影響網頁呈現的形態。
在考慮頁面的內容和顯示質量時，我們必須要理性思考頁面的數據量，綜合分析影響頁面傳輸速度的各個因素，權衡內容、質量與瀏覽者等待時間的平衡。內容多、質量高，傳達的信息量大，視覺效果好，但可能造成頁面數據量大，瀏覽者等待的時間長。Websense調查公司稱：多達70%的上網者表示不愿意在頁面讀取上超過10秒鐘，也就是說在瀏覽者點擊鏈接之后，如果頁面在10秒鐘內還沒有呈現出來，用戶會放棄訪問，即使網頁有再好的內容和質量也達不到傳達信息的目的，這就失去了設計的根本目的。從心理學的角度上看，瀏覽者在等待過程中，會逐漸增加煩躁和不安，失去耐心，況且網絡上有太多的選擇，更加劇了他們放棄的決心。
設計網頁的幅面時，我們不能像紙質媒介那樣以長度單位來計量，而是以數字媒介的基本單位像素來計量，而一個像素在視覺上到底有多大又取決于顯示媒介的尺寸大小和分辨率，所以網頁在視覺上的大小在瀏覽者那里可能大不相同，因為他們瀏覽網頁時采用的顯示媒介大小和分辨率可能相差很大，也許是9英寸的筆記本電腦，也可能是25英寸顯示器的臺式計算機，即使物理尺寸相同，分辨率不同，所得到的頁面大小也不一樣。因此，我們必須對瀏覽者使用的網頁瀏覽設備有充分的調查和分析，并進行測試，以保證我們設計的網頁幅面大小在普遍使用的各種網頁瀏覽設備上能夠滿足瀏覽信息的基本要求。
二、網頁應是瀏覽為主
在用戶獲取信息的方式上，網頁有別于紙質媒介，網頁是以瀏覽為主，而紙質媒介是以閱讀為主。所謂瀏覽，按照字面意思就是粗略、大致地看一遍，其主要目的是大致了解，搜尋是否有感興趣的信息線索;閱讀比瀏覽更具有主動性和目的性，是有目的地讀，其目標是理解?？唆敻裨凇秳e讓我動腦筋――網頁設計效果優化藝術》一書中提出了設計出好網頁必須面對的三個事實：一是“我們不是閱讀網頁，而是瀏覽”;二是“我們不做最佳選擇，而是滿意而止”;三是“我們不深究原理或本質，而是想當然地使用”。我們為什么對網頁是瀏覽呢？克魯格的分析認為有三個原因：一是因為匆忙，使用網絡的目的多半是想節約時間，這樣用戶就會不停地運動;二是用戶知道不必全部閱讀，通常一個網頁里面只有很少一部分是他們感興趣的;三是用戶擅長瀏覽，瀏覽是人們日常生活中搜尋信息的慣用方法?；谶@樣一些原因，用戶使用網站就是瀏覽、滿意、再瀏覽、再滿意這樣一個循環往復的過程，直至滿意而歸。如果中間出現了不滿意，這個過程就會終止，用戶就帶著不滿意而離開。
所以，在設計網頁時，哲學家威廉提出的奧卡姆剃刀原理“如無必要，勿增實體”和建筑大師密斯?凡?德?羅提出的“少即是多”原則是我們檢驗設計的兩面鏡子。在確定網頁的內容時，突出那些重要的內容，去掉那些不必要的圖案和文字，即使那些能夠讓你的網頁在視覺上產生更好的效果，但如果其干擾重要信息的瀏覽，仍然應該果斷地去掉。在網頁中，只有那些有利于信息傳達目標的美才是有價值的，美應該符合于功能的需要，美和功能的和諧統一才是網頁設計追求的目標。
為了便于瀏覽，在網頁內容的編排上必須尊重視覺習慣，我們在瀏覽時總是從左到右，由上而下地掃視，要根據內容的重要性，進行從左到右、由上而下地依次排列，使重要的內容最先映入瀏覽者的眼簾。在文案的寫作上，為了便于快速瀏覽，一是對標題、關鍵內容加以強調;二是采用短的句子和段落;三是采用清晰的分區和列表;四是先總體后詳細的寫作順序。用戶在進行瀏覽時首先是通過標題和關鍵詞來初步判斷內容是否符合自己的興趣，然后再通過總體的概述來決定是否有繼續瀏覽下去的必要。在瀏覽的過程中，短句和短的段落有利于減小理解的難度和縮短判斷的時間，清晰的分區和列表能夠讓人快速抓住其關注的興趣點，促進人們繼續瀏覽。
三、網頁設計不應打破慣例
前面已經提到，網頁是一個要求即看即用的特殊“產品”，也就是一看我們就要知道如何使用。我們雖然使用了若干手機，但我們購買了一款新的手機時，我們還是得閱讀說明書后才能正常使用，網頁確不需要。那如何才能達到即看即用呢？使用慣例就是最好的武器，這也是提高所有產品易用性的重要法寶。慣例就是我們已經習慣了的東西，我們一看就知道它的意思，就知道怎么去操作，因為慣例是我們日常生活中積累起來的，已經存入大腦的固有知識。唐納德?A?諾曼在《設計心理學》中將知識分為了存儲于外部的知識和存儲于頭腦內部的知識，使用存儲于外部的知識不需要學習，但效率低;使用頭腦內部的知識需要專門學習，但效率高。而慣例是已經存儲在頭腦內部的知識，具有外部知識的高易用性和頭腦內部知識的高效率。
在網頁設計中有很多慣例是不能輕易去打破的，一是重要導航在頁面的位置，按照慣例一般布置在頁面的上部、左上部或右上部，首頁的鏈接放置在最前面;二是網站的標識放置在頁面的左上部，瀏覽者用其來判別是否到達了目標網站;三是文字鏈接要加下劃線（也可以鼠標放上去才出現），瀏覽者用其來判斷是否有超級鏈接;四是常用標識符號，如在多頁文檔中，代表向上翻頁，代表向下翻頁;在視頻、音頻播放中■代表停止，代表暫停， 代表播放。這些標識符號在網頁中已經具有特定的意義，是不能隨意改變的。
四、設計層面之間的邏輯聯系
Jesse James Garrett在《用戶體驗的要素――以用戶為中心的Web設計》一書中論述了網頁設計的五個層面，包括戰略層、范圍層、結構層、框架層和表現層，并確定了自下而上的建設流程，規定了設計的程序。自下而上的各個層面，從抽象逐漸變成具體，并且包含著密切的邏輯聯系。
戰略層確定的網站目標和用戶需求，是整個網站設計的基石，其決定范圍層的內容選擇和功能設計;結構層是對范圍層選擇的內容進行分類和組織，形成信息架構，以及對確定的功能進行交互設計，確定交互的過程和交互行為;框架層是在結構層信息架構的基礎上，根據完成任務的需要，利用超級鏈接設置來完成導航設計，以及規劃信息架構在頁面空間中的位置關系，形成布局框架;表現層是對框架層進行具體的視覺表現，包括圖形設計、色彩設計、信息圖表設計、動畫設計、視頻設計等。
從上面的分析可以看出，下一層是上一層的設計依據或設計對象，上一層是下一層的進一步深化和具體，相鄰層之間緊密聯系，既不能交換，也不能跨越，更不能缺少，具有嚴格的秩序，形成了完整的邏輯鏈條，理性思維貫穿在整個設計過程之中。
結語
網頁設計是在互聯網絡高度發展和普及應用之后，產生的介于視覺傳達設計和產品設計之間的跨界設計領域，其設計程序的嚴密邏輯、媒介的技術特質、以瀏覽為主的信息獲取習慣、高度的人機交互等特點，都需要我們在設計中進行更多的理性思考。畢竟對于網站而言，有用、好用是第一位的。
參考文獻：
[1]斯蒂夫?克魯格.別讓我動腦 網頁設計效果優化藝術.孫昌玲，譯.濟南：山東科學技術出版社，2001.
[2]Jesse James Garrett.用戶體驗的要素――以用戶為中心的Web設計[M].范曉燕，譯.北京：機械工業出版社，2008.
