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

篇1

摘 要 本文主要講了網(wǎng)頁設(shè)計(jì)的布局和網(wǎng)頁的用色技巧,從網(wǎng)頁布局和色彩在網(wǎng)頁設(shè)計(jì)中的重要性開始,介紹了網(wǎng)頁設(shè)計(jì)布局和色彩的基礎(chǔ)理論。從而進(jìn)一步詳細(xì)的介紹了布局和色彩搭配在網(wǎng)頁中不可或缺的作用。好的網(wǎng)頁體現(xiàn)在網(wǎng)頁的主題鮮明、布局形式與內(nèi)容相統(tǒng)一、整體色彩和諧融洽。

關(guān)鍵詞 網(wǎng)站設(shè)計(jì) 布局 用色技巧

網(wǎng)頁是網(wǎng)站構(gòu)成的基本要素。網(wǎng)頁的布局和色彩搭配能夠更好的提升網(wǎng)頁的視覺效果、更能吸引瀏覽者的眼球。 理論上研究網(wǎng)頁設(shè)計(jì)的布局和用色技巧在網(wǎng)頁中的應(yīng)用以及布局和用色技巧在網(wǎng)頁設(shè)計(jì)中的發(fā)展方向。

網(wǎng)頁設(shè)計(jì)是藝術(shù)與技術(shù)的高度統(tǒng)一,網(wǎng)頁藝術(shù)設(shè)計(jì)包含視聽元素與版式設(shè)計(jì)兩項(xiàng)內(nèi)容;以主題鮮明、布局形式與內(nèi)容相統(tǒng)一、強(qiáng)調(diào)整體色調(diào)為設(shè)計(jì)原則。因此在明確了網(wǎng)頁藝術(shù)設(shè)計(jì)與網(wǎng)站主題的關(guān)系的基礎(chǔ)上,提出了“美”和“功能”都是為了更好地表達(dá)網(wǎng)站主題這一觀點(diǎn)。從而更好的認(rèn)識(shí)和理解布局和用色技巧在網(wǎng)頁布局中的發(fā)展和創(chuàng)新。

國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境目前還停留在初級(jí)的認(rèn)知階段,如同96年以前的網(wǎng)頁幾乎是純文字的頁面,沒有什么所謂“設(shè)計(jì)”的概念可言。隨著時(shí)代的發(fā)展人們對(duì)美的追求是不斷深入,網(wǎng)頁設(shè)計(jì)開始從從審美方面入手,結(jié)合使用方便的要求,設(shè)計(jì)出美觀、合理的頁面,運(yùn)用一些平面設(shè)計(jì)中美的基本形式就能使網(wǎng)頁更加富有美感,例如將平面設(shè)計(jì)中的色彩形式原理融入到網(wǎng)頁設(shè)計(jì)中,注重了布局規(guī)劃從而使繁多的頁面更加有條理。

設(shè)計(jì)以人為本,任何設(shè)計(jì)都具有一定的內(nèi)容和形式。內(nèi)容貫穿整個(gè)網(wǎng)頁設(shè)計(jì)中,是設(shè)計(jì)存在的基礎(chǔ)。形式而是內(nèi)容的延伸,或者說事內(nèi)容的外部表現(xiàn)方式。

內(nèi)容決定形式,形式反作用于內(nèi)容。一個(gè)優(yōu)秀的網(wǎng)頁設(shè)計(jì)必定是形式對(duì)內(nèi)容的完美表現(xiàn)。正如黑格爾所說:“工藝的美就不在于要求實(shí)用品的外部造型、色彩、紋樣去摹擬事物,再現(xiàn)現(xiàn)實(shí),而在于使其外部形式傳達(dá)和表現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味,使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境?！?/p>

一、網(wǎng)頁設(shè)計(jì)的布局

頁面布局就是在網(wǎng)頁設(shè)計(jì)時(shí)把網(wǎng)頁的各種構(gòu)成要素(文字、圖片、菜單等等)在頁面內(nèi)完美的搭配起來。一個(gè)精美的網(wǎng)頁,不僅體現(xiàn)在頁面內(nèi)容的精彩,還要有效地利用頁面的有效顯示空間,創(chuàng)造出合理的布局模式。

(一)“國”字型

“國”字型,也可以稱為“同”字型,適用于一些大型網(wǎng)站,即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接下來是網(wǎng)站的主要內(nèi)容,左右分列一些兩小條內(nèi)容,中間是主要部分,與左右一起羅列到底,最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。

(二)拐角型

這種結(jié)構(gòu)與上一種“國”字型結(jié)構(gòu),其實(shí)只是形式上的區(qū)別,有相似性。頂端是標(biāo)題及廣告橫幅,接下來的左側(cè)是一窄列鏈接等,右列是很寬的正文,底端也是一些網(wǎng)站的輔助信息。在這種類型中,一種很常見的類型是,頂端是標(biāo)題及廣告,左側(cè)是導(dǎo)航鏈接。

(三)左右框架型

這是一種左右分為兩頁的框架結(jié)構(gòu)。一般左面是導(dǎo)航鏈接,有時(shí)頂端會(huì)有一個(gè)小的標(biāo)題或標(biāo)致,右面是正文。目前,大部分的大型論壇都是這種結(jié)構(gòu),一些企業(yè)網(wǎng)站也喜歡采用這種左右框架型結(jié)構(gòu)。這種類型結(jié)構(gòu)非常清晰,一目了然。

除了以上的布局類型外,還有上下框架型,標(biāo)題正文型,綜合框架型,封面型等。

二、網(wǎng)頁用色技巧

(一)確定網(wǎng)頁的主題色

所謂網(wǎng)頁的主題色,就是體現(xiàn)行業(yè)特點(diǎn),企業(yè)形象的色彩。色彩搭配的協(xié)調(diào)可以突出主題形象的視覺效果,色彩的搭配不僅體現(xiàn)美學(xué)的訴求,而且是一種可以強(qiáng)化的識(shí)別信息,會(huì)影響到瀏覽者對(duì)網(wǎng)站的印象乃至企業(yè)形象的認(rèn)識(shí)。所以,主題色一經(jīng)確定,要保持一定的穩(wěn)定性,用這種色彩來幫助瀏覽者對(duì)網(wǎng)站的識(shí)別。

網(wǎng)頁中顏色的過多使用,會(huì)使人感覺到凌亂、輕浮,感到雜亂無章,缺乏對(duì)網(wǎng)頁的興趣。因此網(wǎng)頁設(shè)計(jì)必須有自己獨(dú)特的色彩,必須有一種或兩種主體色。

不至于讓瀏覽者迷失方向,也不至于單調(diào)、凌亂。當(dāng)主題色確定好以后,考慮到其他配色時(shí),一定要考慮到其他配色與主體色的關(guān)系,要體現(xiàn)企業(yè)什么形象以及什么樣的效果。

(二)用色技巧

1.針對(duì)不同的企業(yè)所要表達(dá)信息的不同,可以選擇突出這些信息的顏色。

2.考慮瀏覽者。不同地區(qū)、不同年齡層次對(duì)色彩的認(rèn)知的不同,可能會(huì)產(chǎn)生不同的反應(yīng)。對(duì)網(wǎng)頁所傳達(dá)信息針對(duì)的人群的不同選擇不同的用色。

3.不要使用過多的顏色。除了黑色和白色以外,約選擇四到五個(gè)顏色就足夠了。太多的顏色會(huì)使頁面顯得雜亂,不容易突出網(wǎng)頁所要表達(dá)信息的重點(diǎn)。

4.選擇顏色要注意時(shí)效性。當(dāng)一種色彩成為流行色的時(shí)候,不免使瀏覽者產(chǎn)生麻木的審美效果。因此在網(wǎng)頁中事實(shí)的實(shí)施一些懷舊色彩,會(huì)達(dá)到意想不到的效果。

以后,網(wǎng)頁將代表個(gè)人、企業(yè)的形象。尤其是個(gè)人,或者企業(yè)的主頁,它既要傳達(dá)出某種信息,又要充分的體現(xiàn)出它們的特色。網(wǎng)頁設(shè)計(jì)的好壞,直接關(guān)系到某個(gè)人、某個(gè)企業(yè)的形象,在人們的印象中所處的地位。所以布局和色彩的恰到好處的搭配將會(huì)使個(gè)人和企業(yè)的形象在別人心中留下深刻的印象,從而更好的體現(xiàn)出個(gè)人及其企業(yè)的知名度。

參考文獻(xiàn):

[1]張大鵬,張威,陳海波.網(wǎng)頁設(shè)計(jì).成都:電子科技大學(xué)出版社.

[2]劉佳,王倩.網(wǎng)頁設(shè)計(jì)中的色彩表現(xiàn).美術(shù)大觀.2007.

篇2

當(dāng)今網(wǎng)絡(luò)的普及加上快節(jié)奏的生活方式使得人們的閱讀行為發(fā)生轉(zhuǎn)向，越來越多的人開始從印刷文本的閱讀逐漸轉(zhuǎn)變?yōu)榛跀?shù)字視覺圖像的閱讀，由此引發(fā)了閱讀對(duì)象、閱讀方式、閱讀性質(zhì)以及閱讀心理和功能價(jià)值等多方面的重大轉(zhuǎn)變。計(jì)算機(jī)技術(shù)的發(fā)展使得插畫藝術(shù)從過去狹義的概念（只限于書籍、報(bào)紙、雜志中所添加的圖和畫）變得更為廣義，藝術(shù)性的圖畫和含有說明性文字的插圖都稱之為插畫。插畫設(shè)計(jì)是社會(huì)和歷史的沉淀，成為了一種重要的藝術(shù)形式，插畫能激發(fā)人們的想象力，能給觀賞者帶來豐富的視覺體驗(yàn)，由于其直觀性和便于接受性，已經(jīng)延展到網(wǎng)絡(luò)、電影里的片花、CD封面、時(shí)裝，玩具、游戲角色設(shè)定等一些新的文化載體當(dāng)中。在國外，插畫被看成是一個(gè)大的應(yīng)用網(wǎng)絡(luò)，滲透到各個(gè)領(lǐng)域。

二插畫藝術(shù)的發(fā)展

中國的插畫歷史和歐洲的相似，最早都是把插畫運(yùn)用于宗教讀物之中，隨著社會(huì)的發(fā)展，插圖逐漸被廣泛地運(yùn)用于自然科學(xué)書籍、文學(xué)書籍和經(jīng)典作家的出版物上。在一段時(shí)期內(nèi)手繪插畫受到新技術(shù)的巨大沖擊，曾一度被照片所取代。受現(xiàn)代藝術(shù)流派的影響，插畫風(fēng)格日趨多樣化并伴隨著現(xiàn)代設(shè)計(jì)的觀念更新而不斷發(fā)展，各種主流的或是非主流的插畫元素彰顯出極具個(gè)性化的視覺語言。最近幾年，插畫變得越來越流行，在視覺信息傳播媒體中顯現(xiàn)出絢麗的光芒，被快速地運(yùn)用于商業(yè)生產(chǎn)和銷售中，實(shí)現(xiàn)了商業(yè)性和藝術(shù)性的完美結(jié)合。如今，在現(xiàn)代數(shù)字媒介多元化的依托下，全新的視覺時(shí)代為新一代插畫家提供了更多的發(fā)展空間。插畫具有高效率、多樣化、準(zhǔn)確性、成本底等特點(diǎn)，更易于進(jìn)行商業(yè)操作。技術(shù)和市場的擴(kuò)大和多樣性給插畫家?guī)砹诵碌臋C(jī)遇，插畫藝術(shù)可以同時(shí)涉及多個(gè)領(lǐng)域，插畫行業(yè)的特點(diǎn)和局限性也在不斷受到挑戰(zhàn)，在這種相互作用下，動(dòng)畫、游戲、手機(jī)、網(wǎng)絡(luò)開發(fā)領(lǐng)域?yàn)椴瀹嫾規(guī)砹诵碌臋C(jī)遇。數(shù)字網(wǎng)絡(luò)媒介的加入讓插畫藝術(shù)迎來了又一個(gè)高峰，插畫在網(wǎng)頁設(shè)計(jì)中的成功運(yùn)用，使得商業(yè)插畫的潛在市場不斷擴(kuò)大。

三插畫藝術(shù)在網(wǎng)頁環(huán)境下的特性網(wǎng)絡(luò)

作為新興的傳播媒介，有著傳播速度快、傳播信息量大、無地域性、交互性強(qiáng)等特點(diǎn)，并且由于綜合了視頻、圖形、文字、動(dòng)畫、音頻等在內(nèi)的多種媒體的效果，增添了插畫的時(shí)間性和交互性，使插畫從二維、三維空間走向了四維空間。數(shù)字網(wǎng)絡(luò)的傳播形式使得插畫由單一的靜止形態(tài)轉(zhuǎn)向了立體化、空間化的多元形態(tài)，實(shí)現(xiàn)了插畫與數(shù)字技術(shù)的結(jié)合。插畫在網(wǎng)頁環(huán)境中的運(yùn)用必須要與傳統(tǒng)媒介的運(yùn)用有所區(qū)分，插畫在網(wǎng)絡(luò)環(huán)境的運(yùn)用中視覺設(shè)計(jì)表達(dá)的是一定的意圖和要求，即要對(duì)經(jīng)濟(jì)效益產(chǎn)生作用，最大程度地吸引消費(fèi)者的注意力，激發(fā)他們的購買欲望。明確的主題，并按照視覺心理規(guī)律和形式將信息主動(dòng)地傳達(dá)給觀賞者。訴求的目的，是使主題在適當(dāng)?shù)沫h(huán)境里被人們及時(shí)地理解和接受，以滿足人們的實(shí)用和需求，這就要求視覺設(shè)計(jì)不但要單純、簡練、清晰和精確，而且在強(qiáng)調(diào)藝術(shù)性的同時(shí)，更應(yīng)該注重通過獨(dú)特的風(fēng)格和強(qiáng)烈的視覺沖擊力，來鮮明地突出設(shè)計(jì)主題，讓受眾在審美的過程中接受和處理所傳達(dá)的信息。插畫運(yùn)用應(yīng)該和導(dǎo)航系統(tǒng)聯(lián)合起來共同引導(dǎo)瀏覽者的視覺流程，因此插畫的藝術(shù)性在于確保整個(gè)網(wǎng)頁的個(gè)性化和整體性。設(shè)計(jì)師需要讓瀏覽者在最短的時(shí)間內(nèi)接受到信息與美感的雙重體驗(yàn)，滿足人們的實(shí)用和需求。通過塑造可視的形象來表現(xiàn)社會(huì)生活和設(shè)計(jì)師情感的藝術(shù)形式。設(shè)計(jì)師為了使網(wǎng)頁得到更大程度的推廣，受眾更樂意接受，在設(shè)計(jì)作品的過程中，應(yīng)該以審美原則與審美體驗(yàn)作為依據(jù)來創(chuàng)作，要達(dá)到最佳的表訴方式，應(yīng)先從審美特征入手，善于巧妙運(yùn)用各種元素創(chuàng)造出適合不同欣賞習(xí)慣、富有個(gè)性的圖形，這樣才能獲得最佳的藝術(shù)效果。經(jīng)過設(shè)計(jì)師的藝術(shù)化渲染，商品的特質(zhì)往往被突出強(qiáng)調(diào)，激發(fā)了瀏覽者的點(diǎn)擊沖動(dòng)。無外乎精彩的網(wǎng)頁往往都能讓人在瀏覽網(wǎng)頁的整個(gè)過程一直保持興趣盎然，使用起來明確清晰，在細(xì)節(jié)上把握得游刃有余。隨著網(wǎng)絡(luò)傳播的廣泛性和高速性，網(wǎng)站已經(jīng)成為越來越多公司及個(gè)人與大眾交流的平臺(tái)，挑戰(zhàn)著設(shè)計(jì)師的創(chuàng)造力和想象力。而插畫元素的運(yùn)用對(duì)于企業(yè)和個(gè)人形象來說無疑是一種全方位的藝術(shù)提升，不僅有助于企業(yè)樹立良好的社會(huì)形象，還能更為直觀地展示企業(yè)的產(chǎn)品和服務(wù)。

四插畫藝術(shù)風(fēng)格在網(wǎng)頁中的運(yùn)用

眾所周知，資訊的發(fā)達(dá)帶來了網(wǎng)頁視覺藝術(shù)的多元化，也造成了視覺上的平庸。那么，如何有效地實(shí)現(xiàn)網(wǎng)絡(luò)視覺藝術(shù)的傳達(dá)與交流呢？一方面，網(wǎng)頁設(shè)計(jì)中的藝術(shù)審美是一種通過視覺符號(hào)、藝術(shù)形象去認(rèn)識(shí)客觀世界的思維活動(dòng)。生動(dòng)的視覺藝術(shù)能夠喚起瀏覽者的審美情緒，從而符合他們獲取信息的心理需求和審美體驗(yàn)上的滿足；另一方面，通過設(shè)計(jì)師的藝術(shù)化渲染，讓瀏覽者對(duì)企業(yè)產(chǎn)生好感度，從而激發(fā)瀏覽者的點(diǎn)擊沖動(dòng)。在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師先根據(jù)需求把主題與內(nèi)容加以深層次的聯(lián)想，然后通過具體的形象符號(hào)表達(dá)出網(wǎng)頁豐富的感彩，最后運(yùn)用視覺審美體系的各構(gòu)成元素，把技巧和情感與各種視覺符號(hào)融為一體，轉(zhuǎn)化為生動(dòng)、精彩的網(wǎng)頁視覺形象，喚起人們對(duì)網(wǎng)絡(luò)視覺藝術(shù)的追求與熱愛。網(wǎng)絡(luò)上充滿了各種各樣的信息，插畫風(fēng)格成了網(wǎng)頁設(shè)計(jì)中不可替代的藝術(shù)形式，在設(shè)計(jì)主題的表現(xiàn)上顯示出獨(dú)特的藝術(shù)魅力。插畫中獨(dú)特的親切、活波、個(gè)性、旋目的感覺展現(xiàn)出網(wǎng)頁設(shè)計(jì)的多樣性，插畫中個(gè)性化的表現(xiàn)技巧貫穿網(wǎng)頁設(shè)計(jì)中，使得頁面免于平庸，給瀏覽者帶來別出心裁、強(qiáng)烈奇特的多元化視覺印象。當(dāng)然，一個(gè)高明的網(wǎng)頁設(shè)計(jì)師需要具備高度的表現(xiàn)力，這種表現(xiàn)力又能傳播更迅速、更方便、更有時(shí)代特征、更具心靈震撼力的信息。它要求設(shè)計(jì)師具有多變的風(fēng)格語言和高超的表現(xiàn)技能，并能在網(wǎng)頁設(shè)計(jì)的限制中充分發(fā)揮個(gè)性和意象的魅力。插畫藝術(shù)風(fēng)格在網(wǎng)頁設(shè)計(jì)中的運(yùn)用無論具象還是抽象、自由還是機(jī)械，意在創(chuàng)造一種能夠迅速傳達(dá)并容易為平民化所接受并高度符號(hào)化的圖形語言。

1熱情桑巴裝飾性元素在插畫中的運(yùn)用有很長的歷史。詭異的形象，流暢優(yōu)美的線條，從19世紀(jì)末的比亞萊茲插畫到現(xiàn)代的英國的設(shè)計(jì)師SiScott的插畫，裝飾性風(fēng)格風(fēng)采依舊。好的裝飾風(fēng)格會(huì)幫助用戶使用而確保用戶在導(dǎo)航網(wǎng)站上走得更遠(yuǎn)。Havaianas是巴西一家人字拖鞋生產(chǎn)企業(yè)，獨(dú)特的設(shè)計(jì)風(fēng)格，已在好萊塢以及時(shí)尚圈變的廣為皆知，加上插畫家AdhemasBatista對(duì)Havaianas網(wǎng)站（）的精心設(shè)計(jì)，使得Havaianas成為設(shè)計(jì)師、名人和名模的最愛。新穎的裝飾插畫運(yùn)用是Havaianas網(wǎng)頁的特色，絢爛的色彩，豐富視覺形象的運(yùn)用，唯美的畫面，把插畫藝術(shù)的技巧和企業(yè)的品牌文化完美地結(jié)合在一起，使得用戶跟著舞動(dòng)在這股人字拖巴西桑巴旋風(fēng)中。頁面的銜接變換出無窮的靈氣，在動(dòng)感的音樂背景中，鞋子的夸張形象在畫面中不斷綻放。完美的創(chuàng)意加上精良的制作，使整個(gè)視覺的設(shè)計(jì)給人一種獨(dú)特的異域風(fēng)、震撼美，豐富而不凌亂、絢麗而不媚俗，導(dǎo)航條、插畫以及商品特性的結(jié)合自然統(tǒng)一。

2個(gè)性空間涂鴉作為Hip-hop文化的一部分，涉及了非主流、民間藝術(shù)、符號(hào)學(xué)、達(dá)達(dá)主義、后現(xiàn)代主義等意識(shí)形態(tài)，逐漸被商業(yè)化并被吸納成一種特殊的表現(xiàn)形式，作為插畫的一種藝術(shù)形式，各種符號(hào)所代表的內(nèi)容大都反映著年輕人追求獨(dú)特豪放不羈的個(gè)性和自由的心理特點(diǎn)，強(qiáng)烈的色彩運(yùn)用使涂鴉這種獨(dú)一無二的視覺性很容易突出品牌的個(gè)性化特點(diǎn)。涂鴉藝術(shù)的表現(xiàn)內(nèi)容來源于生活，各種元素都可以作為其創(chuàng)作的表現(xiàn)形式，但這種創(chuàng)作又不是簡單的直白描繪，而是通過夸張的圖形和構(gòu)思巧妙的構(gòu)圖表現(xiàn)出來，濃郁的色彩極富視覺沖擊力。涂鴉風(fēng)格的美體現(xiàn)在它的“拙”上，是內(nèi)心情感的流露和表達(dá)，是回歸自然的豁達(dá)和坦然。廣州木果服飾有限公司的網(wǎng)站（）的涂鴉運(yùn)用，把大面積的紅墻肌理作為背景，畫面上出現(xiàn)的紅色怪舌頭，猶如城市里的一張張大嘴，加上俄羅斯男高音Vitas歌聲的烘托把我們帶入了一個(gè)奇異的幻想世界，年輕個(gè)性且強(qiáng)烈的視覺體驗(yàn)立刻撲面而來。

3童話心境卡通風(fēng)格是大家最為熟悉的一種插畫風(fēng)格，體現(xiàn)在其表現(xiàn)手法上，即背景的平面化、圖式的卡通化、符號(hào)的并置化。這些卡通造型雖然用筆簡單，但特有的親和力和創(chuàng)造力體現(xiàn)了一種角色的互換極具夸張的特征?？ㄍㄐ蜗蟮目鋸埿砸苍炀土司W(wǎng)頁的親和力。（）是AliceChan的個(gè)人網(wǎng)站，孩童式的理想空間，極富女性化色彩的頁面，子頁面的卡通形象都有著迷人的大眼睛跟首頁形象大眼女孩公仔形神俱似，雖然每個(gè)交互頁面有所區(qū)別，但相同的風(fēng)格使得頁面能夠很好地貫穿在一起。在個(gè)人心情網(wǎng)頁（），淡雅的灰藍(lán)色是這個(gè)網(wǎng)頁的基本色調(diào)，美麗中夾雜著傷感的意境，平靜中帶著些許的漣漪。每個(gè)頁面聯(lián)系起來仿佛是在訴說著一個(gè)跟愛情有關(guān)故事。

4輕舞飛揚(yáng)湯姆和戴絲兩位設(shè)計(jì)師的網(wǎng)站（）交互性很強(qiáng)大，互動(dòng)的設(shè)計(jì)更會(huì)引起受眾的興趣，滿足人們的參與感。瀏覽者不再僅僅是信息的被動(dòng)接受者，他們擁有更大的選擇與參與機(jī)會(huì)。具象的插畫風(fēng)格運(yùn)用布局恰到好處，設(shè)計(jì)者把情境安排到房間里，層出不窮地在網(wǎng)頁上展示著獨(dú)特的魅力。燈可以選擇開關(guān)，碟片可以選擇性地播放，吹著暖煦的海風(fēng)，聞著淡淡的花香，感受著咖啡在手中的情調(diào)，欣賞著設(shè)計(jì)師的作品，忍不住要隨著藍(lán)調(diào)音樂輕舞飛揚(yáng)起來。似乎瀏覽者就是這個(gè)小空間的主人，真實(shí)情境的參與性提升了網(wǎng)頁的趣味性，強(qiáng)烈的主題與設(shè)計(jì)技巧的結(jié)合為人們拓展了一個(gè)豐富的視覺享受空間。平靜的畫面中流露出來的小資情調(diào)，為我們編織了一個(gè)美麗的、愜意的情感空間。

5幻想世界基于對(duì)未來的憧憬和探索想象、奇幻、怪誕的想象力被源源不斷地釋放出來，現(xiàn)實(shí)生活中無法存在的虛擬情境通過具象的方式展現(xiàn)出來，人神合一的生物體、奇特的怪獸與現(xiàn)實(shí)世界結(jié)合起來共同構(gòu)筑了一個(gè)幻想世界?？苹蔑L(fēng)格是設(shè)計(jì)師比較熱衷的表現(xiàn)風(fēng)格，在大量科幻影視、小說、游戲的帶動(dòng)下，科幻風(fēng)格的作品大行其道，應(yīng)運(yùn)而生的3D制作具有后現(xiàn)代的感覺，給觀者頹廢及冷酷的印象。網(wǎng)頁的魔幻風(fēng)格運(yùn)用一般是與企業(yè)游戲和影視的宣傳相結(jié)合的。如網(wǎng)站（）中，荒誕的場景，怪獸的運(yùn)用帶來視覺上的強(qiáng)烈刺激。

篇3

摘要:隨著互聯(lián)網(wǎng)的蓬勃發(fā)展,出現(xiàn)了許多優(yōu)秀的企業(yè)主頁

>> 淺析網(wǎng)頁設(shè)計(jì)原則與制作技巧 網(wǎng)頁設(shè)計(jì)原則及技巧 網(wǎng)頁設(shè)計(jì)的小技巧 Dreamweaver必備網(wǎng)頁設(shè)計(jì)技巧 淺談網(wǎng)頁藝術(shù)設(shè)計(jì)中的網(wǎng)頁版式設(shè)計(jì)與編排 對(duì)網(wǎng)頁設(shè)計(jì)藝術(shù)的探討與研究 藝術(shù)高職院校網(wǎng)頁設(shè)計(jì)教學(xué)的研究與實(shí)踐 網(wǎng)頁設(shè)計(jì)中藝術(shù)創(chuàng)新的研究與實(shí)現(xiàn)探討 探討網(wǎng)頁設(shè)計(jì)的藝術(shù)與處理原則 淺談網(wǎng)頁藝術(shù)設(shè)計(jì) 網(wǎng)頁藝術(shù)設(shè)計(jì)探索 網(wǎng)頁藝術(shù)設(shè)計(jì)初探 《網(wǎng)頁設(shè)計(jì)與制作》 網(wǎng)頁設(shè)計(jì)的布局和用色技巧 網(wǎng)站設(shè)計(jì)及網(wǎng)頁制作技巧 網(wǎng)頁的版式設(shè)計(jì)技巧探討 網(wǎng)頁新聞編譯的原則與技巧 網(wǎng)頁配色的方法與技巧 淺談網(wǎng)頁制作的經(jīng)驗(yàn)與技巧 板式設(shè)計(jì)課程中的網(wǎng)頁版式設(shè)計(jì)結(jié)構(gòu)與藝術(shù)性探索 常見問題解答 當(dāng)前所在位置：或.html即可。這時(shí),保存的位置中會(huì)出現(xiàn)相應(yīng)的網(wǎng)頁文件了,直接打開,就可看到網(wǎng)頁的效果。但是單由記事本編輯出的網(wǎng)頁在效果上會(huì)過于簡單,不美觀,或功能不是很完善,這就需要我們在簡單掌握html語言后,利用其它的,更為直觀的網(wǎng)頁制作工具來進(jìn)行網(wǎng)頁的制作了。

1.2 掌握網(wǎng)頁三劍客和簡單的數(shù)據(jù)庫使用

何為網(wǎng)頁三劍客?是目前比較流行的制作網(wǎng)頁的三個(gè)工具軟件,Dreamweaver、Fireworks和Flash。其中Dreamweaver可用來制作靜態(tài)網(wǎng)頁、動(dòng)態(tài)網(wǎng)頁、創(chuàng)建和管理網(wǎng)站、制作樣式表等等,功能強(qiáng)大,應(yīng)用范圍很廣。Fireworks是圖像處理軟件,不僅具備復(fù)雜的圖像處理功能,并且能輕松地把圖形輸出到第三方的應(yīng)用程序中,它最大的特點(diǎn)是,應(yīng)用網(wǎng)頁制作方面的切片功能,使網(wǎng)頁圖片處理起來更方便,快捷了。Flas制作軟件,目前,大大小小的網(wǎng)頁中,都有flas存在著,給網(wǎng)頁增添了精彩的效果,使網(wǎng)頁更加精致,還可利用flash制作出有趣的游戲,留言板,聊天室等等,是功能強(qiáng)大的應(yīng)用軟件。

網(wǎng)頁中經(jīng)常會(huì)用到聊天室、留言板、用戶注冊、網(wǎng)上問答等等內(nèi)容,這樣網(wǎng)頁就被分成了動(dòng)態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁二種,不使用服務(wù)器相關(guān)內(nèi)容,不使用數(shù)據(jù)庫鏈接的網(wǎng)頁被稱為靜態(tài)網(wǎng)頁,直接使用Dreamweaver來進(jìn)行編輯就可以了,它的文件名中的擴(kuò)展名為.htm或.html。而動(dòng)態(tài)網(wǎng)頁正是相對(duì)于靜態(tài)網(wǎng)頁來說的,它的擴(kuò)展名一般為.asp或.php等等。這種網(wǎng)頁要使用相應(yīng)的服務(wù)器技術(shù),并用到數(shù)據(jù)庫和數(shù)據(jù)庫鏈接知識(shí)。常用的數(shù)據(jù)庫有Access數(shù)據(jù)庫、SQL Server數(shù)據(jù)庫等[2]。

3 網(wǎng)頁內(nèi)容的選取

網(wǎng)頁的內(nèi)容是靈魂,制作的網(wǎng)頁是否受歡迎,是否能吸引訪問者的眼球,是否能達(dá)到預(yù)期的效果。這些都是網(wǎng)頁制作時(shí)我們必須要預(yù)先考慮的問題。

那么如何完成內(nèi)容的定位泥?

① 在定位網(wǎng)站內(nèi)容時(shí),要做到小而精,切忌包羅萬象。把你認(rèn)為最精彩的東西都放在上面,那么往往會(huì)事與愿違,給人以內(nèi)容泛泛,大而空的感覺.最好做比較專一的內(nèi)容。試想,如果我們將自己最擅長的某種知識(shí)或技術(shù)等內(nèi)容做到網(wǎng)頁中,建立一個(gè)專題的站點(diǎn),那么一旦有訪問者第一次在這里一下子就找到了他想找的內(nèi)容的話。那么如果再有這方面的需求,首先就會(huì)想到你的站點(diǎn)。

② 如果是個(gè)人網(wǎng)頁,那就一定要突出自身的個(gè)性,當(dāng)今社會(huì)是提倡張揚(yáng)個(gè)性的時(shí)代,除了別人都有的內(nèi)容之外,自己還要融入一些自身的特點(diǎn),是內(nèi)容要有亮點(diǎn),配色也可不拘一格,大膽用色。從各個(gè)角度烘托出制作者的獨(dú)特性格。

③ 如果是企業(yè)的站點(diǎn),要注意的是:企業(yè)的運(yùn)營宗旨是否能完好體現(xiàn),能否在網(wǎng)頁中最大限度體現(xiàn)企業(yè)網(wǎng)站功能和用戶最需要的內(nèi)容,用戶的操作是否簡便等;要做到網(wǎng)頁內(nèi)容主次分明,結(jié)構(gòu)要清晰簡潔。

④ 對(duì)于能留住訪問者的另一個(gè)重要問題,就是網(wǎng)頁的速度。對(duì)于一個(gè)瀏覽頁面時(shí)間超長的網(wǎng)頁,我想不會(huì)讓人有再次訪問的想法。對(duì)于線路和網(wǎng)路本身的速度我們不能控制,但我們可以在網(wǎng)頁設(shè)計(jì)中避免一些影響速度的因素。好的網(wǎng)頁應(yīng)是越簡單易讀越好。我們可以從以下幾個(gè)方面來考慮。首先,影響瀏覽速度的最重要因素之一是圖片容量大小,漂亮的圖片、絢麗的動(dòng)畫效果,會(huì)使你的主頁增光添彩,但圖片的容量大小卻是直接導(dǎo)致瀏覽速度慢嚴(yán)重后果。盡管你的內(nèi)容精彩絕倫,網(wǎng)頁漂亮,但打開你的網(wǎng)頁需要等上半天,在這時(shí)間就是金錢的時(shí)代,誰會(huì)再次的光顧呢?可利用圖片制作工具將圖片進(jìn)行加工,在不太影響效果的前提下,可利用修改存儲(chǔ)格式,降低像素,分辨率,減少動(dòng)畫應(yīng)用等途經(jīng)來達(dá)到目的。

4 網(wǎng)頁制作步驟

制作網(wǎng)頁和裝修差不多,先從整體的角度構(gòu)思出網(wǎng)頁的內(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)先確立出來。

② 收集素材

現(xiàn)在的互聯(lián)上的資源非常豐富,各種各樣的圖片資源、動(dòng)畫資源等多媒體資源比比皆是,就所確定的網(wǎng)站風(fēng)格等因素,收集相關(guān)素材。

③ 使用Fireworks等圖型制作軟件將網(wǎng)頁先畫出來

這一步驟很關(guān)鍵,無論使用哪種網(wǎng)頁制作軟件,在進(jìn)行編輯時(shí)經(jīng)常用到表格,用表格來定位圖片,用表格來定位文本,用表格來組合被切割的小圖片等。因?yàn)榫W(wǎng)頁時(shí)經(jīng)常會(huì)出現(xiàn)后位置更改的現(xiàn)象,使用表格來規(guī)劃網(wǎng)頁,會(huì)得到事半功倍的效果。另外,小圖片的下載速度要比一整張大圖片的下載速度快的多,所以在網(wǎng)頁中多是將大的圖片切割成小部分后,利用無邊框,無間距的表格將小圖片組合成一張大圖。那么,第一步,在使用表格制作前,應(yīng)用圖片處理軟件進(jìn)行網(wǎng)頁設(shè)計(jì),將整個(gè)網(wǎng)頁的效果圖片畫出來。第二步,利用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)頁的左上角,大小有三種常用規(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)頁如果被制作成動(dòng)態(tài)網(wǎng)頁形式,首先要添加相應(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í)需要我們在光驅(qū)中放入系統(tǒng),或者可以到網(wǎng)絡(luò)上進(jìn)行下載。

⑥ 創(chuàng)建數(shù)據(jù)庫

網(wǎng)頁中留言板、信息反饋、用戶注冊等等內(nèi)容都要通過數(shù)據(jù)庫對(duì)其內(nèi)容進(jìn)行存儲(chǔ),以備網(wǎng)頁調(diào)用[3]。一般的asp動(dòng)態(tài)網(wǎng)頁使用Access做為數(shù)據(jù)庫,Access使用起來很方便,可以根據(jù)向?qū)韯?chuàng)建數(shù)據(jù)庫內(nèi)容。

⑦ 使用Dreamweaver制作網(wǎng)頁

所有的準(zhǔn)備工作已經(jīng)差不多了,我們現(xiàn)在要做的是,用Dreamweaver網(wǎng)頁制作軟件將已有的圖片、文本、數(shù)據(jù)庫等等內(nèi)容組合到一起,形成我們的網(wǎng)站。首先,創(chuàng)建一個(gè)新的站點(diǎn),在站點(diǎn)內(nèi)新建網(wǎng)頁,一般使用index.htm或index.asp做主頁名稱。其次,在網(wǎng)頁中插入表格,將已經(jīng)完成的圖片、動(dòng)畫等多媒體內(nèi)容插入到網(wǎng)頁中。然后,加入相應(yīng)的圖片效果、鼠標(biāo)經(jīng)過、超級(jí)鏈接等內(nèi)容。最后添加相應(yīng)的樣式表內(nèi)容,還可以利用行為面板,給網(wǎng)頁加入一些特效,如彈出窗口、時(shí)間軸特效等。還可以從網(wǎng)站上下載插件,安裝在Dreamweaver中,以增添效果。如果動(dòng)態(tài)網(wǎng)頁內(nèi)容需要添加數(shù)據(jù)庫鏈接內(nèi)容,那我們就要在Dreamweaver中的數(shù)據(jù)庫面板中進(jìn)行操作,添加數(shù)據(jù)源、綁定數(shù)據(jù)、記錄集和服務(wù)器等內(nèi)容。使網(wǎng)頁更具有實(shí)效性。

5 結(jié)束語

網(wǎng)頁設(shè)計(jì)是一個(gè)注重實(shí)踐操作和設(shè)計(jì)的課程,需要我們在制作中不斷的學(xué)習(xí),不斷的探索;在互聯(lián)網(wǎng)應(yīng)用如此廣泛的今天,網(wǎng)頁制作的是否精美、實(shí)用,是否有訪問量等等是評(píng)價(jià)網(wǎng)頁優(yōu)劣的最好方法。讓我們在實(shí)踐中進(jìn)步,在實(shí)踐中走出一條屬于自己的路。

參考文獻(xiàn):

[1] 丁桂芝.ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程[M].北京:中國鐵道出版社,2005:16-18.

篇4

【關(guān)鍵詞】網(wǎng)頁設(shè)計(jì) 表格 層 就業(yè)信息管理平臺(tái)

【中圖分類號(hào)】G 【文獻(xiàn)標(biāo)識(shí)碼】A

【文章編號(hào)】0450-9889（2017）03C-0191-02

隨著信息技術(shù)的日新月異，網(wǎng)頁設(shè)計(jì)的重要性也逐漸凸顯，如何快速、方便地設(shè)計(jì)出相關(guān)的網(wǎng)頁、網(wǎng)站就顯得非常重要。在網(wǎng)頁設(shè)計(jì)與制作的教學(xué)過程中，如何讓學(xué)生快速地掌握網(wǎng)頁設(shè)計(jì)的一些排版技巧是非常有必要的。因此，筆者結(jié)合網(wǎng)頁設(shè)計(jì)與制作教學(xué)中的一些體會(huì)，并通過就業(yè)信息管理平臺(tái)的設(shè)計(jì)案例，探索網(wǎng)頁設(shè)計(jì)中表格與Ap Div（層）的排版設(shè)計(jì)技巧。

一、Dreamweaver cs簡介

Dreamweaver cs是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁設(shè)計(jì)軟件。目前，最新的版本為Dreamweaver CC，網(wǎng)頁設(shè)計(jì)軟件的功能強(qiáng)大。對(duì)網(wǎng)頁的瀏覽已經(jīng)是我們生活中的不可分割的一部分，網(wǎng)頁作為網(wǎng)絡(luò)信息傳播的主要載體，其設(shè)計(jì)也為大家所關(guān)注。網(wǎng)頁設(shè)計(jì)軟件的種類有很多，但最出名、最專業(yè)的網(wǎng)頁設(shè)計(jì)工具，非Dreamweaver莫屬。它是著名的“所見即所得”的可視化網(wǎng)站開發(fā)工具，目前的網(wǎng)頁設(shè)計(jì)幾乎都采用Dreamweaver來設(shè)計(jì)。Dreamweaver不僅提供了強(qiáng)大的網(wǎng)頁編輯功能，而且還提供了網(wǎng)頁的上傳工具。利用FTP進(jìn)行大文件的傳輸，節(jié)省了文件的傳輸時(shí)間，它是一個(gè)集網(wǎng)頁創(chuàng)作和文件傳輸管理等多功能的設(shè)計(jì)工具。

二、表格與層在網(wǎng)頁設(shè)計(jì)中的使用

在就業(yè)信息管理平臺(tái)的設(shè)計(jì)中，采用程序設(shè)計(jì)，可以很好地提高網(wǎng)頁的下載與瀏覽速度，但對(duì)于初學(xué)者來說，程序設(shè)計(jì)是一件頭痛的事。因此，如何利用表格與層來進(jìn)行設(shè)計(jì)，就非常重要。網(wǎng)頁設(shè)計(jì)中的排版有很多種方法，其中表格結(jié)合層的使用排版是最基本也是最有效的方法。表格與層，對(duì)職業(yè)院校的學(xué)生來說，非常容易學(xué)，而且使用也非常方便，做出來的網(wǎng)頁也非常的漂亮，因此，在網(wǎng)頁設(shè)計(jì)中表格與層是非常重要的。

（一）網(wǎng)頁設(shè)計(jì)中表格的使用。在網(wǎng)頁設(shè)計(jì)中，利用表格的排版，它的整體效果好是毋庸置疑的，表格在網(wǎng)頁中的位置可以通過表格屬性來進(jìn)行設(shè)置。在Dreamweaver中，頁面內(nèi)容的設(shè)計(jì)、排版主要是通過表格來完成。通過表格的相互嵌套、合并與拆分，可以將自己構(gòu)思好的頁面完整地表現(xiàn)出來。表格在網(wǎng)頁中的重要作用，主要是它在不同的顯示上，可以根據(jù)網(wǎng)頁的大小、顯示器的大小進(jìn)行相應(yīng)的變化。并始終都處于瀏覽的相對(duì)位置，完整地把內(nèi)容顯示出來，具有很好的兼容性。因此，使用表格排版比較規(guī)范，整體性強(qiáng)，可以讓網(wǎng)頁的設(shè)計(jì)顯得非常的整齊，達(dá)到想要的效果。但由于表格的整體性，在一些細(xì)微的地方以及操作上還不夠細(xì)化，在內(nèi)容的設(shè)計(jì)表現(xiàn)上還不夠豐富。

（二）網(wǎng)頁設(shè)計(jì)中層的使用。層的使用在網(wǎng)頁設(shè)計(jì)中也是非常的普遍，由于它的定位比較精確，又是一種可視化操作元素，它的使用讓網(wǎng)頁增加了豐富的表現(xiàn)。層與表格的使用基本差不多，但在位置的定位上要比表格方便很多，這也是層的主要優(yōu)點(diǎn)。在網(wǎng)頁設(shè)計(jì)中，文本、圖像、表格等元素只能固定其位置，不能相互疊加。如果要想使多個(gè)元素進(jìn)行疊加或者定位要精確，在這種情況下，就需要使用層來進(jìn)行設(shè)置。層具有很多表格所不具備的特點(diǎn)，如層的重疊、移動(dòng)、隱藏等一些功能，層還可以添加一些動(dòng)作行為，讓層的內(nèi)容表現(xiàn)更加豐富，也正是基于這一點(diǎn)，層成了網(wǎng)頁設(shè)計(jì)中一個(gè)重要的元素。層的這些特點(diǎn)有助于設(shè)計(jì)思維不受局限，從而在設(shè)計(jì)上有很大的空間。由于它是一種流元素，層在具有上述優(yōu)點(diǎn)的同時(shí)，也存在著一些不可避免的缺陷，例如層在網(wǎng)頁中的定位不會(huì)隨著瀏覽器大小的變化而變化，層的位置是固定不動(dòng)的，在這樣的情況下就失去了層在W頁設(shè)計(jì)布局中的意義。

（三）就業(yè)信息管理平臺(tái)中表格與層的結(jié)合使用。表格與層的結(jié)合使用才能更好地體現(xiàn)出它們的優(yōu)勢，層也才能更好地體現(xiàn)出它在網(wǎng)頁設(shè)計(jì)中的強(qiáng)大功能。在網(wǎng)頁設(shè)計(jì)中，如何做到表格跟層的統(tǒng)一、層與表格融為一個(gè)整體，這就要用到層在表格中的插入操作，以及層的嵌套使用，下面以就業(yè)信息管理平臺(tái)中制作下拉菜單為例來設(shè)計(jì)。首先，在網(wǎng)頁中插入一個(gè)三行一列的表格，在表格的第一行插入一張圖片，作為網(wǎng)頁設(shè)計(jì)的Logo，而在第二行中插入一個(gè)嵌套的一行五列的表格作為網(wǎng)頁的導(dǎo)航條，表格的第三行作為主要內(nèi)容的設(shè)計(jì)與排版。其次，在表格的第一格中插入一個(gè)Ap Div層，作為父層，操作步驟為：菜單欄中的插入―布局對(duì)象―Ap Div，插入后，這個(gè)層的位置左、上必須為空，沒有任何內(nèi)容。即它的屬性設(shè)置為圖1所示。

父層設(shè)置好后，就要進(jìn)行下拉菜單的設(shè)計(jì)，即子層的設(shè)計(jì)，子層的設(shè)計(jì)主要通過層的嵌套來完成，完成后的效果如2圖所示。

到這里基本完成了管理平臺(tái)中表格結(jié)合層的使用，層就像表格一樣，具有隨著瀏覽器的變化而變化。下拉菜單的設(shè)計(jì)，需要結(jié)合層的行為來操作，這里就不再介紹行為的操作。這個(gè)簡單的案例說明層要與表格結(jié)合使用，才能發(fā)揮出層最大的優(yōu)勢，當(dāng)然這是對(duì)初學(xué)者來說的。層與表格的結(jié)合使用有很多的例子，有著非常豐富的內(nèi)容，在此不再贅述。

三、表格與層的正確應(yīng)用

表格與層在網(wǎng)頁設(shè)計(jì)中雖然有強(qiáng)大的功能，但在使用的過程中也不能太隨意，如果隨意地使用就會(huì)增加瀏覽器的負(fù)擔(dān)，瀏覽下載的速度就會(huì)變慢，影響網(wǎng)頁的瀏覽。

（一）表格布局出現(xiàn)的問題。在網(wǎng)頁設(shè)計(jì)中，利用表格排版的時(shí)候，不能使用一個(gè)大大的表格鋪滿整個(gè)頁面，這樣不利于瀏覽器的打開。瀏覽器打開一個(gè)表格，是要等一個(gè)表格全部下載完成，這樣就需要很長的時(shí)間來打開這個(gè)網(wǎng)頁。在表格的嵌套中，也不能無限制地嵌套下去，一般表格的嵌套，應(yīng)該控制在最多三層表格，如果嵌套的表格太多，打開時(shí)也會(huì)消耗大量的資源，不利于網(wǎng)頁的打開。有數(shù)據(jù)統(tǒng)計(jì)，一般瀏覽者打開網(wǎng)頁的等待時(shí)間為7秒以內(nèi)。如何解決這個(gè)問題，主要采用拆分表格的方法，將一個(gè)大的表格拆分成幾個(gè)小的表格，并要盡可能地避免表格的層層嵌套。

（二）層布局出現(xiàn)的偏差。在網(wǎng)頁的設(shè)計(jì)中，層的單獨(dú)使用沒有多大的意義，因?yàn)閷邮橇髟?，不?huì)隨著網(wǎng)頁瀏覽器的變化而變化，它的位置是固定的，不會(huì)產(chǎn)生移動(dòng)。雖然有時(shí)候，我們在利用表格與層排版的時(shí)候，看起來很整齊，但一預(yù)覽就完全錯(cuò)位了，根本不是想要的效果。如何才能使層與頁面中的表格一樣，能夠隨瀏覽器的變化而產(chǎn)生相對(duì)位置上的變化，這就需要先使用表格對(duì)整個(gè)網(wǎng)頁的整體進(jìn)行規(guī)劃，然后添加一個(gè)層到表格中的一個(gè)單元格中，作為一個(gè)父層。操作的方法為：菜單欄中的插入―布局對(duì)象―Ap Div，插入后，這個(gè)層的位置左、上必須為空，沒有任何內(nèi)容。即設(shè)置好的屬性就如圖1所示。然后，其他的子層就通過這個(gè)父層進(jìn)行嵌套，在這里必須強(qiáng)調(diào)的是，父層必須通過菜單欄的插入，不能通過用鼠標(biāo)畫出來的方式操作。采用這種方法設(shè)置層后，無論瀏覽器的窗口大小如何變化，它都會(huì)跟著變化，體現(xiàn)了與表格成為一個(gè)整體，在瀏覽時(shí)就不會(huì)產(chǎn)生位置上的移動(dòng)，因此，層只有結(jié)合表格的使用才能更好地豐富網(wǎng)頁內(nèi)容。

總之，在網(wǎng)頁設(shè)計(jì)中，表格c層是非常重要的元素，但在布局設(shè)計(jì)中，只有把表格與層結(jié)合使用，才能讓網(wǎng)頁的布局精美與豐富。網(wǎng)頁中的內(nèi)容雖然很重要，但網(wǎng)頁中的設(shè)計(jì)與布局才是最重要的。因此，通過合理的布局設(shè)置，特別是主頁設(shè)計(jì)要整齊美觀，才可能更好地吸引讀者。因此，在平時(shí)的網(wǎng)頁設(shè)計(jì)中，要多看一些優(yōu)秀網(wǎng)站的排版設(shè)計(jì)，只有這樣，才能更好地提高自己的網(wǎng)頁設(shè)計(jì)能力。

【參考文獻(xiàn)】

[1]俞燕丹.項(xiàng)目教學(xué)法在《網(wǎng)頁設(shè)計(jì)與制作》課程中的實(shí)踐研究[J].新課程研究（中旬刊），2015（10）

[2]韓媛媛.淺談Dreamweaver在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].信息與電腦，2016（7）

[3]周金容.網(wǎng)頁制作過程與技巧[J].軟件導(dǎo)刊，2016（15）

[4]王浩.基于項(xiàng)目化的《網(wǎng)頁設(shè)計(jì)》課程教學(xué)改革初探[J].信息與電腦（理論版），2014（11）

[5]錢麗丹.小組協(xié)同式學(xué)習(xí)在網(wǎng)頁設(shè)計(jì)與制作課程中的應(yīng)用[J].計(jì)算機(jī)時(shí)代，2015（4）

[6]陳靜.基于項(xiàng)目驅(qū)動(dòng)法的網(wǎng)頁設(shè)計(jì)基礎(chǔ)課程課堂教學(xué)改革探索[J].人才資源開發(fā)，2015（20）

【基金項(xiàng)目】2016年度廣西高校中青年教師基礎(chǔ)能力提升項(xiàng)目“基于WEB的高職院校就業(yè)信息管理系統(tǒng)的研發(fā)與應(yīng)用”（KY2016YB685）

篇5

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì)；制作；學(xué)生能力；培養(yǎng)

隨著互聯(lián)網(wǎng)的發(fā)展和普及，網(wǎng)頁設(shè)計(jì)和制作技術(shù)成為網(wǎng)絡(luò)時(shí)代非常實(shí)用的技術(shù)，這一課程也成為學(xué)校開設(shè)的熱門課程。無論是計(jì)算機(jī)專業(yè)的學(xué)生還是非計(jì)算機(jī)專業(yè)的學(xué)生，網(wǎng)頁制作都成了一門重要的基礎(chǔ)性技術(shù)課程。但是很多學(xué)校在教學(xué)中采用傳統(tǒng)的教學(xué)模式，導(dǎo)致學(xué)生的學(xué)習(xí)積極性不高，實(shí)際動(dòng)手能力也比較差，為了讓學(xué)生快速的掌握網(wǎng)頁設(shè)計(jì)和制作的技術(shù)，需要采用一些新型的教學(xué)方法實(shí)施教學(xué)，加強(qiáng)學(xué)生綜合能力地培養(yǎng)。

一、加強(qiáng)學(xué)生創(chuàng)新能力的培養(yǎng)

創(chuàng)新是一個(gè)民族的靈魂和動(dòng)力，同時(shí)也是當(dāng)今社會(huì)競爭的核心。學(xué)生創(chuàng)新能力的提升和創(chuàng)新意識(shí)的增強(qiáng)對(duì)于他們以后的發(fā)展具有非常重要的作用。網(wǎng)頁設(shè)計(jì)與制作教學(xué)作為新時(shí)期教學(xué)的主要課程，在教學(xué)中培養(yǎng)學(xué)生的創(chuàng)新能力有利于促進(jìn)整體教學(xué)的發(fā)展。因此，在教學(xué)中，可以通過多方面內(nèi)容加強(qiáng)學(xué)生創(chuàng)新能力的培養(yǎng)，首先，可以通過興趣教學(xué)法喚醒學(xué)生的求知欲望，興趣是能夠推動(dòng)學(xué)生求知的內(nèi)在力量，學(xué)生只有對(duì)某一學(xué)科充滿興趣，才能夠持續(xù)的鉆研該學(xué)科知識(shí)，從而增強(qiáng)學(xué)生的學(xué)習(xí)效率。在教學(xué)中，為了增強(qiáng)學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)和制作的興趣，教師可以在上課時(shí)準(zhǔn)備一些網(wǎng)頁作品，讓學(xué)生對(duì)作品進(jìn)行點(diǎn)評(píng)，然后提出改造的意見。讓學(xué)生在頭腦中對(duì)網(wǎng)頁設(shè)計(jì)有一個(gè)模糊的認(rèn)識(shí)，產(chǎn)生做網(wǎng)站的想法，這樣一來，通過教師的指導(dǎo)就能夠讓學(xué)生梳理一個(gè)成型的站點(diǎn)框架，緊接著引導(dǎo)學(xué)生如何做網(wǎng)頁，如何使用工具，學(xué)生對(duì)這些內(nèi)容產(chǎn)生興趣，就會(huì)帶著教師提出的問題進(jìn)行主動(dòng)探索和學(xué)習(xí)，以此增強(qiáng)學(xué)生的學(xué)習(xí)效果。

除此之外，還可以通過精品賞析的方式增強(qiáng)學(xué)生的學(xué)習(xí)靈感。網(wǎng)頁設(shè)計(jì)和制作課程是一門藝術(shù)和藝術(shù)相結(jié)合的課程，學(xué)生不僅要掌握基本的網(wǎng)頁制作技巧，還要具備欣賞美和創(chuàng)造美的能力。創(chuàng)造的來源是靈感，而靈感的來源則是通過觀察，因此，可以在教學(xué)中設(shè)計(jì)精品賞析的環(huán)節(jié)，利用上課之前的時(shí)間展示作品，向?qū)W生展示一些布局合理，設(shè)計(jì)新穎的精美網(wǎng)頁，讓學(xué)生對(duì)這些網(wǎng)頁進(jìn)行觀察和欣賞，這樣不僅可以拓寬學(xué)生的視野，同時(shí)還能激發(fā)學(xué)生的創(chuàng)造靈感，為學(xué)生以后設(shè)計(jì)出精美的作品奠定基礎(chǔ)。

二、培養(yǎng)學(xué)生的網(wǎng)頁制作綜合能力

在學(xué)生掌握網(wǎng)頁設(shè)計(jì)和制作的基本知識(shí)之后，網(wǎng)頁制作綜合能力的培養(yǎng)就顯得非常重要了。即使學(xué)生掌握了網(wǎng)頁制作技術(shù)，也不一定能夠設(shè)計(jì)出好的網(wǎng)站，只有提升學(xué)生的綜合能力，加強(qiáng)對(duì)他們所掌握知識(shí)的綜合應(yīng)用，才能夠設(shè)計(jì)出一個(gè)精美的網(wǎng)站。為此，需要注重學(xué)生在實(shí)踐方面的能力培養(yǎng)，可以從教學(xué)實(shí)驗(yàn)方面入手，將所有的理論教學(xué)和實(shí)驗(yàn)教學(xué)都安排在計(jì)算機(jī)機(jī)房完成，可以讓學(xué)生在學(xué)習(xí)理論知識(shí)之后直接進(jìn)入實(shí)踐探索階段。此外，為了給學(xué)生提供更好的實(shí)踐機(jī)會(huì)，可在學(xué)校建立計(jì)算機(jī)基礎(chǔ)教學(xué)網(wǎng)，網(wǎng)頁設(shè)計(jì)和制作教學(xué)的老師可以建立自己的教W網(wǎng)站，同時(shí)給學(xué)生分配相應(yīng)的網(wǎng)站空間，要求學(xué)生建立自己的個(gè)人網(wǎng)站主頁，然后將自己的實(shí)踐作業(yè)上傳到網(wǎng)站空間中，設(shè)計(jì)的風(fēng)格和主題不受限制，網(wǎng)站主頁的內(nèi)容也不做要求，學(xué)生可以根據(jù)自己的興趣進(jìn)行網(wǎng)頁的制作，將所學(xué)習(xí)的網(wǎng)頁制作技術(shù)靈活的運(yùn)用到個(gè)人網(wǎng)頁的設(shè)計(jì)中，做好人個(gè)網(wǎng)站。為了讓學(xué)生在網(wǎng)站設(shè)計(jì)中學(xué)會(huì)創(chuàng)新，教師可以搜集一些具有創(chuàng)意的網(wǎng)站和網(wǎng)頁設(shè)計(jì)的素材，和學(xué)生一起分享，然后與學(xué)生所做的網(wǎng)站進(jìn)行對(duì)比，從而提升學(xué)生的創(chuàng)新能力。在網(wǎng)站設(shè)計(jì)中，針對(duì)不同的設(shè)計(jì)環(huán)節(jié)，學(xué)生可以自己發(fā)現(xiàn)設(shè)計(jì)中存在的問題，然后進(jìn)行分析和解決，對(duì)于學(xué)生綜合能力的培養(yǎng)具有很大的幫助。

三、加強(qiáng)培養(yǎng)學(xué)生的團(tuán)隊(duì)協(xié)作能力

現(xiàn)在社會(huì)的分工越來越細(xì)，很多工作都需要人們協(xié)助完成，這樣以來，團(tuán)隊(duì)精神就顯得格外重要。協(xié)同合作是團(tuán)隊(duì)精神的核心內(nèi)容，尊重個(gè)人的興趣和成就是團(tuán)隊(duì)協(xié)作的基礎(chǔ)。就學(xué)生而言，獨(dú)立意識(shí)較強(qiáng)，現(xiàn)代的學(xué)生比較自我，溝通能力也有待提升，這些缺陷顯然不適合學(xué)生未來的工作。網(wǎng)頁設(shè)計(jì)和制作教學(xué)是一門實(shí)踐性要求較高的課程，同時(shí)也對(duì)學(xué)生的團(tuán)隊(duì)協(xié)作能力要求很高。在教學(xué)中的綜合實(shí)訓(xùn)中可以選擇采取項(xiàng)目教學(xué)法實(shí)施教學(xué)，將學(xué)生分成不同的小組，在自愿的基礎(chǔ)上進(jìn)行強(qiáng)弱搭配，并且每一個(gè)小組推薦一位組長，在老師布置任務(wù)之后，組長可以做好小組內(nèi)的分工，讓學(xué)生能各司其職，然后合力完成作品的設(shè)計(jì)和制作。在作品制作中，如果組內(nèi)的成員存在意見不同意的現(xiàn)狀，組長可以和其他的成員進(jìn)行溝通協(xié)調(diào)，最后達(dá)成一致，當(dāng)組員能夠?yàn)橥粋€(gè)目標(biāo)一起努力時(shí)，無論最后的結(jié)果如何，學(xué)生最后都會(huì)有成就感。在這一過程中，有利于提升學(xué)生的團(tuán)隊(duì)協(xié)作精神，增強(qiáng)學(xué)生的溝通能力。

四、結(jié)語

網(wǎng)頁設(shè)計(jì)和制作教學(xué)是一門實(shí)踐性很強(qiáng)的課程，對(duì)于學(xué)生的綜合實(shí)踐能力以及創(chuàng)新能力的要求較高，因此，在教學(xué)中，教師要給根據(jù)學(xué)生的興趣愛好設(shè)計(jì)教學(xué)內(nèi)容，并且為學(xué)生提供一些優(yōu)秀的教學(xué)作品，讓他們進(jìn)行賞析，在優(yōu)秀作品的激勵(lì)和教師的引導(dǎo)下，學(xué)生的學(xué)習(xí)興趣會(huì)有很大的提升，從而真正的投入到網(wǎng)頁設(shè)計(jì)和制作的探索當(dāng)中，熟練的掌握網(wǎng)頁制作方面的技巧，增強(qiáng)學(xué)生開發(fā)和維護(hù)網(wǎng)站的能力，使他們的知識(shí)結(jié)構(gòu)不斷得到完善，對(duì)于教學(xué)效果的提升會(huì)起到很大的作用。

參考文獻(xiàn)：

[1]馬玲燕. 《網(wǎng)頁設(shè)計(jì)與制作》課程的教學(xué)實(shí)踐研究[D].內(nèi)蒙古師范大學(xué)，2013.

[2]畢惠麗. 淺談網(wǎng)頁設(shè)計(jì)與制作教學(xué)中學(xué)生能力的培養(yǎng)[J]. 新課程（上），2012，02：185.

[3]胡曉紅，王麗芬，張景峰. 基于職業(yè)能力培養(yǎng)的《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)改革的研究[J]. 電腦知識(shí)與技術(shù)，2012，20：4953-4956.

篇6

要想通過有限的課時(shí)教學(xué)使學(xué)生能夠做出優(yōu)質(zhì)的網(wǎng)頁，拓寬學(xué)生的眼界，開發(fā)學(xué)生的思維是首要任務(wù)。因此在高職的《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)中，教師可以根據(jù)實(shí)際教學(xué)的需要，選取一些比較經(jīng)典的案例，對(duì)學(xué)生進(jìn)行教學(xué)，在增長學(xué)生見識(shí)的同時(shí)，促使學(xué)生取長補(bǔ)短，從而有效提高學(xué)生的網(wǎng)頁制作能力。因此教師必須充分利用起身邊的教學(xué)資源，根據(jù)高職《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)的需要并結(jié)合學(xué)生的喜好，從網(wǎng)絡(luò)上搜索一些高水平的網(wǎng)站，作為教學(xué)案例，向?qū)W生分析網(wǎng)站設(shè)計(jì)和制作的優(yōu)點(diǎn)和缺點(diǎn)，以及相關(guān)的設(shè)計(jì)和制作技巧，從而使學(xué)生對(duì)所學(xué)的內(nèi)容有更加立體的認(rèn)識(shí)。需要強(qiáng)調(diào)的是，教師切忌不能在所有的教學(xué)中都采取一個(gè)網(wǎng)站作為案例，要多選取幾個(gè)，且隨著更多優(yōu)秀網(wǎng)站的出現(xiàn)，教師還應(yīng)該對(duì)教學(xué)案例進(jìn)行不斷的補(bǔ)充和更新，進(jìn)而有效激發(fā)學(xué)生的學(xué)習(xí)動(dòng)力和積極性，推動(dòng)高效教學(xué)的實(shí)現(xiàn)。比如在教授如何設(shè)計(jì)網(wǎng)頁欄目、logo以及導(dǎo)航條時(shí)，教師可以先向?qū)W生介紹一些基本內(nèi)容，然后向?qū)W生展示一些做的比較出色的網(wǎng)頁，如學(xué)校網(wǎng)站首頁等，并向?qū)W生分析學(xué)校網(wǎng)站首頁制作的特點(diǎn)，然后通過啟發(fā)和引導(dǎo)的方式，讓學(xué)生模仿學(xué)校網(wǎng)站首頁進(jìn)行創(chuàng)作，從而有效提高學(xué)生的制作水平。

二、任務(wù)驅(qū)動(dòng)教學(xué)法

所謂的任務(wù)驅(qū)動(dòng)教學(xué)法就是給學(xué)生一個(gè)任務(wù)，由學(xué)生來完成，教師可以從旁指導(dǎo)和幫助，在任務(wù)的驅(qū)使和激勵(lì)下促使學(xué)生主動(dòng)學(xué)習(xí)，積極探索，相互合作的學(xué)習(xí)方式。值得注意的是，教師在使用這一教學(xué)方教學(xué)法是建立學(xué)生必須已經(jīng)掌握一定的基礎(chǔ)知識(shí)，學(xué)會(huì)如何使用一些基本的應(yīng)用軟件的基礎(chǔ)上，因此任務(wù)驅(qū)動(dòng)教學(xué)法并不是以教材和知識(shí)點(diǎn)為中心，而是以培養(yǎng)和鍛煉學(xué)生的在網(wǎng)頁設(shè)計(jì)和制作上的綜合運(yùn)用能力為中心。在實(shí)際的高職《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)中，教師可以通過專題或者話題的形式，在交流中引導(dǎo)和啟發(fā)學(xué)生，然后定下一個(gè)主題，讓學(xué)生圍繞主題來設(shè)計(jì)出一個(gè)完整的網(wǎng)站。由于完整的網(wǎng)站涉及的內(nèi)容較多，包含目標(biāo)需求分析、網(wǎng)站定位、網(wǎng)頁規(guī)劃、內(nèi)容收集、網(wǎng)頁設(shè)計(jì)、內(nèi)容排版以及文字和圖片的處理編排等，因此教師在教學(xué)中可以采用小組合作的模式，從而提高學(xué)生的合作能力和人際交流能力；也可以由一個(gè)學(xué)生單獨(dú)完成，期間教師可以組織幾次檢查和交流活動(dòng)，對(duì)自己的作品進(jìn)行不斷地修改和完善。通過任務(wù)驅(qū)動(dòng)教學(xué)法可以使學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)和制作的流程有一個(gè)全面的認(rèn)識(shí)，讓學(xué)生掌握系統(tǒng)的網(wǎng)頁開發(fā)流程，同時(shí)也有利于提高學(xué)生團(tuán)隊(duì)協(xié)作能力、創(chuàng)新能力、獨(dú)立解決問題的能力。

三、活動(dòng)探究教學(xué)法

活動(dòng)探究是高職《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)中重要的教學(xué)組成部分，有助于學(xué)生開展項(xiàng)目學(xué)習(xí)，在活動(dòng)探究過程中學(xué)生可以掌握到大量的知識(shí)內(nèi)容和技能技巧，能夠幫助學(xué)生在網(wǎng)頁制作和網(wǎng)站開發(fā)的過程中創(chuàng)作出更加優(yōu)秀的作品。所謂活動(dòng)探究教學(xué)法，就是指教師向?qū)W生提供定的資源和信息，由學(xué)生從已有的材料中進(jìn)行挖掘和拓展，讓學(xué)生對(duì)教學(xué)項(xiàng)目中的問題進(jìn)行主動(dòng)的探索和研究，從而促使學(xué)生構(gòu)建和完善自己的知識(shí)體系。此外，學(xué)生在進(jìn)行探索時(shí)，教師也要從旁進(jìn)行觀察和指導(dǎo)，對(duì)于學(xué)生不當(dāng)?shù)男袨橐枰约m正，對(duì)于做的好的學(xué)生給予表揚(yáng)和鼓勵(lì)。比如在設(shè)計(jì)網(wǎng)頁鏈接的過程中，有不少學(xué)生對(duì)外部文件與網(wǎng)頁內(nèi)的鏈接出現(xiàn)疑問，教師可以就這個(gè)問題對(duì)全體學(xué)生進(jìn)行示范和講解，一方面使得學(xué)生對(duì)所學(xué)有更充分的了解，另一方面保持學(xué)生的學(xué)習(xí)熱情和積極性，使學(xué)生能夠?qū)⒆髌吠暾闹谱鞒鰜恚瑥亩行У靥岣吒呗殹毒W(wǎng)頁設(shè)計(jì)與制作》的教學(xué)效率和學(xué)生的綜合素質(zhì)。

結(jié)語

篇7

>> Dreamweaver中的頁面跳轉(zhuǎn) 淺談JavaWeb編程中頁面跳轉(zhuǎn)與數(shù)據(jù)共享 ．NET架構(gòu)下頁面間跳轉(zhuǎn)及數(shù)據(jù)傳遞的實(shí)現(xiàn) 解析Dreamweaver中的層應(yīng)用 Dreamweaver中多種菜單樣式的實(shí)現(xiàn)方法 知識(shí)遷移在Dreamweaver教學(xué)中的實(shí)施 混合學(xué)習(xí)模式在DreamWeaver課程教學(xué)中的探究 淺談Dreamweaver在中職網(wǎng)頁制作教學(xué)中的應(yīng)用 多媒體課件制作中應(yīng)用Dreamweaver的探討 Web Form中的頁面處理 過濾加密頁面中的廣告 淺析網(wǎng)頁設(shè)計(jì)中的頁面布局 淺析頁面中Java與JavaScript腳本的區(qū)別 JSP技術(shù)在WEB頁面中的應(yīng)用 PHP網(wǎng)頁設(shè)計(jì)中SHTML頁面的應(yīng)用 淺談Session對(duì)象在用戶登錄頁面中的應(yīng)用 淺述網(wǎng)頁設(shè)計(jì)中的頁面布局技術(shù) 色彩在網(wǎng)站頁面設(shè)計(jì)中的應(yīng)用探討 淺談網(wǎng)頁設(shè)計(jì)中頁面布局的教學(xué) 淺談網(wǎng)頁設(shè)計(jì)與制作中的頁面布局 常見問題解答 當(dāng)前所在位置：和down.htm分別為上下兩個(gè)框架里面的網(wǎng)頁內(nèi)容，我們就可以在down.htm里嵌入音樂文件，而在up.htm里作為正常的網(wǎng)頁瀏覽，有如下鏈接，如圖2。

這種情況下有兩種鏈接要做，第一種就是從主頁跳轉(zhuǎn)到具體的頁面（如圖2），第二種就是如何返回到主頁面里（如圖3）。

4 結(jié)論

網(wǎng)頁之間的跳轉(zhuǎn)是網(wǎng)頁制作中的難點(diǎn)，本文就重點(diǎn)指出了兩種常見問題，一是網(wǎng)頁的自動(dòng)跳轉(zhuǎn)，二是在框架中的網(wǎng)頁跳轉(zhuǎn)問題，并對(duì)此給出解決辦法。

參考文獻(xiàn)：

[1]Dreamweaver MX擴(kuò)展.程憲寶.電腦知識(shí)與技術(shù)[J],2006(6):131-131,192.

[2]張繼光.Dreamweaver 8中文版.從入門到精通[M].人民郵電出版社.2007.

篇8

關(guān)鍵詞:高職院校;網(wǎng)頁設(shè)計(jì)與制作;教學(xué)改革;項(xiàng)目驅(qū)動(dòng)

中圖分類號(hào):G642文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1009-3044(2009)26-7562-02

Some Improvements about Homepage Design and Manufacture Course in Vocational Colleges

ZHOU Juan

(Hunan Vocational Institute of Safetyand Technology, Changsha 410151, China)

Abstract: Homepage Design and Manufacture is a highly practical course. According to the actual situation of vocational college students and the practical teaching experience I have, this article describes the teaching improvements from the aspects of the teaching objectives, teaching objects, teaching content and teaching methods and discusses how to cultivate the practical ability of students.

key words: vocational college; homepage design and manufacture; transformation in education; project-driven

《網(wǎng)頁設(shè)計(jì)與制作》課程是近幾年高職院校普遍開設(shè)的一門課程,它的實(shí)踐性非常強(qiáng),包含內(nèi)容非常豐富,隨時(shí)展不斷變化,且極具創(chuàng)造性,受到學(xué)生的歡迎。怎樣在有限的課堂教學(xué)中讓學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的技巧,培養(yǎng)他們的實(shí)際動(dòng)手能力,是教師們一直關(guān)注的。筆者在實(shí)際教學(xué)中一直在積極探索,就此結(jié)合自己教學(xué)經(jīng)驗(yàn)談?wù)剮c(diǎn)體會(huì)。

1 確定教學(xué)目標(biāo)

1.1 確定《網(wǎng)頁設(shè)計(jì)與制作》課程在整個(gè)專業(yè)課程體系中的位置

該門課程在高職院校中屬于職業(yè)素質(zhì)拓展課程,以計(jì)算機(jī)應(yīng)用專業(yè)為例,本課程在該專業(yè)課程體系中位于一個(gè)非常重要的位置,如圖1。

《計(jì)算機(jī)應(yīng)用基礎(chǔ)》、《C語言程序設(shè)計(jì)》作為它的先導(dǎo)課程,為它提供了必要的知識(shí)準(zhǔn)備,比如熟悉設(shè)計(jì)平臺(tái),了解文字基本操作等等,同時(shí)《網(wǎng)頁設(shè)計(jì)與制作》又為它的后續(xù)課程《動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)》、《javascript腳本語言》打下堅(jiān)實(shí)基礎(chǔ)。本課程的學(xué)習(xí)有助于學(xué)生學(xué)習(xí)本專業(yè)相關(guān)其它知識(shí),提高學(xué)生的動(dòng)手能力,提高學(xué)生將來從事實(shí)際工作的綜合素質(zhì)。

1.2 課程教育任務(wù)

通過調(diào)研,分析該課程今后面向的職業(yè)崗位群。學(xué)生將來主要面向企業(yè)、公司、事業(yè)單位和政府機(jī)關(guān)從事管理互聯(lián)網(wǎng)信息,網(wǎng)頁制作、網(wǎng)站設(shè)計(jì)、建設(shè)和維護(hù)工作。根據(jù)從事這些崗位要具備的知識(shí)、能力和素質(zhì)及專業(yè)人才培養(yǎng)目標(biāo),定制了本課程的教育任務(wù)。通過本課程的學(xué)習(xí),逐漸提高學(xué)生的審美能力,培養(yǎng)學(xué)生的動(dòng)手能力、創(chuàng)新能力、一定的溝通技巧和團(tuán)隊(duì)合作技巧。通過學(xué)習(xí)本課程,學(xué)生具備:1)網(wǎng)站規(guī)劃、創(chuàng)建及測試的能力;2)美化網(wǎng)頁能力;3)考取相關(guān)行業(yè)證書的能力。

2 區(qū)分教學(xué)對(duì)象

網(wǎng)頁設(shè)計(jì)與制作這門課程在我院電子商務(wù)、計(jì)算機(jī)相關(guān)專業(yè)都有開設(shè)。本課程包含的知識(shí)面非常廣:網(wǎng)頁基礎(chǔ)知識(shí)、CSS樣式表、Dreamweaver、flash 、Fireworks及HTML語言、 Javascript語言等。該課程對(duì)學(xué)生的動(dòng)手能力要求也較高,要求學(xué)生學(xué)完本課程后能以團(tuán)隊(duì)協(xié)作的方式進(jìn)行小型網(wǎng)站的開發(fā)?？紤]到教學(xué)對(duì)象來自不同的專業(yè),在課程設(shè)計(jì)時(shí)應(yīng)根據(jù)不同專業(yè)的人才培養(yǎng)目標(biāo)、各專業(yè)的特點(diǎn)、學(xué)生知識(shí)結(jié)構(gòu)的差異,在教學(xué)內(nèi)容的選取上要有區(qū)別,真正做到因材施教。比如計(jì)算機(jī)專業(yè)學(xué)生邏輯思維能力較強(qiáng),有一定的編程基礎(chǔ),教學(xué)側(cè)重網(wǎng)站開發(fā),通過課程學(xué)習(xí)學(xué)生能熟練運(yùn)用CSS樣式表及HTML語言,且能利用Javascript編寫一些網(wǎng)頁特效。而文科類學(xué)生對(duì)顏色、布局及構(gòu)圖較敏感,有一定圖像處理基礎(chǔ),對(duì)他們則側(cè)重網(wǎng)頁設(shè)計(jì)方面,通過本課程的學(xué)習(xí)學(xué)生能夠設(shè)計(jì)較美觀的頁面,能利用動(dòng)畫軟件創(chuàng)造生動(dòng)、活潑的頁面。

3 選取教學(xué)內(nèi)容

教學(xué)內(nèi)容應(yīng)能適應(yīng)行業(yè)技術(shù)的發(fā)展,選取以專項(xiàng)職業(yè)能力為導(dǎo)向,突出“學(xué)以致用”。在教學(xué)時(shí)應(yīng) “理論夠用,重在實(shí)踐”,不可過多的強(qiáng)調(diào)理論或使用過時(shí)的版本,否則學(xué)生容易產(chǎn)生厭學(xué)的情緒。

將網(wǎng)頁設(shè)計(jì)和制作中必須的知識(shí)和技能分為兩類:必修和選修,教學(xué)內(nèi)容按模塊設(shè)計(jì),將知識(shí)和技能分為四大模塊:網(wǎng)頁設(shè)計(jì)基礎(chǔ)模塊、網(wǎng)頁設(shè)計(jì)技術(shù)模塊、網(wǎng)頁美工模塊、產(chǎn)品開發(fā)模塊,每個(gè)模塊都有相應(yīng)的知識(shí)目標(biāo)和能力目標(biāo),可以根據(jù)不同專業(yè)的學(xué)時(shí)及學(xué)生水平靈活選取教學(xué)內(nèi)容。

4 改進(jìn)教學(xué)方法

4.1 項(xiàng)目驅(qū)動(dòng)教學(xué)

傳統(tǒng)的案例教學(xué)法通過一些零散的案例讓學(xué)生了解和掌握網(wǎng)頁設(shè)計(jì)技術(shù),這樣的方式學(xué)生學(xué)習(xí)的比較被動(dòng),他們通常過于專注某個(gè)案例制作步驟或網(wǎng)頁制作工具的操作,而忽視完整的網(wǎng)站開發(fā)與制作。而如果采用項(xiàng)目驅(qū)動(dòng)的專題教學(xué)模式則能較好解決這些問題。

“項(xiàng)目驅(qū)動(dòng)”是在研究教學(xué)大綱、課程內(nèi)容、教學(xué)對(duì)象的基礎(chǔ)上,選擇難度適中,知識(shí)覆蓋較廣的項(xiàng)目。項(xiàng)目應(yīng)作為一條主線貫穿整個(gè)課程,相關(guān)的學(xué)習(xí)活動(dòng)都圍繞這根主線進(jìn)行。項(xiàng)目驅(qū)動(dòng)教學(xué)突出特點(diǎn)是目標(biāo)明確、操作性強(qiáng)、生動(dòng)直觀,易于能力的培養(yǎng)。

針對(duì)本課程,先設(shè)計(jì)一個(gè)總項(xiàng)目 ,再根據(jù)循序漸進(jìn)的原則,分小項(xiàng)目進(jìn)行教學(xué) 。把總項(xiàng)目分成若干小項(xiàng)目,再把小項(xiàng)目分成不同的子項(xiàng)目,子項(xiàng)目再分解成步驟。 通常以子項(xiàng)目為教學(xué)單位,劃分層次如下:總項(xiàng)目小項(xiàng)目子項(xiàng)目步驟。例如,設(shè)計(jì)一個(gè)“暢想未來”的網(wǎng)站,這個(gè)總項(xiàng)目可以分解成多個(gè)小項(xiàng)目,單個(gè)頁面可作為一個(gè)小項(xiàng)目,而該小項(xiàng)目又可分為版面布局、導(dǎo)航條制作、圖片處理、動(dòng)畫效果等幾個(gè)子項(xiàng)目。對(duì)于子項(xiàng)目教學(xué)過程,可按圖2進(jìn)行:

在具體教學(xué)實(shí)踐中,可以讓學(xué)生組成項(xiàng)目小組,根據(jù)具體項(xiàng)目的開發(fā)流程細(xì)化的制定出項(xiàng)目進(jìn)度表,學(xué)生以小組為單位,分工合作完成。

以子項(xiàng)目為教學(xué)單位,教師可結(jié)合教學(xué)大綱,收集與設(shè)計(jì)符合開發(fā)進(jìn)度的教學(xué)專題。專題應(yīng)盡可能將課程大部分知識(shí)點(diǎn)覆蓋,由若干個(gè)教學(xué)案例組成,先易后難;專題與專題之間要有聯(lián)系,前后連貫,為完成一個(gè)完整的網(wǎng)站項(xiàng)目服務(wù)。例如,在項(xiàng)目進(jìn)度到網(wǎng)頁的排版與布局時(shí),筆者收集了大量的排版與布局的案例,以專題的形式講授如何利用表格、層、框架來制作流行的排版和布局模式,學(xué)生對(duì)于網(wǎng)頁的排版和布局有了更全面、深刻的認(rèn)識(shí),改變以往教師單純用知識(shí)點(diǎn)講解,學(xué)生學(xué)得比較零散的缺點(diǎn),有較好教學(xué)效果。

4.2 分層次教學(xué)

網(wǎng)頁設(shè)計(jì)與制作是一門實(shí)踐性很強(qiáng)的課程,學(xué)生的水平參差不齊。有些學(xué)生接受能力很強(qiáng),能快速掌握并理解教師所授知識(shí),并能在理解基礎(chǔ)上有所突破,而有的學(xué)生接受較慢,要通過不斷重復(fù)才能掌握,因此,要根據(jù)學(xué)生掌握水平及學(xué)生學(xué)習(xí)的興趣、智力水平、恒心等這因素些來區(qū)分學(xué)生層次,給不同層次的學(xué)生提出不同的目標(biāo)和要求,保持各個(gè)層次的學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)與制作的積極性。

分層次教學(xué)時(shí),需要注意幾點(diǎn):第一 不同層次的學(xué)生應(yīng)該有不同的教學(xué)目標(biāo),不能按同一目標(biāo)要求;第二 教學(xué)目標(biāo)要充分發(fā)揮學(xué)生的主體地位。對(duì)基礎(chǔ)比較差的學(xué)生,目標(biāo)重點(diǎn)在于克服他們由于畏懼困難而引起的厭學(xué)情緒,利用有限時(shí)間讓他們掌握最基本的操作;對(duì)一般學(xué)生,目標(biāo)重點(diǎn)在于調(diào)動(dòng)他們的學(xué)習(xí)積極性,使他們有新的發(fā)現(xiàn)和提高;對(duì)掌握較好學(xué)生,目標(biāo)重點(diǎn)是使他們零散的知識(shí)更加系統(tǒng)性,在原有的基礎(chǔ)上更好掌握這門課程;第三 對(duì)不同層次學(xué)生教學(xué)目標(biāo)不是機(jī)械不可變動(dòng)的。

分層次教學(xué)具體如何實(shí)施呢?

網(wǎng)頁設(shè)計(jì)與制作每周在機(jī)房上機(jī)實(shí)踐,分層次教學(xué)體現(xiàn)在對(duì)不同層次的學(xué)生安排不同的試驗(yàn)任務(wù),讓每個(gè)學(xué)生都有明確的任務(wù),在給定時(shí)間內(nèi)完成某些子項(xiàng)目。在具體教學(xué)過程中,可將這些子項(xiàng)目按由易到難分成不同的級(jí)別,不同層次的學(xué)生選擇不同難度級(jí)別的子項(xiàng)目,鼓勵(lì)學(xué)生在完成所選任務(wù)后嘗試去完成更高層次級(jí)別的任務(wù)。如何鼓勵(lì)學(xué)生能在完成自己能力范圍內(nèi)的子項(xiàng)目后向更高層次任務(wù)挑戰(zhàn)呢?教師可在上機(jī)指導(dǎo)過程中,做到前后聯(lián)系,對(duì)于學(xué)生每次的進(jìn)步,給予及時(shí)的鼓勵(lì);教師可將每次上機(jī)試驗(yàn)學(xué)生做出來的作品拷貝,建立文件夾分門別類存放,對(duì)于不同層次的學(xué)生的作品給予評(píng)定,并對(duì)優(yōu)秀學(xué)生和進(jìn)步學(xué)生給予一定的獎(jiǎng)勵(lì)。

在課堂教學(xué)中,分層次教學(xué)體現(xiàn)在對(duì)學(xué)生的提問與交流上。由于課堂是在多媒體教室中進(jìn)行,教師可從學(xué)生試驗(yàn)作品中選擇不同難度層次的有代表性的作品,將這些作品展示在大屏幕上。由于作品均出自同學(xué)之手,大家會(huì)有很強(qiáng)的好奇心和興趣,教師可根據(jù)這些作品激發(fā)學(xué)生的求知欲,由易到難,由淺入深,讓學(xué)生在緊湊又輕松愉快的氛圍中掌握網(wǎng)頁制作知識(shí),讓大家體會(huì)到知識(shí)變能力的無窮樂趣,樹立大家學(xué)習(xí)的信心。

4.3 專題討論

雖然教師在設(shè)計(jì)項(xiàng)目進(jìn)行專題教學(xué)時(shí)力求涵蓋大多數(shù)知識(shí)點(diǎn),但由于網(wǎng)頁設(shè)計(jì)與制作技術(shù)發(fā)展迅速及教師個(gè)人知識(shí)結(jié)構(gòu)和藝術(shù)修養(yǎng)的局限,總有些遺漏和不足的地方。因此,教師應(yīng)最大程度的利用網(wǎng)絡(luò)資源,彌補(bǔ)課堂教學(xué)的不足。比如給學(xué)生提供一些視頻,介紹一些優(yōu)秀的網(wǎng)站,開闊學(xué)生視野,增加他們的感性認(rèn)識(shí)?？梢越M織學(xué)生按專題討論分析這些優(yōu)秀網(wǎng)站的創(chuàng)意、特點(diǎn)及使用的技術(shù),在討論中提高他們分析問題和解決問題的能力。

5 改革考核方式

網(wǎng)頁設(shè)計(jì)與制作傳統(tǒng)的考核方式是筆試+機(jī)試或上交作品的方式,這兩種考核方式各有利弊。筆試+機(jī)試的考核方式可以了解學(xué)生對(duì)網(wǎng)頁設(shè)計(jì)與制作理論知識(shí)掌握程度和對(duì)工具使用的熟練程度,但不能反應(yīng)學(xué)生的綜合應(yīng)用能力;上交作品的考核方式能反映學(xué)生的動(dòng)手能力,但反映不了理論水平且過程無法監(jiān)控。筆者采用平時(shí)成績(20%)+作品(20%)+分階段考核(60%)方式,盡量使考試做到公平、可控,能全面真實(shí)的反映學(xué)生的水平。平時(shí)成績主要是學(xué)生的到課情況、試驗(yàn)報(bào)告填寫情況、實(shí)訓(xùn)設(shè)備保存完好情況等組成;分階段考核方式主要是根據(jù)不同階段學(xué)生子項(xiàng)目完成情況及最后期末機(jī)試組成,學(xué)生每次上機(jī)實(shí)踐的作品均可用“極域電子教室”軟件提交保存,這樣每次學(xué)生子項(xiàng)目的完成情況教師均可查看,且能根據(jù)完成情況給定相應(yīng)的成績,這樣各個(gè)階段均可考核,彌補(bǔ)了只有最后一次上機(jī)考試不能全面反映學(xué)生真實(shí)水平的不足;學(xué)生最后上交的作品除了有作品外,還要有相應(yīng)的日志,在什么階段完成什么工作,用到哪些技術(shù),如何實(shí)現(xiàn)某些效果等,而最后成績的評(píng)定,主要通過專業(yè)教師與行業(yè)專家共同完成。

6 結(jié)束語

在網(wǎng)頁設(shè)計(jì)與制作的教學(xué)過程中,依據(jù)教學(xué)目標(biāo),針對(duì)不同的教學(xué)對(duì)象,選擇相應(yīng)的教學(xué)內(nèi)容,采用適當(dāng)?shù)慕虒W(xué)模式和考核方法,注重課堂的互動(dòng),激發(fā)學(xué)生的求知欲、調(diào)動(dòng)學(xué)生學(xué)習(xí)的主動(dòng)性,從而提高學(xué)生分析問題解決問題能力及動(dòng)手能力,能取得較好的教學(xué)效果。

參考文獻(xiàn)

[1] 安穎蓮.網(wǎng)頁設(shè)計(jì)與制作課程教學(xué)設(shè)計(jì)與實(shí)踐[J].中國教育信息化,2007(9).

篇9

在設(shè)計(jì)網(wǎng)頁時(shí)加入適當(dāng)?shù)膱D像，是網(wǎng)頁設(shè)計(jì)者經(jīng)常地操作步驟。Dreamwaver是網(wǎng)站設(shè)計(jì)三劍客之一，是制作網(wǎng)站較為常用的工具軟件，在Dreamwa－ver文檔窗口中添加圖像的方法是：

（1）考慮好在什么位置插入圖像；

（2）在菜單欄通過點(diǎn)擊“插入”菜單欄中的“圖像”按鈕加入圖像。

（3）在打開的對(duì)話框頁面上點(diǎn)擊“選擇文件”對(duì)話框，在設(shè)置對(duì)話框相應(yīng)位置設(shè)置參數(shù)項(xiàng)。

（4）設(shè)置完參數(shù)后再回到“插入圖像”對(duì)話框界面，單擊“確定”按鈕。圖像就被導(dǎo)入，圖像的特性通過屬性檢查器設(shè)置，圖像屬性很多，用戶需要關(guān)注的是源文件、替換和鏈接3項(xiàng)。

通過HTML的語言代碼可以實(shí)現(xiàn)上述步驟同樣的插入圖像功能：熟練的設(shè)計(jì)者對(duì)代碼特熟悉，使用代碼插入更方便快捷。IMG標(biāo)簽是圖像標(biāo)簽，寫法是：<imgsrc=“圖片位置”>圖片的位置一般我們采用相對(duì)路徑，這個(gè)標(biāo)簽比較特殊，它只有開始標(biāo)簽，不像其它標(biāo)簽都是成對(duì)出現(xiàn)的。

2網(wǎng)頁設(shè)計(jì)中的2種特殊應(yīng)用

（1）由鼠標(biāo)移動(dòng)觸發(fā)圖像變換處理：移動(dòng)鼠標(biāo)時(shí)，把鼠標(biāo)焦點(diǎn)放到網(wǎng)頁上的一個(gè)圖片上，此刻顯示了另一幅圖片，當(dāng)鼠標(biāo)焦點(diǎn)離開這幅圖片時(shí)，圖片恢復(fù)為最先顯示的圖片，這2幅圖片的切換通過加入到鼠標(biāo)移動(dòng)功能函數(shù)時(shí)就可以實(shí)現(xiàn)，前提是準(zhǔn)備好要切換的2幅圖片，而且圖片大小一致，通常設(shè)計(jì)者使用Photoshop技術(shù)處理圖像。

（2）在互聯(lián)網(wǎng)上制作相冊：博客通常使用好多的相冊，這就是多幅圖片在按照一定的設(shè)定條件進(jìn)行有序切換，瀏覽者使用鼠標(biāo)點(diǎn)擊其中一幅圖片時(shí)，通過點(diǎn)擊小圖，能馬上將對(duì)應(yīng)的大圖調(diào)出，這里的實(shí)現(xiàn)原理就是事先將要顯示的圖片存放在指定文件夾中，在程序代碼中設(shè)定定時(shí)或按其他方式來觸發(fā)圖片的切換。通常設(shè)計(jì)者使用Fireworks技術(shù)處理圖像。

3圖像處理在網(wǎng)頁設(shè)計(jì)中的應(yīng)用解析

3.1網(wǎng)頁設(shè)計(jì)中使用圖像的意義

（1）做設(shè)計(jì)網(wǎng)站的標(biāo)志（LOGO）。任何網(wǎng)站的誕生都有其目的性，網(wǎng)頁的LOGO是網(wǎng)站的點(diǎn)睛之筆，非常關(guān)鍵。我們一說到LOGO,馬上就能想到一些在人們心中有認(rèn)可度的品牌形象，這就是品牌的意義，LOGO有同樣的功效。像SINA的LOGO,不用看到字就可以認(rèn)出是新浪網(wǎng)。LOGO一般是經(jīng)過設(shè)計(jì)師精心設(shè)計(jì)制作，藝術(shù)性和功能性并存的網(wǎng)站品牌形象，好的LOGO可以讓人們喜聞樂見，如今優(yōu)秀的LO－GO憑借其獨(dú)特的文化理念、獨(dú)特創(chuàng)新的藝術(shù)特色給瀏覽者以美的沖擊，帶給人們高度的享受和信賴。

（2）網(wǎng)頁背景圖。網(wǎng)頁基本形式是背景烘托主題，背景都是有象征和內(nèi)涵的圖像，背景圖像與網(wǎng)頁文字互相映襯，烘托主題并從另一層面突出主題，如今沒有圖像的網(wǎng)頁是不成功的網(wǎng)頁設(shè)計(jì)，缺乏感染力。

（3）關(guān)鍵圖。有些網(wǎng)頁用醒目的圖像來宣傳該網(wǎng)站的主題，這些圖像的目的是讓瀏覽者看到圖片就知道該網(wǎng)站的宣傳內(nèi)容，這種關(guān)鍵圖像是整個(gè)頁面最突出的內(nèi)容，不用文字信息而是通過大圖來把文字要闡述的內(nèi)容映射到圖像上，這種傳達(dá)信息的方式更原始，更有感官?zèng)_擊力，而且直觀。

3.2網(wǎng)頁圖像處理的技巧

3.2.1圖像的尺寸

圖像的尺寸與網(wǎng)頁設(shè)計(jì)目的相關(guān)，尺寸大的圖像涵蓋的內(nèi)容豐富，能夠更加細(xì)的傳達(dá)圖像信息，讓瀏覽者注意圖像中醒目的內(nèi)容元素。尺寸小的圖像簡單，有個(gè)性，對(duì)于主題表達(dá)起到襯托的作用。網(wǎng)頁設(shè)計(jì)中大小圖像結(jié)合文字共同把設(shè)計(jì)主題展示出來，設(shè)計(jì)者根據(jù)設(shè)計(jì)需求分析網(wǎng)頁設(shè)計(jì)的主標(biāo)題和副標(biāo)題，讓主標(biāo)題更突出，更惹眼，讓附屬圖像與主圖內(nèi)容相得益彰，共同達(dá)到設(shè)計(jì)效果。

3.2.2圖像的外形

圖像設(shè)計(jì)向多元化方向發(fā)展，不同類型的圖像都有各自的特色，我們看到圓形的圖像時(shí)就覺得不呆板、親切可人；而不規(guī)則的圖像動(dòng)態(tài)十足，有活力；方型圖像則給人中規(guī)中矩的感覺。網(wǎng)頁設(shè)計(jì)目的不同，對(duì)各種類型的網(wǎng)站需要多種形狀的圖像烘托。

（1）方形圖像。方型是最常見的，也是我們生活中使用最多的形狀。在一些嚴(yán)肅的網(wǎng)站比如政務(wù)網(wǎng)等官方，適宜利用方型的圖像或主圖像來傳遞給瀏覽者正規(guī)、嚴(yán)肅的信息內(nèi)容。方型的穩(wěn)重帶給瀏覽者可信度高、理性的思考，能把整體網(wǎng)頁的風(fēng)格襯托出來。

（2）菱形圖像。菱形是方型的靈動(dòng)，沒有方型的凝重、嚴(yán)肅，使網(wǎng)頁的美感增加。

（3）圓形圖像。圓形圖像有柔和曲線，讓瀏覽者產(chǎn)生充實(shí)的感覺，圓滿的外型把自由和隨意傳遞給瀏覽者。

（4）三角形圖像。三角形圖像在網(wǎng)頁中能夠把動(dòng)感有個(gè)性的內(nèi)涵闡釋給瀏覽者，網(wǎng)頁變得生命力十足。

（5）個(gè)性化圖像。此類圖像不是自然界的常規(guī)圖型，經(jīng)過創(chuàng)造者技術(shù)加工和個(gè)性化處理，把圖像加工成自由靈活的創(chuàng)意圖像，圖像沒有規(guī)則的形狀，沒有統(tǒng)一的配色，自然而又隨性。圖像與文字自然規(guī)整的結(jié)合在網(wǎng)頁頁面上，將主題效果突出的顯示出來。

4結(jié)語

篇10

【關(guān)鍵詞】Flash 動(dòng)態(tài)網(wǎng)站 設(shè)計(jì) 要求

互聯(lián)網(wǎng)（Internet）的出現(xiàn)，實(shí)現(xiàn)了人類地球村的夢想，但宛如一個(gè)新生的嬰兒，一出現(xiàn)就有其與生俱來的缺點(diǎn)：傳統(tǒng)的靜態(tài)（HTML）網(wǎng)頁，供用戶查閱的信息只能是文字和靜止圖像。阻礙了用戶體驗(yàn)和感受到網(wǎng)絡(luò)上多媒體的互動(dòng)效果。

Flash動(dòng)態(tài)網(wǎng)站是針對(duì)多媒體網(wǎng)頁設(shè)計(jì)脫穎而出的一個(gè)新型解決方案。它使用矢量繪制圖像，它的最終文件可以以“流式”的輸出在網(wǎng)頁中播放。Flash動(dòng)態(tài)網(wǎng)站動(dòng)畫文件小，互動(dòng)功能強(qiáng)。它給網(wǎng)頁設(shè)計(jì)帶來的無限生機(jī)。

一、現(xiàn)代網(wǎng)頁設(shè)計(jì)的目的和要求

隨著互聯(lián)網(wǎng)知識(shí)的普及，讓更多人對(duì)網(wǎng)站設(shè)計(jì)有了一定了解。但很多人仍舊不十分明確的了解網(wǎng)站能做什么，建設(shè)網(wǎng)站的目的是什么，要做怎樣的網(wǎng)站，能從網(wǎng)站中得到什么。隱患最深的是，大多數(shù)企業(yè)網(wǎng)站的策劃和運(yùn)作都存在問題，在客戶的概念里，這樣的東西就是網(wǎng)站了。如果這樣的網(wǎng)站無法給客戶帶來直接或間接“好處”，那么網(wǎng)頁設(shè)計(jì)就成了沒有任何意義的工作?，F(xiàn)代網(wǎng)頁設(shè)計(jì)的目的和要求到底是什么呢？一句話：互聯(lián)網(wǎng)要給企業(yè)帶來利潤。

二、Flash動(dòng)態(tài)網(wǎng)頁發(fā)展的現(xiàn)狀及優(yōu)勢

1.現(xiàn)狀及趨勢

Flash動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)從業(yè)人員相當(dāng)少，行業(yè)缺口很大。

在國外，眾多大公司如：IBM、 Shell、 Hp、 Sony等爭相用以加強(qiáng)自己公司主頁的形象和更強(qiáng)大的互動(dòng)功能。而國內(nèi)的動(dòng)態(tài)網(wǎng)站發(fā)展相對(duì)較慢。

由于網(wǎng)絡(luò)帶寬的不斷提高，F(xiàn)lash動(dòng)態(tài)網(wǎng)頁以其具備的聲音、動(dòng)態(tài)圖像等多媒體優(yōu)勢，會(huì)在不遠(yuǎn)的將來完全替代靜態(tài)（HTML）網(wǎng)頁。

2.優(yōu)勢

（1）更加專業(yè)、漂亮的設(shè)計(jì)：Flash動(dòng)態(tài)網(wǎng)頁有專業(yè)的設(shè)計(jì)工具，也可導(dǎo)入用其他點(diǎn)陣和矢量繪圖軟件繪制的專業(yè)級(jí)圖形，并生成SWF格式，通過網(wǎng)頁瀏覽器瀏覽和播放。

（2）靈活性：有完美的、全面的網(wǎng)絡(luò)無縫接口設(shè)計(jì)工具，利用它可以創(chuàng)造全屏的動(dòng)畫，導(dǎo)航按鈕、地圖、動(dòng)畫按鈕、圖形及廣告條。另外，可以自動(dòng)生成數(shù)據(jù)引擎以及基于服務(wù)器的圖形和動(dòng)畫，可以創(chuàng)建圖形模版，該模版將在以后由服務(wù)器自動(dòng)更新數(shù)據(jù)內(nèi)容，這樣就將專業(yè)的動(dòng)畫設(shè)計(jì)和服務(wù)器的靈活性有機(jī)地結(jié)合起來。

（3）快速性：邊下載邊播放，F(xiàn)lash動(dòng)態(tài)網(wǎng)頁以“流”的方式打破了帶寬的局限，即使是在網(wǎng)絡(luò)狀況很差的時(shí)候也無需長時(shí)間等待。

（4）壓縮技術(shù)：使用矢量技術(shù)使得產(chǎn)生的網(wǎng)頁文件非常小，即使當(dāng)網(wǎng)頁在全屏幕播放時(shí)也是如此。同時(shí)Flash動(dòng)態(tài)網(wǎng)頁提供的Shockwave Flash插件也非常小，小于170KB。

（5）交互性：任何的圖形和動(dòng)畫都能變成按鈕，最大化的滿足網(wǎng)頁設(shè)計(jì)者的新想法、新創(chuàng)意。Flash動(dòng)態(tài)網(wǎng)頁是在網(wǎng)絡(luò)上創(chuàng)建交互性多媒體的最先進(jìn)的技術(shù)。

（6）通用性：支持多種播放標(biāo)準(zhǔn)和平臺(tái)，包括ActiveX、Glf、animated Gif、RealPlayer、網(wǎng)絡(luò)在線電視以及更多的平臺(tái)。

三、Flash動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)要求

1．網(wǎng)頁形式與設(shè)計(jì)

（1）導(dǎo)航菜單設(shè)計(jì)

導(dǎo)航菜單設(shè)計(jì)是Flash動(dòng)態(tài)網(wǎng)頁瀏覽的基礎(chǔ)。簡潔、有效的導(dǎo)航菜單，可以使瀏覽者迅速而高效的找到所需要的信息。導(dǎo)航的形式有側(cè)邊式、上端式、懸浮式、隱藏式等。導(dǎo)航的藝術(shù)性與可用性是具有藝術(shù)美感的導(dǎo)航會(huì)使瀏覽者的瀏覽過程變得豐富而富有趣味。導(dǎo)航菜單的設(shè)計(jì)還要注意簡潔，易用。設(shè)計(jì)導(dǎo)航菜單的時(shí)候，可以假如一些小聲音、小動(dòng)畫來豐富瀏覽體驗(yàn)。

（2）網(wǎng)頁版式設(shè)計(jì)及風(fēng)格

Flash動(dòng)態(tài)網(wǎng)頁往往包含的信息量很大，元素也很多。但由于Flash動(dòng)態(tài)網(wǎng)頁的超鏈接特征，使它的空間可以無限擴(kuò)展。設(shè)計(jì)者通常把產(chǎn)品或服務(wù)的不同賣點(diǎn)分別集中在不同的路徑之中，在細(xì)化的動(dòng)態(tài)分頁中可以根據(jù)次主題的不同，對(duì)各個(gè)構(gòu)成元素的空間進(jìn)行多樣化安排。

Flash動(dòng)態(tài)網(wǎng)頁上的三維空間是一個(gè)假想空間，它是由無數(shù)個(gè)具體的二維平面空間組成的虛擬世界。這些二維的平面空間就是網(wǎng)頁。二維平面的空間是借助各個(gè)構(gòu)成元素的比例關(guān)系、位置關(guān)系以及動(dòng)靜變化等空間因素表現(xiàn)出來的。各個(gè)元素的形象的彎曲變化、大小變化、色彩變化、位置的前后疊壓、紋理的漸變、元素之間清晰與模糊的對(duì)照以及透視法的應(yīng)用、疏密的變化、矛盾空間等所產(chǎn)生的視覺效果都不相同，都能豐富平面的視覺深度，使之產(chǎn)生富有彈性層次的空間效果。空間設(shè)計(jì)在作用于瀏覽者的視覺感受的同時(shí)，也產(chǎn)生不同的心理感受，增加畫面的注目率。一般政府類和商業(yè)類的網(wǎng)站的空間安排往往注重條理化，分層分級(jí)的簡潔明快；媒體類以及個(gè)人類網(wǎng)站則追求時(shí)尚的或出人意料的、或神秘的、或非常態(tài)的個(gè)性化空間效果。

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

Flash動(dòng)態(tài)網(wǎng)頁色彩搭配既是一項(xiàng)技術(shù)性工作，同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。網(wǎng)頁設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺，避免采用純度很高的單一色彩，這樣容易造成視覺疲勞。

一個(gè)頁面的色彩設(shè)計(jì)盡量不要超過4種色彩，用太多的色彩讓人沒有方向，沒有側(cè)重。當(dāng)主題色確定好以后，考慮其它配色時(shí)，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。另外哪種因素占主要地位，是明度，純度還是色相。

2．Flash Action——?jiǎng)討B(tài)網(wǎng)站的魔力

Flash Action已經(jīng)成為了重要的設(shè)計(jì)輔助手段，很多意想不到的動(dòng)態(tài)效果、實(shí)時(shí)計(jì)算都是由Action來完成，靈活運(yùn)用Flash Action會(huì)使你的動(dòng)態(tài)網(wǎng)站設(shè)計(jì)達(dá)到“質(zhì)”的飛躍。

3．優(yōu)化動(dòng)態(tài)網(wǎng)站

在Flash動(dòng)態(tài)網(wǎng)站的設(shè)計(jì)過程中，合理運(yùn)用嵌套技巧，會(huì)使設(shè)計(jì)效果事半功倍。在當(dāng)前的網(wǎng)絡(luò)狀況下，使動(dòng)態(tài)網(wǎng)站的文件盡可能的縮小，對(duì)于減輕瀏覽者等待的“厭煩心理”是十分有效的，從而培養(yǎng)更多的網(wǎng)站瀏覽用戶群。

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)作為一個(gè)新興的網(wǎng)頁設(shè)計(jì)手段，在信息極度豐富、網(wǎng)絡(luò)帶寬不斷提高的當(dāng)代，已經(jīng)成為網(wǎng)頁設(shè)計(jì)的未來。我們也不斷看到，動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)由于具備了多方面的接口優(yōu)勢，越來越成為數(shù)碼設(shè)計(jì)中涉及領(lǐng)域最廣、應(yīng)用項(xiàng)目最多、就業(yè)前景廣闊的設(shè)計(jì)藝術(shù)。

雖然現(xiàn)在的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)的現(xiàn)狀有吞沒設(shè)計(jì)者個(gè)性的趨勢，但是同樣這個(gè)時(shí)代也是一個(gè)追求形式上的創(chuàng)新和開拓的時(shí)代。一個(gè)勇敢的同傳統(tǒng)勢力、同形式主義相抗衡的時(shí)代。每一個(gè)有理想有抱負(fù)的設(shè)計(jì)者都有理由在這樣的狀況下運(yùn)用自己的能力，開辟出一片新的網(wǎng)頁設(shè)計(jì)道路。如何使中國的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)水平提高是擺在很多網(wǎng)頁設(shè)計(jì)者面前的問題。

參考文獻(xiàn)