個(gè)人網(wǎng)頁(yè)制作畢業(yè)論文.doc

個(gè)人網(wǎng)頁(yè)設(shè)計(jì)畢業(yè)論文山西工程職業(yè)技術(shù)學(xué)院個(gè)人網(wǎng)頁(yè)制作畢業(yè)論文 系別：計(jì)算機(jī)工程系 班級(jí)：網(wǎng)11班 姓名：xxx 學(xué)號(hào)：xxx指導(dǎo)老師：xxx 2013.5.22 目錄摘要：.3關(guān)鍵字：.4第1章 緒言: .4第1章 1.1 網(wǎng)頁(yè)簡(jiǎn)介 .4第1章 1.2 網(wǎng)頁(yè)設(shè)計(jì) .5第一章 1.3 網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)狀 .7第2章 文獻(xiàn)綜述 .8第2章 2.1 課題研究現(xiàn)狀分析 .8第2章 2.2 個(gè)人網(wǎng)站的研究工作 .9第2章 2.3 已經(jīng)取得的研究成果 .9第2章 2.4選題的目的及意義 .9第二章 2.5 課題研究的主要內(nèi)容 .10第三章 網(wǎng)站設(shè)計(jì)分析: .10第三章 3.1網(wǎng)站設(shè)計(jì)概述: .10第三章 3.2 開(kāi)發(fā)工具的選用及介紹: .11第三章 3.2.1 Dreamweaver8.0: .11第三章 3.2.2 Photoshop CS: .12第三章 3.2.3 網(wǎng)頁(yè)基本html代碼 .13第三章 3.2.4 明靜態(tài)網(wǎng)頁(yè)html以及div+css(舉例說(shuō)) .14第三章 3.3 關(guān)系型數(shù)據(jù)庫(kù)的選擇:.16第三章 3.3.1 Microsoft Office Access簡(jiǎn)介: .16第四章 網(wǎng)站地圖.17第四章 4.1為何要建立網(wǎng)站地圖 .17第四章 4.2 我的網(wǎng)站地圖 .18第五章 網(wǎng)站概述 .18第五章 5.1 網(wǎng)站定位: .18第五章 5.2 系統(tǒng)構(gòu)思: .18第五章 5.3 網(wǎng)站欄目簡(jiǎn)介: .19第六章 詳細(xì)設(shè)計(jì): .20第六章 6.1 網(wǎng)站制作過(guò)程: .20第六章 6.1.1 logo的制作過(guò)程: .20第六章 6.1.2 banner的制作過(guò)程: .20第六章 6.1.3 主頁(yè)制作過(guò)程: .20第六章 6.1.4 留言板的設(shè)計(jì):.21第六章 6.2 數(shù)據(jù)庫(kù)的設(shè)計(jì): .21第六章 6.3 系統(tǒng)實(shí)現(xiàn)代碼 :.21第六章 6.3.1 滾動(dòng)文字特效: .21第六章 6.3.2 圖片切換 : .22第六章 6.3.3 個(gè)人簡(jiǎn)介設(shè)計(jì): .23第六章 6.3.4 英語(yǔ)flash動(dòng)畫代碼: .24第六章 6.3.5 建立布局 .25第六章 6.3.6 網(wǎng)頁(yè)中相關(guān)插入.26第六章 6.3.7 設(shè)置導(dǎo)航條 .27第六章 6.3.8 設(shè)置交換圖像 .28第六章 6.3.9 文字背景圖像設(shè)置 .28第六章 6.3.10 制作彈出信息效果 .28第六章 6.3.11 設(shè)置滾動(dòng)圖片和文字 .29第六章 6.3.12 表單的制作 .29第六章 6.3.13 鏈接 .30第六章 6.3.14 制作flash圖像查看器 .31第7章 結(jié)束語(yǔ): .31第8章 心得體會(huì) .32第九章 參考文獻(xiàn): .33第十章 致謝: .34 摘要：隨著經(jīng)濟(jì)社會(huì)的發(fā)展，計(jì)算機(jī)已被應(yīng)用到社會(huì)生活的各個(gè)領(lǐng)域。與此同時(shí)，互聯(lián)網(wǎng)作為信息技術(shù)的通信橋梁連接著全球的計(jì)算機(jī)，而網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在Internet上表現(xiàn)出其及其重要的地位，并發(fā)揮著其及其重要的作用。無(wú)論是在國(guó)內(nèi)還是國(guó)外都得以迅速的發(fā)展和壯大，并被人們重視和關(guān)注?；ヂ?lián)網(wǎng)已經(jīng)徹底的改變了世界，互聯(lián)網(wǎng)的世界里蘊(yùn)藏著無(wú)限的可能，在這種情況下，各行各業(yè)及其個(gè)人、單位、工廠、企事業(yè)等等在網(wǎng)上構(gòu)筑屬于自己的網(wǎng)絡(luò)信息平臺(tái)，保護(hù)自己的網(wǎng)絡(luò)資源并在互聯(lián)網(wǎng)上開(kāi)辟自己的市場(chǎng)和消費(fèi)群體，以及構(gòu)造自己的數(shù)字化世界和加強(qiáng)全球范圍內(nèi)不同地域的人們聯(lián)系交流等等活動(dòng)也就顯的日益重要。于是各種各樣的網(wǎng)站便如雨后春筍般地出現(xiàn)魚(yú)龍混雜且良莠不齊。Internet的日益興起和以網(wǎng)頁(yè)為載體的網(wǎng)絡(luò)信息的廣泛傳播和應(yīng)用，使得網(wǎng)站的建設(shè)及網(wǎng)頁(yè)制作得到發(fā)展的空間，大至大型企業(yè)的產(chǎn)品推銷、售后服務(wù)、解決方案，小至個(gè)人Web頁(yè)面開(kāi)發(fā)，形形色色，五彩繽紛，網(wǎng)站建設(shè)和網(wǎng)頁(yè)制作也成為計(jì)算機(jī)網(wǎng)絡(luò)領(lǐng)域最熱門的話題。 本文就網(wǎng)站的主題內(nèi)容及網(wǎng)站的制作與設(shè)計(jì)這兩方面進(jìn)行描述與分析。 本網(wǎng)站的主題是個(gè)人快樂(lè)吧，整個(gè)網(wǎng)站是以我個(gè)人生活圈為主題，就像人們常用的QQ空間或微博，主要包括了首頁(yè)、新聞收藏、我的學(xué)習(xí)、我的旅游、收藏夾、英語(yǔ)天地、留言薄等欄目。在整個(gè)設(shè)計(jì)過(guò)程中主要是運(yùn)用Dreamweaver、ACCESS、photoshop等編寫的。通過(guò)本網(wǎng)站系統(tǒng)，可以清楚的讓人們了解自己的生活圈，互相了解，方便交流。 如今，在網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展下，互聯(lián)網(wǎng)的不斷普及，讓人們都感受到網(wǎng)絡(luò)的方便快捷，從而大家都喜歡選擇從互聯(lián)網(wǎng)上獲取信息，因此，互聯(lián)網(wǎng)逐漸成為一個(gè)寬廣的信息發(fā)布平臺(tái)和獲取信息的平臺(tái)。本網(wǎng)站也需要通過(guò)Internet來(lái)對(duì)外宣傳、普及，從而讓世界的人們知道了你的獨(dú)一無(wú)二。 本網(wǎng)站主要是以建立Dreamweaver、ACCESS、photoshop等技術(shù)的靜態(tài)網(wǎng)站管理系統(tǒng)的前臺(tái)表現(xiàn)模塊，使用了Dreamweaver技術(shù)的靜態(tài)網(wǎng)頁(yè)技術(shù)，加上ACCESS作為后臺(tái)數(shù)據(jù)庫(kù)，制作了一個(gè)簡(jiǎn)單的個(gè)人生活交流圈網(wǎng)頁(yè)，實(shí)現(xiàn)了生活的方便交流，例如可以在自己的小網(wǎng)站里直接查看自己喜歡的新聞啊，學(xué)習(xí)啊，還有旅游等等，也可以讓朋友們了解自己的圈圈。 關(guān)鍵字：個(gè)人網(wǎng)站 photoshop Dreamweaver 自己的小天地 快樂(lè)吧第一章 緒言： 二十世紀(jì)進(jìn)入信息發(fā)展高速路，數(shù)碼化革命給所有領(lǐng)域帶來(lái)新的改變。隨著電腦辦公自動(dòng)化的普及，電子商務(wù)應(yīng)運(yùn)而生，一切都?xì)w功于internet的巨大貢獻(xiàn)，互聯(lián)網(wǎng)的世界里蘊(yùn)藏?zé)o限生機(jī)，這里只有想不到的、沒(méi)有做不到的。由于國(guó)際互聯(lián)網(wǎng)是一個(gè)不受時(shí)空限制的信息交換系統(tǒng)，所以它是目前最直接、最豐富和最快捷的聯(lián)系方式，信息溝通的高效率為企業(yè)帶來(lái)了最大的方便。個(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)站。同時(shí)隨著互聯(lián)網(wǎng)的快速發(fā)展和不斷普及，網(wǎng)站成了傳播信息最有效的平臺(tái)。所以我制作了一個(gè)專門針對(duì)我自己的網(wǎng)站，把我自己介紹給社會(huì)， 社會(huì)在發(fā)展，人們的思想觀念，生活方式也在發(fā)展，通過(guò)網(wǎng)站這種方式與企業(yè)或者他人交流已經(jīng)趨向普及。 1.1 網(wǎng)頁(yè)簡(jiǎn)介 網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)。通俗的說(shuō)，您的網(wǎng)站就是由網(wǎng)頁(yè)組成的。如果您只有域名和虛擬主機(jī)而沒(méi)有制作任何網(wǎng)頁(yè)的話，您的客戶仍舊無(wú)法訪問(wèn)您的網(wǎng)站。 網(wǎng)頁(yè)（Web page）是一個(gè)文件，他存放在世界某個(gè)角落的某一部計(jì)算機(jī)中，而這部計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取,當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。是萬(wàn)維網(wǎng)中的一“頁(yè)”，通常是HTML格式（文件擴(kuò)展名為.html或.htm）。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫。網(wǎng)頁(yè)要透過(guò)網(wǎng)頁(yè)瀏覽器來(lái)閱讀。 1.2 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)-網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開(kāi)展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開(kāi)網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無(wú)形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。企業(yè)網(wǎng)站設(shè)計(jì)顯得極為重要，下面是一些網(wǎng)站設(shè)計(jì)中應(yīng)注意的原則。 1)、明確建立網(wǎng)站的目標(biāo)和用戶需求 Web站點(diǎn)的設(shè)計(jì)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)展戰(zhàn)略的重要途徑，因此我們必須明確設(shè)計(jì)站點(diǎn)的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)計(jì)劃。我們會(huì)根據(jù)消費(fèi)者的需求、市場(chǎng)的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費(fèi)者（customer)”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計(jì)規(guī)劃。 在設(shè)計(jì)規(guī)劃時(shí)我們會(huì)考慮： 建設(shè)網(wǎng)站的目的是什么？ 為誰(shuí)提供服務(wù)和產(chǎn)品？ 企業(yè)能提供什么樣的產(chǎn)品和服務(wù)？ 網(wǎng)站的目的消費(fèi)者和受眾的特點(diǎn)是什么？ 企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式（風(fēng)格）？ 2)、網(wǎng)頁(yè)設(shè)計(jì)總體方案主題鮮明 在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。Web站點(diǎn)應(yīng)針對(duì)所服務(wù)對(duì)象（機(jī)構(gòu)或人）的不同而具有不同的形式。有些站點(diǎn)只提供簡(jiǎn)潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁(yè) 面布置，甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來(lái)。為了做到主題鮮明突出，要點(diǎn)明確，我們將按照客戶的要求，以簡(jiǎn)單明確的語(yǔ)言和畫面體現(xiàn)站點(diǎn)的主題；調(diào)動(dòng)一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個(gè)性和情趣，辦出網(wǎng)站的特點(diǎn)。 建立網(wǎng)站的要點(diǎn)網(wǎng)頁(yè)設(shè)計(jì)的兩大要點(diǎn)是：整體風(fēng)格和色彩搭配。 a、確定網(wǎng)站的整體風(fēng)格 網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的。難就難在沒(méi)有一個(gè)固定的模式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。 風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI（標(biāo)志、色彩、字體、標(biāo)語(yǔ)）、版面布局、瀏覽方式、交互性、文字、語(yǔ)氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。舉個(gè)例子：我們覺(jué)得網(wǎng)易是平易近人的，迪斯尼是生動(dòng)活潑的，IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。 在這里，我提供給大家一些參考經(jīng)驗(yàn)： 1將你的標(biāo)志logo，盡可能的放在每個(gè)頁(yè)面上最突出的位置。 2突出你的標(biāo)準(zhǔn)色彩。 3總結(jié)一句能反映貴站精髓的宣傳標(biāo)語(yǔ)！ 4相同類型的圖像采用相同效果，比如說(shuō)標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！ b、網(wǎng)頁(yè)色彩的搭配 無(wú)論是平面設(shè)計(jì)，還是網(wǎng)頁(yè)設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時(shí)候，我們看到的不是優(yōu)美的版式或者是美麗的圖片，而是網(wǎng)頁(yè)的色彩。 關(guān)于色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關(guān)設(shè)計(jì)書(shū)籍，有利于系統(tǒng)地理解。在此我們僅僅想告訴大家一些網(wǎng)頁(yè)配色時(shí)的小技巧。 1用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。 2用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色。 3用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。 在網(wǎng)頁(yè)配色中，還要切記一些誤區(qū)： 1不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。 2背景和前文的對(duì)比盡量要大(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。 制作網(wǎng)頁(yè)的常見(jiàn)工具1、dreamweaver,用與編輯HTML、ASP、JSP、PHP時(shí)的輔助工具2、Frontpage 跟dreamweaver一樣，不過(guò)個(gè)人感覺(jué)還是dreamweaver好。 3、FLASH 網(wǎng)頁(yè)需要畫面流動(dòng)時(shí)的首選擇 4、PS圖象處理軟件，一般網(wǎng)頁(yè)都需要有圖片的相搭配，PS是款很強(qiáng)大的工具。 5、FW跟PS一樣都是圖象處理軟件，但FW偏向與對(duì)網(wǎng)頁(yè)的處理。我一般用PS 6、Fireworks跟PS很象的一種處理軟件，主要用于制做動(dòng)態(tài)圖片格式。1.3 網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)狀（一）垃圾還是經(jīng)典 網(wǎng)頁(yè)技術(shù)更新很快，一個(gè)網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。不管是垃圾還是精品，都沒(méi)有所謂的經(jīng)典。經(jīng)典只存在于是哪個(gè)首次成功創(chuàng)新性的應(yīng)用。一個(gè)閉門造車者做出的東西，是遠(yuǎn)遠(yuǎn)趕不上綜合借鑒者的。網(wǎng)頁(yè)設(shè)計(jì)不同于其他藝術(shù)，在模仿加創(chuàng)新的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域當(dāng)中，即便是完全自己設(shè)計(jì)的，也是沿用了人們已經(jīng)認(rèn)同的大部分用戶習(xí)慣，而且這種沿襲的痕跡是非常的明顯！還有哪個(gè)設(shè)計(jì)者敢腆著臉說(shuō)，這都是我自己的原創(chuàng)設(shè)計(jì)？對(duì)于業(yè)界來(lái)說(shuō)，經(jīng)典只是個(gè)理念和象征！ （二）國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境 不可否認(rèn)，國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境目前還停留在初級(jí)的認(rèn)知階段，也就是說(shuō)，絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處，你去做一個(gè)業(yè)務(wù)的時(shí)候，不得不去做大量的說(shuō)服教育工作。以乙方的身份去說(shuō)服甲方，以專業(yè)角度去教育非專業(yè)認(rèn)識(shí)，結(jié)果是可想而知的。也正是這種全體社會(huì)普遍的低認(rèn)知水平，導(dǎo)致了大量網(wǎng)絡(luò)垃圾的產(chǎn)生。 （三）什么是好的網(wǎng)頁(yè)設(shè)計(jì) （1）內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì) 常常拿到的任務(wù)是一張小紙條，上面兩句話，叫你去做一個(gè)網(wǎng)站設(shè)計(jì)。有的人看看紙條就去設(shè)計(jì)頁(yè)面了，憑兩句話，你就可以為客戶做一個(gè)頁(yè)面設(shè)計(jì)，以別人一些資深專家7、8年的設(shè)計(jì)經(jīng)驗(yàn)，都不敢去做，真是偶像啊！做網(wǎng)頁(yè)設(shè)計(jì)，需要了解客戶的東西很多： 1、建站目的 2、欄目規(guī)劃及每個(gè)欄目的表現(xiàn)形式及功能要求 3、主色、客戶性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址 4、根據(jù)行業(yè)和客戶要求，那些要著重表現(xiàn) 5、是否分期建設(shè)、考慮后期的兼容性 6、客戶是否有強(qiáng)烈的建站欲望 7、你是否能在精神意識(shí)上控制住客戶 8、面對(duì)你未接觸的技術(shù)知識(shí)，你有底嗎？ 9. 網(wǎng)站類型 等等. 當(dāng)把這些內(nèi)容都了解清楚了時(shí)候，你的大腦中就已經(jīng)給這個(gè)網(wǎng)站有個(gè)全面而形象的定位了，這時(shí)才是有的放矢去做界面設(shè)計(jì)的時(shí)候了。 （2）界面弱化 一個(gè)好的界面設(shè)計(jì)它的界面是弱化的，它突出的是功能，著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者主要是什么。這就涉及到瀏覽順序、功能分區(qū)等等。 要讓訪客在0.5秒內(nèi)就能把握網(wǎng)站的行業(yè)性質(zhì)，1秒內(nèi)就知道該從哪個(gè)地方開(kāi)始使用這個(gè)網(wǎng)站，能點(diǎn)一次的，絕不點(diǎn)第二次。當(dāng)然上面說(shuō)的是大多數(shù)功能性網(wǎng)站，對(duì)于宣傳展示性網(wǎng)站，諸如加特效的或Flash網(wǎng)站，可能就不得不花哨一些，但不能太過(guò)分。網(wǎng)站不是動(dòng)畫片，在效率越來(lái)越高，社會(huì)心理越來(lái)越浮躁的中國(guó)，人們的耐心越來(lái)越小，心理承受能力越來(lái)越低。效果可以體現(xiàn)意境，點(diǎn)到為止。 （3）模塊化和可修改性強(qiáng) 模塊化不僅可以提高重用性，也能統(tǒng)一網(wǎng)站風(fēng)格，還可以降低程序開(kāi)發(fā)的強(qiáng)度。這里就涉及一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識(shí)了，不再冗述。 無(wú)論是架構(gòu)還是模塊或圖片，都要考慮可修改性強(qiáng)。舉個(gè)簡(jiǎn)單的例子，logo、按鈕等，很多人喜歡制作圖片，N個(gè)按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片，然后用在網(wǎng)頁(yè)代碼里打上文字，那么修改起來(lái)就簡(jiǎn)單了，讓程序員自己改字就可以了。然而網(wǎng)頁(yè)顯示的字體是帶有鋸齒的，一般既能清晰又保證美觀的字體字號(hào)有幾類： 宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ | （4）創(chuàng)意是可恥的，分析能力遠(yuǎn)比創(chuàng)意來(lái)的重要 設(shè)計(jì)界動(dòng)輒就大談什么“創(chuàng)意”，我要說(shuō)的是，還沒(méi)有搞清目的意義內(nèi)容，還沒(méi)在技術(shù)制作上臻于完善的基礎(chǔ)上，用創(chuàng)意和特效來(lái)迷惑客戶和訪客是可恥的。一個(gè)網(wǎng)頁(yè)設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)意來(lái)的重要。第2章 文獻(xiàn)綜述 2.1 課題研究現(xiàn)狀分析 伴隨著社會(huì)的發(fā)展和科學(xué)的進(jìn)步，上網(wǎng)成為越來(lái)越多人們的選擇。隨著互聯(lián)網(wǎng)的飛速發(fā)展，有關(guān)網(wǎng)絡(luò)的技術(shù)也層出不窮。如今互聯(lián)網(wǎng)上的個(gè)人網(wǎng)站如雨后春筍般蓬勃發(fā)展，絢麗多彩的主頁(yè)比比皆是。每個(gè)人都有發(fā)揮個(gè)人才能，揮灑自己個(gè)性的網(wǎng)上伊甸園。在hao123神話以后，網(wǎng)站大全類網(wǎng)站又再一次達(dá)到頂峰。然而這個(gè)模式拷貝成功的網(wǎng)站卻寥寥無(wú)幾。而對(duì)于技術(shù)薄弱的個(gè)人網(wǎng)站來(lái)說(shuō)，似乎網(wǎng)址類網(wǎng)站應(yīng)該是一個(gè)很好的切入點(diǎn)。但是由于搜索的異軍突起，網(wǎng)址類網(wǎng)站似乎變得可有可無(wú)。網(wǎng)頁(yè)實(shí)際是一個(gè)文件，他存放在世界某個(gè)角落的某一臺(tái)計(jì)算機(jī)中而這臺(tái)計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（URL）來(lái)識(shí)別與存取，當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程序，網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。文字與圖片是構(gòu)成一個(gè)網(wǎng)頁(yè)的兩個(gè)最基本的元素?？梢院?jiǎn)單的理解為：文字，就是網(wǎng)頁(yè)的內(nèi)容，圖片，就是網(wǎng)頁(yè)的美觀。除此之外，網(wǎng)頁(yè)的元素還包括動(dòng)畫、音樂(lè)、程序等等。網(wǎng)頁(yè)實(shí)際上只是一個(gè)純文本文件，它通過(guò)各式各樣的標(biāo)記對(duì)頁(yè)面上的文字、圖片、表格、聲音等元素進(jìn)行描述（例如字體、顏色、大小），而瀏纜器則對(duì)這些標(biāo)記進(jìn)行解釋并生成頁(yè)面。2.2 個(gè)人網(wǎng)站的研究工作1理論研究基礎(chǔ)：個(gè)人網(wǎng)站是由個(gè)別提供的一套集博客、文章、相冊(cè)、日程、通訊錄、鏈接、調(diào)查、留言板等諸多功能于一體的網(wǎng)絡(luò)平臺(tái)。個(gè)人網(wǎng)站的自由、開(kāi)放精神，并使之更容易操作，更具個(gè)性需求，而不需要高深的技術(shù)。它可以幫助個(gè)人進(jìn)行全面的信息化，以多種形式達(dá)到對(duì)信息獲取、組織、思考、表達(dá)、共享和交流的目的。以個(gè)人為中心，建立一個(gè)完全屬于自己的可定制的個(gè)性化網(wǎng)絡(luò)平臺(tái)。來(lái)自文章的評(píng)論，留言板都可以很好的進(jìn)行交流，傾聽(tīng)別人的聲音。2技術(shù)層面的支持：隨著互聯(lián)網(wǎng)的進(jìn)一步發(fā)展與成熟，網(wǎng)絡(luò)的帶寬進(jìn)一步加闊，網(wǎng)絡(luò)應(yīng)用也越來(lái)越廣泛。網(wǎng)頁(yè)制作更是日新月異，層出不窮。涌現(xiàn)了很多琳瑯滿目的網(wǎng)站，使得整個(gè)互聯(lián)網(wǎng)多姿多彩。2.3 已經(jīng)取得的研究成果中國(guó)互聯(lián)網(wǎng)在近幾年發(fā)展迅猛。一方面，產(chǎn)生了一批依賴技術(shù)領(lǐng)先的互聯(lián)網(wǎng)公司，取得了成功；另一方面，互聯(lián)網(wǎng)技術(shù)逐漸走向普及，使得行業(yè)進(jìn)入門檻正在降低。目前中國(guó)網(wǎng)站總數(shù)已經(jīng)近百萬(wàn)。在這里面出現(xiàn)了大量的個(gè)人網(wǎng)站。并且個(gè)人網(wǎng)站存在著巨大的商業(yè)價(jià)值。如果能以強(qiáng)大的號(hào)召力，把互補(bǔ)的個(gè)人網(wǎng)站聯(lián)合起來(lái)，不知道可以成立多少個(gè)門戶網(wǎng)站。我們有理由相信，個(gè)人網(wǎng)站還極具潛力。2.4選題的目的及意義隨著Internet的迅速普及，我們已經(jīng)不再滿足于僅僅瀏覽網(wǎng)頁(yè)，而是希望更深入地參預(yù)到網(wǎng)絡(luò)中去，Internet的開(kāi)放性使個(gè)人建立自己的網(wǎng)站成為可能，擁有自己的網(wǎng)站也越來(lái)越成為一種時(shí)尚，同時(shí)創(chuàng)建一個(gè)能充分體現(xiàn)自我風(fēng)格和特色的個(gè)人網(wǎng)站已經(jīng)成為互聯(lián)網(wǎng)用戶的新追求。我們更需要交流，相信交流能夠促進(jìn)我們不斷的進(jìn)步，并融合別人的長(zhǎng)處；讓我們多一些渠道傾聽(tīng)來(lái)自不同立場(chǎng)的聲音；設(shè)想我們的網(wǎng)絡(luò)，當(dāng)每個(gè)人都擁有個(gè)人網(wǎng)頁(yè)，不管是否在線，我們都可以跨越時(shí)間、空間進(jìn)行交流，因?yàn)檫@個(gè)網(wǎng)頁(yè)中擁有我所有的一切，生活，見(jiàn)解，知識(shí)，思想；理想的狀態(tài)是個(gè)人門戶就是每個(gè)人的影子，他為每個(gè)人打點(diǎn)網(wǎng)絡(luò)上的一切，很多志同道合的朋友會(huì)在這里和你相識(shí)相知。2.5 課題研究的主要內(nèi)容互聯(lián)網(wǎng)是社會(huì)發(fā)展的必然趨勢(shì)，很多人已經(jīng)意識(shí)到網(wǎng)絡(luò)的強(qiáng)大生命力和它在未來(lái)將處于的重要地位。他們鉆研并且努力進(jìn)入到這一個(gè)新的空間，新的領(lǐng)域。其中包括你和我。在我們的工作、日常生活中，能夠擁有一個(gè)自己的網(wǎng)站，一個(gè)已經(jīng)成為不少人的希望和驕傲。就這個(gè)課題的研究，因?yàn)槭莻€(gè)人網(wǎng)站，所以我只是選擇了自己擅長(zhǎng)和喜愛(ài)的內(nèi)容，在突出自己的風(fēng)格和特點(diǎn)的同時(shí)，還應(yīng)用了現(xiàn)在流行的網(wǎng)站設(shè)計(jì)技術(shù)和數(shù)據(jù)庫(kù)技術(shù)。第三章網(wǎng)站設(shè)計(jì)分析在Internet飛速發(fā)展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位顯而易見(jiàn)，它已成為個(gè)人、政府、企事業(yè)單位信息化建設(shè)中的重要組成部分，從而倍受人們的重視。越來(lái)越多的人希望能真正參預(yù)到互聯(lián)網(wǎng)上，這就出現(xiàn)了越來(lái)越多的個(gè)人網(wǎng)站的設(shè)計(jì)以及推廣的工作和任務(wù)。就我個(gè)人而言，之所以在畢業(yè)設(shè)計(jì)的時(shí)候選擇這個(gè)課題是因?yàn)槲乙蚕霌碛凶约旱膫€(gè)人網(wǎng)站，在互聯(lián)網(wǎng)上擁有自己的一席之地，從而真正的參與到網(wǎng)絡(luò)中去，做網(wǎng)絡(luò)新時(shí)代的主人，同時(shí)也希望自己喜歡和收藏的一些東西能夠和網(wǎng)絡(luò)一起分享，和互聯(lián)網(wǎng)上的你一起分享。網(wǎng)站的設(shè)計(jì)與制作需要用到網(wǎng)頁(yè)三劍客（Dreamweaver、fireworks、flash），IIS，photoshop等工具。所以首先我們要了解這些工具的功能與用處，然后要能夠熟練得掌握這些工具用法，只有你能熟練使用這些工具，你才能在設(shè)計(jì)過(guò)程中盡量避免技術(shù)上的問(wèn)題，提高效率，做到“事半功倍”。 3.1網(wǎng)站設(shè)計(jì)概述: 網(wǎng)站首頁(yè)可以說(shuō)是網(wǎng)站的門面，大家瀏覽你的網(wǎng)站首先看到的就是網(wǎng)站首頁(yè)，所以首頁(yè)不僅要做得美觀，引人瀏覽，還要有豐富的內(nèi)容。所以我們?cè)谑醉?yè)就首頁(yè)聚集了大量的信息，除了最基本個(gè)人信息，愛(ài)好，興趣等外，我還要將美麗的旅游景點(diǎn)和美妙的動(dòng)畫放進(jìn)去，這樣靜中有“動(dòng)”的效果可以抓住人的眼球，吸引人去點(diǎn)擊。子頁(yè)面的框架基本上是符合整個(gè)網(wǎng)站的整體風(fēng)格的，banner，導(dǎo)航等都是和首頁(yè)一樣的，不一樣的只是正文的內(nèi)容，這個(gè)可以通過(guò)模板來(lái)實(shí)現(xiàn)。出于排除對(duì)模板可編輯區(qū)域排版的復(fù)雜性起見(jiàn)，我這里沒(méi)有運(yùn)用模板，而是用另存為的方式實(shí)現(xiàn)網(wǎng)頁(yè)風(fēng)格“統(tǒng)一化”的。在網(wǎng)站的各頁(yè)面制作好后，我在Dreamweaver中與Access數(shù)據(jù)庫(kù)建立連接，通過(guò)在Dreamweaver的一系列操作實(shí)現(xiàn)注冊(cè)登錄的功能，而留言薄功能我是通過(guò)一張空白的寫有后臺(tái)代碼的頁(yè)面轉(zhuǎn)接過(guò)去的，名為handle.asp，用戶可以通過(guò)“在線留言”在網(wǎng)站上發(fā)表自己的見(jiàn)解或疑問(wèn)，達(dá)到互動(dòng)的效果。 3.2 開(kāi)發(fā)工具的選用及介紹: 3.2.1 Dreamweaver8.0: Dreamweaver是個(gè)原本由Macromedia公司所開(kāi)發(fā)的著名網(wǎng)站開(kāi)發(fā)工具。它使用所見(jiàn)即所得的接口，亦有HTML編輯的功能。它現(xiàn)在有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購(gòu)后，Adobe也開(kāi)始計(jì)劃開(kāi)發(fā)Linux版本的Dreamweaver了。Dreamweaver自MX版本開(kāi)始，使用了Opera的排版引擎 Presto 作為網(wǎng)頁(yè)預(yù)覽。要想學(xué)習(xí)制作網(wǎng)頁(yè)，就要從軟件Dreamweaver學(xué)起，下面我們來(lái)了解一下Dreamweaver的基礎(chǔ)只是已經(jīng)相關(guān)技術(shù) Dreamweaver的優(yōu)點(diǎn)就是其制作效率。Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash,Shockwave和外掛模組等搭配，不需離開(kāi)Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開(kāi)啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖檔的最佳化。 另外Dreamweaver是唯一提供Roundtrip HTML、視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無(wú)法想像。進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格的圖層以拖拉置放的方式進(jìn)行版面配置。所見(jiàn)即所得 Dreamweaver成功整合動(dòng)態(tài)式出版視覺(jué)編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)，所見(jiàn)即所得的功能，讓您不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)。夢(mèng)幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計(jì)分開(kāi)，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方位的呈現(xiàn)利用Dreamweaver設(shè)計(jì)的網(wǎng)頁(yè)，可以全方位的呈現(xiàn)在任何平臺(tái)的熱門瀏覽器上。對(duì)于cascading style sheets的動(dòng)態(tài)HTML支援和鼠標(biāo)換圖效果，聲音和動(dòng)畫的DHTML效果資料庫(kù)可在Netscape和Microsoft瀏覽器上執(zhí)行。使用不同瀏覽器檢示功能，Dreamweaver可以告知您在不同瀏覽器上執(zhí)行的成效如何。當(dāng)有新的瀏覽器上市時(shí)，只要從Dreamweaver的網(wǎng)站在下載它的描述檔，便可得知詳盡的成效報(bào)告。 Dreamweaver是創(chuàng)建和管理網(wǎng)頁(yè)的專業(yè)化可視編輯器，在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著Dreamweaver 8的發(fā)布，更堅(jiān)定Dreamweaver在該領(lǐng)域的地位。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)、制作的首選工具。 它的特點(diǎn)主要有1）、靈活的編寫方式 ： Dreamweaver具有靈活編寫網(wǎng)頁(yè)的特點(diǎn)，不但將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一，而且在設(shè)計(jì)窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。2）、可視化編輯界面：Dreamweaver是一種所見(jiàn)即所得的HTML編輯器，可實(shí)現(xiàn)頁(yè)面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時(shí)亦保證了其專業(yè)性和兼容性，并且可以對(duì)內(nèi)部的HTML編輯器和任何第三方的HTML編輯器進(jìn)行實(shí)時(shí)的訪問(wèn)。無(wú)論用戶習(xí)慣手工輸入HTML源代碼還是使用可視化的編輯界面，Dreamweaver都能提供便捷的方式使用戶設(shè)計(jì)網(wǎng)頁(yè)和管理網(wǎng)站變得更容易。3）、功能更多的CSS支持CSS可視化設(shè)計(jì)、CSS檢查工具。 4）、動(dòng)態(tài)跨瀏覽器驗(yàn)證：當(dāng)保存時(shí)系統(tǒng)自動(dòng)檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測(cè)試用瀏覽器，同時(shí)系統(tǒng)自動(dòng)檢驗(yàn)以確定頁(yè)面有沒(méi)有目標(biāo)瀏覽器不支持的tags或CSS結(jié)構(gòu)。動(dòng)態(tài)跨瀏覽器有效性檢查功能可以自動(dòng)核對(duì)tags和CSS規(guī)則是否適應(yīng)目前的主瀏覽器。 5）、強(qiáng)大的WEB站點(diǎn)管理功能 6）、內(nèi)建的圖形編輯引擎 7）、Dreamweaver的集成特性 Dreamweaver 8繼承了Fireworks、Flash和Shockwave的集成特性，可以在這些Web創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實(shí)用的網(wǎng)頁(yè)。 8）、豐富的媒體支持能力：可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒體。Dreamweaver具有強(qiáng)大的多媒體處理功能，在設(shè)計(jì)DHTML和CSS方面表現(xiàn)得極為出色，它利用JavaScript和DHTML語(yǔ)言代碼輕松地實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)作和交互操作。Dreamweaver還提供行為和時(shí)間線兩種控件來(lái)產(chǎn)生交互式響應(yīng)和進(jìn)行動(dòng)畫處理。 9）、超強(qiáng)的擴(kuò)展能力：Dreamweaver還支持第三方插件，任何人都可以根據(jù)自己的需要擴(kuò)展Dreamweaver的功能，并且可以發(fā)布這些插件。 3.2.2 Photoshop CS: PS是電腦上的圖像處理軟件Photoshop 的縮寫。對(duì)于廣大Photoshop愛(ài)好者而言，PS亦用來(lái)形容通過(guò)Photoshop等圖形處理軟件處理過(guò)的圖片，即非原始、非未處理的圖片。photoshop是Adobe公司旗下最為出名的圖像處理軟件之一。多數(shù)人對(duì)于PHOTOSHOP的了解僅限于“一個(gè)很好的圖像編輯軟件”，并不知道它的諸多應(yīng)用方面，實(shí)際上，PHOTOSHOP的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版各方面都有涉及。網(wǎng)絡(luò)的普及是促使更多人需要掌握PHOTOSHOP的一個(gè)重要原因。因?yàn)樵谥谱骶W(wǎng)頁(yè)時(shí)PHOTOSHOP是必不可少的網(wǎng)頁(yè)圖像處理軟件。如模版PSD等等(圖為Photoshop主界面 它是一款圖形、圖像編輯軟件，在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域被廣泛得應(yīng)用。以下是其10大最新功能： 1、改進(jìn)的文件瀏覽器 使用功能強(qiáng)大文件瀏覽器的可以快速預(yù)覽、標(biāo)注和排序圖片；搜索或編輯圖像的數(shù)據(jù)元或關(guān)鍵詞；并且可以自動(dòng)批量共享文件。2、匹配顏色命令 可以迅速?gòu)囊粡垐D片的顏色校正另外一張圖像的顏色。 3、直方圖調(diào)色板 隨時(shí)根據(jù)對(duì)圖像的調(diào)整更新直方圖調(diào)色板(Histogram Palette)。4、陰影/加亮區(qū)修正 使用“陰影/加亮區(qū)修正(hadow/Highlight correction)”可以快速調(diào)整照片中曝光過(guò)渡或欠缺的區(qū)域。 5、沿路徑放置文本 可以像在Illustrator中一樣把文本沿著路徑放置，并且你還可以在Illustrator直接編輯文本。 6、支持?jǐn)?shù)碼相機(jī)的raw模式 支持多款數(shù)碼相機(jī)得raw模式，讓用戶可以得到更真實(shí)的圖像輸入。 7、全面支持16位圖像 可以在主要功能、層、比刷、文字、圖形等中精確的編輯、潤(rùn)飾16位的圖像。 8、Layer Comps 可以在一個(gè)文件中保存不同層的合并效果，以便對(duì)各種效果進(jìn)行快速察看。 9、輸入Flash文件 使用ImageReady可以創(chuàng)建flash矢量文件。 10、自定義快捷鍵 用戶可以按照自己的習(xí)慣定義Photoshop的快捷鍵。 3.2.3 網(wǎng)頁(yè)基本html代碼 網(wǎng)頁(yè)html代碼很多很多,主要是用于網(wǎng)站的建設(shè)、功能設(shè)計(jì)、美化等的一系列代碼,下面舉例一些常用的代碼:1) 貼圖：2)加入連接：寫上你想寫的字3)在新窗口打開(kāi)連接：寫上要寫的字消除連接的下劃線在新窗口打開(kāi)連接：寫上你想寫的字4)移動(dòng)字體(走馬燈)：寫上你想寫的字5)字體加粗：寫上你想寫的字6)字體斜體：寫上你想寫的字7)字體下劃線: 寫上你想寫的字8)字體刪除線: 寫上你想寫的字9)字體加大: 寫上你想寫的字10)字體控制大?。簩懮夏阆雽懙淖?(其中字體大小可從h1-h5,h1最大，h5最小)11)更改字體顏色：寫上你想寫的字(其中value值在000000與ffffff(16位進(jìn)制)之間12)消除連接的下劃線：寫上你想寫的字13)貼音樂(lè)：14)貼flash: 15)貼影視文件：16)換行：17)段落：段落18)原始文字樣式：正文19)換帖子背景：20)固定帖子背景不隨滾動(dòng)條滾動(dòng)：21)定制帖子背景顏色：(value值見(jiàn)10)22)帖子背景音樂(lè)：23)貼網(wǎng)頁(yè)： 3.2.4 明靜態(tài)網(wǎng)頁(yè)html以及div+css(舉例說(shuō)) 網(wǎng)頁(yè)一般可以分為兩大類：靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。 靜態(tài)網(wǎng)頁(yè)是指在動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)產(chǎn)生之前，用純HTML代碼來(lái)編寫的網(wǎng)業(yè)，并保存為*html或*htm的文件形式。這種用純HTML代碼編寫的網(wǎng)頁(yè)在制作完成后，任何人在任何時(shí)候采用任何方式瀏覽該頁(yè)面，所看到的瀏覽結(jié)果都相同。因此，這種網(wǎng)頁(yè)的內(nèi)容更新較為繁瑣，必須在設(shè)計(jì)制作好，然后用專門的軟件上傳到服務(wù)器上才能更新。例如網(wǎng)站的欄目有些是長(zhǎng)時(shí)間不變的，像這樣的頁(yè)面宜采用靜態(tài)網(wǎng)頁(yè)來(lái)實(shí)現(xiàn)，且瀏覽的速度比較快。靜態(tài)網(wǎng)頁(yè)適合于一些產(chǎn)品規(guī)格恒定不輕易變更的小規(guī)模公司，其作用主要是用于配合傳統(tǒng)媒體作廣告宣傳?？傊o態(tài)網(wǎng)頁(yè)適合于用來(lái)發(fā)布無(wú)需用戶參與、無(wú)需定期更新的靜態(tài)文本內(nèi)容。 隨著網(wǎng)頁(yè)技術(shù)應(yīng)用的普及，人們對(duì)網(wǎng)頁(yè)信息的及時(shí)更新提出了更高的要求。隨著數(shù)據(jù)庫(kù)和腳本技術(shù)(如ASP、PHP和JSP)的發(fā)展，越來(lái)越多的站點(diǎn)都開(kāi)始采取動(dòng)態(tài)的頁(yè)面發(fā)布手段。比如，我們?cè)贕oogle上搜索信息時(shí)，將得到的一個(gè)搜索結(jié)果的頁(yè)面文件，其實(shí)這個(gè)頁(yè)面文件在Google服務(wù)器上并不存在，而是動(dòng)態(tài)生成的。 在Web服務(wù)器應(yīng)用范圍擴(kuò)展以后，特別是一些新技術(shù)如CGI、ASP、PHP、JSP等的廣泛應(yīng)用，使Web服務(wù)器可以與用戶進(jìn)行交互，按照用戶的需要來(lái)動(dòng)態(tài)地、即時(shí)地構(gòu)造頁(yè)面，這些動(dòng)態(tài)構(gòu)造的頁(yè)面就稱為“動(dòng)態(tài)網(wǎng)頁(yè)”。一般動(dòng)態(tài)網(wǎng)頁(yè)都需要配合數(shù)據(jù)庫(kù)，以實(shí)現(xiàn)非常強(qiáng)大的功能，動(dòng)態(tài)網(wǎng)頁(yè)較常見(jiàn)的表現(xiàn)形式有；留言板、論壇、聊天室、計(jì)數(shù)器、校友錄、網(wǎng)上購(gòu)物等。 相應(yīng)的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)大體上也可以分為兩大類：靜態(tài)網(wǎng)頁(yè)技術(shù)和動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。 制作靜態(tài)網(wǎng)頁(yè)主要使用HTML(超文本標(biāo)記語(yǔ)言)，如果配合客戶端腳本語(yǔ)言JavaScript，也能產(chǎn)生豐富的動(dòng)態(tài)效果，從而可以滿足大多數(shù)個(gè)人網(wǎng)站的需要。 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)根據(jù)程序運(yùn)行地點(diǎn)的不同，又可分為客戶端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)和服務(wù)器端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)。 客戶端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)(又叫瀏覽器端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù))不需要與服務(wù)器進(jìn)行交互，實(shí)現(xiàn)動(dòng)態(tài)功能的代碼往往來(lái)用腳本語(yǔ)言的形式直接嵌入到網(wǎng)頁(yè)中。服務(wù)器把網(wǎng)頁(yè)發(fā)送到客戶端以后，網(wǎng)頁(yè)上的腳本程序可以在客戶端瀏覽器中直接響應(yīng)用戶的動(dòng)作，有些應(yīng)用還需要瀏覽器安裝組件支持。 常見(jiàn)的客戶端動(dòng)態(tài)技術(shù)包括：JavaScript、VBScript、Java Applet、Flash、DHTML、ActiveX、VRML等。 服務(wù)器端動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)需要服務(wù)器和客戶端的共同參與。用戶通過(guò)瀏覽器發(fā)出頁(yè)面請(qǐng)求后，服務(wù)器根據(jù)URL攜帶的參數(shù)運(yùn)行服務(wù)器端程序，產(chǎn)生結(jié)果頁(yè)面，再將它返回給客戶端。一般涉及數(shù)據(jù)庫(kù)操作的網(wǎng)頁(yè)，如注冊(cè)、登錄、查詢、購(gòu)物等應(yīng)用，都需要設(shè)計(jì)強(qiáng)大的服務(wù)器端動(dòng)態(tài)程序，并考慮各種可能出現(xiàn)的出錯(cuò)情況，以保證網(wǎng)站的交互性和安全性。 典型的服務(wù)器端動(dòng)態(tài)技術(shù)包括：CGI、ASP、PHP、JSP等。關(guān)于DIV+CSSDIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語(yǔ)之一，div+css 是一種網(wǎng)頁(yè)的布局方法，這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式，可實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容與表現(xiàn)相分離。XHTML是The Extensible HyperText Markup Language（可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言）的縮寫。XHTML基于可擴(kuò)展標(biāo)記語(yǔ)言（XML），是一種在HTML 基礎(chǔ)上優(yōu)化和改進(jìn)的的新語(yǔ)言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。產(chǎn)生背景: HTML語(yǔ)言自HTML4.01以來(lái)，不再發(fā)布新版本，原因就在于HTML語(yǔ)言正變得越來(lái)越復(fù)雜化、專用化。即標(biāo)記越來(lái)越多，甚至各個(gè)瀏覽器生產(chǎn)商也開(kāi)發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁(yè)的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營(yíng)養(yǎng)，隨后發(fā)布了XML。 XML是一種比HTML更加嚴(yán)格的標(biāo)記語(yǔ)言，全稱是可擴(kuò)展標(biāo)記語(yǔ)言（EXtensible Markup Language）。但是XML過(guò)于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語(yǔ)言就派上了用場(chǎng)，用XHTML語(yǔ)言重寫后的HTML頁(yè)面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。 而CSS關(guān)鍵就在于其與腳本語(yǔ)言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）但XSL，即可擴(kuò)展樣式表語(yǔ)言相較于CSS過(guò)于復(fù)雜，不太容易上手。自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無(wú)章的惡夢(mèng)，開(kāi)始將頁(yè)面內(nèi)容與樣式分離。但鑒于我學(xué)習(xí)的是表格布局,本次的設(shè)計(jì)只運(yùn)用了簡(jiǎn)單的CSS樣式 3.3 關(guān)系型數(shù)據(jù)庫(kù)的選擇: 3.3.1 Microsoft Office Access簡(jiǎn)介: Access基于Windows操作系統(tǒng)下的集成開(kāi)發(fā)環(huán)境，該Microsoft Office Access是由微軟發(fā)布的關(guān)聯(lián)式數(shù)據(jù)庫(kù)管理系統(tǒng),是集成在microsoft公司開(kāi)發(fā)的產(chǎn)品更新?lián)Q代office系統(tǒng)中的集成軟件。它之所以被集成到Office中而不是Visual Studio中，是因?yàn)樗c其它的數(shù)據(jù)庫(kù)管理系統(tǒng)（如Visual FoxPro）相比更加簡(jiǎn)單易學(xué)，一個(gè)普通的計(jì)算機(jī)用戶即可掌握并使用它。而且最重要的一點(diǎn)是Access的功能足夠強(qiáng)大，足以應(yīng)付一般的數(shù)據(jù)管理及處理需要。 Assess能夠存取 Access/Jet、Microsoft SQL Server、Oracle，或者任何 ODBC 兼容數(shù)據(jù)庫(kù)內(nèi)的資料。ODBC（Open Database Connectivity開(kāi)放式數(shù)據(jù)庫(kù)互聯(lián)）是微軟推出的一種工業(yè)標(biāo)準(zhǔn)，一種開(kāi)放的獨(dú)立于廠商的API應(yīng)用程序接口，可以跨平臺(tái)訪問(wèn)各種個(gè)人計(jì)算機(jī)、小型機(jī)以及主機(jī)系統(tǒng)。ODBC作為一個(gè)工業(yè)標(biāo)準(zhǔn)，絕大多數(shù)數(shù)據(jù)庫(kù)廠商、大多數(shù)應(yīng)用軟件和工具軟件廠商都為自己的產(chǎn)品提供了ODBC接口或提供了ODBC支持，這其中就包括常用的SQL SERVER、ORACAL、INFORMIX等，當(dāng)然也包括了Access。 在ASP中可以通過(guò)三種方式訪問(wèn)數(shù)據(jù)庫(kù)：1、IDC（Internet Database Connector）方式；2、ADO（ActiveX Data Objects）方式；3、RDS（Remote Data Service）方式。這三種訪問(wèn)方式對(duì)數(shù)據(jù)庫(kù)的訪問(wèn)都是由Internet Information Server完成的。通過(guò)Web瀏覽器用HTTP協(xié)議向IIS（Internet信息服務(wù)器）發(fā)送請(qǐng)求，IIS執(zhí)行對(duì)數(shù)據(jù)庫(kù)的訪問(wèn)，并返回一個(gè)HTML格式的文檔響應(yīng)。以下是Access的優(yōu)點(diǎn)： 1存儲(chǔ)方式單一 Access管理的對(duì)象有表、查詢、窗體、報(bào)表、頁(yè)、宏和模塊，以上對(duì)象都存放在后綴為（.mdb）的數(shù)據(jù)庫(kù)文件種，便于用戶的操作和管理。 2面向?qū)ο?Access是一個(gè)面向?qū)ο蟮拈_(kāi)發(fā)工具，利用面向?qū)ο蟮姆绞綄?shù)據(jù)庫(kù)系統(tǒng)中的各種功能對(duì)象化，將數(shù)據(jù)庫(kù)管理的各種功能封裝在各類對(duì)象中。它將一個(gè)應(yīng)用系統(tǒng)當(dāng)作是由一系列對(duì)象組成的，對(duì)每個(gè)對(duì)象它都定義一組方法和屬性，以定義該對(duì)象的行為和外國(guó)，用戶還可以按需要給對(duì)象擴(kuò)展方法和屬性。通過(guò)對(duì)象的方法、屬性完成數(shù)據(jù)庫(kù)的操作和管理，極大地簡(jiǎn)化了用戶的開(kāi)發(fā)工作。同時(shí)，這種基于面向?qū)ο蟮拈_(kāi)發(fā)方式，使得開(kāi)發(fā)應(yīng)用程序更為簡(jiǎn)便。 3界面友好、易操作 Access是一個(gè)可視化工具，是風(fēng)格與Windows完全一樣，用戶想要生成對(duì)象并應(yīng)用，只要使用鼠標(biāo)進(jìn)行拖放即可，非常直觀方便。系統(tǒng)還提供了表生成器、查詢生成器、報(bào)表設(shè)計(jì)器以及數(shù)據(jù)庫(kù)向?qū)А⒈硐驅(qū)?、查詢向?qū)?、窗體向?qū)?、?bào)表向?qū)У裙ぞ?，使得操作?jiǎn)便，容易使用和掌握。 4集成環(huán)境、處理多種數(shù)據(jù)信息環(huán)境集成了各種向?qū)Ш蜕善鞴ぞ?，極大地提高了開(kāi)發(fā)人員的工作效率，使得建立數(shù)據(jù)庫(kù)、創(chuàng)建表、設(shè)計(jì)用戶界面、設(shè)計(jì)數(shù)據(jù)查詢、報(bào)表打印等可以方便有序地進(jìn)行。 5Access支持ODBC（開(kāi)發(fā)數(shù)據(jù)庫(kù)互連，Open Data Base Connectivity）。利用Access強(qiáng)大的DDE（動(dòng)態(tài)數(shù)據(jù)交換）和OLE（對(duì)象的聯(lián)接和嵌入）特性，可以在一個(gè)數(shù)據(jù)表中嵌入位圖、聲音、Excel表格、Word文檔，還可以建立動(dòng)態(tài)的數(shù)據(jù)庫(kù)報(bào)表和窗體等。Access還可以將程序應(yīng)用于網(wǎng)絡(luò)，并與網(wǎng)絡(luò)上的動(dòng)態(tài)數(shù)據(jù)相聯(lián)接。利用數(shù)據(jù)庫(kù)訪問(wèn)頁(yè)對(duì)象生成HTML文件，輕松構(gòu)建Internet/Intranet的應(yīng)用。第四章 網(wǎng)站地圖 網(wǎng)站地圖，又稱站點(diǎn)地圖，它就是一個(gè)頁(yè)面，上面放置了網(wǎng)站上所有頁(yè)面的鏈接。大多數(shù)人在網(wǎng)站上找不到自己所需要的信息時(shí)，可能會(huì)將網(wǎng)站地圖作為一種補(bǔ)救措施。搜索引擎蜘蛛非常喜歡網(wǎng)站地圖。 4.1為何要建立網(wǎng)站地圖網(wǎng)站地圖是一個(gè)網(wǎng)站所有鏈接的容器。網(wǎng)站地圖就是根據(jù)網(wǎng)站的結(jié)構(gòu)、框架、內(nèi)容，生成的導(dǎo)航網(wǎng)頁(yè)文件。大多數(shù)人都知道網(wǎng)站地圖對(duì)于提高用戶體驗(yàn)有好處：它們?yōu)榫W(wǎng)站訪問(wèn)者指明方向，并幫助迷失的訪問(wèn)者找到他們想看的頁(yè)面。對(duì)于SEO，網(wǎng)站地圖的好處就更多了： 1為搜索引擎蜘蛛提供可以瀏覽整個(gè)網(wǎng)站的鏈接； 2為搜索引擎蜘蛛提供一些鏈接，指向動(dòng)態(tài)頁(yè)面或者采用其他方法比較難以到達(dá)的頁(yè)面； 3作為一種潛在的著陸頁(yè)面，可以為搜索流量進(jìn)行優(yōu)化； 4如果訪問(wèn)者試圖訪問(wèn)網(wǎng)站所在域內(nèi)并不存在的URL，那么這個(gè)訪問(wèn)者就會(huì)被轉(zhuǎn)到“無(wú)法找到文件”的錯(cuò)誤頁(yè)面，而網(wǎng)站地圖可以作為該頁(yè)面的“準(zhǔn)”內(nèi)容。4.2 我的網(wǎng)站地圖首頁(yè) 網(wǎng)站首頁(yè)新聞收藏 娛樂(lè)新聞 政治新聞我的學(xué)習(xí) 調(diào)查報(bào)告 實(shí)習(xí)工作我的旅游 圖片收藏 旅游日志英語(yǔ)天地 語(yǔ)法收藏 英語(yǔ)flash動(dòng)畫收藏夾 日志 優(yōu)美文章集留言薄 第五章 網(wǎng)站概述 5.1 網(wǎng)站定位 1網(wǎng)站主題 本網(wǎng)站的主題是個(gè)人網(wǎng)站，主在描述個(gè)人的興趣愛(ài)好，生活方式，學(xué)習(xí)情況等。 2網(wǎng)站名稱 該網(wǎng)站名為“快樂(lè)吧”，快樂(lè)吧快樂(lè)吧，顧名思義就是在這個(gè)網(wǎng)站內(nèi)可以讓自己愉快，高興，我這個(gè)網(wǎng)站是針對(duì)個(gè)人設(shè)計(jì)的，是我自己的快樂(lè)吧，有我愛(ài)的旅游