畢業(yè)論文及設(shè)計(jì)-個(gè)人網(wǎng)站設(shè)計(jì)論文

學(xué)號:XXX密級:XXX分類號:XXX編號:XXXXXXX大學(xué)XX學(xué)院畢業(yè)論文題目個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)期班專業(yè)撰寫者指導(dǎo)教師提交日期

個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)【摘要】本文就個(gè)人網(wǎng)站的規(guī)劃與建設(shè)，以軟件工程的方法對過程進(jìn)行了分析與研究。本文的主要工作集中在：對Web頁進(jìn)行概述，主要是對Internet的歷史和開展作了回憶，在Web頁的定義和特性上進(jìn)行闡述。并對網(wǎng)站開發(fā)過程中使用的開發(fā)工具和技術(shù)作了簡要的介紹。對網(wǎng)站建設(shè)中提及到得術(shù)語進(jìn)行了解釋，并對個(gè)人網(wǎng)站的由來和開展進(jìn)行了討論；對自己的個(gè)人網(wǎng)站從規(guī)劃建設(shè)進(jìn)行了詳細(xì)的分析；使用Dreamweaver、Photoshop、Flash等技術(shù)實(shí)現(xiàn)了個(gè)人網(wǎng)站的各種功能并且就網(wǎng)站建設(shè)提出了自己的觀點(diǎn)與建議?！娟P(guān)鍵詞】網(wǎng)站DreamweaverHTMLCSS風(fēng)格創(chuàng)意

PersonalWebsiteDesignandImplementation【Abstract】Thegroundworkofthistextisconcentratedon:Goonbecauseitsumup,whosenameismainlyactasandreviewatdevelopmentsofhistoryagainstInternets,forWebthedefinitionsofpagesgoonandexplainatcharacteristics.Andhasdonebriefintroductiontothedevelopinginstrumentandtechnologythatareusedinthecourseofdevelopingofwebsite.ThegettingundermoreconstructionaboutWebsitementiongoonandexplainforpersonaltheoriginsoftheWebsitegoonanddiscussatdevelopmentsattermthatget.ThegettingWebsitepersonalplanningtobuildingdetailedmoreanalysisabouttheoneone’sown.TheuseofDreamweaver,Photoshop,Flashandothertechnologiestoachieveavarietyofmysitefeature.FromWebsitebuildandproposeone’sownviewandsuggestions.【Keywords】WebsiteDreamweaverHTMLCSSstylecreative

目錄第一章緒言5第一節(jié)Web頁概述5第二節(jié)開發(fā)工具的介紹6第二章個(gè)人網(wǎng)站設(shè)計(jì)分析9第一節(jié)相關(guān)術(shù)語9第二節(jié)個(gè)人網(wǎng)站的由來和開展11第三節(jié)個(gè)人網(wǎng)站的設(shè)計(jì)和規(guī)劃11第三章個(gè)人網(wǎng)站的設(shè)計(jì)過程14第一節(jié)創(chuàng)立站點(diǎn)14第二節(jié)列出表格、框架、層14第三節(jié)網(wǎng)頁文字、圖像及多媒體元素的添加15第四節(jié)關(guān)于錨鏈接和CSS樣式17第四章網(wǎng)站設(shè)計(jì)的心得18第一節(jié)關(guān)于網(wǎng)站的質(zhì)量18第二節(jié)網(wǎng)頁中的色彩搭配18第三節(jié)圖像、著名插件、導(dǎo)航按鈕的使用19第五章局部源代碼21第六章結(jié)束語23致謝24參考文獻(xiàn)25第一章緒言在已跨入21世紀(jì)的今天，人類使用和學(xué)習(xí)信息的方式以及信息的包裝方式正在進(jìn)行著不可阻擋的革命，這次革命將比印刷術(shù)的出現(xiàn)所產(chǎn)生的影響以及對社會開展的推動遠(yuǎn)為復(fù)雜而巨大。目前，我國上網(wǎng)的人口已超過1億，成為世界上網(wǎng)民最多的國家，許多人在需要查詢信息，首先想到的就是上網(wǎng)。網(wǎng)站的迷人之處在于綜合使用文本、圖像、聲音、動畫和視頻信息及內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點(diǎn)，無可置疑，網(wǎng)站已成為最吸引人的也是最有效的信息傳遞手段和方式。隨著網(wǎng)絡(luò)技術(shù)的開展，各類網(wǎng)站紛紛出現(xiàn)。個(gè)人網(wǎng)站也成為一種時(shí)尚。越來越多的人希望擁有自己的網(wǎng)站，開辟網(wǎng)絡(luò)世界的一片天地，展示自己的才華和風(fēng)格。第一節(jié)Web頁概述一、Web根本知識Web〔WorldWideWeb,簡稱WWW，又稱萬維網(wǎng)〕是目前Internet上應(yīng)用最廣泛也是最重要的信息效勞類型，它的影響已經(jīng)進(jìn)入了Internet上的廣告、新聞、電子商務(wù)和展示信息等各個(gè)效勞領(lǐng)域。Web采用瀏覽器/效勞器〔B/S〕工作模式，其運(yùn)作模式可以描述為：請求→處理→應(yīng)答。Web以超文本標(biāo)記語言HTML〔HyperTextMarkupLanguage〕與超文本傳輸協(xié)議〔HyperTextTransferProtocol〕為根底，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。Web將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關(guān)信息有機(jī)地編織在一起。在Web效勞方式中，信息以頁面〔或稱Web頁〕的形式存儲在Web效勞器中，這些頁面采用超文本的方式對信息進(jìn)行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些到頁面的鏈接信息由統(tǒng)一資源定位器URL(UniformResourceLocator)維持。用戶通過客戶端應(yīng)用程序〔即瀏覽器〕向Web效勞器發(fā)出請求，效勞端根據(jù)客戶端的請求將保存在效勞器中的某個(gè)頁面返回給客戶端，瀏覽器接收到頁面后對其進(jìn)行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。Web效勞的特點(diǎn)在于高度的集成性，它能夠?qū)崿F(xiàn)不同類型的信息〔如文本、圖像、聲音、動畫和視頻等〕和效勞〔如New、FTP、Telnet、Gopher及Mail等〕的無縫鏈接，特別適合于廣域網(wǎng)中的信息組織、檢索與顯示。二、Web關(guān)鍵技術(shù)在信息技術(shù)領(lǐng)域中Web技術(shù)幾乎聚集了當(dāng)前信息處理的所有技術(shù)手段，以求最大限度地滿足人性化的特點(diǎn)，Web界面五顏六色，既有文字、彩圖、動畫、聲音、視頻和一些相關(guān)信息或目錄摘要，還可根據(jù)需要進(jìn)入你想去的任何地方。只要你愿意或是你能想到的效勞，Web幾乎都能實(shí)現(xiàn)。Web技術(shù)涉及諸多技術(shù)領(lǐng)域：〔一〕網(wǎng)絡(luò)硬件技術(shù)從兩臺或多臺機(jī)器組成的對等網(wǎng)，到主機(jī)控制的以太網(wǎng)，再到活潑生動的因特網(wǎng)，每一處都需要有特定的硬件支持。1968年，當(dāng)“LOGIN〞的“LO〞從美國加州洛杉磯分校的電腦屏幕跳到斯坦福大學(xué)的電腦屏幕上時(shí)，標(biāo)志著人類首次組網(wǎng)成功。組網(wǎng)技術(shù)經(jīng)過幾十年的錘煉，而今已經(jīng)相當(dāng)成熟了。網(wǎng)絡(luò)硬件技術(shù)包括很多方面，其主要的作用就是把網(wǎng)絡(luò)中的各種資源通過相關(guān)網(wǎng)絡(luò)連接設(shè)備連接起來，實(shí)施網(wǎng)絡(luò)通信和到達(dá)共享網(wǎng)絡(luò)資源的目的?！捕砏eb管理技術(shù)網(wǎng)絡(luò)管理技術(shù)是一個(gè)永久的話題。網(wǎng)絡(luò)管理的難點(diǎn)是平安性問題，涉及到防止來自內(nèi)部和外部的攻擊，這對管理員自身的技術(shù)是一個(gè)嚴(yán)峻的考驗(yàn)。一個(gè)合格的網(wǎng)管人員，除了管好網(wǎng)絡(luò)，還得和黑客做技術(shù)上的較量。網(wǎng)絡(luò)管理涉及的方面可謂種類繁多，簡單地說，網(wǎng)絡(luò)管理就是為保證網(wǎng)絡(luò)系統(tǒng)能夠持續(xù)、穩(wěn)定、平安、可靠和高效地運(yùn)行，不受外界干擾，而維持網(wǎng)絡(luò)系統(tǒng)設(shè)施所采取的一系列方式和措施。網(wǎng)絡(luò)管理由網(wǎng)管員通過駕馭網(wǎng)絡(luò)操作系統(tǒng)和網(wǎng)絡(luò)管理軟件來實(shí)現(xiàn)。Web管理那么是在網(wǎng)絡(luò)管理的根底上，針對網(wǎng)絡(luò)建設(shè)和維護(hù)所進(jìn)行的一系列管理。諸如架設(shè)Web效勞器、文件傳輸效勞器、郵件效勞器、域名效勞器、代理效勞器以及用戶管理和計(jì)費(fèi)管理等等。

第二節(jié)開發(fā)工具的介紹一、Dreamweaver8.0———夢幻網(wǎng)頁的編制者Dreamweaver是創(chuàng)立和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)立跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術(shù)允許用戶隨意導(dǎo)入HTML文檔而無需重新設(shè)置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能〔例如具有動態(tài)效果的層和行為〕而不用寫一行代碼。它甚至可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生地錯(cuò)誤。Dreamweaver還是一個(gè)完全自定義的應(yīng)用程序。用戶可以創(chuàng)立自己的對象和命令修改菜單和快捷鍵，設(shè)置編寫JavaScript代碼擴(kuò)展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。常用的Dreamweaver工作區(qū)組件有以下假設(shè)干種：〔一〕文檔窗口可顯示當(dāng)前文檔，文檔的外觀和瀏覽器中看到的非常相似?！捕逞b載器中包含一些翻開和關(guān)閉常用檢查器和模板的按鈕。〔三〕對象工具欄包含創(chuàng)立不同類型的對象〔例如圖像、表格和層等〕的按鈕?！菜摹硨傩詸z查器顯示選定對象的屬性。〔五〕快捷菜單可以使用戶對當(dāng)前選擇或區(qū)域快速執(zhí)行某些命令?！擦晨晒潭ǖ母￠_工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個(gè)或多個(gè)選擇窗口中二、MicromediaFlash8.0———網(wǎng)頁動畫的制作軟件MicromediaFlash8.0用于web站點(diǎn)的交互式的矢量圖形和動畫的制作，它可制作出用于瀏覽時(shí)的導(dǎo)航控制、制作動畫圖標(biāo)、帶同步聲音的大段的動畫，創(chuàng)立出生動的富于表現(xiàn)力的網(wǎng)頁。Flash中的圖形都是矢量的，占據(jù)存儲空間較少，因而下載時(shí)間短，且能很好地適應(yīng)瀏覽者不同尺寸的屏幕。Flash的交互性的大局部設(shè)置就在Action和FsCommand里，通過對Action和FsCommand的設(shè)置，你可以隨意的設(shè)置各事件發(fā)生的效果，還有對變量及函數(shù)的設(shè)置。Flash以流控制技術(shù)和矢量技術(shù)等為核心，制作出的動畫具有短小精悍的特點(diǎn)，被廣泛用于網(wǎng)頁動畫的設(shè)計(jì)，成為當(dāng)今網(wǎng)頁動畫制作最為流行的軟件。Flash具有操作方便、簡單易懂的優(yōu)點(diǎn)。初學(xué)者通過學(xué)習(xí)，可發(fā)揮他無限的想象力。三、AdobePhotoshopCS3———圖像與動畫的制作軟件PhotoshopCS3是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用?！惨弧澄淖痔幚砀臃奖恪捕吃黾拥膱D層集使用層管理更有序?！踩承略鰣D像功能：圖像的剪切和剪裁更加方便?！菜摹硨⑺泄ぞ叩倪x項(xiàng)板改良為工具選項(xiàng)欄放置在工作區(qū)頂部方便先項(xiàng)參數(shù)的設(shè)置。〔五〕為了更方便地用路徑繪畫，改良增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)立路徑、幾何形狀或幾何填充區(qū)，使得矢量功能得到了加強(qiáng)。

第二章個(gè)人網(wǎng)站設(shè)計(jì)分析第一節(jié)相關(guān)術(shù)語一、InternetInternet，中文正式譯名為因特網(wǎng)，又叫做國際互聯(lián)網(wǎng)。它是由那些使用公用語言互相通信的計(jì)算機(jī)連接而成的全球網(wǎng)絡(luò)，是一項(xiàng)正在向縱深開展的技術(shù)，是人類進(jìn)入網(wǎng)絡(luò)文明階段或信息社會的標(biāo)志。對Internet將來的開展給以準(zhǔn)確的描述是十分困難的。但目前的情形使互聯(lián)網(wǎng)早已突破了技術(shù)的范疇，正在成為人類向信息文明邁進(jìn)的紐帶和載體。Internet的全稱是InterNetwork，譯為“因特網(wǎng)〞，也稱國際互聯(lián)網(wǎng)，簡稱互聯(lián)網(wǎng)。它是世界上最大的互聯(lián)網(wǎng)絡(luò)，它本身不是一種具體的物理網(wǎng)絡(luò)，是人們?yōu)榱烁玫乩斫釯nternet，而給它加上了一個(gè)虛擬的概念——網(wǎng)絡(luò)。實(shí)際上，Internet是把世界各地已有的各種網(wǎng)絡(luò)(包括計(jì)算機(jī)網(wǎng)、數(shù)據(jù)通信網(wǎng)以及公用交換網(wǎng)等)互聯(lián)起來，組成一個(gè)跨越國界的龐大互聯(lián)網(wǎng)，因此也稱為“網(wǎng)絡(luò)的網(wǎng)絡(luò)〞(NetworkofNetwork)。(1)TCP/IP協(xié)議是Internet的核心。網(wǎng)絡(luò)互聯(lián)離不開協(xié)議，Internet正是依靠TCP/IP協(xié)議實(shí)現(xiàn)各種網(wǎng)絡(luò)互聯(lián)的；沒有TCP/IP協(xié)議，就沒有如今的Internet。因此，TCP/IP協(xié)議是Internet的根底和核心。(2)Internet實(shí)現(xiàn)了與公用交換網(wǎng)的互聯(lián)。由于Internet實(shí)現(xiàn)了與公用交換網(wǎng)的互聯(lián)，使全世界眾多的個(gè)人用戶可以很方便地入網(wǎng)。用戶只要有一臺PC機(jī)、一條線和一個(gè)Modem(調(diào)制解調(diào)器)，就可以連入Internet。這是Internet迅速普及的重要原因之一。我們認(rèn)為在新世紀(jì)，全球化、信息化、網(wǎng)絡(luò)化是世界經(jīng)濟(jì)和社會開展的必然趨勢，Internet的迅猛開展正是順應(yīng)了這個(gè)趨勢。它實(shí)現(xiàn)了在任何地點(diǎn)、任何時(shí)間進(jìn)行全球個(gè)人通信，使社會的運(yùn)作方式、人類的學(xué)習(xí)、生活工作方式發(fā)生了巨大的變化。二、HTMLHTML〔HyperTextMark-upLanguage〕即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。它主要是在原來文本文件的根底上，加一系列的標(biāo)識符號描述其格式，形成網(wǎng)絡(luò)文件。當(dāng)用戶使用瀏覽器下載文件時(shí)，就把這些標(biāo)識解釋成它應(yīng)有的含義，按照一定的格式，將這些被標(biāo)識的文件，顯示在屏幕上。而HTML的標(biāo)識符號并不顯示在屏幕上。利用標(biāo)識語言，可以將INTERNET上連接的不同地區(qū)的效勞器上的信息文件連接起來；有的標(biāo)識是去連接另一個(gè)文件，有的是形成表格，有的是接受用戶信息等等。有了這些標(biāo)識，用戶在瀏覽器中看到的不再是呆板的純文本，而是五彩繽紛的畫面。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部〔Head〕、主體〔Body〕兩大局部，其中頭部描述瀏覽器所需的信息，而主體那么包含所要說明的具體內(nèi)容。此外，還可以與數(shù)據(jù)庫中的數(shù)據(jù)連接，滿足讀者的查詢要求以及與用戶交互的功能等等。三、站點(diǎn) 所謂站點(diǎn)，就是將網(wǎng)頁文件和素材文件，有條理地放置站點(diǎn)文件夾里，這些文件與文件夾就構(gòu)成了網(wǎng)站的實(shí)質(zhì)內(nèi)容。站點(diǎn)文件夾里除了網(wǎng)頁文件還有素材文件，所謂素材文件就是網(wǎng)頁中所用到的圖像、聲音、視頻等，這些內(nèi)容是以單獨(dú)文件的形式存在。四、超鏈接超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁的一局部，它是一種允許我們同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來翻開或運(yùn)行。人們通過超鏈接可以很方便很迅速地訪問分布于全球計(jì)算機(jī)上的海量資源，實(shí)現(xiàn)在互聯(lián)網(wǎng)中的漫游。五、URLURL〔UniformResourceLocator的縮寫〕，統(tǒng)一資源定位器，用來指明主機(jī)或文件在Internet上的位置。互聯(lián)網(wǎng)中某種信息資源以某種方式存儲在網(wǎng)絡(luò)中的某處，必須用一個(gè)惟一的URL來進(jìn)行標(biāo)識，這樣才能方便查找。對于Web來說，可以簡單并通俗把URL理解為網(wǎng)址。每個(gè)Web網(wǎng)頁都有自己的網(wǎng)址，在瀏覽器地址欄里輸入網(wǎng)頁的URL，就可以訪問這個(gè)網(wǎng)頁。例如，://yahoo./index.html，其意思就是采用超文本傳輸協(xié)議訪問雅虎網(wǎng)的首頁，由于網(wǎng)頁均是通過超文本傳輸協(xié)議進(jìn)行訪問，默認(rèn)下，“：//〞可以省略不輸。URL能以惟一且一致的方式定義每個(gè)資源在Internet上的位置，一個(gè)URL就是一個(gè)資源在Internet上的具體位置。六、IP地址從網(wǎng)絡(luò)互聯(lián)的角度來看，Internet的目標(biāo)是將不同的網(wǎng)絡(luò)互聯(lián)起來，實(shí)現(xiàn)廣泛的資源共享。網(wǎng)絡(luò)互聯(lián)的第一步是物理連接，由于信息傳輸?shù)钠瘘c(diǎn)和終點(diǎn)都是對象(即各類計(jì)算機(jī))，因此在物理連接中，首先必須解決對象的識別問題。在網(wǎng)絡(luò)中，一般可以依靠地址識別對象，所以，Internet在統(tǒng)一全網(wǎng)的過程中，首先要解決地址的統(tǒng)一問題。為了使連入Internet的眾多計(jì)算機(jī)主機(jī)在通信時(shí)能夠相互識別，Internet中的每一臺主機(jī)都分配有一個(gè)惟一的標(biāo)識--32位二進(jìn)制地址，該地址稱為IP(InternetProtocol)地址，也稱作網(wǎng)際地址。使互聯(lián)網(wǎng)上的電腦主機(jī)在通信時(shí)能夠相互識別，每臺主機(jī)都分配一個(gè)能表示其位置的IP〔InternetProtocol〕地址，這如同公用網(wǎng)中的號碼一樣。IP地址是由專門的互聯(lián)網(wǎng)機(jī)構(gòu)來分配。IP地址具有惟一性，是由32位二進(jìn)制數(shù)組成，分為四組，每組8位，每組之間用小數(shù)點(diǎn)分隔，在實(shí)際之中常轉(zhuǎn)換成十進(jìn)制數(shù)表示。由于Internet實(shí)際上是由假設(shè)干個(gè)網(wǎng)絡(luò)所組成的一個(gè)網(wǎng)際網(wǎng)，因此，IP地址又可認(rèn)為是由網(wǎng)絡(luò)號和主機(jī)號(連接在Internet上，并有獨(dú)立IP地址的計(jì)算機(jī)稱為主機(jī))組成的，網(wǎng)絡(luò)號說明主機(jī)所連接的網(wǎng)絡(luò)，主機(jī)號標(biāo)識該網(wǎng)絡(luò)上特定的某臺主機(jī)。七、CSSCSS〔CascadingStyleSheets〕，即層疊樣式表的縮寫。它能夠?qū)W(wǎng)頁的字體、背景、顏色和特殊效果以更精確的控制，便于您更輕松地設(shè)計(jì)頁面的布局。它具有對瀏覽器良好的兼容性、能夠替代一些之前只有圖像才能實(shí)現(xiàn)的效果。修改CSS代碼，可以迅速更新同一頁面的不同區(qū)域，甚至應(yīng)用該CSS的眾多網(wǎng)頁外觀和格式。第二節(jié)個(gè)人網(wǎng)站的由來和開展互聯(lián)網(wǎng)在中國的出現(xiàn)只有十幾年時(shí)間，1986年，中科院一些科研單位通過長途撥號到一些歐洲國家，進(jìn)行國際聯(lián)機(jī)數(shù)據(jù)庫檢索，這可以說是我國使用Internet的開始。1990年，中科院高能所、北京計(jì)算機(jī)應(yīng)用研究所、原電子部華北計(jì)算所、石家莊54所等單位，先后將自己的計(jì)算機(jī)與CNPAC(X.25)相連接，利用歐洲國家的計(jì)算機(jī)作為網(wǎng)關(guān)，在X.25網(wǎng)與Internet之間進(jìn)行轉(zhuǎn)接，實(shí)現(xiàn)了中國CNPAC科技用戶與Internet用戶之間的E-mail通信等。1993年3月，中科院高能所為了支持國外科學(xué)家使用北京正負(fù)電子對撞機(jī)做高能物理實(shí)驗(yàn)，開通了一條64kb/s國際數(shù)據(jù)信道，使高能所與美國斯坦福線性加速器中心連接起來。1994年4月，中科院計(jì)算機(jī)網(wǎng)絡(luò)信息中心用64kb/s國際線路連到美國，開通路由器，正式接入Internet網(wǎng)，成為Internet的第71個(gè)成員單位。該網(wǎng)絡(luò)信息中心于1990年開始，主持一項(xiàng)世界銀行貸款和國家科委共同投資工程——中國國家計(jì)算與網(wǎng)絡(luò)設(shè)施，在北京中關(guān)村地區(qū)建設(shè)了一個(gè)超級計(jì)算中心；為了便于各單位使用超級計(jì)算機(jī)，將中關(guān)村地區(qū)的30多個(gè)研究所以及北大、清華兩所高校，全部用光纜連在一起。這時(shí)期，個(gè)人網(wǎng)站出現(xiàn)的條件還很不成熟，國內(nèi)上網(wǎng)的人數(shù)很少，也缺乏支持個(gè)人建站的環(huán)境，用戶很難找到理想的個(gè)人主頁存放地。個(gè)人網(wǎng)站開展的第二階段是從1997年初到1998年，這段期間，中國網(wǎng)民數(shù)量飛速增長，個(gè)人網(wǎng)站日漸繁榮，個(gè)人主頁的數(shù)量急劇增加。同時(shí)，越來越多的商業(yè)網(wǎng)站開始免費(fèi)提供個(gè)人主頁空間，這些良好的外部極大地促進(jìn)了個(gè)人網(wǎng)站的開展，涌現(xiàn)了一批很著名的個(gè)人網(wǎng)頁，從1998年下半年開始，隨著互聯(lián)網(wǎng)應(yīng)用的深入的普及，隨著眾多主頁制作工具的出現(xiàn)，使得建站成為一件非常容易的事，創(chuàng)立一個(gè)能充分表達(dá)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。第三節(jié)個(gè)人網(wǎng)站的設(shè)計(jì)和規(guī)劃一、明確架設(shè)網(wǎng)站的目的及客戶要求通常情況下，架設(shè)個(gè)人網(wǎng)站主要是為了通過互聯(lián)網(wǎng)表達(dá)個(gè)人在商業(yè)、科技、交際、生活等方面的信息需求或者進(jìn)行信息的交流，具有較強(qiáng)的目的性，個(gè)人網(wǎng)站一般表達(dá)在：為了展現(xiàn)自己的風(fēng)采，讓大家一起分享個(gè)人的心得和經(jīng)驗(yàn)，使其有共同愛好的朋友有一個(gè)可以傾訴的地方。二、個(gè)人網(wǎng)站概貌因?yàn)槭莻€(gè)人網(wǎng)站，所以只是選擇了自己擅長和喜愛的內(nèi)容，在突出自己的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站技術(shù)設(shè)計(jì)，并盡可能地從訪問者角度來編排欄目以方便訪問者的瀏覽，而輔助內(nèi)容，如站點(diǎn)簡介、版權(quán)信息、個(gè)人信息等也未放在主欄目里，以免沖淡主題。三、功能劃分在網(wǎng)站設(shè)計(jì)中確定首頁的功能模塊瀏覽者可以在首頁瀏覽自己喜歡的內(nèi)容，并且可以通過郵件的形式和大家交流，站內(nèi)所有的頁面設(shè)計(jì)、構(gòu)思，包括圖片的處理都是借助各種軟件獨(dú)立完成，并且很多的文章都是自己的精心收藏，與大家一起分享。四、功能描述個(gè)人網(wǎng)站設(shè)計(jì)的主頁如下列圖所示：〔一〕日志——銘記在其中展示自己喜愛的東西、包括日志、精品文章和一些雜七雜八的文章。奇文共欣賞，疑義相與析。利用拋磚引玉的作用，讓瀏覽者可以從中認(rèn)識和了解自己，使大家共同欣賞美好的事物?！捕匙阚E——游走時(shí)光利用編輯CSS各種樣式，使圖片和文字相得益彰，充分表達(dá)文章所要表達(dá)的風(fēng)采，個(gè)別文章用錨標(biāo)記的方法，方便瀏覽者更好地閱讀文章。〔三〕相冊——亙古思念主版面用flash的元素功能，提升網(wǎng)頁的整體效果，進(jìn)入次版面采取幻燈形式以大學(xué)同學(xué)和生活作為相冊展示?！菜摹硨懶拧窒砟阄业墓适乱粋€(gè)靜態(tài)網(wǎng)頁始終給人一種呆板的感覺，缺少一種活力和生氣。最好在網(wǎng)站上提供一些答復(fù)下列問題的工具以及其他具有交互性能的設(shè)計(jì)，使得訪問者能從網(wǎng)站上獲得交互的信息，從而使訪問者有一種參與網(wǎng)絡(luò)建設(shè)的新鮮感和成就感，像是網(wǎng)頁中的E-mail鏈接來以此分享各自的心情，利用郵件方式，彼此可以暢所欲言，就感興趣的話題展開討論，和瀏覽者進(jìn)行溝通。〔五〕音樂每一個(gè)版面都利用FLASH插件來設(shè)置個(gè)人喜歡的音樂〔六〕頁面設(shè)計(jì)在明確了個(gè)人網(wǎng)站的風(fēng)格和定位后，就是網(wǎng)站的材料組織以及網(wǎng)站頁面設(shè)計(jì)和代碼處理。建立一個(gè)網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰。如果網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊，結(jié)果不是讓瀏覽者看得糊涂，自己擴(kuò)充和維護(hù)網(wǎng)站相當(dāng)困難。網(wǎng)站的題材確定后，并且收集和組織了許多相關(guān)的資料內(nèi)容，但如何組織內(nèi)容才能吸引更多的瀏覽者來瀏覽網(wǎng)站呢？欄目的實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主題明確顯示出來。因此將自己的網(wǎng)站分為個(gè)五欄目，分別是日志、足跡、相冊、隨意的涂鴉設(shè)計(jì)以及寫信留言。

第三章個(gè)人網(wǎng)站的具體設(shè)計(jì)過程第一節(jié)創(chuàng)立站點(diǎn)1.在Dreamweaver中，執(zhí)行【站點(diǎn)】|【新建站點(diǎn)】命令。在彈出的【HTML的站點(diǎn)定義為】對話框中，輸入站點(diǎn)名稱；2.選擇【否，我不想使用效勞器技術(shù)】單項(xiàng)選擇按鈕；3.選擇【在本地進(jìn)行編輯和測試〔我的測試效勞器是這臺計(jì)算機(jī)〕】單項(xiàng)選擇按鈕，并在【您將把文件存儲在計(jì)算機(jī)上的什么位置】文本框中修改當(dāng)前需要存放文件的目錄；4.修改站點(diǎn)的根目錄。第二節(jié)列出表格、框架、層1.表格在網(wǎng)上做表格，簡稱“網(wǎng)表〞或“在線表格〞，是一個(gè)網(wǎng)頁中用來進(jìn)行網(wǎng)頁布局的，在它的單元格中可以放置具體的內(nèi)容，網(wǎng)頁導(dǎo)出的表格形式為.csv格式，其中<tr>為行，<td>為單元格表格一行的代碼表示形式：<body><table><tr><td>輸入內(nèi)容<td><td>輸入內(nèi)容<td>注：代碼增加單元行時(shí)，復(fù)制即可……</tr></table>利用在代碼<tr>中回車可以更換顏色，選擇“bgcolor〞,對齊選擇“align〞，合并單元格為“colspan〞、單元行為“rowspan〞等，而設(shè)置標(biāo)題時(shí)<tr>→<th>。與此同時(shí)，右側(cè)的標(biāo)簽設(shè)置具有frame和rules屬性的值也可以調(diào)整表格,其中〔1〕Frame屬性Above顯示上邊框Below顯示下邊框Border,box顯示上下左右邊框LHS,RHS顯示左邊框/顯示右邊框Hside,Vside顯示上下邊框/顯示左右邊框Void不顯示〔2〕Rules屬性All顯示所有內(nèi)部邊框Cols僅顯示行邊框Groups介于行列間邊框None不顯示內(nèi)部邊框Rows僅顯示列邊框2.框架在制作一個(gè)網(wǎng)站的所有頁面時(shí)，并不是每個(gè)頁面的所有內(nèi)容都需要改變，比方個(gè)人的LOGO、導(dǎo)航條和版權(quán)信息等局部在每個(gè)網(wǎng)頁中都是一樣，所以將這些不變的內(nèi)容放在框架內(nèi)作為單獨(dú)的文檔，需要改變的內(nèi)容放在另外的框架中。要?jiǎng)?chuàng)立預(yù)定義框架集并在某一框架中顯示當(dāng)前網(wǎng)頁，其具體操作如下：將插入點(diǎn)定位到要插入框架集的網(wǎng)頁中。選擇[插入]——[HTML]——[框架]菜單命令，在彈出的子菜單中選擇預(yù)定義的框架集或在插入欄的“布局〞選項(xiàng)卡單擊框架按鈕中的向下按鈕，然后選擇預(yù)定義的框架集。完成以上操作后即可插入預(yù)定義的框架集。3.層繪制層，用顯示網(wǎng)格方式，跟隨層可以到達(dá)精確定位的效果，在其中可插入的圖像，并且圖像用快捷鍵的方式可以隨時(shí)增大或縮小，直至自己滿意為止，其中在層的屬性中，右尺寸=左尺寸+寬尺寸，下尺寸=上尺寸+高尺寸第三節(jié)網(wǎng)頁文字、圖像及多媒體元素的添加1.網(wǎng)頁文字的添加在表格內(nèi)輸入文字，由于設(shè)置問題，表格會自動地向右擴(kuò)展，這時(shí)需設(shè)置表格自動增大，并將其屬性改變，對于文字中的段落和不同的標(biāo)題，可以通過頁面屬性進(jìn)行修改來符合自己設(shè)計(jì)版面的要求。2.網(wǎng)頁圖像的添加要想使圖片到達(dá)最正確效果，并不是一件容易的事，很多人往往喜歡在網(wǎng)頁上添加很多的圖像，造成網(wǎng)頁頁面雜亂，主題不突出。其實(shí)網(wǎng)頁中的圖像不是越多越好。網(wǎng)頁中使用的圖片不要太大，一般情況最好單張不要超過25-30K，每頁圖片總量不要超過60K這樣站用的磁盤空間較少，網(wǎng)上傳輸時(shí)間較短。圖像也可在表格中做背景，固定表格的大小，然后在背景上寫文字，增添頁面的美觀3.多媒體元素的添加〔1〕設(shè)置滾動文字使用marquee標(biāo)記可以將文字設(shè)置為動態(tài)滾動的效果，語法：<marquee>滾動文字</marquee>；文字滾動方向——direction〔默認(rèn)從右向左left〕；文字的滾動方式——behavior，語法：<marqueebehavior="滾動方式">滾動文字</marquee>，滾動方式取值3個(gè)：scroll循環(huán)滾動，默認(rèn)效果；slide只滾動一次就停止；alternate來回交替進(jìn)行滾動。比方，進(jìn)入主頁“記憶城池〞的設(shè)置?！?〕添加背景音樂使用常用中Flash中的插件、shockwave插入背景音樂，文件類型為.swf、.avi等，并可調(diào)節(jié)播放音樂文件的寬、高。〔3〕添加flash視頻插入文件格式為.flv、.rm等，限制高寬比，涉及了播放器的外觀以此配合網(wǎng)頁的內(nèi)容，像是亙古思念里的?再見?的插入?！?〕添加flash的按鈕以及文字按鈕：增添的按鈕有耳目一新的感覺，并可以鏈接到與按鈕上輸入文字相一的網(wǎng)頁上。文字：flash文字，可以變幻文字的顏色，并參加相關(guān)的鏈接?！?〕關(guān)于Flash元素可以用來對圖片進(jìn)行編輯，制作成為網(wǎng)頁上的相冊，在Dreamweaver右側(cè)有其編輯器，其中imageURLs為插入圖片，captioncolor為圖片標(biāo)題，link為鏈接到某些網(wǎng)站，imagelinktarket為目標(biāo)等。在屬于我們純真年代中，相冊的制作是一個(gè)很好的示范。第四節(jié)關(guān)于錨鏈接和CSS樣式一、錨鏈接錨鏈接實(shí)際上就是鏈接文本，又叫錨文本。在游走時(shí)光中，青島一網(wǎng)頁的三個(gè)內(nèi)容采用了錨鏈接的手法，增加的錨鏈接都和頁面本身的內(nèi)容有一定的必然聯(lián)系，它能精確的描述所指向頁面的內(nèi)容。二、CSS樣式CSS就是一種叫做樣式表〔stylesheet〕的技術(shù)。也有的人稱之為層疊樣式表〔CascadingStylesheet〕。在主頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，游走時(shí)光中三個(gè)版面的設(shè)計(jì)都有采用CSS樣式，只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同局部，或者頁數(shù)不同的網(wǎng)頁的外觀和格式它的作用可以到達(dá)：〔1〕在幾乎所有的瀏覽器上都可以使用。〔2〕以前一些非得通過圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁面。〔3〕使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。〔4〕可以輕松地控制頁面的布局。〔5〕可以將許多網(wǎng)頁的風(fēng)格格式同時(shí)更新，不用再一頁一頁地更新了。可以將站點(diǎn)上所有的網(wǎng)頁風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁面都會隨之發(fā)生變動。式樣單放在頁面中，通過瀏覽器的解釋執(zhí)行，是完全的文本，非常的容易掌握，針對一些非常老的瀏覽器，頁不會產(chǎn)生頁面混亂的現(xiàn)象。

第四章網(wǎng)站設(shè)計(jì)的心得第一節(jié)關(guān)于網(wǎng)頁的質(zhì)量〔1〕明確網(wǎng)站的主題和規(guī)劃確定網(wǎng)站的主題，也就是確定所開發(fā)網(wǎng)站的類型，如教育類網(wǎng)站、房地產(chǎn)類網(wǎng)站、服飾類網(wǎng)站等。不同的網(wǎng)站確定的主題都有一定的歸屬，從而確定主題與設(shè)計(jì)風(fēng)格。名稱要切題，題材要專而精，并且要兼顧商家和客戶的利益.網(wǎng)站規(guī)劃是指在網(wǎng)站建設(shè)前對市場進(jìn)行分析、確定網(wǎng)站的目的和功能，并根據(jù)需要對網(wǎng)站建設(shè)中的技術(shù)、內(nèi)容、費(fèi)用、測試、維護(hù)等做出規(guī)劃。網(wǎng)站規(guī)劃對網(wǎng)站建設(shè)起到方案和指導(dǎo)的作用，對網(wǎng)站的內(nèi)容和維護(hù)起到定位的作用。網(wǎng)站規(guī)劃書應(yīng)該盡可能涵蓋網(wǎng)站規(guī)劃中的各個(gè)方面，網(wǎng)站規(guī)劃書的寫作要科學(xué)、認(rèn)真、實(shí)事求是。在設(shè)計(jì)之前，需先畫出網(wǎng)站結(jié)構(gòu)圖，其中包括網(wǎng)站欄目、結(jié)構(gòu)層次、連接內(nèi)容〔2〕網(wǎng)頁設(shè)計(jì)總體方案主題鮮明在目標(biāo)明確的根底上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web站點(diǎn)應(yīng)針對所效勞對象〔機(jī)構(gòu)或人〕的不同而具有不同的形式。有些站點(diǎn)只提供簡潔文本信息；有些那么采用多媒體表現(xiàn)手法，提供華美的圖像、閃爍的燈光、復(fù)雜的頁面布置，甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來?！?〕網(wǎng)站的版式設(shè)計(jì)網(wǎng)頁設(shè)計(jì)作為一種視覺語言，特別講究編排和布局，雖然主頁的設(shè)計(jì)不等同于平面設(shè)計(jì)，但它們有許多相近之處。版式設(shè)計(jì)通過文字圖形的空間組合，表達(dá)出和諧與美。多頁面站點(diǎn)頁面的編排設(shè)計(jì)要求把頁面之間的有機(jī)聯(lián)系反映出來，特別要處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。為了到達(dá)最正確的視覺表現(xiàn)效果，將反復(fù)推敲整體布局的合理性，使瀏覽者有一個(gè)流暢的視覺體驗(yàn)?！?〕網(wǎng)頁結(jié)構(gòu)的清晰性使用一些醒目的標(biāo)題或文字來突出網(wǎng)站的特點(diǎn)。如果瀏覽者從您的網(wǎng)站上不清楚您在介紹什么，他們是不會喜歡您的網(wǎng)站的，這就是網(wǎng)頁設(shè)計(jì)的失敗?！?〕導(dǎo)向清晰。設(shè)置前進(jìn)或后退，而不會在其使用瀏覽器時(shí)造成不必要的麻煩，可以回退到前頁或是前進(jìn)到后一頁。第二節(jié)網(wǎng)頁中的色彩搭配〔1〕白紙黑字是永遠(yuǎn)的主題，誰都說不出不好來。(2〕網(wǎng)頁最常用流行色·蘭色——藍(lán)天白云，沉靜整潔的顏色?！ぞG色——綠白相間，雅致而有生氣。·橙色——活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。·暗紅——寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激(3〕用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。(4)用兩種色彩。先選定一種色彩，然后選擇它的比照色。(5)用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。在網(wǎng)頁配色中，切記一些誤區(qū)：(1)不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。(2)背景和前文的比照盡量要大(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。第三節(jié)圖像、著名插件、導(dǎo)航按鈕的使用一、圖像的使用用戶在網(wǎng)上四處漫游，必須設(shè)法吸引和維護(hù)他們對你的主頁的注意力。萬維網(wǎng)的其中一個(gè)最重大資源是其多媒體能力，所以我們無論如何要善加利用。主頁上最好有醒目的圖像、新穎的畫面、美觀的字款，使其別具特色，令人過目不忘。圖像的內(nèi)容應(yīng)有一定的實(shí)際作用，切忌虛飾浮夸。注意圖畫可以彌補(bǔ)文字之缺乏，網(wǎng)頁設(shè)計(jì)中導(dǎo)航使用超文本鏈接或圖片鏈接，使人們能夠在您的網(wǎng)站上自由前進(jìn)或但并不能夠完全取代文字。很多用戶把瀏覽軟件設(shè)定為略去圖像，以求節(jié)省時(shí)間他們只看文字。因此，制作主頁時(shí)，必須注意將圖像所連接的重要信息或聯(lián)接其他頁面的指示用文字重復(fù)表達(dá)幾次，同時(shí)要注意防止使用過大的圖像，如果不得不放置大的圖像在網(wǎng)站上，就最好使用Thumbnails軟件，把圖像的縮小版本的預(yù)覽效果顯示出來，這樣用戶就不必浪費(fèi)金錢和時(shí)間去下載他們根本不想看的大圖像。二、著名插件的使用如果網(wǎng)站上有聲音或視頻，要保證使用者通過使用某個(gè)知名的插件，能夠聽到或看到。如果訪問者沒有所要求的插件，將不得不到其它站點(diǎn)去下載，這樣訪問者有可能就不會返回了。許多站點(diǎn)使用QuickTime、RealPlay和Shockwave插件。因?yàn)椋S多訪問者并不愿意浪費(fèi)很多時(shí)間和金錢去下載可能僅使用一次的插件。三、導(dǎo)航按鈕的使用應(yīng)當(dāng)防止強(qiáng)迫用戶使用工具欄中的向前和向后按鈕。你的設(shè)計(jì)應(yīng)當(dāng)使用戶能夠很快地找到他們所要的東西。絕大多數(shù)好的站點(diǎn)在每一頁同樣的位置上都有相同的導(dǎo)航條，使瀏覽者能夠從每一頁上訪問網(wǎng)站的任何局部。

第五章局部源代碼一、每個(gè)頁面的代碼中都設(shè)有解除網(wǎng)頁阻止flash播放的代碼其設(shè)置為在<head></head>中間插入：<!—savedfromurl=(0013)about:internet-->二、主頁導(dǎo)航條代碼<td><divalign="center"><ahref="銘記.html"><imgsrc="images/a.gif"width="111"height="37"border="0"/></a></div></td><td><divalign="center"><ahref="游走時(shí)光.html"><imgsrc="images/88logo1028.gif"width="120"height="36"border="0"/></a></div></td><td><divalign="center"><ahref="亙古思念.html"><imgsrc="images/76.gif"width="121"height="36"border="0"/></a></div></td><td><divalign="center"><ahref="發(fā)現(xiàn)&靈感.html"><imgsrc="images/765.gif"width="117"height="36"border="0"lowsrc="發(fā)現(xiàn)&靈感.html"/></a></div></td>三、主頁滾動字條代碼<meta-equiv="Content-Type"content="text/html;charset=gb2312"/>四、按鈕設(shè)置代碼銘記中“被點(diǎn)名了〞的按鈕代碼：<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="://download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"width="100"height="23"><paramname="BGCOLOR"value="#C3CB82"/><paramname="movie"value="button3.swf"/><paramname="quality"value="high"/><embedsrc="button3.swf"width="100"height="23"quality="high"pluginspage="://macromedia/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash"bgcolor="#C3CB82"</embed></object>五、青島頁面的圖片地圖以及css樣式的類和標(biāo)簽處理的代碼<ahref="花石樓.html"><imgsrc="images/jjl.jpg"name="花石樓"width="758"height="568"border="0"usemap="#花石樓Map"class="image2"id="花石樓"/><mapname="花石樓Map"id="花石樓Map"><areashape="rect"coords="6,3,195,196"href="花石樓.html"/></map></