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

./目錄一引言 3二建設(shè)的流程 3三網(wǎng)頁制作 3〔一制作步驟 3〔二常用參數(shù) 4〔三網(wǎng)頁布局 5〔四網(wǎng)頁色彩 6〔五細(xì)節(jié)的把握 8〔六常用工具介紹 9四企業(yè)網(wǎng)頁制作實(shí)例 9五結(jié)束語 10參考文獻(xiàn) 11致詞 12淺談網(wǎng)頁制作XXX指導(dǎo)教師：XXX〔學(xué)院系級專業(yè)[摘要]網(wǎng)頁設(shè)計(jì)作為用戶界面交互設(shè)計(jì)的延伸,是在新的媒體和新的技術(shù)支持下實(shí)現(xiàn)一個(gè)全新的設(shè)計(jì)創(chuàng)作領(lǐng)域。設(shè)計(jì)創(chuàng)作網(wǎng)頁應(yīng)遵循其特有的特點(diǎn)和結(jié)構(gòu)思路,具備實(shí)際可行性和外觀的時(shí)尚。本論文講述了建設(shè)的一般步驟,并結(jié)合豐富的色彩應(yīng)用與網(wǎng)頁設(shè)計(jì)理論,通過網(wǎng)頁制作實(shí)例,闡述了網(wǎng)頁設(shè)計(jì)的視覺效果和具體操作。關(guān)鍵詞網(wǎng)頁色彩建設(shè)布局DiscussesaboutthehomepagedesignXXXInstructor：XXX〔ManagementDepartmentofE-commercein200X[Abstract]Thehomepagedesignwhichisusedtobetheextendingofuserinterfacedesigning,itisrealizesabrand-newdesigncreationfieldinnewmediaandunderthenewtechnicalsupport.Designcreationhomepageshouldfollowthehomepageitsuniquebackgroundcharacteristicandthestructurementality,ithasactualfeasibleandtheoutwardappearancefashion.Thearticletalkaboutthegeneralstepofdesigninghomepage,andunifiestherichcolorapplicationandhomepagedesigntheory,throughChongQingtuotianscienceandtechnologydevelopmentlimitedcompanyhomepagedesignexample,elaboratedthehomepagedesignvisualeffectandtheconcreteoperationKeywordshomepageColorWebsitedesignLayout一引言隨著Internet的誕生和發(fā)展,許多人不再僅僅局限于網(wǎng)上沖浪,而是參與到建設(shè)中。企業(yè)建站相當(dāng)于在網(wǎng)上建立一個(gè)家,你就可以在這里向客戶介紹你的企業(yè),展示你的實(shí)力,推銷你的產(chǎn)品,網(wǎng)頁制作作為制作中一個(gè)重要的環(huán)節(jié),相對于傳統(tǒng)的平面設(shè)計(jì)而言,網(wǎng)頁設(shè)計(jì)具有更多的新穎性,更多可以表現(xiàn)的手法。結(jié)合本人的實(shí)習(xí)過程,現(xiàn)就建設(shè)與管理過程中,網(wǎng)頁設(shè)計(jì)與制作的具體經(jīng)歷,包括：網(wǎng)頁設(shè)計(jì)與制作過程中的網(wǎng)頁布局、色彩構(gòu)置,框架結(jié)構(gòu)等相關(guān)事項(xiàng)做以下論述。二建設(shè)的流程1．定義合適的域名。由域名構(gòu)成的網(wǎng)址會像商標(biāo)一樣,有助于將來塑造網(wǎng)上的形象。域名除了要符合公司的性質(zhì)以及信息容的特征外,還要具有簡潔、易記、具有沖擊力的特點(diǎn)。2．租用虛擬服務(wù)器。有了域名后,就需要一個(gè)空間存放,這個(gè)空間就是Internet上的服務(wù)器。一般虛擬主機(jī)提供商都能向用戶提供大容量、高速度的服務(wù)器,用戶可根據(jù)的容設(shè)置及其發(fā)展前景來選擇。3．設(shè)計(jì)網(wǎng)頁。網(wǎng)頁的設(shè)計(jì)制作可以自己完成,也可以通過虛擬主機(jī)提供商或?qū)I(yè)的網(wǎng)頁設(shè)計(jì)制作商來完成。設(shè)計(jì)網(wǎng)頁前要收集所有需要放在上的文本資料、圖片等,并盡量用文字詳細(xì)說明制作的框架結(jié)構(gòu),將收集的材料提供給網(wǎng)頁設(shè)計(jì)者。4．ICP備案。備案的目的就是為了防止在網(wǎng)上從事非法的經(jīng)營活動(dòng),打擊不良互聯(lián)網(wǎng)信息的傳播,如果不備案的話,很有可能被查處以后關(guān)停。ICP備案可以自主通過官方備案.在線備案或者通過當(dāng)?shù)仉娦挪块T兩種方式來進(jìn)行備案。三網(wǎng)頁制作〔一制作步驟是網(wǎng)頁的集合,一個(gè)站點(diǎn)用的所有網(wǎng)頁構(gòu)成一個(gè),網(wǎng)頁是的表現(xiàn)形式,網(wǎng)頁設(shè)計(jì)是指對整體頁面的設(shè)計(jì),包括頁面風(fēng)格、配色、布局、容等。網(wǎng)頁設(shè)計(jì)包含的容非常多,大體分為兩個(gè)方面：一方面是純本身的設(shè)計(jì),如文字、排版、圖片制作、平面設(shè)計(jì)、靜態(tài)圖文和動(dòng)態(tài)聲音、影像等；另一方面是的延伸設(shè)計(jì),包括主題、瀏覽群的定位、智能交互、制作策劃、形象包裝和宣傳營銷等。設(shè)計(jì)頁面的第一步就是設(shè)計(jì)片面布局,就像報(bào)刊雜志版面設(shè)計(jì)一樣,我們可以看作一報(bào)約或者一份雜志來進(jìn)行排版布局。1.草稿新頁面就像一白紙,沒有任何的約定俗成的東西,可以盡可能地發(fā)揮想象力、創(chuàng)造力,將想象的布局到上面去。這是原創(chuàng)階段,你不必講究細(xì)膩工整,你也可在草稿本上先畫出整個(gè)布局框架,把多個(gè)版塊的位置先粗略的布置上去以往下一步工作的展示,這一步也可以借住PHOTOSHOP或其他工具軟件來完成。2.粗略布局在草稿的基礎(chǔ)上,將需要的功能模塊放到頁面上去,這時(shí)要遵循突出重點(diǎn)、整體協(xié)調(diào)的原則,首先將標(biāo)志、導(dǎo)航條、廣告條等最主要的模塊放在最突出位置,然后考慮其他模塊的布局。3.定稿定稿即將粗略布局精細(xì)化、具體化,完成整個(gè)頁面的設(shè)計(jì)。頁面的制作,首先在根據(jù)客戶的要求下,完成首頁的制作,在經(jīng)客戶確定后,再制作其他的頁面,制作完成后,交給客戶驗(yàn)收,然后發(fā)給客戶確定,待所有的頁面的都經(jīng)客戶確定后,完成網(wǎng)頁的制作進(jìn)程,交給程序員添加程序。〔二常用參數(shù)圖片質(zhì)量與下載速度由于網(wǎng)絡(luò)速度問題,我們要考慮圖片的大小對傳輸速度的影響,如果圖片太大就會影響瀏覽速度,訪問者很快就對這個(gè)失去了興趣,只有充分了解圖片質(zhì)量與下載速度的關(guān)系,并了解不同的文件格式,才能更有效的表達(dá)容。1.分辨率理解圖像分辨率可以直接控制文件大小和下載速度,進(jìn)而影響訪問者的人數(shù),創(chuàng)建WEB圖片的要小、快、好。顯示器的分辨率起決定性的作用,大多數(shù)顯示器使用的是1024*768的分辨率,因?yàn)橐ㄟ^顯示器頁面,所以用高分辨率并不會增加圖片質(zhì)量相反還會降低圖片的下載速度。2.位圖習(xí)慣性稱為圖像,而將矢量圖稱為圖形,位圖是位映射圖像的簡稱,也可叫柵格圖。它將一幅圖像分成許多柵格,柵格的每一個(gè)點(diǎn)就是圖像的像素,其值就是像素的亮度和色彩度,擴(kuò)大位圖尺寸的效果是增多像素,從而將使線條和形狀顯得的參次不齊,位圖的與其分辨率密切相關(guān),因此在處理位圖圖像時(shí),必須設(shè)置合適的圖像分辨率,否則輸出圖像時(shí)會遺漏細(xì)節(jié),使圖像模糊。3.矢量矢量圖也稱為面向?qū)ο竦膱D像或繪圖圖像,它使用一組線段造型描述一段圖像,圖像中包含的直線,弧線和造型的設(shè)置與開關(guān)是由指令描述的,矢量圖適用于描述色彩簡單的圖像,矢量文件中的圖像元素稱為對象,每一個(gè)對象都是一個(gè)自成一體的主體,它具有形狀、輪廓、大小和屏幕位置等屬性。放大位圖會失真,但放大矢量圖不會失真。4.圖片格式制作好的效果圖可以保存為各種格式,包括GIF格式,JPEG格式和PNG格式等各個(gè)圖片格式之間的區(qū)別為：GIF格式即圖形交換格式；GIF格式的圖片只能使用256種顏色,不適合顯示色彩豐富的圖像容。其特點(diǎn)是1.采用隔行掃描的顯示方式；2.可以設(shè)置背景透明；3.可以制作簡單的動(dòng)畫。JPEG格式可以顯示顏色復(fù)雜的圖片,但是在處理大面積的顏色塊時(shí)可能會出現(xiàn)明顯的壓縮痕跡。PNG格式的圖片兼有GIF和JPEG的優(yōu)點(diǎn)。〔三網(wǎng)頁布局常見網(wǎng)頁版式布局結(jié)構(gòu)有以下幾種：兩欄式結(jié)構(gòu),即頁面頂部為標(biāo)志或廣告條,下面分為左右兩欄,一般左欄式導(dǎo)航或分類信息,右欄為主要容,這種布局很容易掌握,但如果在色彩上不加以注意的,很容易給人一種"乏味"的感覺。三欄式結(jié)構(gòu)是一些大型常用的布局結(jié)構(gòu),一般為上面是橫幅的廣告條,下面分為三豎欄,中間較大,是主要的信息,左右是小條容或者廣告條。三欄式給人一種充實(shí)的感覺,但頁面擁擠,不夠靈活,是常用的一種布局形式。"三"型結(jié)構(gòu),這種結(jié)構(gòu)多用于國外或者視頻類,其特點(diǎn)是分類清晰,展示方便。左右框架型,是企業(yè)或論壇常用的布局,頁面分為左右兩部分,左邊一般為導(dǎo)航部分,右邊是與導(dǎo)航相對應(yīng)的容。左右框架型的結(jié)果非常清晰,容一目了然,便于信息的查詢。上下框架型與左右框架型類似,其區(qū)別僅僅在于形式。頁面整體為橫向分布,上面為導(dǎo)航,中間的大展式窗口很突出,整個(gè)顯得簡潔明亮,這種結(jié)構(gòu)適合于信息量不大,主要靠圖片展示容的。Flash型主要采用現(xiàn)在流行的Flash技術(shù),頁面表達(dá)的容較為豐富,給人視覺和聽覺上很大的沖擊,處理得當(dāng)會達(dá)到Web頁面難以達(dá)到的效果?！菜木W(wǎng)頁色彩1.色彩模式。在自然界看到的各種色彩都是由三種色光或三種顏色組成的,而他們本身不能再分拆出其他的顏色成分,所以稱為三原色。三原色分為光學(xué)三原色和物理三原色。這兩種三原色各自混合后,分別形成了不同的色彩體系。RGB模式：R代表紅色,G代表綠色,B代表藍(lán)色,三種色彩疊加形成了其它的色彩。因?yàn)槿N顏色都有256個(gè)亮度水平級,所以三種色彩疊加就形成1670萬種顏色了,通過它們足以再現(xiàn)絢麗的世界。就編輯圖象而言,RGB色彩模式也是最佳的色彩模式,因?yàn)樗梢蕴峁┤聊坏?4bit的色彩圍,即真彩色顯示。CMYK模式：CMYK代表印刷上用的四種顏色,C代表青色,M代表洋紅色,Y代表黃色,K代表黑色。因?yàn)樵趯?shí)際引用中,青色、洋紅色和黃色很難疊加形成真正的黑色,最多不過是褐色而已。因此才引入了K——黑色。黑色的作用是強(qiáng)化暗調(diào),加深暗部色彩。CMYK模式是最佳的打印模式,RGB模式盡管色彩多,但不能完全打印出來。可以先用RGB模式進(jìn)行編輯工作,再用CMYK模式進(jìn)行打印工作,在打印前才進(jìn)行轉(zhuǎn)換,然后加入必要的色彩校正,銳化和休整。2.色彩的心理表現(xiàn)。色彩具有精神的價(jià)值,人們常常能感受到色彩對自己心理的影響,這些影響總是在不知不覺中發(fā)揮作用,影響我們的情緒。色彩的心理效應(yīng)法是在不同層次中,有些色彩對人有直接的刺激,有些則需要通過間接的聯(lián)想,更高層次的則涉及人的觀念與信仰。3.色彩的表達(dá)感覺。不同的色彩給人不同的心理暗示。對色彩的不同感覺和認(rèn)知,對色彩搭配所產(chǎn)生的心理聯(lián)想,會導(dǎo)致不同的心理反應(yīng)。空間感——色彩的空間感與色彩對比的知覺度有關(guān),對比度強(qiáng)和高純度的色彩具有前進(jìn)感,對比度弱和低純度色的色彩具有后退感。色彩的空間感,具體表現(xiàn)在利用色彩的明度對比層次、形與色的排列轉(zhuǎn)折、大小彎曲等秩序節(jié)奏,從而有意識地形成凹凸深遠(yuǎn)的空間感,甚至利用人的錯(cuò)覺形成假象空間色彩的前進(jìn)、后退感形成的距離措視原理、在網(wǎng)頁中常被用來加強(qiáng)畫面的空間層次。親切感——色彩的親切感是指人對色彩的對比變化所產(chǎn)生的親近的心理感覺。通常較為明快柔和的色彩都能使人產(chǎn)生親切感,色彩的純度對比和明度對比較弱時(shí),也會使整體色調(diào)變得柔和、輕快。產(chǎn)生親切感的網(wǎng)頁一般采用同類色、類似色和鄰近色。使用具有親切感的色彩,可以用來表現(xiàn)家具、兒童和女性、服裝及日用消費(fèi)品等。莊重感——通常,明度較低、純度不高的色彩能給人以莊重感、常用的有黑、棕色、深藍(lán)和褐色等。在使用時(shí)要注意搭配,搭配不當(dāng)則會產(chǎn)生沉悶、呆板的感覺。神秘感——色彩的神秘感,并不是色彩本身具有的,而是人的聯(lián)想所產(chǎn)生的心理感覺。一般能使人感到神秘的色彩,多為明度較低、色相不明確、純度也不高的色彩,如昏黃的氛圍、幽暗的巷子、夜晚的角落,都可以用來營造色彩的神秘感。興奮和憂郁感——色彩和人的個(gè)性一樣,具有明朗與憂郁的區(qū)分。明朗的色彩必然是明度高、對比較強(qiáng)的色彩,以及純度偏純的色彩,憂郁的色彩則是明度低、對比較弱的色彩,以及純度偏低且色性偏冷的色彩。一般來說,暖色較易引起心理的亢奮和積極性,屬于興奮色,其中朱紅色最具興奮作用,其他明度較高、純度較高的顏色〔如黃色、橘黃色等也具有煽動(dòng)性、傾向于興奮色。4.網(wǎng)頁色彩的搭配。將色彩具體到網(wǎng)頁搭配中,應(yīng)遵循一定的方法。同色搭配,該方法采用一種顏色的深淺搭配,盡管設(shè)計(jì)要避免采用單一色彩,以免產(chǎn)生單調(diào)的感覺,但通過調(diào)整色彩的飽和度和透明度也可以產(chǎn)生變化,使避免單調(diào)。鄰近色搭配,使用在色帶上相鄰近的顏色,如綠色和藍(lán)色、紅色和黃色。采用鄰近色彩設(shè)計(jì)網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂,易于達(dá)到頁面的和諧統(tǒng)一。對比色搭配,該方法使用兩種完全不同的顏色搭配。對比色可以突出重點(diǎn),產(chǎn)生強(qiáng)烈的視覺效果。通過合理使用對比色,能夠使特色鮮明,重點(diǎn)突出。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào),對比色作為點(diǎn)綴,起到畫龍點(diǎn)睛的作用。明度推移色彩搭配,有兩種方法操作：通過加入等量的白色,使一種顏色漸亮；或者通過加入等量的黑色,使顏色變暗。這兩種方法都可以產(chǎn)生色彩明度漸變的效果?！参寮?xì)節(jié)的把握的品位,除了頁面本身整體的視覺效果外,往往更突出在一些細(xì)節(jié)上,只有把握住細(xì)節(jié),才能更好地提高瀏覽者的使用友好度,給瀏覽者留下深刻的印象。1．顏色。在初學(xué)網(wǎng)頁設(shè)計(jì)的時(shí)候,在用色方面要非常注意,如果對網(wǎng)頁用色沒有太大的把握,那么就先選擇好網(wǎng)頁的基本色調(diào),然后針對這一種顏色去進(jìn)行變化,如需加其他顏色,可以試著加些灰色,因?yàn)榛疑侵猩{(diào),不會對頁面顏色造成太大的沖突。這樣做出的網(wǎng)頁整體顏色會非常協(xié)調(diào)統(tǒng)一。2．線條的運(yùn)用。很多朋友在制作網(wǎng)頁的時(shí)候,在兩塊過渡的地方,如banner和導(dǎo)航條之間會用一條細(xì)線區(qū)分開,此時(shí)往往會畫上一條直直的線,這樣給人感覺會很突兀。3．圖標(biāo)。中在各個(gè)標(biāo)題的前面適當(dāng)?shù)募有﹫D標(biāo)點(diǎn)綴網(wǎng)頁,可以使網(wǎng)頁效果更加出彩,但是切忌網(wǎng)頁圖標(biāo)使用過多,圖標(biāo)的色調(diào)也要一致,避免雜亂。4．文字。中文字的運(yùn)用,用戶在瀏覽網(wǎng)頁時(shí),主要是要看網(wǎng)頁當(dāng)中的文字容,所以要特別注意文字的處理。一是文字的顏色不要和背景顏色相近,這樣用戶在瀏覽文字信息時(shí)會非常的吃力；二是不要亂用字體,你使用的字體在本機(jī)上可以顯示,但是到了別人的電腦上就不一定能顯示出來了；三是注意文字之間的行距,通常我們不對文字進(jìn)行行距的設(shè)置時(shí),文字間的行距會非常小；影響頁面的美觀度,注意文字間的行距,使其不會顯得特別擠,做到寬松有序?！擦Ｓ霉ぞ呓榻B用來制作效果圖的軟件并沒有明確的規(guī)定?？梢允褂酶鞣N圖形制作軟件和處理軟件,現(xiàn)在通常使用的軟件是PHOTOSHOOP和FIREWORKS。在制作效果圖時(shí),使用的軟件對最終結(jié)果并沒有什么影響,用自己精通的即可。Photoshop是一款非常好用的平面設(shè)計(jì)軟件。由Adobe公司開發(fā)設(shè)計(jì),其用戶界面易懂、功能完善、性能穩(wěn)定,是比較專業(yè)的圖像處理軟件,它具有強(qiáng)大的濾鏡功能。所以,在很多的的廣告、出版、軟件公司,Photoshop都是首選的平面工具,它有很多的快捷方式,如抓手工具H鍵,TABLE鍵切換顯示或隱藏所有的控制板,D鍵、X鍵迅速切換前景色和背景色等,靈活的運(yùn)用快捷鍵,可以使設(shè)計(jì)的速度大大提高。Fireworks是網(wǎng)頁開發(fā)圖形處理工具,可以做出矢量的圖形,主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的網(wǎng)頁圖片比較實(shí)用,而且學(xué)起來也比Photoshop易上手,是一個(gè)入門級的網(wǎng)頁設(shè)計(jì)軟件。四企業(yè)網(wǎng)頁制作實(shí)例1．分析客戶的要求和企業(yè)的類型,并參考相關(guān)類型的企業(yè),結(jié)合自己的實(shí)際經(jīng)驗(yàn)畫出大概的框架圖,并標(biāo)明其用途和要實(shí)現(xiàn)的功能,這一步可直接在紙上完成。2．利用PS來進(jìn)行具體的設(shè)計(jì),利用輔助線畫出框架圖,不同模塊之間要畫兩條輔助線,并留一定的距離,便于對網(wǎng)頁的控制,接下便可以制作企業(yè)的logo、廣告條、導(dǎo)航條等主要容,然后依次完成其他模塊的制作。3．對色彩、文字的排版、導(dǎo)航條、底部容進(jìn)行細(xì)化,使達(dá)到一定的品質(zhì)感,完成首頁的全部制作后就可以把做好的頁面發(fā)給客戶確定。4.首頁確定以后,便開始頁的制作,頁的制作相對簡單,保持首頁的整體風(fēng)格不變,對相應(yīng)的版塊就行修改即可,相同模塊的容只需要制作一個(gè)即可,頁制作完成后發(fā)給客戶確定,完成整個(gè)網(wǎng)頁的設(shè)計(jì),并交給程序員切片添加程序。以本人在拓天科技發(fā)展實(shí)習(xí)過程中,通過對其頁面的制作,結(jié)合本論文寫作,將主頁〔index.asp效果圖展示如圖1所示。圖1主頁放入,網(wǎng)頁圖片五結(jié)束語網(wǎng)頁制作主要是利用圖形制作軟件和處理軟件進(jìn)行網(wǎng)頁效果圖的制作。我們需要了解一個(gè)完整的制作過程,并知道網(wǎng)頁制作在制作中的作用。一方面結(jié)合具體的實(shí)例,多加練習(xí),培養(yǎng)對于技術(shù)的敏感和快速適應(yīng)性,注意到技術(shù)變化帶來的各種新的可能性,消除技術(shù)所形成的障礙；另一方面要多方面、多角度地感受與掌握電腦設(shè)計(jì)的時(shí)尚語言,擴(kuò)展對傳統(tǒng)設(shè)覺設(shè)計(jì)疇的認(rèn)識。參考文獻(xiàn)[1]鄧文淵.網(wǎng)頁制作高手[M].：人民郵電大學(xué)出版,2007,6[2]憲廣.網(wǎng)頁制作邊學(xué)邊用[M].：清華大學(xué),2009,3[3]網(wǎng)頁設(shè)計(jì)入門[EB/OL]..xue8./sale/view.asp?ArticleID=288[4]許凌云,柳勇良.網(wǎng)頁設(shè)計(jì)全方位學(xué)習(xí)[M].：清華大學(xué),2008,11[5]琳.photoshopcs3入門實(shí)戰(zhàn)與提高[M].：電子工業(yè),2008,11[6]焦慧.網(wǎng)頁制作基礎(chǔ)與典型例[M].：電子工業(yè),2008,7[7]戎馬工作室.Dreamweaver8與asp動(dòng)態(tài)開發(fā)[M].：機(jī)械工業(yè),2006,5[8]戴一波.DreamweaverCS3制作炫例精講[M].：電子工業(yè),2008,1[9]何秀芳.網(wǎng)頁制作與建設(shè)課堂實(shí)錄[M].：人民郵電.2009,3[10]連三.新編網(wǎng)頁制作與建設(shè)入門與提高[M].：人民郵電.2008,9[11]鄧文淵.網(wǎng)頁制作高手FLASH8[M].：人民郵電,2007,6[12]胡崧.超夢幻勁爆網(wǎng)頁[M].中國青