網(wǎng)頁設(shè)計(jì)與制作論文

網(wǎng)頁設(shè)計(jì)與制作論文長(zhǎng)江學(xué)院課程設(shè)計(jì)報(bào)告課程設(shè)計(jì)題目：網(wǎng)頁設(shè)計(jì)與制作姓名：張***學(xué)號(hào)：08****專業(yè)電子信息工程班級(jí)08**** 2010網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第1頁。

目錄網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第1頁。一網(wǎng)頁設(shè)計(jì)與制作的版面布局 11網(wǎng)頁的布局結(jié)構(gòu) 12網(wǎng)頁的布局設(shè)計(jì) 1二網(wǎng)頁的風(fēng)格的設(shè)計(jì)與制作 2四網(wǎng)頁的圖像的制作方法 3五網(wǎng)頁東華的設(shè)計(jì)與制作方法 5六心得體會(huì) 5網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第2頁。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第2頁。一網(wǎng)頁設(shè)計(jì)與制作的版面布局在考慮東華理工的主要版面，我們選擇的是“門”形布局：頁面上部是網(wǎng)站的標(biāo)志和廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容，布局類似于一個(gè)“門”字。1網(wǎng)頁的布局結(jié)構(gòu)從上圖中可以看出，網(wǎng)頁的整體布局結(jié)構(gòu)劃分為四行（從上到下），第一行來制作Logo，第二行制作導(dǎo)航，第三行制作內(nèi)容，第四行制作版權(quán)信息。然后在第三行又拆分為兩列（從左到右），分別在左右兩列中制作不同的內(nèi)容。在這個(gè)基礎(chǔ)上，可以對(duì)網(wǎng)頁布局進(jìn)行更細(xì)致的拆分，如果說前面的拆分是用來制作網(wǎng)頁的大框架，那么接下來拆分的就是內(nèi)容區(qū)域了，這里分析的方法和前面是完全一樣的，拆分后的效果如圖1-13所示，其中的文本表示在當(dāng)前“矩形塊”中放置的內(nèi)容。2網(wǎng)頁的布局設(shè)計(jì)網(wǎng)頁的布局設(shè)計(jì)，就是指網(wǎng)頁中圖像和文字之間的位置關(guān)系，簡(jiǎn)單來說也可以稱之為網(wǎng)頁排版。網(wǎng)頁布局設(shè)計(jì)最重要的目的就是傳達(dá)信息。一個(gè)并不能閱讀的網(wǎng)頁只能變成一個(gè)無用的鏈接。分割、組織和傳達(dá)信息并且使網(wǎng)頁易于閱讀、界面具有親和力和可用性是網(wǎng)頁設(shè)計(jì)師應(yīng)有的職責(zé)，只有這樣，瀏覽者才有更好的機(jī)會(huì)找出吸引他的東西。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第3頁。簡(jiǎn)單來說，可以把網(wǎng)頁中的內(nèi)容看成是一個(gè)一個(gè)的“矩形塊”，把多個(gè)“矩形塊”按照行和列的方式組織起來，就構(gòu)成了一個(gè)網(wǎng)頁。下面舉例來進(jìn)行說，如1所示，為東華理工長(zhǎng)江學(xué)院的網(wǎng)頁效果圖。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第3頁。圖2二網(wǎng)頁的風(fēng)格的設(shè)計(jì)與制作“門”形布局：頁面上部是網(wǎng)站的標(biāo)志和廣告條，左面是主菜單，右面放友情鏈接等，中間是主要內(nèi)容，布局類似于一個(gè)“門”字。對(duì)稱對(duì)比布局：該類結(jié)構(gòu)采取左右或者上下對(duì)稱布局，一半深色，一半淺色，一般多用于設(shè)計(jì)型站點(diǎn)。該種結(jié)構(gòu)的優(yōu)點(diǎn)是視覺沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)地結(jié)合比較困難網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第4頁。

四網(wǎng)頁的圖像的制作方法網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第4頁。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第5頁。網(wǎng)站的色系是瀏覽者整體的視覺觀感，若一個(gè)網(wǎng)站色系能有一致性，不僅會(huì)使網(wǎng)站看起來美觀，更能讓瀏覽者對(duì)內(nèi)容不易混淆，增加了瀏覽的簡(jiǎn)潔與方便。而網(wǎng)站的色系更能襯托出網(wǎng)站的主題，若色系能與主題合理搭配，將會(huì)增加瀏覽者的易讀性。

網(wǎng)站的色系包含了網(wǎng)頁的底色、文字字型、圖片的色系、顏色等等，這不單只是將顏色搭配得當(dāng)就算完美，還要配合每個(gè)內(nèi)容，及網(wǎng)站主題。對(duì)于網(wǎng)站的色系，應(yīng)該要在網(wǎng)站開始制作前，做好規(guī)劃及設(shè)計(jì)，才不會(huì)到著手制作網(wǎng)站時(shí)，難以搭配，甚至造成混亂的設(shè)計(jì)。

網(wǎng)頁的底色是整個(gè)網(wǎng)站風(fēng)格的重要指針。舉例來說，以黑色作為背景顏色的網(wǎng)頁，因黑色本對(duì)人的視覺上會(huì)造成黯淡的感覺，若是拿來用作活潑的兒童網(wǎng)站，就是不適合了。因?yàn)樾『⒆邮翘煺鏌o邪的、活潑的、有朝氣的，與黑色的沉穩(wěn)、黯淡，很難聯(lián)想在一起。

再舉個(gè)例子，若是寫一個(gè)有關(guān)于環(huán)保的網(wǎng)站，若用暗紅色作為網(wǎng)頁底色，決計(jì)不會(huì)有人聯(lián)想到網(wǎng)頁的內(nèi)容是與環(huán)保有關(guān)。當(dāng)然，每個(gè)人的審美觀不同，可能也會(huì)對(duì)顏色的代表性看法不同，但既然網(wǎng)站不是只寫給自己看的，就應(yīng)該要注意到大部分人可能會(huì)有的觀點(diǎn)，然后以眾人居多的觀點(diǎn)出發(fā)，來設(shè)計(jì)網(wǎng)頁。

文字字型上的設(shè)計(jì)，最好的網(wǎng)站是以所有瀏覽者都能看到的字型為主。常會(huì)看到有需多網(wǎng)站要求瀏覽者須自行下載某種字型，才能達(dá)到最佳瀏覽效果，這是種非常奇怪的行為。畢竟瀏覽者只是來找資料或是來看網(wǎng)站的內(nèi)容，不可能會(huì)因?yàn)檫@種「為達(dá)最佳瀏覽效果」，而自行下載所需要的字型。

當(dāng)所要求的字型若不下載，并不會(huì)影響到網(wǎng)站內(nèi)容上的瀏覽與不便，那么對(duì)瀏覽者的要求就微乎其微的不可能發(fā)生任何作用。這么一來，對(duì)于網(wǎng)頁設(shè)計(jì)者來說，無非是非?？上У模?yàn)楫?dāng)初的設(shè)計(jì)風(fēng)格卻未能讓瀏覽者一窺全貌，豈不是白費(fèi)心思的嗎？

何謂圖片的色系？以色彩學(xué)簡(jiǎn)單的區(qū)分，可分為冷色系與暖色系，再詳細(xì)一點(diǎn)的區(qū)分，又可分出各種顏色的色系，而色系的區(qū)分，就在于主觀瀏覽意識(shí)上的差異了。如何將圖片的色系與網(wǎng)站整體色系相對(duì)應(yīng)，就是比較困難的地方了。對(duì)于網(wǎng)頁初學(xué)者來說，要繪制一張圖并非易事，要繪制一張符合自己網(wǎng)頁風(fēng)格的圖，更是困難重重。大部分的網(wǎng)頁制作者，并不大可能駕輕就熟的使用影像處理軟件或繪圖軟件，于是乎，網(wǎng)頁素材的網(wǎng)站就開始盛行了。當(dāng)然，不會(huì)使用繪圖軟件并不代表網(wǎng)頁就不能設(shè)計(jì)的很出色，若是能將網(wǎng)絡(luò)上的素材資源妥善利用，網(wǎng)站也是可以走出自己的風(fēng)格的。而該怎么選擇適合自己網(wǎng)站的圖片，就是門很大的學(xué)問了。

選擇圖片該以何作為標(biāo)準(zhǔn)呢？舉例來說，若網(wǎng)站內(nèi)容為科學(xué)探討，當(dāng)然不能以卡通圖片來作為插圖，試想，當(dāng)您正在瀏覽一個(gè)有關(guān)天文學(xué)的網(wǎng)站，卻滿是皮卡丘的可愛圖片，不是很不協(xié)調(diào)嗎？再舉個(gè)例子，如果一個(gè)教學(xué)網(wǎng)站，里頭卻盡是明星圖片，看上去根本就不像是教學(xué)網(wǎng)站，而是大雜匯的明星相片網(wǎng)。

很多人喜歡將自己欣賞的明星照放上自己的網(wǎng)頁中，如果僅是個(gè)人網(wǎng)站倒也還好，因?yàn)閭€(gè)人網(wǎng)站本就無主題居多，也就沒有所謂的符不符合主題的顧慮，但若是有主題的網(wǎng)站，豈不糟糕？

以圖片內(nèi)容來說，能切合網(wǎng)站主題最好，若不能，也別差異太多。以顏色來說，若一個(gè)網(wǎng)頁是藍(lán)色的底色，但整個(gè)網(wǎng)頁的圖檔卻亂七八糟，各種顏色紛紛出籠，更糟的是，藍(lán)色是屬于冷色系的顏色，若以藍(lán)色為底的網(wǎng)頁，卻盡都是大紅色、橘色的圖片，那將會(huì)使整張網(wǎng)頁看起來就像垃圾堆，雜亂無章。所以，可以簡(jiǎn)單的歸納出，網(wǎng)頁與圖檔的顏色，色系一致或是視覺效果一致，將會(huì)使網(wǎng)頁看起來更為美觀且有自己的風(fēng)格。

網(wǎng)頁的顏色，并非單一就圖文件、文字顏色、或是底色為主，而是以瀏覽者的角度來觀看，整體網(wǎng)頁看上去是偏向哪種色系。常常見到許多網(wǎng)站雖然色系搭配的很好，但卻是沒有自己的風(fēng)格。以目前流行的柔色系、粉色系網(wǎng)站來說，就是失了自己獨(dú)到的風(fēng)格。

因?yàn)槭褂梅凵档木W(wǎng)站，不外乎都有相同的特點(diǎn)，文字顏色淺，底色也以淺色系為主，這樣除了沒有自己的風(fēng)格外，看起來既不大方也難登大雅之堂。以各大搜尋網(wǎng)站來說，根本不會(huì)做這樣的設(shè)計(jì)，因?yàn)槲淖诸伾?，加上底色淺，對(duì)瀏覽者來說，閱讀上非常吃力，所以這樣的設(shè)計(jì)風(fēng)格也應(yīng)盡量避免。

一個(gè)有自己風(fēng)格，且閱讀起來舒適大方的網(wǎng)頁，并不可能一次就寫好，而是需要經(jīng)過不厭其煩的修正、調(diào)色，才能達(dá)到最佳瀏覽效果的，所以制作網(wǎng)頁也一定要有相當(dāng)大的耐心。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第5頁。利用Dreamweaver你可以輕輕松松讓圖像呈現(xiàn)出陰影、模糊、運(yùn)動(dòng)、光暈、波浪、淡入淡出等眾多效果，你再也不用為了達(dá)到某種圖像效果而動(dòng)用Photoshop這個(gè)龐然大物了。利用Dreamweaver你可以輕輕松松讓圖像呈現(xiàn)出陰影、模糊、運(yùn)動(dòng)、光暈、波浪、淡入淡出等眾多效果，你再也不用為了達(dá)到某種圖像效果而動(dòng)用Photoshop這個(gè)龐然大物了。下面我們就來具體了解一下圖像特效的制作方法。在Dreamweaver中為圖像制作特效，實(shí)際上就是利用樣式表（CSS）功能來定義圖像的各種參數(shù)，讓它呈現(xiàn)出各種特技效果，但是這些特效并不增大圖像文件的大小，所以不會(huì)影響頁面的下載速度，這對(duì)于我們有限的網(wǎng)絡(luò)帶寬來說是非常寶貴的。下面我們首先來看如何創(chuàng)建一個(gè)樣式表。1.單擊Window菜單下的CSSStyles命令，或按F7鍵，彈出樣式表編輯窗口。2.單擊樣式表編輯窗口中的New按鈕，彈出對(duì)話窗口，在該窗口中選擇“MakeCustomStyle”選項(xiàng)，然后單擊OK。3.在彈出的定義樣式表窗口中，單擊Category下的Extensions類型，然后在Filter項(xiàng)目中選擇一個(gè)圖像特效類型，定義它的各種參數(shù)。Dreamweaver內(nèi)置有16種圖像特效類型。4.定義完畢，單擊OK，回到樣式表編輯窗口。5.選定頁面上的圖像，將生成的樣式表作用于該圖像。6.保存該網(wǎng)頁，然后在瀏覽器中打開，就可以看到圖像的特效了。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第6頁。網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第6頁。五網(wǎng)頁東華的設(shè)計(jì)與制作方法依據(jù)上面所述的方法利用“門”形布局，整理出網(wǎng)頁的大概框圖調(diào)整以色彩學(xué)簡(jiǎn)單的冷色系與暖色系，利用Dreamweaver，編輯網(wǎng)頁的圖片效果，把一張用模糊效果渲染。最上面用大橫標(biāo)題弄橫幅，添加鏈接，網(wǎng)站首頁，院情總覽，機(jī)構(gòu)設(shè)置，教學(xué)科研，招生就業(yè)，合作交流，學(xué)生活動(dòng)等。大體就這樣布局，其他新聞動(dòng)態(tài)，學(xué)院通告等添加就好了。六心得體會(huì)網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第7頁?！癉reamweaver”“Fireworks”“Flash”有了大致的認(rèn)識(shí)，頁初步了解了它們的用法，知道了網(wǎng)頁制作的簡(jiǎn)單步驟和方法，在這里要感謝老師對(duì)我們的培養(yǎng)！網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第7頁。這次的“課程設(shè)計(jì)”，是我人生中得第一個(gè)“網(wǎng)頁設(shè)計(jì)”，對(duì)我來說恨重要，但也做得相當(dāng)辛苦。由于什么都是第一次，所以我不斷在摸索中前進(jìn)，中途得困難與可想而知。經(jīng)歷了種種的挫折，終于完成了我的題目——“網(wǎng)頁東華的設(shè)計(jì)與制作”。雖然我知道我在作品中運(yùn)用的技術(shù)都是些皮毛，網(wǎng)頁的設(shè)計(jì)搭配也不是很合理，但我相信，在以后的時(shí)間里我會(huì)不斷前進(jìn)！從拿到題目到網(wǎng)頁制作完畢，歷時(shí)一個(gè)星期，在這段時(shí)間里我翻閱了一些關(guān)于制作網(wǎng)站的書籍，也從中學(xué)到了很多知識(shí)。我做的題目是關(guān)于“韓國(guó)風(fēng)格時(shí)尚服飾”,應(yīng)該以新穎，創(chuàng)新為特色，但由于自己的知識(shí)尚淺，不能把自己的想法在網(wǎng)但由于自己的知識(shí)尚淺，不能把自己的想法在網(wǎng)頁上，但我相信經(jīng)過，我不懈的努力一定會(huì)有所進(jìn)步。面對(duì)自己做的網(wǎng)頁，我不知道該用如釋重負(fù)還是該用慚愧不已來形容，但這兩個(gè)詞的確是我的真實(shí)想法。如釋重負(fù)，因?yàn)槲业木W(wǎng)頁做好了，可以交上去了；慚愧，則是因?yàn)樽约旱木W(wǎng)頁做的很幼稚，還大不到自己的要求。我會(huì)在以后的日子里不斷學(xué)習(xí)爭(zhēng)取進(jìn)步。我從一個(gè)網(wǎng)站上看到以下的文字，在這里我引用一下：正如所謂“一千個(gè)讀者就有一千個(gè)哈姆雷特”，對(duì)于主頁的好壞，每位網(wǎng)友都有自己的評(píng)價(jià)標(biāo)準(zhǔn)。但要做好網(wǎng)頁還是應(yīng)該有以下幾點(diǎn)：一是有沖擊力，能立即抓住看網(wǎng)頁人的心理。這種沖擊力更多的來自于對(duì)視覺的震撼，因此頁面的美觀和動(dòng)感必不可少。同時(shí)，鼠標(biāo)滑過所擊活的音效或靈活的鏈接點(diǎn)擊后產(chǎn)生的快感也十分有助于沖擊力的產(chǎn)生。二是有吸引力，能產(chǎn)生回頭客。網(wǎng)絡(luò)與電影電視等媒體的最大區(qū)別在于受眾是可以重復(fù)訪問一個(gè)站點(diǎn)或頁面的，而恰恰是這種無限量的重復(fù)所產(chǎn)生的訪問量和點(diǎn)擊次數(shù)成就了許多著名的站點(diǎn)。因此，如果一個(gè)網(wǎng)站能擁有一定數(shù)量的回頭客就算成功了一半。三是耐人尋味，能成為網(wǎng)友的話題。知無不言，是網(wǎng)絡(luò)交流的一大特點(diǎn)。尤其是對(duì)自己所訪問到的精彩站點(diǎn)或網(wǎng)頁，網(wǎng)友們普遍都喜歡談?wù)?。而這，恰恰也是一個(gè)站點(diǎn)訪問量不斷增加的原因之一。因此，制作網(wǎng)頁應(yīng)該充分考慮內(nèi)容的可看性，努力使網(wǎng)頁能夠讓網(wǎng)友津津樂道甚至奔走相告。四是有高技術(shù)，能讓網(wǎng)友提高水平。上網(wǎng)的受眾大體分為爬蟲、小蟲、大蟲和飛蟲等四個(gè)級(jí)別，水平參差不齊。有許多網(wǎng)友在瀏覽信息的同時(shí)，還有很強(qiáng)烈的學(xué)習(xí)高新制作技術(shù)以提高自身水平的渴望。因此，一個(gè)擁有高技術(shù)的網(wǎng)站會(huì)使網(wǎng)友頻頻回訪。而不斷增加網(wǎng)站中的技術(shù)含量，讓網(wǎng)友產(chǎn)生復(fù)制頁面和查看源文件的沖動(dòng)，也是判斷網(wǎng)頁好壞的一個(gè)重要參考。以上是我借鑒網(wǎng)上的說發(fā)，我覺得見解很深刻，很值得我們這些初學(xué)者借鑒學(xué)習(xí)！網(wǎng)頁設(shè)計(jì)與制作論文全文共9頁，當(dāng)前為第8頁。不知不覺我的試驗(yàn)報(bào)告也以快接近尾聲，我發(fā)表一下對(duì)“網(wǎng)頁設(shè)計(jì)與制作”這門課程的意見，僅我這個(gè)費(fèi)專業(yè)人士的意見，僅供參考！網(wǎng)頁