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

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

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)頁(yè)簡(jiǎn)介4</b></p><p><b>　　1.2網(wǎng)頁(yè)設(shè)計(jì)5</b></p><p>　　1.3網(wǎng)頁(yè)設(shè)計(jì)現(xiàn)狀4

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

5、理軟件10</p><p>　　2.4動(dòng)態(tài)編程語(yǔ)言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)頁(yè)部分細(xì)節(jié)的設(shè)計(jì)代碼13</p><p>　　4.3 網(wǎng)站全部頁(yè)面的圖片以及主頁(yè)代碼23</p><p><b>　　5 結(jié)束語(yǔ)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)頁(yè)(web page)，是網(wǎng)站中的一頁(yè)，通常是HTML格式（文件擴(kuò)展名為.html或.htm或.asp或.aspx或.php或.jsp等）。網(wǎng)頁(yè)通常用圖像檔來(lái)提供圖畫。網(wǎng)頁(yè)要使用網(wǎng)頁(yè)瀏覽器來(lái)閱讀

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

9、有制作任何網(wǎng)頁(yè)的話，您的客戶仍舊無(wú)法訪問(wèn)您的網(wǎng)站。 </p><p>　　網(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

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

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ì)劃。我們會(huì)根據(jù)消費(fèi)者的需求、市場(chǎng)

12、的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，以“消費(fèi)者（customer)”為中心，而不是以“美術(shù)”為中心進(jìn)行設(shè)計(jì)規(guī)劃。 </p><p>　　在設(shè)計(jì)規(guī)劃時(shí)我們會(huì)考慮： </p><p>　　建設(shè)網(wǎng)站的目的是什么？ </p><p>　　為誰(shuí)提供服務(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)頁(yè)設(shè)計(jì)總體方案主題鮮明 </p><p>　　在目標(biāo)明確的基礎(chǔ)上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設(shè)計(jì)方案。對(duì)網(wǎng)站的整體風(fēng)格和特色作出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。</p><p>　　Web站點(diǎn)應(yīng)針對(duì)所服務(wù)對(duì)象

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

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

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

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

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

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

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

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

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

23、品，都沒有所謂的經(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è)理念和象征！ </p><p>　?。ǘ﹪?guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)環(huán)境 </p>

24、;<p>　　不可否認(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)生。 </p><p>　?。ㄈ┦裁词呛玫木W(wǎng)頁(yè)設(shè)計(jì) </p><p>　?。?）

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

26、t;/b></p><p>　　2、欄目規(guī)劃及每個(gè)欄目的表現(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、你是否能在精神意識(shí)上控制住客戶 </p><p>　　8、面對(duì)你未接觸的技術(shù)知識(shí)，你有底嗎？ </p><p><b>　　9. 網(wǎng)站類型 </b></p><p><b>　　等等... </b></p><p>　　當(dāng)把這些內(nèi)容都了解清

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

29、就能把握網(wǎng)站的行業(yè)性質(zhì)，1秒內(nèi)就知道該從哪個(gè)地方開始使用這個(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)到為止。 </p><p>　　（3）模塊化和可修改性強(qiáng) </p>&l

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

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

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

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

34、mweaver了。Dreamweaver自MX版本開始，使用了Opera的排版引擎 "Presto" 作為網(wǎng)頁(yè)預(yù)覽。</p><p>　　要想學(xué)習(xí)制作網(wǎng)頁(yè)，就要從軟件Dreamweaver學(xué)起，下面我們來(lái)了解一下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)頁(yè)上。使用檢色吸管工具選擇熒幕上的顏色可設(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)于選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dreamweaver能與您喜愛的設(shè)計(jì)工具，如Playback Flash,Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開啟Firework或Photos

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

37、的圖層以拖拉置放的方式進(jìn)行版面配置。所見即所得 Dreamweaver成功整合動(dòng)態(tài)式出版視覺編輯及電子商務(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í)，所見即所得的功能，讓您不需要透過(guò)瀏覽器就能預(yù)覽網(wǎng)頁(yè)。夢(mèng)幻樣版和XML Dreamweaver將內(nèi)容與設(shè)計(jì)分開

38、，應(yīng)用于快速網(wǎng)頁(yè)更新和團(tuán)隊(duì)合作網(wǎng)頁(yè)編輯。建立網(wǎng)頁(yè)外觀的樣版，指定可編輯或不可編輯的部份，內(nèi)容提供者可直接編輯以樣式為主的內(nèi)容卻不會(huì)不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內(nèi)容。 全方</p><p>　　2.2網(wǎng)頁(yè)基本html代碼</p><p>　　網(wǎng)頁(yè)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)移動(dòng)字體(走馬燈)：<marquee>寫上你想寫的字</marquee>5)字體加粗：<b>寫上你想寫的字</b>6)字體斜體：<i>寫上你想寫的字&l

41、t;/i>7)字體下劃線: <u>寫上你想寫的字</u>8)字體刪除線: <s>寫上你想寫的字</s>9)字體加大: <big>寫上你想寫的字</big>10)字體控制大?。?lt;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)頁(yè)html以及div+css(舉例說(shuō)明)</p><p>　　網(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的文

43、件形式。這種用純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)媒體作廣告宣傳。總之，靜態(tài)網(wǎng)頁(yè)適合于用來(lái)發(fā)布無(wú)需用戶參與、無(wú)需定

44、期更新的靜態(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)都開始采取動(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、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ù)語(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 Langu

46、age（可擴(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)各種定位。</p><p><b>　　產(chǎn)生背景</b></p><p>　　HTML語(yǔ)言自H

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

48、過(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ī)整。 </p><p>　　而CSS關(guān)鍵就在于其與腳本語(yǔ)言（如Javascript）及XML技術(shù)的融合，即CSS+Javascript+XML（實(shí)際上有一種更好的融合：XML+XSL+Javascript）——但XS

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

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

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

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

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

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

55、地圖作為一種補(bǔ)救措施。搜索引擎蜘蛛非常喜歡網(wǎng)站地圖。</p><p>　　3.1 為何要建立網(wǎng)站地圖</p><p>　　網(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)站地圖的好處就更多了： </p>&l

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

57、面，而網(wǎng)站地圖可以作為該頁(yè)面的“準(zhǔn)”內(nèi)容。</p><p>　　3.2 我的網(wǎng)站地圖</p><p><b>　　首頁(yè) 網(wǎng)站首頁(yè)</b></p><p>　　輪滑起源 輪滑的起源</p><p>　　平地花式 平地花式輪滑(簡(jiǎn)稱平花)</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)頁(yè)這一塊,當(dāng)時(shí)就已經(jīng)制作過(guò)自己的網(wǎng)站,可惜因?yàn)殡娔X重裝資料不見了,很不幸的不能和大家分享,所以就以輪滑這個(gè)主題做了相關(guān)簡(jiǎn)單的網(wǎng)站.</p><p><b>　　(網(wǎng)站主頁(yè))</b></p><p>

60、　　網(wǎng)站的頁(yè)腳采用了主流的制作方式:</p><p>　　4.2 網(wǎng)頁(yè)部分細(xì)節(jié)的設(shè)計(jì)代碼</p><p>　　關(guān)于輪滑心情這一模塊的自動(dòng)滾動(dòng)代碼如下:</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>　　似乎漫無(wú)目的的，腳步隨著跳動(dòng)的節(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)有這樣的一個(gè)畫面猶如流星般一閃而過(guò)：人群中，一個(gè)跌跌怦怦的身影在晃動(dòng)，像是海浪中搖擺的小船，于是快速的溜了過(guò)去，扶著即將翻到的小船，小船平穩(wěn)的穿過(guò)了突如其來(lái)的人浪，而我也是時(shí)候繼續(xù)自我的陶醉了……<BR></p><p><b>　　<BR></

67、b></p><p><b>　　流動(dòng)的身影<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)過(guò)的地方結(jié)網(wǎng)，然后在角落里靜靜的盼望……<BR></p

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

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

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

73、道在某年某月某日，黃昏時(shí)分，偶然在路上碰見你了，當(dāng)然，你也不會(huì)孤身而行了，不知道你是否注意到了我正從你的對(duì)面走過(guò)，我只知道那一刻，我抬起了頭，挺直了腰，大步的往前走去…… </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>　　(輪滑心情模塊自動(dòng)滾動(dòng))</p><p><b>　　網(wǎng)頁(yè)模版代碼</b></p><p>

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

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