網(wǎng)頁制作畢業(yè)論文

1、<p><b>　　一 引 言</b></p><p>　　隨著Internet的誕生和發(fā)展，許多人不再僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。企業(yè)建站相當于在網(wǎng)上建立一個家，你就可以在這里向客戶介紹你的企業(yè)，展示你的實力，推銷你的產(chǎn)品，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設計而言，網(wǎng)頁設計具有更多的新穎性，更多可以表現(xiàn)的手法。結合本人的實習過程，現(xiàn)就網(wǎng)站建設與

2、管理過程中，網(wǎng)頁設計與制作的具體經(jīng)歷，包括：網(wǎng)頁設計與制作過程中的網(wǎng)頁布局、色彩構置，框架結構等相關事項做以下論述。</p><p><b>　　二 網(wǎng)站建設的流程</b></p><p>　　1.定義合適的域名。由域名構成的網(wǎng)址會像商標一樣，有助于將來塑造網(wǎng)上的形象。域名除了要符合公司的性質以及信息內(nèi)容的特征外，還要具有簡潔、易記、具有沖擊力的特點。</p&g

3、t;<p>　　2.租用虛擬服務器。有了域名后，就需要一個空間存放網(wǎng)站，這個空間就是Internet上的服務器。一般虛擬主機提供商都能向用戶提供大容量、高速度的服務器，用戶可根據(jù)網(wǎng)站的內(nèi)容設置及其發(fā)展前景來選擇。</p><p>　　3.設計網(wǎng)頁。網(wǎng)頁的設計制作可以自己完成，也可以通過虛擬主機提供商或專業(yè)的網(wǎng)頁設計制作商來完成。設計網(wǎng)頁前要收集所有需要放在網(wǎng)站上的文本資料、圖片等，并盡量用文字詳細說

4、明制作的框架結構，將收集的材料提供給網(wǎng)頁設計者。</p><p>　　4.ICP備案。網(wǎng)站備案的目的就是為了防止在網(wǎng)上從事非法的網(wǎng)站經(jīng)營活動，打擊不良互聯(lián)網(wǎng)信息的傳播，如果網(wǎng)站不備案的話，很有可能被查處以后關停。ICP備案可以自主通過官方備案網(wǎng)站 http://www.miibeian.gov.cn 在線備案或者通過當?shù)仉娦挪块T兩種方式來進行備案。</p><p><b>　　三

5、 網(wǎng)頁制作</b></p><p><b>　　（一）制作步驟</b></p><p>　　網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構成一個網(wǎng)站，網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)頁設計是指對網(wǎng)站整體頁面的設計，包括頁面風格、配色、布局、內(nèi)容等。網(wǎng)頁設計包含的內(nèi)容非常多，大體分為兩個方面：一方面是純網(wǎng)站本身的設計，如文字、排版、圖片制作、平面設計、靜態(tài)圖文和動態(tài)聲音、

6、影像等；另一方面是網(wǎng)站的延伸設計，包括網(wǎng)站主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。</p><p>　?。ǘ┰O計頁面的第一步就是設計片面布局，就像報刊雜志版面設計一樣，我們可以看作一張報約或者一份雜志來進行排版布局。</p><p>　　1.草稿 新頁面就像一張白紙，沒有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力、創(chuàng)造力，將想象的布局到上面去。這是原創(chuàng)階段，你不

7、必講究細膩工整，你也可在草稿本上先畫出整個布局框架，把多個版塊的位置先粗略的布置上去以往下一步工作的展示，這一步也可以借住PHOTOSHOP或其他工具軟件來完成。</p><p>　　2.粗略布局 在草稿的基礎上，將需要的功能模塊放到頁面上去，這時要遵循突出重點、整體協(xié)調(diào)的原則，首先將網(wǎng)站標志、導航條、廣告條等最主要的模塊放在最突出位置，然后考慮其他模塊的布局。</p><p>　　3.

8、定稿 定稿即將粗略布局精細化、具體化，完成整個頁面的設計。</p><p>　　頁面的制作，首先在根據(jù)客戶的要求下，完成首頁的制作，在經(jīng)客戶確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面的都經(jīng)客戶確定后，完成網(wǎng)頁的制作進程，交給程序員添加程序。</p><p><b>　?。ǘ┏Ｓ脜?shù)</b></p><p&

9、gt;<b>　　圖片質量與下載速度</b></p><p>　　由于網(wǎng)絡速度問題，我們要考慮圖片的大小對傳輸速度的影響，如果圖片太大就會影響瀏覽速度，訪問者很快就對這個網(wǎng)站失去了興趣，只有充分了解圖片質量與下載速度的關系，并了解不同的文件格式，才能更有效的表達內(nèi)容。</p><p><b>　　1.分辨率</b></p><

10、p>　　理解圖像分辨率可以直接控制文件大小和下載速度，進而影響訪問者的人數(shù)，創(chuàng)建WEB圖片的要求是小、快、好。顯示器的分辨率起決定性的作用，大多數(shù)顯示器使用的是1024*768的分辨率，因為要通過顯示器頁面，所以用高分辨率并不會增加圖片質量相反還會降低圖片的下載速度。</p><p><b>　　2.位圖</b></p><p>　　習慣性稱為圖像，而將矢量圖稱

11、為圖形，位圖是位映射圖像的簡稱，也可叫柵格圖。它將一幅圖像分成許多柵格，柵格的每一個點就是圖像的像素，其值就是像素的亮度和色彩度，擴大位圖尺寸的效果是增多像素，從而將使線條和形狀顯得的參次不齊，位圖的與其分辨率密切相關，因此在處理位圖圖像時，必須設置合適的圖像分辨率，否則輸出圖像時會遺漏細節(jié)，使圖像模糊。</p><p><b>　　3.矢量</b></p><p>

12、　　矢量圖也稱為面向對像的圖像或繪圖圖像，它使用一組線段造型描述一段圖像，圖像中包含的直線，弧線和造型的設置與開關是由指令描述的，矢量圖適用于描述色彩簡單的圖像，矢量文件中的圖像元素稱為對象，每一個對象都是一個自成一體的主體，它具有形狀、輪廓、大小和屏幕位置等屬性。放大位圖會失真，但放大矢量圖不會失真。</p><p><b>　　4.圖片格式</b></p><p>

13、;　　制作好的效果圖可以保存為各種格式，包括GIF格式，JPEG格式和PNG格式等各個圖片格式之間的區(qū)別為：GIF格式即圖形交換格式；GIF格式的圖片只能使用256種顏色，不適合顯示色彩豐富的圖像內(nèi)容。其特點是1.采用隔行掃描的顯示方式；2.可以設置背景透明；3.可以制作簡單的動畫。JPEG格式可以顯示顏色復雜的圖片，但是在處理大面積的顏色塊時可能會出現(xiàn)明顯的壓縮痕跡。PNG格式的圖片兼有GIF和JPEG的優(yōu)點。</p>

14、<p><b>　?。ㄈ┚W(wǎng)頁布局</b></p><p>　　常見網(wǎng)頁版式布局結構有以下幾種：</p><p>　　兩欄式結構，即頁面頂部為網(wǎng)站標志或廣告條，下面分為左右兩欄，一般左欄式導航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。三欄式結構是一些大型網(wǎng)站常用的布局結構，一般為上面是橫幅的廣告

15、條，下面分為三豎欄，中間較大，是主要的信息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式?！叭毙徒Y構，這種結構多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點是分類清晰，展示方便。左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導航部分，右邊是與導航相對應的內(nèi)容。左右框架型的結果非常清晰，內(nèi)容一目了然，便于信息的查詢。上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整

16、體為橫向分布，上面為導航，中間的大展式窗口很突出，整個網(wǎng)站顯得簡潔明亮，這種結構適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。Flash型主要采用現(xiàn)在流行的Flash技術，頁面表達的內(nèi)容較為豐富，給人視覺和聽覺上很大的沖擊，處理得當會達到Web頁面難以達到的效果。</p><p><b>　?。ㄋ模┚W(wǎng)頁色彩</b></p><p><b>　　1.色彩模式。&

17、lt;/b></p><p>　　在自然界看到的各種色彩都是由三種色光或三種顏色組成的，而他們本身不能再分拆出其他的顏色成分，所以稱為三原色。三原色分為光學三原色和物理三原色。這兩種三原色各自混合后，分別形成了不同的色彩體系。</p><p><b>　　RGB模式：</b></p><p>　　R代表紅色，G代表綠色，B代表藍色，三種色

18、彩疊加形成了其它的色彩。因為三種顏色都有256個亮度水平級，所以三種色彩疊加就形成1670萬種顏色了，通過它們足以再現(xiàn)絢麗的世界。就編輯圖象而言，RGB色彩模式也是最佳的色彩模式，因為它可以提供全屏幕的24bit的色彩范圍，即真彩色顯示。</p><p><b>　　CMYK模式：</b></p><p>　　CMYK代表印刷上用的四種顏色，C代表青色，M代表洋紅色，

19、Y代表黃色，K代表黑色。因為在實際引用中，青色、洋紅色和黃色很難疊加形成真正的黑色，最多不過是褐色而已。因此才引入了K——黑色。黑色的作用是強化暗調(diào)，加深暗部色彩。CMYK模式是最佳的打印模式，RGB模式盡管色彩多，但不能完全打印出來。</p><p>　　可以先用RGB模式進行編輯工作，再用CMYK模式進行打印工作，在打印前才進行轉換，然后加入必要的色彩校正，銳化和休整。</p><p>

20、;　　2.色彩的心理表現(xiàn)。</p><p>　　色彩具有精神的價值，人們常常能感受到色彩對自己心理的影響，這些影響總是在不知不覺中發(fā)揮作用，影響我們的情緒。色彩的心理效應法是在不同層次中，有些色彩對人有直接的刺激，有些則需要通過間接的聯(lián)想，更高層次的則涉及人的觀念與信仰。</p><p>　　3.色彩的表達感覺。</p><p>　　不同的色彩給人不同的心理暗示。對

21、色彩的不同感覺和認知，對色彩搭配所產(chǎn)生的心理聯(lián)想，會導致不同的心理反應。</p><p>　　空間感——色彩的空間感與色彩對比的知覺度有關，對比度強和高純度的色彩具有前進感，對比度弱和低純度色的色彩具有后退感。</p><p>　　色彩的空間感，具體表現(xiàn)在利用色彩的明度對比層次、形與色的排列轉折、大小彎曲等秩序節(jié)奏，從而有意識地形成凹凸深遠的空間感，甚至利用人的錯覺形成假象空間色彩的前進、

22、后退感形成的距離措視原理、在網(wǎng)頁中常被用來加強畫面的空間層次。</p><p>　　親切感——色彩的親切感是指人對色彩的對比變化所產(chǎn)生的親近的心理感覺。通常較為明快柔和的色彩都能使人產(chǎn)生親切感，色彩的純度對比和明度對比較弱時，也會使整體色調(diào)變得柔和、輕快。產(chǎn)生親切感的網(wǎng)頁一般采用同類色、類似色和鄰近色。</p><p>　　使用具有親切感的色彩，可以用來表現(xiàn)家具網(wǎng)站、兒童網(wǎng)站和女性網(wǎng)站、服

23、裝網(wǎng)站及日用消費品網(wǎng)站等。</p><p>　　莊重感——通常，明度較低、純度不高的色彩能給人以莊重感、常用的有黑、棕色、深藍和褐色等。在使用時要注意搭配，搭配不當則會產(chǎn)生沉悶、呆板的感覺。</p><p>　　神秘感——色彩的神秘感，并不是色彩本身具有的，而是人的聯(lián)想所產(chǎn)生的心理感覺。一般能使人感到神秘的色彩，多為明度較低、色相不明確、純度也不高的色彩，如昏黃的氛圍、幽暗的巷子、夜晚的角

24、落，都可以用來營造色彩的神秘感。</p><p>　　興奮和憂郁感——色彩和人的個性一樣，具有明朗與憂郁的區(qū)分。明朗的色彩必然是明度高、對比較強的色彩，以及純度偏純的色彩，憂郁的色彩則是明度低、對比較弱的色彩，以及純度偏低且色性偏冷的色彩。</p><p>　　一般來說，暖色較易引起心理的亢奮和積極性，屬于興奮色，其中朱紅色最具興奮作用，其他明度較高、純度較高的顏色（如黃色、橘黃色等）也具

25、有煽動性、傾向于興奮色。</p><p>　　4.網(wǎng)頁色彩的搭配。</p><p>　　將色彩具體到網(wǎng)頁搭配中，應遵循一定的方法。</p><p>　　同色搭配，該方法采用一種顏色的深淺搭配，盡管網(wǎng)站設計要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺，但通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化，使網(wǎng)站避免單調(diào)。鄰近色搭配，使用在色帶上相鄰近的顏色，如綠色和藍色、紅色和黃色

26、。采用鄰近色彩設計網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達到頁面的和諧統(tǒng)一。對比色搭配，該方法使用兩種完全不同的顏色搭配。對比色可以突出重點，產(chǎn)生強烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明，重點突出。在設計時一般以一種顏色為主色調(diào)，對比色作為點綴，起到畫龍點睛的作用。明度推移色彩搭配，有兩種方法操作：通過加入等量的白色，使一種顏色漸亮；或者通過加入等量的黑色，使顏色變暗。這兩種方法都可以產(chǎn)生色彩明度漸變的效果。</p>

27、<p><b>　?。ㄎ澹┘毠?jié)的把握</b></p><p>　　網(wǎng)站的品位，除了頁面本身整體的視覺效果外，往往更突出在一些細節(jié)上，只有把握住細節(jié)，才能更好地提高瀏覽者的使用友好度，給瀏覽者留下深刻的印象。</p><p><b>　　1顏色。</b></p><p>　　在初學網(wǎng)頁設計的時候，在用色方面要非

28、常注意，如果對網(wǎng)頁用色沒有太大的把握，那么就先選擇好網(wǎng)頁的基本色調(diào)，然后針對這一種顏色去進行變化，如需加其他顏色，可以試著加些灰色，因為灰色是中色調(diào)，不會對頁面顏色造成太大的沖突。這樣做出的網(wǎng)頁整體顏色會非常協(xié)調(diào)統(tǒng)一。</p><p><b>　　2.線條的運用。</b></p><p>　　很多朋友在制作網(wǎng)頁的時候，在兩塊過渡的地方，如banner和導航條之間會用一

29、條細線區(qū)分開，此時往往會畫上一條直直的線，這樣給人感覺會很突兀。</p><p><b>　　3.圖標。</b></p><p>　　網(wǎng)站中在各個標題的前面適當?shù)募有﹫D標點綴網(wǎng)頁，可以使網(wǎng)頁效果更加出彩，但是切忌網(wǎng)頁圖標使用過多，圖標的色調(diào)也要一致，避免雜亂。</p><p><b>　　4.文字。</b></p&g

30、t;<p>　　網(wǎng)站中文字的運用，用戶在瀏覽網(wǎng)頁時，主要是要看網(wǎng)頁當中的文字內(nèi)容，所以要特別注意文字的處理。一是文字的顏色不要和背景顏色相近，這樣用戶在瀏覽文字信息時會非常的吃力；二是不要亂用字體，你使用的字體在本機上可以顯示，但是到了別人的電腦上就不一定能顯示出來了；三是注意文字之間的行距，通常我們不對文字進行行距的設置時，文字間的行距會非常??；影響頁面的美觀度，注意文字間的行距，使其不會顯得特別擠，做到寬松有序<

31、/p><p><b>　?。┏Ｓ霉ぞ呓榻B</b></p><p>　　用來制作效果圖的軟件并沒有明確的規(guī)定?？梢允褂酶鞣N圖形制作軟件和處理軟件，現(xiàn)在通常使用的軟件是PHOTOSHOOP和FIREWORKS。在制作效果圖時，使用的軟件對最終結果并沒有什么影響，用自己精通的即可。</p><p>　　Photoshop是一款非常好用的平面設計軟件。

32、由Adobe公司開發(fā)設計，其用戶界面易懂、功能完善、性能穩(wěn)定，是比較專業(yè)的圖像處理軟件，它具有強大的濾鏡功能。所以，在很多的的廣告、出版、軟件公司，Photoshop都是首選的平面工具，它有很多的快捷方式，如抓手工具H鍵，TABLE鍵切換顯示或隱藏所有的控制板，D鍵、X鍵迅速切換前景色和背景色等，靈活的運用快捷鍵，可以使設計的速度大大提高。</p><p>　　Fireworks是網(wǎng)頁開發(fā)圖形處理工具，可以做出矢

33、量的圖形，主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實用，而且學起來也比Photoshop易上手，是一個入門級的網(wǎng)頁設計軟件</p><p><b>　　結論</b></p><p>　　1.分析客戶的要求和企業(yè)的類型，并參考相關類型的企業(yè)網(wǎng)站，結合自己的實際經(jīng)驗畫出大概的框架圖，并標明其用途和要實現(xiàn)的功能，這一步可直接在紙上完成。</p

34、><p>　　2.利用PS來進行具體的設計，利用輔助線畫出框架圖，不同模塊之間要畫兩條輔助線，并留一定的距離，便于對網(wǎng)頁的控制，接下便可以制作企業(yè)的logo、廣告條、導航條等主要內(nèi)容，然后依次完成其他模塊的制作。</p><p>　　3.對色彩、文字的排版、導航條、底部內(nèi)容進行細化，使網(wǎng)站達到一定的品質感，完成首頁的全部制作后就可以把做好的頁面發(fā)給客戶確定。</p><p&

35、gt;　　4.首頁確定以后，便開始內(nèi)頁的制作，內(nèi)頁的制作相對簡單，保持首頁的整體風格不變，對相應的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個即可，內(nèi)頁制作完成后發(fā)給客戶確定，完成整個網(wǎng)頁的設計，并交給程序員切片添加程序。</p><p><b>　　參考文獻</b></p><p>　　[1]鄧文淵.網(wǎng)頁制作高手[M].北京：人民郵電大學出版，2007，6<

36、/p><p>　　[2]李憲廣.網(wǎng)頁制作邊學邊用[M].北京：清華大學出版社， 2009，3</p><p>　　[3]網(wǎng)頁設計入門[EB/OL].http://www.xue8.com/sale/view.asp?Article ID=288</p><p>　　[4]許凌云，柳勇良.網(wǎng)頁設計全方位學習[M].北京：清華大學出版社，2008，11</p>

37、<p>　　[5]陳琳.photoshop cs3 入門實戰(zhàn)與提高[M].北京：電子工業(yè)出版社，2008，11</p><p>　　[6]焦慧.網(wǎng)頁制作基礎與典型范例[M].北京：電子工業(yè)出版社，2008，7</p><p>　　[7]戎馬工作室.Dreamweaver 8與asp動態(tài)網(wǎng)站開發(fā)[M].北京：機械工業(yè)出版社，2006，5</p><p>　

38、　[8]戴一波.Dreamweaver CS3網(wǎng)站制作炫例精講[M].北京：電子工業(yè)出版社， 2008，1</p><p>　　[9]何秀芳.網(wǎng)頁制作與網(wǎng)站建設課堂實錄[M].北京：人民郵電出版社. 2009，3</p><p>　　[10]孫連三.新編網(wǎng)頁制作與網(wǎng)站建設入門與提高[M].北京：人民郵電出版社. 2008，9</p><p>　　[11]鄧文淵.網(wǎng)頁

39、制作高手FLASH 8[M].北京：人民郵電出版社， 2007，6</p><p>　　[12]胡崧.超夢幻勁爆網(wǎng)頁[M].中國青年出版社.2008，7</p><p>　　[13]Scot Johson etal.using Active Server Page[J].Que 2007 </p><p>　　[14]卓越科技.PHOTOSHOP CS3 美工廣告設

40、計百煉成精[M].電子科技出版社， 2009，3</p><p>　　[15]David Hunter etal，Beginning XML[J].Wrox Press Ltd，2005</p><p>　　[16]楊大勇，李金江.ASP網(wǎng)絡開發(fā)自學導航[M].北京：機械工業(yè)出版社，2007，6</p><p>　　[17]卓越科技.SQL SERVER數(shù)據(jù)庫開發(fā)培

41、訓教程[M].北京：電子工業(yè)出版社， 2009，4</p><p>　　[18]李曦琳.WEB導航設計[M].北京：電子工業(yè)出版社，2009，3</p><p>　　[19]力誠教育.ACCESS 2007完全自學手冊[M].成都：四川出版集團，2009，3</p><p>　　[20]叢書編委會.ASP動態(tài)網(wǎng)頁編輯[M].北京：清華大學出版社，2006，10<

42、;/p><p>　　[21]陳剛.商業(yè)網(wǎng)站開發(fā)從入門到精通[M].科學出版社，2008，2</p><p><b>　　致 謝 </b></p><p>　　畢業(yè)論文如期完成了，在此我要感謝在畢業(yè)設計期間給予我?guī)椭脑S多人。首先，我要特別感謝的是我敬愛的指導老師xx老師。因為是他為我提供了一個良好的環(huán)境，才使我很好的完成了畢業(yè)設計。在設計期間他

43、也給與我無私的幫助。在此表示深深的謝意。</p><p>　　正是他的付出，使我找到并改正了許多看起來很明顯的錯誤和不嚴謹?shù)恼撌?。在畢業(yè)設計的過程中是愉快的，我很感謝與我設計有幫助的每一個人，是他們的存在，讓我感到了畢業(yè)設計的過程中的快樂，使我融入到了團隊工作中，感受到了相互合作的樂趣。</p><p>　　我對所有人的耐心表示感謝，尤其是我的指導老師xx老師。他仔細閱讀了我的論文和程序，