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

長(zhǎng)江學(xué)院課程設(shè)計(jì)報(bào)告課程設(shè)計(jì)題目：網(wǎng)頁(yè)設(shè)計(jì)與制作姓名：張***學(xué)號(hào)：08****專(zhuān)業(yè)電子信息工程班級(jí)08**** 2010

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

四網(wǎng)頁(yè)的圖像的制作方法網(wǎng)站的色系是瀏覽者整體的視覺(jué)觀(guān)感，若一個(gè)網(wǎng)站色系能有一致性，不僅會(huì)使網(wǎng)站看起來(lái)美觀(guān)，更能讓瀏覽者對(duì)內(nèi)容不易混淆，增加了瀏覽的簡(jiǎn)潔與方便。而網(wǎng)站的色系更能襯托出網(wǎng)站的主題，若色系能與主題合理搭配，將會(huì)增加瀏覽者的易讀性。

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

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

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

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

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

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

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

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

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

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

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

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