第一篇：網(wǎng)頁(yè)(站)設(shè)計(jì)中九個(gè)心理學(xué)的建議

網(wǎng)頁(yè)（站）設(shè)計(jì)中九個(gè)心理學(xué)的建議

1．建立信任關(guān)系

要你的訪客做你所想要他們做的，首先你得跟訪客建立信任關(guān)系。信任關(guān)系建立并不是件容易的事，尤其是這個(gè)騙子橫行的時(shí)代，讓人討厭的人在網(wǎng)絡(luò)哪個(gè)角落都有一大把。那些對(duì)網(wǎng)絡(luò)還太熟悉的用戶，如果誰(shuí)問(wèn)他們一些個(gè)人信息都會(huì)變得十分敏感，盡管這些信息對(duì)網(wǎng)站工作是十分需要的。作為網(wǎng)站或網(wǎng)頁(yè)設(shè)計(jì)師，往往忽略自己已經(jīng)是習(xí)慣了網(wǎng)上交易。但是對(duì)于我們的客戶，還有他們的客戶，互聯(lián)網(wǎng)仍然是一個(gè)他們正要進(jìn)入的很大很可怕的黑洞。所以要使你的網(wǎng)站即使就是一般用戶都覺(jué)得更值得信賴。創(chuàng)建一個(gè)使訪客用戶安心的網(wǎng)站，就意味著他們很可能會(huì)注冊(cè)一個(gè)賬戶，并且購(gòu)買(mǎi)產(chǎn)品，或者用其他方式和你做生意。研究表明這些是可以通過(guò)網(wǎng)站設(shè)計(jì)和語(yǔ)言設(shè)計(jì)來(lái)達(dá)到或?qū)崿F(xiàn)的。

2．熟悉和識(shí)別模式

網(wǎng)站或網(wǎng)頁(yè)設(shè)計(jì)心理學(xué)認(rèn)為，當(dāng)一個(gè)用戶訪問(wèn)網(wǎng)站的某個(gè)頁(yè)面，一定是有某些東西是他們想馬上看到的，不管登錄的是一個(gè)什么網(wǎng)站。如果他們沒(méi)有看到預(yù)期的東西，他們會(huì)覺(jué)得亂七八糟毫無(wú)意義，這個(gè)網(wǎng)站不可靠。當(dāng)訪客來(lái)到一個(gè)網(wǎng)站，對(duì)網(wǎng)站的期待主要有兩點(diǎn)，一是來(lái)訪的目標(biāo)內(nèi)容（這可能是某些主題信息上看到在售的某個(gè)漂亮的產(chǎn)品），二是要有針對(duì)性的導(dǎo)航。雖然標(biāo)簽可以幫助辨識(shí)的目的，設(shè)計(jì)還應(yīng)該補(bǔ)充和加強(qiáng)這一消息。例如，你正在設(shè)計(jì)一個(gè)環(huán)境主題的博客，但你的設(shè)計(jì)看起來(lái)黑色和寂靜又陰沉，并在頁(yè)頭一個(gè)夕陽(yáng)西下的城市天際線，這樣會(huì)很不好，甚至沒(méi)有正確的暗示一下這個(gè)網(wǎng)站是干什么的。但如果設(shè)計(jì)的網(wǎng)站看起來(lái)很干凈很現(xiàn)代，有些綠色和自然的口號(hào)，就會(huì)給人一個(gè)深刻的印象，這是環(huán)境保護(hù)主題的博客。另外人們期待博文放在博客的首頁(yè)，期望電子商務(wù)網(wǎng)站的頭版都放產(chǎn)品。對(duì)于任何網(wǎng)站，人人都期望在超過(guò)了幾個(gè)深度的頁(yè)面便會(huì)提供一個(gè)搜索功能。而且在大多數(shù)情況下，人們還期望有“關(guān)于我們”和“聯(lián)系我們”的頁(yè)面內(nèi)容。

3．網(wǎng)絡(luò)上的品牌符號(hào)要統(tǒng)一

除了大多數(shù)訪客希望看到一個(gè)網(wǎng)站所必備的基本要素，還應(yīng)該有些標(biāo)識(shí)吸引用戶跟你公司要相聯(lián)系。想想你設(shè)計(jì)的一些線下的促銷(xiāo)宣傳單的顏色，這些顏色也應(yīng)該某種程度上融入你的網(wǎng)站，即使它只是在標(biāo)題圖片或者一些標(biāo)識(shí)口號(hào)的顏色。就像你在宣傳資料上印有Logo一樣，在網(wǎng)站上你也要同樣的呈現(xiàn)。然而這個(gè)基本的事情，很多企業(yè)往往忽略了這種線上線下的一致性，這樣就失去了品牌標(biāo)識(shí)傳播的機(jī)會(huì)。

4．心理激發(fā)

心理和情感激發(fā)是鼓勵(lì)用戶付諸行動(dòng)一個(gè)的寶貴工具。激發(fā)包括像內(nèi)疚和擔(dān)心的這樣的情緒，當(dāng)然還包括吸引人的那種歸屬感和人的價(jià)值觀念認(rèn)可。在網(wǎng)站或網(wǎng)頁(yè)設(shè)計(jì)中結(jié)合激勵(lì)性情緒的通常做法是網(wǎng)站上的廣告語(yǔ)言，再加入一些圖形元素作為輔助支持，使用圖片和圖表以加強(qiáng)激勵(lì)效應(yīng)。

5．運(yùn)用圖像強(qiáng)化概念

在網(wǎng)站設(shè)計(jì)上使用的圖片既會(huì)幫助也會(huì)混淆你的訪客。一個(gè)精心挑選的圖片可以令你訪客心領(lǐng)神會(huì)，了解你的意圖。如果選擇不慎，甚至?xí)屇愕脑L客很抓狂，讓他們感覺(jué)到又回到了亂七八糟的黑暗時(shí)代。抽象的圖像有時(shí)也有意想不到的效果，不過(guò)請(qǐng)小心使用，確保放在那里有它的意義。有時(shí)一個(gè)抽象的圖形在不同的訪客那里會(huì)有不同的解讀，或?qū)?huì)完全誤解原本的含義。

6．依據(jù)閱讀模式設(shè)計(jì)內(nèi)容

人們趨與按照“Z”字形瀏覽一個(gè)網(wǎng)站的模式，從頂部開(kāi)始往左，最后到達(dá)屏幕右下角。作為一個(gè)設(shè)計(jì)師，你應(yīng)該努力地在此閱讀模式下拿捏好那些最重要的內(nèi)容放哪里最好。大多數(shù)網(wǎng)站都把Logo放到左上角，道理就在于此。在此閱讀區(qū)放置一些不相關(guān)的信息，訪客離開(kāi)之前還沒(méi)有找到他想要的信息，他可能會(huì)認(rèn)為這不是他要找的網(wǎng)站。

7．確保每頁(yè)要有焦點(diǎn)

網(wǎng)站上的每個(gè)頁(yè)面都應(yīng)該有一個(gè)焦點(diǎn)，這是訪問(wèn)這個(gè)頁(yè)面的目的，且不管這個(gè)頁(yè)面是展示產(chǎn)品，還是介紹公司，還是最新的訊息。設(shè)計(jì)的時(shí)候需要把每個(gè)頁(yè)面重點(diǎn)內(nèi)容進(jìn)行強(qiáng)調(diào)。每一頁(yè)的重點(diǎn)也應(yīng)立即顯現(xiàn)出來(lái)，讓訪客知道他們?cè)诳词裁础３司W(wǎng)頁(yè)本身的內(nèi)容，還應(yīng)該通過(guò)在導(dǎo)航線索或通標(biāo)題來(lái)強(qiáng)化。一個(gè)不成熟的網(wǎng)站最大特點(diǎn)就是總是在每一頁(yè)上放太多的信息。其實(shí)不要害怕在網(wǎng)頁(yè)上的留空白，每個(gè)頁(yè)面上有明確的突出的重點(diǎn)并沒(méi)什么好擔(dān)心的。

8．顏色的心理學(xué)效應(yīng)

顏色的心理學(xué)效應(yīng)是設(shè)計(jì)心理學(xué)里面最復(fù)雜的主題。在網(wǎng)站設(shè)計(jì)時(shí)使用的顏色對(duì)你的訪客來(lái)說(shuō)有很大的影響，務(wù)必確保所使用的顏色可以加強(qiáng)信息和圖片所要表示的意義。下面列出顏色和它們的基本含義清單。

紅色：火熱和激情，可以代表都愛(ài)和憤怒。

橙色：具有紅色和黃色的屬性?？梢耘c能源和溫暖相關(guān)。它比紅色更冷靜，更愉快。

黃色：溫暖，愉快，幸福的顏色。它可以表示喜悅或膽怯。

綠色：自然，成長(zhǎng)，和新生的標(biāo)志。按照同樣的道理，綠色，有時(shí)代表很嫩經(jīng)驗(yàn)不足。在另一面，綠色，有時(shí)候是因?yàn)榱w慕或嫉妒。

藍(lán)色：平靜的，冷靜的，但使用太多可以令人感到消沉。往往與企業(yè)形象關(guān)聯(lián)。紫色/紫羅蘭：與貴族和財(cái)富的關(guān)系源遠(yuǎn)流長(zhǎng)，也是一種與精神相關(guān)的顏色，可以有創(chuàng)造性的表意。

黑色：像變色龍，它可以是保守或前衛(wèi)，傳統(tǒng)或現(xiàn)代的，它還可以神秘和性感或常規(guī)和安全，這取決于怎么使用以及周?chē)h(huán)境。

白色：代表著純潔與清白，十分容易與其他顏色搭配。

灰色：中性的，平衡的。灰色是保守的和復(fù)雜的，但也可以看作是變化無(wú)常的。棕色：一個(gè)健康和務(wù)實(shí)的顏色，表示的穩(wěn)定性和可靠性。

9．設(shè)置留白和喘息機(jī)會(huì)boxuelun.comjnxdx.com yxhjchina.comqlgoose.com mgsanalyn.netmgsnl.com

bjbhzhy.comcf100u.com zuoxuanroujian3.comjnforever.com cqkendo.com tantea.org2380664.comheshou.net sunny-lighting.net fjyougo.com ljayhj.com zglvjing.commimasjo.comft-sj.com

如果訪客看到一個(gè)頁(yè)面充滿內(nèi)容，他們會(huì)感到不知所措或壓抑。這可能是網(wǎng)頁(yè)讓人感到過(guò)于隨意和混亂。訪客感到好像他們不知道從哪里開(kāi)始，這意味著他們可能會(huì)跳出你網(wǎng)站到其他地方喘口氣。網(wǎng)站上的合理留些空白空間，引導(dǎo)你的訪客注意他們要找的信息。通過(guò)結(jié)合留白和適當(dāng)比例的風(fēng)格和元素，你可以暗示鼓勵(lì)你的訪客關(guān)注特定的東西，并可能有所行動(dòng)。

第二篇：網(wǎng)頁(yè)設(shè)計(jì)的幾點(diǎn)小建議

淺談《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)的幾點(diǎn)小建議

摘要：《網(wǎng)頁(yè)設(shè)計(jì)與制作》是一門(mén)實(shí)踐性、操作性、綜合性很強(qiáng)的課程,對(duì)學(xué)生動(dòng)手能力的要求很高。為了提高《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的教學(xué)效果，必須不斷改革與充實(shí)教學(xué)內(nèi)容，注重突出人才培養(yǎng)的實(shí)踐性、應(yīng)用性。改革教學(xué)方法，培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力，使學(xué)生能夠運(yùn)用所學(xué)的知識(shí)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)與制作、教學(xué)改革、教學(xué)方法

1、明確課程特點(diǎn)，把握教學(xué)目標(biāo)

在網(wǎng)絡(luò)技術(shù)迅速發(fā)展的今天,網(wǎng)頁(yè)制作已成為當(dāng)今社會(huì)上一種比較熱門(mén)的技術(shù)。《網(wǎng)頁(yè)設(shè)計(jì)與制作》是職業(yè)院校計(jì)算機(jī)專(zhuān)業(yè)的專(zhuān)業(yè)基礎(chǔ)課,與傳統(tǒng)的其他學(xué)科相比具有鮮明的自身特點(diǎn)：1)具有很強(qiáng)的操作性和綜合實(shí)踐性,特別強(qiáng)調(diào)學(xué)生的操作能力和學(xué)以致用的綜合實(shí)踐能力。2)理論教學(xué)服務(wù)于實(shí)踐教學(xué)，實(shí)踐教學(xué)反過(guò)來(lái)又作用于理論教學(xué)，任何一個(gè)細(xì)節(jié)都是為整體服務(wù)的，在教學(xué)過(guò)程中常有學(xué)生反映，上課能看懂、理解，但課后什么都忘了，做實(shí)驗(yàn)的時(shí)候還得翻開(kāi)書(shū)一步步照著做，這也就是本課程的一大特點(diǎn)：易學(xué)易忘。

為了提高《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的教學(xué)質(zhì)量，筆者不斷地從教學(xué)內(nèi)容、教學(xué)方法、實(shí)驗(yàn)環(huán)節(jié)等多方面對(duì)本課程進(jìn)行了積極的創(chuàng)新。在此基礎(chǔ)上總結(jié)出一些實(shí)際教學(xué)經(jīng)驗(yàn)與體會(huì)，與大家一起探討。

2、激發(fā)學(xué)生探究熱情，以學(xué)生為主導(dǎo)，采用適當(dāng)?shù)慕虒W(xué)方法

《網(wǎng)頁(yè)設(shè)計(jì)與制作》是綜合實(shí)踐性很強(qiáng)的課程，無(wú)論是網(wǎng)頁(yè)界面設(shè)計(jì)、網(wǎng)頁(yè)編程、網(wǎng)頁(yè)藝術(shù)欣賞的教學(xué)，要讓學(xué)生成為教與學(xué)的主要部分，把“要我學(xué)”變“我要學(xué)”，課堂上給與學(xué)生充足的思考，激發(fā)學(xué)生探究熱情，讓學(xué)生變被動(dòng)學(xué)習(xí)為主動(dòng)學(xué)習(xí)，從而成為教與學(xué)的主體。

（1）課程內(nèi)容模塊化，化解難點(diǎn)，循序漸進(jìn)：我們將整個(gè)課程內(nèi)容合理的模塊化，各模塊之間既相互獨(dú)立，也相互關(guān)聯(lián)，同時(shí)也將課程難點(diǎn)分解到各個(gè)不同的模塊中，化解了學(xué)生的畏懼心里。每個(gè)模塊自成體系，學(xué)完每一個(gè)個(gè)模塊就能獲得一項(xiàng)知識(shí)、技能，前面的模塊為后面模塊做鋪墊，后面的模塊又強(qiáng)化前面

模塊的內(nèi)容。這樣可以讓學(xué)生牢固地掌握《網(wǎng)頁(yè)設(shè)計(jì)與制作》的核心。

（2）精心準(zhǔn)備案例項(xiàng)目，從宏觀上進(jìn)行教學(xué)設(shè)計(jì)：將實(shí)際案例引入教材、教學(xué)體系中，每個(gè)重要知識(shí)點(diǎn)均與實(shí)際應(yīng)用結(jié)合起來(lái)，融創(chuàng)新思維培養(yǎng)、團(tuán)隊(duì)學(xué)習(xí)方式、實(shí)踐案例教學(xué)于課程教學(xué)中。經(jīng)典賞析、知識(shí)講授、課堂練習(xí)、實(shí)踐輔導(dǎo)、創(chuàng)新操作等不同教學(xué)方法靈活運(yùn)用，在充分利用現(xiàn)代多媒體教學(xué)、網(wǎng)上學(xué)習(xí)、交流溝通的基礎(chǔ)上，采用第一課堂與第二課堂結(jié)合，學(xué)研相結(jié)合，將現(xiàn)代科學(xué)技術(shù)充分應(yīng)用于教學(xué)改革之中。

（3）采用“四階段教學(xué)法”，從微觀上將“教、學(xué)、練、做”融為一體。在進(jìn)行教學(xué)時(shí)，教師對(duì)每個(gè)學(xué)習(xí)情景都設(shè)計(jì)好案例，然后進(jìn)行在上課的時(shí)候明確任務(wù)、教師演示、學(xué)生設(shè)計(jì)、展示評(píng)價(jià)等。

課程組教師在理論教學(xué)與實(shí)踐教學(xué)過(guò)程中抓住四個(gè)環(huán)節(jié)，提高教學(xué)效果。

（4）提倡“任務(wù)驅(qū)動(dòng)”的教學(xué)理念：以目標(biāo)確定教學(xué)任務(wù)，老師應(yīng)該明確每節(jié)課的知識(shí)、技能目標(biāo)，要根據(jù)這些目標(biāo)設(shè)計(jì)具體的學(xué)習(xí)任務(wù)，力求學(xué)生完成學(xué)習(xí)任務(wù)；以任務(wù)引領(lǐng)自學(xué)，每次課，教師要明確下次學(xué)生應(yīng)預(yù)習(xí)和準(zhǔn)備的知識(shí)；用交流發(fā)現(xiàn)問(wèn)題：在課堂教學(xué)中，無(wú)論是學(xué)生自學(xué)還是自測(cè)，教師都不應(yīng)坐等問(wèn)題出現(xiàn)，應(yīng)當(dāng)通過(guò)組織學(xué)生交流學(xué)習(xí)結(jié)果，在展示和對(duì)比中發(fā)現(xiàn)問(wèn)題、發(fā)現(xiàn)認(rèn)識(shí)缺陷；用碰撞形成共識(shí)，在課堂交流和評(píng)價(jià)中，發(fā)現(xiàn)學(xué)習(xí)中的問(wèn)題，以此引起學(xué)生間的認(rèn)識(shí)性爭(zhēng)議，學(xué)生在思維碰撞中形成共識(shí)，是最好的教學(xué)方式。

（5）師生互動(dòng)、生生互動(dòng)，活躍課堂氣氛：激發(fā)學(xué)習(xí)興趣，提高學(xué)生分析問(wèn)題、解決問(wèn)題的實(shí)際能力，達(dá)到輕松學(xué)習(xí)、自主學(xué)習(xí)的目的；充分調(diào)動(dòng)了學(xué)生的學(xué)習(xí)積極性和主動(dòng)性，有效提高學(xué)生的學(xué)習(xí)能力、應(yīng)用能力和創(chuàng)新能力。采用項(xiàng)目驅(qū)動(dòng)與基礎(chǔ)知識(shí)緊密相結(jié)合的全新教學(xué)模式，一邊分析講解、一邊操作演示、一邊動(dòng)手練習(xí)、講練結(jié)合。

（6）舉辦學(xué)生作品大賽，展示成果、促進(jìn)交流：舉行“網(wǎng)頁(yè)設(shè)計(jì)大賽”，給學(xué)生搭建了交流學(xué)習(xí)的平臺(tái)。通過(guò)這種活動(dòng)，調(diào)動(dòng)了學(xué)生的學(xué)習(xí)熱情，對(duì)學(xué)生的學(xué)習(xí)主動(dòng)性有了極大的促進(jìn)作用，對(duì)學(xué)生的學(xué)習(xí)方法和努力方向有明確的引導(dǎo)作用，對(duì)學(xué)生的實(shí)際動(dòng)手能力有明顯的強(qiáng)化作用，對(duì)學(xué)生的求知欲和上進(jìn)心有強(qiáng)烈的激勵(lì)作用。

（7）“教必有法而教無(wú)定法”： 在《網(wǎng)頁(yè)設(shè)計(jì)與制作》的課程教學(xué)中，教師做到教必有法，只有方法得當(dāng)，才會(huì)有效，真正認(rèn)識(shí)學(xué)生，了解學(xué)生基礎(chǔ)知識(shí)儲(chǔ)備量。根據(jù)教學(xué)內(nèi)容的特點(diǎn)和學(xué)生思維活動(dòng)的特點(diǎn)，采用情景教學(xué)法和講練結(jié)合的教學(xué)方法課堂上，教師如果能以優(yōu)美的語(yǔ)言，慢慢賞析一個(gè)網(wǎng)頁(yè)時(shí)，讓學(xué)生沉浸在教師的滔滔話語(yǔ)中，對(duì)學(xué)生來(lái)說(shuō)，學(xué)到的不僅僅是知識(shí)，獲得的更多的是一種藝術(shù)上的熏陶。

3、工學(xué)結(jié)合，教學(xué)合一，綜合全面評(píng)價(jià)學(xué)生

在課程的教學(xué)過(guò)程中，讓學(xué)生參加到實(shí)踐項(xiàng)目開(kāi)發(fā)中去，從網(wǎng)頁(yè)設(shè)計(jì)與制作這個(gè)崗位群出發(fā)，積極倡導(dǎo)將真實(shí)的網(wǎng)站建設(shè)和網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目帶入課堂，爭(zhēng)取實(shí)現(xiàn)將學(xué)生的全程實(shí)踐結(jié)果作為承接項(xiàng)目的一部分。這樣就要求學(xué)生在實(shí)踐之前必須與客戶單位進(jìn)行細(xì)致地溝通，以完成該模塊的需求分析，這樣既提高了學(xué)生的制作技術(shù)，又做到了所學(xué)的內(nèi)容與社會(huì)需求零距離，同時(shí)還鍛煉了學(xué)生的人際交往能力、組織協(xié)調(diào)能力。

對(duì)學(xué)生的學(xué)習(xí)成果的的評(píng)價(jià)要不唯考試、不唯分?jǐn)?shù)，《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程技能操作性強(qiáng)，能熟練操作網(wǎng)頁(yè)設(shè)計(jì)工具、能制作出一個(gè)漂亮的網(wǎng)頁(yè)，能對(duì)別人制作的網(wǎng)頁(yè)作出自己的評(píng)析遠(yuǎn)比100分來(lái)得重要，這也體現(xiàn)了陶行之“千教萬(wàn)教，教人求真”的求真求實(shí)的精神，這個(gè)唯實(shí)、唯美的評(píng)價(jià)標(biāo)準(zhǔn)不僅僅是記在教師心中，也要在學(xué)生中間形成這種評(píng)價(jià)氛圍，學(xué)生的學(xué)習(xí)成果得到教師和周?chē)瑢W(xué)的肯定，是學(xué)生能持續(xù)主動(dòng)學(xué)習(xí)最強(qiáng)大的內(nèi)在驅(qū)動(dòng)力。

4、課程改革的進(jìn)一步探討

本課程主要講述靜態(tài)網(wǎng)頁(yè)制作部分，對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)、色彩搭配、flash動(dòng)畫(huà)、圖形圖像處理技術(shù)只作簡(jiǎn)單的介紹?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》作為一門(mén)綜合性的課程還涉及許多相關(guān)的課程，可以根據(jù)不同的培養(yǎng)目標(biāo)開(kāi)設(shè)不同的課程。如：計(jì)算機(jī)網(wǎng)絡(luò)專(zhuān)業(yè)前導(dǎo)課程可以開(kāi)設(shè)Potoshop、Flash等，后繼課程可以開(kāi)設(shè)動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)或電子商務(wù)網(wǎng)站開(kāi)發(fā)等。

5、結(jié)束語(yǔ)

網(wǎng)頁(yè)設(shè)計(jì)作為一門(mén)實(shí)踐性較強(qiáng)的課程,在教學(xué)的方法上應(yīng)有別于一般的基礎(chǔ)理論課程.提升學(xué)生的主動(dòng)性,通過(guò)對(duì)教學(xué)內(nèi)容及實(shí)驗(yàn)內(nèi)容的合理安排對(duì)學(xué)生進(jìn)行正確引導(dǎo)并提高學(xué)生實(shí)際動(dòng)手能力是其中的關(guān)鍵.我們對(duì)該課程的改革力求提高學(xué)生分析和解決問(wèn)題的能力,通過(guò)教學(xué)實(shí)踐的探索,這種教學(xué)方法極大地提高了學(xué)生學(xué)習(xí)的積極性,取得了良好的教學(xué)效果.參考文獻(xiàn)：

[1] 張偉娜.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)的探討與實(shí)踐[J].教育信息化,2008(3).馬強(qiáng).Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)方法探討[J].福建電腦,2008(4).

第三篇：網(wǎng)頁(yè)設(shè)計(jì)師職位建議

網(wǎng)頁(yè)設(shè)計(jì)師

工作描述：1、2、3、至少1年以上網(wǎng)站設(shè)計(jì)制作工作經(jīng)驗(yàn) 熟悉網(wǎng)站建設(shè)的全過(guò)程以及相關(guān)技術(shù) 嫻熟運(yùn)用Dreamweaver, Photoshop, Fireworks等網(wǎng)頁(yè)設(shè)計(jì)工具，切圖

速度快而準(zhǔn)確；熟練使用CSS+DIV網(wǎng)頁(yè)架構(gòu)技術(shù)；4、5、6、負(fù)責(zé)公司行業(yè)站相關(guān)頁(yè)面的設(shè)計(jì)、改版、維護(hù) 個(gè)人能獨(dú)立處理工單系統(tǒng)里的的工單，處理好及時(shí)反饋 善于發(fā)現(xiàn)平時(shí)工作中的問(wèn)題（個(gè)人或是項(xiàng)目中），總結(jié)并分享有利工作上的方法

7、負(fù)責(zé)將網(wǎng)站的效果圖進(jìn)行切圖，使用合理的編碼習(xí)慣，讓頁(yè)面清晰，簡(jiǎn)潔，層次明了，易于維護(hù)，配合設(shè)計(jì)師和程序員，完成網(wǎng)站項(xiàng)目的建設(shè)

8、有較強(qiáng)的溝通能力和團(tuán)隊(duì)協(xié)作能力，快速的學(xué)習(xí)能力，樂(lè)于分享與溝通。

高級(jí)網(wǎng)頁(yè)設(shè)計(jì)師

工作描述：1、2、3、3年以上大型電子商務(wù)網(wǎng)站設(shè)計(jì)制作工作經(jīng)驗(yàn) 善于溝通協(xié)調(diào)、敢于面隊(duì)挑戰(zhàn)，敬業(yè)責(zé)任心強(qiáng)，有良好的團(tuán)隊(duì)精神 能把握互聯(lián)網(wǎng)多種設(shè)計(jì)風(fēng)格和潮流，把商業(yè)、設(shè)計(jì)完美結(jié)合；熟練使用常

用設(shè)計(jì)工具，熟練使用Photoshop、Flash、Dreamweaver、Illustrator等圖形和動(dòng)畫(huà)制作軟件；

4、熟練使用CSS+DIV網(wǎng)頁(yè)架構(gòu)技術(shù)；了解IE,Firefox,Safari主流瀏覽器的頁(yè)面顯示差異

5、具備獨(dú)立設(shè)計(jì)策劃與制作能力，能準(zhǔn)確理解客戶所提出的構(gòu)思，及時(shí)高效

完成項(xiàng)目的要求；6、7、8、根據(jù)產(chǎn)品需求，分析并給出最優(yōu)的頁(yè)面前端結(jié)構(gòu)解決方案 對(duì)交互設(shè)計(jì)、可用性、用戶體驗(yàn)有一定程度的理解，、持續(xù)的優(yōu)化前端體驗(yàn)和頁(yè)面響應(yīng)速度，優(yōu)化代碼并保持良好兼容性，提升

web界面的友好和易用；

9、負(fù)責(zé)公司行業(yè)站的網(wǎng)站首頁(yè)及相關(guān)頻道頁(yè)的整體設(shè)計(jì)及切圖

10、對(duì)公司所運(yùn)營(yíng)的網(wǎng)站有較深刻的了解，網(wǎng)站出了問(wèn)題應(yīng)第一時(shí)間解決

11、對(duì)于研發(fā)部門(mén)所提出的頁(yè)面要求都能及時(shí)完成相應(yīng)的效果

資深網(wǎng)頁(yè)設(shè)計(jì)師

工作描述：1、2、5年以上大型B2B、B2C電子商務(wù)網(wǎng)站設(shè)計(jì)制作工作經(jīng)驗(yàn) 具備獨(dú)立設(shè)計(jì)策劃與制作能力，有優(yōu)良的藝術(shù)創(chuàng)意素質(zhì)，設(shè)計(jì)具備時(shí)尚感，能符合當(dāng)代互聯(lián)網(wǎng)設(shè)計(jì)的發(fā)展；出色的頁(yè)面視覺(jué)表現(xiàn)能力、審美意識(shí)，較強(qiáng)的圖片設(shè)計(jì)及處理能力；提出嶄新的創(chuàng)意策略；

3、優(yōu)秀的設(shè)計(jì)習(xí)慣以及嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度,對(duì)國(guó)內(nèi)電商環(huán)境和商業(yè)業(yè)態(tài)有一定

認(rèn)識(shí)

4、熟練使用Photoshop、Flash、Dreamweaver、Illustrator等圖形和動(dòng)

畫(huà)制作軟件；

5、能夠熟練運(yùn)用 HTML, CSS, Javascript,Jquery，HTML5+CSS3構(gòu)建高性

能的 Web 應(yīng)用程序，經(jīng)常關(guān)注國(guó)內(nèi)大型網(wǎng)站所運(yùn)作的技術(shù)，學(xué)習(xí)并掌握運(yùn)用到我們網(wǎng)站上來(lái)。

6、負(fù)責(zé)設(shè)計(jì)行業(yè)站的整體風(fēng)格，包括制定網(wǎng)站整體顏色，寬度，字體，間距，行高，UI，ICO，等標(biāo)準(zhǔn)

7、負(fù)責(zé)制定行業(yè)站整體項(xiàng)目流程制作進(jìn)度標(biāo)準(zhǔn)，包括文件結(jié)構(gòu)，文件命名，CSS標(biāo)準(zhǔn)等8、9、負(fù)責(zé)設(shè)計(jì)行業(yè)站大型主題、策劃品牌營(yíng)銷(xiāo)活動(dòng)及廣告創(chuàng)意 負(fù)責(zé)監(jiān)督行業(yè)站整體完成質(zhì)量水平

視覺(jué)設(shè)計(jì)師

工作描述：1、2、3、4、5、6、具有出色的藝術(shù)設(shè)計(jì)能力和web頁(yè)面的表現(xiàn)力； 年輕，富有創(chuàng)造力和激情，對(duì)web前沿產(chǎn)品有靈敏的觸覺(jué)和領(lǐng)悟能力； 熟悉web頁(yè)面表現(xiàn)和交互技術(shù)者優(yōu)先； 具有兩年以上的大型電子商務(wù)平臺(tái)開(kāi)發(fā)經(jīng)驗(yàn)； 良好的表達(dá)能力，溝通交流技巧，團(tuán)隊(duì)協(xié)作能力； 熟悉網(wǎng)站項(xiàng)目流程，具有較強(qiáng)項(xiàng)目規(guī)劃能力和提升能力，優(yōu)秀的職業(yè)素質(zhì)，能夠承受工作壓力；

7、根據(jù)產(chǎn)品策劃提供的DEMO圖需求結(jié)合自身創(chuàng)意能夠獨(dú)立完最優(yōu)的界面

設(shè)計(jì)解決方案、網(wǎng)站前臺(tái)頁(yè)面設(shè)計(jì)方案；

8、負(fù)責(zé)公司行業(yè)站、宣傳平臺(tái)、興旺通UI的網(wǎng)頁(yè)的設(shè)計(jì)、頁(yè)面的美化、各

種活動(dòng)及專(zhuān)題頁(yè)面的制作

9、熟練運(yùn)用Photoshop、fireworks、Illustrator等常用設(shè)計(jì)制作軟件工具；

10、對(duì)于前期遇到反復(fù)修改的效果圖，要給予科學(xué)合理的修改建議，有個(gè)人見(jiàn)

解，能夠不斷提出對(duì)產(chǎn)品、版面、廣告等頁(yè)面的修改創(chuàng)新；

11、按時(shí)完成領(lǐng)導(dǎo)分配的任務(wù)，如遇到平時(shí)相對(duì)較空的時(shí)間，要自發(fā)去學(xué)習(xí)或

制作與項(xiàng)目相關(guān)的工作

第四篇：《網(wǎng)頁(yè)設(shè)計(jì)中的表格排版》教案

《網(wǎng)頁(yè)設(shè)計(jì)中的表格排版》教案

授課老師：陳清鋒

總1課時(shí)

本周第5課時(shí)

備課時(shí)間:2010年11月30日

授課班級(jí):高一（2）班

授課時(shí)間:2010年12月9日

教學(xué)目標(biāo)

知識(shí)與技能

1、掌握網(wǎng)頁(yè)設(shè)計(jì)中的格式化操作

2、掌握網(wǎng)頁(yè)設(shè)計(jì)中表格底紋設(shè)置

3、掌握表格的屬性設(shè)置

4、掌握網(wǎng)頁(yè)設(shè)計(jì)中表格的排版 過(guò)程與方法

1、培養(yǎng)學(xué)習(xí)、比較、歸納等思想方法和自覺(jué)學(xué)習(xí)的方法。

2、培養(yǎng)學(xué)生動(dòng)手操作的動(dòng)手能力，形成比學(xué)趕幫的學(xué)習(xí)氣氛。

3、培養(yǎng)學(xué)生基本的網(wǎng)頁(yè)制作流程，培養(yǎng)學(xué)生任務(wù)驅(qū)動(dòng)方法。情感態(tài)度與價(jià)值觀

1、在操作過(guò)程中體會(huì)網(wǎng)頁(yè)編輯的整體美感，培養(yǎng)學(xué)生基本審美的觀點(diǎn)。

2、引導(dǎo)學(xué)生形成自主學(xué)習(xí)與合作學(xué)習(xí)等良好的學(xué)習(xí)方式。

3、培養(yǎng)學(xué)生正確的人生觀和道德情感。教學(xué)重點(diǎn)

1、表格中單元格的美感排版

2、掌握表格中的底紋操作 教學(xué)難點(diǎn)

1、網(wǎng)頁(yè)設(shè)計(jì)中的表格美感排版

2、網(wǎng)頁(yè)設(shè)計(jì)中表格嵌套操作 教學(xué)用時(shí) 1課時(shí) 教學(xué)地點(diǎn) 三樓機(jī)房 教學(xué)過(guò)程

一、課堂準(zhǔn)備及引入（2分鐘）

師生問(wèn)好。清點(diǎn)人數(shù)。安全教育：大家剛才來(lái)到機(jī)房是怎么來(lái)的？蹦過(guò)來(lái)的？！不要急沖沖地來(lái)，要做一個(gè)文明學(xué)生，有一個(gè)大將風(fēng)范，從容地走進(jìn)機(jī)房，如果你是跑來(lái)，容易撞到別人，自己也容易摔倒。

大家都知道，現(xiàn)在每個(gè)公司，每個(gè)學(xué)校，每個(gè)企業(yè)都有了自己的網(wǎng)站，他們的網(wǎng)站都是很漂亮，而且都是非常容易吸引人的，其實(shí)，你們也是有能力達(dá)到那種水平的，關(guān)鍵是看你要不要學(xué)的問(wèn)題，如果你要學(xué)，你們完全有可能超越他們。那么，在制作網(wǎng)頁(yè)之前我們應(yīng)該做一個(gè)什么重要的步驟呢？建立網(wǎng)站站點(diǎn)，下面，讓一個(gè)同學(xué)來(lái)建立一個(gè)網(wǎng)站。由學(xué)生上臺(tái)操作完成。網(wǎng)站建好以后，我們就可以制作網(wǎng)頁(yè)了。今天我們的主要內(nèi)容是如何利用網(wǎng)頁(yè)設(shè)計(jì)中的表格對(duì)網(wǎng)頁(yè)進(jìn)行排版。（展示課題和重難點(diǎn)）

接著，展示本次訓(xùn)練的網(wǎng)頁(yè)效果。要求學(xué)生按要求完成本次作業(yè)效果。（發(fā)素材到學(xué)生機(jī)）

二、提出自學(xué)訓(xùn)練題目（5分鐘）

學(xué)生自己建立一個(gè)以自己名字命名的站點(diǎn)，新建一個(gè)主頁(yè)頁(yè)面，同時(shí)再建3個(gè)頁(yè)面作子頁(yè)面。

1、建立主頁(yè)，同時(shí)建立三個(gè)子頁(yè)面，制作主頁(yè)網(wǎng)頁(yè)背景，字體大小和網(wǎng)頁(yè)標(biāo)題。

2、制作LOGO欄（一行3列）。

3、制作導(dǎo)航條（首頁(yè)、湄州之旅、三字公約等8個(gè)導(dǎo)航）

4、制作主頁(yè)面的排版。（注意各排版的關(guān)系和位置）。

5、制作頁(yè)面底部的版權(quán)和與子頁(yè)面的鏈接部分。

三、學(xué)生操作，教師巡視（5分鐘）

四、學(xué)生演示操作結(jié)果，檢查學(xué)生的自學(xué)效果（5分鐘）學(xué)生操作結(jié)果。（分別由學(xué)生來(lái)完成題目）

五、教師講解，指出學(xué)生的不足（板書(shū)）（8分鐘）

1、建立主頁(yè)，“文件”→“新建”→“基本頁(yè)”→“HTML” →“確定”。保存存“index.html”，用同樣的方法建立三個(gè)子頁(yè)面，分別保存。a“屬性”→“頁(yè)面屬性”→點(diǎn)擊“背景圖像”右邊的“瀏覽”按鈕，選擇“pic/bggreen.gif”這個(gè)圖像文件，作為網(wǎng)頁(yè)的背景。

b在標(biāo)題右邊輸入：歡迎進(jìn)入充滿朝氣蓬勃的高一（2）班級(jí)網(wǎng)站。

2、制作LOGO：制作一行三列的表格，分別插入各自的圖像和文件。

3、制作導(dǎo)航：a新建一個(gè)頁(yè)面文件，然后在編輯區(qū)域中插入一個(gè) 2 × 1 的表格，并設(shè)置表格的基本屬性參數(shù)。b將光標(biāo)置于第一行的單元格中，再將單元格的背景顏色設(shè)置為 # 69A 538，并應(yīng)用同樣的方法將第二行單元格的背景顏色設(shè)置為 #8FCB 5A。設(shè)置完成后將光標(biāo)至于第一行的單元格中，然后在此單元格中插入一個(gè) 1 × 8 的表格，并設(shè)置表格的基本屬性參數(shù).。c錄入文字并設(shè)置單元格。在新插入的表格的所有單元格中輸入文字，然后選中所有單元格，設(shè)置單元格的相關(guān)屬性。d改變其中一個(gè)單元格的文字顏色和背景顏色，使其突出顯示。e此時(shí)即可得到帶有層次感的表格效果。

4、主頁(yè)面的排版：（重點(diǎn)講解，讓學(xué)生明白為什么要這樣操作）

a插入一個(gè)一行三列的表格（重點(diǎn)說(shuō)明：大的外表格起到排版布局作用）b左邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。c中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。d右邊的一列：插入三行一列的表格，并輸入必要的圖像和文字。（查看結(jié)果與教師的效果有何不一樣）

e左邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。f中間的一列：插入三行一列的表格，并輸入必要的圖像和文字。g右邊的一列：插入三行三列的表格，并輸入必要的圖像和文字。

（整調(diào)排版使用網(wǎng)頁(yè)整潔美觀，關(guān)鍵利用網(wǎng)頁(yè)設(shè)計(jì)中的空表格作用進(jìn)行排版）

5、制作版權(quán)和子頁(yè)面：一行一列表格，輸入版權(quán)。制作部分超鏈接。

六、學(xué)生當(dāng)堂訓(xùn)練（8分鐘）

學(xué)生繼續(xù)完善網(wǎng)頁(yè)主頁(yè)和子頁(yè)面的設(shè)計(jì)及超鏈接制作。

七、學(xué)生提交作業(yè)（2分鐘）

讓學(xué)生把作業(yè)提交上來(lái)，檢查學(xué)生的作業(yè)。

八、作業(yè)講評(píng)，比較，推優(yōu)（1分鐘）

把學(xué)生作業(yè)進(jìn)行講評(píng)，學(xué)生之間對(duì)比在學(xué)習(xí)中形成一個(gè)比學(xué)趕幫的氣氛。（做好學(xué)生作業(yè)情況記錄）

九、小結(jié)（1分鐘）

1、網(wǎng)頁(yè)中的表格排版一定少用空格。

2、頁(yè)面要整齊美觀。

3、網(wǎng)頁(yè)中排版要注意空隙的使用。

4、使用擴(kuò)展布局。

5、只設(shè)寬度，不設(shè)高度。

十、作業(yè)（10秒）

制作一個(gè)關(guān)于個(gè)人的網(wǎng)站。

十一、思考題，指導(dǎo)下一節(jié)講課內(nèi)容（30秒）

1、網(wǎng)頁(yè)設(shè)計(jì)中有否其他的頁(yè)面排版？

2、預(yù)習(xí)層的使用？它與網(wǎng)頁(yè)有什么不一樣的地方？

十二、檢查計(jì)算機(jī)硬件配件，師生問(wèn)好，有秩序下課。（5秒）

十三、教學(xué)反思

第五篇：在網(wǎng)頁(yè)中插入圖片教學(xué)設(shè)計(jì)

《在網(wǎng)頁(yè)中插入圖片》教學(xué)設(shè)計(jì)

執(zhí)教：熊

恒

教學(xué)目標(biāo)： 知識(shí)與技能：

會(huì)打開(kāi)上次的網(wǎng)頁(yè)；了解圖片在網(wǎng)頁(yè)中的作用；學(xué)會(huì)在網(wǎng)頁(yè)中插入圖片的方法。

過(guò)程與方法：

通過(guò)獨(dú)立探究和小組探究的方法基本掌握在網(wǎng)頁(yè)中插入圖片。

情感態(tài)度與價(jià)值觀：

培養(yǎng)學(xué)生的審美能力，形成與同學(xué)和諧相處、共同進(jìn)步的精神。明白幫助他人的目的就是美化我們的心靈。

教學(xué)重難點(diǎn)：

重

點(diǎn)：了解圖片在網(wǎng)頁(yè)中的作用 難

點(diǎn)：能在網(wǎng)頁(yè)中插入圖片

教學(xué)時(shí)間：一課時(shí)

教學(xué)過(guò)程：

一、導(dǎo)入新課：

同學(xué)們，上節(jié)課我們學(xué)會(huì)了制作只有文字的網(wǎng)頁(yè)。可是“咪咪豆網(wǎng)屋”的主頁(yè)還有可愛(ài)的胖胖熊圖片呢！它是怎么進(jìn)來(lái)的？對(duì)于這個(gè)問(wèn)題，我們來(lái)進(jìn)行具體的研究。

揭示課題：在網(wǎng)頁(yè)中插入圖片

二、探究新知 任務(wù)一：了解圖片在網(wǎng)頁(yè)中的作用。

（1）、教師出示只有文字和帶有圖片的兩個(gè)網(wǎng)頁(yè)，提問(wèn)：這兩個(gè)網(wǎng)頁(yè)哪一個(gè)好看呢？

（2）、引導(dǎo)學(xué)生觀察，并說(shuō)出為什么？指定學(xué)生回答（有圖片的那一個(gè)）

（3）、小結(jié)：網(wǎng)頁(yè)中的圖片可以使網(wǎng)頁(yè)更加美觀漂亮。任務(wù)二：打開(kāi)主頁(yè)文件咪咪豆網(wǎng)屋index.htm（1）、師生復(fù)習(xí)啟動(dòng)frontpage 軟件。（它是微軟公司推出的一款優(yōu)秀的網(wǎng)頁(yè)制作軟件）

（2）、學(xué)生試著打開(kāi)主頁(yè)文件咪咪豆網(wǎng)屋index.htm，老師巡視并校正。

操作步驟：網(wǎng)頁(yè)制作軟件——單擊文件——打開(kāi)文件——我的文檔，找到主頁(yè)文件咪咪豆網(wǎng)屋index.htm——再打開(kāi)。

（3）、學(xué)生操作。

任務(wù)三：把“胖胖熊”請(qǐng)進(jìn)來(lái)

（1）師生復(fù)習(xí)在word 中插入圖片的方法，指名學(xué)生回答。教師小結(jié)：方法一：①、復(fù)制——粘貼；②、方法二：菜單——插入——圖片——來(lái)自文件——選擇圖片單擊插入。

（2）學(xué)生練習(xí)圖片的插入，（3）學(xué)生探究把胖胖熊請(qǐng)進(jìn)“咪咪豆網(wǎng)屋”主頁(yè)中的的方法。

教師提問(wèn)：能否把在word中插入圖片的方法運(yùn)用在frontpage 軟件中呢？（指名學(xué)生回答：可以）學(xué)生動(dòng)手操作：教師巡視，對(duì)不正確的地方進(jìn)行校正。教師小結(jié)：

我們可以這樣把胖胖熊請(qǐng)進(jìn)“咪咪豆網(wǎng)屋”主頁(yè)。操作步驟：

① 把光標(biāo)移到第二行“咪咪豆網(wǎng)屋”的左邊；

② 單擊“插入”菜單；

③ 選圖片來(lái)自文件→選C：“網(wǎng)頁(yè)制作”文件夾→找到“胖胖熊1.gif” 文件并單擊→單擊“確定”。

（3）、學(xué)生操作，教師巡視指導(dǎo)

（4）、要求學(xué)生用同樣的方法把胖胖熊放到“咪咪豆網(wǎng)屋”的右邊。

任務(wù)四：保存網(wǎng)頁(yè)

同學(xué)們，我們成功把胖胖熊請(qǐng)進(jìn)“咪咪豆網(wǎng)屋”主頁(yè)中，現(xiàn)在，我們要做的就把今天的作品保存起來(lái)！

學(xué)生試著保存：?jiǎn)螕粑募藛巍４嫖募?/p>

四、教師小結(jié)：今天同學(xué)們通過(guò)努力，基本掌握了在網(wǎng)頁(yè)中插入和美化圖片的方法，我們插入網(wǎng)頁(yè)的目的是美化網(wǎng)頁(yè)，幫助他人的目的是美化我們的心靈。