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

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

2、礎(chǔ)上，著重使用Dreamweaver作為工具進(jìn)行網(wǎng)頁設(shè)計與制作的實際操作.本論文主要章節(jié)如下，第一章：緒論，網(wǎng)頁設(shè)計的概述以及需求分析第二章：對個人網(wǎng)站的由來和發(fā)展進(jìn)行了概述與討論。第三章：個人網(wǎng)頁的設(shè)計與規(guī)劃。使用開發(fā)工具Dreamweaver創(chuàng)建各種跨平臺、跨瀏覽器的靜、動態(tài)頁面。確定網(wǎng)站的風(fēng)格特色，網(wǎng)站界面。關(guān)鍵詞：網(wǎng)頁設(shè)計 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è)計與制作的概述網(wǎng)頁設(shè)計是將網(wǎng)站策劃案中的內(nèi)容、網(wǎng)站的主題模式，結(jié)合網(wǎng)頁設(shè)計師的認(rèn)識，通過藝術(shù)設(shè)計的手法表現(xiàn)出來；而網(wǎng)頁制作通常是根據(jù)網(wǎng)頁設(shè)計師制作的設(shè)計稿，按照W3C規(guī)范語言將其制作成網(wǎng)頁格式。1.2需求分析在21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行日新月異的變化，報紙、雜志、廣播、電視等傳統(tǒng)信息傳播方式已經(jīng)不能滿足人類獲得信息的需求。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，各類網(wǎng)站紛紛出現(xiàn)。個人網(wǎng)站也成為了一種主流信息傳播方式。越來越多的人開始制作博客、個人空間、微博、個人網(wǎng)站，來開辟網(wǎng)絡(luò)世界的一片天地，來與世界各地的人

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

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

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

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

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

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

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

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

14、以很容易制作好自己的標(biāo)志。 3.3.3.2設(shè)計網(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)點綴和襯托，絕不能喧賓奪主。一般來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有:藍(lán)色，黃/橙色，黑/灰/白色三大系列色。 3.3.3.3設(shè)計網(wǎng)站字體和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般網(wǎng)頁默認(rèn)的字體是宋體。為了體現(xiàn)站點的風(fēng)格，制作者可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇一些適合的特別字體。3.3.3.4設(shè)計網(wǎng)站宣傳語宣傳語可以說是網(wǎng)站的精神、主題與中心，或者是網(wǎng)站的目標(biāo)。用一句比較有趣、新穎的話或者一個詞來高度概括，可以收到比較好的對外宣傳效果。第4章 總結(jié)在不知不覺中關(guān)于計算機(jī)中網(wǎng)頁設(shè)計與制作的設(shè)計將要結(jié)束了，在整個的寫作設(shè)計過程中，我重溫了Flash、Dreamwave、Html語言、網(wǎng)站建設(shè)的基本思想等重要內(nèi)容，并且從中得到一些心得體會。網(wǎng)頁設(shè)計與制作設(shè)計是在自己獨立完成的，雖然整個設(shè)計內(nèi)容還有很多不足，但是我的確能夠感到在我