《網(wǎng)頁(yè)設(shè)計(jì)與制作》結(jié)課論文分析

1、網(wǎng)頁(yè)設(shè)計(jì)與制作 結(jié)課論文 學(xué)院 xxxxxxxxxxxx 班級(jí) xxxxxxxxxxxx 學(xué)號(hào) xxxxxxxxxxx 姓名 xxx 在大二的第一學(xué)期，選修了網(wǎng)頁(yè)設(shè)計(jì)與制作這門(mén)課，當(dāng)時(shí)選這門(mén)課的很大原因是學(xué)通信工程的我應(yīng)該要懂得網(wǎng)頁(yè)制作與設(shè)計(jì)這方面的知識(shí)，除了對(duì)網(wǎng)頁(yè)制作充滿(mǎn)了好奇心，還有以及對(duì)知識(shí)的渴望，所以在看到選修課程表之后，就毫不猶豫的選了這門(mén)課。一 網(wǎng)頁(yè)的定義網(wǎng)頁(yè)是網(wǎng)站中的任何一張頁(yè)面，通常是HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）格式（文件擴(kuò)展名為html、或htm、或asp、或aspx、或php、或jsp等）。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫(huà)，網(wǎng)頁(yè)要使用網(wǎng)頁(yè)瀏覽器來(lái)閱讀，現(xiàn)在流行移動(dòng)設(shè)備

2、瀏覽網(wǎng)頁(yè)。網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗地說(shuō)，您的網(wǎng)站就是由網(wǎng)頁(yè)組成的，如果您只有域名和虛擬主機(jī)而沒(méi)有制作任何網(wǎng)頁(yè)的話(huà)，您的客戶(hù)仍舊無(wú)法訪(fǎng)問(wèn)您的網(wǎng)站。網(wǎng)頁(yè)是一個(gè)文件，它存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中，是萬(wàn)維網(wǎng)中的一“頁(yè)”，是超文本標(biāo)記語(yǔ)言格式（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用，文件擴(kuò)展名為.html或.htm）。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫(huà)。網(wǎng)頁(yè)要透過(guò)網(wǎng)頁(yè)瀏覽器來(lái)閱讀。二 網(wǎng)頁(yè)的構(gòu)成 文字與圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最基本的元素。你可以簡(jiǎn)單地理解為：文字，就是網(wǎng)頁(yè)的內(nèi)容。圖片，就是網(wǎng)頁(yè)的美觀(guān)。除此之外，網(wǎng)頁(yè)的元素還包括動(dòng)畫(huà)、音樂(lè)、程序等等。在網(wǎng)頁(yè)上點(diǎn)擊鼠標(biāo)右鍵，選擇菜單中的

3、 “查看源文件” ，就可以通過(guò)記事本看到網(wǎng)頁(yè)的實(shí)際內(nèi)容?？梢钥吹骄W(wǎng)頁(yè)實(shí)際上只是一個(gè)純文本文件。它通過(guò)各式各樣的標(biāo)記對(duì)頁(yè)面上的文字、圖片、表格、聲音等元素進(jìn)行描述（例如字體、顏色、大?。?，而瀏覽器則對(duì)這些標(biāo)記進(jìn)行解釋并生成頁(yè)面，于是就得到你現(xiàn)在所看到的畫(huà)面。 為什么在源文件看不到任何圖片？ 網(wǎng)頁(yè)文件中存放的只是圖片的鏈接位置，而圖片文件與網(wǎng)頁(yè)文件是互相獨(dú)立存放的，甚至可以不在同一臺(tái)計(jì)算機(jī)上。網(wǎng)頁(yè)通常有以下元素：文字資料圖像檔案Applet（在頁(yè)面內(nèi)執(zhí)行的副程式）超鏈結(jié)網(wǎng)頁(yè)的合成體為網(wǎng)站，一個(gè)網(wǎng)站的開(kāi)始點(diǎn)為首頁(yè)。三 網(wǎng)頁(yè)的分類(lèi)靜態(tài)頁(yè)靜態(tài)網(wǎng)頁(yè)，其內(nèi)容是預(yù)先確定的，并存儲(chǔ)在Web服務(wù)器或者本地計(jì)算機(jī)/

4、服務(wù)器之上。特點(diǎn)：1 制作速度快，成本低。2 模板一旦確定下來(lái)，不容易修改，更新比較費(fèi)時(shí)費(fèi)事3 常用于制作一些固定板式的頁(yè)面。4 通常用于文本和圖像組成，常用于子頁(yè)面的內(nèi)容介紹。5 對(duì)服務(wù)器性能要求較低，但對(duì)存儲(chǔ)壓力相對(duì)較大。動(dòng)態(tài)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)，是取決于由用戶(hù)提供的參數(shù)，并根據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中的網(wǎng)站上的數(shù)據(jù)中創(chuàng)建的頁(yè)面。通俗地講，靜態(tài)頁(yè)是照片，每個(gè)人看都是一樣的，而動(dòng)態(tài)頁(yè)則是鏡子，不同的人（不同的參數(shù)）看都不相同。四 網(wǎng)頁(yè)制作使用的軟件Dreamweaver（單位：奧多比）用于編輯HTML、ASP、JSP、PHP的輔助工具Adobe Dreamweaver，簡(jiǎn)稱(chēng)“DW”，中文名稱(chēng)"夢(mèng)想編織

5、者"，是美國(guó)公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，DW是第一套針對(duì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿(mǎn)動(dòng)感的網(wǎng)頁(yè)。Adobe Dreamweaver使用所見(jiàn)即所得的接口，亦有HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）編輯的功能。它有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購(gòu)后，Adobe也開(kāi)始計(jì)劃開(kāi)發(fā)Linux版本的Dreamweaver了。 Dreamweaver自MX版本開(kāi)始，使用了Opera的排版引擎"Presto" 作為網(wǎng)頁(yè)預(yù)覽。五 設(shè)計(jì)原

6、則關(guān)于網(wǎng)站所謂網(wǎng)站（Website），就是指在網(wǎng)際網(wǎng)路（因特網(wǎng)）上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用於展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。簡(jiǎn)單地說(shuō)，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過(guò)網(wǎng)站來(lái)發(fā)布自己想要公開(kāi)的資訊（信息），或者利用網(wǎng)站來(lái)提供相關(guān)的網(wǎng)路服務(wù)（網(wǎng)絡(luò)服務(wù)）。人們可以通過(guò)網(wǎng)頁(yè)瀏覽器來(lái)訪(fǎng)問(wèn)網(wǎng)站，獲取自己需要的資訊（信息）或者享受網(wǎng)路服務(wù)。在你眼前，出現(xiàn)在顯示器上的這個(gè)“東西”，就是一個(gè)網(wǎng)頁(yè)。網(wǎng)頁(yè)實(shí)際是一個(gè)文件，它存放在世界某個(gè)角落的的某一臺(tái)計(jì)算機(jī)中，而這臺(tái)計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取，當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序。

7、網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。站點(diǎn)主頁(yè)成分Web站點(diǎn)主頁(yè)應(yīng)具備的基本成分包括：頁(yè)頭：準(zhǔn)確無(wú)誤地標(biāo)識(shí)你的站點(diǎn)和企業(yè)標(biāo)志；Email地址：用來(lái)接收用戶(hù)垂詢(xún)；聯(lián)系信息：如普通郵件地址或電話(huà)；版權(quán)信息：聲明版權(quán)所有者等。充分利用已有信息，如客戶(hù)手冊(cè)公共關(guān)系文檔技術(shù)手冊(cè)和數(shù)據(jù)庫(kù)等。設(shè)計(jì)一個(gè)網(wǎng)站，應(yīng)該考慮下列九條基本因素，這些因素對(duì)網(wǎng)站的成功與否有著重要影響。1. 整體布局網(wǎng)站主頁(yè)就好像是宣傳欄或者店面對(duì)訪(fǎng)問(wèn)者產(chǎn)生第一印象，都希望盡量給人留下好的印象，不是嗎？一般來(lái)說(shuō)，好的網(wǎng)站應(yīng)該給人有這樣的感覺(jué)：干凈整潔；條理清楚；專(zhuān)業(yè)水準(zhǔn)；引人入勝。網(wǎng)頁(yè)應(yīng)該力求抓住而

8、不是淹沒(méi)瀏覽者的注意力，過(guò)多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪(fǎng)問(wèn)者無(wú)所適從離開(kāi)是最好的選擇。就像一些商店，播放震耳欲聾的發(fā)燒音樂(lè)，你要做的唯一決定就是離開(kāi)那里，越快越好。2. 信息無(wú)論商業(yè)站點(diǎn)還是個(gè)人主頁(yè)，你必須給人們提供有一定價(jià)值的內(nèi)容才能留住訪(fǎng)問(wèn)者。因?yàn)槲覀內(nèi)祟?lèi)總是惟利是圖，第一個(gè)問(wèn)題總是：“對(duì)我有什么用處？”所以你必須提供某些有價(jià)值的東西，當(dāng)然并不是說(shuō)必須提供某些免費(fèi)的物品免費(fèi)書(shū)籍、免費(fèi)入場(chǎng)券、免費(fèi)度假等，這些“有價(jià)值的東西”可以是：信息；娛樂(lè)；勸告；對(duì)一些問(wèn)題的幫助；提供志趣相投者聯(lián)絡(luò)的機(jī)會(huì)；鏈接到有用的網(wǎng)頁(yè)，等等。如果你經(jīng)營(yíng)的是企業(yè)網(wǎng)站，需要提供關(guān)于產(chǎn)品或服務(wù)的信息：容易理解；容

9、易查詢(xún)；容易訂貨。3. 速度我們都知道，頁(yè)面下載速度是網(wǎng)站留住訪(fǎng)問(wèn)者的關(guān)鍵因素。如果2030秒還不能打開(kāi)一個(gè)網(wǎng)頁(yè)，一般人就會(huì)沒(méi)有耐心。至少應(yīng)該確保主頁(yè)速度盡可能快，最好不要用大的圖片。應(yīng)該時(shí)時(shí)提醒自己，網(wǎng)站首頁(yè)就像一個(gè)廣告牌。當(dāng)開(kāi)車(chē)經(jīng)過(guò)一個(gè)廣告牌時(shí)，沒(méi)有時(shí)間閱讀上面的詳細(xì)說(shuō)明，也不可能贊賞其復(fù)雜的圖案，廣告標(biāo)志從眼前一閃而過(guò)，必須在一瞬間給人留下印象。網(wǎng)上訪(fǎng)問(wèn)者也是“一閃而過(guò)”，保證你的首頁(yè)簡(jiǎn)單而快速。網(wǎng)上有許多關(guān)于如何增加速度的文章檢查下載速度，放棄一切顯著減慢主頁(yè)速度的資料。4. 圖形和版面設(shè)計(jì)圖形和版面設(shè)計(jì)關(guān)系到對(duì)主頁(yè)的第一印象，圖象應(yīng)集中反映主頁(yè)所期望傳達(dá)的主要信息。如果有系列商業(yè)站點(diǎn)

10、，你不必讓過(guò)分顯眼的動(dòng)畫(huà)出現(xiàn)在首頁(yè)但如果你的網(wǎng)站是游戲站點(diǎn)，動(dòng)畫(huà)將是必不可少的一部分內(nèi)容。圖片是影響網(wǎng)頁(yè)下載速度的重要原因，根據(jù)經(jīng)驗(yàn)。把每頁(yè)全部?jī)?nèi)容控制在30K左右可以保證比較理想的下載時(shí)間，圖象在68K之間為宜，每增加2K會(huì)延長(zhǎng)1秒鐘的下載時(shí)間。顏色也是影響網(wǎng)頁(yè)的重要因素，不同的顏色對(duì)人的感覺(jué)有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，是一種快活的顏色；考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，請(qǐng)為網(wǎng)頁(yè)選擇合適的顏色。閱讀西方格式文本時(shí)，眼睛從左上方開(kāi)始。逐行瀏覽到達(dá)右下方，插入圖象時(shí)不要忘記這種特性。任何具有方向性的圖片應(yīng)該放置在網(wǎng)頁(yè)中對(duì)眼睛最重要的地方，如果在左上角

11、放置一幅小鳥(niǎo)的圖片，鳥(niǎo)嘴應(yīng)該放在把瀏覽者目光引向頁(yè)面中部的地方，而不是把視線(xiàn)引走。這種思路可以用于所有圖片：面部應(yīng)該“看”網(wǎng)頁(yè)的中部；汽車(chē)的“?？俊泵嫦蚓W(wǎng)頁(yè)中部；道路、領(lǐng)帶等等圖片的放置都應(yīng)該在有助于吸引目光從左向右、從上向下移動(dòng)。一般總是把網(wǎng)站導(dǎo)航條放置在頁(yè)面左邊，也是出于這種考慮不斷地出現(xiàn)在瀏覽者的視野之中。5. 文字的可讀性我們?nèi)匀挥脧V告牌的比喻來(lái)說(shuō)明，文字要在廣告牌上突出，周?chē)鷳?yīng)該留有足夠的空間。也許你曾到過(guò)一些網(wǎng)站，要么擁擠不堪的文字覺(jué)得好像只有把腦袋鉆進(jìn)去才能閱讀，要么深色的背景給人的感覺(jué)好象處于非常狹窄的空間里，而且讓人的心情感覺(jué)很壓抑。某些背景色的令人閱讀困難；紫色、橙色和紅色

12、讓人眼花繚亂。文字的顏色也很重要，不同的瀏覽器有不同的顯示效果，有些在你的瀏覽器上很漂亮的顏色在其他瀏覽器上可能無(wú)法顯示。參考報(bào)紙的編排方式，為方便或快速閱讀將你的內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿(mǎn)頁(yè)的視覺(jué)效果要好。另一種能夠提高文字可讀性的因素是你所選擇的字體，通用的字體（Arial, Times New Roman, Garamond and Courier）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文（試想瀏覽整頁(yè)的 Gothic, Script, Westminster, or Cloister會(huì)是怎樣的感受）。因?yàn)殚喿x費(fèi)力，你的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁(yè)面。明白我的意思

13、了嗎？6. 網(wǎng)頁(yè)標(biāo)題的可讀性必須盡量使你的網(wǎng)頁(yè)易于閱讀，除了分欄之外（將頁(yè)面縱向分割），也需要利用標(biāo)題和副標(biāo)題將文檔分段。為所有標(biāo)題和副標(biāo)題設(shè)置同一字體，并將標(biāo)題字體加大一號(hào)，所有標(biāo)題和副標(biāo)題都采用粗體，這樣便于識(shí)別標(biāo)題（字體加大加粗）和副標(biāo)題（粗體，與正文字體大小相同），使瀏覽者一眼就可以看到要點(diǎn)，以便找出并繼續(xù)閱讀有興趣的內(nèi)容。標(biāo)題的重要性可見(jiàn)一斑，要認(rèn)真寫(xiě)好每個(gè)標(biāo)題！也可以將整句采用粗體或用不同的顏色突出某些內(nèi)容，不過(guò)不要用難以閱讀的顏色。7. 導(dǎo)航由于人們習(xí)慣于從左到右、從上到下閱讀，所以主要的導(dǎo)航條應(yīng)放置在頁(yè)面左邊，對(duì)于較長(zhǎng)頁(yè)面來(lái)說(shuō)，在最底部設(shè)置一個(gè)簡(jiǎn)單導(dǎo)航也很有必要（只要兩項(xiàng)就夠了

14、：主頁(yè)|頁(yè)面頂部）。確定一種你滿(mǎn)意的模式之后，最好將這種模式應(yīng)用到同一網(wǎng)站的每個(gè)頁(yè)面，這樣，瀏覽者就知道如何尋找信息。8. 保護(hù)個(gè)人信息聲明和客戶(hù)推薦信對(duì)于商業(yè)網(wǎng)站來(lái)講，最重要的事情之一是確保潛在客戶(hù)的信心，你應(yīng)該明確地告訴人們，如何對(duì)其興趣、愛(ài)好，尤其個(gè)人隱私保密，很有必要專(zhuān)門(mén)用一個(gè)頁(yè)面詳細(xì)陳述你的保護(hù)個(gè)人信息聲明，包括對(duì)訪(fǎng)問(wèn)者的email地址保密、如何接受定單、如何匯總信息、匯總這些信息的目的、誰(shuí)可以看到這些信息等基本內(nèi)容。訪(fǎng)問(wèn)者也想知道你的產(chǎn)品或服務(wù)現(xiàn)有客戶(hù)的反映，所以如果能引用與你關(guān)系融洽的客戶(hù)對(duì)你的積極評(píng)價(jià)，對(duì)你的可信度將很有幫助。不要害怕向顧客索取推薦信人們都愿意自己的意見(jiàn)有價(jià)值。

15、你可以把客戶(hù)的推薦信另設(shè)計(jì)為一個(gè)網(wǎng)頁(yè)，作為對(duì)客戶(hù)提供推薦信的回報(bào)，在這里鏈接到客戶(hù)的網(wǎng)站這也是一種“雙贏”。9. 詞語(yǔ)一個(gè)網(wǎng)站如果只有漂亮的外觀(guān)而詞語(yǔ)錯(cuò)誤連篇、語(yǔ)法混亂，同樣是失敗的，對(duì)于網(wǎng)站所有者和負(fù)責(zé)人將產(chǎn)生很壞的影響，人們會(huì)用許多貶義詞來(lái)評(píng)價(jià)你：粗心大意、懶惰、外行、沒(méi)水平等等。你愿意把自己辛苦掙來(lái)的錢(qián)花在一個(gè)連自己的網(wǎng)站都馬馬虎虎的人嗎？你可以按照上述步驟改進(jìn)你的網(wǎng)站制作技巧；你可以請(qǐng)人對(duì)你的工作進(jìn)行校對(duì)、編輯；你也可以請(qǐng)人為你制作網(wǎng)頁(yè)；總之，上述步驟在很多方面對(duì)你會(huì)有所幫助，不要因?yàn)閷?duì)某些步驟的疏忽而影響你的網(wǎng)站的整體效果。平時(shí)在上課時(shí)，看見(jiàn)老師做是那么簡(jiǎn)單的，當(dāng)自己動(dòng)手時(shí)卻不是這樣

16、的。做的過(guò)程中，經(jīng)常會(huì)遇到各種各樣的問(wèn)題，當(dāng)卡在一個(gè)技術(shù)問(wèn)題上時(shí)往往都會(huì)阻礙下面的步驟，讓人很心煩。所以在做網(wǎng)頁(yè)時(shí)，我深刻地體會(huì)到這種煩惱。不過(guò)漸漸地，我也明白做網(wǎng)頁(yè)煩躁可是個(gè)大忌，這很容易弄砸整個(gè)網(wǎng)頁(yè)，所以當(dāng)遇到這些問(wèn)題時(shí)，我都會(huì)想辦法先讓自己靜下心啦，再去決解。而決解的方法有很多種，你可以去問(wèn)身邊的人，可以去問(wèn)老師，也可以去網(wǎng)上查等等。學(xué)習(xí)網(wǎng)站最重要的是要多練，不懂要弄到懂，頭腦要靈活，不要頑固。平時(shí)不只是上課聽(tīng)老師講就行了，還要在課后多練習(xí)，鞏固知識(shí)。有空就要多點(diǎn)去瀏覽一些優(yōu)秀的網(wǎng)站，學(xué)習(xí)別人的技巧。要想制作一個(gè)能夠像網(wǎng)上的那樣，還得需要經(jīng)過(guò)長(zhǎng)時(shí)間的刻苦努力和不斷地檢驗(yàn)及實(shí)踐，否則，如果

17、只靠老師在課堂上講的那些知識(shí)是遠(yuǎn)遠(yuǎn)不夠的。畢竟網(wǎng)頁(yè)是一個(gè)技術(shù)性的知識(shí)，不像文學(xué)那樣的純理論知識(shí)。網(wǎng)頁(yè)設(shè)計(jì)是一門(mén)很有趣的課程，在里面我可以學(xué)到很多東西。每當(dāng)做出一效果圖或者網(wǎng)頁(yè)時(shí)，自己都會(huì)覺(jué)得有很大的成就感，在之前的辛苦都會(huì)忘記，只記得是自己做出漂亮網(wǎng)頁(yè)的歡喜，這是一種多么美妙的感覺(jué)。 在學(xué)習(xí)網(wǎng)頁(yè)制作與設(shè)計(jì)的過(guò)程中我也會(huì)遇到很多的困難，比如如何靈活運(yùn)用Dreamweaver，以及排版的問(wèn)題，真要做起來(lái)確是很難.做網(wǎng)頁(yè)設(shè)計(jì)不僅要從藝術(shù)的角度來(lái)考慮而且要從社會(huì)大眾的認(rèn)可性來(lái)考慮.網(wǎng)頁(yè)設(shè)計(jì)必須要服從企業(yè)或部門(mén)的經(jīng)營(yíng)理念來(lái)考慮.如果設(shè)計(jì)的作品很好看但是和企業(yè)不搭調(diào)那就等于白做.網(wǎng)頁(yè)制作給我的結(jié)論是：要想制作一個(gè)能夠像網(wǎng)上的那樣，還得需要經(jīng)過(guò)長(zhǎng)時(shí)間的刻苦努力和不