網(wǎng)頁(yè)設(shè)計(jì)論文大全11篇

緒論：寫(xiě)作既是個(gè)人情感的抒發(fā)，也是對(duì)學(xué)術(shù)真理的探索，歡迎閱讀由發(fā)表云整理的11篇網(wǎng)頁(yè)設(shè)計(jì)論文范文，希望它們能為您的寫(xiě)作提供參考和啟發(fā)。

篇（1）

二、考核方案

1.考核方案的制定

本考核采取學(xué)生小組合作（每組2-3名學(xué)生）完成一個(gè)規(guī)定主題網(wǎng)站項(xiàng)目的方式展開(kāi)。總成績(jī)由操作考核成績(jī)、項(xiàng)目報(bào)告成績(jī)兩部分組成，權(quán)重分別為70％、30％，每一項(xiàng)按百分制評(píng)分后依權(quán)重比例計(jì)入總成績(jī)，總成績(jī)不及格者必須重修本課程并重新參加考試。因本校的現(xiàn)有學(xué)期總評(píng)成績(jī)是由平時(shí)成績(jī)30%、期中成績(jī)30%、期末成績(jī)40%組成，為了與學(xué)校的評(píng)分要求接軌，將本次考試所得的總成績(jī)作為學(xué)校學(xué)期總評(píng)成績(jī)的期末成績(jī)部分。并在此說(shuō)明平時(shí)成績(jī)30%部分是由學(xué)生本學(xué)期的課程作業(yè)完成情況、出勤及上課表現(xiàn)綜合評(píng)定。本考核方案中的操作考核、項(xiàng)目報(bào)告都有具體的考核方案，其中操作考核實(shí)施的具體要求以試卷形式展現(xiàn)，內(nèi)容要求以表“操作考核內(nèi)容”為中心，以考核學(xué)生綜合網(wǎng)站制作能力為基本思路，通過(guò)小組合作完成主題網(wǎng)站的設(shè)計(jì)與制作，具體要求在此省略。此外要求學(xué)生撰寫(xiě)項(xiàng)目報(bào)告不僅讓學(xué)生明確各自的份內(nèi)工作，同時(shí)要求學(xué)生善于思考、總結(jié)，每做一個(gè)項(xiàng)目都有所收獲。項(xiàng)目報(bào)告實(shí)施的具體要求涉及以下幾個(gè)方面的內(nèi)容：

（1）項(xiàng)目實(shí)施過(guò)程。項(xiàng)目實(shí)施過(guò)程包括前期策劃、資料搜集、網(wǎng)頁(yè)制作。在前期策劃階段，要求小組共同確定網(wǎng)站名稱、網(wǎng)站風(fēng)格（列舉網(wǎng)頁(yè)采用主要色彩及網(wǎng)頁(yè)色調(diào)定位）、網(wǎng)站欄目、站點(diǎn)目錄結(jié)構(gòu)的內(nèi)容以形成完整的網(wǎng)站規(guī)劃，在此規(guī)劃的指導(dǎo)下進(jìn)行資料搜集、協(xié)作完成網(wǎng)頁(yè)制作。其中網(wǎng)頁(yè)制作中要求頁(yè)面美工設(shè)計(jì)階段介紹所用軟件及提供至少首頁(yè)效果圖截圖；靜態(tài)頁(yè)面制作階段要求繪制網(wǎng)頁(yè)布局的結(jié)構(gòu)圖及標(biāo)注尺寸；程序開(kāi)發(fā)階段列舉所用的開(kāi)發(fā)工具、對(duì)數(shù)據(jù)庫(kù)、表進(jìn)行截圖，以及繪制程序開(kāi)發(fā)頁(yè)面流程圖。

（2）項(xiàng)目總結(jié)。對(duì)本項(xiàng)目完成情況進(jìn)行分析、總結(jié)，并介紹項(xiàng)目實(shí)施過(guò)程中的收獲及體會(huì)。在作品展示時(shí)要求各小組派出代表對(duì)作品進(jìn)行介紹，總結(jié)，便于相互交流經(jīng)驗(yàn)。

（3）項(xiàng)目組介紹。對(duì)該項(xiàng)目組成員進(jìn)行介紹及項(xiàng)目實(shí)施過(guò)程中的人員分工情況進(jìn)行報(bào)告。體現(xiàn)小組合作開(kāi)發(fā)項(xiàng)目的工作模式，讓學(xué)生明白實(shí)際工作中不僅需要具備較高的技術(shù)能力，還要有合作意識(shí)，與合作者之間有效、和諧的溝通。

篇（2）

1.1案例教學(xué)法案

例教學(xué)法是一種具有啟發(fā)性、實(shí)踐性,能開(kāi)發(fā)學(xué)生思維能力,提高學(xué)生判斷能力、決策能力和綜合素質(zhì)的新型教學(xué)方——“分析案例”——“制作案例”的過(guò)程，培養(yǎng)學(xué)生分析問(wèn)題，解決問(wèn)題的能力，達(dá)到學(xué)習(xí)知識(shí)技能，靈活應(yīng)用的目的。例如，在講解ASP中的Request對(duì)象時(shí),教師先展示一個(gè)表單提交的案例，然后引領(lǐng)學(xué)生分析我們?cè)邳c(diǎn)擊提交按鈕后，如何在另外一個(gè)頁(yè)面中，得到提交頁(yè)面相應(yīng)的屬性值呢？學(xué)生在老師的啟發(fā)下動(dòng)腦思考，引出Request對(duì)象的作用，接著教師講授Request對(duì)象的各種方法的使用。學(xué)生在深入理解后，運(yùn)用知識(shí)制作此案例。

1.2任務(wù)驅(qū)動(dòng)法

任務(wù)驅(qū)動(dòng)法在課堂教學(xué)中，教師為學(xué)生布置上機(jī)操作任務(wù)，通過(guò)實(shí)際任務(wù)展開(kāi)教學(xué)。學(xué)生通過(guò)親自動(dòng)手操作，主動(dòng)建構(gòu)探究，培養(yǎng)了學(xué)生創(chuàng)新精神和實(shí)踐能力，提高了學(xué)生的綜合運(yùn)用知識(shí)的能力。例如在學(xué)習(xí)表單制作時(shí)，以現(xiàn)實(shí)生活中注冊(cè)電子郵件為例，提出表單的概念，然后講解其實(shí)現(xiàn)理論，接著布置實(shí)際任務(wù)——投票系統(tǒng)，讓學(xué)生用知識(shí)去解決任務(wù)，進(jìn)一步加深理解知識(shí)。

1.3分層教學(xué)法

成人的學(xué)習(xí)能力差異大，存在個(gè)體差異，因此，教學(xué)中采用分層教學(xué)法。在實(shí)際教學(xué)中，教師根據(jù)學(xué)生現(xiàn)有的知識(shí)、能力水平和潛力傾向把學(xué)生科學(xué)地分成水平各自相近的幾組，如A、B、C三組，A組是按大綱基本要求進(jìn)行教學(xué)的學(xué)生；B組是按略高于基本要求進(jìn)行教學(xué)的學(xué)生；C組是按較高要求（能發(fā)揮學(xué)生數(shù)學(xué)特長(zhǎng)）進(jìn)行教學(xué)的學(xué)生。學(xué)生分組不是固定的，而是隨著學(xué)習(xí)情況及時(shí)調(diào)整。每組布置知識(shí)程度不同的學(xué)習(xí)任務(wù)，并且在教師恰當(dāng)?shù)闹笇?dǎo)下，讓全體學(xué)生從各自的層面體驗(yàn)成功的愉悅。

2模擬化網(wǎng)絡(luò)教學(xué)

開(kāi)放教育是傳統(tǒng)教育與網(wǎng)絡(luò)教學(xué)相互融合的產(chǎn)物。網(wǎng)絡(luò)教學(xué)以其獨(dú)特的魅力在開(kāi)放教育中發(fā)揮著越來(lái)越重要的作用。學(xué)習(xí)已經(jīng)不再局限于課堂，學(xué)生只要有上網(wǎng)條件，無(wú)論何時(shí)何地，都可以方便的學(xué)習(xí)，打破了時(shí)間和空間的限制，因此，網(wǎng)上資源的好壞直接影響學(xué)生的學(xué)習(xí)效果。因此，筆者充分利用網(wǎng)絡(luò)資源，以教學(xué)大綱為依據(jù)，遵循厚基礎(chǔ)、重能力的原則，開(kāi)發(fā)了此門(mén)課的模擬化網(wǎng)絡(luò)教學(xué)系統(tǒng)。此系統(tǒng)有“教學(xué)大綱”、“課程教案”、“模擬實(shí)驗(yàn)”、“經(jīng)典案例”、“自我測(cè)試”、“課程討論”等欄目。分層次，多模塊，手段直觀、豐富有趣的一系列實(shí)驗(yàn)教學(xué)單元。制作文字、圖像、聲音、動(dòng)畫(huà)于一體的豐富多彩的模擬實(shí)驗(yàn)教學(xué)內(nèi)容。模擬實(shí)驗(yàn)教學(xué)的指導(dǎo)效率更高。使理論教學(xué)與實(shí)驗(yàn)教學(xué)、基礎(chǔ)與前沿、經(jīng)典與現(xiàn)代、實(shí)驗(yàn)內(nèi)容與實(shí)際應(yīng)用有機(jī)結(jié)合，更有利于學(xué)生學(xué)習(xí)，并且可以反復(fù)閱讀，是面授課堂一種好的補(bǔ)充與強(qiáng)化手段。

3多樣化互動(dòng)教學(xué)

3.1課堂互動(dòng)

成人有豐富的社會(huì)閱歷和人生體驗(yàn),有更為強(qiáng)烈的對(duì)話意識(shí)和平等意識(shí)，因此,師生活動(dòng)主要體現(xiàn)在，放下身段，深入到學(xué)生們之中，和他們們交朋友，交流心得，平等對(duì)話，互相學(xué)習(xí)。鼓勵(lì)學(xué)生大膽地表達(dá)自己的想法，暢所欲言，和學(xué)生共去探索知識(shí)的世界。所謂生生互動(dòng)，就是學(xué)生和學(xué)生之間可以互相討論，交流心得。在實(shí)際操作中將學(xué)生分組，合作學(xué)習(xí)，這樣促使小組成員積極參與，培養(yǎng)學(xué)生團(tuán)結(jié)合作意識(shí)，集體榮譽(yù)感。人機(jī)互動(dòng)是學(xué)習(xí)《動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)》這門(mén)課必不可少的環(huán)節(jié)。只懂理論，不會(huì)應(yīng)用，猶如紙上談兵，完全失去了學(xué)習(xí)的意義。所以，課上學(xué)生必須上機(jī)實(shí)踐，在實(shí)踐中掌握知識(shí)，消化知識(shí)，融會(huì)貫通。

篇（3）

因?yàn)闉g覽器對(duì)網(wǎng)頁(yè)的解析過(guò)程是等待整個(gè)表格都解析完成后，才會(huì)在瀏覽者的顯示器中顯示出表格中的所有內(nèi)容，設(shè)計(jì)者應(yīng)合理地應(yīng)用表格，將頁(yè)面中某一塊的內(nèi)容單獨(dú)地使用表格進(jìn)行制作，這樣某一個(gè)表格下載完成后，瀏覽者都可以先查看顯示出的表格內(nèi)容，省去了等待時(shí)間。因此靈活地動(dòng)用小的表格構(gòu)成整個(gè)頁(yè)面，避免使用大的表格。

2網(wǎng)頁(yè)設(shè)計(jì)時(shí)控制頁(yè)面的容量

一個(gè)好的網(wǎng)站，必定有很豐富的內(nèi)容，設(shè)計(jì)者應(yīng)該對(duì)網(wǎng)頁(yè)中的圖像、文本、多媒體和HTML文本的大小有一定的控制，使網(wǎng)頁(yè)在因特網(wǎng)上訪問(wèn)時(shí)，能以最快的時(shí)間顯示出頁(yè)面上的所有內(nèi)容。

3使用圖像的技巧

3.1選用合適的圖像格式。在網(wǎng)頁(yè)中常用的圖像格式是GIF、JPEG和PNG格式，JPEG壓縮率特別高，GIF更適合小圖像或小動(dòng)畫(huà)，對(duì)于4KB以下的圖像文件，GIF比JPEG格式效果更好。

3.2控制頁(yè)面圖像的數(shù)量。在網(wǎng)頁(yè)中不要使用過(guò)多的圖像文件，因?yàn)槊肯螺d一個(gè)圖像文件，瀏覽器都向Web服務(wù)器請(qǐng)求一次連接，因此在制作網(wǎng)頁(yè)時(shí)，可以將多個(gè)小的圖像合并成一個(gè)圖像，減少圖像的下載數(shù)量，提高網(wǎng)頁(yè)的瀏覽速度。

3.3重用圖像。在一個(gè)頁(yè)面中，如果同一個(gè)圖像多次出現(xiàn)，可以使用客戶端瀏覽器的Cache。瀏覽器將從Cache中找到先前下載的圖像文件顯示，可以加快頁(yè)面瀏覽速度。

3.4圖像的大小。設(shè)計(jì)者在HTML代碼中手動(dòng)書(shū)寫(xiě)圖像標(biāo)簽時(shí)，最好標(biāo)記出圖像顯示的寬和高，頁(yè)面在顯示時(shí)，瀏覽器會(huì)根據(jù)圖像的高和寬在頁(yè)面中為圖像留出位置，在圖像下載完畢之前及時(shí)地顯示其周?chē)奈淖謨?nèi)容，減少了瀏覽者等待的時(shí)間。

3.5不用圖片來(lái)敘述內(nèi)容。同樣的文字內(nèi)容，用文本儲(chǔ)存比圖片文件小得多，如果必須用圖片來(lái)解決一些因內(nèi)碼不同而導(dǎo)致的亂碼問(wèn)題，也要包含解釋文本，這樣即使瀏覽者關(guān)閉了瀏覽器的圖像顯示功能，也能明白表達(dá)的意思。

3.6使用低分辨率圖像。如果頁(yè)面中需要使用大圖像，就要用適當(dāng)?shù)姆椒ń鉀Q大圖像顯示方法，使頁(yè)面能夠更快地顯示。一種方法是使用該大圖像的縮略圖，為該縮略圖設(shè)置鏈接、鏈接到原始的大圖像位置；另一種方法是使用低分辨率圖像，使用Dreamweaver提供的低分辨率源標(biāo)記，讓低分辨率的圖像先下載，這樣瀏覽者就可以很快地看到低分辨率的圖像。

4使用JavaScript

在制作網(wǎng)頁(yè)時(shí)，為了使頁(yè)面具有一定的交互性和動(dòng)態(tài)效果，常使用一些網(wǎng)頁(yè)控件，在此建議盡量使用HTML和JavaScript來(lái)完成。因?yàn)镠TML和JavaScript代碼的解析時(shí)間比其他的網(wǎng)頁(yè)控制解析的時(shí)間短得多，同樣JavaScript具有非常強(qiáng)大的功能，可以制作出很多網(wǎng)頁(yè)特效。

5少用背景音樂(lè)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)

篇（4）

職業(yè)教育工作過(guò)程是職業(yè)人完成崗位工作任務(wù)的完整過(guò)程。基于工作過(guò)程的總體課程設(shè)計(jì)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)課程來(lái)說(shuō)，學(xué)習(xí)領(lǐng)域可以采用網(wǎng)站項(xiàng)目貫穿于整個(gè)教學(xué)活動(dòng)中，以項(xiàng)目為載體，將知識(shí)融于項(xiàng)目。這能夠有效地提高學(xué)生的創(chuàng)新能力和實(shí)踐能力，強(qiáng)調(diào)學(xué)生在密切聯(lián)系有意義的“任務(wù)”情境中，通過(guò)完成項(xiàng)目任務(wù)來(lái)掌握知識(shí)、獲得技能、形成能力。做到“教學(xué)、做”一體化，真正地鍛煉學(xué)生的動(dòng)手能力。課程進(jìn)度表可以按照實(shí)際網(wǎng)站的項(xiàng)目開(kāi)發(fā)流程來(lái)安排，從確定網(wǎng)站需求、選擇網(wǎng)站建設(shè)與管理工具，到規(guī)劃設(shè)計(jì)網(wǎng)站結(jié)構(gòu)與欄目、準(zhǔn)備網(wǎng)站相關(guān)文字與圖片等素材，再到軟件平臺(tái)中定義站點(diǎn)創(chuàng)建具體頁(yè)面，依次實(shí)現(xiàn)網(wǎng)站各個(gè)子欄目模塊，最后與推廣網(wǎng)站。開(kāi)展教學(xué)活動(dòng)時(shí)，教師可根據(jù)學(xué)生實(shí)際學(xué)習(xí)效果對(duì)各個(gè)單元學(xué)時(shí)數(shù)進(jìn)行靈活調(diào)整。單元學(xué)習(xí)情境的設(shè)計(jì)融入課程涉及的知識(shí)點(diǎn)，遞進(jìn)安排各個(gè)單元知識(shí)點(diǎn)的順序，既要有基于工作崗位的過(guò)程性知識(shí)，也要兼顧課程理論知識(shí)，學(xué)生學(xué)習(xí)完課程后，打好理論基礎(chǔ)，同時(shí)具備再學(xué)習(xí)的潛力和能力。例如在網(wǎng)站項(xiàng)目中，選取典型工作任務(wù)-制作公司網(wǎng)站搜索頁(yè)面來(lái)設(shè)計(jì)單元學(xué)習(xí)情境。

1.2課程實(shí)施

根據(jù)職業(yè)教育課程教學(xué)目標(biāo)及項(xiàng)目進(jìn)度安排教學(xué)單元，遵循的原則是學(xué)生為主體，教師為主導(dǎo)，按照網(wǎng)頁(yè)制作的工作過(guò)程來(lái)安排具體的教學(xué)活動(dòng)。教師的角色是引路人，拋出問(wèn)題，提示解決思路，由學(xué)生具體負(fù)責(zé)完成工作任務(wù)，教師可以根據(jù)學(xué)生的實(shí)際學(xué)習(xí)情況給出參考意見(jiàn)。對(duì)于基礎(chǔ)較好的學(xué)生，教師只需提示完成任務(wù)的思路和關(guān)鍵點(diǎn)。而對(duì)于基礎(chǔ)較差的學(xué)生，教師還需要準(zhǔn)備有具體步驟的實(shí)踐指導(dǎo)書(shū)，供學(xué)生參考，對(duì)照完成并排除錯(cuò)誤。

1.3課程評(píng)價(jià)

課程評(píng)價(jià)以學(xué)生的學(xué)習(xí)效果最優(yōu)化為出發(fā)點(diǎn)。學(xué)習(xí)效果體現(xiàn)在以下幾個(gè)方面：

（1）課程結(jié)束后，學(xué)生是否掌握了應(yīng)知應(yīng)會(huì)的基本知識(shí)和技能；

（2）學(xué)生是否了解到職業(yè)崗位開(kāi)展工作的具體流程，并具備能力完成典型的工作任務(wù)；

（3）引入外部評(píng)價(jià)，如企業(yè)專家的考評(píng)，客觀評(píng)判學(xué)生的知識(shí)水平、職業(yè)能力和綜合素質(zhì)是否符合社會(huì)需求。值得注意的是，學(xué)生成績(jī)?cè)u(píng)價(jià)方法最好以形成式考核為主，按照項(xiàng)目進(jìn)度逐步推進(jìn)，學(xué)生的階段性成績(jī)不斷被累計(jì)，形成性評(píng)價(jià)可以確保基于工作過(guò)程的教學(xué)活動(dòng)有序開(kāi)展，監(jiān)控學(xué)生的學(xué)習(xí)效果，最終保障良好的教學(xué)質(zhì)量。

篇（5）

1.1從編寫(xiě)代碼到創(chuàng)建實(shí)際任務(wù)。傳統(tǒng)的網(wǎng)頁(yè)教學(xué)總是以編寫(xiě)HTML超文本標(biāo)記語(yǔ)言、CSS層疊樣式表文件、JavaScript為基礎(chǔ)，通過(guò)Dreamweaver工具的拆分模式實(shí)現(xiàn)可視化的實(shí)際效果與基礎(chǔ)理論的結(jié)合來(lái)展開(kāi)。這樣的教學(xué)方式與網(wǎng)頁(yè)的實(shí)際應(yīng)用聯(lián)系較少。使得學(xué)生在學(xué)完網(wǎng)頁(yè)之后難以解決具體的實(shí)際問(wèn)題。采用任務(wù)驅(qū)動(dòng)的教學(xué)方法，通過(guò)實(shí)際項(xiàng)目，引入真實(shí)情境，如玩具銷(xiāo)售店、我的大學(xué)生活、學(xué)科資源網(wǎng)站等。讓學(xué)們從單純的學(xué)生角色轉(zhuǎn)化為網(wǎng)站構(gòu)建者，成為一個(gè)生產(chǎn)者。這樣大大激發(fā)了學(xué)生的學(xué)習(xí)動(dòng)力，并肩負(fù)責(zé)任感和成就感去學(xué)習(xí)。學(xué)生在構(gòu)建實(shí)際網(wǎng)站過(guò)程中直接、頻繁地接觸計(jì)算思維的概念，如網(wǎng)頁(yè)結(jié)構(gòu)的搭建，樣式美化的屬性設(shè)置等，并不斷提升系統(tǒng)性的思考能力和創(chuàng)意思維能力。構(gòu)建網(wǎng)站時(shí)系統(tǒng)性的思考力是指學(xué)生需要在設(shè)計(jì)諸如導(dǎo)航條或鏈接中從設(shè)計(jì)網(wǎng)站、解決問(wèn)題和理解用戶需求的角度去“仔細(xì)思考用戶與網(wǎng)站的互動(dòng)方式以及根據(jù)意圖實(shí)現(xiàn)功能的方式解決問(wèn)題”[1]。構(gòu)建網(wǎng)站中的創(chuàng)意思維是指學(xué)生可以把網(wǎng)頁(yè)設(shè)計(jì)學(xué)習(xí)融入到創(chuàng)作具有實(shí)際意義和真實(shí)內(nèi)容及富有個(gè)性的網(wǎng)站構(gòu)建過(guò)程中，將學(xué)科學(xué)習(xí)與實(shí)際生活相統(tǒng)一。

1.2從獨(dú)立開(kāi)發(fā)到小組合作、組間協(xié)作。網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開(kāi)發(fā)的工作不是一個(gè)人獨(dú)立完成的，而是需要團(tuán)隊(duì)的合作共同完成，當(dāng)前的信息產(chǎn)業(yè)的工作都不是一個(gè)人獨(dú)立能夠完成的，而需要與他人合作完成。因此，獨(dú)立思考和學(xué)習(xí)確實(shí)能促進(jìn)學(xué)生知識(shí)掌握能力、而通過(guò)合作構(gòu)建網(wǎng)站可以分解復(fù)雜任務(wù)。利用這種協(xié)作模式可以培養(yǎng)計(jì)算思維能力中除知識(shí)技能方面的其他方面——過(guò)程與方法、情感態(tài)度與價(jià)值觀。

2考核評(píng)價(jià)

根據(jù)《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站開(kāi)發(fā)課程》的三維教學(xué)目標(biāo)（知識(shí)技能、過(guò)程與方法、情感態(tài)度三方面）制定考核方法及評(píng)價(jià)標(biāo)準(zhǔn)。考核評(píng)價(jià)改變傳統(tǒng)的單一的總結(jié)性評(píng)價(jià)的方法，采用平時(shí)的過(guò)程評(píng)價(jià)、階段評(píng)價(jià)和綜合評(píng)價(jià)相結(jié)合的評(píng)價(jià)方法。過(guò)程評(píng)價(jià)是指學(xué)生平時(shí)的學(xué)習(xí)過(guò)程，根據(jù)精心設(shè)計(jì)的學(xué)習(xí)情境對(duì)學(xué)生的學(xué)習(xí)過(guò)程進(jìn)行記錄和評(píng)分。這其中包括學(xué)生出勤情況、學(xué)習(xí)態(tài)度、單元情境的完成情況；階段評(píng)價(jià)即是期中評(píng)價(jià)，通過(guò)期初時(shí)提出主題網(wǎng)站任務(wù)，學(xué)生在學(xué)習(xí)過(guò)程中著手規(guī)劃、設(shè)計(jì)、實(shí)施并完成任務(wù)，在學(xué)期中期進(jìn)行集中評(píng)價(jià)[2]，起到貫穿始終、承前啟后的作用；期末考試采用上機(jī)考試，題型包括根據(jù)給定素材及代碼截圖拼出網(wǎng)頁(yè)頁(yè)面，根據(jù)給定模板和主題要求，在現(xiàn)有素材的基礎(chǔ)上實(shí)現(xiàn)網(wǎng)站規(guī)劃及網(wǎng)頁(yè)設(shè)計(jì)。

篇（6）

/基本要求

1.在網(wǎng)站根目錄中開(kāi)設(shè)imagescommontemp三個(gè)子目錄，根據(jù)需要再開(kāi)設(shè)media子目錄，images目錄中放不同欄目的頁(yè)面都要用到的公共圖片，例如公司的標(biāo)志、banner條、菜單、按鈕等等；common子目錄中放css、js,、php、include等公共文件；temp子目錄放客戶提供的各種文字圖片等等原始資料；media子目錄中放flash,avi,quicktime等多媒體文件。

2.在根目錄中原則上應(yīng)該按照首頁(yè)的欄目結(jié)構(gòu)，給每一個(gè)欄目開(kāi)設(shè)一個(gè)目錄，根據(jù)需要在每一個(gè)欄目的目錄中開(kāi)設(shè)一個(gè)images和media的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個(gè)欄目的內(nèi)容特別多，又分出很多下級(jí)欄目，可以相應(yīng)的再開(kāi)設(shè)其他目錄。

3.temp目錄中的文件往往會(huì)比較多，建議以時(shí)間為名稱開(kāi)設(shè)目錄，將客戶陸續(xù)提供的資料歸類整理。

4.除非有特殊情況，目錄、文件的名稱全部用小寫(xiě)英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請(qǐng)盡量以英文為指導(dǎo)，不到萬(wàn)不得已不要以拼音作為目錄名稱，經(jīng)驗(yàn)證明，用拼音命名的目錄往往連一個(gè)月后的自己都看不懂，

/腳本編寫(xiě)

我們應(yīng)該有一個(gè)腳本整體風(fēng)格一致的概念，意思是一個(gè)月后和一個(gè)月前的你寫(xiě)的腳本風(fēng)格保持一致，以及同一個(gè)工作組中不同的開(kāi)發(fā)人員編寫(xiě)的腳本風(fēng)格保持一致，因?yàn)槲覀儾豢赡苡肋h(yuǎn)孤立的開(kāi)發(fā)，你隨時(shí)都有可能和三個(gè)月前的自己合作（你的客戶要求改版），也經(jīng)常要和工作室中不同的同事共同開(kāi)發(fā)一個(gè)項(xiàng)目，還有可能被要求修改已經(jīng)離職人員開(kāi)發(fā)的腳本，當(dāng)然你自己也有可能會(huì)扔下一個(gè)項(xiàng)目給后來(lái)的同事。

1.Html文件的通用模板：

其他meta標(biāo)記

樣式表定義

客戶端javascript函數(shù)定義及初始化操作

……

補(bǔ)充：

為了保證網(wǎng)站能夠與下一代的web語(yǔ)言xml標(biāo)準(zhǔn)兼容，所有的HTML標(biāo)簽的屬性都要用單引號(hào)或者雙引號(hào)括起，即我們應(yīng)該寫(xiě)而不是.

2.允許全文檢索的頁(yè)面，為了使Internet上的搜索引擎能夠有效檢索，在頻道的首頁(yè)的html的之間應(yīng)該加入Keywords和Description元標(biāo)記，例如：

3.CSS文件的格式樣例代碼：

這里尤其要注意的是a:linka:visiteda:hovera:actived的排列順序一定要嚴(yán)格照上面的樣例代碼，否則或多或少會(huì)出問(wèn)題。另外我們規(guī)定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！

為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)建議用點(diǎn)數(shù)pt和像素px來(lái)定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px和14.7px這是經(jīng)過(guò)優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt和14.7px的字號(hào)比較合適。

在寫(xiě)互相嵌套時(shí)，嚴(yán)格按照的規(guī)范，對(duì)于單獨(dú)的一個(gè)來(lái)說(shuō)，對(duì)齊，縮進(jìn)兩個(gè)半角空格，中如果還有嵌套的表格，也縮進(jìn)兩個(gè)半角空格，如果中沒(méi)有任何嵌套的表格，結(jié)束標(biāo)記應(yīng)該與處于同一行，不要換行，

如我們注意在源代碼中不應(yīng)有這樣的代碼：

而應(yīng)該是這樣的：

這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格，以上不規(guī)范的寫(xiě)法相當(dāng)于無(wú)意中增加一個(gè)半角空格，如果確實(shí)有必要增加一個(gè)半角空格，也應(yīng)該這樣寫(xiě)：

屬于同一個(gè)級(jí)別的

一定是左首對(duì)齊的，另外不允許沒(méi)有任何內(nèi)容的空的單元格存在，高度大于等于12px的單元格應(yīng)該在和之間寫(xiě)一個(gè)如果高度小于12px,則應(yīng)該在和之間插入一個(gè)1*1大小的透明的gif圖片，這是因?yàn)槟承g覽器認(rèn)為空單元格非法而不會(huì)予以解釋。如果代碼順序較亂，在DW3中可以通過(guò)command->applysouceformatting進(jìn)行重新整理！

5.Width和height的寫(xiě)法也有統(tǒng)一的規(guī)范，一般情況下只有一列的表格，width寫(xiě)在

的標(biāo)簽內(nèi)，只有一行的表格，height寫(xiě)在的標(biāo)簽內(nèi)，多行多列的表格，width和height寫(xiě)在第一行或者第一列的標(biāo)簽內(nèi)。總之遵循一條原則：不出現(xiàn)多于一個(gè)的控制同一個(gè)單元格大小的height和width,保證任何一個(gè)width和height都是有效的，也就是你改動(dòng)代碼中任何一個(gè)width和height的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長(zhǎng)時(shí)間的練習(xí)和思考。

/一般原則

1.在排布表格之前，請(qǐng)大家一定要好好思考一個(gè)最佳的方案，表格的嵌套盡量控制在三層以內(nèi)，并且應(yīng)該盡量避免兩個(gè)標(biāo)記，經(jīng)驗(yàn)表明，這兩個(gè)標(biāo)記會(huì)帶來(lái)許多麻煩。

2.一個(gè)網(wǎng)頁(yè)要盡量避免用整個(gè)一張大表格，所有的內(nèi)容都嵌套在這個(gè)大表格之內(nèi)，因?yàn)闉g覽器在解釋頁(yè)面的元素時(shí)，是以表格為單位逐一顯示，如果一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對(duì)一片空白很長(zhǎng)時(shí)間，然后所有的網(wǎng)頁(yè)內(nèi)容同時(shí)出現(xiàn)。如果必須這樣做，請(qǐng)使用

標(biāo)記，以便能夠使這個(gè)大表格分塊顯示。

3.排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用或者全角空格來(lái)達(dá)到效果，規(guī)范的做法是在樣式表中定義p{text-indent:2em;}然后給每一段加上

標(biāo)記，注意，一般情況下，請(qǐng)不要省略

結(jié)束標(biāo)記。

4.原則上，我們禁止用來(lái)人為干預(yù)圖片顯示的尺寸，而且建議標(biāo)簽中不要帶上width和height兩個(gè)屬性，這是因?yàn)橹谱鬟^(guò)程中，圖片往往需要反復(fù)的修改，這樣可以避免人為干預(yù)圖片顯示的尺寸，盡可能的發(fā)揮瀏覽器自身的功能；但是這樣的一個(gè)副作用是當(dāng)網(wǎng)頁(yè)還未加載圖片時(shí)，不會(huì)留出圖片的站位大小，可能會(huì)造成網(wǎng)頁(yè)在加載過(guò)程中抖動(dòng)（如果圖片是插在一個(gè)固定大小的表格里的，不會(huì)有這個(gè)現(xiàn)象），尤其是當(dāng)圖片的尺寸較大時(shí)，這種現(xiàn)象會(huì)很明顯，所以當(dāng)預(yù)料到這種會(huì)明顯導(dǎo)致網(wǎng)頁(yè)抖動(dòng)的情況會(huì)發(fā)生時(shí)，請(qǐng)大家務(wù)必在最后給附上width和height屬性。

5.為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中請(qǐng)盡量不要使用

來(lái)人工干預(yù)分段。

6.不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周?chē)睦ㄌ?hào)應(yīng)該使用半角括號(hào)。

7.所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，禁止在頁(yè)面中出現(xiàn)標(biāo)記。

8.請(qǐng)不要在網(wǎng)頁(yè)中連續(xù)出現(xiàn)多于一個(gè)的也盡量少使用全角空格（英文字符集下，全角空格會(huì)變成亂碼），空白應(yīng)該盡量使用text-indent,padding,margin,hspace,vspace以及透明的gif圖片來(lái)實(shí)現(xiàn)。

9.中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為verdana和arial兩種字體。

10.行距建議用百分比來(lái)定義，常用的兩個(gè)行距的值是line-height:120%/150%.

11.網(wǎng)站中的路徑全部采用相對(duì)路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫(xiě)全名，如我們不必這樣：而應(yīng)該這樣：

12、嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13、“網(wǎng)頁(yè)大小”定義為網(wǎng)頁(yè)的所有文件大小的總和，包括HTML文件和所有的嵌入的對(duì)象。用戶喜歡快的而不是新奇的站點(diǎn)。對(duì)于解調(diào)器用戶，網(wǎng)頁(yè)大小保持在34K以下為合適。

/文件命名原則

1.每一個(gè)目錄中應(yīng)該包含一個(gè)缺省的html文件，文件名統(tǒng)一用index.htm

2．文件名稱統(tǒng)一用小寫(xiě)的英文字母、數(shù)字和下劃線的組合。

3.命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個(gè)成員能夠方便的理解每一個(gè)文件的意義，二是當(dāng)我們?cè)谖募A中使用“按名稱排例”的命令時(shí)，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計(jì)算負(fù)載量等等操作。

4.下面以“新聞”（包含“國(guó)內(nèi)新聞”和“國(guó)際新聞”）這個(gè)欄目來(lái)說(shuō)明html文件的命名原則：

在根目錄下開(kāi)設(shè)news目錄

第一條缺省新聞取名index.htm

所有屬于“國(guó)內(nèi)新聞”的新聞依次取名為：china_1.htm,china_2.htm,…

所有屬于“國(guó)際新聞”的新聞依次取名為：internation_1.htm,internation_2.htm,…

如果文件的數(shù)量是兩位數(shù)，請(qǐng)將前九個(gè)文件命名為：china_01.htm,china_02.htm以保證所有的文件能夠在文件夾中正確排序。

5.圖片的命名原則遵循以下幾條規(guī)范：

名稱分為頭尾兩兩部分，用下劃線隔開(kāi)。

頭部分表示此圖片的大類性質(zhì)，例如廣告、標(biāo)志、菜單、按鈕等等。

一般來(lái)說(shuō):

放置在頁(yè)面頂部的廣告、裝飾圖案等長(zhǎng)方形的圖片我們?nèi)∶篵anner

標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo

在頁(yè)面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨閎utton

在頁(yè)面上某一個(gè)位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu

裝飾用的照片我們?nèi)∶簆ic

不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle

依照此原則類推。

尾部分用來(lái)表示圖片的具體含義。

篇（7）

以網(wǎng)站內(nèi)容為主導(dǎo)，向?yàn)g覽者表述和傳達(dá)咨詢，如產(chǎn)品、服務(wù)、理念、文化等等，根據(jù)內(nèi)容，分為幾大部分，再根據(jù)功能劃分，最后進(jìn)行網(wǎng)站頁(yè)面的設(shè)計(jì)美化工作。大致可以分為：菜單欄，導(dǎo)視欄和一些輔助功能欄，人們比較習(xí)慣于將這些功能劃分在上面，左側(cè)和右側(cè)。傳統(tǒng)的網(wǎng)站設(shè)計(jì)過(guò)于呆板，已經(jīng)不再適應(yīng)現(xiàn)在網(wǎng)絡(luò)飛速發(fā)展的今天了。而作為企業(yè)宣傳的其中一種，提升企業(yè)互聯(lián)網(wǎng)品牌形象中至關(guān)重要的一部分就是精美的網(wǎng)頁(yè)設(shè)計(jì)。

（二）豐富多樣的動(dòng)態(tài)效果的網(wǎng)站頁(yè)面逐漸出現(xiàn)

信息時(shí)代的新媒體，其與瀏覽者進(jìn)行網(wǎng)絡(luò)互動(dòng)的特點(diǎn)極大地了新環(huán)境下的交互式設(shè)計(jì)革命。瀏覽者已經(jīng)不僅僅滿足于通過(guò)鼠標(biāo)機(jī)械地點(diǎn)擊來(lái)瀏覽網(wǎng)頁(yè),而是使用者要求選擇導(dǎo)航菜單進(jìn)行花樣翻新。現(xiàn)在加入動(dòng)畫(huà)語(yǔ)言的網(wǎng)站設(shè)計(jì)越來(lái)越受大眾的喜愛(ài)，一些國(guó)內(nèi)的藝術(shù)類獨(dú)立網(wǎng)站，一些私人BLOG，和一些追求經(jīng)典的企業(yè)都已開(kāi)啟了亦或優(yōu)美的，亦或幽默搞笑的動(dòng)畫(huà)互動(dòng)功能。在韓國(guó)和日本的網(wǎng)站設(shè)計(jì)，動(dòng)畫(huà)語(yǔ)言已經(jīng)運(yùn)用的很成熟了，而國(guó)內(nèi)的騰訊QQ空間，已經(jīng)在把個(gè)人空間做出了很多動(dòng)畫(huà)效果的方便初見(jiàn)成效。

二、動(dòng)漫元素在網(wǎng)頁(yè)設(shè)計(jì)中的必要性

加拿大著名的傳播理論家赫伯特•馬歇爾•麥克盧漢在他的經(jīng)典著作《理解媒介-一論人的延伸》一書(shū)中寫(xiě)道:“罰矛弄姆容易把技術(shù)工具作為試用者犯罪孽的替罪羊，現(xiàn)代科學(xué)產(chǎn)品的本事無(wú)所謂好壞，決定他們價(jià)值的是他們的使用方式。”網(wǎng)站與人的互動(dòng)設(shè)計(jì)就好比是一場(chǎng)互聯(lián)網(wǎng)設(shè)計(jì)革命，它是人類在視覺(jué)、聽(tīng)覺(jué)和觸覺(jué)等方面的要求和提高，是人類對(duì)于世界的審美的提高。一個(gè)成功的網(wǎng)站設(shè)計(jì)，除了對(duì)于網(wǎng)站內(nèi)容是硬件要求之外，對(duì)于網(wǎng)頁(yè)和瀏覽者的互動(dòng)設(shè)計(jì)則是重要的軟件要求。瀏覽者和網(wǎng)站的互動(dòng)性與參與性，決定了該網(wǎng)站對(duì)于大眾的吸引力和點(diǎn)擊率。任何一家網(wǎng)站都有一定的互動(dòng)性,而好的動(dòng)畫(huà)語(yǔ)言添加在這種互動(dòng)性的體驗(yàn)中就為網(wǎng)站增添了更多的趣味性。

三、動(dòng)畫(huà)元素在網(wǎng)頁(yè)設(shè)計(jì)中的具體體現(xiàn)

（一）主頁(yè)互動(dòng)

主頁(yè)中的動(dòng)畫(huà)展示是最關(guān)鍵的一部分，也是大多企業(yè)投入設(shè)計(jì)費(fèi)用最多的一部分。形象展示動(dòng)畫(huà)如同網(wǎng)站的形象廣告,起著不可忽視的作用。它的強(qiáng)烈的動(dòng)態(tài)效果,給瀏覽者的內(nèi)心留下一個(gè)最初且深刻的印象，將瀏覽者輕易的引導(dǎo)入該企業(yè)文化中。一般情況下，企業(yè)會(huì)將自己的企業(yè)理念或者是企業(yè)的產(chǎn)品做成宣傳片置于首頁(yè)的動(dòng)畫(huà)中，抑或是做一個(gè)關(guān)于企業(yè)產(chǎn)品的小游戲，來(lái)與瀏覽者進(jìn)行互動(dòng)。這樣，在用戶打開(kāi)網(wǎng)站時(shí)，便會(huì)被一種包裹式的試聽(tīng)效果和形象展示所吸引。

（二）鼠標(biāo)顯示

目前鼠標(biāo)的動(dòng)態(tài)效果千奇百怪,如瀏覽者將鼠標(biāo)移上導(dǎo)航欄時(shí)和點(diǎn)擊后出現(xiàn)的動(dòng)畫(huà)效果,可以給瀏覽者帶來(lái)一種新奇感。目前有很多網(wǎng)站開(kāi)始以動(dòng)畫(huà)的特效鼠標(biāo)來(lái)吸引瀏覽者的眼球,或展現(xiàn)其網(wǎng)站的特色。例如賣(mài)蔬菜的網(wǎng)站往往會(huì)將鼠標(biāo)做成胡蘿卜的效果。當(dāng)然,除了鼠標(biāo)動(dòng)畫(huà)設(shè)計(jì)中需要的語(yǔ)言編程。設(shè)計(jì)師在做鼠標(biāo)動(dòng)畫(huà)效果時(shí),還要注意另外兩個(gè)方面：一種是關(guān)于色彩的動(dòng)畫(huà)，通過(guò)色彩的明暗度或者飽和度等等方面的變化，進(jìn)行動(dòng)畫(huà)效果。另一種就是在鼠標(biāo)滑過(guò)或者點(diǎn)擊的過(guò)程中，鼠標(biāo)周?chē)霈F(xiàn)例如小范圍的閃亮或者光暈的動(dòng)畫(huà)效果，這類效果無(wú)形中為網(wǎng)站添加了許多夢(mèng)幻效果。這些設(shè)計(jì)主要還是要和網(wǎng)站整體設(shè)計(jì)風(fēng)格進(jìn)行搭配設(shè)計(jì)。

（三）進(jìn)度條設(shè)計(jì)

目前網(wǎng)站中的進(jìn)度條設(shè)計(jì)是應(yīng)用動(dòng)畫(huà)元素最多和最普遍的地方了。由于網(wǎng)速的限制，導(dǎo)致在瀏覽者打開(kāi)網(wǎng)站或者下載時(shí)中間會(huì)出現(xiàn)卡殼或空擋，這時(shí)候大多會(huì)跳出一個(gè)進(jìn)度條來(lái)顯示其運(yùn)行速度。各大網(wǎng)站對(duì)于進(jìn)度條的設(shè)計(jì)真可謂是百花齊放各顯神通。進(jìn)度條設(shè)計(jì)雖然是一個(gè)很不起眼的小FLASH動(dòng)畫(huà)，但不小覷這些細(xì)節(jié)設(shè)計(jì)，進(jìn)度條的設(shè)計(jì)精致與否，也關(guān)系到整個(gè)網(wǎng)站的設(shè)計(jì)成敗，乃至企業(yè)文化的精髓。

篇（8）

二、什么樣的設(shè)計(jì)更適合web頁(yè)面

1.慎用較“重”的圖形元素這里圖形元素的輕重不是色調(diào)的輕重，是形式的輕和重，形式的輕重和內(nèi)容相呼應(yīng)，網(wǎng)頁(yè)設(shè)計(jì)的一大趨勢(shì)就是越來(lái)越“輕”。除了對(duì)圓角效果和高光效果等效果的審美疲勞之外，網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)始意識(shí)到好的網(wǎng)頁(yè)設(shè)計(jì)更注重的是將網(wǎng)頁(yè)內(nèi)容與網(wǎng)頁(yè)形式結(jié)合起來(lái)，而非形式的堆砌。所以設(shè)計(jì)師在應(yīng)用那些較“重”的圖形設(shè)計(jì)時(shí)，一定要慎重思考，考慮到該圖形的應(yīng)用是否有必要以及該設(shè)計(jì)是否與受眾的氣質(zhì)相契合。

2.內(nèi)容和形式的分離對(duì)于一些比較強(qiáng)調(diào)視覺(jué)效果的特殊產(chǎn)品，也可以利用圖片格式和一些前端知識(shí)對(duì)網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行優(yōu)化，比如內(nèi)容和形式的分離。一些國(guó)外比較流行的設(shè)計(jì)風(fēng)格都是通過(guò)大幅的背景圖進(jìn)行氣氛的渲染和意境的傳達(dá)。這樣做的一個(gè)好處就是能把需要用到圖片的視覺(jué)元素進(jìn)行集中的壓縮優(yōu)化，同時(shí)因?yàn)榍岸藢?shí)現(xiàn)時(shí)一般會(huì)用相近的背景色先進(jìn)行填充，然后在逐步顯示背景圖，就不會(huì)因?yàn)榧虞d太慢而拖慢用戶的訪問(wèn)速度。

3.通過(guò)較小的視覺(jué)犧牲換取較大的性能提升有時(shí)候?yàn)榱颂嵘?yè)面的加載速度達(dá)到更好的用戶體驗(yàn)，不得不對(duì)設(shè)計(jì)進(jìn)行優(yōu)化，這個(gè)時(shí)候就需要犧牲一部分視覺(jué)效果利用網(wǎng)頁(yè)設(shè)計(jì)師掌握的圖片格式知識(shí)更有目的性的優(yōu)化設(shè)計(jì)網(wǎng)頁(yè)。例如著名的淘寶“雙十一”大促銷(xiāo)活動(dòng)的宣傳網(wǎng)頁(yè)網(wǎng)頁(yè)，由于雙十一期間，該網(wǎng)頁(yè)的訪問(wèn)量非常大并且為了配合商家的宣傳活動(dòng)需要在網(wǎng)頁(yè)上加載非常多的商品圖片，這時(shí)候就需要網(wǎng)頁(yè)設(shè)計(jì)師對(duì)雙十一的促銷(xiāo)活動(dòng)網(wǎng)頁(yè)的圖形進(jìn)行優(yōu)化以達(dá)到提升網(wǎng)頁(yè)性能的目的。網(wǎng)頁(yè)設(shè)計(jì)師可以去掉一些不太重要的高光、漸變和陰影效果，從而降低圖片文件的大小，提高圖片文件的加載速度。

4.圖形藝術(shù)的界面處理新穎的網(wǎng)頁(yè)圖形藝術(shù)設(shè)計(jì)可以牢牢地吸引住瀏覽者的注意力，設(shè)計(jì)具有創(chuàng)意、布局合理、設(shè)計(jì)規(guī)范的網(wǎng)頁(yè)也是提高網(wǎng)頁(yè)瀏覽量的的重中之重。一個(gè)圖形運(yùn)用恰當(dāng)、設(shè)計(jì)人性化的網(wǎng)頁(yè)可以讓瀏覽者對(duì)網(wǎng)站心生好感，極大地提高瀏覽者瀏覽該網(wǎng)頁(yè)的欲望。所以，網(wǎng)頁(yè)設(shè)計(jì)者要注重運(yùn)用一切科學(xué)技術(shù)手段來(lái)設(shè)計(jì)圖形藝術(shù)，保證頁(yè)面效果給人以眼前一亮或是舒適的感覺(jué)，讓圖形首先在視覺(jué)上給予客戶一種沖擊，給客戶一個(gè)良好的第一印象。

篇（9）

二、思考與探索

（一）優(yōu)化教材體系

“工欲善其事，必先利其器。”完善本課程的教與學(xué)關(guān)鍵之一便是優(yōu)化教材，合適的教材在教學(xué)環(huán)節(jié)中起著舉足輕重的作用。高職高專《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程以往選用的教材，對(duì)于初學(xué)者尤其是學(xué)習(xí)能力稍差的高職學(xué)生而言難度較大，以至于教學(xué)中經(jīng)常出現(xiàn)學(xué)生學(xué)習(xí)興趣降低、教師教學(xué)課時(shí)明顯不夠等問(wèn)題。網(wǎng)頁(yè)設(shè)計(jì)與制作課程教材，內(nèi)容應(yīng)以教授基礎(chǔ)、基礎(chǔ)與案例相結(jié)合、案例分析等層層遞進(jìn)的原則進(jìn)行選擇，組織與編排方式以折衷式組織及螺旋式排列組合為優(yōu)。在選擇到合適的教材基礎(chǔ)上，教師要立足于教材，篩選教學(xué)內(nèi)容，以使教學(xué)過(guò)程中教材利用最大化。

（二）改革教學(xué)方法與手段

1.明確學(xué)習(xí)目標(biāo)

分階段教學(xué)根據(jù)高職高專學(xué)生特點(diǎn)，明確學(xué)習(xí)目標(biāo)，進(jìn)行分階段教學(xué)。前期以講授課程基礎(chǔ)為主，旨在讓學(xué)生熟練掌握本課程基礎(chǔ)操作，以便中后期案例教學(xué)能夠及順利遞進(jìn)難度；中后期教學(xué)需要理論聯(lián)系實(shí)際，結(jié)合啟發(fā)式、直觀式、交互式教學(xué)方法，鼓勵(lì)學(xué)生獨(dú)立思考，勤于動(dòng)手，激發(fā)他們的學(xué)習(xí)積極性和主動(dòng)性。

2.加強(qiáng)實(shí)踐

注重技能培養(yǎng)任務(wù)驅(qū)動(dòng)，小組協(xié)作。開(kāi)展以制作某一特定網(wǎng)站或者多類型網(wǎng)站為目標(biāo)的項(xiàng)目教學(xué)，使得學(xué)生不僅能夠掌握《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的基本知識(shí)和基本技能，提高學(xué)習(xí)興趣，而且在小組學(xué)習(xí)的過(guò)程中，學(xué)會(huì)與他人合作，共同完成任務(wù)。同時(shí)，在專業(yè)課程教學(xué)中滲透多類型網(wǎng)站內(nèi)容相關(guān)教育內(nèi)容，使學(xué)生在不知不覺(jué)中學(xué)到更多學(xué)科知識(shí)。此外，還可定期舉辦技能大賽和知識(shí)競(jìng)賽，以鞏固學(xué)生的學(xué)習(xí)效果。以職業(yè)需求為導(dǎo)向，加強(qiáng)實(shí)習(xí)實(shí)訓(xùn)平臺(tái)建設(shè)，強(qiáng)化實(shí)踐教學(xué)，教學(xué)與實(shí)訓(xùn)實(shí)現(xiàn)一地化，重視校企合作。高職教育人才培養(yǎng)模式是根據(jù)職業(yè)崗位需要來(lái)進(jìn)行，立足于企業(yè)人才需求實(shí)際，在課程中開(kāi)展基于工作任務(wù)的項(xiàng)目教學(xué)。我們應(yīng)利用校企合作共同構(gòu)建和實(shí)施基于工作任務(wù)的項(xiàng)目課程體系，使學(xué)生真正做到理論聯(lián)系實(shí)踐，在獲取知識(shí)的同時(shí)充分掌握專業(yè)崗位技能，以充分體現(xiàn)出高職人才培養(yǎng)的職業(yè)性和實(shí)踐性。

（三）加強(qiáng)“雙師型”教師

培養(yǎng)優(yōu)秀的師資是高職院校辦學(xué)的根本保證。提高高職教師“雙師”素質(zhì)是高職教育發(fā)展的需要，也是教師個(gè)人發(fā)展的需要。高職院校應(yīng)鼓勵(lì)現(xiàn)有專職教師在其專業(yè)領(lǐng)域不斷學(xué)習(xí)，及時(shí)更新自己現(xiàn)有的知識(shí)結(jié)構(gòu)，進(jìn)行自我提升，并有針對(duì)性地將部分教師安排在合作企業(yè)頂崗工作，增強(qiáng)其實(shí)踐經(jīng)驗(yàn)，提高其動(dòng)手能力，使他們對(duì)行業(yè)需求變化了如指掌，以便清晰地掌握學(xué)生的培養(yǎng)方向。

篇（10）

傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)課程是按照教材的內(nèi)容，講解HTML語(yǔ)言和DreamWeaver工具的使用。學(xué)生往往不能將所學(xué)知識(shí)聯(lián)系起來(lái)。學(xué)期結(jié)束后，學(xué)生對(duì)整個(gè)網(wǎng)站的構(gòu)建缺乏清晰的概念，提交的作品質(zhì)量較差。在對(duì)學(xué)生進(jìn)行期中課程質(zhì)量問(wèn)卷調(diào)查中，80％的學(xué)生都認(rèn)為課程所學(xué)內(nèi)容可以理解，但是當(dāng)教師要求學(xué)生動(dòng)手完成網(wǎng)站時(shí)，90％的學(xué)生都不能很好完成。這正是因?yàn)樵趥鹘y(tǒng)教學(xué)中一般采用講授法和實(shí)驗(yàn)法，一周2學(xué)時(shí)的理論講解，2學(xué)時(shí)的實(shí)驗(yàn)課。教師按照教材章節(jié)進(jìn)行教學(xué)并布置實(shí)驗(yàn)內(nèi)容，這樣就造成了學(xué)生只對(duì)單一章節(jié)知識(shí)的理解，難以將所學(xué)內(nèi)容聯(lián)系在一起。

1．2教材過(guò)時(shí)，影響教學(xué)效果

網(wǎng)頁(yè)設(shè)計(jì)課程是一門(mén)應(yīng)用極強(qiáng)的課程，技術(shù)和工具的更新?lián)Q代較快。而與之矛盾的卻是教材的出版周期較長(zhǎng)，往往跟不上技術(shù)發(fā)展的腳步。例如，當(dāng)前，DreamweaverCS6已經(jīng)成為主流網(wǎng)頁(yè)設(shè)計(jì)的軟件，但是一些教材還停留在講解Dreamweav－erCS3上，導(dǎo)致學(xué)生的興趣不高，不利于學(xué)生創(chuàng)造能力的培養(yǎng)，違背了教學(xué)目標(biāo)的要求。同時(shí)，按照教材的內(nèi)容講解也限制了教師的教學(xué)，目前高校中使用的網(wǎng)頁(yè)設(shè)計(jì)教材分為兩種，一種是基于理論性質(zhì)的，單純講解HTML，一種是介紹Dreamweaver網(wǎng)頁(yè)開(kāi)發(fā)的。前一種不適合非計(jì)算機(jī)專業(yè)學(xué)生學(xué)習(xí)，內(nèi)容比較枯燥，學(xué)生在沒(méi)有計(jì)算機(jī)程序語(yǔ)言的基礎(chǔ)上很難理解。一般高校對(duì)非計(jì)算機(jī)專業(yè)學(xué)生都選擇使用第二種介紹Dreamweaver的教材，而該教材則會(huì)造成學(xué)生的開(kāi)發(fā)水平較低，過(guò)度依賴工具，無(wú)法解決實(shí)際問(wèn)題。

1．3教學(xué)方法單一，學(xué)生學(xué)習(xí)興趣不高

對(duì)于公共課來(lái)說(shuō)，學(xué)習(xí)興趣是學(xué)生是否能學(xué)好課程的重要因素。對(duì)于計(jì)算機(jī)應(yīng)用能力較差的非計(jì)算機(jī)專業(yè)學(xué)生來(lái)說(shuō)，在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課程時(shí)，如何提高學(xué)生的興趣至關(guān)重要。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)采用2學(xué)時(shí)理論和2學(xué)時(shí)實(shí)驗(yàn)課的形式進(jìn)行，學(xué)生缺少動(dòng)手的機(jī)會(huì)，往往使學(xué)生對(duì)課程缺乏興趣，這阻礙了學(xué)生的能動(dòng)性與創(chuàng)造性的發(fā)揮。對(duì)學(xué)生進(jìn)行調(diào)查問(wèn)卷中，70％的學(xué)生都提出課程設(shè)置實(shí)驗(yàn)時(shí)間較少，應(yīng)將課程都安排在實(shí)驗(yàn)室等問(wèn)題，還有一些學(xué)生認(rèn)為網(wǎng)頁(yè)設(shè)計(jì)課程應(yīng)以提高學(xué)生興趣為出發(fā)點(diǎn)。這些都說(shuō)明了學(xué)生對(duì)于增加自己實(shí)踐機(jī)會(huì)的渴望。

2基于任務(wù)驅(qū)動(dòng)的教學(xué)改革

任務(wù)驅(qū)動(dòng)教學(xué)法是指在學(xué)習(xí)課程中，學(xué)生在教師指導(dǎo)下，根據(jù)學(xué)習(xí)內(nèi)容完成任務(wù)的教學(xué)方法。任務(wù)驅(qū)動(dòng)教學(xué)之下，學(xué)生具有較強(qiáng)解決問(wèn)題的動(dòng)機(jī)，對(duì)學(xué)習(xí)資源能夠積極主動(dòng)的應(yīng)用，能夠進(jìn)行自主的探索與互動(dòng)協(xié)作的學(xué)習(xí)，最終圓滿完成課程指定的任務(wù)。它打破以往以傳授知識(shí)為主的傳統(tǒng)教學(xué)理念，建立以解決問(wèn)題、完成任務(wù)為主的多維互動(dòng)式的教學(xué)模式；并將再現(xiàn)式的教學(xué)變?yōu)樘骄渴降膶W(xué)習(xí)，學(xué)生處于一個(gè)積極的學(xué)習(xí)狀態(tài)，都能根據(jù)自己對(duì)當(dāng)前問(wèn)題的理解，運(yùn)用所學(xué)知識(shí)與自己特有的經(jīng)驗(yàn)提出方案來(lái)解決問(wèn)題。任務(wù)驅(qū)動(dòng)教學(xué)法是一種建立在建構(gòu)主義教學(xué)理論基礎(chǔ)上的教學(xué)法。它要求“任務(wù)”的目標(biāo)性和教學(xué)情境的創(chuàng)建。使學(xué)生帶著真實(shí)的任務(wù)在探索中學(xué)習(xí)。在這個(gè)過(guò)程中，學(xué)生還會(huì)不斷地獲得成就感，可以更大地激發(fā)他們的求知欲望，逐步形成一個(gè)感知心智活動(dòng)的良性循環(huán)，從而培養(yǎng)出獨(dú)立探索、勇于開(kāi)拓進(jìn)取的自學(xué)能力。

2．1任務(wù)的制定

根據(jù)網(wǎng)頁(yè)設(shè)計(jì)課程的內(nèi)容與特點(diǎn)，首先在學(xué)期開(kāi)始時(shí)給出課程的總?cè)蝿?wù)以及總的教學(xué)目標(biāo)。課程的總?cè)蝿?wù)是以小組為單位，選擇教師給定的任務(wù)書(shū)中的網(wǎng)站題目，設(shè)計(jì)實(shí)現(xiàn)一個(gè)靜態(tài)網(wǎng)站。總的教學(xué)目標(biāo)是掌握設(shè)計(jì)網(wǎng)站的方法。（1）第一章是初識(shí)網(wǎng)頁(yè)設(shè)計(jì)，教師會(huì)首先講解幾個(gè)靜態(tài)網(wǎng)站的實(shí)例，讓學(xué)生對(duì)所學(xué)課程有一定了解，之后講解相關(guān)的概念和設(shè)計(jì)開(kāi)發(fā)工具DreamweaverCS6；學(xué)生的任務(wù)是根據(jù)小組所選擇的題目，在互聯(lián)網(wǎng)中查找資料，書(shū)寫(xiě)開(kāi)題報(bào)告。同時(shí)每組出一名學(xué)生向大家介紹本組的想法。（2）第二章是學(xué)習(xí)建立本地站點(diǎn)，教師會(huì)講解建立站點(diǎn)的重要性，講解相對(duì)路徑和絕對(duì)路徑，之后講解如何建立站點(diǎn)；學(xué)生的任務(wù)是為自己的網(wǎng)站建立站點(diǎn)，預(yù)估網(wǎng)站的規(guī)模，添加相應(yīng)網(wǎng)頁(yè)并改名。（3）第三章是網(wǎng)頁(yè)頭部信息，教師講解如何添加網(wǎng)頁(yè)標(biāo)題、關(guān)鍵字和說(shuō)明；學(xué)生的任務(wù)是為站點(diǎn)中所有網(wǎng)頁(yè)添加頭部信息。（4）第四章是網(wǎng)頁(yè)布局，教師講解網(wǎng)頁(yè)布局技術(shù)：表格、DIV、框架以及模板和庫(kù)；學(xué)生的任務(wù)是對(duì)網(wǎng)站進(jìn)行前期布局。（5）第五章是超級(jí)鏈接，教師講解超級(jí)鏈接；學(xué)生的任務(wù)是制作導(dǎo)航欄。（6）第六章是添加多媒體，教師講解添加圖片、背景音樂(lè)、Flash、滾動(dòng)欄等內(nèi)容；學(xué)生的任務(wù)是準(zhǔn)備網(wǎng)站中需要的圖片、flash等資源，將資源添加至網(wǎng)頁(yè)。（7）第七章是表單，教師講解如何添加和設(shè)置表單；學(xué)生的任務(wù)是給網(wǎng)站添加注冊(cè)頁(yè)和用戶登錄。（8）第八章是CSS，教師講解CSS的應(yīng)用；學(xué)生對(duì)網(wǎng)站添加內(nèi)部樣式和外部樣式表。（9）第九章是網(wǎng)站，教師講解使用IIS在局域網(wǎng)中如何站點(diǎn)；學(xué)生的任務(wù)是相互網(wǎng)站，對(duì)其他組內(nèi)容進(jìn)行訪問(wèn)。課程內(nèi)容講完后，預(yù)留兩周課程時(shí)間，學(xué)生對(duì)所做的作品進(jìn)行整理、美化。課程結(jié)束后，小組為單位對(duì)作品進(jìn)行展示和提交。

2．2考核方法與評(píng)分標(biāo)準(zhǔn)

網(wǎng)頁(yè)設(shè)計(jì)課程總成績(jī)由平時(shí)成績(jī)和期末成績(jī)兩部分組成。其中平時(shí)成績(jī)占總成績(jī)的50％，期末成績(jī)占總成績(jī)的50％。平時(shí)成績(jī)除了到課情況外，主要依據(jù)學(xué)生在組內(nèi)的貢獻(xiàn)、每期任務(wù)的完成情況以及整個(gè)團(tuán)隊(duì)的表現(xiàn)。與傳統(tǒng)的成績(jī)?cè)u(píng)定不同，該課程更注重學(xué)生的平時(shí)表現(xiàn)是否積極、是否有團(tuán)隊(duì)合作精神。期末成績(jī)的考核包括提交的作品和學(xué)生的答辯情況，評(píng)分指標(biāo)與所占分?jǐn)?shù)如表3所示。提交的作品主要考察界面是否合理、美觀，是否與開(kāi)題所寫(xiě)的需求分析內(nèi)容一致，網(wǎng)站是否能正常的顯示以及配套的網(wǎng)站文檔是否完善等。答辯模擬項(xiàng)目經(jīng)理與客戶的角色進(jìn)行，教師提出問(wèn)題，學(xué)生進(jìn)行回答，查看學(xué)生的現(xiàn)場(chǎng)反應(yīng)力與問(wèn)題解決能力。

篇（11）

（2）網(wǎng)頁(yè)設(shè)計(jì)技術(shù)不斷地發(fā)展變化，新的技術(shù)、新的方法也不斷涌現(xiàn)。從1997年Dreamweaver首次推出，經(jīng)歷Mx、Mx2004、到Dreamweaver8，現(xiàn)在普遍使用ADODBDreamweaverCs系列，我這學(xué)期使用的dreamweavercs4。網(wǎng)頁(yè)布局也從傳統(tǒng)的表格布局轉(zhuǎn)換為Div布局。所以不論是從選擇軟件到選擇網(wǎng)頁(yè)設(shè)計(jì)的方法，都不能太落后。

（3）從目前網(wǎng)絡(luò)公司行業(yè)來(lái)看，網(wǎng)頁(yè)設(shè)計(jì)與后臺(tái)代碼分開(kāi)日趨明顯，所以并不一定要求學(xué)生設(shè)計(jì)與編程并重，畢竟對(duì)于中高職學(xué)生，編程相對(duì)較難理解。設(shè)計(jì)方面可以圖文并茂，在一定程度上能夠激發(fā)學(xué)生學(xué)習(xí)的興趣。對(duì)教材的使用也必須同時(shí)考慮在內(nèi)，有部分教材案例缺乏美感，計(jì)算機(jī)專業(yè)的學(xué)生對(duì)審美本身就很缺乏。對(duì)于學(xué)習(xí)初期的學(xué)生，可以引導(dǎo)學(xué)生多欣賞比較優(yōu)秀的網(wǎng)頁(yè)。早期可以模仿，不是美術(shù)專業(yè)畢業(yè)，這方面不是一下子能夠改變過(guò)來(lái)，自己也是深有體會(huì)，只有在今后長(zhǎng)期的鍛煉、設(shè)計(jì)中尋找。

2教學(xué)方法

2.1課前準(zhǔn)備在教學(xué)之前首先從網(wǎng)上下載優(yōu)秀的網(wǎng)頁(yè)截圖給學(xué)生欣賞，然后制作一個(gè)非常簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)以激發(fā)學(xué)生學(xué)習(xí)的興趣。有很多教材編輯的很全，從文字帶后臺(tái)編碼。對(duì)于各種教材，并不一定要全部講解。只需要講解實(shí)際操作性的。例如從文字到布局。

2.2教學(xué)方法教學(xué)過(guò)程是教師與學(xué)生之間信息傳遞及反饋的過(guò)程。在學(xué)習(xí)過(guò)程中，要給學(xué)生明確的思路，運(yùn)用任務(wù)驅(qū)動(dòng)法、模塊教學(xué)法、案例教學(xué)法和項(xiàng)目教學(xué)法等多種教學(xué)手段，引導(dǎo)學(xué)生主動(dòng)思考，解決問(wèn)題。不論是選用何種教學(xué)方法，最重要的一點(diǎn)是要貼合實(shí)際。以上幾種教學(xué)方法并不一定對(duì)每個(gè)章節(jié)都適用，也不一定對(duì)每門(mén)課都適用，因人而異。總之，要貼合自己的實(shí)際，以及學(xué)生的素質(zhì)、水平、層次等等。

2.2.1任務(wù)驅(qū)動(dòng)法在教學(xué)過(guò)程中，以完成任務(wù)為導(dǎo)向，把教學(xué)內(nèi)容貫穿于每個(gè)任務(wù)中，在完成任務(wù)的過(guò)程中，發(fā)現(xiàn)問(wèn)題、解決問(wèn)題。采用任務(wù)驅(qū)動(dòng)的教學(xué)方法，任務(wù)設(shè)計(jì)是關(guān)鍵。比如說(shuō)在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中，文字、鏈接、圖片章節(jié)都可以用任務(wù)驅(qū)動(dòng)法，網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課本身就是易學(xué)易忘，所以在設(shè)計(jì)任務(wù)的時(shí)候，不斷復(fù)習(xí)之前學(xué)習(xí)的內(nèi)容，以此來(lái)加深和鞏固之前所學(xué)習(xí)的知識(shí)。任務(wù)驅(qū)動(dòng)評(píng)價(jià)中教師評(píng)價(jià)相對(duì)容易些，但是學(xué)生互評(píng)，現(xiàn)在還沒(méi)有系統(tǒng)能達(dá)到這樣的功能，有待于開(kāi)發(fā)。

2.2.2模塊教學(xué)法主要分為以下幾個(gè)步驟：劃分小組、確定內(nèi)容、布置任務(wù)、學(xué)生實(shí)施、評(píng)價(jià)結(jié)果。現(xiàn)在不僅是網(wǎng)絡(luò)公司還是其他企業(yè)等等，都是團(tuán)隊(duì)合作，講究的是團(tuán)結(jié)協(xié)作。網(wǎng)頁(yè)設(shè)計(jì)公司現(xiàn)在也是，很多網(wǎng)站界面都實(shí)行模塊化，每個(gè)人負(fù)責(zé)完成自己的任務(wù)。模塊教學(xué)法就是有目標(biāo)，有任務(wù)，有內(nèi)容。目前中高職學(xué)生水平參差不齊，所以在分組的時(shí)候要特別講究。每節(jié)的重點(diǎn)和難點(diǎn)一定要講透，盡量慢，有的時(shí)候雖然講過(guò)一遍，但是很少人能夠理解體會(huì)。有時(shí)候需要在做的過(guò)程中加以輔導(dǎo)，不能放鴨式學(xué)習(xí)。模塊化教學(xué)更適合用于網(wǎng)頁(yè)設(shè)計(jì)最后的綜合實(shí)例。例如完成網(wǎng)站首頁(yè)，需要設(shè)定目標(biāo)，分配每個(gè)成員的任務(wù)。但在實(shí)際運(yùn)用中，相對(duì)較難完成。個(gè)人觀點(diǎn)，模塊化教學(xué)不適用于網(wǎng)頁(yè)設(shè)計(jì)教學(xué)。