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

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

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

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

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

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

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

第五章局部源代碼一、每個頁面的代碼中都設有解除網(wǎng)頁阻止flash播放的代碼其設置為在<head></head>中間插入：<!—savedfromurl=(0013)about:internet-->二、主頁導航條代碼<td><divalign="center"><ahref="銘記.html"><imgsrc="images/a.gif"width="111"height="37"border="0"/></a></div></td><td><divalign="center"><ahref="游走時光.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"/>四、按鈕設置代碼銘記中“被點名了〞的按鈕代碼：<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樣式的類和標簽處理的代碼<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></