時(shí)間：2023-05-31 09:10:43
開篇：寫作不僅是一種記錄，更是一種創(chuàng)造，它讓我們能夠捕捉那些稍縱即逝的靈感，將它們永久地定格在紙上。下面是小編精心整理的12篇網(wǎng)頁(yè)設(shè)計(jì)，希望這些內(nèi)容能成為您創(chuàng)作過(guò)程中的良師益友，陪伴您不斷探索和進(jìn)步。
關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)，內(nèi)容，原則
網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是藝術(shù)與技術(shù)的高度統(tǒng)一，指出網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)包含視聽元素與版式設(shè)計(jì)兩項(xiàng)內(nèi)容；以主題鮮明、形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體為設(shè)計(jì)原則。在明確了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系的基礎(chǔ)上，提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點(diǎn)。網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)是伴隨著計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)的產(chǎn)生而形成的視聽設(shè)計(jì)新課題，是網(wǎng)頁(yè)設(shè)計(jì)者以所處時(shí)代所能獲取的技術(shù)和藝術(shù)經(jīng)驗(yàn)為基礎(chǔ)，依照設(shè)計(jì)目的和要求自覺(jué)地對(duì)網(wǎng)頁(yè)的構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)，必然要成為設(shè)計(jì)藝術(shù)的重要組成部分，并隨著網(wǎng)絡(luò)技術(shù)的發(fā)展而發(fā)展。表面上看，它不過(guò)是關(guān)于網(wǎng)頁(yè)版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一。
一、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的內(nèi)容
設(shè)計(jì)活動(dòng)中包含著主觀和客觀兩方面的因素，在確立了網(wǎng)頁(yè)主題之后，首先要明確和熟悉設(shè)計(jì)的對(duì)象和構(gòu)成的要素。網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)涉及的具體內(nèi)容很多，可以概括為視聽元素和版式設(shè)計(jì)兩個(gè)方面。
1.視聽元素
這里所說(shuō)的視聽元素，主要包括：文本、背景、按鈕、圖標(biāo)、圖像、表格、顏色、導(dǎo)航工具、背景音樂(lè)、動(dòng)態(tài)影像等。無(wú)論是文字、圖形、動(dòng)畫，還是音頻、視頻，網(wǎng)頁(yè)設(shè)計(jì)者所要考慮的是如何以感人的形式把它們放進(jìn)頁(yè)面這個(gè)“大畫布”里。多媒體技術(shù)的運(yùn)用大大豐富了網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的表現(xiàn)力。 以上各視聽元素大多數(shù)瀏覽器本身都可以顯示或收聽，無(wú)需任何外部程序或模塊支持。論文格式。論文格式。比如，大部分瀏覽器都可以顯示GIF、JPEG圖形和GIF89a動(dòng)畫和多媒體文件。另外，在瀏覽器使用插件（Plug-in）也可以播放更多格式的多媒體文件。還有微軟推出的ActiveX已經(jīng)成為熱門技術(shù)。總之，技術(shù)的不斷發(fā)展使多媒體元素在網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的綜合運(yùn)用越來(lái)越廣泛，使瀏覽者可以享受到更加完美的視聽效果。這些新技術(shù)的出現(xiàn)，也對(duì)網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)提出了更高的要求。論文格式。
2.版式設(shè)計(jì)
網(wǎng)頁(yè)的版式設(shè)計(jì)同報(bào)刊雜志等平面媒體的版式設(shè)計(jì)有很多共同之處，它在網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)中占據(jù)著重要的地位。所謂網(wǎng)頁(yè)的版式設(shè)計(jì)，是在有限的屏幕空間上將視聽多媒體元素進(jìn)行有機(jī)的排列組合，將理性思維個(gè)性化的表現(xiàn)出來(lái)，是一種具有個(gè)人風(fēng)格和藝術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感和精神上的享受。但網(wǎng)頁(yè)的排版與書籍雜志的排版又有很多差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁(yè)則不然，它的尺寸是由讀者來(lái)控制的。這使網(wǎng)頁(yè)設(shè)計(jì)者不能精確控制頁(yè)面上每個(gè)元素的尺寸和位置。而且，網(wǎng)頁(yè)的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁(yè)的版式設(shè)計(jì)帶來(lái)了一定的難度。
二、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的原則
網(wǎng)頁(yè)作為傳播網(wǎng)絡(luò)信息文化的一種載體，同其他出版物如報(bào)紙、雜志等在設(shè)計(jì)上有許多共同之處，也要遵循一些設(shè)計(jì)的基本原則。雖然網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與形式的統(tǒng)一。它要求設(shè)計(jì)者必須掌握以下三個(gè)主要原則，才能把網(wǎng)頁(yè)的設(shè)計(jì)做得更加完美：
1.主題鮮明
視覺(jué)設(shè)計(jì)表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺(jué)心理規(guī)律和形式將主題主動(dòng)地傳達(dá)給觀賞者。訴求的目的，是使主題在適當(dāng)?shù)沫h(huán)境里被人們即時(shí)地理解和接受，以滿足人們的實(shí)用和需求，這就要求視覺(jué)設(shè)計(jì)不但要單純、簡(jiǎn)練、清晰和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)，更應(yīng)該注重通過(guò)獨(dú)特的風(fēng)格和強(qiáng)烈的視覺(jué)沖擊力，來(lái)鮮明地突出設(shè)計(jì)主題。
優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)必然服務(wù)于網(wǎng)站的主題，就是說(shuō)，什么樣的網(wǎng)站，應(yīng)該有什么樣的設(shè)計(jì)。例如，設(shè)計(jì)類的個(gè)人站點(diǎn)與商業(yè)站點(diǎn)性質(zhì)不同，目的也不同，所以評(píng)論的標(biāo)準(zhǔn)也不同。網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系應(yīng)該是這樣：首先，設(shè)計(jì)是為主題服務(wù)的；其次，設(shè)計(jì)是藝術(shù)和技術(shù)結(jié)合的產(chǎn)物，就是說(shuō)，即要“美”，又要實(shí)現(xiàn)“功能”；最后，“美”和“功能”都是為了更好地表達(dá)主題。當(dāng)然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，一個(gè)搜索引擎，首先要實(shí)現(xiàn)“搜索”的“功能”。它的主題即是它的“功能”。而個(gè)人網(wǎng)站，可以只體現(xiàn)作者的設(shè)計(jì)思想，或者僅僅以設(shè)計(jì)出“美”的網(wǎng)頁(yè)為目的。它的主題只有一個(gè)，就是——美。
要使網(wǎng)頁(yè)從形式上獲得良好的誘導(dǎo)力，鮮明地突出訴求主題，具體可以通過(guò)對(duì)網(wǎng)頁(yè)的空間層次、主從關(guān)系、視覺(jué)秩序及彼此間的邏輯性的把握運(yùn)用來(lái)達(dá)到。
2.形式與內(nèi)容統(tǒng)一
任何設(shè)計(jì)都有一定的內(nèi)容和形式。內(nèi)容是構(gòu)成設(shè)計(jì)的一切內(nèi)在要素的總和，是設(shè)計(jì)存在的基礎(chǔ)；形式是構(gòu)成內(nèi)容諸要素的內(nèi)部結(jié)構(gòu)或內(nèi)容的外部表現(xiàn)方式。設(shè)計(jì)的內(nèi)容就是指它的主題、形象、題材等要素的總和，形式就是它的結(jié)構(gòu)、風(fēng)格或設(shè)計(jì)語(yǔ)言等表現(xiàn)方式。內(nèi)容決定形式，形式反作用于內(nèi)容。一個(gè)優(yōu)秀的設(shè)計(jì)必定是形式對(duì)內(nèi)容的完美表現(xiàn)。一方面，網(wǎng)頁(yè)設(shè)計(jì)所追求的形式美，必須適合主題的需要，這是網(wǎng)頁(yè)設(shè)計(jì)的前提。
另一方面，要確保網(wǎng)頁(yè)上的每一個(gè)元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。只有通過(guò)認(rèn)真設(shè)計(jì)和充分的考慮來(lái)實(shí)現(xiàn)全面的功能并體現(xiàn)美感才能實(shí)現(xiàn)形式與內(nèi)容的統(tǒng)一。
綜上所述，時(shí)代在不斷發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格也在不斷演變，要想設(shè)計(jì)出更為優(yōu)秀的網(wǎng)頁(yè)，研究各類網(wǎng)頁(yè)藝術(shù)的設(shè)計(jì)規(guī)律將是一門長(zhǎng)期的任務(wù)。
【參考文獻(xiàn)】
《網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)》湯曉山 清華大學(xué)出版社
《多媒體技術(shù)與應(yīng)用》張愛(ài)華 清華大學(xué)出版社
《多媒體技術(shù)與應(yīng)用》李竺 清華大學(xué)出版社
一、網(wǎng)頁(yè)版式設(shè)計(jì)的點(diǎn)、線、面
網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用藝術(shù)形式法則應(yīng)包含多個(gè)方面，比如，點(diǎn)、線、面的構(gòu)成，視覺(jué)流程設(shè)計(jì)，分割與編排設(shè)計(jì)，動(dòng)態(tài)設(shè)計(jì)等。其中，運(yùn)用各種構(gòu)成規(guī)律對(duì)網(wǎng)頁(yè)的各形態(tài)要素進(jìn)行點(diǎn)線面的組合，是網(wǎng)頁(yè)版式設(shè)計(jì)的基本設(shè)計(jì)方法之一。1、網(wǎng)頁(yè)版式設(shè)計(jì)的點(diǎn)點(diǎn)在網(wǎng)頁(yè)的版式設(shè)計(jì)中非常活躍。每個(gè)獨(dú)立的小面積的形象都可以看做是一個(gè)點(diǎn)。頁(yè)面中的點(diǎn)又往往是頁(yè)面的視覺(jué)中心。2、網(wǎng)頁(yè)版式設(shè)計(jì)的線線產(chǎn)生于運(yùn)動(dòng)，是點(diǎn)移動(dòng)的軌跡。不同的線可以引發(fā)人們的各種心理效應(yīng)，具有不同的情感傾向。3、網(wǎng)頁(yè)版式設(shè)計(jì)的面線能分割頁(yè)面，而面則可以承載視覺(jué)符號(hào)，是容納網(wǎng)頁(yè)信息內(nèi)容的造型載體。與點(diǎn)、線相比，面引發(fā)的注意力更大，視覺(jué)沖擊力更強(qiáng)烈，可以體現(xiàn)頁(yè)面的層次感，形成縱深感，具有渾然一體的視覺(jué)效果。4、點(diǎn)、線、面在網(wǎng)頁(yè)設(shè)計(jì)中的綜合運(yùn)用點(diǎn)、線、面在網(wǎng)頁(yè)中的運(yùn)用往往不是孤立的，而是點(diǎn)、線、面各要素綜合的運(yùn)用。在確定網(wǎng)頁(yè)主體形象的位置、動(dòng)態(tài)時(shí)，點(diǎn)線面是需要優(yōu)先考慮的因素。合理安排好點(diǎn)、線、面的相互關(guān)系，對(duì)于設(shè)計(jì)出具有良好視覺(jué)效果的頁(yè)面，合理表達(dá)出網(wǎng)頁(yè)的最終訴求十分重要。
二、網(wǎng)頁(yè)版式設(shè)計(jì)的視覺(jué)流程
網(wǎng)頁(yè)的瀏覽是通過(guò)視覺(jué)元素實(shí)現(xiàn)信息傳播的視覺(jué)傳達(dá)過(guò)程，為了達(dá)到最優(yōu)的視覺(jué)傳達(dá)效果，網(wǎng)頁(yè)的版式設(shè)計(jì)就必須依據(jù)人們?cè)谝曈X(jué)上的心理和生理特點(diǎn)，確定各種視覺(jué)構(gòu)成元素之間的視覺(jué)關(guān)系和瀏覽秩序，即安排好網(wǎng)頁(yè)的視覺(jué)流程。所謂的視覺(jué)流程，是指頁(yè)面內(nèi)容的一種視覺(jué)傳達(dá)過(guò)程，它是以人的生理和心理習(xí)慣的認(rèn)知模式來(lái)進(jìn)行的，是將各種構(gòu)成要素在視覺(jué)運(yùn)動(dòng)的規(guī)定下進(jìn)行空間定位，即從注意力的捕捉起，通過(guò)視覺(jué)流向的誘導(dǎo)，直至最后的印象留存，體現(xiàn)出這一程序的規(guī)劃和誘導(dǎo)性。合理的視覺(jué)流程應(yīng)在與人們認(rèn)識(shí)過(guò)程的心理順序和思維發(fā)展的邏輯一致的基礎(chǔ)上，根據(jù)信息的主次（即傳達(dá)重點(diǎn)）來(lái)確定各元素的順序，并通過(guò)精心安排從而影響、引導(dǎo)瀏覽者的視線移動(dòng)。1、網(wǎng)頁(yè)視覺(jué)流程的三階段當(dāng)我們?yōu)g覽網(wǎng)頁(yè)時(shí)，視覺(jué)流程通常是首先在一瞬間迅速瀏覽頁(yè)面，形成第一印象，接著視線就會(huì)從最吸引注意力的一點(diǎn)開始依次作有序的流動(dòng)，最后完成信息的傳遞。整個(gè)過(guò)程包括印象感知（第一印象）、運(yùn)動(dòng)感知（感知過(guò)程）、整體感知（最終印象）三個(gè)心理感知階段，而每一階段各視覺(jué)要素發(fā)揮的作用都有所不同。在第一階段印象感知中，視線并沒(méi)有集中在頁(yè)面的某一點(diǎn)上，而是對(duì)頁(yè)面的總體認(rèn)識(shí)，在這一階段主要是頁(yè)面的布局和色彩起著形成瀏覽者第一印象的作用。在第二階段運(yùn)動(dòng)感知過(guò)程中，視線從視覺(jué)重點(diǎn)開始，按一定順序?yàn)g覽頁(yè)面，當(dāng)視線遇到較強(qiáng)烈的刺激時(shí)，就會(huì)停留下來(lái)給予足夠的關(guān)注。2、視覺(jué)流程的設(shè)計(jì)要求網(wǎng)頁(yè)的視覺(jué)流程設(shè)計(jì)無(wú)特定的模式，但無(wú)論采用何種視覺(jué)引導(dǎo)方式，都應(yīng)該注意以下基本設(shè)計(jì)要求：（1）符合人的視覺(jué)習(xí)慣。這是網(wǎng)頁(yè)的視覺(jué)流程設(shè)計(jì)的基本要求，做不到這一點(diǎn)，就將大大降低信息的識(shí)別度。（2）有效傳達(dá)信息。視覺(jué)流程要保證可靠的信息傳達(dá)，網(wǎng)頁(yè)的主題表達(dá)就是視覺(jué)流程設(shè)計(jì)的最終目的。（3）突出主要信息。頁(yè)面的編排要以突出主要信息為目標(biāo)，組織頁(yè)面的設(shè)計(jì)元素，合理引導(dǎo)視覺(jué)。一般情況下，長(zhǎng)頁(yè)面的注意中心位于頁(yè)面的中上部，往往是視覺(jué)流程的起點(diǎn)，設(shè)計(jì)中要傳達(dá)的主要信息，如主標(biāo)題、重要內(nèi)容等都可以放在注意中心上。保持視覺(jué)引導(dǎo)的節(jié)奏感和流暢感。3、頁(yè)面間的視覺(jué)流程站點(diǎn)內(nèi)部的信息傳達(dá)是通過(guò)頁(yè)面之間的鏈接和切換來(lái)實(shí)現(xiàn)的，由于網(wǎng)頁(yè)的多維性和抄鏈接性，瀏覽者的瀏覽順序也不是單線性的。瀏覽者依據(jù)自己的需要，按照各自不同的流程獲取信息。合理的站點(diǎn)地圖和導(dǎo)航設(shè)計(jì)才是保持網(wǎng)站視覺(jué)連續(xù)性和信息傳達(dá)有效性的著力點(diǎn)。
三、結(jié)論
作為新興的設(shè)計(jì)門類，網(wǎng)頁(yè)設(shè)計(jì)正在隨著科技文化的發(fā)展不斷前進(jìn)，它的前景也是無(wú)限廣闊。要讓網(wǎng)站傳達(dá)出應(yīng)該有的信息，又要讓人們不斷疲勞的審美眼前一亮，版式設(shè)計(jì)是網(wǎng)頁(yè)設(shè)計(jì)必不可少的重要元素。因此，網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的版式是在動(dòng)中求靜、在靜中求美的一種藝術(shù)設(shè)計(jì)形式。
作者：虞知達(dá) 單位：臨沂大學(xué)傳媒學(xué)院
1.網(wǎng)頁(yè)設(shè)計(jì)中的藝術(shù)設(shè)計(jì)
雖然與平面設(shè)計(jì)相比，網(wǎng)絡(luò)設(shè)計(jì)對(duì)藝術(shù)元素強(qiáng)調(diào)的不多，但是網(wǎng)頁(yè)設(shè)計(jì)中的藝術(shù)設(shè)計(jì)是計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展進(jìn)步的要求。創(chuàng)新是一個(gè)民族進(jìn)步的靈魂，是我們不懈發(fā)展的動(dòng)力。網(wǎng)頁(yè)設(shè)計(jì)中的藝術(shù)元素要求設(shè)計(jì)師們進(jìn)行創(chuàng)造性思維活動(dòng)。
網(wǎng)頁(yè)設(shè)計(jì)中的藝術(shù)設(shè)計(jì)細(xì)胞包含三個(gè)方面的內(nèi)容。首先是視聽上的藝術(shù)細(xì)胞。在視聽上有如文本、圖像、背景音樂(lè)、導(dǎo)航工具等視聽元素。其中文本是其主導(dǎo)地位的一個(gè)元素，因?yàn)橐粋€(gè)網(wǎng)站最終是要表達(dá)一個(gè)思想或傳遞些信息，而文字的好壞直接關(guān)系到網(wǎng)頁(yè)的整體質(zhì)量。能夠直接吸引觀眾注意力的當(dāng)屬音頻、視頻和動(dòng)畫元素的設(shè)計(jì)上，為了突出重點(diǎn)，往往采取把動(dòng)畫設(shè)計(jì)在彈出廣告中，或用在導(dǎo)航條中，視頻的出現(xiàn)使得網(wǎng)絡(luò)的內(nèi)容更加豐富多彩。
其次是版式上的藝術(shù)細(xì)胞。簡(jiǎn)單地說(shuō)，網(wǎng)頁(yè)的版式設(shè)計(jì)就是在有限的空間上如何將大容量的信息進(jìn)行排列組合，而不同的組合模式所產(chǎn)生的效果也大不相同。每種版式各有千秋，使用不同的網(wǎng)站設(shè)計(jì)主題，有滿版型的、對(duì)稱型的、分割型的等。網(wǎng)絡(luò)設(shè)計(jì)者應(yīng)當(dāng)首先進(jìn)行定性分析，分析如何使整個(gè)網(wǎng)頁(yè)總體美觀、整潔和有條理，同時(shí)還要進(jìn)行定量分析，小小的設(shè)計(jì)空間上進(jìn)行布局。
再次是色彩上的藝術(shù)細(xì)胞。一個(gè)網(wǎng)站必須要有一兩個(gè)主題色彩來(lái)象征網(wǎng)站的內(nèi)涵，這是進(jìn)行市場(chǎng)競(jìng)爭(zhēng)的重要步驟，我們應(yīng)當(dāng)注意到色彩對(duì)人視覺(jué)效果的沖擊。色彩的搭配和運(yùn)用既是一門技術(shù)活，也是一門藝術(shù)。往往不同的色彩所折射出來(lái)的概念是不一樣的。例如，綠白組合可以使人感覺(jué)優(yōu)雅舒適，紅色可以凸顯喜慶的氛圍，藍(lán)白混合能給人清新淡雅的印象。在設(shè)計(jì)規(guī)劃中，強(qiáng)調(diào)整體性和一致性，雜亂無(wú)章的界面只會(huì)增加網(wǎng)絡(luò)用戶的厭惡感。
2.網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)應(yīng)當(dāng)注意的問(wèn)題
值得注意的是，藝術(shù)設(shè)計(jì)包含較多的主觀因素，因此對(duì)網(wǎng)頁(yè)設(shè)計(jì)者有一定的技術(shù)要求，要求熟練掌握各種軟硬件技術(shù)，把技術(shù)和藝術(shù)交融在一起，發(fā)揮技術(shù)的支持性作用和藝術(shù)的想象空間。注意形式美和實(shí)質(zhì)效果的統(tǒng)一。如果為了追求獨(dú)特風(fēng)格設(shè)計(jì)而缺乏網(wǎng)頁(yè)內(nèi)容的真實(shí)性，又或者只重視內(nèi)容的充實(shí)而忽視了藝術(shù)表現(xiàn)，那么結(jié)果都是使網(wǎng)頁(yè)設(shè)計(jì)顯得空洞蒼白。只有將兩者有效統(tǒng)一起來(lái)，在和諧的外表下使用戶的視、聽覺(jué)領(lǐng)會(huì)到主題內(nèi)容的精髓，才能使網(wǎng)頁(yè)設(shè)計(jì)具有價(jià)值。
注意網(wǎng)頁(yè)設(shè)計(jì)的持續(xù)性和交換性問(wèn)題。網(wǎng)頁(yè)設(shè)計(jì)是在網(wǎng)絡(luò)環(huán)境下完成的，不同于傳統(tǒng)媒介方式，因此要求網(wǎng)頁(yè)設(shè)計(jì)者的觀點(diǎn)與時(shí)俱進(jìn)，進(jìn)行改變。現(xiàn)代信息變化莫測(cè)，人們接受信息的方式也發(fā)生根本的轉(zhuǎn)變，人們不再是吸納信息的被動(dòng)接受者，而是有個(gè)人的偏好和傾向，及時(shí)反饋用戶的信息是網(wǎng)頁(yè)設(shè)計(jì)取得進(jìn)步的經(jīng)驗(yàn)和寶貴財(cái)富，也是企業(yè)螺旋式上升的必然結(jié)果。
3.小結(jié)
總而言之，網(wǎng)絡(luò)的出現(xiàn)使人們的宣傳和交流方式發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)設(shè)計(jì)是計(jì)算機(jī)科學(xué)和美學(xué)相結(jié)合的綜合性工作，它有自身的發(fā)展演變規(guī)律，需要后人遵循基本的藝術(shù)法則和美學(xué)規(guī)律。它對(duì)設(shè)計(jì)工作者提出了較高的要求，是內(nèi)容與形式的統(tǒng)一，是整體與局部的統(tǒng)一，是藝術(shù)和技術(shù)的統(tǒng)一，是主觀和客觀的統(tǒng)一。隨著技術(shù)的繼續(xù)前進(jìn)和人們追求美的標(biāo)準(zhǔn)的不斷變化，網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)永遠(yuǎn)是一門學(xué)不完的學(xué)問(wèn)。雖然不同網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)模式各不相同，但是共同點(diǎn)是網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)都能充分利用網(wǎng)頁(yè)的功能，提高網(wǎng)頁(yè)的內(nèi)在美和外在美。
作者：華冰丁寧單位：石家莊學(xué)院美術(shù)系
摘要:隨著互聯(lián)網(wǎng)的蓬勃發(fā)展,出現(xiàn)了許多優(yōu)秀的企業(yè)主頁(yè)
>> 淺析網(wǎng)頁(yè)設(shè)計(jì)原則與制作技巧 網(wǎng)頁(yè)設(shè)計(jì)原則及技巧 網(wǎng)頁(yè)設(shè)計(jì)的小技巧 Dreamweaver必備網(wǎng)頁(yè)設(shè)計(jì)技巧 淺談網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)中的網(wǎng)頁(yè)版式設(shè)計(jì)與編排 對(duì)網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)的探討與研究 藝術(shù)高職院校網(wǎng)頁(yè)設(shè)計(jì)教學(xué)的研究與實(shí)踐 網(wǎng)頁(yè)設(shè)計(jì)中藝術(shù)創(chuàng)新的研究與實(shí)現(xiàn)探討 探討網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)與處理原則 淺談網(wǎng)頁(yè)藝術(shù)設(shè)計(jì) 網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)探索 網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)初探 《網(wǎng)頁(yè)設(shè)計(jì)與制作》 網(wǎng)頁(yè)設(shè)計(jì)的布局和用色技巧 網(wǎng)站設(shè)計(jì)及網(wǎng)頁(yè)制作技巧 網(wǎng)頁(yè)的版式設(shè)計(jì)技巧探討 網(wǎng)頁(yè)新聞編譯的原則與技巧 網(wǎng)頁(yè)配色的方法與技巧 淺談網(wǎng)頁(yè)制作的經(jīng)驗(yàn)與技巧 板式設(shè)計(jì)課程中的網(wǎng)頁(yè)版式設(shè)計(jì)結(jié)構(gòu)與藝術(shù)性探索 常見問(wèn)題解答 當(dāng)前所在位置：或.html即可。這時(shí),保存的位置中會(huì)出現(xiàn)相應(yīng)的網(wǎng)頁(yè)文件了,直接打開,就可看到網(wǎng)頁(yè)的效果。但是單由記事本編輯出的網(wǎng)頁(yè)在效果上會(huì)過(guò)于簡(jiǎn)單,不美觀,或功能不是很完善,這就需要我們?cè)诤?jiǎn)單掌握html語(yǔ)言后,利用其它的,更為直觀的網(wǎng)頁(yè)制作工具來(lái)進(jìn)行網(wǎng)頁(yè)的制作了。
1.2 掌握網(wǎng)頁(yè)三劍客和簡(jiǎn)單的數(shù)據(jù)庫(kù)使用
何為網(wǎng)頁(yè)三劍客?是目前比較流行的制作網(wǎng)頁(yè)的三個(gè)工具軟件,Dreamweaver、Fireworks和Flash。其中Dreamweaver可用來(lái)制作靜態(tài)網(wǎng)頁(yè)、動(dòng)態(tài)網(wǎng)頁(yè)、創(chuàng)建和管理網(wǎng)站、制作樣式表等等,功能強(qiáng)大,應(yīng)用范圍很廣。Fireworks是圖像處理軟件,不僅具備復(fù)雜的圖像處理功能,并且能輕松地把圖形輸出到第三方的應(yīng)用程序中,它最大的特點(diǎn)是,應(yīng)用網(wǎng)頁(yè)制作方面的切片功能,使網(wǎng)頁(yè)圖片處理起來(lái)更方便,快捷了。Flas制作軟件,目前,大大小小的網(wǎng)頁(yè)中,都有flas存在著,給網(wǎng)頁(yè)增添了精彩的效果,使網(wǎng)頁(yè)更加精致,還可利用flash制作出有趣的游戲,留言板,聊天室等等,是功能強(qiáng)大的應(yīng)用軟件。
網(wǎng)頁(yè)中經(jīng)常會(huì)用到聊天室、留言板、用戶注冊(cè)、網(wǎng)上問(wèn)答等等內(nèi)容,這樣網(wǎng)頁(yè)就被分成了動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)二種,不使用服務(wù)器相關(guān)內(nèi)容,不使用數(shù)據(jù)庫(kù)鏈接的網(wǎng)頁(yè)被稱為靜態(tài)網(wǎng)頁(yè),直接使用Dreamweaver來(lái)進(jìn)行編輯就可以了,它的文件名中的擴(kuò)展名為.htm或.html。而動(dòng)態(tài)網(wǎng)頁(yè)正是相對(duì)于靜態(tài)網(wǎng)頁(yè)來(lái)說(shuō)的,它的擴(kuò)展名一般為.asp或.php等等。這種網(wǎng)頁(yè)要使用相應(yīng)的服務(wù)器技術(shù),并用到數(shù)據(jù)庫(kù)和數(shù)據(jù)庫(kù)鏈接知識(shí)。常用的數(shù)據(jù)庫(kù)有Access數(shù)據(jù)庫(kù)、SQL Server數(shù)據(jù)庫(kù)等[2]。
3 網(wǎng)頁(yè)內(nèi)容的選取
網(wǎng)頁(yè)的內(nèi)容是靈魂,制作的網(wǎng)頁(yè)是否受歡迎,是否能吸引訪問(wèn)者的眼球,是否能達(dá)到預(yù)期的效果。這些都是網(wǎng)頁(yè)制作時(shí)我們必須要預(yù)先考慮的問(wèn)題。
那么如何完成內(nèi)容的定位泥?
① 在定位網(wǎng)站內(nèi)容時(shí),要做到小而精,切忌包羅萬(wàn)象。把你認(rèn)為最精彩的東西都放在上面,那么往往會(huì)事與愿違,給人以內(nèi)容泛泛,大而空的感覺(jué).最好做比較專一的內(nèi)容。試想,如果我們將自己最擅長(zhǎng)的某種知識(shí)或技術(shù)等內(nèi)容做到網(wǎng)頁(yè)中,建立一個(gè)專題的站點(diǎn),那么一旦有訪問(wèn)者第一次在這里一下子就找到了他想找的內(nèi)容的話。那么如果再有這方面的需求,首先就會(huì)想到你的站點(diǎn)。
② 如果是個(gè)人網(wǎng)頁(yè),那就一定要突出自身的個(gè)性,當(dāng)今社會(huì)是提倡張揚(yáng)個(gè)性的時(shí)代,除了別人都有的內(nèi)容之外,自己還要融入一些自身的特點(diǎn),是內(nèi)容要有亮點(diǎn),配色也可不拘一格,大膽用色。從各個(gè)角度烘托出制作者的獨(dú)特性格。
③ 如果是企業(yè)的站點(diǎn),要注意的是:企業(yè)的運(yùn)營(yíng)宗旨是否能完好體現(xiàn),能否在網(wǎng)頁(yè)中最大限度體現(xiàn)企業(yè)網(wǎng)站功能和用戶最需要的內(nèi)容,用戶的操作是否簡(jiǎn)便等;要做到網(wǎng)頁(yè)內(nèi)容主次分明,結(jié)構(gòu)要清晰簡(jiǎn)潔。
④ 對(duì)于能留住訪問(wèn)者的另一個(gè)重要問(wèn)題,就是網(wǎng)頁(yè)的速度。對(duì)于一個(gè)瀏覽頁(yè)面時(shí)間超長(zhǎng)的網(wǎng)頁(yè),我想不會(huì)讓人有再次訪問(wèn)的想法。對(duì)于線路和網(wǎng)路本身的速度我們不能控制,但我們可以在網(wǎng)頁(yè)設(shè)計(jì)中避免一些影響速度的因素。好的網(wǎng)頁(yè)應(yīng)是越簡(jiǎn)單易讀越好。我們可以從以下幾個(gè)方面來(lái)考慮。首先,影響瀏覽速度的最重要因素之一是圖片容量大小,漂亮的圖片、絢麗的動(dòng)畫效果,會(huì)使你的主頁(yè)增光添彩,但圖片的容量大小卻是直接導(dǎo)致瀏覽速度慢嚴(yán)重后果。盡管你的內(nèi)容精彩絕倫,網(wǎng)頁(yè)漂亮,但打開你的網(wǎng)頁(yè)需要等上半天,在這時(shí)間就是金錢的時(shí)代,誰(shuí)會(huì)再次的光顧呢?可利用圖片制作工具將圖片進(jìn)行加工,在不太影響效果的前提下,可利用修改存儲(chǔ)格式,降低像素,分辨率,減少動(dòng)畫應(yīng)用等途經(jīng)來(lái)達(dá)到目的。
4 網(wǎng)頁(yè)制作步驟
制作網(wǎng)頁(yè)和裝修差不多,先從整體的角度構(gòu)思出網(wǎng)頁(yè)的內(nèi)容、色彩等,然后利用相應(yīng)的軟件進(jìn)行實(shí)際操作。
① 網(wǎng)站定位
先確定所要建立的網(wǎng)站的類型,確定網(wǎng)站風(fēng)格,網(wǎng)站色調(diào),網(wǎng)站層次,將網(wǎng)站結(jié)構(gòu)先確立出來(lái)。
② 收集素材
現(xiàn)在的互聯(lián)上的資源非常豐富,各種各樣的圖片資源、動(dòng)畫資源等多媒體資源比比皆是,就所確定的網(wǎng)站風(fēng)格等因素,收集相關(guān)素材。
③ 使用Fireworks等圖型制作軟件將網(wǎng)頁(yè)先畫出來(lái)
這一步驟很關(guān)鍵,無(wú)論使用哪種網(wǎng)頁(yè)制作軟件,在進(jìn)行編輯時(shí)經(jīng)常用到表格,用表格來(lái)定位圖片,用表格來(lái)定位文本,用表格來(lái)組合被切割的小圖片等。因?yàn)榫W(wǎng)頁(yè)時(shí)經(jīng)常會(huì)出現(xiàn)后位置更改的現(xiàn)象,使用表格來(lái)規(guī)劃網(wǎng)頁(yè),會(huì)得到事半功倍的效果。另外,小圖片的下載速度要比一整張大圖片的下載速度快的多,所以在網(wǎng)頁(yè)中多是將大的圖片切割成小部分后,利用無(wú)邊框,無(wú)間距的表格將小圖片組合成一張大圖。那么,第一步,在使用表格制作前,應(yīng)用圖片處理軟件進(jìn)行網(wǎng)頁(yè)設(shè)計(jì),將整個(gè)網(wǎng)頁(yè)的效果圖片畫出來(lái)。第二步,利用Fireworks的切片工具,將所畫出的效果圖切成適合的小圖片,以備使用。
④ 利用Flas制作軟件制作LOGO和Banner動(dòng)畫
LOGO是網(wǎng)站的標(biāo)識(shí),是一個(gè)站點(diǎn)的象征,是網(wǎng)站形象的重要體現(xiàn)。一個(gè)精美的LOGO可以很好地樹立網(wǎng)站的形像。LOGO一般放在網(wǎng)頁(yè)的左上角,大小有三種常用規(guī)格:88×31、120×60和120×90。Banner被稱為網(wǎng)幅廣告、旗幟廣告或橫幅廣告,是網(wǎng)絡(luò)廣告的主要形式,一般使用GIF格式的圖像文件,也可以使用靜態(tài)圖形,也可用多幀圖像拼接為動(dòng)畫圖像等[2]。
⑤ 添加相應(yīng)的服務(wù)技術(shù)
網(wǎng)頁(yè)如果被制作成動(dòng)態(tài)網(wǎng)頁(yè)形式,首先要添加相應(yīng)的服務(wù)技術(shù),在我們常用的windows系統(tǒng)中,先要添加IIS網(wǎng)絡(luò)服務(wù)組件,這是windows系統(tǒng)的組件,需要到控制面板中的添加或刪除程序?qū)υ捒蛑?選擇添加刪除windows組件一項(xiàng)中進(jìn)行internet信息服務(wù)(IIS)的添加,這時(shí)需要我們?cè)诠怛?qū)中放入系統(tǒng),或者可以到網(wǎng)絡(luò)上進(jìn)行下載。
⑥ 創(chuàng)建數(shù)據(jù)庫(kù)
網(wǎng)頁(yè)中留言板、信息反饋、用戶注冊(cè)等等內(nèi)容都要通過(guò)數(shù)據(jù)庫(kù)對(duì)其內(nèi)容進(jìn)行存儲(chǔ),以備網(wǎng)頁(yè)調(diào)用[3]。一般的asp動(dòng)態(tài)網(wǎng)頁(yè)使用Access做為數(shù)據(jù)庫(kù),Access使用起來(lái)很方便,可以根據(jù)向?qū)?lái)創(chuàng)建數(shù)據(jù)庫(kù)內(nèi)容。
⑦ 使用Dreamweaver制作網(wǎng)頁(yè)
所有的準(zhǔn)備工作已經(jīng)差不多了,我們現(xiàn)在要做的是,用Dreamweaver網(wǎng)頁(yè)制作軟件將已有的圖片、文本、數(shù)據(jù)庫(kù)等等內(nèi)容組合到一起,形成我們的網(wǎng)站。首先,創(chuàng)建一個(gè)新的站點(diǎn),在站點(diǎn)內(nèi)新建網(wǎng)頁(yè),一般使用index.htm或index.asp做主頁(yè)名稱。其次,在網(wǎng)頁(yè)中插入表格,將已經(jīng)完成的圖片、動(dòng)畫等多媒體內(nèi)容插入到網(wǎng)頁(yè)中。然后,加入相應(yīng)的圖片效果、鼠標(biāo)經(jīng)過(guò)、超級(jí)鏈接等內(nèi)容。最后添加相應(yīng)的樣式表內(nèi)容,還可以利用行為面板,給網(wǎng)頁(yè)加入一些特效,如彈出窗口、時(shí)間軸特效等。還可以從網(wǎng)站上下載插件,安裝在Dreamweaver中,以增添效果。如果動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容需要添加數(shù)據(jù)庫(kù)鏈接內(nèi)容,那我們就要在Dreamweaver中的數(shù)據(jù)庫(kù)面板中進(jìn)行操作,添加數(shù)據(jù)源、綁定數(shù)據(jù)、記錄集和服務(wù)器等內(nèi)容。使網(wǎng)頁(yè)更具有實(shí)效性。
5 結(jié)束語(yǔ)
網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)注重實(shí)踐操作和設(shè)計(jì)的課程,需要我們?cè)谥谱髦胁粩嗟膶W(xué)習(xí),不斷的探索;在互聯(lián)網(wǎng)應(yīng)用如此廣泛的今天,網(wǎng)頁(yè)制作的是否精美、實(shí)用,是否有訪問(wèn)量等等是評(píng)價(jià)網(wǎng)頁(yè)優(yōu)劣的最好方法。讓我們?cè)趯?shí)踐中進(jìn)步,在實(shí)踐中走出一條屬于自己的路。
參考文獻(xiàn):
[1] 丁桂芝.ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)教程[M].北京:中國(guó)鐵道出版社,2005:16-18.
網(wǎng)頁(yè)設(shè)計(jì)的目的是提供一種功能強(qiáng)大、使用方便、頁(yè)面美觀的形式，讓瀏覽者能夠方便快捷地了解網(wǎng)頁(yè)所提供的信息，提升用戶體驗(yàn)，并最終引導(dǎo)瀏覽者的行為。研究網(wǎng)頁(yè)設(shè)計(jì)信息現(xiàn)象對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展有重要的指導(dǎo)意義。
一、網(wǎng)頁(yè)設(shè)計(jì)信息的概念
法國(guó)學(xué)者德盧西奧•邁耶在《視覺(jué)美學(xué)》中寫道：“一件藝術(shù)作品不是獨(dú)白而是對(duì)話。”同樣，網(wǎng)頁(yè)設(shè)計(jì)也不是設(shè)計(jì)師的個(gè)人獨(dú)白，而是與瀏覽者的對(duì)話。既然是對(duì)話，那么其中就一定有信息的交流與傳遞。控制論科學(xué)創(chuàng)始人美國(guó)數(shù)學(xué)家諾伯特•維納將信息定義為：“信息是人們?cè)谶m應(yīng)及控制外部世界、并且使這種適應(yīng)及控制反作用于外部世界的過(guò)程中，同外部世界進(jìn)行交換的內(nèi)容的名稱。”對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)信息就是網(wǎng)頁(yè)設(shè)計(jì)師（發(fā)送者）對(duì)網(wǎng)站環(huán)境進(jìn)行調(diào)節(jié)與設(shè)計(jì)，并讓這種設(shè)計(jì)被網(wǎng)頁(yè)瀏覽者（接收者）所理解時(shí)產(chǎn)生的與網(wǎng)站環(huán)境進(jìn)行交換的產(chǎn)物。對(duì)網(wǎng)頁(yè)設(shè)計(jì)師而言，如果感到網(wǎng)站環(huán)境有某種不確定性（如如何傳達(dá)客戶的需求及理念，如何布局網(wǎng)頁(yè)的形式等），設(shè)計(jì)師便會(huì)產(chǎn)生審美注意；當(dāng)設(shè)計(jì)師通過(guò)某種途徑或方法接收到了有效信息時(shí)（這種信息可以是某種設(shè)計(jì)形式、某種設(shè)計(jì)方案等），就消除了對(duì)網(wǎng)站環(huán)境的不確定性，并完成了對(duì)設(shè)計(jì)信息的編碼。而對(duì)于網(wǎng)頁(yè)瀏覽者而言，瀏覽者對(duì)于網(wǎng)站環(huán)境感到有疑問(wèn)或不確定的時(shí)候（如感興趣的資料在哪里、布局是否合理等），也會(huì)產(chǎn)生審美注意；當(dāng)瀏覽者通過(guò)對(duì)信息編碼的破譯接收到了有效信息時(shí)（如在網(wǎng)頁(yè)上獲取到了需要的資料），也消除了對(duì)網(wǎng)站環(huán)境的不確定性。這樣，網(wǎng)頁(yè)設(shè)計(jì)中的設(shè)計(jì)對(duì)話和設(shè)計(jì)活動(dòng)便在信息傳遞中真正形成。
二、網(wǎng)頁(yè)設(shè)計(jì)信息的層次
在網(wǎng)頁(yè)設(shè)計(jì)信息傳播的過(guò)程中，設(shè)計(jì)信息是一種多層次的復(fù)雜信息綜合體，可以分為技術(shù)信息、語(yǔ)義信息和審美信息三個(gè)層次。網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)信息指的是信息的物質(zhì)層面或形式層面，不僅包括網(wǎng)頁(yè)設(shè)計(jì)的布局、色彩、音效、交互等信息，也包括隱藏在網(wǎng)頁(yè)背后、能夠讓網(wǎng)頁(yè)正常呈現(xiàn)及運(yùn)行的網(wǎng)站編程語(yǔ)言，體現(xiàn)了網(wǎng)站整體知覺(jué)環(huán)境和網(wǎng)站的后臺(tái)環(huán)境。因此，技術(shù)信息就是網(wǎng)頁(yè)表現(xiàn)形式的信息。網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)義信息指的是信息的內(nèi)容，即單純作為語(yǔ)言意義的信息。這種信息不僅泛指網(wǎng)頁(yè)需要傳達(dá)的文本內(nèi)容，也包括由網(wǎng)頁(yè)布局、色彩、音效、交互等體現(xiàn)出來(lái)的設(shè)計(jì)符號(hào)、設(shè)計(jì)功能、交互體驗(yàn)方式等，體現(xiàn)了網(wǎng)站的前臺(tái)環(huán)境。網(wǎng)頁(yè)設(shè)計(jì)的語(yǔ)義信息服從普遍邏輯，具有可理解、可翻譯為其他語(yǔ)言結(jié)構(gòu)的特點(diǎn)。
三、網(wǎng)頁(yè)設(shè)計(jì)信息的流動(dòng)方式與特征
美國(guó)數(shù)學(xué)家克勞德•香農(nóng)為一般通信過(guò)程建立起一個(gè)信息流動(dòng)的物理模型，主要包括四個(gè)階段：信息源——編碼器——信道——譯碼器和信宿。根據(jù)這個(gè)物理模型，也可以模擬出網(wǎng)頁(yè)設(shè)計(jì)信息流通的基本過(guò)程。網(wǎng)頁(yè)設(shè)計(jì)信息流動(dòng)模型中的信息源指的是信息的來(lái)源，廣義上說(shuō)是指一定時(shí)代人類的社會(huì)生活，因?yàn)樗杏嘘P(guān)網(wǎng)頁(yè)設(shè)計(jì)的動(dòng)機(jī)、課題、素材、經(jīng)驗(yàn)等都是源于現(xiàn)代社會(huì)生活；狹義上說(shuō)是源于客戶對(duì)網(wǎng)站的策劃與要求，以及設(shè)計(jì)師在實(shí)現(xiàn)其策劃要求時(shí)所體現(xiàn)出的審美經(jīng)驗(yàn)。編碼器的作用是設(shè)計(jì)師把從信息源得到的信息制作成瀏覽者能夠接受與理解的信號(hào)的活動(dòng)。設(shè)計(jì)師的編碼包括技術(shù)（語(yǔ)法）編碼、語(yǔ)義編碼和審美編碼。技術(shù)編碼是設(shè)計(jì)師對(duì)構(gòu)成網(wǎng)頁(yè)設(shè)計(jì)的界面編排、造型、色彩、音響、交互等進(jìn)行系統(tǒng)的安排，以構(gòu)成特定設(shè)計(jì)形態(tài)的過(guò)程；語(yǔ)義編碼是設(shè)計(jì)師運(yùn)用相關(guān)的網(wǎng)絡(luò)技術(shù)手段，將網(wǎng)頁(yè)所要傳達(dá)的基本內(nèi)容凝定在技術(shù)信息中的過(guò)程；審美編碼就是設(shè)計(jì)師根據(jù)自身的審美經(jīng)驗(yàn)和個(gè)性色彩對(duì)設(shè)計(jì)形態(tài)和基本內(nèi)容進(jìn)行藝術(shù)處理的過(guò)程。信道是用于承載網(wǎng)頁(yè)設(shè)計(jì)信息本身的虛擬物質(zhì)，設(shè)計(jì)信息需要通過(guò)網(wǎng)頁(yè)的造型、圖像、色彩、照明、音響、交互、云技術(shù)手段等進(jìn)行傳輸和存儲(chǔ)。設(shè)計(jì)信息傳輸信道常常是既有圖像、色彩、文字等視覺(jué)型信道，也有帶有聲音的音響型信道，還有可以進(jìn)行人機(jī)互動(dòng)的交互型信道及上述多種手段結(jié)合的復(fù)合型信道。在網(wǎng)頁(yè)設(shè)計(jì)多元化的今天，多信道的傳輸已經(jīng)十分普遍。瀏覽者在設(shè)計(jì)信息的傳輸過(guò)程中相當(dāng)于譯碼器和信宿。所謂譯碼就是瀏覽者把從信道上接受到的信號(hào)翻譯為自身懂得的信號(hào)的過(guò)程。瀏覽者依據(jù)頭腦中所掌握的相關(guān)技術(shù)符號(hào)，首先對(duì)通過(guò)各種信道傳輸過(guò)來(lái)的網(wǎng)頁(yè)表現(xiàn)形態(tài)及呈現(xiàn)方式等信息做出是否明白或理解的判斷，這是第一次譯碼，即語(yǔ)法算子譯碼。如瀏覽者是否可以明白網(wǎng)頁(yè)的操作方式，如果明白，需要進(jìn)一步根據(jù)自身的主觀意識(shí)、評(píng)定標(biāo)準(zhǔn)及所處時(shí)代的要求等，即所掌握的語(yǔ)義符號(hào)，對(duì)信息進(jìn)行再次譯碼，找到所需的有效信息，即語(yǔ)義算子譯碼。在此基礎(chǔ)上，再根據(jù)受眾的審美經(jīng)驗(yàn)、審美趣味、審美認(rèn)識(shí)等對(duì)網(wǎng)頁(yè)信息作出第三次譯碼，在了解網(wǎng)頁(yè)基本內(nèi)容的同時(shí)獲得審美信息，即審美算子譯碼。信宿指的是信息發(fā)送、傳輸?shù)哪康牡亍g覽者將破譯后的信息存放在信宿中，并且對(duì)該信息再一次作出鑒別和判斷，過(guò)濾無(wú)效信息（噪聲），吸納有價(jià)值、有意義的信息，從而影響自己的知識(shí)結(jié)構(gòu)及行為心理，如選擇購(gòu)買該網(wǎng)頁(yè)的產(chǎn)品等。這些有價(jià)值的信息會(huì)漸漸形成接收者自身的經(jīng)驗(yàn)與知識(shí)結(jié)構(gòu)，在以后的判斷和譯碼時(shí)發(fā)揮作用。受眾對(duì)信息的破譯和信宿的情況可以通過(guò)相關(guān)檢測(cè)手段（如點(diǎn)擊率、瀏覽者評(píng)論等）進(jìn)行統(tǒng)計(jì)，成為信息源中的成分，從而再一次反饋給編碼器設(shè)計(jì)師，這樣就完成了設(shè)計(jì)信息的循環(huán)流動(dòng)。
四、結(jié)語(yǔ)
研究網(wǎng)頁(yè)設(shè)計(jì)信息流動(dòng)過(guò)程是優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)傳播效果的重要手段之一，不但可以提高信息傳播的速度、優(yōu)化信息傳播的效果、增強(qiáng)受眾的使用體驗(yàn)，而且可以讓設(shè)計(jì)者從信息論美學(xué)的角度去考慮網(wǎng)頁(yè)設(shè)計(jì)的問(wèn)題，對(duì)網(wǎng)頁(yè)設(shè)計(jì)有著重要的指導(dǎo)作用。
作者： 鄒攀宇 單位：湖南師范大學(xué)
關(guān)鍵詞:網(wǎng)頁(yè)設(shè)計(jì)；網(wǎng)格設(shè)計(jì)；秩序；靈動(dòng)
近幾年來(lái)，隨著科技的進(jìn)步，互聯(lián)網(wǎng)的發(fā)展使得信息的傳播突破了傳統(tǒng)的政治、經(jīng)濟(jì)、地域及文化的阻隔，而網(wǎng)頁(yè)借由網(wǎng)絡(luò)的運(yùn)行，將所信息用最快、最方便的形式向網(wǎng)頁(yè)的瀏覽者傳達(dá)。因而網(wǎng)頁(yè)設(shè)計(jì)作逐漸被人們所認(rèn)可并認(rèn)識(shí)，但是現(xiàn)在由于設(shè)計(jì)軟件增多并過(guò)分依賴于它，致使網(wǎng)頁(yè)設(shè)計(jì)重視技術(shù)操作，使得網(wǎng)頁(yè)設(shè)計(jì)存活于混沌之中。而雅各布•尼爾森說(shuō)：“網(wǎng)絡(luò)是最終授權(quán)于消費(fèi)者的環(huán)境，他（她）點(diǎn)擊鼠標(biāo)就能決定所有事。到達(dá)任何地方都如此簡(jiǎn)單，世界上所有的競(jìng)爭(zhēng)者都只是一次鼠標(biāo)點(diǎn)擊的差距。”故網(wǎng)頁(yè)設(shè)計(jì)的目標(biāo)是實(shí)現(xiàn)內(nèi)容的整合，兼顧信息量大且易于閱讀，能夠吸引瀏覽者停留在某個(gè)頁(yè)面上。而網(wǎng)格設(shè)計(jì)的本質(zhì)上來(lái)說(shuō)是一件設(shè)計(jì)作品的骨骼，不僅僅能夠賦予設(shè)計(jì)以秩序感，幫助形成清楚且連貫的信息關(guān)系，還能給設(shè)計(jì)的表述和創(chuàng)造提供豐富的機(jī)會(huì)。這也能夠逐步使瀏覽者對(duì)網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)美感得到認(rèn)同。
一、網(wǎng)頁(yè)設(shè)計(jì)的溯源
上世紀(jì)60年代，借由戰(zhàn)爭(zhēng)的推動(dòng)而形成最初的計(jì)算機(jī)網(wǎng)絡(luò)。而互聯(lián)網(wǎng)的前身起源于1969年，美國(guó)國(guó)防部的指示下由四臺(tái)計(jì)算機(jī)組成，名為阿帕網(wǎng)(ARPNET)。而在1974年提出的通訊協(xié)議和TCP/IP協(xié)議的應(yīng)用，才使同時(shí)互聯(lián)網(wǎng)成為一個(gè)開放系統(tǒng)。并在上世紀(jì)九十年代電腦技術(shù)的飛速發(fā)展，圖像、聲音、多媒體元素等新的數(shù)字媒介進(jìn)入到互聯(lián)網(wǎng)之中，進(jìn)而網(wǎng)頁(yè)的設(shè)計(jì)也由于一些新的技術(shù)的加入，網(wǎng)頁(yè)中有越來(lái)越多的因素能夠被規(guī)劃并進(jìn)行設(shè)計(jì)，這著實(shí)讓網(wǎng)頁(yè)設(shè)計(jì)成為一種全新的藝術(shù)設(shè)計(jì)形式。而網(wǎng)頁(yè)設(shè)計(jì)是基于互聯(lián)網(wǎng)為載體，以數(shù)字網(wǎng)絡(luò)技術(shù)為基礎(chǔ)，并依照、遵循設(shè)計(jì)的表現(xiàn)形式及其規(guī)律，以此來(lái)達(dá)到設(shè)計(jì)的目的與功能，并且網(wǎng)頁(yè)設(shè)計(jì)強(qiáng)調(diào)藝術(shù)與科學(xué)要建立一個(gè)密切的聯(lián)系與結(jié)合，形成一種新形式的視覺(jué)傳達(dá)活動(dòng)，使平面設(shè)計(jì)在現(xiàn)代社會(huì)中得到發(fā)展與延伸。未來(lái)的網(wǎng)頁(yè)設(shè)計(jì)不但在依照設(shè)計(jì)的目的及要求的同時(shí)，更以所處的時(shí)代背景下獲取最好的技術(shù)，加以藝術(shù)的表達(dá)形式為基礎(chǔ)，有意識(shí)地對(duì)其進(jìn)行藝術(shù)的創(chuàng)造性規(guī)劃活動(dòng)。不僅能帶給網(wǎng)頁(yè)瀏覽者美麗的視覺(jué)體驗(yàn)，同時(shí)更好的發(fā)揮了其信息傳達(dá)的作用。
二、網(wǎng)頁(yè)設(shè)計(jì)中秩序與靈動(dòng)的起點(diǎn)
在網(wǎng)頁(yè)設(shè)計(jì)飛速發(fā)展的時(shí)代，人們?cè)谧非笾W(wǎng)頁(yè)的強(qiáng)大信息量且易讀的同時(shí)，尋求網(wǎng)頁(yè)設(shè)計(jì)中的秩序與靈動(dòng)的設(shè)計(jì)方法，這就可以滿足網(wǎng)頁(yè)的美感與實(shí)用性。通過(guò)多年來(lái)實(shí)踐，設(shè)計(jì)師發(fā)現(xiàn)這些都需要有網(wǎng)頁(yè)版式設(shè)計(jì)才能夠達(dá)到，它不但使了網(wǎng)頁(yè)富有自己獨(dú)特的藝術(shù)風(fēng)格及特征，還可以以此吸引瀏覽者的注意力，增強(qiáng)網(wǎng)頁(yè)內(nèi)容的秩序傳達(dá)性，這種秩序不是強(qiáng)加于瀏覽者的，而是為瀏覽者創(chuàng)造獨(dú)特的體驗(yàn)。因此，在網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)版式設(shè)計(jì)具有起點(diǎn)的作用，并且網(wǎng)頁(yè)版式設(shè)計(jì)是由網(wǎng)格系統(tǒng)組成，沒(méi)有網(wǎng)格系統(tǒng)的輔助，難以達(dá)到頁(yè)面清晰美觀，內(nèi)容組織合理，無(wú)法在網(wǎng)頁(yè)設(shè)計(jì)尋求到秩序與靈動(dòng)。
（一）秩序的基本原則
自然秩序產(chǎn)生的前提是物理法則要能夠在沒(méi)有相互干擾的孤立的系統(tǒng)中起作用，而所有事物都是相互作用的，正是這種混亂與秩序之間的對(duì)照喚醒了我們的知覺(jué)。而秩序感通過(guò)各種工藝證明了人類喜歡節(jié)奏、秩序和事物的復(fù)雜性，設(shè)計(jì)師通過(guò)對(duì)對(duì)稱與均衡、單純與齊一、協(xié)調(diào)與對(duì)比、節(jié)奏與韻律、多樣與統(tǒng)一靈活的運(yùn)用，體現(xiàn)出一種帶有秩序感的靈動(dòng)。而將元素的秩序化組構(gòu)，依照人所產(chǎn)生的視覺(jué)規(guī)律，主要體現(xiàn)在其排列的條理性，比例的合適性、節(jié)奏的合理性、以及漸變的嚴(yán)格性上，遵循著化繁為簡(jiǎn)、化雜亂為條理、化模糊為鮮明的原則的秩序法則，從而協(xié)調(diào)重復(fù)、均衡、對(duì)稱等性質(zhì)，將畫面的展示增添秩序性、連續(xù)性和和諧性。
（二）網(wǎng)頁(yè)設(shè)計(jì)中的網(wǎng)格系統(tǒng)設(shè)計(jì)
網(wǎng)頁(yè)網(wǎng)格系統(tǒng)可以被定義為：通過(guò)對(duì)比例、秩序、連續(xù)感和現(xiàn)代感，將網(wǎng)頁(yè)里的元素進(jìn)行重新整合，將網(wǎng)頁(yè)中版面布局以規(guī)范的網(wǎng)格排版來(lái)指導(dǎo)信息的分布，實(shí)現(xiàn)保持平衡亦或者去打破平衡。從網(wǎng)頁(yè)設(shè)計(jì)上說(shuō)起，網(wǎng)頁(yè)網(wǎng)格設(shè)計(jì)的應(yīng)用，不但能夠整合網(wǎng)頁(yè)的信息，方便閱讀，更可以增加網(wǎng)頁(yè)的美感，還可以有助于閱讀，更具有可用性。而且，對(duì)于前端開發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的有秩序和有靈活性。自網(wǎng)格系統(tǒng)應(yīng)用以來(lái)，經(jīng)過(guò)許多代設(shè)計(jì)師的努力，使其發(fā)展的更加精確與完善。現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中的網(wǎng)格不但繼承了傳統(tǒng)印刷網(wǎng)格，并以此為基礎(chǔ)，卻又不同于以往的傳統(tǒng)印刷網(wǎng)格，能以其的多選擇性突破傳統(tǒng)印刷媒體的限制，更具有自己特殊的特點(diǎn)和要求。不過(guò)傳統(tǒng)印刷媒介中所需要設(shè)計(jì)的界面是固定的，而網(wǎng)頁(yè)設(shè)計(jì)中有很多因素是超出設(shè)計(jì)師控制的，瀏覽者可以按照自己對(duì)網(wǎng)頁(yè)視覺(jué)效果的要求來(lái)進(jìn)行調(diào)整，至使顯示屏所呈現(xiàn)的畫面與最初的設(shè)計(jì)背道而馳，但是顯示器屏幕每英寸由72像素構(gòu)成，實(shí)際上是由數(shù)字創(chuàng)造的網(wǎng)格，這是一種區(qū)別于其他的傳統(tǒng)媒體形式，網(wǎng)頁(yè)設(shè)計(jì)者雖然對(duì)版面視覺(jué)效果喪失了一定控制力，但這也正是網(wǎng)頁(yè)設(shè)計(jì)的美麗所在，而我們需要做的是讓設(shè)計(jì)去適應(yīng)變化多端的網(wǎng)格系統(tǒng)。
（三）網(wǎng)頁(yè)設(shè)計(jì)中的誤區(qū)
當(dāng)新媒體設(shè)計(jì)與信息構(gòu)筑的時(shí)代來(lái)臨時(shí)，網(wǎng)頁(yè)媒體以全新且令人激動(dòng)的方式展示信息，將其諸多特點(diǎn)展現(xiàn)出來(lái)，使其能從眾多的傳統(tǒng)媒體中突顯出來(lái)。與此同時(shí)，網(wǎng)頁(yè)制作技術(shù)也得到了前所未有的革新，涌現(xiàn)出一些列功能愈加強(qiáng)大的網(wǎng)頁(yè)制作軟件，網(wǎng)頁(yè)制作也由此變得輕松而容易起來(lái)，這種偏向性致使滋生出大量偏向重視技術(shù)操作而忽視網(wǎng)頁(yè)設(shè)計(jì)的視覺(jué)創(chuàng)意美感的網(wǎng)頁(yè)制作者，造成信息無(wú)法正確傳達(dá)出來(lái)。在這種現(xiàn)象的促使下，如何平衡在信息高度密集的網(wǎng)頁(yè)，不僅僅需要設(shè)計(jì)師具備審美的品質(zhì)，更需要為信息的展示增添秩序性，而無(wú)論在何種網(wǎng)頁(yè)上，網(wǎng)格可以向?yàn)g覽者預(yù)示出信息所在，這也算是看不見的秩序，也可以在保持展示內(nèi)容總體一致的前提下，為網(wǎng)頁(yè)添加靈動(dòng)性，這也是在設(shè)計(jì)中所強(qiáng)調(diào)的視覺(jué)有序系統(tǒng)。
（四）網(wǎng)頁(yè)設(shè)計(jì)中存在的問(wèn)題分析
現(xiàn)在有一大部分網(wǎng)站，不知道信息的所在，沒(méi)有規(guī)則可言。如果不能在混亂之中建立秩序，使瀏覽者對(duì)網(wǎng)頁(yè)設(shè)計(jì)者的意圖一無(wú)所知，更使信息易讀性和傳達(dá)性變成一個(gè)令人困惑的難題。并且網(wǎng)頁(yè)存在信息能容過(guò)滿的問(wèn)題，就將各種信息諸如文字、圖片、動(dòng)畫等不加思考的硬塞到頁(yè)面上，沒(méi)有任何規(guī)范、條理可言，也更談不上藝術(shù)處理了。此類問(wèn)題導(dǎo)致瀏覽者在讀取信息時(shí)會(huì)遇到諸多不便，不助于信息的交流，使網(wǎng)頁(yè)上的設(shè)計(jì)做不到互相協(xié)作，反而相互消減。再加上頁(yè)面上五花八門、不分主次的內(nèi)容，網(wǎng)頁(yè)背景做的很花哨，過(guò)度的裝飾的頁(yè)面，混亂了瀏覽者的視線，嚴(yán)重干擾從網(wǎng)頁(yè)中信息的獲取，更無(wú)法提及其的秩序美感。相比之下，還有一類網(wǎng)頁(yè)我們打開，發(fā)現(xiàn)好像這個(gè)網(wǎng)頁(yè)與那個(gè)網(wǎng)頁(yè)都是一樣的。無(wú)論是標(biāo)題、文字及圖片的位置相同，更甚到動(dòng)畫的效果都是如此。而這兩個(gè)網(wǎng)站對(duì)于頁(yè)面的用色秉承著隨心所欲原則，其目的只是為了區(qū)分開文本和背景，與此同時(shí)失去網(wǎng)頁(yè)的特色，使我們看網(wǎng)頁(yè)好像每一個(gè)都是相同的，缺乏靈動(dòng)性。雖然不能片面地追求視覺(jué)美感沖擊力，但也不能不顧瀏覽者的使用性。
三．網(wǎng)頁(yè)設(shè)計(jì)中秩序與靈動(dòng)的設(shè)計(jì)應(yīng)用
網(wǎng)頁(yè)設(shè)計(jì)是視覺(jué)傳達(dá)設(shè)計(jì)藝術(shù)的重要組成部分和重要分支，其未來(lái)趨勢(shì)將逐步走向簡(jiǎn)單化、立體化和智能化。如何平衡網(wǎng)頁(yè)的秩序與靈動(dòng)，使其展現(xiàn)形式會(huì)變得簡(jiǎn)單，條理變得清晰，并做到用有秩序的形式顯示最全面的內(nèi)容，恰到好處地進(jìn)行調(diào)整、解構(gòu)，讓網(wǎng)頁(yè)設(shè)計(jì)更加有靈動(dòng)性。
（一）網(wǎng)頁(yè)設(shè)計(jì)的秩序感
俗話說(shuō)：沒(méi)有規(guī)矩，不成方圓。而設(shè)計(jì)也需要有一定的規(guī)矩，也可以說(shuō)是一定的規(guī)則。而這種規(guī)則可以給設(shè)計(jì)帶來(lái)秩序感和結(jié)構(gòu)感，這種設(shè)計(jì)終將成為一件有血有肉的作品。而網(wǎng)頁(yè)設(shè)計(jì)也是如此，通過(guò)形式美的法則，將頁(yè)面中的各種視覺(jué)元素進(jìn)行有組織有規(guī)律的調(diào)整，大膽的取舍，使頁(yè)面獲得完整、有序的視覺(jué)效果，通過(guò)這種具有單純的秩序性，對(duì)各種凌亂的資料運(yùn)用理性和邏輯思維，產(chǎn)生具有強(qiáng)烈的視覺(jué)沖擊力，促進(jìn)瀏覽者加深印象，創(chuàng)造清晰有序的形式感。如網(wǎng)站設(shè)計(jì)者常運(yùn)用反復(fù)視覺(jué)流程，使網(wǎng)頁(yè)產(chǎn)生的視覺(jué)效果更富有韻律美和秩序美。同時(shí)可以發(fā)現(xiàn)整個(gè)網(wǎng)頁(yè)設(shè)計(jì)運(yùn)用了清晰的網(wǎng)格可以清楚地表現(xiàn)網(wǎng)頁(yè)的細(xì)節(jié)和引導(dǎo)瀏覽者進(jìn)行瀏覽。并通過(guò)改變圖像與文字的大小比例，從不同的視角展現(xiàn)主題，不同的比例和尺寸建立起一種敘事關(guān)系，通過(guò)用對(duì)稱式形成了一種平衡、協(xié)調(diào)的感覺(jué)，帶給瀏覽者一種條理清晰的印象。另外網(wǎng)頁(yè)設(shè)計(jì)時(shí)，通過(guò)對(duì)頁(yè)面適當(dāng)?shù)牧舭祝軌蛑圃焯幧鷦?dòng)的進(jìn)入方式，并且對(duì)頁(yè)面或界面的各個(gè)元素與部分分割、區(qū)分和重組，并且留白區(qū)域可以用它來(lái)實(shí)現(xiàn)強(qiáng)調(diào)、比例、平衡和韻律。留白不會(huì)給人感覺(jué)頁(yè)面“空”，反而會(huì)形成一種視覺(jué)的空間感。
（二）網(wǎng)頁(yè)設(shè)計(jì)的靈動(dòng)性
網(wǎng)頁(yè)的整體設(shè)計(jì)，通過(guò)以周密的組織和精確的定位來(lái)獲得頁(yè)面的秩序感。通過(guò)散點(diǎn)視覺(jué)流程，將網(wǎng)頁(yè)中的各個(gè)視覺(jué)元素進(jìn)行有節(jié)奏的組構(gòu)，或上、或下、或左、或右的自由移動(dòng)，給人一種輕松隨意帶有韻律的視覺(jué)享受。并且通過(guò)對(duì)視線的引導(dǎo)，不但保持著網(wǎng)頁(yè)的整體流暢、和諧的瀏覽觀感，使瀏覽者更加輕松的找到所需要的內(nèi)容。
（三）秩序與靈動(dòng)并存的網(wǎng)頁(yè)設(shè)計(jì)
網(wǎng)頁(yè)設(shè)計(jì)以一種穩(wěn)定、神秘的方式呈現(xiàn)出一下中相對(duì)靈活的創(chuàng)意活動(dòng)。這種在有秩序的頁(yè)面下追求一定的自由度，使網(wǎng)頁(yè)設(shè)計(jì)能通過(guò)深思熟慮之后決定或特意的追求的“散”的解構(gòu)，在理性授意下其內(nèi)存在著一種帶有靈動(dòng)的秩序。而優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)就是應(yīng)該在多樣中求統(tǒng)一，在節(jié)奏中求韻律。如網(wǎng)站設(shè)計(jì)者運(yùn)用形式美法則，通過(guò)有序、具有美感、整體協(xié)調(diào)的手段，使瀏覽者能夠感受到愉悅感。同時(shí)，帶有韻律的平衡，可以突出網(wǎng)頁(yè)所強(qiáng)調(diào)的重點(diǎn)。
四、結(jié)語(yǔ)
設(shè)計(jì)上用四句的格言強(qiáng)調(diào)了設(shè)計(jì)的核心要求：根據(jù)受眾進(jìn)行設(shè)計(jì)、功能決定形式、保持簡(jiǎn)潔、內(nèi)容決定一切。也就是說(shuō)，設(shè)計(jì)就是要遵循內(nèi)容決定形式的原則。黑格爾也說(shuō)過(guò)：“內(nèi)容和完全適合內(nèi)容的形式達(dá)到獨(dú)立完整的統(tǒng)一，因而形成一種自由整體，這就是藝術(shù)的中心。”故網(wǎng)頁(yè)在設(shè)計(jì)上，要在保證有秩序的形式顯示最全面的內(nèi)容，使瀏覽者更加輕松的獲取信息。并且在秩序感不斷滲入到人們的生活和藝術(shù)設(shè)計(jì)之中，人們的審美不斷提高，對(duì)于美的要求越來(lái)越高，設(shè)計(jì)者要通過(guò)對(duì)形式美法則的對(duì)稱與均衡、單純與齊一、協(xié)調(diào)與對(duì)比、節(jié)奏與韻律、多樣與統(tǒng)一的靈活運(yùn)用，尋求出一種帶有秩序感的靈動(dòng)。將它們運(yùn)用到網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)這種科學(xué)與藝術(shù)高度統(tǒng)一的產(chǎn)物上，創(chuàng)造出藝術(shù)化、人性化的網(wǎng)站頁(yè)面。
參考文獻(xiàn)：
[1]加文•安布羅斯、保羅•哈里斯編著．劉靜譯．網(wǎng)格設(shè)計(jì)[M]．北京：中國(guó)青年出版社，2008．
[2]威廉•瑞恩、西奧多•科諾瓦著．美國(guó)視覺(jué)傳達(dá)完全教程[M]．上海：上海人民美術(shù)出版社，2008．
[3]惠巖、顧群業(yè)編著．網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)[M]．濟(jì)南：山東教育出版社，2012．
[4]KhoiVinh著．秩序之美—網(wǎng)頁(yè)中的網(wǎng)格設(shè)計(jì)[M]．北京：人民郵電出版社，2011．
[5]E.H.貢布里希著．秩序感—裝飾藝術(shù)的心理學(xué)研究[M]．長(zhǎng)沙：湖南科學(xué)技術(shù)出版社，2006．
[6]胡爽.基于格式塔的網(wǎng)頁(yè)信息設(shè)計(jì)的美化研究[J].包裝工程，2010．
關(guān)鍵詞:網(wǎng)頁(yè)設(shè)計(jì);元素;美學(xué)
中圖分類號(hào):TP393.092文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1007-9599 (2010) 10-0000-01
Aesthetic Overview of Web Page Design
Li Shanshan
(Chongqing Iron&Steel Group,Electronics Co.,Ltd.,Chongqing400080,China)
Abstract:The web design on the one hand must have "beauty",which render the dissemination of information to achieve the desired goals;the beauty must have for any web page,the basic elements of web pages for information not only to meet the needs of the users,more important is to create a pleasant visual environment in which they have a mental enjoyment and resonance.
Keywords:Web design;Elements;Aesthetics
網(wǎng)站在我們社會(huì)生活中無(wú)處不在,網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)是伴隨著計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)、圖像動(dòng)畫處理制作軟件的產(chǎn)生和發(fā)展而形成的設(shè)計(jì)新課題,他是運(yùn)用相關(guān)的軟件技術(shù)、美學(xué)知識(shí)等,依照設(shè)計(jì)目的和要求對(duì)網(wǎng)站進(jìn)行功能上的實(shí)現(xiàn)和視覺(jué)藝術(shù)的創(chuàng)造性思維活動(dòng)。下面就網(wǎng)頁(yè)設(shè)計(jì)的“美學(xué)”進(jìn)行探討。
一、設(shè)計(jì)元素
網(wǎng)頁(yè)設(shè)計(jì)的元素主要是視覺(jué)和聽覺(jué)元素,主要包括:文字、圖像、動(dòng)畫等多媒體元素。隨著多媒體技術(shù)的發(fā)展和運(yùn)用使視聽元素在網(wǎng)頁(yè)設(shè)計(jì)中的綜合運(yùn)用越來(lái)越廣泛,使瀏覽者可以享受到更加完美的視聽效果。
(一)文字。文字是網(wǎng)頁(yè)界面的主體,是用以傳達(dá)信息的主要元素,雖然利用網(wǎng)絡(luò)多媒體也可以達(dá)到同樣的目的,但網(wǎng)頁(yè)中文字的優(yōu)勢(shì)很難被取代。
(二)圖形。圖形在網(wǎng)頁(yè)中有著十分重要的作用。在網(wǎng)上瀏覽時(shí),瀏覽者常常會(huì)因看到一幅十分引人注目的圖形而感興趣去了解相關(guān)內(nèi)容。在很多網(wǎng)頁(yè)中,圖形占據(jù)著整個(gè)頁(yè)面的重要位置,有的甚至占據(jù)了整個(gè)頁(yè)面。在視覺(jué)順序上,圖形往往能首先吸引人的們注意力,這是由于圖形給人的視覺(jué)印象要比文字強(qiáng)烈得多。幾乎所有的網(wǎng)頁(yè)都用到了圖形,善用圖形,可以生動(dòng)、形象、直觀地表達(dá)網(wǎng)頁(yè)的主題,增強(qiáng)網(wǎng)頁(yè)的宣傳力、感染力和號(hào)召力。圖形必須符合網(wǎng)頁(yè)的主題,并具有創(chuàng)新的構(gòu)思和強(qiáng)烈的個(gè)性,使主題與表現(xiàn)兩者較好的統(tǒng)一,以有利于信息的傳達(dá)。
(三)多媒體。將多媒體元素引入網(wǎng)頁(yè)界面,可以很大程度上增強(qiáng)瀏覽者的吸引力。從網(wǎng)頁(yè)界面的發(fā)展來(lái)看,由純文字界面到圖文并茂,再到引入新的多媒體元素,這是一個(gè)必然的過(guò)程。瀏覽者希望在網(wǎng)上看到更具創(chuàng)造性、更具吸引力和更具情趣的內(nèi)容,多媒體元素正是實(shí)現(xiàn)這一目標(biāo)的重要手段。網(wǎng)頁(yè)中所涉及到的多媒體元素主要是音頻、視頻和動(dòng)畫。
二、設(shè)計(jì)原則
設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)著重要的地位,要求在有限的屏幕空間上運(yùn)用平面設(shè)計(jì)的相關(guān)原理(如色彩、構(gòu)成、版面等藝術(shù)設(shè)計(jì)原理知識(shí))將視聽多媒體元素進(jìn)行藝術(shù)化的表現(xiàn),是一種具有藝術(shù)特色的視聽傳達(dá)方式。它在傳達(dá)信息的同時(shí),也產(chǎn)生感官上的美感和精神上的享受。它同平面廣告、報(bào)刊雜志等印刷品平面媒體的設(shè)計(jì)不同,印刷品都有固定的規(guī)格尺寸,網(wǎng)頁(yè)則不然,尺寸是由讀者來(lái)控制的,這使網(wǎng)頁(yè)設(shè)計(jì)者不能精確控制頁(yè)面上每個(gè)元素的尺寸和位置,而且網(wǎng)頁(yè)的組織結(jié)構(gòu)不像印刷品那樣為線性組合,因此網(wǎng)頁(yè)的平面設(shè)計(jì)具有更高的難度和挑戰(zhàn)性。網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)性網(wǎng)頁(yè)作為傳播信息的一種載體必須要有自己鮮明的藝術(shù)特色,才能在眾多的網(wǎng)絡(luò)信息中脫穎而出,受到關(guān)注。這就要求網(wǎng)頁(yè)設(shè)計(jì)要按照視覺(jué)心理規(guī)律和形式美等藝術(shù)設(shè)計(jì)的手法將信息主動(dòng)地傳達(dá)給觀賞者,在適當(dāng)?shù)沫h(huán)境里被人們即時(shí)地理解和接受,以滿足人們的實(shí)用和需求。
網(wǎng)頁(yè)設(shè)計(jì)不但要單純、簡(jiǎn)練、清晰和精確,而且要強(qiáng)調(diào)藝術(shù)性,通過(guò)獨(dú)特的藝術(shù)風(fēng)格和強(qiáng)烈的視覺(jué)沖擊力來(lái)鮮明地突出設(shè)計(jì)目的。作為視覺(jué)設(shè)計(jì)范疇一種的網(wǎng)頁(yè)設(shè)計(jì),其最終目的是達(dá)到最佳的主題訴求效果。這種效果的取得其藝術(shù)性的手法是必不可少的,一方面通過(guò)對(duì)網(wǎng)頁(yè)的內(nèi)容運(yùn)用邏輯規(guī)律進(jìn)行條理性處理,使之符合瀏覽者獲取信息的心理需求和邏輯方式,讓瀏覽者快速地理解和吸收;另一方面通過(guò)對(duì)網(wǎng)頁(yè)構(gòu)成元素運(yùn)用藝術(shù)的形式美法則進(jìn)行條理性處理,更好地營(yíng)造設(shè)計(jì)目的的視覺(jué)環(huán)境,突出主題,增強(qiáng)瀏覽者對(duì)網(wǎng)頁(yè)的注意力,增進(jìn)對(duì)網(wǎng)頁(yè)內(nèi)容的理解。
網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)性不同于傳統(tǒng)媒體之處,就在于信息的交互性、持續(xù)性、多維性、多種媒體的綜合性、版式的不可控性等特點(diǎn),這些都離不開網(wǎng)頁(yè)設(shè)計(jì)技術(shù)方面的因素。網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)性是網(wǎng)頁(yè)設(shè)計(jì)時(shí)運(yùn)用相關(guān)的軟件技術(shù)、媒體技術(shù)電子技術(shù)等實(shí)現(xiàn)網(wǎng)頁(yè)最終表現(xiàn)效果的手段方式。沒(méi)有技術(shù)的支撐網(wǎng)頁(yè)也就失去了他的媒體特性。
網(wǎng)頁(yè)多種媒體的綜合性主要體現(xiàn)在使用的多媒體視聽元素,如文字、圖像、聲音、視頻等,這些都需要相應(yīng)的技術(shù)來(lái)實(shí)現(xiàn)。隨著技術(shù)的發(fā)展,網(wǎng)絡(luò)帶寬在增加,芯片處理速度在提高,跨平臺(tái)的多媒體文件格式被推廣,這些技術(shù)極大地滿足和豐富了瀏覽者對(duì)網(wǎng)絡(luò)信息傳輸質(zhì)量的更高要求。這些技術(shù)的運(yùn)用增強(qiáng)了頁(yè)面?zhèn)鞑バ畔⒌谋憩F(xiàn)力和感染力,呈現(xiàn)了前所未有的媒體革新。各種技術(shù)的發(fā)展促進(jìn)了網(wǎng)頁(yè)設(shè)計(jì)技術(shù)與藝術(shù)的緊密結(jié)合,網(wǎng)頁(yè)設(shè)計(jì)只有掌握各種網(wǎng)絡(luò)技術(shù)的規(guī)律,注重技術(shù)和藝術(shù)的緊密結(jié)合,窮盡技術(shù)之長(zhǎng),實(shí)現(xiàn)藝術(shù)想象,才能滿足未來(lái)瀏覽者對(duì)網(wǎng)頁(yè)信息的更高需求。設(shè)計(jì)是主觀和客觀共同作用的結(jié)果,網(wǎng)絡(luò)技術(shù)主要表現(xiàn)為客觀因素,藝術(shù)創(chuàng)意主要表現(xiàn)為主觀因素,網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合,使網(wǎng)頁(yè)設(shè)計(jì)由平面設(shè)計(jì)擴(kuò)展到立體設(shè)計(jì),由純粹的視覺(jué)藝術(shù)擴(kuò)展到空間聽覺(jué)藝術(shù),網(wǎng)頁(yè)設(shè)計(jì)藝術(shù)性與技術(shù)性的高度統(tǒng)一把瀏覽者帶入了一個(gè)全新的網(wǎng)絡(luò)數(shù)字時(shí)代。
參考文獻(xiàn):
1網(wǎng)頁(yè)設(shè)計(jì)要素
（1）排列方式要素排列方式也叫網(wǎng)頁(yè)布局，是網(wǎng)頁(yè)設(shè)計(jì)中又一個(gè)關(guān)鍵要素。網(wǎng)頁(yè)的版面充斥的內(nèi)容很多，既要有文字，也要有圖片。而文字字體和大小的格式之分，文字于整篇文章中又有標(biāo)題和正分之分。圖片則同樣有大小和橫豎的差別。不管是文字還是圖片都是為了給瀏覽網(wǎng)站的人展示網(wǎng)站的特色和內(nèi)容，不能將其一股腦羅列于網(wǎng)頁(yè)版面上，無(wú)條理即會(huì)顯得雜亂。有關(guān)網(wǎng)頁(yè)排列方式，常用的型式有“國(guó)”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型和變化型等，這些型式可利用上網(wǎng)瀏覽各種網(wǎng)頁(yè)直接觀看，不再詳細(xì)介紹。（2）色彩要素色彩要素于網(wǎng)頁(yè)設(shè)計(jì)中占有的比例比較大。通過(guò)合理的色彩搭配，可使網(wǎng)頁(yè)在瀏覽者眼前一亮，一定程度上彌補(bǔ)主頁(yè)設(shè)計(jì)吸引力的不足。網(wǎng)頁(yè)的色彩搭配和相應(yīng)網(wǎng)站所呈現(xiàn)的主題緊密聯(lián)系。一般來(lái)說(shuō)，一個(gè)網(wǎng)站的主題色可有一種或兩種組成，這樣做簡(jiǎn)單明了，不至于使瀏覽者迷失方向或枯燥乏味。為使瀏覽者更方便于快速瀏覽文字內(nèi)容，可將主體文字的顏色設(shè)計(jì)為深色，相應(yīng)的網(wǎng)頁(yè)背景、按鈕或條框等則設(shè)計(jì)為彩色。
2基于CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例
CSS技術(shù)是級(jí)聯(lián)樣式表（CascadingStyleSheets）的簡(jiǎn)稱，也可稱之為風(fēng)格樣式表單。CSS技術(shù)在很多網(wǎng)頁(yè)設(shè)計(jì)中受用率極高，應(yīng)用CSS技術(shù)可使設(shè)計(jì)工作量減少，同時(shí)也能有效對(duì)網(wǎng)頁(yè)整體布局、色彩搭配、字體設(shè)計(jì)、鏈接組成和背景分布等進(jìn)行更為精確的設(shè)計(jì)控制。作為一項(xiàng)可快速設(shè)計(jì)網(wǎng)頁(yè)的應(yīng)用技術(shù)，CSS技術(shù)更易于控制網(wǎng)頁(yè)布局、提升編程代碼的重用率、簡(jiǎn)化HTML語(yǔ)言的標(biāo)記頻率、提高網(wǎng)頁(yè)加載速度和系統(tǒng)維護(hù)與更新等。以DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)為例，共包括10個(gè)關(guān)鍵步驟。第一步：規(guī)劃網(wǎng)站。第二步：創(chuàng)建html模板及文件目錄等。第三步：劃分網(wǎng)站為5個(gè)div和網(wǎng)頁(yè)基本布局的基礎(chǔ)。第四步：網(wǎng)頁(yè)布局與div浮動(dòng)等。第五步：網(wǎng)頁(yè)主要框架之外的附加結(jié)構(gòu)的布局與表現(xiàn)。第六步：頁(yè)面內(nèi)的基本文本的樣式(css)設(shè)置。第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)。第八步：頁(yè)腳信息(版權(quán)等)的表現(xiàn)設(shè)置。第九步：導(dǎo)航條的制作(較難)。第十步：解決IE瀏覽器的顯示BUG。因篇幅所限，僅詳解其中的“第二步：創(chuàng)建html模板及文件目錄等”和“第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)”予以說(shuō)明。（1）第二步：創(chuàng)建html模板及文件目錄等。編程代碼如下：CompanyName-PageName@import"css/master.css";寫入完畢，即可保存為index.html,然后創(chuàng)建文件夾css，images。設(shè)計(jì)版面的大框，需在html文件中寫入Helloworld，然后創(chuàng)建css文件，并命名為master.css,保存在/css/文件夾下。同時(shí)寫入：#page-container{width:760px;background:red;}控制html的ID是page-container的盒子，且寬度為760px，且背景色彩設(shè)計(jì)為紅色。為使得盒子設(shè)計(jì)居中，可寫入margin:auto;保存css文件為：#page-container{width:760px;margin:auto;background:red;}這樣一來(lái)，盒子與瀏覽器頂部具有8px的間隙，若需消除間隙可在css文件中寫入：html,body{margin:0;padding:0;}（2）第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)。為了增加網(wǎng)頁(yè)的整體效果，可專門制作網(wǎng)頁(yè)頭部。首先，本例需要采用兩張網(wǎng)絡(luò)圖片（如圖1和圖2）。#header層設(shè)計(jì)背景圖案，可通過(guò)添加方式引用圖1。寫入：#header{height:150px;background:#db6d16url(../images/head－ers/about.jpg);}通常，使用背景的屬性可以是簡(jiǎn)寫屬性名，這樣可以規(guī)定好背景的顏色、圖案、定位、能否重復(fù)使用和如何重復(fù)使用等多方面問(wèn)題。另外，需要注意的是圖片的保存路徑是相對(duì)css存放路徑來(lái)定位的，而不是很多人誤解的html文件。替換標(biāo)簽中的“spider-man”，設(shè)計(jì)該圖片（如圖2）浮于頂部左上方，寫入屬性值為：h1{margin:0;padding:0;float:right;margin-top:57px;padding-right:31px;}這樣一來(lái)，該圖片可向右自由浮動(dòng)，且上邊距為57px，右間隙為31px。另外，由于IE瀏覽者自身的原因，進(jìn)行css編程需盡量采用padding屬性，可有效避免IE瀏覽器的附加調(diào)試。以上淺略分析結(jié)合工作中總結(jié)的網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)，在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用CSS技術(shù)可將網(wǎng)頁(yè)整體布局、色彩搭配、字體設(shè)計(jì)、鏈接組成、背景分布以及其他效果的實(shí)現(xiàn)簡(jiǎn)化，設(shè)計(jì)控制過(guò)程更為便捷，只要通過(guò)對(duì)CSS代碼進(jìn)行局部修改便可實(shí)現(xiàn)基于同一版面而衍生出來(lái)頁(yè)數(shù)不同、外觀不同和格式不同的多個(gè)版面。CSS技術(shù)的應(yīng)用范圍寬泛且于網(wǎng)頁(yè)設(shè)計(jì)的作用顯著，還體現(xiàn)在所有瀏覽器均可適用、可輕松實(shí)現(xiàn)圖片轉(zhuǎn)換功能和快速下載頁(yè)面、網(wǎng)頁(yè)內(nèi)字體設(shè)計(jì)美觀性更強(qiáng)且更便于頁(yè)面的文字排版工作和網(wǎng)頁(yè)頁(yè)面的布局設(shè)計(jì)更容易得到掌控等。此外，基于第一次設(shè)計(jì)網(wǎng)頁(yè)版面的編程內(nèi)容可隨時(shí)更改部分CSS代碼來(lái)調(diào)整所有版面的風(fēng)格，不再需要依次對(duì)每個(gè)不同網(wǎng)頁(yè)進(jìn)行修改。究其原因則在于所有網(wǎng)頁(yè)版面包括文字、圖片、排列方式和色彩等元素都采取一個(gè)CSS文件進(jìn)行牽頭控制，只要改動(dòng)這個(gè)CSS文件，其他版面相應(yīng)指令隨之發(fā)生改變。如果網(wǎng)頁(yè)設(shè)計(jì)仍然沒(méi)有應(yīng)用到CCS技術(shù)將如何輕松控制網(wǎng)頁(yè)整體布局、色彩搭配、字體設(shè)計(jì)、鏈接組成、背景分布以及其他效果呢？以前主要依靠HTML標(biāo)簽的方式來(lái)實(shí)現(xiàn)，編碼過(guò)程十分繁瑣，一個(gè)網(wǎng)頁(yè)版面所需寫入的代碼就會(huì)顯得極為臃腫。而CSS技術(shù)的引入則有效地解決了這一棘手問(wèn)題，當(dāng)然所呈現(xiàn)出來(lái)的CSS應(yīng)用技術(shù)也僅僅是其九牛之一毛，實(shí)際應(yīng)用中也絕非如想象中那么容易。
3結(jié)語(yǔ)
闡述了網(wǎng)頁(yè)設(shè)計(jì)中所涉及主要的文字元素、圖片元素、色彩元素和排列方式元素，同時(shí)稍有歸納有關(guān)網(wǎng)頁(yè)設(shè)計(jì)方面的一些技巧。第二節(jié)內(nèi)容中重點(diǎn)討論基于CSS技術(shù)的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例探究。以DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)舉例說(shuō)明，展開該設(shè)計(jì)所包括的10個(gè)關(guān)鍵步驟，并以其中“第二步：創(chuàng)建html模板及文件目錄等”和“第七步：網(wǎng)站頭部圖標(biāo)與logo部分的設(shè)計(jì)”重點(diǎn)剖析和論述。實(shí)際上，一個(gè)好的網(wǎng)站在其網(wǎng)頁(yè)設(shè)計(jì)工作當(dāng)中不僅僅只是擁有幾個(gè)漂亮的版面就能稱得上好，網(wǎng)頁(yè)設(shè)計(jì)所涉及的內(nèi)容還有很多，如視、音頻鏈接等，這也是共同關(guān)注的問(wèn)題。
作者：甄鳳其 單位：湖南湘西民族職業(yè)技術(shù)學(xué)院
工作過(guò)程是企業(yè)為完成一件工作任務(wù)并獲得工作成果而進(jìn)行的一個(gè)完整過(guò)程。生產(chǎn)復(fù)雜產(chǎn)品、完成重大項(xiàng)目都可能需要多個(gè)工作過(guò)程，從而構(gòu)成該產(chǎn)品、該項(xiàng)目的工作過(guò)程系統(tǒng)。基于工作過(guò)程即工作過(guò)程導(dǎo)向，是一種課程開發(fā)方法，是2002年德國(guó)勞耐爾(Rauner)教授帶領(lǐng)下的不來(lái)梅大學(xué)技術(shù)與教育研究所與大眾汽車公司合作開發(fā)的一種職業(yè)教育課程開發(fā)方法。網(wǎng)頁(yè)設(shè)計(jì)課程面向的崗位群中最主要最具代表性的是前端工程師。所以在網(wǎng)頁(yè)設(shè)計(jì)課程的開發(fā)過(guò)程中依托前端工程師崗位展開。課題在研究過(guò)程中將通過(guò)走訪企業(yè)、校內(nèi)交流、理論應(yīng)用研究、調(diào)查問(wèn)卷等方法對(duì)網(wǎng)頁(yè)設(shè)計(jì)人才需求情況和課程開展情況展開分析。根據(jù)調(diào)查研究中所發(fā)現(xiàn)的網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)過(guò)程中所存在的問(wèn)題，結(jié)合企業(yè)對(duì)網(wǎng)頁(yè)設(shè)計(jì)人才能力的需求，對(duì)網(wǎng)頁(yè)設(shè)計(jì)師的工作過(guò)程進(jìn)行分析，分解出典型工作任務(wù)，分析各個(gè)環(huán)節(jié)的能力要求。再基于網(wǎng)頁(yè)設(shè)計(jì)師的工作過(guò)程，構(gòu)建網(wǎng)頁(yè)設(shè)計(jì)課程的實(shí)訓(xùn)教學(xué)模式，其中包括實(shí)訓(xùn)內(nèi)容、實(shí)訓(xùn)方法、考核方案等。并將構(gòu)建的實(shí)訓(xùn)教學(xué)模式應(yīng)用于教學(xué)實(shí)踐，借以激發(fā)學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)熱情，改進(jìn)教學(xué)效果。
2.前端工程師典型工作任務(wù)分解
通過(guò)調(diào)研，我們發(fā)現(xiàn)前端工程師的主要工作內(nèi)容是基于XHTML+CSS架構(gòu)根據(jù)網(wǎng)站策劃圖實(shí)現(xiàn)網(wǎng)站前端界面開發(fā)，所采用的技術(shù)目前主要是HTML4+CSS2，但也有部分前端工程師為了達(dá)到更好的設(shè)計(jì)效果已經(jīng)升級(jí)到HTML5+CSS3。為了兼顧目前的主流技術(shù)，課程設(shè)計(jì)以HTML4+CSS2為主要教學(xué)內(nèi)容。但為了學(xué)生將來(lái)的技術(shù)升級(jí)和可持續(xù)發(fā)展，課程簡(jiǎn)單涉及到HTML5+CSS3的特點(diǎn)。將前端工程師的主要工作內(nèi)容進(jìn)行分析整理，結(jié)合前端工程師應(yīng)具備的能力和素質(zhì)，我們將前端工程師的典型工作過(guò)程分解為以下八個(gè)部分：網(wǎng)站規(guī)劃、頁(yè)面布局、簡(jiǎn)單元素添加、導(dǎo)航欄設(shè)計(jì)、圖文列表設(shè)計(jì)、特效腳本應(yīng)用、系統(tǒng)設(shè)計(jì)、兼容性測(cè)試。一個(gè)網(wǎng)站是由一個(gè)個(gè)網(wǎng)頁(yè)所組成的。任何一個(gè)網(wǎng)頁(yè)都要經(jīng)過(guò)除了網(wǎng)站規(guī)劃之外的七個(gè)步驟才能完成，每一個(gè)網(wǎng)頁(yè)的設(shè)計(jì)完成需要用到的知識(shí)基本類似，所以這里我們以單個(gè)網(wǎng)頁(yè)的設(shè)計(jì)完成為主要目標(biāo)。前端工程師崗位的工作內(nèi)容在技術(shù)方面涉及到Photoshop、Flash等網(wǎng)頁(yè)設(shè)計(jì)圖形設(shè)計(jì)軟件的使用以及JavaScript特效腳本的應(yīng)用，這些都是網(wǎng)頁(yè)設(shè)計(jì)課程的前導(dǎo)課程或同期課程的講授內(nèi)容，所以在此只涉及到應(yīng)用，并不深入講解。
3.重新構(gòu)建教學(xué)體系
3.1實(shí)訓(xùn)內(nèi)容設(shè)計(jì)
網(wǎng)頁(yè)設(shè)計(jì)課程是以實(shí)踐為基礎(chǔ)的核心課程，所有理論知識(shí)必須在技能訓(xùn)練過(guò)程中得以掌握和運(yùn)用，所以必須注重培養(yǎng)學(xué)生理論知識(shí)的靈活運(yùn)用能力和網(wǎng)頁(yè)制作實(shí)訓(xùn)能力。網(wǎng)頁(yè)設(shè)計(jì)課程的實(shí)訓(xùn)內(nèi)容設(shè)計(jì)重點(diǎn)體現(xiàn)在以下幾個(gè)方面：
(1)以工作過(guò)程分解為依據(jù)。網(wǎng)頁(yè)設(shè)計(jì)課程以前端工程師的典型工作過(guò)程分解為依據(jù)，將實(shí)訓(xùn)內(nèi)容設(shè)計(jì)為包括局部設(shè)計(jì)、界面設(shè)計(jì)、兼容性測(cè)試、案例實(shí)訓(xùn)四個(gè)大的模塊，貼近前端工程師的工作過(guò)程，滿足前端工程師的崗位能力需求，使整個(gè)教學(xué)過(guò)程更加具有針對(duì)性。局部設(shè)計(jì)又由常用XHTML標(biāo)簽、DIV布局、CSS樣式美化、JavaScript頁(yè)面特效組成。局部模塊設(shè)計(jì)即兼顧網(wǎng)頁(yè)設(shè)計(jì)課程知識(shí)體系的系統(tǒng)性，又結(jié)合前端工程師的工作過(guò)程，即有利于加深學(xué)生對(duì)個(gè)別知識(shí)點(diǎn)的理解，又有利于學(xué)生網(wǎng)頁(yè)設(shè)計(jì)知識(shí)體系的構(gòu)建。
(2)基礎(chǔ)知識(shí)與綜合實(shí)訓(xùn)并重。實(shí)訓(xùn)內(nèi)容的前三個(gè)模塊屬于基礎(chǔ)知識(shí)學(xué)習(xí)部分，最后一個(gè)案例實(shí)訓(xùn)模塊屬于綜合實(shí)訓(xùn)。在整個(gè)課程設(shè)計(jì)中，綜合實(shí)訓(xùn)課時(shí)占整個(gè)課程課時(shí)的1/3以上。課程教學(xué)方式也從前期的講練結(jié)合，轉(zhuǎn)變?yōu)閷?shí)訓(xùn)輔導(dǎo)為主；授課對(duì)象從前期的面向整體為主，轉(zhuǎn)為面向個(gè)體為主。通過(guò)對(duì)綜合實(shí)訓(xùn)課時(shí)比例的增加，培養(yǎng)學(xué)生對(duì)知識(shí)點(diǎn)的綜合運(yùn)用能力，進(jìn)而無(wú)縫銜接前端工程師的崗位能力。
(3)化整為零、小小案例。前端工程師的工作過(guò)程是一個(gè)系統(tǒng)性非常強(qiáng)的、復(fù)雜的工程，由很多小的知識(shí)點(diǎn)組成，需要對(duì)知識(shí)點(diǎn)進(jìn)行綜合、靈活的應(yīng)用。針對(duì)知識(shí)點(diǎn)的案例往往并不適用于整體網(wǎng)頁(yè)設(shè)計(jì)，這就造成了知識(shí)點(diǎn)的學(xué)習(xí)與綜合實(shí)訓(xùn)的脫節(jié)，容易給學(xué)生造成一種無(wú)所適從感。課程實(shí)訓(xùn)設(shè)計(jì)將分布于綜合實(shí)訓(xùn)中的局部功能分解為基礎(chǔ)知識(shí)點(diǎn)的學(xué)習(xí)案例，一個(gè)個(gè)局部功能分解為一個(gè)個(gè)小小案例。這種方法也使得學(xué)生在做綜合實(shí)訓(xùn)時(shí)有一種親切感，方便學(xué)生知識(shí)體系從局部到整體的構(gòu)建。
3.2實(shí)訓(xùn)方法設(shè)計(jì)
課程實(shí)訓(xùn)方法設(shè)計(jì)結(jié)合實(shí)訓(xùn)內(nèi)容特點(diǎn)，采用“教、學(xué)、做”一體化的教學(xué)方法。局部設(shè)計(jì)主要采用理論實(shí)踐一體化的項(xiàng)目教學(xué)法和任務(wù)驅(qū)動(dòng)教學(xué)法，強(qiáng)調(diào)知識(shí)點(diǎn)在小案例中的應(yīng)用。綜合實(shí)訓(xùn)主要采用分組教學(xué)法和真實(shí)案例教學(xué)法，強(qiáng)調(diào)小組協(xié)作能力和綜合實(shí)訓(xùn)能力。
(1)項(xiàng)目教學(xué)法。項(xiàng)目教學(xué)法時(shí)一種由項(xiàng)目引入進(jìn)而展開知識(shí)點(diǎn)的教學(xué)方法，一邊分析講解、一邊操作演示，講練結(jié)合，激發(fā)學(xué)生學(xué)習(xí)興趣，提高學(xué)生分析問(wèn)題、解決問(wèn)題的實(shí)際能力，輕松達(dá)到教學(xué)目標(biāo)。
(2)任務(wù)驅(qū)動(dòng)教學(xué)法。將實(shí)訓(xùn)內(nèi)容設(shè)計(jì)為一個(gè)個(gè)獨(dú)立任務(wù)，充分調(diào)動(dòng)學(xué)生的學(xué)習(xí)積極性和主動(dòng)性。任務(wù)也分為三種類型：局部功能任務(wù)、整體設(shè)計(jì)任務(wù)、真實(shí)企業(yè)任務(wù)。任務(wù)的實(shí)施也是從簡(jiǎn)單的局部功能任務(wù)到整體設(shè)計(jì)任務(wù)，再到靈活運(yùn)用的真實(shí)企業(yè)任務(wù)的過(guò)程，逐步進(jìn)階。任務(wù)驅(qū)動(dòng)貫穿整個(gè)實(shí)訓(xùn)環(huán)節(jié)設(shè)計(jì)，有利于訓(xùn)練學(xué)生的職業(yè)態(tài)度，也有利于提高學(xué)生的知識(shí)應(yīng)用能力和創(chuàng)新能力。
(3)分組教學(xué)法。綜合實(shí)訓(xùn)階段的任務(wù)相對(duì)復(fù)雜，單個(gè)同學(xué)實(shí)現(xiàn)有一定的難度，所以采用分組教學(xué)的方法，有利于形成小組內(nèi)探討解決問(wèn)題的氛圍，也有利于加深對(duì)知識(shí)點(diǎn)的理解，能有效培養(yǎng)學(xué)生的團(tuán)隊(duì)意識(shí)。為充分發(fā)揮每個(gè)成員的潛能，形成足夠量的成員任務(wù)，在設(shè)計(jì)小組時(shí)人數(shù)不宜太多，一般以2-3人為宜。
(4)真實(shí)案例教學(xué)法。將企業(yè)真實(shí)案例引入教學(xué)過(guò)程，能有效拉近課程教學(xué)與崗位能力需求之間的距離，充分激發(fā)學(xué)生的學(xué)習(xí)熱情，即能讓學(xué)生對(duì)崗位能力需求有更深刻的理解，也能增加學(xué)生的自我認(rèn)同感和成就感，進(jìn)而達(dá)到培養(yǎng)崗位人才的目的。
3.3考核方案設(shè)計(jì)
本課程的最終目的是要求學(xué)生應(yīng)用所學(xué)知識(shí)，根據(jù)網(wǎng)站策劃圖完成網(wǎng)站設(shè)計(jì)。前端工程師是一個(gè)注重實(shí)際能力的崗位，傳統(tǒng)的理論知識(shí)考試方式不能充分評(píng)價(jià)學(xué)生的學(xué)習(xí)成績(jī)和能力水平，對(duì)于學(xué)生實(shí)踐能力的提高，以及就業(yè)能力的提高是沒(méi)有多少益處的。也有部分研究者將考核形式改為考核學(xué)生完成網(wǎng)站作品制作的形式。這種考核方式相對(duì)理論知識(shí)考試有了很大的進(jìn)步，更加注重實(shí)踐能力的考核，但很多時(shí)候教師考核給出的網(wǎng)站策劃作品比較滯后，內(nèi)容相對(duì)簡(jiǎn)單，所有同學(xué)完成一樣的網(wǎng)站設(shè)計(jì)，難免存在抄襲的嫌疑。這就造成了很多同學(xué)覺(jué)得自己對(duì)課程內(nèi)知識(shí)掌握的不錯(cuò)，但看到企業(yè)復(fù)雜的網(wǎng)站策劃圖，依然不敢面試前端工程師崗位。因此課題組對(duì)考核方案進(jìn)行了大膽的改革，期末總評(píng)學(xué)習(xí)成績(jī)由三部分組成：過(guò)程考核(平時(shí)到課考勤、上課回答問(wèn)題和隨堂作品)占20%、技能考核(課內(nèi)分模塊作品以及綜合設(shè)計(jì)作品)占30%和項(xiàng)目考核(期末綜合作品)占50%。這種方式較為客觀的反應(yīng)了學(xué)生的學(xué)習(xí)情況和能力水平，主要特點(diǎn)包括：
(1)真題真做。將企業(yè)一線的多個(gè)真實(shí)案例拿來(lái)供學(xué)生選擇，作為項(xiàng)目考核題目。多種作業(yè)選擇能在一定程度上減少學(xué)生作業(yè)抄襲的情況。來(lái)自企業(yè)一線的真實(shí)案例與崗位能力要求高度契合，增強(qiáng)學(xué)生就業(yè)能力和自信心。
(2)注重過(guò)程考核。期末考核只占期末總評(píng)成績(jī)的50%，其余兩部分都是教學(xué)過(guò)程中完成的，屬于過(guò)程考核。這樣的考核方案設(shè)計(jì)能有效避免學(xué)生過(guò)分注重短時(shí)間的期末考核，能使學(xué)生更加重視知識(shí)技能積累的學(xué)習(xí)過(guò)程。
4.小結(jié)
一、網(wǎng)頁(yè)應(yīng)是瀏覽為主
在用戶獲取信息的方式上，網(wǎng)頁(yè)有別于紙質(zhì)媒介，網(wǎng)頁(yè)是以瀏覽為主，而紙質(zhì)媒介是以閱讀為主。所謂瀏覽，按照字面意思就是粗略、大致地看一遍，其主要目的是大致了解，搜尋是否有感興趣的信息線索；閱讀比瀏覽更具有主動(dòng)性和目的性，是有目的地讀，其目標(biāo)是理解。克魯格在《別讓我動(dòng)腦筋——網(wǎng)頁(yè)設(shè)計(jì)效果優(yōu)化藝術(shù)》一書中提出了設(shè)計(jì)出好網(wǎng)頁(yè)必須面對(duì)的三個(gè)事實(shí)：一是“我們不是閱讀網(wǎng)頁(yè)，而是瀏覽”；二是“我們不做最佳選擇，而是滿意而止”；三是“我們不深究原理或本質(zhì)，而是想當(dāng)然地使用”。我們?yōu)槭裁磳?duì)網(wǎng)頁(yè)是瀏覽呢？克魯格的分析認(rèn)為有三個(gè)原因：一是因?yàn)榇颐Γ褂镁W(wǎng)絡(luò)的目的多半是想節(jié)約時(shí)間，這樣用戶就會(huì)不停地運(yùn)動(dòng)；二是用戶知道不必全部閱讀，通常一個(gè)網(wǎng)頁(yè)里面只有很少一部分是他們感興趣的；三是用戶擅長(zhǎng)瀏覽，瀏覽是人們?nèi)粘Ｉ钪兴褜ば畔⒌膽T用方法。基于這樣一些原因，用戶使用網(wǎng)站就是瀏覽、滿意、再瀏覽、再滿意這樣一個(gè)循環(huán)往復(fù)的過(guò)程，直至滿意而歸。如果中間出現(xiàn)了不滿意，這個(gè)過(guò)程就會(huì)終止，用戶就帶著不滿意而離開。所以，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，哲學(xué)家威廉提出的奧卡姆剃刀原理“如無(wú)必要，勿增實(shí)體”和建筑大師密斯•凡•德•羅提出的“少即是多”原則是我們檢驗(yàn)設(shè)計(jì)的兩面鏡子。在確定網(wǎng)頁(yè)的內(nèi)容時(shí)，突出那些重要的內(nèi)容，去掉那些不必要的圖案和文字，即使那些能夠讓你的網(wǎng)頁(yè)在視覺(jué)上產(chǎn)生更好的效果，但如果其干擾重要信息的瀏覽，仍然應(yīng)該果斷地去掉。在網(wǎng)頁(yè)中，只有那些有利于信息傳達(dá)目標(biāo)的美才是有價(jià)值的，美應(yīng)該符合于功能的需要，美和功能的和諧統(tǒng)一才是網(wǎng)頁(yè)設(shè)計(jì)追求的目標(biāo)。為了便于瀏覽，在網(wǎng)頁(yè)內(nèi)容的編排上必須尊重視覺(jué)習(xí)慣，我們?cè)跒g覽時(shí)總是從左到右，由上而下地掃視，要根據(jù)內(nèi)容的重要性，進(jìn)行從左到右、由上而下地依次排列，使重要的內(nèi)容最先映入瀏覽者的眼簾。在文案的寫作上，為了便于快速瀏覽，一是對(duì)標(biāo)題、關(guān)鍵內(nèi)容加以強(qiáng)調(diào)；二是采用短的句子和段落；三是采用清晰的分區(qū)和列表；四是先總體后詳細(xì)的寫作順序。用戶在進(jìn)行瀏覽時(shí)首先是通過(guò)標(biāo)題和關(guān)鍵詞來(lái)初步判斷內(nèi)容是否符合自己的興趣，然后再通過(guò)總體的概述來(lái)決定是否有繼續(xù)瀏覽下去的必要。在瀏覽的過(guò)程中，短句和短的段落有利于減小理解的難度和縮短判斷的時(shí)間，清晰的分區(qū)和列表能夠讓人快速抓住其關(guān)注的興趣點(diǎn)，促進(jìn)人們繼續(xù)瀏覽。
二、網(wǎng)頁(yè)設(shè)計(jì)不應(yīng)打破慣例
前面已經(jīng)提到，網(wǎng)頁(yè)是一個(gè)要求即看即用的特殊“產(chǎn)品”，也就是一看我們就要知道如何使用。我們雖然使用了若干手機(jī)，但我們購(gòu)買了一款新的手機(jī)時(shí)，我們還是得閱讀說(shuō)明書后才能正常使用，網(wǎng)頁(yè)確不需要。那如何才能達(dá)到即看即用呢？使用慣例就是最好的武器，這也是提高所有產(chǎn)品易用性的重要法寶。慣例就是我們已經(jīng)習(xí)慣了的東西，我們一看就知道它的意思，就知道怎么去操作，因?yàn)閼T例是我們?nèi)粘Ｉ钪蟹e累起來(lái)的，已經(jīng)存入大腦的固有知識(shí)。唐納德•A•諾曼在《設(shè)計(jì)心理學(xué)》中將知識(shí)分為了存儲(chǔ)于外部的知識(shí)和存儲(chǔ)于頭腦內(nèi)部的知識(shí)，使用存儲(chǔ)于外部的知識(shí)不需要學(xué)習(xí)，但效率低；使用頭腦內(nèi)部的知識(shí)需要專門學(xué)習(xí)，但效率高。而慣例是已經(jīng)存儲(chǔ)在頭腦內(nèi)部的知識(shí)，具有外部知識(shí)的高易用性和頭腦內(nèi)部知識(shí)的高效率。在網(wǎng)頁(yè)設(shè)計(jì)中有很多慣例是不能輕易去打破的，一是重要導(dǎo)航在頁(yè)面的位置，按照慣例一般布置在頁(yè)面的上部、左上部或右上部，首頁(yè)的鏈接放置在最前面；二是網(wǎng)站的標(biāo)識(shí)放置在頁(yè)面的左上部，瀏覽者用其來(lái)判別是否到達(dá)了目標(biāo)網(wǎng)站；三是文字鏈接要加下劃線（也可以鼠標(biāo)放上去才出現(xiàn)），瀏覽者用其來(lái)判斷是否有超級(jí)鏈接；四是常用標(biāo)識(shí)符號(hào)，如在多頁(yè)文檔中，代表向上翻頁(yè)，代表向下翻頁(yè)；在視頻、音頻播放中■代表停止，代表暫停，代表播放。這些標(biāo)識(shí)符號(hào)在網(wǎng)頁(yè)中已經(jīng)具有特定的意義，是不能隨意改變的。
三、設(shè)計(jì)層面之間的邏輯聯(lián)系
在《用戶體驗(yàn)的要素——以用戶為中心的Web設(shè)計(jì)》一書中論述了網(wǎng)頁(yè)設(shè)計(jì)的五個(gè)層面，包括戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層，并確定了自下而上的建設(shè)流程，規(guī)定了設(shè)計(jì)的程序。自下而上的各個(gè)層面，從抽象逐漸變成具體，并且包含著密切的邏輯聯(lián)系。戰(zhàn)略層確定的網(wǎng)站目標(biāo)和用戶需求，是整個(gè)網(wǎng)站設(shè)計(jì)的基石，其決定范圍層的內(nèi)容選擇和功能設(shè)計(jì)；結(jié)構(gòu)層是對(duì)范圍層選擇的內(nèi)容進(jìn)行分類和組織，形成信息架構(gòu)，以及對(duì)確定的功能進(jìn)行交互設(shè)計(jì)，確定交互的過(guò)程和交互行為；框架層是在結(jié)構(gòu)層信息架構(gòu)的基礎(chǔ)上，根據(jù)完成任務(wù)的需要，利用超級(jí)鏈接設(shè)置來(lái)完成導(dǎo)航設(shè)計(jì)，以及規(guī)劃信息架構(gòu)在頁(yè)面空間中的位置關(guān)系，形成布局框架；表現(xiàn)層是對(duì)框架層進(jìn)行具體的視覺(jué)表現(xiàn)，包括圖形設(shè)計(jì)、色彩設(shè)計(jì)、信息圖表設(shè)計(jì)、動(dòng)畫設(shè)計(jì)、視頻設(shè)計(jì)等。從上面的分析可以看出，下一層是上一層的設(shè)計(jì)依據(jù)或設(shè)計(jì)對(duì)象，上一層是下一層的進(jìn)一步深化和具體，相鄰層之間緊密聯(lián)系，既不能交換，也不能跨越，更不能缺少，具有嚴(yán)格的秩序，形成了完整的邏輯鏈條，理性思維貫穿在整個(gè)設(shè)計(jì)過(guò)程之中。
四、結(jié)語(yǔ)
網(wǎng)頁(yè)設(shè)計(jì)是在互聯(lián)網(wǎng)絡(luò)高度發(fā)展和普及應(yīng)用之后，產(chǎn)生的介于視覺(jué)傳達(dá)設(shè)計(jì)和產(chǎn)品設(shè)計(jì)之間的跨界設(shè)計(jì)領(lǐng)域，其設(shè)計(jì)程序的嚴(yán)密邏輯、媒介的技術(shù)特質(zhì)、以瀏覽為主的信息獲取習(xí)慣、高度的人機(jī)交互等特點(diǎn)，都需要我們?cè)谠O(shè)計(jì)中進(jìn)行更多的理性思考。畢竟對(duì)于網(wǎng)站而言，有用、好用是第一位的。
作者：謝成開單位：四川美術(shù)學(xué)院
1Photoshop技術(shù)的相關(guān)應(yīng)用
1.1網(wǎng)頁(yè)底紋處理處理網(wǎng)頁(yè)底紋的一般方法有兩種，分別是：將固定的背景作為網(wǎng)頁(yè)的底色和將圖像作為背景的底紋。如果利用Photoshop技術(shù)進(jìn)行處理，則處理的效果會(huì)很好，具體的處理流程如下所示：（1）選擇將會(huì)用作網(wǎng)頁(yè)底紋的圖片文件，并將其作為全圖；（2）對(duì)圖像進(jìn)行移動(dòng)，具體操作是利用offset濾鏡工具將圖像向左上移動(dòng)；（3）不改變?cè)瓐D片的環(huán)繞方式，使其與新圖之間形成兩條明顯的水平和垂直分隔線，便于后期的處理；（4）進(jìn)行“圖章”操作，即利用圖像對(duì)分割線進(jìn)行覆蓋，需要注意的是不要破壞新圖片的邊界。1.2WEB頁(yè)面的制作對(duì)于WEB頁(yè)面的初稿，往往可以利用Photoshop技術(shù)來(lái)進(jìn)行操作，在制作的過(guò)程中，有以下一些值得借鑒的技巧：（1）首先設(shè)計(jì)出頁(yè)面的大概圖樣，并進(jìn)行基于圖層的一些切割；（2）有了網(wǎng)頁(yè)的大概輪廓，便可以進(jìn)行圖像的分割操作，一般利用“切片工具”和“切片選擇工具”這兩種工具進(jìn)行，分割圖像的主要原因在于下載小幅圖的速度會(huì)更快捷；（3）為了讓瀏覽者閱讀到更多的內(nèi)容，可以讓圖像活動(dòng)起來(lái)，即制作出動(dòng)畫的效果，具體的操作是在ImageReady環(huán)境下進(jìn)行的；（4）最后對(duì)一些圖片定義交互區(qū)域，并對(duì)細(xì)節(jié)進(jìn)行優(yōu)化。
2圖像處理技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用
2.1網(wǎng)頁(yè)中的構(gòu)圖方式為了讓網(wǎng)頁(yè)中的內(nèi)容得到充分的展現(xiàn)，則需要對(duì)網(wǎng)頁(yè)自身的構(gòu)圖進(jìn)行設(shè)計(jì)，就其構(gòu)圖方式而言，有常見的形式有如下三種方式：（1）水平式構(gòu)圖：常用于政府、企業(yè)或者教育類網(wǎng)站的主頁(yè)設(shè)計(jì)當(dāng)中；（2）垂直式構(gòu)圖：該構(gòu)圖方式滿足了人們的一般視覺(jué)習(xí)慣，即從上到下，并且能夠使頁(yè)面清晰有序；（3）中心式構(gòu)圖：其特點(diǎn)在于能夠更好的將重點(diǎn)內(nèi)容凸顯，且對(duì)閱讀者的視覺(jué)沖擊力強(qiáng)。2.2圖像處理技術(shù)的具體應(yīng)用對(duì)于設(shè)計(jì)者而言，可以利用圖像處理技術(shù)來(lái)處理網(wǎng)頁(yè)中的圖片的格式、圖樣、大小以及顏色等。以下就其中的圖片格式處理，進(jìn)行簡(jiǎn)要的分析：圖像的格式一般都是jpeg或者是gif，其中的gif格式是能夠?qū)崿F(xiàn)動(dòng)態(tài)效果。可見上述兩種圖片所需要的參數(shù)和規(guī)格是不同的，所以在對(duì)圖片進(jìn)行處理時(shí)，需要對(duì)兩者進(jìn)行一定的區(qū)分。對(duì)于圖片大小于清晰度的處理，利用計(jì)算機(jī)圖像處理技術(shù)便能很好的控制圖片的大小，并保證其清晰度和加載的速度等。
3CSS＋DIV技術(shù)的應(yīng)用
將CSS語(yǔ)言技術(shù)應(yīng)用到網(wǎng)頁(yè)制作中，其主要的用途在于不僅能夠很好的控制網(wǎng)頁(yè)的樣式，并且還能分離樣式信息與網(wǎng)頁(yè)內(nèi)容。該語(yǔ)言的主要特點(diǎn)有以下幾點(diǎn)：（1）方便網(wǎng)站的后期修改和維護(hù)；（2）具有樣式豐富的美工樣式標(biāo)記等；（3）其網(wǎng)頁(yè)頁(yè)面的結(jié)構(gòu)清晰；（4）能夠輕松地應(yīng)對(duì)各種頁(yè)面效果。DIV作為網(wǎng)頁(yè)布局方法中的一種，具有十分廣泛的應(yīng)用，其主要的作用在于將整個(gè)網(wǎng)頁(yè)頁(yè)面分成若干個(gè)小區(qū)域，且能夠在每個(gè)DIV頁(yè)面上特定內(nèi)容，極大的方便了網(wǎng)站后期的修改和維護(hù)。
4結(jié)語(yǔ)
就現(xiàn)階段的網(wǎng)絡(luò)使用者而言，其更加傾向于對(duì)圖像的瀏覽，隨著時(shí)間的推移，傳統(tǒng)的文字描述會(huì)漸漸淡出網(wǎng)頁(yè)設(shè)計(jì)的主流。所以在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，需要注重如何才能讓網(wǎng)友享受更流暢的瀏覽空間，并且讓網(wǎng)頁(yè)瀏覽更加順暢、高效。
作者：李玉婷 單位：四川警察學(xué)院
一、《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教材結(jié)構(gòu)劃分
項(xiàng)目一：個(gè)人網(wǎng)站的設(shè)計(jì)與制作。隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，個(gè)人網(wǎng)站已成為人們展示自己的一種手段。本項(xiàng)目將通過(guò)制作一個(gè)簡(jiǎn)單的“鴻瀾”個(gè)人網(wǎng)站，從任務(wù)資訊、任務(wù)決策與計(jì)劃、任務(wù)實(shí)施、任務(wù)檢查與評(píng)估和練習(xí)與提高五個(gè)方面進(jìn)行描述，了解個(gè)人網(wǎng)站規(guī)劃與設(shè)計(jì)的基本原則和主要內(nèi)容，熟悉網(wǎng)站建設(shè)的基本流程，掌握Dreamweaver的基本操作和表格布局排版技術(shù)，認(rèn)識(shí)HTML語(yǔ)言的基本結(jié)構(gòu)和常用標(biāo)記符<table>、<img>、<font>、<p>、<br>等使用方法，培養(yǎng)學(xué)生團(tuán)隊(duì)合作和獨(dú)立思考的意識(shí)，養(yǎng)成良好的職業(yè)素養(yǎng)，為制作更加復(fù)雜的網(wǎng)站做好知識(shí)準(zhǔn)備。項(xiàng)目二：電子商務(wù)類網(wǎng)站的設(shè)計(jì)與制作。21世紀(jì)以來(lái)，電子商務(wù)伴隨著IT的成熟，逐漸發(fā)展壯大，成為網(wǎng)絡(luò)經(jīng)濟(jì)的核心。企業(yè)通過(guò)電子商務(wù)網(wǎng)站實(shí)現(xiàn)了宣傳公司形象、企業(yè)動(dòng)態(tài)、產(chǎn)品展示、網(wǎng)上訂單、網(wǎng)上交易等功能，與客戶間的距離進(jìn)一步貼近。本項(xiàng)目通過(guò)完成整個(gè)電子商務(wù)網(wǎng)站的設(shè)計(jì)與制作，相關(guān)內(nèi)容層層展開，在學(xué)生頭腦中形成“如何搭建整體網(wǎng)站”的概念。項(xiàng)目三：中小企業(yè)網(wǎng)站的設(shè)計(jì)與制作。作為企業(yè)類網(wǎng)站，主要實(shí)現(xiàn)的功能首先是具有較強(qiáng)的盈利能力。其次網(wǎng)站是企業(yè)樹立形象和展現(xiàn)文化的重要窗口，是為顧客提供服務(wù)的一個(gè)工具，是企業(yè)整體營(yíng)銷戰(zhàn)略的一部分。常見功能有企業(yè)信息、新聞中心、產(chǎn)品展廳、人力資源、會(huì)員中心、留言反饋等。本項(xiàng)目通過(guò)某一中小企業(yè)類網(wǎng)站的整體設(shè)計(jì)，培養(yǎng)學(xué)生在學(xué)習(xí)過(guò)程中發(fā)現(xiàn)問(wèn)題、解決問(wèn)題的能力，提高學(xué)習(xí)的主觀能動(dòng)性。項(xiàng)目四：主題網(wǎng)站的設(shè)計(jì)與制作。本項(xiàng)目給出網(wǎng)站設(shè)計(jì)與制作的如下要點(diǎn)：（1）建立網(wǎng)站站點(diǎn)；（2）建立網(wǎng)站頁(yè)面（首頁(yè)為：index.html），頁(yè)面元素完整；（3）應(yīng)用表格或者div、css布局頁(yè)面；（4）在頁(yè)面中插入文字，并用css美化文字大小、字體、顏色等效果；（5）在頁(yè)面中添加超級(jí)鏈接，并用css美化超級(jí)鏈接；（6）建立模板，并制作其他頁(yè)面；（7）至少完成8個(gè)及以上頁(yè)面，頁(yè)面標(biāo)題欄、狀態(tài)欄、版權(quán)等信息齊全；（8）頁(yè)面中超級(jí)鏈接如沒(méi)有鏈接頁(yè)面以空鏈接（#）代替。學(xué)生根據(jù)以上設(shè)計(jì)要求，結(jié)合所學(xué)內(nèi)容，從旅游類網(wǎng)站、時(shí)尚類網(wǎng)站、教育類網(wǎng)站、門戶類網(wǎng)站等幾個(gè)大類中選擇某一項(xiàng)進(jìn)行設(shè)計(jì)制作。教師將根據(jù)學(xué)生完成情況的復(fù)雜程度和實(shí)際效果給予評(píng)價(jià)，鍛煉了學(xué)生的實(shí)踐動(dòng)手能力，增強(qiáng)了自信心和學(xué)習(xí)興趣。
二、教學(xué)素材的選用方法
教學(xué)素材是以完成課堂教學(xué)任務(wù)為目的，以教師引導(dǎo)學(xué)生開展課堂活動(dòng)的形式呈現(xiàn)的教學(xué)材料。1.合理性。以個(gè)人網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，文本的制作上講求清晰、明了、突顯個(gè)性化，Logo和導(dǎo)航的字體、字號(hào)設(shè)計(jì)可以依個(gè)人的喜好采取不規(guī)則式，選擇跳躍感強(qiáng)的色彩。在圖像的選取上也是以色彩豐富、形狀多樣的圖案為主。2.整體性。選用的教學(xué)素材要能夠自然、貼切地把各個(gè)知識(shí)點(diǎn)整合在一起，教學(xué)素材要服務(wù)于教學(xué)目標(biāo)，要突出教學(xué)的重點(diǎn)。電子商務(wù)類網(wǎng)站以從事電子商務(wù)為主，對(duì)安全、穩(wěn)定等性能要求較高，比較考驗(yàn)網(wǎng)站中運(yùn)行的程序。在知識(shí)點(diǎn)上以表格嵌套、模版運(yùn)用、腳本語(yǔ)言和行為語(yǔ)句為重點(diǎn)進(jìn)行講解。3.現(xiàn)實(shí)性和針對(duì)性。課堂教學(xué)中選取的素材要符合學(xué)生的認(rèn)知水平和實(shí)際生活，教師可以從具體教學(xué)對(duì)象的特殊性出發(fā)，根據(jù)教學(xué)對(duì)象因人、因地、因時(shí)選材，為他們“量身定制”針對(duì)性較強(qiáng)的教學(xué)素材，如在教授電子商務(wù)專業(yè)學(xué)生時(shí)，素材的選取多以電子商務(wù)平臺(tái)或某一個(gè)人網(wǎng)店為主，以便引導(dǎo)學(xué)生從自己熟悉的教學(xué)素材中直觀體驗(yàn)獲取知識(shí)、提高能力的喜悅。
三、教學(xué)模式在教材中的運(yùn)用
在《網(wǎng)頁(yè)設(shè)計(jì)與制作》校本教材的開發(fā)上主要采用“基于過(guò)程的項(xiàng)目式教學(xué)法”。即“在引導(dǎo)學(xué)習(xí)者融入有意義的項(xiàng)目完成的過(guò)程之中，讓學(xué)習(xí)者積極地探究與發(fā)現(xiàn)，自主地進(jìn)行知識(shí)的整合與建構(gòu)，以現(xiàn)實(shí)的、學(xué)生生成的新知識(shí)和提高的完成項(xiàng)目任務(wù)的能力為主要成就目標(biāo)，項(xiàng)目完成的過(guò)程也是學(xué)習(xí)者學(xué)習(xí)活動(dòng)進(jìn)行的過(guò)程”。為此，以項(xiàng)目作品開發(fā)為主線，把教材中的范例網(wǎng)站分解成若干個(gè)子任務(wù)，將課程標(biāo)準(zhǔn)中的圖像處理、動(dòng)畫制作、音視頻處理、網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)制作、站點(diǎn)維護(hù)等多方面的知識(shí)點(diǎn)融入其中，在整個(gè)課堂教學(xué)實(shí)施中，教師根據(jù)網(wǎng)站設(shè)計(jì)開發(fā)的實(shí)際工作順序安排，以作品演示的方式從頭至尾帶領(lǐng)學(xué)生操作，讓其感受網(wǎng)站從無(wú)到有一步步制作的全過(guò)程，有助于提高學(xué)生的學(xué)習(xí)興趣，培養(yǎng)其創(chuàng)新設(shè)計(jì)能力。
四、結(jié)語(yǔ)
筆者認(rèn)為，一本好的教材應(yīng)具備合理的章節(jié)順序，精練、準(zhǔn)確的理論描述，必要的理論實(shí)現(xiàn)步驟和貼合學(xué)生實(shí)際、具有一定擴(kuò)展性的實(shí)例，以及最后的綜合性練習(xí)章節(jié)，并且在教材中最好還要加上行業(yè)規(guī)范和相關(guān)的職業(yè)崗位及要求。這樣，使用這些教材的學(xué)生才能更好地明確自己的學(xué)習(xí)目標(biāo)和學(xué)習(xí)要求，將來(lái)才能適應(yīng)社會(huì)的需要。
作者：龍紅 王洪蘭 單位：湖南科技工業(yè)職業(yè)技術(shù)學(xué)院
