畢業(yè)設(shè)計(jì)報(bào)告網(wǎng)頁技術(shù)相關(guān)探討與靜態(tài)網(wǎng)頁設(shè)計(jì)

1、<p>　　No： </p><p>　　畢 業(yè) 設(shè) 計(jì) 報(bào) 告</p><p>　　課題:網(wǎng)頁技術(shù)相關(guān)探討與靜態(tài)網(wǎng)頁設(shè)計(jì) </p><p>　　系部: 軟件工程系 </p><p>　　班級: 軟件0910 </p><p>　　學(xué)號:

2、 2009005195 </p><p>　　學(xué)生: </p><p>　　指導(dǎo)教師: </p><p>　　裝訂交卷日期:2011.3.15</p><p><b>　　畢業(yè)設(shè)計(jì)任務(wù)書</b></p>

3、<p><b>　　目 錄</b></p><p><b>　　1 緒論4</b></p><p><b>　　1.1網(wǎng)頁簡介4</b></p><p><b>　　1.2網(wǎng)頁設(shè)計(jì)5</b></p><p>　　1.3網(wǎng)頁設(shè)計(jì)現(xiàn)狀4

4、</p><p><b>　　2 相關(guān)技術(shù)6</b></p><p>　　2.1網(wǎng)頁制作軟件(以dreamweaver舉例)6</p><p>　　2.2網(wǎng)頁基本html代碼7</p><p>　　2.2.1靜態(tài)網(wǎng)頁html以及div+css(舉例說明)8</p><p>　　2.3圖像處

5、理軟件10</p><p>　　2.4動態(tài)編程語言10</p><p><b>　　3 網(wǎng)站地圖11</b></p><p>　　3.1為何要建立網(wǎng)站地圖11</p><p>　　3.2 我的網(wǎng)站地圖11</p><p><b>　　4 詳細(xì)設(shè)計(jì)12</b><

6、;/p><p>　　4.1 網(wǎng)站主體以及基本框架12</p><p>　　4.2 網(wǎng)頁部分細(xì)節(jié)的設(shè)計(jì)代碼13</p><p>　　4.3 網(wǎng)站全部頁面的圖片以及主頁代碼23</p><p><b>　　5 結(jié)束語55</b></p><p><b>　　6 參考文獻(xiàn)55</b

7、></p><p><b>　　7 致謝55</b></p><p><b>　　1緒論</b></p><p>　　網(wǎng)頁(web page)，是網(wǎng)站中的一頁，通常是HTML格式（文件擴(kuò)展名為.html或.htm或.asp或.aspx或.php或.jsp等）。網(wǎng)頁通常用圖像檔來提供圖畫。網(wǎng)頁要使用網(wǎng)頁瀏覽器來閱讀

8、。</p><p>　　(MMORPG游戲魔獸世界官方網(wǎng)站)</p><p><b>　　1.1 網(wǎng)頁簡介</b></p><p><b>　　什么是網(wǎng)頁</b></p><p>　　網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗的說，您的網(wǎng)站就是由網(wǎng)頁組成的。如果您只有域名和虛擬主機(jī)而沒

9、有制作任何網(wǎng)頁的話，您的客戶仍舊無法訪問您的網(wǎng)站。 </p><p>　　網(wǎng)頁（Web page）是一個文件，他存放在世界某個角落的某一部計(jì)算機(jī)中，而這部計(jì)算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取,當(dāng)我們在瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，網(wǎng)頁文件會被傳送到你的計(jì)算機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。是萬維網(wǎng)中的一“頁”，通常是HTML格式（文件擴(kuò)展名為.html

10、或.htm）。網(wǎng)頁通常用圖像檔來提供圖畫。網(wǎng)頁要透過網(wǎng)頁瀏覽器來閱讀。</p><p><b>　　1.2 網(wǎng)頁設(shè)計(jì)</b></p><p>　　網(wǎng)頁設(shè)計(jì)--------網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形

11、資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。企業(yè)網(wǎng)站設(shè)計(jì)顯得極為重要，下面是一些網(wǎng)站設(shè)計(jì)中應(yīng)注意的原則。 </p><p>　　一、明確建立網(wǎng)站的目標(biāo)和用戶需求 </p><p>　　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ì)劃。我們會根據(jù)消費(fèi)者的需求、市場

12、的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費(fèi)者（customer)”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計(jì)規(guī)劃。 </p><p>　　在設(shè)計(jì)規(guī)劃時我們會考慮： </p><p>　　建設(shè)網(wǎng)站的目的是什么？ </p><p>　　為誰提供服務(wù)和產(chǎn)品？ </p><p>　　企業(yè)能提供什么樣的產(chǎn)品和服務(wù)？ </p><p&

13、gt;　　網(wǎng)站的目的消費(fèi)者和受眾的特點(diǎn)是什么？ </p><p>　　企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式（風(fēng)格）？ </p><p>　　二、網(wǎng)頁設(shè)計(jì)總體方案主題鮮明 </p><p>　　在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。</p><p>　　Web站點(diǎn)應(yīng)針對所服務(wù)對象

14、（機(jī)構(gòu)或人）的不同而具有不同的形式。有些站點(diǎn)只提供簡潔文本信息；有些則采用多媒體表現(xiàn)手法，提供華麗的圖像、閃爍的燈光、復(fù)雜的頁 面布置，甚至可以下載聲音和錄像片段。好的Web站點(diǎn)把圖形表現(xiàn)手法和有效的組織與通信結(jié)合起來。</p><p>　　為了做到主題鮮明突出，要點(diǎn)明確，我們將按照客戶的要求，以簡單明確的語言和畫面體現(xiàn)站點(diǎn)的主題；調(diào)動一切手段充分表現(xiàn)網(wǎng)站點(diǎn)的個性和情趣，辦出網(wǎng)站的特點(diǎn)。 </p>

15、<p><b>　　建立網(wǎng)站的要點(diǎn)</b></p><p>　　網(wǎng)頁設(shè)計(jì)的兩大要點(diǎn)是：整體風(fēng)格和色彩搭配。 </p><p>　　一、確定網(wǎng)站的整體風(fēng)格 </p><p>　　網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最難以學(xué)習(xí)的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。 </p>

16、<p>　　風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點(diǎn)的CI（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。舉個例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。 </p><p>　　在這里，我提供給大家一些參考經(jīng)驗(yàn)： </p&g

17、t;<p>　　1．將你的標(biāo)志logo，盡可能的放在每個頁面上最突出的位置。</p><p>　　2．突出你的標(biāo)準(zhǔn)色彩。 </p><p>　　3．總結(jié)一句能反映貴站精髓的宣傳標(biāo)語！ </p><p>　　4．相同類型的圖像采用相同效果，比如說標(biāo)題字都采用陰影效果，那么在網(wǎng)站中出現(xiàn)的所有標(biāo)題字的陰影效果的設(shè)置應(yīng)該是完全一致的！ </p>

18、<p>　　二、網(wǎng)頁色彩的搭配 </p><p>　　無論是平面設(shè)計(jì)，還是網(wǎng)頁設(shè)計(jì)，色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)我們距離顯示屏較遠(yuǎn)的時候，我們看到的不是優(yōu)美的版式或者是美麗的圖片，而是網(wǎng)頁的色彩。 </p><p>　　關(guān)于色彩的原理有許多，在此我們不可能一一闡述，大家可以看看相關(guān)設(shè)計(jì)書籍，有利于系統(tǒng)地理解。在此我們僅僅想告訴大家一些網(wǎng)頁配色時的小技巧。 </p>&

19、lt;p>　　1．用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。 </p><p>　　2．用兩種色彩。先選定一種色彩，然后選擇它的對比色。 </p><p>　　3．用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。 </p><p>　　在網(wǎng)頁配色中，還要切記一些誤區(qū)：

20、 </p><p>　　1．不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。 </p><p>　　2．背景和前文的對比盡量要大(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。 </p><p><b>　　制作網(wǎng)頁的常見工具</b></p><p>　　1、dreamweaver,用與編輯HTML、ASP、

21、JSP、PHP時的輔助工具</p><p>　　2、Frontpage 跟dreamweaver一樣，不過個人感覺還是dreamweaver好。 </p><p>　　3、FLASH 網(wǎng)頁需要畫面流動時的首選擇 </p><p>　　4、PS圖象處理軟件，一般網(wǎng)頁都需要有圖片的相搭配，PS是款很強(qiáng)大的工具。 </p><p>　　5、FW跟P

22、S一樣都是圖象處理軟件，但FW偏向與對網(wǎng)頁的處理。[我一般用PS] </p><p>　　6、Fireworks跟PS很象的一種處理軟件，主要用于制做動態(tài)圖片格式。</p><p>　　1.3 網(wǎng)頁設(shè)計(jì)現(xiàn)狀</p><p>　?。ㄒ唬├€是經(jīng)典 </p><p>　　網(wǎng)頁技術(shù)更新很快，一個網(wǎng)站的界面設(shè)計(jì)壽命僅僅2-3年而已。不管是垃圾還是精

23、品，都沒有所謂的經(jīng)典。經(jīng)典只存在于是哪個首次成功創(chuàng)新性的應(yīng)用。一個閉門造車者做出的東西，是遠(yuǎn)遠(yuǎn)趕不上綜合借鑒者的。網(wǎng)頁設(shè)計(jì)不同于其他藝術(shù)，在模仿加創(chuàng)新的網(wǎng)頁設(shè)計(jì)領(lǐng)域當(dāng)中，即便是完全自己設(shè)計(jì)的，也是沿用了人們已經(jīng)認(rèn)同的大部分用戶習(xí)慣，而且這種沿襲的痕跡是非常的明顯！還有哪個設(shè)計(jì)者敢腆著臉說，這都是我自己的原創(chuàng)設(shè)計(jì)？對于業(yè)界來說，經(jīng)典只是個理念和象征！ </p><p>　?。ǘ﹪鴥?nèi)網(wǎng)頁設(shè)計(jì)環(huán)境 </p>

24、;<p>　　不可否認(rèn)，國內(nèi)網(wǎng)頁設(shè)計(jì)環(huán)境目前還停留在初級的認(rèn)知階段，也就是說，絕大多數(shù)人不知道網(wǎng)絡(luò)的真正的可用之處，你去做一個業(yè)務(wù)的時候，不得不去做大量的說服教育工作。以乙方的身份去說服甲方，以專業(yè)角度去教育非專業(yè)認(rèn)識，結(jié)果是可想而知的。也正是這種全體社會普遍的低認(rèn)知水平，導(dǎo)致了大量網(wǎng)絡(luò)垃圾的產(chǎn)生。 </p><p>　?。ㄈ┦裁词呛玫木W(wǎng)頁設(shè)計(jì) </p><p>　?。?）

25、內(nèi)容和功能決定表現(xiàn)形式和界面設(shè)計(jì) </p><p>　　常常拿到的任務(wù)是一張小紙條，上面兩句話，叫你去做一個網(wǎng)站設(shè)計(jì)。有的人看看紙條就去設(shè)計(jì)頁面了，憑兩句話，你就可以為客戶做一個頁面設(shè)計(jì)，以別人一些資深專家7、8年的設(shè)計(jì)經(jīng)驗(yàn)，都不敢去做，真是偶像??！</p><p>　　做網(wǎng)頁設(shè)計(jì)，需要了解客戶的東西很多： </p><p><b>　　1、建站目的 &l

26、t;/b></p><p>　　2、欄目規(guī)劃及每個欄目的表現(xiàn)形式及功能要求 </p><p>　　3、主色、客戶性別喜好、聯(lián)系方式、舊版網(wǎng)址、偏好網(wǎng)址 </p><p>　　4、根據(jù)行業(yè)和客戶要求，那些要著重表現(xiàn) </p><p>　　5、是否分期建設(shè)、考慮后期的兼容性 </p><p>　　6、客戶是否有強(qiáng)烈的

27、建站欲望 </p><p>　　7、你是否能在精神意識上控制住客戶 </p><p>　　8、面對你未接觸的技術(shù)知識，你有底嗎？ </p><p><b>　　9. 網(wǎng)站類型 </b></p><p><b>　　等等... </b></p><p>　　當(dāng)把這些內(nèi)容都了解清

28、楚了時候，你的大腦中就已經(jīng)給這個網(wǎng)站有個全面而形象的定位了，這時才是有的放矢去做界面設(shè)計(jì)的時候了。 </p><p><b>　?。?）界面弱化 </b></p><p>　　一個好的界面設(shè)計(jì)它的界面是弱化的，它突出的是功能，著重體現(xiàn)的是網(wǎng)站業(yè)提供給使用者主要是什么。這就涉及到瀏覽順序、功能分區(qū)等等。 </p><p>　　要讓訪客在0.5秒內(nèi)

29、就能把握網(wǎng)站的行業(yè)性質(zhì)，1秒內(nèi)就知道該從哪個地方開始使用這個網(wǎng)站，能點(diǎn)一次的，絕不點(diǎn)第二次。當(dāng)然上面說的是大多數(shù)功能性網(wǎng)站，對于宣傳展示性網(wǎng)站，諸如加特效的或Flash網(wǎng)站，可能就不得不花哨一些，但不能太過分。網(wǎng)站不是動畫片，在效率越來越高，社會心理越來越浮躁的中國，人們的耐心越來越小，心理承受能力越來越低。效果可以體現(xiàn)意境，點(diǎn)到為止。 </p><p>　?。?）模塊化和可修改性強(qiáng) </p>&l

30、t;p>　　模塊化不僅可以提高重用性，也能統(tǒng)一網(wǎng)站風(fēng)格，還可以降低程序開發(fā)的強(qiáng)度。這里就涉及一些尺寸、模數(shù)、寬容度、命名規(guī)范等等知識了，不再冗述。 </p><p>　　無論是架構(gòu)還是模塊或圖片，都要考慮可修改性強(qiáng)。舉個簡單的例子，logo、按鈕等，很多人喜歡制作圖片，N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片，然后用在網(wǎng)頁代碼里打上文字，那么修改起來就簡單了，讓程序員自己改字就可以了。然而網(wǎng)頁顯

31、示的字體是帶有鋸齒的，一般既能清晰又保證美觀的字體字號有幾類： </p><p>　　宋體12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ | </p><p>　?。?）創(chuàng)意是可恥的，分析能力遠(yuǎn)比創(chuàng)意來的重要 </p><p>　　設(shè)計(jì)界動輒就大

32、談什么“創(chuàng)意”，我要說的是，還沒有搞清目的意義內(nèi)容，還沒在技術(shù)制作上臻于完善的基礎(chǔ)上，用創(chuàng)意和特效來迷惑客戶和訪客是可恥的。一個網(wǎng)頁設(shè)計(jì)者的分析能力遠(yuǎn)比創(chuàng)意來的重要。</p><p><b>　　2 相關(guān)技術(shù)</b></p><p>　　利用網(wǎng)頁制作軟件dreamweaver和網(wǎng)頁基本HTML代碼css+div以及圖像處理軟件PS等,再加以動態(tài)編程語言 asp,asp

33、,net,php或jsp制作出網(wǎng)頁。</p><p>　　2.1網(wǎng)頁制作軟件(以Dreamweaver舉例)</p><p>　　Dreamweaver是個原本由Macromedia公司所開發(fā)的著名網(wǎng)站開發(fā)工具。它使用所見即所得的接口，亦有HTML編輯的功能。它現(xiàn)在有Mac和Windows系統(tǒng)的版本。隨Macromedia被Adobe收購后，Adobe也開始計(jì)劃開發(fā)Linux版本的Drea

34、mweaver了。Dreamweaver自MX版本開始，使用了Opera的排版引擎 "Presto" 作為網(wǎng)頁預(yù)覽。</p><p>　　要想學(xué)習(xí)制作網(wǎng)頁，就要從軟件Dreamweaver學(xué)起，下面我們來了解一下Dreamweaver的基礎(chǔ)只是已經(jīng)相關(guān)技術(shù)</p><p>　　Dreamweaver的優(yōu)點(diǎn)就是其制作效率。Dreamweaver可以用最快速的方式將Fire

35、works，F(xiàn)reeHand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback Flash,Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photos

36、hop來進(jìn)行編輯與設(shè)定圖檔的最佳化。</p><p>　　另外Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設(shè)計(jì)工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進(jìn)階表格編輯功能使您簡單的選擇單格、行、欄或作未連續(xù)之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準(zhǔn)定位，利用可輕易轉(zhuǎn)換成表格

37、的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得 Dreamweaver成功整合動態(tài)式出版視覺編輯及電子商務(wù)功能，提供超強(qiáng)的支援能力給Third-party廠商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango與自行發(fā)展的應(yīng)用軟體。當(dāng)您正使用Dreamweaver在設(shè)計(jì)動態(tài)網(wǎng)頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預(yù)覽網(wǎng)頁。夢幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計(jì)分開

38、，應(yīng)用于快速網(wǎng)頁更新和團(tuán)隊(duì)合作網(wǎng)頁編輯。建立網(wǎng)頁外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方</p><p>　　2.2網(wǎng)頁基本html代碼</p><p>　　網(wǎng)頁html代碼很多很多,主要是用于網(wǎng)站的建設(shè)、功能設(shè)計(jì)、美化等的一系列代碼,下面舉例一些常用的代碼:</p>

39、;<p>　　1)貼圖：<img src="圖片地址">2)加入連接：<a href="所要連接的相關(guān)地址">寫上你想寫的字</a>3)在新窗口打開連接：<a href="相關(guān)地址" target="_blank">寫上要寫的字</a>消除連接的下劃線在新窗口打開連接：<

40、a href="相關(guān)地址" style="text-decoration:none" target="_blank">寫上你想寫的字</a>4)移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>5)字體加粗：<b>寫上你想寫的字</b>6)字體斜體：<i>寫上你想寫的字&l

41、t;/i>7)字體下劃線: <u>寫上你想寫的字</u>8)字體刪除線: <s>寫上你想寫的字</s>9)字體加大: <big>寫上你想寫的字</big>10)字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)11)更改字體顏色：<font color="#val

42、ue">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進(jìn)制)之間12)消除連接</p><p>　　2.2.1靜態(tài)網(wǎng)頁html以及div+css(舉例說明)</p><p>　　網(wǎng)頁一般可以分為兩大類：靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是指在動態(tài)網(wǎng)頁技術(shù)產(chǎn)生之前，用純HTML代碼來編寫的網(wǎng)業(yè)，并保存為*．html或*．htm的文

43、件形式。這種用純HTML代碼編寫的網(wǎng)頁在制作完成后，任何人在任何時候采用任何方式瀏覽該頁面，所看到的瀏覽結(jié)果都相同。因此，這種網(wǎng)頁的內(nèi)容更新較為繁瑣，必須在設(shè)計(jì)制作好，然后用專門的軟件上傳到服務(wù)器上才能更新。例如．網(wǎng)站的欄目有些是長時間不變的，像這樣的頁面宜采用靜態(tài)網(wǎng)頁來實(shí)現(xiàn)，且瀏覽的速度比較快。靜態(tài)網(wǎng)頁適合于一些產(chǎn)品規(guī)格恒定不輕易變更的小規(guī)模公司，其作用主要是用于配合傳統(tǒng)媒體作廣告宣傳?？傊o態(tài)網(wǎng)頁適合于用來發(fā)布無需用戶參與、無需定

44、期更新的靜態(tài)文本內(nèi)容。    隨著網(wǎng)頁技術(shù)應(yīng)用的普及，人們對網(wǎng)頁信息的及時更新提出了更高的要求。隨著數(shù)據(jù)庫和腳本技術(shù)(如ASP、PHP和JSP)的發(fā)展，越來越多的站點(diǎn)都開始采取動態(tài)的頁面發(fā)布手段。比如，我們在Google上搜索信息時，將得到的一個搜索結(jié)果的頁面文件，其實(shí)這個頁面文件在Google服務(wù)器上并不存在，而是動態(tài)生成的。 在Web服務(wù)器應(yīng)用范圍擴(kuò)展以后，特別是一些新技術(shù)如CGI、ASP、P<

45、/p><p><b>　　關(guān)于DIV+CSS</b></p><p>　　DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用術(shù)語之一，div+css 是一種網(wǎng)頁的布局方法，這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式，可實(shí)現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。XHTML是The Extensible HyperText Markup Langu

46、age（可擴(kuò)展超文本標(biāo)識語言）的縮寫。XHTML基于可擴(kuò)展標(biāo)記語言（XML），是一種在HTML 基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用與強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。</p><p><b>　　產(chǎn)生背景</b></p><p>　　HTML語言自H

47、TML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復(fù)雜化、專用化。即標(biāo)記越來越多，甚至各個瀏覽器生產(chǎn)商也開發(fā)出只適合于其特定瀏覽器的HTML標(biāo)記，這顯然有礙于HTML網(wǎng)頁的兼容性。于是W3C組織進(jìn)而重新從SGML中獲取營養(yǎng)，隨后發(fā)布了XML。 </p><p>　　XML是一種比HTML更加嚴(yán)格的標(biāo)記語言，全稱是可擴(kuò)展標(biāo)記語言（EXtensible Markup Language）。但是XML

48、過于復(fù)雜，且當(dāng)前的大部分瀏覽器都不完全支持XML。于是XHTML這種語言就派上了用場，用XHTML語言重寫后的HTML頁面可以應(yīng)用許多XML應(yīng)用技術(shù)。使得網(wǎng)頁更加容易擴(kuò)展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。 </p><p>　　而CSS關(guān)鍵就在于其與腳本語言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）——但XS

49、L，即可擴(kuò)展樣式表語言相較于CSS過于復(fù)雜，不太容易上手。自從CSS出現(xiàn)之后，HTML終于擺脫了雜亂無章的惡夢，開始將頁面內(nèi)容與樣式分離。</p><p>　　但鑒于我學(xué)習(xí)的是表格布局,本次的設(shè)計(jì)只運(yùn)用了簡單的CSS樣式</p><p>　　2.2.3 圖像處理軟件</p><p>　　那么常見的圖像處理軟件非PS莫屬</p><p>　　P

50、S是電腦上的圖像處理軟件Photoshop 的縮寫。對于廣大Photoshop愛好者而言，PS亦用來形容通過Photoshop等圖形處理軟件處理過的圖片，即非原始、非未處理的圖片。photoshop是Adobe公司旗下最為出名的圖像處理軟件之一。多數(shù)人對于PHOTOSHOP的了解僅限于“一個很好的圖像編輯軟件”，并不知道它的諸多應(yīng)用方面，實(shí)際上，PHOTOSHOP的應(yīng)用領(lǐng)域很廣泛，在圖像、圖形、文字、視頻、出版各方面都有涉及。</

51、p><p>　　網(wǎng)絡(luò)的普及是促使更多人需要掌握PHOTOSHOP的一個重要原因。因?yàn)樵谥谱骶W(wǎng)頁時PHOTOSHOP是必不可少的網(wǎng)頁圖像處理軟件。如模版PSD等等…</p><p>　　(圖為Photoshop主界面)</p><p>　　2.2.4 動態(tài)編程語言</p><p>　　動態(tài)網(wǎng)頁是與靜態(tài)網(wǎng)頁相對應(yīng)的，也就是說，網(wǎng)頁URL的后綴不是.h

52、tm、.html、.shtml、.xml等靜態(tài)網(wǎng)頁的常見形式，而是以.asp、.jsp、.php、.perl、.cgi等形式為后綴，并且在動態(tài)網(wǎng)頁網(wǎng)址中有一個標(biāo)志性的符號——“？”。</p><p>　　將動態(tài)網(wǎng)頁的一般特點(diǎn)簡要?dú)w納如下：</p><p>　　（1）動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量；</p><p>　?。?）采用動態(tài)網(wǎng)頁技術(shù)

53、的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊、用戶登錄、在線調(diào)查、用戶管理、訂單管理等等；</p><p>　?。?）動態(tài)網(wǎng)頁實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁；</p><p>　?。?）動態(tài)網(wǎng)頁中的“？”對搜索引擎檢索存在一定的問題，搜索引擎一般不可能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，或者出于技術(shù)方面的考慮，搜索蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)

54、容，因此采用動態(tài)網(wǎng)頁的網(wǎng)站在進(jìn)行搜索引擎推廣時需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。</p><p>　　編程語言：PHP,ASP,JSP等等</p><p><b>　　3 網(wǎng)站地圖</b></p><p>　　網(wǎng)站地圖，又稱站點(diǎn)地圖，它就是一個頁面，上面放置了網(wǎng)站上所有頁面的鏈接。大多數(shù)人在網(wǎng)站上找不到自己所需要的信息時，可能會將網(wǎng)站

55、地圖作為一種補(bǔ)救措施。搜索引擎蜘蛛非常喜歡網(wǎng)站地圖。</p><p>　　3.1 為何要建立網(wǎng)站地圖</p><p>　　網(wǎng)站地圖是一個網(wǎng)站所有鏈接的容器。網(wǎng)站地圖就是根據(jù)網(wǎng)站的結(jié)構(gòu)、框架、內(nèi)容，生成的導(dǎo)航網(wǎng)頁文件。大多數(shù)人都知道網(wǎng)站地圖對于提高用戶體驗(yàn)有好處：它們?yōu)榫W(wǎng)站訪問者指明方向，并幫助迷失的訪問者找到他們想看的頁面。對于SEO，網(wǎng)站地圖的好處就更多了： </p>&l

56、t;p>　　1．為搜索引擎蜘蛛提供可以瀏覽整個網(wǎng)站的鏈接； </p><p>　　2．為搜索引擎蜘蛛提供一些鏈接，指向動態(tài)頁面或者采用其他方法比較難以到達(dá)的頁面； </p><p>　　3．作為一種潛在的著陸頁面，可以為搜索流量進(jìn)行優(yōu)化； </p><p>　　4．如果訪問者試圖訪問網(wǎng)站所在域內(nèi)并不存在的URL，那么這個訪問者就會被轉(zhuǎn)到“無法找到文件”的錯誤頁

57、面，而網(wǎng)站地圖可以作為該頁面的“準(zhǔn)”內(nèi)容。</p><p>　　3.2 我的網(wǎng)站地圖</p><p><b>　　首頁 網(wǎng)站首頁</b></p><p>　　輪滑起源 輪滑的起源</p><p>　　平地花式 平地花式輪滑(簡稱平花)</p><p><b>　　極限輪滑</b&g

58、t;</p><p><b>　　花樣輪滑</b></p><p>　　輪滑裝備 極限輪滑 平花輪滑 速度輪滑</p><p><b>　　精采瞬間</b></p><p>　　關(guān)于酷輪吧 隱私保護(hù) 廣告服務(wù) 招聘信息 聯(lián)系我們</p><p><b>　　4 詳細(xì)

59、設(shè)計(jì)</b></p><p>　　4.1 網(wǎng)站主題以及基本框架</p><p>　　在大二的學(xué)習(xí)中已經(jīng)接觸到了網(wǎng)頁這一塊,當(dāng)時就已經(jīng)制作過自己的網(wǎng)站,可惜因?yàn)殡娔X重裝資料不見了,很不幸的不能和大家分享,所以就以輪滑這個主題做了相關(guān)簡單的網(wǎng)站.</p><p><b>　　(網(wǎng)站主頁)</b></p><p>

60、　　網(wǎng)站的頁腳采用了主流的制作方式:</p><p>　　4.2 網(wǎng)頁部分細(xì)節(jié)的設(shè)計(jì)代碼</p><p>　　關(guān)于輪滑心情這一模塊的自動滾動代碼如下:</p><p><b>　　<tr></b></p><p>　　<td height="165" align="cent

61、er" valign="top"><table width="99%" height="167" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"></p><p><b

62、>　　<tr></b></p><p>　　<td height="165" valign="middle" bgcolor="#E4EDFC"><marquee width="370" height="150" direction="up" be

63、havior="scroll" scrollamount="1" scrolldelay="88"></p><p>　　<div align="center"></p><p>　　<p class="STYLE5">輕輕的溜著<BR></p

64、><p>　　在擁擠的人群中……<br></p><p><b>　　<BR></b></p><p>　　似乎漫無目的的，腳步隨著跳動的節(jié)奏而滑行，<br></p><p>　　在人群中穿行。<br></p><p><b>　　<br

65、></b></p><p>　　沒有必要去注意周圍的事物，只有自己在行云，<br></p><p>　　只有音符在流水……<BR></p><p><b>　　<BR></b></p><p>　　&nbsp;&nbsp;&nbsp;&

66、nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;不知道在那一刻，曾經(jīng)有這樣的一個畫面猶如流星般一閃而過：人群中，一個跌跌怦怦的身影在晃動，像是海浪中搖擺的小船，于是快速的溜了過去，扶著即將翻到的小船，小船平穩(wěn)的穿過了突如其來的人浪，而我也是時候繼續(xù)自我的陶醉了……<BR></p><p><b>　　<BR></

67、b></p><p><b>　　流動的身影<BR></b></p><p>　　也許吸引了人們異樣的眼神<BR></p><p><b>　　欣賞也好<BR></b></p><p><b>　　詫異也罷<BR></b>&

68、lt;/p><p>　　都不曾是我們的腳步凌亂<BR></p><p><b>　　因?yàn)?lt;BR></b></p><p>　　使我們飛揚(yáng)的<BR></p><p>　　不是人們的異樣的眼神<BR></p><p>　　而是我們年輕的心<BR>

69、</p><p><b>　　<BR></b></p><p>　　曲終了，人也散了。<BR></p><p>　　我們還是在一起，沒有牽著手，但是心中似乎有另外一雙手在牽著。<BR></p><p>　　我在愛經(jīng)過的地方結(jié)網(wǎng)，然后在角落里靜靜的盼望……<BR></p

70、><p><b>　　<BR></b></p><p>　　忘不了，南湖的初遇，東場的牽手，餐廳里的海闊天空，還有你意外的看到我出現(xiàn)你宿舍門前的眼神，當(dāng)然也不會忘記和你一起去買花時莫名無措的心情，還有后來矛盾的心情……<BR></p><p><b>　　<BR></b></p>

71、<p>　　你問我有沒有想過出國，我說很想，又問我準(zhǔn)備了嗎？我說沒有，然后你說你要出國，就在最近……<BR></p><p><b>　　<BR></b></p><p>　　那天晚上我第一次在晚上十二點(diǎn)后回宿舍，腦海里還隱約記得你臨走前說過的話———好好的珍惜你的現(xiàn)在和周圍的朋友！<BR></p>&l

72、t;p><b>　　<BR></b></p><p>　　是的，我的確應(yīng)該好好的珍惜我的現(xiàn)在，現(xiàn)在，既是過去的未來，也是明天的起點(diǎn)，本來就該好好珍惜的！<BR></p><p><b>　　<BR></b></p><p>　　也不知經(jīng)歷的多少個日出日落，度過了多少個初夏秋冬，只知

73、道在某年某月某日，黃昏時分，偶然在路上碰見你了，當(dāng)然，你也不會孤身而行了，不知道你是否注意到了我正從你的對面走過，我只知道那一刻，我抬起了頭，挺直了腰，大步的往前走去…… </p></p><p><b>　　</div></b></p><p>　　</marquee></td></p><p>

74、;<b>　　</tr></b></p><p>　　</table></td></p><p><b>　　</tr></b></p><p>　　</table></td></p><p><b>　　</t

75、r></b></p><p>　　</table></td></p><p><b>　　</tr></b></p><p>　　(輪滑心情模塊自動滾動)</p><p><b>　　網(wǎng)頁模版代碼</b></p><p>

76、<b>　　<html></b></p><p><b>　　<head></b></p><p>　　<!-- TemplateBeginEditable name="doctitle" --></p><p>　　<title>歡迎來到酷輪吧</

77、title></p><p>　　<!-- TemplateEndEditable --></p><p>　　<META http-equiv=Content-Type content="text/html; charset=utf-8"></p><p>　　<script type="text/

78、javascript"></p><p><b>　　<!--</b></p><p>　　function MM_preloadImages() { //v3.0</p><p>　　var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();</p&g

79、t;<p>　　var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)</p><p>　　if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}</p><p>

80、<b>　　}</b></p><p>　　function MM_swapImgRestore() { //v3.0</p><p>　　var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;<

81、/p><p><b>　　}</b></p><p>　　function MM_findObj(n, d) { //v4.01</p><p>　　var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

82、</p><p>　　d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}</p><p>　　if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];</p&

83、gt;<p>　　for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);</p><p>　　if(!x && d.getElementById) x=d.getElementById(n); return x;</p>&

84、lt;p><b>　　}</b></p><p>　　function MM_swapImage() { //v3.0</p><p>　　var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)</p><p

85、>　　if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}</p><p><b>　　}</b></p><p><b>　　//--></b></p><p><b

86、>　　</script></b></p><p>　　<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script></p><p>　　<style type="text/css&q

87、uot;></p><p><b>　　<!--</b></p><p><b>　　body {</b></p><p>　　background-image: url();</p><p>　　background-color: #E4EDFC;</p><p&g

88、t;<b>　　}</b></p><p>　　.STYLE1 {font-size: 14px}</p><p>　　#content {</p><p>　　background-image: url(../3.jpg);</p><p>　　background-repeat: no-repeat;</p&g

89、t;<p>　　height: 410px;</p><p>　　width: 350px;</p><p><b>　　}</b></p><p><b>　　a:link {</b></p><p>　　font-size: 14px;</p><p>　　

90、line-height: normal;</p><p>　　color: #330099;</p><p><b>　　}</b></p><p><b>　　--></b></p><p><b>　　</style></b></p><

91、;p>　　<link href="../CSS.css" rel="stylesheet" type="text/css"></p><p>　　<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><

92、/p><p>　　<style type="text/css"></p><p><b>　　<!--</b></p><p>　　.STYLE7 {font-size: 12px}</p><p>　　.STYLE9 {color: #0000FF}</p><p&

93、gt;<b>　　--></b></p><p><b>　　</style></b></p><p><b>　　</head></b></p><p>　　<body text="#333333" leftmargin="0&quo

94、t; topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../image/bt_001.gif','../image/bt_002.gif','../image/bt_003.gif','../image/bt_004

95、.gif','../image/bt_005.gif','../image/bt_006.gif','../image/bt_007.gif')"></p><p>　　<div align="center"></p><p>　　<table width="805&qu

96、ot; border="0" cellpadding="0" cellspacing="0"></p><p><b>　　<tr> </b></p><p>　　<td width="62%" height="60" align="l

97、eft" valign="bottom"><img src="../image/Logo.jpg" width="230" height="93"><a name="20"></a></td></p><p>　　<td width="

98、38%" height="50" align="left" valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0"></p><p><b&

99、gt;　　<tr></b></p><p>　　<td height="19" align="right"><span class="STYLE1">一起放縱&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&

100、amp;nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　&l

101、t;td height="20" align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="STYLE

102、1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 我們年輕的心</span>&nbsp;&nbsp;&nbsp;&nbsp;</td></p><p><b>　　</tr></b></p><

103、;p>　　</table></td></p><p><b>　　</tr></b></p><p><b>　　</table></b></p><p>　　<table width="805" border="0" al

104、ign="center" cellpadding="0" cellspacing="0" bgcolor="#666666"></p><p><b>　　<tr></b></p><p>　　<td height="29" align=&quo

105、t;center" background="../image/2.gif"><table width="603" border="0" cellpadding="0" cellspacing="0" bordercolor="#999999" name="MENUBUTTON"

106、></p><p><b>　　<tr></b></p><p>　　<td height="19"><a href="../index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImag

107、e('Image64','','../image/bt_001.gif',1)"><img src="../image/bt_01.gif" alt="1" name="Image64" width="86" height="19" border="0&quo

108、t;></a></td></p><p>　　<td><a href="../html/起源.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image65','','../image/bt_0

109、02.gif',1)"><img src="../image/bt_02.gif" alt="1" name="Image65" width="86" height="19" border="0"></a></td></p><p>　

110、　<td><a href="../html/平地花式.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','../image/bt_003.gif',1)"><img src="../im

111、age/bt_03.gif" alt="1" name="Image66" width="86" height="19" border="0"></a></td></p><p>　　<td><a href="../html/極限輪滑.html&q

112、uot; onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image63','','../image/bt_004.gif',1)"><img src="../image/bt_04.gif" alt="1" name=&quo

113、t;Image63" width="86" height="19" border="0"></a></td></p><p>　　<td><a href="../html/輪滑裝備.html" onMouseOut="MM_swapImgRestore()"

114、 onMouseOver="MM_swapImage('Image67','','../image/bt_005.gif',1)"><img src="../image/bt_05.gif" alt="1" name="Image67" width="86" height=&qu

115、ot;19" border="0"></a></td></p><p>　　<td><a href="../html/精彩瞬間.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image68

116、9;,'','../image/bt_006.gif',1)"><img src="../image/bt_06.gif" alt="1" name="Image68" width="86" height="19" border="0"></a>&

117、lt;/td></p><p>　　<td><a href="../html/備注.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image69','','../image/bt_007.gif',1)&qu

118、ot;><img src="../image/bt_07.gif" alt="1" name="Image69" width="86" height="19" border="0"></a></td></p><p>　　<td><im

119、g src="../image/obj_02.gif" alt="8" width="1" height="19"></td></p><p><b>　　</tr></b></p><p>　　</table></td></p&

120、gt;<p><b>　　</tr></b></p><p><b>　　</table></b></p><p><b>　　<br></b></p><p>　　<table width="805" border=&quo

121、t;0" cellpadding="0" cellspacing="0"></p><p><b>　　<tr> </b></p><p>　　<td width="824"><table width="100%" border="0

122、" cellspacing="0" cellpadding="0"></p><p><b>　　<tr></b></p><p>　　<td width="28%" align="center" valign="middle">

123、<table width="100%" border="0" cellspacing="0" cellpadding="0"></p><p><b>　　<tr></b></p><p>　　<td align="center">&

124、lt;a href="../html/輪滑裝備.html"><img src="../image/1_1.gif" width="189" height="42" border="0"></a></td></p><p><b>　　</tr><

125、/b></p><p><b>　　<tr></b></p><p>　　<td align="center"><a href="../html/花樣輪滑.html"><img src="../image/1_2.gif" width="189&quo

126、t; height="42" border="0"></a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td align="cen

127、ter"><a href="../html/平地花式.html"><img src="../image/1_3.gif" width="189" height="42" border="0"></a></td></p><p><b>　　&

128、lt;/tr></b></p><p><b>　　<tr></b></p><p>　　<td align="center"><a href="../html/極限輪滑.html"><img src="../image/1_4.gif" width

129、="189" height="42" border="0"></a></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td a

130、lign="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"></p><p><b>　　<tr></b></p><p>　　<td al

131、ign="center"><img src="../image/31.jpg" width="255" height="170"><br></p><p><b>　　<br></td></b></p><p><b>　　&

132、lt;/tr></b></p><p><b>　　<tr></b></p><p>　　<td align="center"><img src="../image/32.jpg" width="255" height="170">&l

133、t;br></p><p><b>　　<br></td></b></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td align="ce

134、nter"><img src="../image/33.jpg" width="255" height="170"><br></p><p><b>　　<br></td></b></p><p><b>　　</tr>&l

135、t;/b></p><p><b>　　<tr></b></p><p>　　<td align="center"><img src="../image/34.jpg" width="255" height="170"></td><

136、;/p><p><b>　　</tr></b></p><p>　　</table></td></p><p><b>　　</tr></b></p><p>　　</table></td></p><p>

137、　　<td width="72%" align="center" valign="top"><!-- TemplateBeginEditable name="2" -->2</p><p>　　<!-- TemplateEndEditable --></td></p>&l