導(dǎo)語：如何才能寫好一篇網(wǎng)頁設(shè)計(jì)的流程，這就需要搜集整理更多的資料和文獻(xiàn)，歡迎閱讀由公文云整理的十篇范文，供你借鑒。

篇1

關(guān)鍵詞：高校；信息化建設(shè)；

引言

在瀏覽網(wǎng)頁的時(shí)候經(jīng)?？梢钥吹竭@樣的網(wǎng)頁，上面排滿了內(nèi)容，沒有考慮它的空間框架，它的編排秩序，在頁面占著均衡的地位，讓人看了無法知曉哪些內(nèi)容才是最具發(fā)言權(quán)的，沒有流暢的視覺流程，這是典型的沒有注意到編排的清晰度、可讀性。

一、視覺流程

在網(wǎng)頁版面設(shè)計(jì)中，我們強(qiáng)調(diào)圖文的一致性與和諧性，即版式的視覺流程。版式設(shè)計(jì)的視覺流程是一種“空間的運(yùn)動(dòng)”，是視線隨個(gè)元素在空間沿一定的軌跡運(yùn)動(dòng)的過程，這種視覺在空間的流動(dòng)線為“虛線”。正因?yàn)樗摚栽O(shè)計(jì)時(shí)容易被忽略。而有經(jīng)驗(yàn)的設(shè)計(jì)師卻非常重視并善于運(yùn)用這條貫穿版面的主線?？梢哉f，視覺流程運(yùn)用的好壞。是設(shè)計(jì)師技巧是否成熟的表現(xiàn)。視覺流程可以從理性與感性、方向關(guān)系的流程與散點(diǎn)流程來分析。

在網(wǎng)頁編排的過程中，我們首先要將凌亂頁面的組織過程、混雜的內(nèi)容依整體布局的需要進(jìn)行分組歸納，經(jīng)過進(jìn)行具有內(nèi)在聯(lián)系的組織排列，反復(fù)推敲文字、圖形與空間的關(guān)系，找到最適合他們的位置，或主或從，各自在頁面中找到自己的“舞臺(tái)”，在混亂無序的狀態(tài)中創(chuàng)造新秩序使其成為豐富多樣而又簡(jiǎn)潔明確的統(tǒng)一整體，在對(duì)比中達(dá)到和諧統(tǒng)一。

方向關(guān)系的流程強(qiáng)調(diào)邏輯，注重版面的清晰脈絡(luò)，似乎有一條線、一股氣貫穿其內(nèi)，是整個(gè)版面的運(yùn)動(dòng)趨勢(shì)有“主題旋律”，細(xì)節(jié)與主體猶如樹干與樹枝一樣和諧。方向關(guān)系流程較散點(diǎn)關(guān)系流程更具理性色彩。方向關(guān)系表現(xiàn)為以下幾種形式。

（一）單向視覺流程

單向視覺流程使頁面的流動(dòng)更為簡(jiǎn)明，直接地表達(dá)主體內(nèi)容，有簡(jiǎn)潔而強(qiáng)烈的視覺效果。其表現(xiàn)為三種方向關(guān)系：

豎向視覺流程——堅(jiān)定、直觀的感覺

橫向視覺流程——給人穩(wěn)定、恬靜之感

斜向視覺流程——以不穩(wěn)定的動(dòng)態(tài)引起注意

（二）曲線視覺流程

各視覺要素隨弧線或回旋線而運(yùn)動(dòng)變化我們稱為曲線視覺流程。曲線視覺流程不如單向視覺流程直接簡(jiǎn)明，但更具韻味、節(jié)奏和曲線美。曲線流程的形式微妙而復(fù)雜，可概括為弧線形“C”和回旋型“S”?；【€形具有飽滿、擴(kuò)張和一定的方向感：回旋形兩個(gè)相反的弧線則產(chǎn)生矛盾回旋。在平面中增加深度和動(dòng)感。

（三）重心視覺流程

重心是視覺心理的重心，可理解為：其一，以強(qiáng)烈的形象或文字獨(dú)據(jù)頁面某個(gè)部位或完全充斥整版，其重心的位置因具體畫面而定。在視覺流程上，首先是從頁面重心開始，然后順沿形象的方向與力度的傾向來發(fā)展視線的進(jìn)程。其二，向心、離心的視覺運(yùn)動(dòng)，也是重心視覺流程的表現(xiàn)。重心的誘導(dǎo)流程使主題更為鮮明突出而強(qiáng)烈。

（四）反復(fù)視覺流程

反復(fù)視覺流程指相同的或相似的視覺要素做規(guī)律、秩序、節(jié)奏的逐次運(yùn)動(dòng)。其運(yùn)動(dòng)流程不如單向、曲線和重心流程運(yùn)動(dòng)強(qiáng)烈，但更富于韻律和秩序美。

（五）導(dǎo)向視覺流程

通過誘導(dǎo)元素，主動(dòng)引導(dǎo)讀者視線沿一定方向順序運(yùn)動(dòng)，由主及次，把畫面各構(gòu)成要素依序串聯(lián)起來，形成一個(gè)有機(jī)整體，使重點(diǎn)突出，條理清晰，發(fā)揮最大的信息傳達(dá)功能。編排中的導(dǎo)線有虛有實(shí)，表現(xiàn)多樣，如文字導(dǎo)向、手勢(shì)導(dǎo)向、形象導(dǎo)向以及視線導(dǎo)向等。

（六）散點(diǎn)視覺流程

散點(diǎn)視覺流程指頁面圖與圖、圖與文字間呈自由分散狀態(tài)的編排。散狀排列強(qiáng)調(diào)感性、自由隨機(jī)性、偶合性，強(qiáng)調(diào)空間和動(dòng)感，追求新奇、刺激的心態(tài)，常表現(xiàn)為一種較為隨意的編排形式。這種編排方式在國(guó)外網(wǎng)頁設(shè)計(jì)十分流行，而國(guó)內(nèi)還偏重于相對(duì)規(guī)則、理性的編排方式。我們讀畫的過程為視覺流程，所閱讀的畫中，有嚴(yán)謹(jǐn)規(guī)律的、流程明朗的、也有流程疏散甚至完全自由散點(diǎn)的。面對(duì)自由散點(diǎn)的頁面，我們?nèi)匀挥虚喿x的過程，即：視線隨頁面圖像、文字或上或下或左或右地自由移動(dòng)閱讀的過程。這種閱讀過程不如直線、弧線等流程快捷，但更為生動(dòng)有趣。也許這正是頁面刻意追求的輕松隨意與慢節(jié)奏。

二、最佳視域

在進(jìn)行網(wǎng)頁的版面設(shè)計(jì)時(shí)。設(shè)計(jì)師應(yīng)考慮到將重要信息或視覺流程的停留點(diǎn)安排在注目率高的位置，這就是優(yōu)選最佳視域。

頁面中，不同的視域，注目程度不同，心理上感受也不同。上部給人輕快、漂浮、積極高昂之感；下部給人壓抑、沉重、消沉、限制、低矮和穩(wěn)定之印象：左側(cè)：感覺輕便、自由、舒展，富于活力；右側(cè)：感覺緊促、局限卻又莊重。

三、總結(jié)

以上前五項(xiàng)流程，均為方向和具有理性的流程。在編排方向性視覺流程關(guān)系時(shí)，要注意個(gè)信息要素間間隙大小的節(jié)奏感。若間隙大，節(jié)奏感慢，顯得視覺流程舒展；而過分增大，則失去聯(lián)系，彼此不能呼應(yīng)，視覺流程顯弱。若間隙小，節(jié)奏強(qiáng)而有力，信息可視度高，布局顯得緊湊；但間隙過小，會(huì)顯得緊張而擁擠，造成視覺疲累，無法清晰快捷地傳達(dá)主題。而第六項(xiàng)散點(diǎn)視覺流程似乎與前五項(xiàng)相矛盾，其實(shí)不然，散點(diǎn)視覺流程是在前五項(xiàng)的基礎(chǔ)上的一種突破與創(chuàng)新，它更多地體現(xiàn)了設(shè)計(jì)師的個(gè)人風(fēng)格與編排技巧，這種創(chuàng)新更具現(xiàn)代設(shè)計(jì)的氣息。

參考文獻(xiàn)：

篇2

隨著我國(guó)經(jīng)濟(jì)的不斷發(fā)展，我國(guó)的IT行業(yè)得到了有效的發(fā)展。網(wǎng)頁設(shè)計(jì)是IT行業(yè)領(lǐng)域中發(fā)展中重要的組成部分，其中DIV+CSS布局技術(shù)是網(wǎng)頁設(shè)計(jì)和開發(fā)過程中重要的技術(shù)組成部分。文章對(duì)網(wǎng)頁設(shè)計(jì)中DIV+CSS布局技術(shù)的應(yīng)用和實(shí)踐進(jìn)行了分析和闡述，并且對(duì)DIV+CSS布局技術(shù)的表現(xiàn)、內(nèi)容、代碼、搜索等形式進(jìn)行了一定程度的研究，以此促進(jìn)IT行業(yè)領(lǐng)域中網(wǎng)頁設(shè)計(jì)、開發(fā)的長(zhǎng)遠(yuǎn)發(fā)展。

關(guān)鍵詞：

網(wǎng)頁設(shè)計(jì)；DIV+CSS布局技術(shù)；應(yīng)用

在進(jìn)入21世紀(jì)以后，我國(guó)逐漸向信息化發(fā)展，人們的日常生活水平也得到了有效的提高，互聯(lián)網(wǎng)也成為人們?cè)谌粘Ｉ?、工作中必不可少的工具，成為人們?cè)诮涣?、信息查找的重要途徑之一。在互?lián)網(wǎng)的發(fā)展過程中，網(wǎng)頁設(shè)計(jì)、開發(fā)是人們使用互聯(lián)網(wǎng)工作和生活的重要工具，其中DIV+CSS的布局技術(shù)在網(wǎng)頁設(shè)計(jì)和開發(fā)的過程中占有重要的地位。但是在傳統(tǒng)的網(wǎng)頁布局技術(shù)運(yùn)用的過程中，出現(xiàn)了很多隱藏的弊端，并在發(fā)展的過程中逐漸顯現(xiàn)出來。同時(shí)，在這樣的情況下，IT行業(yè)在網(wǎng)頁設(shè)計(jì)、開發(fā)過程中，對(duì)DIV+CSS布局技術(shù)給予了高度的重視，并且也得到IT行業(yè)的廣泛應(yīng)用。DIV+CSS布局技術(shù)也是網(wǎng)頁設(shè)計(jì)、開發(fā)過程中一種較為流行的技術(shù)和術(shù)語，開發(fā)人員通過利用DIV+CSS布局技術(shù)對(duì)網(wǎng)頁設(shè)計(jì)過程中的對(duì)象進(jìn)行準(zhǔn)確的定位，從而增加了網(wǎng)頁在使用過程中的效果和傳輸、下載速度，也在最大程度上方便了開發(fā)人員對(duì)網(wǎng)頁維護(hù)和更新的操作流程。

1網(wǎng)頁設(shè)計(jì)中DIV+CSS布局技術(shù)的含義

在網(wǎng)頁開發(fā)的過程中，DIV+CSS技術(shù)布局占有重要的地位。其實(shí)DIV+CSS技術(shù)也可以分開來說，DIV，CSS在網(wǎng)頁布局的過程中，所代表的含義和意義也是不一樣的，下面對(duì)DIV+CSS布局技術(shù)的含義進(jìn)行了分析：第一，DIV是DIV+CSS布局技術(shù)中的重要組成部分，也是網(wǎng)頁設(shè)計(jì)和開發(fā)過程中重要的應(yīng)用語言和標(biāo)記元素，為網(wǎng)頁設(shè)計(jì)、開發(fā)過程中的文檔，提供了網(wǎng)頁中的布局結(jié)構(gòu)和網(wǎng)頁的背景，在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中也可以將DIV稱為定位技術(shù)。DIV在起始和結(jié)束的過程中都進(jìn)行了一定標(biāo)記，并且都是網(wǎng)頁設(shè)計(jì)、開發(fā)過程中的文檔構(gòu)成服務(wù)的，DIV對(duì)網(wǎng)頁設(shè)計(jì)和開發(fā)過程中的一些元素進(jìn)行了有效的控制。第二，CSS的全稱是CascadingStyleSheet，按照中文翻譯為層疊樣式表，是在網(wǎng)頁設(shè)計(jì)、開發(fā)過程中，網(wǎng)頁形式和網(wǎng)頁信息之間的一種標(biāo)記語言。在網(wǎng)頁設(shè)計(jì)的過程中，DIV+CSS布局技術(shù)中的CSS技術(shù)可以準(zhǔn)確控制網(wǎng)頁中的頁面的顏色、布局、背景等，網(wǎng)頁中的頁面效果更加的豐富，并且開發(fā)人員在進(jìn)行網(wǎng)頁設(shè)計(jì)的過程中，操作流程也相對(duì)簡(jiǎn)單，也使網(wǎng)頁中的語言更加簡(jiǎn)潔化。第三，DIV+CSS布局技術(shù)在某種程度上將也是XHTML+CSS技術(shù)。人們?cè)谑褂镁W(wǎng)頁文檔的過程中，對(duì)網(wǎng)頁中的結(jié)構(gòu)也在進(jìn)行了一定程度上的規(guī)范。DIV+CSS布局技術(shù)將網(wǎng)頁設(shè)計(jì)中的結(jié)構(gòu)進(jìn)行了一定的規(guī)范化，將頁面中元素進(jìn)行了一定的規(guī)整，使頁面中的樣式和內(nèi)容分離，成為一個(gè)單獨(dú)的個(gè)體。并且在將2種技術(shù)合為1種技術(shù)的過程中，可以使網(wǎng)頁在操作的過程中，更加靈活、方便。

2DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的作用

2.1和搜索引擎可以相互融合搜索引擎在網(wǎng)頁設(shè)計(jì)的過程中起到了重要的作用，是根據(jù)Spider程序查找互聯(lián)網(wǎng)中的內(nèi)容。Spider程序一般是由少到多地進(jìn)行網(wǎng)頁內(nèi)容的查找，等到將所有的內(nèi)容查找掃描后，引入到其他網(wǎng)頁中，然后訪問網(wǎng)頁頁面，重復(fù)掃描、更新，直到內(nèi)容出現(xiàn)為止。在使用傳統(tǒng)的數(shù)據(jù)代碼的過程中，在內(nèi)容瀏覽和操作時(shí)不僅復(fù)雜，多余的代碼也較多，但是在DIV+CSS布局技術(shù)中，可以將瀏覽和操作的流程相對(duì)地簡(jiǎn)單化，并且在搜索內(nèi)容的過程中，時(shí)間也相對(duì)較短，其執(zhí)行的效率也相應(yīng)提高。另外，在DIV+CSS布局技術(shù)的應(yīng)用過程中，將代碼也進(jìn)行了一定程度的簡(jiǎn)化，和搜索引擎配合良好。這樣，不僅提高了網(wǎng)頁設(shè)計(jì)中的執(zhí)行的效率，也有效提高了網(wǎng)頁設(shè)計(jì)、開發(fā)過程中的質(zhì)量。

2.2簡(jiǎn)化了網(wǎng)頁維護(hù)、更新等操作流程設(shè)計(jì)人員在對(duì)網(wǎng)頁進(jìn)行設(shè)計(jì)、開發(fā)的過程中，利用Table對(duì)網(wǎng)頁進(jìn)行版本的更新設(shè)計(jì)時(shí)，需要對(duì)網(wǎng)頁中所有的代碼進(jìn)行一定程度上的整合，這樣造成網(wǎng)頁維護(hù)和更新的工作效率在一定程度上的降低。但是，隨著時(shí)代的不斷發(fā)展，我國(guó)IT行業(yè)將DIV+CSS布局技術(shù)有效地應(yīng)用到網(wǎng)頁設(shè)計(jì)。更新、維護(hù)的過程中，在一定程度上降低了網(wǎng)頁中的內(nèi)容，并利用DIV+CSS布局技術(shù)進(jìn)行一定程度上的控制。當(dāng)設(shè)計(jì)人員對(duì)網(wǎng)頁中的某一個(gè)部分進(jìn)行一定程度上的更新時(shí)，可以有效地提出這部分內(nèi)容和代碼，設(shè)計(jì)該區(qū)域代碼，設(shè)計(jì)人員利用DIV+CSS布局技術(shù)對(duì)網(wǎng)頁進(jìn)行設(shè)計(jì)、維護(hù)、更新，對(duì)其他部位也不會(huì)造成任何的損傷。

2.3加強(qiáng)了傳輸?shù)男试趥鹘y(tǒng)的網(wǎng)頁設(shè)計(jì)的過程中，往往只注重網(wǎng)頁頁面的效果和帶給人們的視覺沖擊，在這種情況下，設(shè)計(jì)人員在網(wǎng)頁中的傳輸效率較慢，也給網(wǎng)頁使用帶來一定程度上的影響。但是設(shè)計(jì)人員在使用DIV+CSS布局技術(shù)進(jìn)行網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，可以對(duì)網(wǎng)頁中的代碼、文字、圖片進(jìn)行靈活的設(shè)計(jì)，設(shè)計(jì)人員利用網(wǎng)頁中的過濾軟件，取代了圖片帶給網(wǎng)頁的視覺沖擊。同時(shí)，DIV+CSS布局技術(shù)也將網(wǎng)頁中的中體布局分為不同的層次，在網(wǎng)頁開始使用的過程中，無需將網(wǎng)頁的內(nèi)容儲(chǔ)存到一個(gè)較大的表格中，這樣在一定程度上加快了網(wǎng)頁的傳輸效率，在人們的日常生活、工作使用的過程中最大程度地提高了便利性。

2.4有效地提高了網(wǎng)頁設(shè)計(jì)中的視覺效果軟件設(shè)計(jì)人員在進(jìn)行網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，利用傳統(tǒng)的Table對(duì)代碼進(jìn)行整合，在網(wǎng)頁的頁面中，圖片、文字等效果的分辨率并不高，頁面的效果并不是很好，同時(shí)在設(shè)計(jì)的過程中，需要大量的設(shè)計(jì)人員。不同的設(shè)計(jì)人員所設(shè)計(jì)的網(wǎng)頁形式也是不同的，這樣對(duì)人們使用的網(wǎng)頁造成了一定程度上的影響。但是，在DIV+CSS布局技術(shù)對(duì)網(wǎng)頁設(shè)計(jì)、開發(fā)的背景下，DIV+CSS布局技術(shù)能夠有效地統(tǒng)一設(shè)計(jì)人員的設(shè)計(jì)理念、風(fēng)格、特點(diǎn)等，并且DIV+CSS布局技術(shù)可以有效控制網(wǎng)頁中的結(jié)構(gòu)，提高了頁面中圖片、文字的分辨率，也給人們?cè)谑褂镁W(wǎng)頁的過程中帶來一定程度上的視覺沖擊。

3DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)、開發(fā)中的應(yīng)用

在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，設(shè)計(jì)人員要想有效地利用DIV+CSS布局技術(shù)對(duì)網(wǎng)頁中的結(jié)構(gòu)進(jìn)行一定程度上的規(guī)劃，就要對(duì)網(wǎng)頁中的語言代碼的結(jié)構(gòu)進(jìn)行一定程度的分析。網(wǎng)頁中的語言代碼其實(shí)就是網(wǎng)頁結(jié)構(gòu)中的構(gòu)成元素，網(wǎng)頁結(jié)構(gòu)其實(shí)就是網(wǎng)頁設(shè)計(jì)、開發(fā)過程中的構(gòu)架。換句話說，就是在網(wǎng)頁設(shè)計(jì)的過程中，對(duì)網(wǎng)頁中的內(nèi)容進(jìn)行有效的規(guī)劃。下面就對(duì)DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用進(jìn)行簡(jiǎn)單的分析。

3.1DIV+CSS布局技術(shù)在網(wǎng)頁中內(nèi)容規(guī)劃的應(yīng)用設(shè)計(jì)人員在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，應(yīng)當(dāng)對(duì)網(wǎng)頁中的內(nèi)容的幾個(gè)基本組成要素進(jìn)行具體的分析。網(wǎng)頁內(nèi)容中的幾個(gè)基本的要素一般情況下可以分為：網(wǎng)頁的頭部、網(wǎng)頁的主體、網(wǎng)頁的頁腳和網(wǎng)頁中的版權(quán)區(qū)域。另外，DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)的過程中，可以使網(wǎng)頁形成基本的框架。并且在具體的編寫的過程中，DIV+CSS布局技術(shù)可以有效整合網(wǎng)頁中的代碼，最大程度地簡(jiǎn)化操作流程，為設(shè)計(jì)人員提供了方便，提高了設(shè)計(jì)人員的工作效率，同時(shí)也使人們?cè)谑褂镁W(wǎng)頁的過程中可以一目了然。

3.2DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中信息的應(yīng)用設(shè)計(jì)人員在利用DIV+CSS布局技術(shù)進(jìn)行網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，可以靈活地將網(wǎng)頁中的信息進(jìn)行一定程度上的整合，并有效地展現(xiàn)出來，給人們視覺的沖擊。在網(wǎng)頁設(shè)計(jì)的過程中，要對(duì)網(wǎng)頁中的信息元素進(jìn)行定義，合理安排網(wǎng)頁頁面中的信息，這樣不僅簡(jiǎn)化了設(shè)計(jì)、開發(fā)的流程，也有效地減少了設(shè)計(jì)人工作人員的工作負(fù)擔(dān)，從而提高了工作人員的工作效率。同時(shí)，也使網(wǎng)頁中的形式更加豐富，例如：新聞、通知、公告、天氣等信息形式，也有效地節(jié)省了網(wǎng)頁中的空間，給人們使用網(wǎng)頁提供了最大程度的方便，也給人們帶來了視覺上的沖擊。

3.3DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的鏈接的應(yīng)用設(shè)計(jì)人員在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，DIV+CSS布局技術(shù)具有重要的作用，同時(shí)，網(wǎng)頁動(dòng)態(tài)鏈接是DIV+CSS布局技術(shù)中應(yīng)用的重要的環(huán)節(jié)。a：link，a：visited，a：hover，a；active是網(wǎng)頁動(dòng)態(tài)鏈接過程中重要的組成部分。在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中，要想將DIV+CSS布局技術(shù)應(yīng)用在網(wǎng)頁動(dòng)態(tài)鏈接中，就要對(duì)a：link，a：visited，a：hover，a；active等一一定位，這樣可以在最大程度上提高設(shè)計(jì)人員的工作效率，也給人們?cè)谌粘Ｉ睢⒐ぷ髦惺褂镁W(wǎng)頁提供了最大程度的方便，同時(shí)也有效地促進(jìn)了我國(guó)IT行業(yè)的發(fā)展。

4結(jié)語

綜上所述，DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)、開發(fā)的過程中起到了重要的作用。文章中對(duì)DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)、開發(fā)過程中的應(yīng)用進(jìn)行了簡(jiǎn)單的介紹，隨著我國(guó)經(jīng)濟(jì)的不斷發(fā)展，DIV+CSS布局技術(shù)成為一種較為流行的網(wǎng)頁設(shè)計(jì)、開發(fā)技術(shù)，簡(jiǎn)化了操作流程，使設(shè)計(jì)人員的工作效率得到有效的提高，也給人們?cè)谌粘Ｉ?、工作中使用網(wǎng)頁提供了最大程度的方便，同時(shí)也有效促進(jìn)了我國(guó)IT行業(yè)的發(fā)展，為我國(guó)的經(jīng)濟(jì)建設(shè)作出了自己的一份努力。

[參考文獻(xiàn)]

[1]車元媛.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用[J].電腦知識(shí)與技術(shù)，2011（9）:2019-2020，2023.

[2]趙清華，林學(xué)華.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)：專業(yè)版，2010（5）:140-142.

[3]溫盛萍.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].信息化建設(shè)，2015（10）:75.

篇3

關(guān)鍵詞：網(wǎng)頁制作；職業(yè)能力；高職教育

作者簡(jiǎn)介：柳珺（1963-），女，北京人，河北政法職業(yè)學(xué)院計(jì)算機(jī)系，副教授。（河北 石家莊 050061）

中圖分類號(hào)：712 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-0079（2013）10-0135-03

一、高職教育概述

高等職業(yè)教育作為高等教育中的一個(gè)類型，其人才培養(yǎng)規(guī)律不同于學(xué)術(shù)人才培養(yǎng)規(guī)律。高等職業(yè)教育應(yīng)該以社會(huì)需求為目標(biāo)，實(shí)踐動(dòng)手能力的培養(yǎng)為主線，所學(xué)知識(shí)、技能具有崗位針對(duì)性。因此高等職業(yè)教育的教育過程應(yīng)以“項(xiàng)目化”的實(shí)訓(xùn)任務(wù)為引領(lǐng)，以培養(yǎng)學(xué)生職業(yè)能力為核心，通過職業(yè)技能的培養(yǎng)，努力挖掘?qū)W生的動(dòng)手能力，能夠讓學(xué)生在學(xué)中做、做中學(xué)、學(xué)做一體，從而提升學(xué)生的專業(yè)知識(shí)應(yīng)用能力和職業(yè)技能的遷移能力。

當(dāng)前高等職業(yè)教育所面臨的核心任務(wù)是課程的改革，而“任務(wù)引領(lǐng)”教學(xué)模式符合職業(yè)教育規(guī)律，強(qiáng)調(diào)理實(shí)一體、做中學(xué)的理念，[1]因此“任務(wù)引領(lǐng)”教學(xué)模式是突出高職辦學(xué)特色、促使課程改革走向優(yōu)質(zhì)的一條有效途徑。

“任務(wù)引領(lǐng)”是指在整個(gè)教學(xué)過程中以工作任務(wù)為主體，強(qiáng)調(diào)理論與實(shí)踐相結(jié)合，在真實(shí)的工作環(huán)境下將所要學(xué)習(xí)的新技能、新知識(shí)滲入學(xué)習(xí)任務(wù)中，以完成任務(wù)的過程作為教學(xué)活動(dòng)的核心，教學(xué)活動(dòng)、教材內(nèi)容和教學(xué)條件等環(huán)節(jié)均圍繞一系列的任務(wù)進(jìn)行，實(shí)踐和理論高度融合。[2]

“任務(wù)引領(lǐng)”教學(xué)模式的特點(diǎn)可以概括為：以工作任務(wù)為引領(lǐng)；以崗位技能為導(dǎo)向；以實(shí)踐教學(xué)為主題；以掌握能力為目的。任務(wù)引領(lǐng)讓學(xué)生在享受工作過程的樂趣中，學(xué)習(xí)知識(shí)、掌握技能、培養(yǎng)責(zé)任、積累信心、完成教學(xué)任務(wù)，同時(shí)激發(fā)了學(xué)生的學(xué)習(xí)興趣，調(diào)動(dòng)了學(xué)生學(xué)習(xí)熱情。[3]

在教學(xué)實(shí)踐中，將“任務(wù)引領(lǐng)、學(xué)做一體”的教學(xué)模式引入的了高職“網(wǎng)頁設(shè)計(jì)與制作”課程中，將網(wǎng)站開發(fā)工作流程和內(nèi)容有機(jī)地融合到教學(xué)內(nèi)容中，構(gòu)建以“網(wǎng)站開發(fā)工作過程”為導(dǎo)向的實(shí)踐任務(wù)，使學(xué)生在任務(wù)完成的過程中，獲得了網(wǎng)頁設(shè)計(jì)制作的知識(shí)和技能，取得了較好的教學(xué)效果。

二、“網(wǎng)頁設(shè)計(jì)與制作”課程設(shè)計(jì)理念

1.根據(jù)“網(wǎng)頁設(shè)計(jì)與制作員”職業(yè)崗位需求確定課程目標(biāo)

“網(wǎng)頁設(shè)計(jì)與制作”課程是培養(yǎng)學(xué)生網(wǎng)站規(guī)劃、設(shè)計(jì)與網(wǎng)頁制作能力的課程，其對(duì)應(yīng)的職業(yè)崗位是網(wǎng)頁設(shè)計(jì)與制作員。因此，該課程的目標(biāo)是掌握網(wǎng)頁制作方法、強(qiáng)化網(wǎng)頁制作技能、積累網(wǎng)頁制作經(jīng)驗(yàn)，以滿足網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位的需求。

2.以職業(yè)能力為依據(jù)組織課程內(nèi)容

“網(wǎng)頁設(shè)計(jì)與制作”課程根據(jù)網(wǎng)站開發(fā)和網(wǎng)頁制作技術(shù)領(lǐng)域和網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位的任職要求，參照網(wǎng)站開發(fā)和網(wǎng)頁制作的職業(yè)資格標(biāo)準(zhǔn)，以網(wǎng)頁設(shè)計(jì)與制作員崗位應(yīng)具備的職業(yè)技能為核心，并考慮后續(xù)課程的銜接統(tǒng)籌選擇課程教學(xué)內(nèi)容，突出職業(yè)能力培養(yǎng)，實(shí)現(xiàn)理論和實(shí)踐的完善統(tǒng)一。

3.以“任務(wù)”為主線設(shè)計(jì)教學(xué)環(huán)節(jié)

教學(xué)全過程圍繞任務(wù)（實(shí)際的網(wǎng)頁）進(jìn)行，把網(wǎng)頁設(shè)計(jì)與制作員所需要掌握的知識(shí)點(diǎn)和技術(shù)要點(diǎn)穿插到各個(gè)任務(wù)中，教師邊分析講解、操作演示，學(xué)生邊模仿操作、動(dòng)手練習(xí)，真正做到講練有機(jī)結(jié)合。這樣，既可以提高學(xué)習(xí)效率，又可以激發(fā)學(xué)生的學(xué)習(xí)興趣，進(jìn)而提高學(xué)生分析問題、解決問題的實(shí)際能力，使學(xué)生能夠輕松學(xué)習(xí)、自主學(xué)習(xí)。

4.通過“階梯上升式”實(shí)踐教學(xué)模式強(qiáng)化技能訓(xùn)練

“網(wǎng)頁設(shè)計(jì)與制作”課程設(shè)置了課內(nèi)實(shí)訓(xùn)、課外拓展、模塊綜合實(shí)訓(xùn)、項(xiàng)目綜合實(shí)訓(xùn)四個(gè)階梯上升式實(shí)訓(xùn)教學(xué)環(huán)節(jié)，學(xué)生通過不斷實(shí)踐，實(shí)現(xiàn)網(wǎng)頁制作技能由點(diǎn)到線再到面的不斷推進(jìn)。而每一個(gè)實(shí)踐環(huán)節(jié)，都圍繞著真實(shí)任務(wù)（網(wǎng)站或網(wǎng)頁）進(jìn)行，最終使學(xué)生達(dá)到與網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位的“零距離”接觸?！半A梯式上升式”實(shí)踐教學(xué)模式如圖1所示。

三、“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)內(nèi)容的選取

“網(wǎng)頁設(shè)計(jì)與制作”課程以培養(yǎng)學(xué)生開發(fā)網(wǎng)站與設(shè)計(jì)制作網(wǎng)頁的職業(yè)能力為課程設(shè)計(jì)的主線，在課程體系與課程內(nèi)容上突出“應(yīng)用”、“實(shí)用”。教學(xué)中注重處理好理論知識(shí)講授與技能素質(zhì)培養(yǎng)之間的關(guān)系，教學(xué)重點(diǎn)不僅僅是使學(xué)生掌握課程所講授的理論知識(shí)，而是側(cè)重于培養(yǎng)學(xué)生實(shí)際能力與才干。

“網(wǎng)頁設(shè)計(jì)與制作”課程按照培養(yǎng)技能型、應(yīng)用型人才的目標(biāo)，根據(jù)行業(yè)企業(yè)對(duì)網(wǎng)頁設(shè)計(jì)人才的知識(shí)、能力、素質(zhì)的需求，并考慮前導(dǎo)、后續(xù)課程的銜接，確定課程教學(xué)標(biāo)準(zhǔn)與教學(xué)內(nèi)容，同時(shí)按照實(shí)際工作流程重新組織教學(xué)內(nèi)容，使教學(xué)內(nèi)容具有很強(qiáng)的針對(duì)性和適用性。

“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)內(nèi)容選取流程圖如圖2所示：

在選定課程內(nèi)容的前提下，選擇Dreamweaver、Fireworks、Flash網(wǎng)頁設(shè)計(jì)三劍客軟件包分別作為網(wǎng)頁制作、圖像處理和動(dòng)畫制作的工具，把網(wǎng)頁制作技能的培養(yǎng)轉(zhuǎn)變?yōu)槿N軟件使用方法的學(xué)習(xí)。

四、“網(wǎng)頁設(shè)計(jì)與制作”課程的實(shí)施

“網(wǎng)頁設(shè)計(jì)與制作”是一門實(shí)踐性很強(qiáng)的課程，課程的目標(biāo)是培養(yǎng)學(xué)生網(wǎng)頁、網(wǎng)站的開發(fā)設(shè)計(jì)能力、軟件工具的應(yīng)用能力、再學(xué)習(xí)能力和創(chuàng)新能力，實(shí)現(xiàn)與網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位的“零距離”接觸。為了達(dá)到課程的培養(yǎng)目標(biāo)，在教學(xué)內(nèi)容的組織與安排上突出了以能力為本位的教學(xué)設(shè)計(jì)，以培養(yǎng)職業(yè)綜合能力為基礎(chǔ)，以勝任崗位要求為出發(fā)點(diǎn)，在課程的整個(gè)教學(xué)過程中采用“任務(wù)引領(lǐng)、學(xué)做一體”的教學(xué)模式。

教學(xué)過程均是圍繞著一個(gè)個(gè)教學(xué)任務(wù)（網(wǎng)頁案例）展開。課堂教學(xué)采用任務(wù)引領(lǐng)、項(xiàng)目（實(shí)際網(wǎng)站或網(wǎng)頁）驅(qū)動(dòng)，學(xué)做一體化授課，將知識(shí)點(diǎn)嵌入項(xiàng)目中進(jìn)行講解、練習(xí)、實(shí)驗(yàn)，使學(xué)生在“學(xué)中做、做中學(xué)”，逐步掌握所學(xué)知識(shí)，提高操作技能。

1.課程結(jié)構(gòu)“模塊化”

在“網(wǎng)頁設(shè)計(jì)與制作”課程的具體實(shí)施中，為了適應(yīng)網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位工作的需要，并考慮高職學(xué)生的認(rèn)知水平和認(rèn)知能力，將網(wǎng)站開發(fā)工作流程和內(nèi)容有機(jī)地融合到教學(xué)內(nèi)容中，構(gòu)建以“網(wǎng)站開發(fā)工作過程”為導(dǎo)向的模塊化課程結(jié)構(gòu)，將知識(shí)和技能分為網(wǎng)站規(guī)劃、網(wǎng)頁制作基礎(chǔ)、網(wǎng)站管理、初級(jí)網(wǎng)頁制作、圖像處理、動(dòng)畫制作、高級(jí)網(wǎng)頁制作、網(wǎng)站維護(hù)和綜合實(shí)訓(xùn)9個(gè)模塊若干個(gè)教學(xué)單元，每一個(gè)教學(xué)單元又包含若干個(gè)具體操作任務(wù)，在任務(wù)完成過程中進(jìn)行教學(xué)內(nèi)容的講解。

2.課程內(nèi)容隨著網(wǎng)頁制作技術(shù)的發(fā)展不斷調(diào)整、更新

隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁設(shè)計(jì)三劍客軟件包的版本在不斷更新，網(wǎng)頁設(shè)計(jì)與制作技術(shù)也在不斷升級(jí)換代，為此“網(wǎng)頁設(shè)計(jì)與制作”課程的內(nèi)容也必須根據(jù)網(wǎng)頁制作技術(shù)發(fā)展不斷地改進(jìn)、更新，以適應(yīng)計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)的發(fā)展和社會(huì)的需要，保證學(xué)生所學(xué)的知識(shí)不過時(shí)。

3.教學(xué)環(huán)節(jié)標(biāo)準(zhǔn)化

每一個(gè)教學(xué)單元的教學(xué)都按照“任務(wù)展示”、“教師演示”、“課內(nèi)實(shí)訓(xùn)”和“總結(jié)提高”的過程展開，體現(xiàn)“以學(xué)生為主體”、“以實(shí)踐為核心”的教學(xué)思想。

在任務(wù)展示環(huán)節(jié)，教師首先說明本次課要完成的目標(biāo)并展示本次課任務(wù)（網(wǎng)頁）的瀏覽效果，讓學(xué)生了解本次課的教學(xué)目標(biāo)和需要完成的任務(wù)，激發(fā)學(xué)生對(duì)新知識(shí)的學(xué)習(xí)興趣；在教師演示環(huán)節(jié)，教師逐步示范任務(wù)（網(wǎng)頁）的制作過程，給出任務(wù)的操作方法；在課內(nèi)實(shí)訓(xùn)環(huán)節(jié)，學(xué)生通過模仿教師完成相應(yīng)任務(wù)，訓(xùn)練網(wǎng)頁制作的基本技能；在總結(jié)提高環(huán)節(jié)，教師對(duì)任務(wù)完成過程中涉及的知識(shí)點(diǎn)和技術(shù)要點(diǎn)進(jìn)行歸納講解，使學(xué)生達(dá)到舉一反三的目的。

4.“階梯上升式”實(shí)踐教學(xué)模式

實(shí)踐教學(xué)是高職課程教學(xué)的生命線，而以“做”為特征的“網(wǎng)頁設(shè)計(jì)與制作”課程，重視實(shí)踐教學(xué)更是具有突出的意義。網(wǎng)頁設(shè)計(jì)與制作的理論知識(shí)必須通過學(xué)生動(dòng)手練習(xí)才能變成學(xué)生具備的網(wǎng)頁制作職業(yè)技能。基于這些，形成了“課內(nèi)實(shí)訓(xùn)、課外拓展、模塊綜合實(shí)訓(xùn)、項(xiàng)目綜合實(shí)訓(xùn)”階梯上升式的實(shí)踐教學(xué)環(huán)節(jié)。這種教學(xué)模式的實(shí)施說明如表1所示。

5.采用符合高職學(xué)生認(rèn)知規(guī)律的教學(xué)方法

高職層次的學(xué)生善于形象思維、動(dòng)手能力強(qiáng)，厭學(xué)理論知識(shí)、樂學(xué)實(shí)際操作，因而最適合“做中學(xué)、學(xué)中做”?；诖瞬捎昧嘶谡鎸?shí)項(xiàng)目的“任務(wù)引領(lǐng)、學(xué)做一體”教學(xué)模式。

課程的教學(xué)過程圍繞著一個(gè)個(gè)任務(wù)（網(wǎng)站或網(wǎng)頁）進(jìn)行，在課堂中，教師通過分析解剖一個(gè)個(gè)具體的任務(wù)，圍繞一個(gè)個(gè)實(shí)際網(wǎng)站的構(gòu)建及實(shí)現(xiàn)的方法，從簡(jiǎn)到繁，從易到難，引導(dǎo)學(xué)生制作網(wǎng)頁，理論與實(shí)踐相結(jié)合，邊學(xué)邊練，以練為主，最終完成實(shí)訓(xùn)任務(wù)，達(dá)到“課完即會(huì)、課后即能”的效果。

通過不斷的探索和改進(jìn)，我院“網(wǎng)頁設(shè)計(jì)與制作”課程已經(jīng)形成了“圍繞一條主線，通過三個(gè)構(gòu)建，實(shí)現(xiàn)三個(gè)目標(biāo)”的教學(xué)特色：

一條主線即任務(wù)；三個(gè)構(gòu)建為任務(wù)引領(lǐng)、學(xué)做一體化教學(xué)模式的構(gòu)建，“模塊化”課程結(jié)構(gòu)的構(gòu)建和“階梯式”實(shí)踐環(huán)節(jié)的構(gòu)建。

達(dá)到三個(gè)目標(biāo)，第一，素質(zhì)綜合化，通過任務(wù)的學(xué)習(xí)和網(wǎng)頁設(shè)計(jì)開發(fā)，培養(yǎng)了學(xué)生刻苦鉆研、勇于開拓的創(chuàng)新精神，培養(yǎng)了學(xué)生科學(xué)嚴(yán)謹(jǐn)、實(shí)事求是的工作態(tài)度，加深了學(xué)生團(tuán)結(jié)協(xié)作、互幫互助的集體觀念，全方位地提高了學(xué)生綜合素質(zhì)；第二，設(shè)計(jì)個(gè)性化，通過任務(wù)的學(xué)習(xí)和網(wǎng)頁設(shè)計(jì)開發(fā)使學(xué)生的設(shè)計(jì)思想得到充分的展現(xiàn)，設(shè)計(jì)的作品更具有個(gè)性；第三，能力崗位化，通過任務(wù)的學(xué)習(xí)和網(wǎng)頁設(shè)計(jì)開發(fā)讓學(xué)生的能力更符合崗位的要求，實(shí)現(xiàn)與網(wǎng)頁設(shè)計(jì)制作員崗位“零距離”接觸。

多年的教學(xué)實(shí)踐證明，在“網(wǎng)頁設(shè)計(jì)與制作”課程中引入“任務(wù)引領(lǐng)、學(xué)做一體”教學(xué)模式，用任務(wù)作為教學(xué)的載體，讓學(xué)生在學(xué)中做、做中學(xué)、學(xué)做一體，通過學(xué)生主動(dòng)的實(shí)踐、探索，使學(xué)生在獲得網(wǎng)頁設(shè)計(jì)與制作職業(yè)能力的同時(shí)，還鍛煉了學(xué)生的動(dòng)手能力，提高了學(xué)生分析問題和解決問題的能力，培養(yǎng)了學(xué)生嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度和團(tuán)結(jié)協(xié)作精神，達(dá)到了學(xué)生與網(wǎng)頁設(shè)計(jì)與制作員職業(yè)崗位的“零距離”接觸。

參考文獻(xiàn)：

[1]李亞桂，竺輝.“任務(wù)引領(lǐng)型”專業(yè)課教學(xué)的實(shí)踐與啟示——以《建筑組合體的投影》一節(jié)課為例[J].職業(yè)，2011，（11）.

篇4

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；形式美法則；構(gòu)成要素

中圖分類號(hào)：G71 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-0118（2012）-03-0-02

如今，互聯(lián)網(wǎng)已經(jīng)融入我們?nèi)粘W(xué)習(xí)生活的各個(gè)環(huán)節(jié)，并在全球范圍內(nèi)飛速發(fā)展。其打破了國(guó)界、地域、文化的限制，使信息傳達(dá)的范圍、速率都產(chǎn)生了質(zhì)的飛躍?；ヂ?lián)網(wǎng)中數(shù)以萬計(jì)的網(wǎng)站中，每個(gè)網(wǎng)站都擁有自己不同的網(wǎng)頁，一個(gè)個(gè)變換的網(wǎng)頁構(gòu)成我們互相交流的媒介。因此，網(wǎng)站制作過程中，特別是網(wǎng)頁頁面編排設(shè)計(jì)時(shí)，要展示出自己獨(dú)特的設(shè)計(jì)風(fēng)格。如何設(shè)計(jì)出視覺效果好，色彩搭配和諧，結(jié)構(gòu)合理的網(wǎng)頁版面是網(wǎng)頁設(shè)計(jì)中的一個(gè)重要問題。

一、網(wǎng)頁設(shè)計(jì)中的視覺流程

網(wǎng)站的宣傳內(nèi)容、整體風(fēng)格、設(shè)計(jì)理念都要通過視覺感官被瀏覽者所欣賞、接受和感受。設(shè)計(jì)精美的網(wǎng)頁版面能夠讓瀏覽者增加瀏覽興趣，擁有美好心情，從而增加網(wǎng)站點(diǎn)擊率。反之，網(wǎng)頁頁面凌亂不堪會(huì)嚴(yán)重影響瀏覽者觀看閱讀的情緒，離開網(wǎng)頁。網(wǎng)頁視覺元素能否引人注目會(huì)直接影響到網(wǎng)站的信息傳達(dá)，若想想通過網(wǎng)頁更好地傳達(dá)信息，網(wǎng)頁視覺效果良好是其基本條件，讓網(wǎng)絡(luò)真正意義上成為可讀強(qiáng)性、新穎的媒體，為此網(wǎng)頁設(shè)計(jì)者設(shè)計(jì)網(wǎng)頁時(shí)，必須適應(yīng)人們閱讀習(xí)慣和滿足人們的審美需求。對(duì)每個(gè)視覺造型元素之間的距離、位置、面積以及視覺流程等都要精心設(shè)計(jì)。

人們閱讀文章時(shí)，視覺總會(huì)有一種先后順序習(xí)慣，有一定的方向，整個(gè)版面的走勢(shì)有一個(gè)主旋律。網(wǎng)頁設(shè)計(jì)中的主標(biāo)題、重要廣告、更新的重要信息等突出信息通常選擇放于此位置。但視覺流程與學(xué)習(xí)數(shù)學(xué)公式不同，屬感性范疇，其只要符合人們認(rèn)識(shí)過程的心理順序和邏輯順序，就可以根據(jù)感受靈活運(yùn)用。網(wǎng)頁設(shè)計(jì)時(shí)，合理的運(yùn)用網(wǎng)頁的視覺流程，能夠引導(dǎo)瀏覽者按照一定的順序閱讀網(wǎng)頁，組織好整個(gè)網(wǎng)頁版面的視覺導(dǎo)向，從而影響到整個(gè)網(wǎng)站的信息傳達(dá)和功能實(shí)現(xiàn)。因此網(wǎng)頁的編輯設(shè)計(jì)，視覺導(dǎo)向是一個(gè)重要問題，信息傳達(dá)是網(wǎng)頁設(shè)計(jì)的一種功能性的體現(xiàn)，這種傳達(dá)要符合人們普遍的思維習(xí)慣，做到視覺流程合理、順暢、自如。好的視覺流程布置，能使網(wǎng)頁上的各種信息要素在一定空間內(nèi)合理分布，能使頁面上各信息要素的位置、間隙、大小保持一定的節(jié)奏感和美感。一個(gè)網(wǎng)站主要說明的東西必須通過網(wǎng)站首頁醒目位置加以體現(xiàn)和展示，以方便瀏覽者閱讀和理解。

二、網(wǎng)頁設(shè)計(jì)的審美需求

網(wǎng)頁設(shè)計(jì)是近些年才發(fā)展起來的一門設(shè)計(jì)類學(xué)科，這些年隨著網(wǎng)絡(luò)的發(fā)展，人們?cè)絹碓街匾暰W(wǎng)頁版面的設(shè)計(jì)和網(wǎng)站風(fēng)格的整體設(shè)計(jì)。網(wǎng)頁不僅是將各種想要傳達(dá)的要素簡(jiǎn)單的羅列在頁面上，而是要考慮如何使瀏覽者能更感興趣的和更有效率的接收網(wǎng)頁上的信息內(nèi)容。這就要求我們從審美的方面入手，設(shè)計(jì)制作出美觀、完整、新穎、合理的頁面。使瀏覽者觀看閱讀起來心情愉悅，更好的接受網(wǎng)頁所傳達(dá)給我們的信息。我們可以把傳統(tǒng)平面設(shè)計(jì)中的形式?jīng)]的法則和現(xiàn)代的網(wǎng)頁設(shè)計(jì)的具體問題相結(jié)合起來，運(yùn)用一些平面設(shè)計(jì)中美的基本形式到網(wǎng)頁版面的設(shè)計(jì)中去，增加網(wǎng)頁設(shè)計(jì)的美感和瀏覽者的視覺審美需求。

（一）版面的規(guī)范化

頁面編輯的規(guī)范化要求是網(wǎng)頁設(shè)計(jì)的重要方面。比如使用Dreamweaver設(shè)計(jì)網(wǎng)頁時(shí)，是選擇左右型結(jié)構(gòu)、左中右型結(jié)構(gòu)、左右型結(jié)構(gòu)框架，還是用表格系統(tǒng)來定位網(wǎng)頁中版面的規(guī)劃。要遵循一定的規(guī)范。在網(wǎng)頁編排中應(yīng)正確使用文字、標(biāo)點(diǎn)符號(hào)、計(jì)量單位、規(guī)范使用術(shù)語、圖片和Flas等。對(duì)網(wǎng)頁版面中的文字、圖形、色彩的設(shè)計(jì)，都要遵循形式美的視覺規(guī)律。網(wǎng)頁的內(nèi)容與形式的表現(xiàn)必須統(tǒng)一和具有秩序，形式表現(xiàn)必須服從內(nèi)容要求，網(wǎng)頁上的各種對(duì)象之間要分清主次，突出重點(diǎn)，有一定的整體感。

（二）版面的均衡性

網(wǎng)頁的版面雖然有限，但在瀏覽者的眼里和平面設(shè)計(jì)要求一樣同樣要有視覺的均衡性。版面構(gòu)圖的基本元素是點(diǎn)、線、面，其中單個(gè)的字符是點(diǎn)，由字符組成的行是線，由行組成的段落是面。線和面的運(yùn)動(dòng)方向可以歸納為水平、垂直和傾斜三種形式。水平和垂直給人以安靜和固定的感覺，傾斜則具有運(yùn)動(dòng)感。水平、垂直和傾斜組合起來使用會(huì)給版面帶來豐富和生動(dòng)的效果，從而使版面在整體上保持平衡的前提下具有動(dòng)感和變化。

（三）版面的裝飾性

“圖”與“地”的對(duì)比中版面的裝飾性中和重點(diǎn)?？梢允褂每瞻走M(jìn)行裝飾，力求在平面中達(dá)到不平的效果。要注意立體的裝飾效果，比如在文字大小、顏色的處理上要有對(duì)比，圖片的擺放也要有大小、顏色的對(duì)比，包括和背景顏色的對(duì)比，從而使版面在整體上體現(xiàn)出層次感。給瀏覽者以賞心悅目之感。

（四）版面的統(tǒng)一性

網(wǎng)頁版面設(shè)計(jì)中的統(tǒng)一，就是指在版面的整體感上要達(dá)到一致，風(fēng)格上一致，色彩上統(tǒng)一協(xié)調(diào)，比如文字字體要統(tǒng)一，不能有的嚴(yán)肅，有的活躍，有的時(shí)尚，有的古板，同時(shí)色彩感受上也要達(dá)到風(fēng)格統(tǒng)一。

三、學(xué)會(huì)分析網(wǎng)頁中各構(gòu)成要素

網(wǎng)頁設(shè)計(jì)就是通過各種要素向?yàn)g覽者傳達(dá)信息，以實(shí)現(xiàn)宣傳的目的。其構(gòu)成要素包括文字、圖形、圖像、標(biāo)志、色彩等造型要素及標(biāo)題、信息菜單、信息正文、標(biāo)語、單位名稱等內(nèi)容要素，如何在網(wǎng)頁版面中合理的設(shè)計(jì)安排這些要素是我們要細(xì)心研究的問題。

（一）文字的編排與設(shè)計(jì)

文字作為信息傳達(dá)的主要手段是網(wǎng)頁設(shè)計(jì)的主體，是所有宣傳物中不可缺少的元素，也是網(wǎng)頁中必不可少的元素，因此網(wǎng)頁中文字將占據(jù)相當(dāng)大的面積，文字表現(xiàn)的好與壞會(huì)影響到整個(gè)網(wǎng)頁的質(zhì)量。必須考慮文字編輯的整體效果，給人以清晰的視覺印象，切記不要使頁面中的文字看起來凌亂、繁雜，過多的裝飾會(huì)讓人不容易辨認(rèn)和理解。不可只為美觀而創(chuàng)意文字，忽略了文字本身的傳達(dá)信息功能。版面設(shè)計(jì)時(shí)要注意文字的大小變化，色彩變化，明暗變化，用這些變化使字體版面活躍，達(dá)到視覺上的美感，注意變化中的統(tǒng)一，以獲得良好的心理反應(yīng)，達(dá)到完美的文字編排效果。

（二）圖片的編排與設(shè)計(jì)

圖片是網(wǎng)頁版面中文字以外的又一主要元素，是傳達(dá)信息的有力途徑，圖片的參與可以加大網(wǎng)頁提供的信息量，而且圖片的引入也大大美化了網(wǎng)絡(luò)頁面。可以說，要使網(wǎng)頁在純文本基礎(chǔ)上變得更有趣味，最為簡(jiǎn)捷省力的辦法就是使用圖片。對(duì)于一條信息來說，圖片對(duì)瀏覽者的吸引力遠(yuǎn)超單純的文字。圖片的位置、面積、數(shù)量、形式、方向等直接關(guān)系到網(wǎng)頁的視覺傳達(dá)。在頁面圖片的合理選用時(shí)，一要注意統(tǒng)一，二要注意悅目，三要注意突出重點(diǎn)。

（三）色彩的設(shè)計(jì)

色彩是美麗而豐富的，不同的色彩會(huì)給我們帶來不同的心靈感受，現(xiàn)在一些大的企業(yè)已經(jīng)將色彩融入到公司的整體企業(yè)識(shí)別中，因?yàn)樯誓苁谷水a(chǎn)生聯(lián)想和感情，例如紅色是火的顏色，熱情、奔放，也是血的顏色，代表危險(xiǎn)，綠色是自然、生命的顏色，象征安寧與和平，紫色高貴、神秘，白色代表純潔等等。一個(gè)網(wǎng)站格調(diào)的設(shè)定，往往取決于網(wǎng)站顏色的選擇。色彩是人們?yōu)g覽網(wǎng)頁的第一印象，它帶給我們不同的感受，它的好壞直接影響瀏覽者的觀賞興趣。因此，色彩設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中居于十分重要的地位。網(wǎng)頁的色彩設(shè)計(jì)具體應(yīng)把握以下兩個(gè)方面：一是是整個(gè)頁面的色彩選擇，確定一個(gè)有利于體現(xiàn)網(wǎng)站主題的主色調(diào)。網(wǎng)頁的設(shè)計(jì)一般以淺顏色為背景的居多，如淺灰色、淺黃色、淺藍(lán)色、淺綠色。大型的商業(yè)網(wǎng)站，你會(huì)發(fā)現(xiàn)他們更多運(yùn)用的是白色、藍(lán)色、黃色等，使得網(wǎng)頁顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開網(wǎng)頁的速度。二是在背景的色調(diào)搭配上一定要注意不能有強(qiáng)烈的對(duì)比，大面積顏色適宜采用低比度，因?yàn)檫^于豐富的背景色彩會(huì)影響前景圖片和文字的取色，嚴(yán)重時(shí)會(huì)使文字溶于背景中，不易辨識(shí)。所以，背景一般應(yīng)以單純?yōu)橐?。如果需要一定的變化以增加背景的厚度，也?yīng)是在盡量統(tǒng)一的前提下的一種變化。

網(wǎng)頁作為作為一種新生事物，以它特有的方式飛速發(fā)展，它涵蓋了平面設(shè)計(jì)、廣告設(shè)計(jì)、版式設(shè)計(jì)、色彩設(shè)計(jì)等等知識(shí)。網(wǎng)頁設(shè)計(jì)是一種綜合性的設(shè)計(jì)，它所涉及的范圍非常廣泛。形式美的法則是任何事物所必需具備的基本因素，網(wǎng)頁信息不僅是為了滿足使用者的需求，更重要的是創(chuàng)造一種視覺上的愉悅，符合形式美的法則，使瀏覽者在閱讀瀏覽的時(shí)候產(chǎn)生共鳴。未來的互聯(lián)網(wǎng)究竟會(huì)發(fā)展到什么程度我們不得而知，就讓我們?cè)谶@個(gè)互聯(lián)網(wǎng)的大世界里去不段的探索和追尋吧。

參考文獻(xiàn)：

[1]田中一光著,朱鍔譯.設(shè)計(jì)的覺醒[M].廣西師范大學(xué)出版社,2009,(11).

[2]謝成開,孫丹麗編著.網(wǎng)站規(guī)劃與網(wǎng)頁設(shè)計(jì)[M].西南師范大學(xué)出版社,2009,(8).

篇5

關(guān)鍵詞 網(wǎng)頁設(shè)計(jì) UI界面設(shè)計(jì) 教學(xué)分析

Abstract In the current higher education in the process of multimedia web design is a very important part， but also the required course of professional web design， with the help of a very important role in improving students' ability of web design. In the teaching process of modern web design courses， improve the teaching effect of the course is to promote the further development of web design， students' ability， should be UI interface design teaching， thus to cultivate students' ability to design better. This paper analyzes the UI interface design teaching in multimedia web design course teaching.

Keywords web design； UI interface design； teaching analysis

隨著現(xiàn)代網(wǎng)絡(luò)技術(shù)不斷發(fā)展，社會(huì)上對(duì)網(wǎng)頁設(shè)計(jì)人才也有著越來越大的需求，因此在高校教育過程中加強(qiáng)網(wǎng)頁設(shè)計(jì)課程教學(xué)，對(duì)網(wǎng)頁設(shè)計(jì)專業(yè)人才進(jìn)行培養(yǎng)具有十分重要的作用及意義。就當(dāng)前網(wǎng)頁設(shè)計(jì)課程教學(xué)實(shí)際情況而言，UI界面設(shè)計(jì)教學(xué)已經(jīng)成為十分重要的一項(xiàng)內(nèi)容，可在很大程度上提高學(xué)生設(shè)計(jì)能力，促進(jìn)網(wǎng)頁設(shè)計(jì)教學(xué)進(jìn)一步發(fā)展。作為網(wǎng)頁設(shè)計(jì)課程教師，應(yīng)當(dāng)充分認(rèn)識(shí)UI界面設(shè)計(jì)教學(xué)的重要性，并且要通過有效方法及策略加強(qiáng)UI界面設(shè)計(jì)教學(xué)，使其得到理想效果。

1 網(wǎng)頁設(shè)計(jì)課程中UI界面設(shè)計(jì)教學(xué)的重要性分析

首先，UI設(shè)計(jì)教學(xué)使網(wǎng)頁設(shè)計(jì)實(shí)踐中視覺傳達(dá)設(shè)計(jì)理論的不適性得以有效解決。對(duì)于傳統(tǒng)視覺設(shè)計(jì)理論而言，其研究對(duì)象主要為靜止媒介中相關(guān)視覺現(xiàn)象及規(guī)律，其代表主要就是形式、色彩以及圖形與文字等一些基礎(chǔ)理論課程，其視覺對(duì)象大部分都屬于二維空間，其基礎(chǔ)為視覺感官刺激，是一種信息傳遞設(shè)計(jì)。相比于傳統(tǒng)視覺傳達(dá)設(shè)計(jì)而言，網(wǎng)頁設(shè)計(jì)的承載媒介與其存在本質(zhì)差異，與靜止媒介相比較而言，網(wǎng)絡(luò)媒介在形式上具備光影效果強(qiáng)化，同時(shí)還具備運(yùn)動(dòng)現(xiàn)象參與以及交互行為主導(dǎo)，在網(wǎng)頁設(shè)計(jì)過程中以靜止形態(tài)為基礎(chǔ)的版式和視覺流程原理兩者之間有嚴(yán)重不適情況出現(xiàn)，網(wǎng)頁設(shè)計(jì)涉及到聽覺、視覺及觸覺等多種感覺渠道，因此在網(wǎng)頁設(shè)計(jì)實(shí)踐過程中單獨(dú)利用傳統(tǒng)視覺設(shè)計(jì)理論很難對(duì)其進(jìn)行指導(dǎo)，而UI設(shè)計(jì)理念的應(yīng)用能夠使這一情況得以很好解決。

其次，UI設(shè)計(jì)教學(xué)使網(wǎng)頁設(shè)計(jì)方法及設(shè)計(jì)效果具有更加明確的驗(yàn)證方式。對(duì)于設(shè)計(jì)類課程而言，其核心內(nèi)容就是通^對(duì)學(xué)生進(jìn)行啟發(fā)，使其對(duì)設(shè)計(jì)進(jìn)行思考及實(shí)踐，這樣才能夠使設(shè)計(jì)教育產(chǎn)生更加實(shí)際的價(jià)值。在UI設(shè)計(jì)理論體系中，其核心目標(biāo)為用戶，也就是對(duì)用戶進(jìn)行研究，從而對(duì)設(shè)計(jì)更好服務(wù)于用戶進(jìn)行研究，在學(xué)生將網(wǎng)站項(xiàng)目作為互聯(lián)網(wǎng)產(chǎn)品實(shí)行設(shè)計(jì)訓(xùn)練情況下，課堂教學(xué)中的各個(gè)方面均將會(huì)更加明確，并且在實(shí)行設(shè)計(jì)實(shí)踐過程中，也就能夠在情感上對(duì)所選擇設(shè)計(jì)方法合理性更加容易理解。在UI設(shè)計(jì)過程中提出信息架構(gòu)有關(guān)理論，這一理論使網(wǎng)站信息結(jié)構(gòu)設(shè)計(jì)具有更加可靠方法，并且在設(shè)計(jì)網(wǎng)站導(dǎo)航系統(tǒng)、標(biāo)識(shí)系統(tǒng)以及檢索系統(tǒng)與組織系統(tǒng)過程中，可使設(shè)計(jì)人員責(zé)任及實(shí)施方法更加明晰。另外，在UI設(shè)計(jì)中引入用戶測(cè)試，在檢驗(yàn)網(wǎng)頁設(shè)計(jì)方案使用方面具有更加系統(tǒng)的方法，根據(jù)具有較強(qiáng)代表性的客戶對(duì)方案的最終可行性設(shè)計(jì)進(jìn)行測(cè)試，也就是對(duì)其最終目標(biāo)進(jìn)行測(cè)試。

第三，UI設(shè)計(jì)教學(xué)能夠使網(wǎng)頁設(shè)計(jì)課程更好應(yīng)用于網(wǎng)頁設(shè)計(jì)教學(xué)。對(duì)于UI設(shè)計(jì)理論教學(xué)而言，其對(duì)網(wǎng)頁技術(shù)課程和網(wǎng)頁技術(shù)課程兩者之間界定進(jìn)行明確，可使設(shè)計(jì)人員對(duì)設(shè)計(jì)更加專注地進(jìn)行思考及實(shí)踐，而不必對(duì)程序進(jìn)行考慮，同時(shí)隨著當(dāng)前網(wǎng)頁制作工具逐漸向集成化及人性化發(fā)展，在面對(duì)設(shè)計(jì)對(duì)象中，通過復(fù)雜功能可使設(shè)計(jì)過程更加簡(jiǎn)單化。在課堂實(shí)際教學(xué)過程中，應(yīng)當(dāng)使學(xué)生對(duì)當(dāng)前網(wǎng)頁制作技術(shù)能夠達(dá)到的效果有所了解，并且要了解一些基礎(chǔ)操作代碼，這在實(shí)際教學(xué)過程中對(duì)不同層次學(xué)生分配不同任務(wù)十分有利，可使因材施教得以真正實(shí)現(xiàn)，并且對(duì)于課程中的主要任務(wù)，可將其定位于教學(xué)設(shè)計(jì)方法，可對(duì)設(shè)計(jì)任務(wù)的驅(qū)動(dòng)性及設(shè)計(jì)實(shí)踐參與進(jìn)一步強(qiáng)調(diào)，可使學(xué)生了解設(shè)計(jì)并非僅僅為簡(jiǎn)單制作。①②

2 當(dāng)前網(wǎng)頁設(shè)計(jì)課程中UI設(shè)計(jì)教學(xué)現(xiàn)狀分析

就當(dāng)前實(shí)際情況而言，UI設(shè)計(jì)課程仍屬于前沿學(xué)科，由于當(dāng)前UI設(shè)計(jì)專業(yè)就業(yè)形勢(shì)比較良好，很多高校均開設(shè)UI設(shè)計(jì)專業(yè)課程，從而使UI設(shè)計(jì)課程教學(xué)得到良好發(fā)展。然而，當(dāng)前我國(guó)UI設(shè)計(jì)產(chǎn)業(yè)仍不夠完善，當(dāng)前很多人對(duì)UI設(shè)計(jì)認(rèn)識(shí)仍處于較淺層次，因而當(dāng)前高校內(nèi)UI設(shè)計(jì)教學(xué)仍缺乏完善系統(tǒng)，其具體體現(xiàn)主要表現(xiàn)在以下方面：

第一，UI設(shè)計(jì)課程與網(wǎng)頁設(shè)計(jì)課程結(jié)合程度比較低。對(duì)于UI設(shè)計(jì)課程而言，其中包含很多網(wǎng)頁設(shè)計(jì)方面的相關(guān)知識(shí)點(diǎn)，然而很多高校在對(duì)UI設(shè)計(jì)課程進(jìn)行設(shè)計(jì)時(shí)與其它課程之間出現(xiàn)脫節(jié)情況，其所導(dǎo)致結(jié)果就是學(xué)生無法對(duì)該課程知識(shí)較好地進(jìn)行系統(tǒng)性學(xué)習(xí)。

第二，UI設(shè)計(jì)課程設(shè)置缺乏實(shí)踐性。對(duì)于UI設(shè)計(jì)課程而言，其實(shí)踐性比較強(qiáng)，然而當(dāng)前很多院校在實(shí)際教學(xué)過程中往往存在定位不清楚情況，其所造成結(jié)果及時(shí)學(xué)生未能夠?qū)ο嚓P(guān)專業(yè)知識(shí)進(jìn)行較系統(tǒng)學(xué)習(xí)，導(dǎo)致其在今后社會(huì)就業(yè)過程中缺乏應(yīng)有技能。

第三，教師素質(zhì)比較低。在UI設(shè)計(jì)教學(xué)過程中，教師素質(zhì)會(huì)對(duì)其產(chǎn)生直接影響，然而在當(dāng)前高校UI設(shè)計(jì)教學(xué)過程中，很多教師都缺乏專業(yè)素質(zhì)，學(xué)歷比較低，并且實(shí)踐能力比較差，未能夠較好把握課程教學(xué)，導(dǎo)致實(shí)際教學(xué)效果不理想。②③

3 網(wǎng)頁設(shè)計(jì)教學(xué)過程中UI設(shè)計(jì)教學(xué)的有效策略分析

3.1 進(jìn)一步完善課程教學(xué)大綱

在當(dāng)前網(wǎng)頁設(shè)計(jì)教學(xué)過程中，UI設(shè)計(jì)課程教學(xué)已經(jīng)成為必須內(nèi)容，其與其它課程之間具有十分密切的聯(lián)系，所以在設(shè)置課程方面應(yīng)當(dāng)對(duì)課程教學(xué)大綱進(jìn)一步進(jìn)行完善。

首先，應(yīng)當(dāng)對(duì)當(dāng)前教學(xué)目標(biāo)明確。對(duì)于UI界面設(shè)計(jì)課程教學(xué)目標(biāo)而言，一方面是要求學(xué)生將各種相關(guān)網(wǎng)頁設(shè)計(jì)實(shí)踐操作方法掌握，并且對(duì)各種網(wǎng)頁設(shè)計(jì)規(guī)范及標(biāo)準(zhǔn)熟知；另一方面而言，就是要使學(xué)生將網(wǎng)頁設(shè)計(jì)相關(guān)流程掌握，對(duì)于用戶設(shè)計(jì)理念應(yīng)當(dāng)準(zhǔn)確領(lǐng)悟，并且應(yīng)當(dāng)對(duì)相關(guān)流程熟知。

其次，對(duì)課時(shí)行合理分配。由于UI設(shè)計(jì)課程內(nèi)容具有較強(qiáng)連貫性，該課程開始應(yīng)當(dāng)安排在二年級(jí)或者三年級(jí)開設(shè)，從而使學(xué)生能夠?qū)⒈匾A(chǔ)知識(shí)掌握，之所以對(duì)課時(shí)進(jìn)行這樣的設(shè)計(jì)，主要目的就是使學(xué)生先對(duì)相關(guān)系統(tǒng)理論知識(shí)進(jìn)行一年時(shí)間學(xué)習(xí)，使其能夠?qū)⑾嚓P(guān)基礎(chǔ)理論知識(shí)掌握，在此基礎(chǔ)上對(duì)該課程進(jìn)行深入進(jìn)一步學(xué)習(xí)。另外，還能夠?yàn)閷W(xué)生今后就業(yè)劃分提供能力進(jìn)行學(xué)習(xí)，可使學(xué)生依據(jù)今后就業(yè)崗位對(duì)相關(guān)學(xué)習(xí)能力進(jìn)行鍛煉。

第三，對(duì)設(shè)置課程原則明確。在對(duì)課程進(jìn)行具體設(shè)置過程中，應(yīng)當(dāng)注意遵循相關(guān)原則，主要包括人性化原則、反饋原則以及靈活性原則，此外還包括安全性原則與易用性原則。

3.2 明確培養(yǎng)人才方案

人才培養(yǎng)方案能夠?qū)虒W(xué)活動(dòng)進(jìn)行指導(dǎo)，同時(shí)也是教學(xué)活動(dòng)得以開展的依據(jù)，人才培養(yǎng)方案對(duì)具體教學(xué)內(nèi)容及具體課程設(shè)置結(jié)構(gòu)進(jìn)行規(guī)定，在制定人才培養(yǎng)方面為不斷進(jìn)行變化的，人才培養(yǎng)的制定應(yīng)當(dāng)以深入社會(huì)調(diào)研為基礎(chǔ)，同時(shí)應(yīng)當(dāng)與學(xué)生實(shí)際特點(diǎn)相結(jié)合。

通過調(diào)查UI設(shè)計(jì)專業(yè)人員實(shí)際就業(yè)情況及社會(huì)對(duì)學(xué)生能力要求，其結(jié)果顯示當(dāng)前學(xué)生就業(yè)能力，尤其學(xué)生實(shí)踐能力仍有一定缺陷。因此，在當(dāng)前實(shí)際教學(xué)過程中應(yīng)當(dāng)對(duì)人才培養(yǎng)方案進(jìn)行積極探討，從而將明確人才培養(yǎng)方案制定出來，以便能夠?qū)θ瞬排囵B(yǎng)方向進(jìn)行合理定位。對(duì)于UI設(shè)計(jì)課程而言，其是以地區(qū)產(chǎn)業(yè)升級(jí)需求為基礎(chǔ)，為社會(huì)培養(yǎng)實(shí)用型高素質(zhì)人才的一門課程，所以其課程定位應(yīng)當(dāng)為確定一體化項(xiàng)目課程。所以，通過進(jìn)行課程學(xué)習(xí)，所培養(yǎng)的學(xué)生應(yīng)當(dāng)具備的技能主要包括以下方面：

其一，應(yīng)當(dāng)具備牢固理論基礎(chǔ)。對(duì)于UI界面設(shè)計(jì)而言，其理論性比較強(qiáng)，若缺乏牢固理論基礎(chǔ)，則在今后結(jié)業(yè)過程中學(xué)生也就無法對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行熟練運(yùn)用，所以學(xué)生對(duì)該課程進(jìn)行學(xué)習(xí)的前提就是應(yīng)當(dāng)將相關(guān)理論知識(shí)掌握。

其二，應(yīng)當(dāng)具備較強(qiáng)的實(shí)踐操作能力。學(xué)生在畢業(yè)之后都是要直接進(jìn)入就業(yè)崗位的，所以學(xué)生必須要具備較強(qiáng)就業(yè)實(shí)踐能力。

其三，應(yīng)當(dāng)具備較高綜合素質(zhì)。隨著當(dāng)前社會(huì)就業(yè)壓力越來越大，人才競(jìng)爭(zhēng)也越來越激烈，學(xué)生為能夠使自身競(jìng)爭(zhēng)力得以有效提高，必須要具淞己萌宋乃刂始爸耙檔賴攏同時(shí)還應(yīng)當(dāng)具備較高的思想政治素質(zhì)。

3.3 積極創(chuàng)新課堂教學(xué)手段

首先，應(yīng)當(dāng)積極豐富課堂教學(xué)方法，進(jìn)一步激發(fā)學(xué)生學(xué)習(xí)熱情。傳統(tǒng)灌輸式教學(xué)模式會(huì)對(duì)學(xué)生學(xué)習(xí)熱情及創(chuàng)新思維產(chǎn)生抑制，所以，教師應(yīng)當(dāng)改變傳統(tǒng)單一教學(xué)方法。在實(shí)際教學(xué)過程中，教師可選擇多種方法相結(jié)合的教學(xué)方式，可使學(xué)生通過課堂融入社會(huì)，然后再回歸課堂，并且可在課堂對(duì)自身所設(shè)計(jì)優(yōu)秀作品進(jìn)行展示，使學(xué)生在多樣化訓(xùn)練過程中能夠積極參與。

其次，在課堂教學(xué)過程中可引入設(shè)計(jì)競(jìng)賽，從而使學(xué)生社會(huì)實(shí)踐能力得以增強(qiáng)。在提高學(xué)生實(shí)踐能力方面，設(shè)計(jì)競(jìng)賽屬于十分重要的一種途徑，所以在UI設(shè)計(jì)教學(xué)過程中可適當(dāng)引入設(shè)計(jì)競(jìng)賽內(nèi)容，從而使理論性及實(shí)踐性實(shí)現(xiàn)有效結(jié)合，進(jìn)而有效提高學(xué)生學(xué)習(xí)積極性。

第三，可開展作品展示，加強(qiáng)學(xué)生之間學(xué)習(xí)交流。在實(shí)際課堂教學(xué)過程中，教師可選擇課堂展覽方式，可邀請(qǐng)同一專業(yè)學(xué)生共同進(jìn)行欣賞，使學(xué)生能夠在參觀展覽過程中加強(qiáng)交流討論，從而使學(xué)生綜合素養(yǎng)能夠得以有效提高，促進(jìn)學(xué)生進(jìn)一步發(fā)展。③④

4 結(jié)語

在當(dāng)前多媒體網(wǎng)頁設(shè)計(jì)實(shí)際教學(xué)過程中，UI設(shè)計(jì)教學(xué)是十分重要的一項(xiàng)內(nèi)容，對(duì)網(wǎng)頁設(shè)計(jì)教學(xué)進(jìn)一步發(fā)展具有很大促進(jìn)作用。因此，在實(shí)際教學(xué)過程中，教師應(yīng)當(dāng)充分認(rèn)識(shí)UI設(shè)計(jì)教學(xué)重要性，并且應(yīng)用了解當(dāng)前教學(xué)現(xiàn)狀，從而通過進(jìn)一步完善課程教學(xué)大綱，明確培養(yǎng)人才方案，積極創(chuàng)新課堂教學(xué)手段等方式加強(qiáng)UI設(shè)計(jì)教學(xué)，從而使實(shí)際教學(xué)效果得以提升。

注釋

① 張軍.網(wǎng)頁設(shè)計(jì)課程中關(guān)于UI設(shè)計(jì)教學(xué)的探索體會(huì)[J].湖北美術(shù)學(xué)院學(xué)報(bào)，2009（4）.

② 張延玲，喻蕓.網(wǎng)頁設(shè)計(jì)課程中融入U(xiǎn)I設(shè)計(jì)理念的教學(xué)探索[J].電腦知識(shí)與技術(shù)，2015（34）.

篇6

【關(guān)鍵詞】Web標(biāo)準(zhǔn)；電子商務(wù)網(wǎng)站；設(shè)計(jì)與制作策略；分析

前言

互聯(lián)網(wǎng)技術(shù)的推廣與發(fā)展進(jìn)程不斷加快，對(duì)人們的日常生活與工作各方面都產(chǎn)生了重要影響。網(wǎng)頁的設(shè)計(jì)與制作隨著網(wǎng)絡(luò)技術(shù)、科技水平的發(fā)展受到人們的高度重視，其主要是將網(wǎng)絡(luò)作為主要載體，將各種信息以更加快捷、方便的形式傳達(dá)給人們。根據(jù)相關(guān)數(shù)據(jù)統(tǒng)計(jì)顯示，從事網(wǎng)頁設(shè)計(jì)制作的人員達(dá)到了300萬之多，但在網(wǎng)頁設(shè)計(jì)發(fā)展過程中還存在諸多問題，因此應(yīng)突破網(wǎng)頁結(jié)構(gòu)單一、空洞等問題才能將網(wǎng)頁的設(shè)計(jì)與制作水平進(jìn)一步提升[1]。

1Web標(biāo)準(zhǔn)技術(shù)概述

1.1Web標(biāo)準(zhǔn)內(nèi)涵

Web標(biāo)準(zhǔn)不僅僅作為標(biāo)準(zhǔn)，其主要是對(duì)一系列標(biāo)準(zhǔn)進(jìn)行組合。一般的網(wǎng)頁中主要由結(jié)構(gòu)、行為、表現(xiàn)三部分共同組成，并與XML、XHTML相對(duì)應(yīng)，表現(xiàn)對(duì)應(yīng)的標(biāo)準(zhǔn)可以將其成為CSS。1.1.1結(jié)構(gòu)在結(jié)構(gòu)中主要的技術(shù)可包含拓展超文本標(biāo)記語言與可拓展標(biāo)記語言，在網(wǎng)站王者設(shè)計(jì)中主要將其應(yīng)用在網(wǎng)頁數(shù)據(jù)分類以及整合方面。在兩個(gè)標(biāo)準(zhǔn)中，XML的表現(xiàn)形式為源語言，其主要是讓用戶字自身的語言進(jìn)行標(biāo)記與重新定義，具備較強(qiáng)的數(shù)據(jù)轉(zhuǎn)換功能。1.1.2行為在Web標(biāo)準(zhǔn)的行為中，主要包含ECMAScript[2]與對(duì)象模型。其在網(wǎng)頁設(shè)計(jì)與制作中主要可以應(yīng)用在交互式的操作網(wǎng)頁文檔方面。其可以將界面上操作對(duì)象實(shí)施的交互操作有效實(shí)施，利用DOM可對(duì)對(duì)象有效定義與修改，還可將對(duì)象之間存在的各種關(guān)系有效處理。1.1.3表現(xiàn)其中最主要的技術(shù)便是CSS，通常人們將其成為層疊樣式表，在網(wǎng)站網(wǎng)頁設(shè)計(jì)中可應(yīng)用改在控制瀏覽器的顯示方面，其也是決定網(wǎng)頁設(shè)計(jì)風(fēng)格的主要因素。

1.2基于Web標(biāo)準(zhǔn)前提下的網(wǎng)頁設(shè)計(jì)流程（略）

2基于Web標(biāo)準(zhǔn)標(biāo)準(zhǔn)的電子商務(wù)網(wǎng)頁設(shè)計(jì)與制作流程

在基于Web標(biāo)準(zhǔn)進(jìn)行電子商務(wù)網(wǎng)站網(wǎng)頁設(shè)計(jì)的過程中，主要包含內(nèi)容分析、結(jié)構(gòu)設(shè)計(jì)、方案設(shè)計(jì)三部分。在進(jìn)行布局設(shè)計(jì)的過程中，可利用XHTML與CSS對(duì)頁面進(jìn)行合理布局，可實(shí)現(xiàn)網(wǎng)頁布局的目標(biāo)。在進(jìn)行設(shè)局實(shí)際過程中，可利用CSS與美工設(shè)計(jì)元素互相結(jié)合，將設(shè)計(jì)方法轉(zhuǎn)化為最終的網(wǎng)頁。

2.1內(nèi)容分析

網(wǎng)頁設(shè)計(jì)作為視覺語言的主要表達(dá)方式，應(yīng)進(jìn)行合理的編排與布局，從而確保網(wǎng)頁的布局更加清晰、合理、內(nèi)容充實(shí)。在進(jìn)行網(wǎng)頁版面布局的過程中，應(yīng)將網(wǎng)頁設(shè)計(jì)的更加醒目，使用戶在使用過程中對(duì)各項(xiàng)功能一目了然，其他部分的版面設(shè)計(jì)應(yīng)與主頁的風(fēng)格保持一致。較為常見的布局模式包括國(guó)字型、廠字型等。本文將以汽車用品為主的銷售網(wǎng)站作為案例分析，由于汽車商品類型多樣[3]，在設(shè)計(jì)網(wǎng)頁過程中，應(yīng)將商品的導(dǎo)航以及產(chǎn)品展示作為重點(diǎn)。案例中采用的網(wǎng)頁布局為框架型布局方式，可將頁面分成各種模塊。在網(wǎng)頁左邊為縱向的導(dǎo)航欄，右邊則為商品的展示欄。在網(wǎng)頁底部呈現(xiàn)了網(wǎng)站的基本信息與商家的聯(lián)系方式等信息。在網(wǎng)頁模板的頂部與底部都會(huì)出現(xiàn)在每一個(gè)網(wǎng)頁的同一位置中。

2.2結(jié)構(gòu)設(shè)計(jì)策略

在對(duì)汽車銷售網(wǎng)站進(jìn)行網(wǎng)頁開發(fā)過程中，可將其乘坐為模板，將其抽象地分為不同區(qū)塊，其中包含核心流程業(yè)務(wù)模塊、展示功能模塊等。在將模塊開發(fā)完成后便可投入使用。在用戶瀏覽、操作網(wǎng)頁的過程中，程序員可通過后臺(tái)進(jìn)行可視化的管理與操作，用戶可以將不同的模塊進(jìn)行拖放配置，構(gòu)建個(gè)性化的網(wǎng)頁布局設(shè)計(jì)，方便用戶的使用與瀏覽。用戶在操作汽車銷售網(wǎng)頁過程中，其中的框架作為頁面的骨架，決定了頁面的整體布局與模塊擺放區(qū)域?？蚣芡ǔ２捎玫氖荋TML文件，其主要為了將頁面進(jìn)行區(qū)分，還會(huì)在適當(dāng)?shù)奈恢脤?duì)模塊進(jìn)行放置，可用<{widgets}>代碼進(jìn)行表示，方便用戶在使用過程中利用可視化編輯將模塊進(jìn)行合理配置。對(duì)于板塊區(qū)來說，其能將汽車銷售網(wǎng)站最為個(gè)性的地方進(jìn)行呈現(xiàn)，可利用模塊內(nèi)容將網(wǎng)頁的更新實(shí)現(xiàn)，在網(wǎng)頁頁面中的各個(gè)模塊都有指定的ID，模塊的區(qū)域能呈現(xiàn)豎向擺放的形式，或呈現(xiàn)多個(gè)商品內(nèi)容。模塊為獨(dú)立形態(tài)，可對(duì)不同的邊框進(jìn)行切換，從而將呈現(xiàn)樣式進(jìn)行改變。在網(wǎng)頁模塊的頂部與底部都會(huì)出現(xiàn)在各個(gè)網(wǎng)頁中的同一個(gè)位置，對(duì)于任何電子商務(wù)網(wǎng)站來說，應(yīng)將網(wǎng)站頂部合理設(shè)計(jì)，才能擁有功能完善、結(jié)構(gòu)清晰的網(wǎng)站頂部，從而提升網(wǎng)站的效益。

3結(jié)語

基于Web標(biāo)準(zhǔn)對(duì)電子商務(wù)網(wǎng)站網(wǎng)頁進(jìn)行設(shè)計(jì)與制作，可促進(jìn)電子商務(wù)網(wǎng)站的運(yùn)作效率，為用戶提供巨大的便利，從而促進(jìn)網(wǎng)站的使用效率與綜合收益，還可提升電子商務(wù)網(wǎng)站的運(yùn)行效率與性能。

參考文獻(xiàn)

[1]朱淑琴，魏威，張嘉萌.基于Web標(biāo)準(zhǔn)的電子商務(wù)網(wǎng)站網(wǎng)頁設(shè)計(jì)與制作[J].計(jì)算機(jī)與現(xiàn)代化，2012，03：106~109.

[2]王亞輝.Web標(biāo)準(zhǔn)的電子商務(wù)網(wǎng)站網(wǎng)頁設(shè)計(jì)研究[J].電子商務(wù)，2015，05：49+82.

篇7

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；職業(yè)工作過程；教學(xué)

做結(jié)合《網(wǎng)頁設(shè)計(jì)》課程是高職院校中計(jì)算機(jī)應(yīng)用技術(shù)等計(jì)算機(jī)類專業(yè)的一門基礎(chǔ)課程。為了滿足職業(yè)崗位任職要求的基本能力，針對(duì)高職學(xué)生的能力水平和學(xué)習(xí)特點(diǎn)，以培養(yǎng)學(xué)生開發(fā)網(wǎng)站與設(shè)計(jì)制作網(wǎng)頁的職業(yè)能力為主線，本文從課程設(shè)計(jì)理念、教學(xué)模式與教學(xué)內(nèi)容的重構(gòu)等方面上進(jìn)行了改革，并取得了良好的教學(xué)效果。

1課程設(shè)計(jì)理念

我們根據(jù)職業(yè)崗位的任職要求，為使學(xué)生畢業(yè)后能滿足實(shí)際工作崗位的需求，從多元智能的人才觀、能力本位的教育觀出發(fā)，確立了“基于職業(yè)工作過程，以培養(yǎng)職業(yè)能力和素質(zhì)為重點(diǎn)，實(shí)施任務(wù)驅(qū)動(dòng)教學(xué)”的課程設(shè)計(jì)理念。

1.1基于職業(yè)工作過程的課程開發(fā)

網(wǎng)頁設(shè)計(jì)課程的主講教師大多有企業(yè)的工作經(jīng)歷和承擔(dān)技術(shù)開發(fā)、技術(shù)服務(wù)項(xiàng)目的實(shí)際工作鍛煉，課程的教學(xué)任務(wù)源自真實(shí)的工作任務(wù)，課程的教學(xué)流程按照完成實(shí)際工作任務(wù)的流程、課程的教學(xué)評(píng)價(jià)參考企業(yè)的評(píng)價(jià)機(jī)制。

1.2課程實(shí)施

通過真實(shí)任務(wù)驅(qū)動(dòng)在具體教學(xué)過程中，我們以真實(shí)任務(wù)引領(lǐng)學(xué)生，并以任務(wù)驅(qū)動(dòng)來完成整個(gè)教學(xué)過程。在任務(wù)中涵蓋教學(xué)的基本要求和從事實(shí)際工作所需要的知識(shí)和技能，并留有自主學(xué)習(xí)和拓展提高的空間。讓學(xué)生介入完成實(shí)際工作任務(wù)，讓已有知識(shí)和技能作為完成下一步任務(wù)的基礎(chǔ)，讓完成任務(wù)的過程成為一個(gè)愉悅的過程，讓學(xué)生在完成任務(wù)后取得明確的成果，讓自主獲取新的成果成為進(jìn)一步激發(fā)學(xué)習(xí)熱情的動(dòng)力。

2教學(xué)內(nèi)容的組織與安排

課程組教師深入社會(huì)、企業(yè)，了解最新需求，并與相關(guān)企業(yè)共建校外實(shí)訓(xùn)基地，與企業(yè)合作進(jìn)行基于職業(yè)工作過程的課程開發(fā)與設(shè)計(jì)，分析原有的基于知識(shí)儲(chǔ)備的學(xué)科體系課程架構(gòu)，重構(gòu)基于職業(yè)工作過程系統(tǒng)化知識(shí)應(yīng)用的課程架構(gòu)。選取了工作過程中典型的、使用率高的工作任務(wù)作為學(xué)習(xí)任務(wù)項(xiàng)目，與在實(shí)際工作過程中的相關(guān)應(yīng)用構(gòu)成功能模塊，設(shè)計(jì)開發(fā)了個(gè)人主頁、班級(jí)主頁、公司網(wǎng)站、旅游網(wǎng)站、購(gòu)物網(wǎng)站五個(gè)學(xué)習(xí)情境。并根據(jù)工作任務(wù)的完成規(guī)律和完成的不同方式，對(duì)教學(xué)內(nèi)容進(jìn)行序化和整合，實(shí)現(xiàn)教學(xué)過程與工作過程的基本一致，做到教學(xué)做結(jié)合，理論與實(shí)踐的一體化。

3基于職業(yè)工作過程的教學(xué)模式

我們采用基于職業(yè)工作過程的教學(xué)模式，即“情境引入-分析情境-引入新知識(shí)-實(shí)現(xiàn)情境-情境擴(kuò)展”教學(xué)模式，通過每一個(gè)典型的、針對(duì)性強(qiáng)的、貼近現(xiàn)實(shí)的情境（模仿型工作總?cè)蝿?wù)、開放型工作總?cè)蝿?wù)、企業(yè)實(shí)戰(zhàn)任務(wù)），把相關(guān)的知識(shí)和技能、方法和思路傳授給學(xué)生，通過一張張精美的網(wǎng)頁呈現(xiàn)出來，學(xué)生們沉醉在學(xué)習(xí)的過程之中，往往為了解決一個(gè)新的問題協(xié)商交流，為了實(shí)現(xiàn)一個(gè)新的創(chuàng)意求索求知，為了比別人做得更好而精益求精，為了完成公司的設(shè)計(jì)制作任務(wù)而廢寢忘食，自主學(xué)習(xí)能力進(jìn)一步得到提升，團(tuán)隊(duì)協(xié)作意識(shí)進(jìn)一步得到加強(qiáng)，開拓創(chuàng)新精神進(jìn)一步得到發(fā)揚(yáng)。

4多樣化的現(xiàn)代教學(xué)技術(shù)手段的應(yīng)用

在教學(xué)過程中，我們引入了企業(yè)真實(shí)項(xiàng)目的開發(fā)文檔，規(guī)范網(wǎng)站的開發(fā)流程。按照規(guī)范完成網(wǎng)站建設(shè)任務(wù)，并要求學(xué)生獨(dú)立完成網(wǎng)站規(guī)劃書、網(wǎng)站設(shè)計(jì)說明書等網(wǎng)站開發(fā)文檔的撰寫。培養(yǎng)網(wǎng)頁設(shè)計(jì)和網(wǎng)站開發(fā)的實(shí)際工作能力和撰寫技術(shù)文檔的能力。使用多媒體教學(xué)手段和網(wǎng)絡(luò)教學(xué)手段，因?yàn)槲覀儗W(xué)院網(wǎng)頁設(shè)計(jì)課程教學(xué)所用教學(xué)空間都安裝有交互式多媒體教學(xué)系統(tǒng)。經(jīng)過多年的探索，課程積累了豐富的電子資源，教師的操作示范、學(xué)生作品的遞交、教學(xué)資源的下發(fā)、學(xué)生作品展示、點(diǎn)評(píng)都通過多媒體教學(xué)系統(tǒng)進(jìn)行，為學(xué)生創(chuàng)設(shè)一個(gè)形象逼真、色彩鮮艷、動(dòng)靜結(jié)合的教學(xué)情境。在課程教學(xué)中，學(xué)生可以通過上網(wǎng)瀏覽優(yōu)秀網(wǎng)頁作品，搜集網(wǎng)頁設(shè)計(jì)資料，尋求學(xué)習(xí)中遇到問題的解決方法，獲取教學(xué)資源庫(kù)中的各種有用資源。

參考文獻(xiàn)

[1]黃穎宜.高校網(wǎng)頁設(shè)計(jì)課程的改革探析[J].南京藝術(shù)學(xué)院學(xué)報(bào),2014.

[2]馮榮.以工程實(shí)踐能力為導(dǎo)向的“多媒體網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)設(shè)計(jì)研究[J].內(nèi)蒙古師范大學(xué)學(xué)報(bào)(教育科學(xué)版)，2014.

[3]勞飛.基于項(xiàng)目化教學(xué)的“網(wǎng)頁設(shè)計(jì)與制作”課程改革與實(shí)踐[J].教育與職業(yè)，2014.

[4]周小麗.“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)改革實(shí)踐探究[J].教育與職業(yè)，2013.

[5]梁武,蘇燕.以工作過程為導(dǎo)向的網(wǎng)頁制作與網(wǎng)站設(shè)計(jì)課程教學(xué)改革研究與實(shí)踐[J].現(xiàn)代計(jì)算機(jī):上下旬,2015.

[6]劉萬輝,宋桂嶺.基于工作過程的“網(wǎng)頁設(shè)計(jì)與制作”課程改革的探索與實(shí)踐[J].計(jì)算機(jī)教育,2010,2:12-16.

[7]覃峰.基于工作過程的網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)改革探索與實(shí)踐[J].福建電腦,2011.

[8]黃穎.基于工作過程的“網(wǎng)頁設(shè)計(jì)與制作”課程改革探索[J].計(jì)算機(jī)光盤軟件與應(yīng)用,2013.

[9]劉曉知.網(wǎng)頁設(shè)計(jì)與制作課程的教學(xué)探討[J].電腦知識(shí)與技術(shù),2012.

篇8

關(guān)鍵詞：網(wǎng)頁版式；設(shè)計(jì)；版式

網(wǎng)頁排版是近年興起的一個(gè)普通排版的分支概念。雖然，圖片也可以傳遞信息，但網(wǎng)站上的內(nèi)容大部分是由文字組成。這就是網(wǎng)絡(luò)排版如此受重視的原因。排版的重要性絲毫不亞于視覺層次，合適顏色的選取，網(wǎng)站功能以及其它特性。我們從來沒低估過網(wǎng)絡(luò)排版的重要性，也深知它在良好的用戶體驗(yàn)中所發(fā)揮的重要作用。任何追求漂亮版面的人都知道，印刷排版跟網(wǎng)絡(luò)排版完全是兩碼事。盡管有些規(guī)則可能相同，但網(wǎng)頁設(shè)計(jì)所處環(huán)境完全不同，兩者都有自己一套必須遵守的規(guī)則和準(zhǔn)則。兩者的原理不同，不能同時(shí)存在，跨越這個(gè)界線可能會(huì)導(dǎo)致排版混亂。

一、網(wǎng)頁設(shè)計(jì)概念

網(wǎng)頁設(shè)計(jì)是在Internet的發(fā)展和數(shù)字技術(shù)的發(fā)展中出現(xiàn)的新藝術(shù)形式。它是以Internet為載體，以網(wǎng)絡(luò)技術(shù)和數(shù)字技術(shù)為基礎(chǔ)，依照設(shè)計(jì)目的、遵循藝術(shù)設(shè)計(jì)規(guī)律，實(shí)現(xiàn)設(shè)計(jì)目的與功能，強(qiáng)調(diào)藝術(shù)與科學(xué)密切結(jié)合的一種藝術(shù)創(chuàng)造化視覺傳達(dá)活動(dòng)。它是網(wǎng)絡(luò)視覺藝術(shù)的主要表現(xiàn)形式，也是設(shè)計(jì)藝術(shù)的重要組成部分，它具有媒體相關(guān)性、數(shù)字技術(shù)性和設(shè)計(jì)藝術(shù)性三大基本內(nèi)涵。

網(wǎng)頁版式設(shè)計(jì)網(wǎng)頁版式設(shè)計(jì)是指在有限的屏幕空間內(nèi)，按照設(shè)計(jì)師的想法、意圖將網(wǎng)頁的形態(tài)要數(shù)按照一定的藝術(shù)規(guī)律進(jìn)行組織和布局，使其形成整體視覺印象，最終達(dá)到有效傳達(dá)信息的視覺設(shè)計(jì)。它以有效傳達(dá)信息為目標(biāo)，利用視覺藝術(shù)規(guī)律，將網(wǎng)頁的文字、圖像、動(dòng)畫、音頻、視頻等元素組織起來，產(chǎn)生感官上的美感和精神上的享受，充分體現(xiàn)了設(shè)計(jì)師的藝術(shù)風(fēng)格。

二、網(wǎng)頁版式設(shè)計(jì)的作用

網(wǎng)頁版式設(shè)計(jì)是設(shè)計(jì)師理性思維與感性表達(dá)的產(chǎn)物。它決定了網(wǎng)頁的藝術(shù)風(fēng)格和個(gè)性特征，并以視覺配置為手段影響著網(wǎng)頁頁面之間導(dǎo)航的方向性，以吸引瀏覽者注意力，增強(qiáng)網(wǎng)頁內(nèi)容的表達(dá)效果。網(wǎng)頁版式設(shè)計(jì)在整個(gè)網(wǎng)頁的設(shè)計(jì)中占有很重要的作用。

三、網(wǎng)頁版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)的差異

網(wǎng)頁版式設(shè)計(jì)與傳統(tǒng)印刷版式設(shè)計(jì)的差異網(wǎng)頁的版式設(shè)計(jì)同報(bào)紙雜志等平面媒體的版式設(shè)計(jì)有很多共同之處，但網(wǎng)頁的排版與書籍雜志的排版又有很大差異。印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是由讀者來控制的。這使網(wǎng)頁設(shè)計(jì)者不能精確控制頁面上每個(gè)元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁的版式設(shè)計(jì)帶來了一定的難度。具體表現(xiàn)如下：印刷品設(shè)計(jì)者可以指定使用的紙張和油墨，而網(wǎng)頁設(shè)計(jì)者卻不能要求瀏覽者使用什么樣的電腦或?yàn)g覽器。（2）網(wǎng)絡(luò)正處于不斷發(fā)展之中，不象印刷那樣基本具備了成熟的印刷標(biāo)準(zhǔn)。（3）網(wǎng)頁設(shè)計(jì)過程中有關(guān)Web的每一件事都可能隨時(shí)發(fā)生變化。（4）網(wǎng)頁版式設(shè)計(jì)的不可控制性，即網(wǎng)頁設(shè)計(jì)者無法控制頁面在用戶端的最終顯示效果。

四、網(wǎng)頁版式設(shè)計(jì)的具體要求

網(wǎng)頁的設(shè)計(jì)首先涉及的是頁面的版面編排問題。網(wǎng)頁作為一種特殊的版面，既有文字，又有圖片，還包括一些流動(dòng)的窗口和流動(dòng)的附加廣告等，內(nèi)容繁多、復(fù)雜。設(shè)計(jì)時(shí)必須根據(jù)內(nèi)容的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個(gè)有機(jī)的整體，展現(xiàn)給廣大的觀眾。使其成為與瀏覽者的溝通手段，讓設(shè)計(jì)所蘊(yùn)含的主題進(jìn)入瀏覽者的心靈，而不僅僅是起裝飾作用。

網(wǎng)頁版式設(shè)計(jì)的布局合理化布局不但要單純、簡(jiǎn)練、清晰和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)，更應(yīng)該注重通過獨(dú)特的風(fēng)格和強(qiáng)烈的視覺沖擊力，來鮮明地突出設(shè)計(jì)主題。

要通過網(wǎng)頁頁面結(jié)構(gòu)的分割和造型空間的確立，合理安排組成網(wǎng)頁各元素的合理位置。使頁面內(nèi)容和形式有機(jī)統(tǒng)一，要具有整體美感。要考慮頁面的美觀和可讀性，還要考慮網(wǎng)絡(luò)瀏覽的特性。

網(wǎng)頁版式設(shè)計(jì)的視覺流程規(guī)律化網(wǎng)絡(luò)的瀏覽是通過視覺元素實(shí)現(xiàn)傳播的視覺傳達(dá)過程，為了達(dá)到好的效果，版式設(shè)計(jì)必須依據(jù)人們?cè)谝曈X上的心理和生理特點(diǎn)，確定各種視覺構(gòu)成元素之間的視覺關(guān)系和瀏覽秩序。合理的視覺流程應(yīng)是在人們認(rèn)識(shí)過程的心理順序和思維發(fā)展的邏輯一致的基礎(chǔ)上，根據(jù)信息的主次來確定各元素的順序，并通過精心安排引導(dǎo)瀏覽者。（1）要符合人的視覺習(xí)慣（2）要保證有效的傳達(dá)信息（3）突出主要信息（4）保持視覺引導(dǎo)的節(jié)奏感和流暢感。

網(wǎng)頁版式設(shè)計(jì)要?jiǎng)討B(tài)化動(dòng)態(tài)化是網(wǎng)頁設(shè)計(jì)的顯著特征。網(wǎng)頁版式設(shè)計(jì)的動(dòng)態(tài)設(shè)計(jì)成為增強(qiáng)網(wǎng)頁可讀性，參與性與趣味性的有力手段。網(wǎng)頁不同于傳統(tǒng)媒體之處，就在于信息的動(dòng)態(tài)更新和即時(shí)交互性。即時(shí)的交互性是網(wǎng)絡(luò)成為熱點(diǎn)的主要原因，也是網(wǎng)頁設(shè)計(jì)時(shí)必須考慮的問題。網(wǎng)頁設(shè)計(jì)人員必須根據(jù)網(wǎng)站各個(gè)階段的經(jīng)營(yíng)目標(biāo)，配合網(wǎng)站不同時(shí)期的經(jīng)營(yíng)策略，以及用戶的反饋信息，經(jīng)常地對(duì)網(wǎng)頁版式進(jìn)行調(diào)整和修改。

網(wǎng)頁版式設(shè)計(jì)中的點(diǎn)、線、面對(duì)網(wǎng)頁的各形態(tài)要素進(jìn)行點(diǎn)、線、面對(duì)組合，是網(wǎng)頁版式設(shè)計(jì)的基本方法之一。點(diǎn)線面之間相互作用可以組合成各種各樣的視覺形象，形成千變?nèi)f化的視覺空間。有意識(shí)的從抽象角度運(yùn)用點(diǎn)線面構(gòu)成來組織網(wǎng)頁的版式，是形成網(wǎng)頁強(qiáng)烈的視覺形式感和設(shè)計(jì)感的有效方法。

網(wǎng)頁版式設(shè)計(jì)中的色彩處理色彩可以使頁面更加生動(dòng)。網(wǎng)頁的色彩處理得好，可以錦上添花，達(dá)到事半功倍的效果。色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比”，也就是，網(wǎng)頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上，可以根據(jù)網(wǎng)頁內(nèi)容的需要，分別采用不同的主色調(diào)?？傊W(wǎng)頁的版式設(shè)計(jì)形成了網(wǎng)頁的整體視覺印象，體現(xiàn)網(wǎng)頁的 風(fēng)格，在整個(gè)網(wǎng)頁的設(shè)計(jì)中具有很重要的作用，應(yīng)該引起網(wǎng)頁設(shè)計(jì)者的重視

【參考文獻(xiàn)】

[1]彭剛，周紹斌.網(wǎng)頁藝術(shù)設(shè)計(jì)[M].北京：高等教育出版社，2006

篇9

網(wǎng)頁設(shè)計(jì)能夠?qū)⒙曇?、圖片、文字等相結(jié)合，具備傳統(tǒng)媒體無法超越的優(yōu)勢(shì)，但它最基本的模式還屬于平面設(shè)計(jì)的范疇，因此，在網(wǎng)頁設(shè)計(jì)實(shí)用的范圍內(nèi)，網(wǎng)頁設(shè)計(jì)的形式美也是十分重要的。頁面設(shè)計(jì)的形式美是通過藝術(shù)化的設(shè)計(jì)手法帶給瀏覽者愉悅的感受和體會(huì)，具有一定的品味性與可欣賞價(jià)值，各部分布局勻稱和諧，形式與內(nèi)容統(tǒng)一性等。

網(wǎng)店商品展示頁面設(shè)計(jì)的基本原則

服裝網(wǎng)店頁面設(shè)計(jì)以視覺傳達(dá)作為理論指導(dǎo)，將視覺營(yíng)銷、設(shè)計(jì)心理學(xué)和計(jì)算機(jī)信息技術(shù)相結(jié)合，是視覺設(shè)計(jì)在實(shí)際應(yīng)用中促成消費(fèi)者購(gòu)買的最好體現(xiàn)，商品展示頁面設(shè)計(jì)的形式美在于網(wǎng)頁界面不僅具有實(shí)用的物質(zhì)功能，而且具有審美的精神功能。

商品展示頁面設(shè)計(jì)需要圍繞網(wǎng)店風(fēng)格、商品的風(fēng)格和特點(diǎn)等，達(dá)到所展示內(nèi)容與網(wǎng)頁設(shè)計(jì)風(fēng)格相一致。網(wǎng)頁風(fēng)格的形成主要依賴于頁面的版式設(shè)計(jì)，依賴于頁面的整體色調(diào)處理，以及圖片與文字的組合形式等。對(duì)于瀏覽者和購(gòu)買者，接受準(zhǔn)確的信息是對(duì)商品展示的基本要求。要利用視覺傳達(dá)設(shè)計(jì)，將商品信息加以整合，重新布局，引導(dǎo)瀏覽者的視覺流程，提升信息的有效傳播，遵循重點(diǎn)突出的原則，將網(wǎng)頁中重要的產(chǎn)品信息安排在最醒目的位置，這樣可以吸引瀏覽者的注意力，增強(qiáng)瀏覽者對(duì)內(nèi)容的理解，減少瀏覽者的視覺疲勞。

商品展示頁面設(shè)計(jì)必須適應(yīng)瀏覽者視覺識(shí)別流程的心理和生理特點(diǎn)，設(shè)計(jì)時(shí)不僅要立足各類信息的傳達(dá)，還要考慮瀏覽群體較為普遍的思維習(xí)慣，做到視覺流程自然、合理、暢快，以便保證網(wǎng)頁上的各種信息要素的位置、間隙、大小保持一定的節(jié)奏、秩序和韻律美感。由于目前網(wǎng)絡(luò)速度的限制，文本字符可提供較快的瀏覽速度，應(yīng)注重適中的采用圖像和多媒體信息，不要影響瀏覽者欣賞速度。

同時(shí)，商品網(wǎng)頁的多維性源于超級(jí)鏈接，這種技術(shù)可以使網(wǎng)頁組織結(jié)構(gòu)更加豐富，瀏覽者可以在內(nèi)容之間自由跳轉(zhuǎn)?？蓪㈨撁娴慕M織結(jié)構(gòu)分為序列結(jié)構(gòu)、層次結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu)等。網(wǎng)頁設(shè)計(jì)只有掌握各種網(wǎng)絡(luò)技術(shù)的規(guī)律，注重技術(shù)與藝術(shù)的緊密結(jié)合，才能不斷滿足瀏覽者對(duì)商品網(wǎng)頁設(shè)計(jì)的更高需求。

商品展示頁面中的內(nèi)容

消費(fèi)者在瀏覽服裝商品時(shí)，除了欣賞電子圖片還十分關(guān)注商品的文字描述（品牌、貨號(hào)、價(jià)格、規(guī)格等）。面對(duì)大量的商品描述信息，色彩能使瀏覽者產(chǎn)生強(qiáng)烈的觀賞興趣與心理變化，所以，頁面中色彩的運(yùn)用也是十分重要的。

電子圖片是最主要、最直觀的網(wǎng)絡(luò)服裝展示方式，圖片素材的主要來源：一是專門為商品展示拍攝的相關(guān)圖像素材，或是掃描印刷品或照片所得的數(shù)字圖像。二是從互聯(lián)網(wǎng)上獲取的合法圖片素材，經(jīng)圖像處理軟件對(duì)這些圖片素材進(jìn)行處理，作為頁面視覺化設(shè)計(jì)的點(diǎn)綴。網(wǎng)絡(luò)銷售環(huán)境下展示服裝的形式可以是多種多樣的，根據(jù)展示方式可以分為平面和立面兩種。平面展示分為平鋪展示、衣架懸掛展示、折疊擺放展示。立面展示分為人臺(tái)展示、人體模型展示、真人模特展示。相對(duì)而言，真人模特展示的效果是比較好的，但是對(duì)展示模特的選擇十分重要，例如模特的身材、氣質(zhì)是否與要展示的服裝風(fēng)格等方面相符合。同時(shí)，拍攝服裝圖像時(shí)所采用的背景也是十分重要的，按照拍攝地點(diǎn)對(duì)拍攝背景可以分為影棚拍攝、戶外拍攝、室內(nèi)拍攝。影棚拍攝背景主要被分為素色、花色背景。素色背景包括：純白色、純灰色；花色背景包括：碎花、格子等。戶外拍攝地點(diǎn)眾多，如海邊、街市等。室內(nèi)拍攝往往是以房間、家居墻壁作為拍攝背景。

產(chǎn)品的文字信息主要功能是傳達(dá)商品的各種信息，使傳達(dá)具有高效性，有助于購(gòu)買者做出更好的購(gòu)買決策。而這種傳達(dá)的有效性，必須考慮文字編輯和編排設(shè)計(jì)的整體效果，能給人以清晰的視覺印象，避免頁面繁雜零亂，使人易認(rèn)、易懂、易讀。

商品頁面中色彩的運(yùn)用。首先，整個(gè)頁面要確定一個(gè)主要色調(diào)，符合網(wǎng)店風(fēng)格和商品風(fēng)格。同時(shí)，還應(yīng)考慮到瀏覽者的色彩喜好，加以結(jié)合。

面對(duì)商品頁面中各種信息的展示，這些內(nèi)容的編排設(shè)計(jì)就變得復(fù)雜多樣，需要多方面信息的參考和整合，而不是簡(jiǎn)單堆砌，對(duì)瀏覽者的視覺流程產(chǎn)生阻礙。

展示頁面中內(nèi)容的設(shè)計(jì)與編排

商品頁面中的主要內(nèi)容展示應(yīng)和諧醒目，圖表規(guī)范，字體考究，色調(diào)統(tǒng)一。不同風(fēng)格的網(wǎng)店面對(duì)不同的瀏覽者和購(gòu)買者，用最佳的組織形式更好的突出網(wǎng)店主題風(fēng)格，通過頁面上的空間層次、主次關(guān)系、視覺流程使網(wǎng)站具有更好的視覺效果。

商品展示頁面中，圖片是吸引瀏覽者注意力的主要表達(dá)方式，圖片的編排是重點(diǎn)。基于網(wǎng)頁上的圖片一般來說分辨率為72dpi是大多數(shù)圖片的最佳選擇。由于受到寬帶的限制，其文件尺寸在一定范圍內(nèi)越小越好，下載的時(shí)間就會(huì)縮短，動(dòng)態(tài)圖片不宜過多。商品圖片位置、面積、數(shù)量、方向等方面的應(yīng)用取決于商品展示的需要，盡量使整個(gè)網(wǎng)頁視覺上和諧統(tǒng)一，具有審美性，突出一定的視覺重點(diǎn)，和文字編排時(shí)的間隔關(guān)系。

文字的設(shè)計(jì)應(yīng)用可以根據(jù)文字表達(dá)的具體內(nèi)容，運(yùn)用豐富的想象力和情感概念靈活的進(jìn)行字體設(shè)計(jì)，在保持文字可讀性的前提下，使文字的形式表現(xiàn)變得多種多樣，具有視覺審美性，這種文字設(shè)計(jì)不僅僅局限于文字的筆畫粗細(xì)、外形結(jié)構(gòu)等內(nèi)容的變化。文字已不只是交流信息的語言符號(hào)，在商品頁面設(shè)計(jì)與使用上有很強(qiáng)的表現(xiàn)力，從形態(tài)學(xué)的角度講，文字屬于“形語”信息形態(tài)，文字“形”的語言賦予文字獨(dú)特的造型表現(xiàn)功能，從而具有特殊的視覺語言表現(xiàn)力。文字設(shè)計(jì)要服從于服裝商品的風(fēng)格特征，要和整個(gè)商品和網(wǎng)店的風(fēng)格特征相融合。網(wǎng)頁文字編排設(shè)計(jì)，首先要服從信息內(nèi)容的性質(zhì)及特點(diǎn)要求，其風(fēng)格要與內(nèi)容特性相吻合。網(wǎng)頁字體編排中，雖然可供選擇的字體很多，但同時(shí)使用哪些字體需要精心編輯，需要選擇和展示商品風(fēng)格相似的文字，能夠更好地迎合目標(biāo)瀏覽群體，同時(shí)還要注重文字信息的情感性表達(dá)。

合理規(guī)劃、分割頁面空間，避免雜亂，利用表格和框架技術(shù)對(duì)頁面進(jìn)行分割，根據(jù)瀏覽者的視覺模式識(shí)別特點(diǎn)突出重點(diǎn)、引導(dǎo)合理的視覺流程，頁面整體布局的和諧與平衡，注意視覺元素間輕重、大小的比例關(guān)系，防止由于比例失衡帶來壓抑和不穩(wěn)定的感覺。多個(gè)視覺元素的近距離堆積，會(huì)使整體產(chǎn)生不和諧，反之間隔空間過大也是會(huì)破壞內(nèi)容的和諧。點(diǎn)、線、面是構(gòu)成視覺空間的基本元素，網(wǎng)頁版面中的各視覺元素正是以點(diǎn)、線、面的形式相互依存，組成各種各樣的視覺信息，形成千變?nèi)f化的視覺感受，最終實(shí)現(xiàn)頁面設(shè)計(jì)的功能價(jià)值和審美價(jià)值。

總 結(jié)

篇10

1.體現(xiàn)風(fēng)格，突出主題一個(gè)網(wǎng)站的特點(diǎn)與風(fēng)格要得到展示，除了要使頁面內(nèi)容與形式之間有機(jī)結(jié)合，還要使不同色彩有機(jī)結(jié)合。每一種顏色都有它所特有的個(gè)性，設(shè)計(jì)人員可以借助色彩心理學(xué)表達(dá)色彩的情感效果，以便更好地突出主題。

2.網(wǎng)頁區(qū)域劃分應(yīng)有統(tǒng)一的風(fēng)格網(wǎng)站內(nèi)容豐富，信息量大，設(shè)計(jì)師要對(duì)網(wǎng)頁界面進(jìn)行視覺區(qū)域劃分。網(wǎng)頁信息的分類布局，可以使用不同的色彩劃分內(nèi)容主次，規(guī)劃視覺流程，統(tǒng)一網(wǎng)頁的整體風(fēng)格，給瀏覽者以完整的、易讀的、富有導(dǎo)向性的視覺印象。

3.引起人們的關(guān)注，加深印象網(wǎng)頁設(shè)計(jì)或優(yōu)雅含蓄，或動(dòng)感強(qiáng)烈，或時(shí)尚新穎，或簡(jiǎn)單搶眼，能吸引觀眾的注意，是設(shè)計(jì)人員充分利用色彩的魅力來優(yōu)化頁面的成果，這種頁面的色彩設(shè)計(jì)極大地提高了網(wǎng)頁的藝術(shù)性，是提高訪問率和網(wǎng)站知名度的關(guān)鍵。

二、網(wǎng)頁設(shè)計(jì)中色彩搭配的原則

平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)最重要是色彩的搭配。當(dāng)人們離屏幕較遠(yuǎn)時(shí)，第一眼看到的是頁面顏色，而不是具體的圖片與文字排版。因此，設(shè)計(jì)者在網(wǎng)頁設(shè)計(jì)中除了要考慮突出網(wǎng)頁內(nèi)容的理性要求，也要遵循感性的藝術(shù)規(guī)律，從而設(shè)計(jì)出性格獨(dú)特的網(wǎng)頁。

1.特色鮮明一個(gè)網(wǎng)頁必須有自己獨(dú)特的色彩風(fēng)格，以使看起來個(gè)性鮮明，給觀眾留下深刻的印象。

2.合理搭配一種色彩的應(yīng)用：將選擇的顏色調(diào)整透明度或飽和度，產(chǎn)生新的顏色。這種色彩的運(yùn)用使頁面看起來更統(tǒng)一，主次更分明。兩種色彩的應(yīng)用：在選擇一種色彩后，然后選擇其對(duì)比色。一個(gè)色系的應(yīng)用：將一個(gè)感覺的色彩放在一起使用，如淺藍(lán)、淺黃、淺綠，或者土黃、土灰、土藍(lán)，等等。

3.藝術(shù)性網(wǎng)頁設(shè)計(jì)含有藝術(shù)的成分，是一種藝術(shù)活動(dòng)，有其藝術(shù)規(guī)律需要遵循，而網(wǎng)頁設(shè)計(jì)師在考慮內(nèi)容的同時(shí)，也要根據(jù)藝術(shù)的形式、特點(diǎn)、原則進(jìn)行大膽的藝術(shù)創(chuàng)新，在符合網(wǎng)站要求的同時(shí)讓網(wǎng)頁各有特點(diǎn)。

三、色彩搭配要注意的問題

第一，在網(wǎng)頁設(shè)計(jì)時(shí)，設(shè)計(jì)師一般會(huì)避免使用單一的顏色，以防使人產(chǎn)生單調(diào)的感覺。如果僅使用一種顏色且希望產(chǎn)生豐富的變化，可以通過調(diào)整它的飽和度和透明度達(dá)到整個(gè)網(wǎng)頁色彩的分層。

第二，黑色是一個(gè)特定的顏色，在設(shè)計(jì)中使用得恰當(dāng)、合理，同樣會(huì)產(chǎn)生非常強(qiáng)烈的視覺效果。黑色通常作為背景色，與不同純度的顏色搭配使用。

第三，將多種色彩用于一個(gè)網(wǎng)頁往往使頁面很“花”，使網(wǎng)頁缺乏整體感和內(nèi)在美。實(shí)踐證明，網(wǎng)頁設(shè)計(jì)中用色并不是越多越顯得豐富、有個(gè)性，一般在三種顏色內(nèi)通過調(diào)整其各種屬性來產(chǎn)生豐富的色彩變化。

第四，素淡雅致的色彩常用于背景，不要將復(fù)雜的圖案作為背景，盡可能與前文拉開對(duì)比，以更好地突出要表達(dá)的內(nèi)容。