個(gè)人網(wǎng)頁設(shè)計(jì)與制作

1、成人教育計(jì)算機(jī)畢業(yè)設(shè)計(jì)畢業(yè)論文（實(shí)踐）報(bào)告專業(yè)： 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)學(xué)院：浙江育人專修學(xué)院班級(jí)： 08電子商務(wù)姓名： 馬楊超2010年3月1日個(gè)人網(wǎng)頁設(shè)計(jì)與制作目錄第1章 緒論.41.1網(wǎng)頁設(shè)計(jì)與制作的概述.41.2需求分析.4第2章 個(gè)人網(wǎng)站的概述和發(fā)展.42.1 個(gè)人網(wǎng)站的概述.42.2 個(gè)人網(wǎng)站的發(fā)展.5第3章 個(gè)人網(wǎng)頁的設(shè)計(jì)與規(guī)劃.53.1 確定設(shè)計(jì)個(gè)人網(wǎng)頁的使用工具Dreamweaver.63.2確定網(wǎng)站的風(fēng)格特色.63.3確定網(wǎng)站界面.7第4章 總結(jié).9致謝.10參考文獻(xiàn).10個(gè)人網(wǎng)頁設(shè)計(jì)與制作摘要：本論文將對(duì)個(gè)人網(wǎng)頁設(shè)計(jì)與制作的方法、工具等展開研究和探討。在介紹網(wǎng)頁設(shè)計(jì)與制作語言的基

2、礎(chǔ)上，著重使用Dreamweaver作為工具進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的實(shí)際操作.本論文主要章節(jié)如下，第一章：緒論，網(wǎng)頁設(shè)計(jì)的概述以及需求分析第二章：對(duì)個(gè)人網(wǎng)站的由來和發(fā)展進(jìn)行了概述與討論。第三章：個(gè)人網(wǎng)頁的設(shè)計(jì)與規(guī)劃。使用開發(fā)工具Dreamweaver創(chuàng)建各種跨平臺(tái)、跨瀏覽器的靜、動(dòng)態(tài)頁面。確定網(wǎng)站的風(fēng)格特色，網(wǎng)站界面。關(guān)鍵詞：網(wǎng)頁設(shè)計(jì) DreamweaverPersonal web design and productionAbstract:This paper will be of personal web design and production methods and tools laun

3、ched research and discussion. In the introduction of web design and production, mainly on the foundation of the language use Dreamweaver as tools for web design and production of actual operationThis thesis mainly section below, the first chapter: introduction to web design &requirements and demand

4、analysis chapter 2: for personal website of the origin and development are summarized and discussed. Chapter 3: personal web page design and planning. Use the development tools Dreamweaver8.0 create various cross-platform, cross-browser static and dynamic pages. Determine the websites style characte

5、ristic, web interface.第1章緒論1.1網(wǎng)頁設(shè)計(jì)與制作的概述網(wǎng)頁設(shè)計(jì)是將網(wǎng)站策劃案中的內(nèi)容、網(wǎng)站的主題模式，結(jié)合網(wǎng)頁設(shè)計(jì)師的認(rèn)識(shí)，通過藝術(shù)設(shè)計(jì)的手法表現(xiàn)出來；而網(wǎng)頁制作通常是根據(jù)網(wǎng)頁設(shè)計(jì)師制作的設(shè)計(jì)稿，按照W3C規(guī)范語言將其制作成網(wǎng)頁格式。1.2需求分析在21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行日新月異的變化，報(bào)紙、雜志、廣播、電視等傳統(tǒng)信息傳播方式已經(jīng)不能滿足人類獲得信息的需求。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個(gè)人網(wǎng)站也成為了一種主流信息傳播方式。越來越多的人開始制作博客、個(gè)人空間、微博、個(gè)人網(wǎng)站，來開辟網(wǎng)絡(luò)世界的一片天地，來與世界各地的人

6、進(jìn)行交流。而網(wǎng)頁設(shè)計(jì)與制作作為個(gè)人網(wǎng)站的重要依托伴隨著個(gè)人網(wǎng)站的快速發(fā)展而越來越重要。吸引瀏覽用戶的則是視覺效果出色、信息量豐富、使用起來便捷的網(wǎng)頁，所以網(wǎng)頁設(shè)計(jì)尤為重要。第2章 個(gè)人網(wǎng)站的概述和發(fā)展2.1 個(gè)人網(wǎng)站的概述：個(gè)人網(wǎng)站包括：博客，個(gè)人論壇，個(gè)人主頁等等 網(wǎng)絡(luò)的大發(fā)展趨勢(shì)就是向個(gè)人網(wǎng)站發(fā)展。個(gè)人網(wǎng)站是一個(gè)可以發(fā)布個(gè)人信息及相關(guān)內(nèi)容。通俗理解個(gè)人網(wǎng)站：就是指網(wǎng)站內(nèi)容是介紹自己的或是以自己的信息為中心的網(wǎng)站，不一定是自己做的網(wǎng)站，但強(qiáng)調(diào)的是以個(gè)人信息為中心。個(gè)人網(wǎng)站是指?jìng)€(gè)人或團(tuán)體因某種興趣、擁有某種專業(yè)技術(shù)、提供某種服務(wù)或把自己的作品、商品展示銷售而制作的具有獨(dú)立空間域名的網(wǎng)站。2.2

7、 個(gè)人網(wǎng)站的發(fā)展：1994年中國(guó)科學(xué)院高能物理研究所設(shè)立了國(guó)內(nèi)第一個(gè)Web服務(wù)器，推出一個(gè)叫做“中國(guó)之窗”的網(wǎng)頁，這可能是國(guó)內(nèi)Internet上出現(xiàn)的第一個(gè)Web網(wǎng)頁，1995年開始，中國(guó)教育科研網(wǎng)，中國(guó)科技網(wǎng)，中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)以及中國(guó)金橋網(wǎng)這構(gòu)成中國(guó)數(shù)字神經(jīng)系統(tǒng)的四大互聯(lián)網(wǎng)絡(luò)相繼建成，使互聯(lián)網(wǎng)在中國(guó)開始真正進(jìn)入社會(huì)生活之中。個(gè)人網(wǎng)站發(fā)展的第二階段是從1997年初到1998年，這段時(shí)間，中國(guó)網(wǎng)民數(shù)量飛速增長(zhǎng)，個(gè)人網(wǎng)站日漸繁榮，個(gè)人主頁的數(shù)量急劇增加。同時(shí)，越來越多的商業(yè)網(wǎng)站開始免費(fèi)提供個(gè)人主頁空間，這些良好的外部極大地促進(jìn)了個(gè)人網(wǎng)站的發(fā)展，涌現(xiàn)了一批很著名的個(gè)人網(wǎng)頁，從1998年下半年開始

8、，隨著互聯(lián)網(wǎng)應(yīng)用的深入的普及，隨著眾多主頁制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求?，F(xiàn)今個(gè)人網(wǎng)站已經(jīng)非常普及，各種博客、微博、個(gè)人空間遍布整個(gè)網(wǎng)絡(luò)。第3章 個(gè)人網(wǎng)頁設(shè)計(jì)的要領(lǐng)3.1 確定設(shè)計(jì)個(gè)人網(wǎng)頁的使用工具DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺(tái)、跨瀏覽器的頁面。Macromedia的Roundtrip HTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動(dòng)態(tài)HTML功能（例如具有動(dòng)

9、態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺(tái)和瀏覽器中可能發(fā)生的錯(cuò)誤。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：(1) 文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似。(2) 裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。(3) 對(duì)象工具欄包含創(chuàng)建不同類型的對(duì)象（例如圖象、表格和層等）的按鈕。(4) 屬性檢查器顯示選定對(duì)象的屬性。(5) 快捷菜單可以使用戶對(duì)當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令。(6) 可固定的浮動(dòng)工具欄允許用戶將浮動(dòng)窗口、檢查器和

10、工具欄組合在一個(gè)或多個(gè)選擇窗口中。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photoshop來進(jìn)行編輯與設(shè)定圖檔的最佳化。3.2確定網(wǎng)站的風(fēng)格特色每一個(gè)網(wǎng)站都有自己的風(fēng)格特色。通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以反映出一個(gè)站點(diǎn)的風(fēng)格特性:是蓬勃大氣的，還是精致秀麗的;是沉穩(wěn)實(shí)用的，還是新潮特異的;是簡(jiǎn)單明了的，還是復(fù)雜多變的。風(fēng)格”是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這

11、個(gè)“整體形象”包括站點(diǎn)的CI(標(biāo)志，色彩，字體，標(biāo)語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值等等諸多因素，只要你能讓瀏覽者看的第一眼感到不一樣的感覺這就形成了網(wǎng)站的風(fēng)格。 總之，網(wǎng)站必須是要有自己特色的，必須是體現(xiàn)個(gè)性的。3.3確定網(wǎng)站界面界面往往決定著網(wǎng)站給瀏覽者的第一印象，所以非常重要，必須要將它處理得合理、有美感。在確定網(wǎng)站的界面時(shí)要注意以下三點(diǎn): 3.3.1欄目與板塊編排 構(gòu)建一個(gè)網(wǎng)站首先要有一個(gè)大致的框架，然后進(jìn)行合理的規(guī)劃，才能主題明確、層次清晰。網(wǎng)站建設(shè)初學(xué)者，最忌:確定題材后沒有進(jìn)行合理規(guī)劃，立刻開始制作。從而造成了網(wǎng)站結(jié)構(gòu)的不清晰，目錄、板塊編排混亂，整體上看起來

12、沒有任何美感可言。結(jié)果可以預(yù)想，不但瀏覽者使用起來麻煩，不愿意第二次光顧，制作者自己在擴(kuò)充和維護(hù)網(wǎng)站也相當(dāng)困難。因此，我們?cè)趧?dòng)手制作網(wǎng)頁前，一定要考慮好欄目和板塊的編排問題。 合理的編排規(guī)劃要做到： 1、盡可能刪除那些與主題無關(guān)的欄目; 2、盡可能將網(wǎng)站內(nèi)最有價(jià)值的內(nèi)容列在欄目上; 3、盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢;輔助內(nèi)容，如站點(diǎn)簡(jiǎn)介、版權(quán)信息、個(gè)人信息等大可不必放在主欄目里，以免沖淡主題。 3.3.2目錄結(jié)構(gòu)與鏈接結(jié)構(gòu) 網(wǎng)站的目錄是指建立網(wǎng)站時(shí)創(chuàng)建的目錄。例如:在用Frontpage建立網(wǎng)站時(shí)都默認(rèn)建立了根目錄和Images子目錄。目錄的結(jié)構(gòu)是一個(gè)容易忽略的問題，大

13、多數(shù)站長(zhǎng)都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。目錄結(jié)構(gòu)的好壞，對(duì)瀏覽者來說并沒有什么太大的感覺，但是對(duì)于站點(diǎn)本身的維護(hù)，以后內(nèi)容的擴(kuò)充和移植有著重要的影響。所以建立目錄結(jié)構(gòu)時(shí)也要仔細(xì)安排。3.3.3進(jìn)行形象設(shè)計(jì) 3.3.3.1設(shè)計(jì)網(wǎng)站標(biāo)志(LOGO) LOGO是指網(wǎng)站的標(biāo)志，標(biāo)志可以是中文、英文字母，符號(hào)、圖案，也可以是網(wǎng)站內(nèi)有代表性的人物、動(dòng)物、植物，可以用它們作為設(shè)計(jì)的藍(lán)本，加以卡通化或者藝術(shù)化;專業(yè)網(wǎng)站可以以本專業(yè)有代表的物品作為標(biāo)志。比如:百度用了一個(gè)藍(lán)色的熊掌來當(dāng)標(biāo)志，IBM電腦的標(biāo)志使用的是英文縮寫。最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志，采用不同的字體、字母的變形、字母的組合可

14、以很容易制作好自己的標(biāo)志。 3.3.3.2設(shè)計(jì)網(wǎng)站色彩網(wǎng)站給人的第一印象來自視覺沖擊，不同的色彩搭配產(chǎn)生不同的效果，好的顏色搭配可以讓瀏覽者心情愉悅，反之，色彩搭配不協(xié)調(diào)使畫面看起來很別扭。“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩，要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺。其他的色彩只能充當(dāng)點(diǎn)綴和襯托，絕不能喧賓奪主。一般來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有:藍(lán)色，黃/橙色，黑/灰/白色三大系列色。 3.3.3.3設(shè)計(jì)網(wǎng)站字體和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的風(fēng)格，制作者可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇一些適合的特別字體。3.3.3.4設(shè)計(jì)網(wǎng)站宣傳語宣傳語可以說是網(wǎng)站的精神、主題與中心，或者是網(wǎng)站的目標(biāo)。用一句比較有趣、新穎的話或者一個(gè)詞來高度概括，可以收到比較好的對(duì)外宣傳效果。第4章 總結(jié)在不知不覺中關(guān)于計(jì)算機(jī)中網(wǎng)頁設(shè)計(jì)與制作的設(shè)計(jì)將要結(jié)束了，在整個(gè)的寫作設(shè)計(jì)過程中，我重溫了Flash、Dreamwave、Html語言、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容，并且從中得到一些心得體會(huì)。網(wǎng)頁設(shè)計(jì)與制作設(shè)計(jì)是在自己獨(dú)立完成的，雖然整個(gè)設(shè)計(jì)內(nèi)容還有很多不足，但是我的確能夠感到在我