極限健身俱樂部網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)課程設(shè)計(jì)報(bào)告書

1、 .PAGE29 / NUMPAGES29 .工程技術(shù)師學(xué)院設(shè)計(jì)與建設(shè)課程設(shè)計(jì)報(bào)告設(shè)計(jì)題目： 極限健身俱樂部設(shè)計(jì) 2011年12月信息工程學(xué)院摘 要隨著生活的日益發(fā)展，人們的生活水平也不斷提高，健身房也是很多年輕人青睞的地方，不但可以強(qiáng)身健體，還能豐富業(yè)余生活。健身俱樂部作為專業(yè)的健身辦事行業(yè)，已經(jīng)越來越受到人們的青睞。隨著自身的圍不絕擴(kuò)大，客戶數(shù)量也不斷增多。由于本人愛好運(yùn)動(dòng)，所以選折為俱樂部設(shè)計(jì)，運(yùn)用網(wǎng)頁設(shè)計(jì)這門課程所學(xué)的基礎(chǔ)知，實(shí)現(xiàn)了將靜態(tài)網(wǎng)頁與各種特效效果相結(jié)合。例如：網(wǎng)頁中插入flash動(dòng)畫，增加網(wǎng)頁生動(dòng)性，還運(yùn)用圖層、字幕滾動(dòng)等特效使網(wǎng)頁色彩搭配協(xié)調(diào)，看起來很舒服。在理論和技術(shù)的基

2、礎(chǔ)上，能夠掌握網(wǎng)絡(luò)環(huán)境中設(shè)計(jì)和建設(shè)的應(yīng)用技術(shù)。通過課程設(shè)計(jì)的過程，加深了對(duì)理論知識(shí)的理解和技術(shù)的運(yùn)用，加強(qiáng)了個(gè)人的分析問題、解決問題、設(shè)計(jì)實(shí)施 方案的能力，并掌握多門知識(shí)的運(yùn)用，加強(qiáng)了個(gè)人專業(yè)技能的提高。該網(wǎng)頁風(fēng)格設(shè)計(jì)簡(jiǎn)明清晰。容豐富、操縱輕便、界面雅觀?；緷M足俱樂部實(shí)際的需要。關(guān)鍵字：俱樂部 設(shè)計(jì) 容豐富 flash目 錄第一章 緒論4 1.題目的背景4 1.題目的意義5 1.結(jié)構(gòu)設(shè)計(jì)5第二章 技術(shù)設(shè)計(jì)功能分析6 2.1 功能分析6 2.2 技術(shù)設(shè)計(jì)分析6第三章 總體設(shè)計(jì)與詳細(xì)設(shè)計(jì)7 3.1 總體設(shè)計(jì)9 3.2 結(jié)構(gòu)分析10 3.3 詳細(xì)設(shè)計(jì)14第四章 編碼實(shí)現(xiàn)15第五章 系統(tǒng)調(diào)試20 5

3、.1 調(diào)試遇到的問題21第六章 總結(jié)與心得22附錄： 參考資料22緒論1.1題目的背景經(jīng)過近幾年的觀察，健身房成為許多中年人和年輕朋友們比較喜歡的娛樂場(chǎng)所，既能娛樂又能保持身體健康。致使越來越多的人去健身房，如學(xué)生、上班一族、中年人、老年人。這是一個(gè)非常好的現(xiàn)象，因?yàn)樵絹碓蕉嗟娜硕枚噱憻挘賹?duì)點(diǎn)電腦，可以利用這些時(shí)間多做運(yùn)動(dòng)，放松心情，還能減輕壓力，達(dá)到減肥的目的。大多數(shù)女同志們?nèi)ソ∩矸康闹苯幽康氖菫榱藴p肥，隨著健身設(shè)施的增加，減肥的方式也變的多樣，并不像以前只是跑步來減肥，現(xiàn)在很多女孩子最喜歡的減肥方法就是瑜伽，既能減去贅肉，還能美化身體線條。是女生首選的運(yùn)動(dòng)項(xiàng)目。 而男生們大多數(shù)是為了增

4、強(qiáng)體質(zhì)，增加自己的肌肉感，使身材看起來更有型一些，當(dāng)然，除了健身方面的原因，還有一個(gè)原因是現(xiàn)在很多年輕人把去健身房當(dāng)作一個(gè)很好的交際場(chǎng)所，他們可以借此機(jī)會(huì)結(jié)交一些朋友，擴(kuò)展自己的交際圈，平時(shí)也可以和大家組織一些群體活動(dòng)。而老人去健身房的主旨是為了鍛煉身體，很多老人不再只是散散步，打打拳之類的，他們也追隨年輕人的運(yùn)動(dòng)方式，偶爾去去健身房。 介于健身房如此火熱，我這次的選題就是為健身房設(shè)計(jì)的。極限健身俱樂部是我所知比較有代表性的俱樂部，其市環(huán)境優(yōu)雅，服務(wù)到位，健身設(shè)施齊全，適合男女老少各個(gè)年齡的人們到來，為了大家更好的了解極限健身俱樂部，我已以的形式向大家展示。相信大家一定會(huì)更了解極限健身俱樂部。

5、更多朋友也會(huì)被它吸引。1.2 題目的意義 通過本，希望更多的人了解健身的意義，不僅僅是娛樂，也并不僅僅只是達(dá)到減肥的目的，更多的是從中我們會(huì)獲得快樂，還能增強(qiáng)自身的體質(zhì)，更能和更多的人成為朋友，希望大家能把上網(wǎng)玩游戲，看電影的時(shí)間多一點(diǎn)用來健健身。何嘗不是一個(gè)更好的選折呢。1.3 結(jié)構(gòu)設(shè)計(jì) 論文的結(jié)構(gòu)分為六部分，從背景介紹到功能分析，從總體設(shè)計(jì)到編碼實(shí)現(xiàn)部分，最后是系統(tǒng)調(diào)試與總結(jié)，論文主要是圍繞我制作的分步介紹，而的結(jié)構(gòu)是由一個(gè)主頁到九個(gè)子頁構(gòu)成的，每一頁的容都是獨(dú)立又與其他頁保持聯(lián)系的，主頁是一個(gè)最主要的部分，要想做好一個(gè)必須首先做好一個(gè)主頁，給人新穎的感覺才能吸引人們的眼球，我的主頁選折的

6、是清新淡雅的顏色，因?yàn)檫\(yùn)動(dòng)本身就是給人感覺悠閑、自由的，所以顏色清淡更能讓人心感覺放松，愉悅。主頁我選用極限健身俱樂部的招牌健身運(yùn)動(dòng)，瑜伽作為主頁的圖片。也相應(yīng)給出其他健身項(xiàng)目的圖片，不要給人單調(diào)的感覺。 第一個(gè)子頁分別介紹了俱樂部都有哪些健身項(xiàng)目，給人一目了然的視覺效果，第二個(gè)子頁是對(duì)極限健身俱樂部的介紹，該頁插入flash動(dòng)畫效果，讓人在閱讀資料的過程中不會(huì)感到枯燥，動(dòng)態(tài)的效果更能吸引人的眼球。第三頁是對(duì)各個(gè)健身項(xiàng)目的簡(jiǎn)介，讓前來參觀極限健身俱樂部的顧客更多的了解俱樂部的各種運(yùn)動(dòng)設(shè)施，和他們各自的功能，相信一定會(huì)有一項(xiàng)運(yùn)動(dòng)適合您的。 的第四個(gè)子頁體現(xiàn)的是極限健身俱樂部的新聞頁，上面顯示了俱

7、樂部的最新動(dòng)態(tài)，近期做過哪些活動(dòng)，并且有什么優(yōu)惠方便大家。第五個(gè)子頁是客戶服務(wù)頁，方便大家有什么問題可以與時(shí)與我們聯(lián)系。第六頁專門介紹了俱樂部的頂級(jí)教練員，詳細(xì)介紹教練信息，讓大家更多的了解，方便提前預(yù)約教練。第七頁給出了俱樂部的詳細(xì)地址和聯(lián)系方式，方便大家很容易找到俱樂部。第八頁展示了俱樂部的招牌運(yùn)動(dòng)項(xiàng)目，讓顧客了解我俱樂部目前的趨勢(shì)動(dòng)態(tài)，方便給您更好的建議。最后一頁是在線留言頁，顧客可以二十四小時(shí)聯(lián)系我們?cè)诰€的顧問，隨時(shí)咨詢您不懂的問題，也希望大家多多提出寶貴意見。第二章 技術(shù)設(shè)計(jì)功能分析2.1功能分析本是瀏覽健身俱樂部，以圖片和Flash動(dòng)畫欣賞為主，包含了少量的文字。以圖片為主，圖片更

8、能很好的體現(xiàn)俱樂部的特征。主要由首頁，圖片和Flash動(dòng)畫組成，首頁包括圖片和Flash按鈕。還運(yùn)用文字滾動(dòng)字幕實(shí)現(xiàn)了動(dòng)態(tài)的效果。訪問起來簡(jiǎn)單方便。網(wǎng)頁風(fēng)格統(tǒng)一，色彩基本一致，看似舒服自然。將自己的風(fēng)格、愛好從整個(gè)網(wǎng)頁中表現(xiàn)出來。該網(wǎng)頁主要靜態(tài)網(wǎng)頁為主，但個(gè)別子頁也加入flash動(dòng)畫增加動(dòng)態(tài)效果。加強(qiáng)網(wǎng)頁的活力性，靜而不死板。個(gè)別子頁使用框架集制作，還集合了模版頁的功能。子頁中還運(yùn)用圖層，表單等。2.2 技術(shù)設(shè)計(jì)分析本網(wǎng)頁的制作可利用的操作系統(tǒng)如Windows XP，Linus系統(tǒng)，Unix系統(tǒng)等等。 制作本網(wǎng)頁的主要工具是利用Dreamweaver和fash等設(shè)計(jì)軟件與html編寫。 本網(wǎng)頁

9、圖片的與色彩的搭配都是用Photoshop、fierwork等制圖軟件美化出來的，不同的子頁，不同的背景，Photoshop都把它們渲染的淋漓盡致。 另外flash基于矢量，所以還有以下特點(diǎn)：第一，普與性強(qiáng)，flash軟件操作界面簡(jiǎn)單易懂可以充分發(fā)揮自己的創(chuàng)造力。第二，互動(dòng)性強(qiáng)，多媒體和交互性強(qiáng)大。第三，通用性好，在各類瀏覽器中樣式統(tǒng)一，在沒有安裝插件的系統(tǒng)里，可以使用JAVA或動(dòng)態(tài)GIF89a來運(yùn)行?；谝陨系膬?yōu)點(diǎn)，網(wǎng)頁制作過程充分使用了flash與Photoshop等軟件。第三章 總體設(shè)計(jì)與詳細(xì)設(shè)計(jì)3.1總體設(shè)計(jì) 設(shè)計(jì)圖如：鏈接各子頁導(dǎo) 航 條首 頁咨 詢 方 式俱樂部新聞圖 片 區(qū)健身項(xiàng)

10、目展示最 新 動(dòng) 態(tài)詳 細(xì) 地 址圖31 主頁總體結(jié)構(gòu)圖3.2 結(jié)構(gòu)設(shè)計(jì)首頁健身項(xiàng)目俱樂部簡(jiǎn)介項(xiàng)目簡(jiǎn)介俱樂部新聞聯(lián)系我們售后服務(wù)教練員簡(jiǎn)介其他在線留言極限健身俱樂部網(wǎng)站導(dǎo)航圖32 子頁結(jié)構(gòu)設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)思路是進(jìn)入主頁后會(huì)看到上方相應(yīng)的導(dǎo)航條，子頁共設(shè)為九個(gè)部分，可因個(gè)人喜好習(xí)慣進(jìn)入自己想要參觀的網(wǎng)頁，參觀者可任意選折進(jìn)入。3.3 詳細(xì)設(shè)計(jì) 主頁以與相關(guān)子頁截圖如下：主頁如圖所示 主頁設(shè)計(jì)風(fēng)格主頁以熱門健身項(xiàng)目為主，例如：瑜伽等主打運(yùn)動(dòng)項(xiàng)目，讓顧客了解我俱樂部目前的趨勢(shì)，頁面色彩搭配協(xié)調(diào)，以淡色為主，紅色部分較為顯眼，目的是吸引參觀者的眼球，上面有注明俱樂部特色，會(huì)員風(fēng)采，減肥訓(xùn)練立即加入等字樣

11、。導(dǎo)航前加入flash按鈕使網(wǎng)頁多樣化，導(dǎo)航上面設(shè)有滾動(dòng)字樣，使網(wǎng)頁整體效果富有活力性。白色滾動(dòng)字樣更能吸引顧客的注意力，紅色區(qū)域上是俱樂部近期做過的各種活動(dòng)，和即將要組織的活動(dòng)，以與最新的動(dòng)態(tài)，希望顧客與時(shí)參與。子頁1如圖 該頁體現(xiàn)的的主體是主要項(xiàng)目的具體介紹，如俱樂部主打的幾項(xiàng)運(yùn)動(dòng)，有瑜伽、大眾健身操、動(dòng)感單車、街舞、羽毛球、健美操等。這幾項(xiàng)運(yùn)動(dòng)是目前本俱樂部開展的最受歡迎的幾項(xiàng)運(yùn)動(dòng)，能很好的體現(xiàn)俱樂部與時(shí)俱進(jìn)、抓住現(xiàn)在年輕人的心理，開展各項(xiàng)大眾喜愛的健身項(xiàng)目，吸引顧客前來親身體驗(yàn)。旁邊列舉了俱樂部的一些其他健身項(xiàng)目，如拉丁舞，搏擊健美操等。種類多樣，適合青年，中年，老年的各種健身器材，頁

12、面色調(diào)簡(jiǎn)單，沒有加入太多的色彩，因?yàn)槲覀€(gè)人感覺運(yùn)動(dòng)的顏色就是白色甚至是透明，是無色的，喜歡運(yùn)動(dòng)的人會(huì)從中找到快樂，懂得運(yùn)動(dòng)的人在運(yùn)動(dòng)之后不會(huì)感覺疲憊，而是大汗淋漓后的輕松，會(huì)感到身心愉悅，輕松自在，我個(gè)人感覺運(yùn)動(dòng)是神奇的，有時(shí)會(huì)從中找到自信，也會(huì)鍛煉人的意志力。我建議大家都根據(jù)自身情況做適合自己的運(yùn)動(dòng)項(xiàng)目。生命在于運(yùn)動(dòng)是很有道理的。 子頁2如圖所示本頁是健身項(xiàng)目，設(shè)計(jì)的思想是頁面設(shè)計(jì)不要太復(fù)雜，既然只是讓顧客知道極限健身俱樂部都有哪些運(yùn)動(dòng)項(xiàng)目，就要直入主題，避免一些無用的東西，以免顧看看起來不舒服，覺得啰嗦還沒有達(dá)到自己的目的，本頁我加入flash動(dòng)畫配合本頁，看起來非常搭配，顏色也很符合，而

13、且加上是動(dòng)態(tài)的效果，還是一個(gè)球體在上下運(yùn)動(dòng)，可謂是恰到好處。就像健身球一樣，有著動(dòng)感的元素，中間是各項(xiàng)運(yùn)動(dòng)項(xiàng)目列表，有健身球、網(wǎng)球、動(dòng)感單車、瑜伽、羽毛球、跑步機(jī)、健美操。當(dāng)然還有很多項(xiàng)目不能一一列舉，置導(dǎo)航，可供顧客自行進(jìn)入更多了解。 子頁3如圖所示本頁是客戶服務(wù)頁，專為客戶設(shè)置，為方便客戶更好的聯(lián)系我們，如遇到任何問題可以與時(shí)與我們溝通保持聯(lián)系，我們會(huì)盡最大能力幫助解決困難。頁面簡(jiǎn)單清晰，導(dǎo)航還設(shè)置其他服務(wù)項(xiàng)目，例如高級(jí)教練、專業(yè)顧問、相關(guān)咨詢等服務(wù)項(xiàng)目。 子頁4如圖所示 本頁主要容是本俱樂部高級(jí)健身教練簡(jiǎn)介，為方便客戶能第一時(shí)間預(yù)約到適合自己的教練，該頁體現(xiàn)的是俱樂部具代表性的高級(jí)教練，

14、他主要以健美操為主，曾經(jīng)獲國(guó)家健美操比賽第二名，是眾多顧客最喜歡的教練之一，所以現(xiàn)想要找他作為自己的私人教練必須提前預(yù)約，為客戶更了解該教練，在此特設(shè)計(jì)此頁，該頁運(yùn)用鼠標(biāo)滑過圖像等小特效，當(dāng)鼠標(biāo)滑過一圖片會(huì)顯示另一圖片，雖然簡(jiǎn)單，但看起來效果還不錯(cuò)，是網(wǎng)頁不可缺的特效之一。 子頁5如圖所示 本頁是這次設(shè)計(jì)的最后一頁，也是用戶留言頁，設(shè)計(jì)風(fēng)格與前幾頁相似，都是以淡色為主，本頁運(yùn)用表單中的按鈕和文本域等功能，設(shè)計(jì)以簡(jiǎn)潔為主，作用是方便用戶與時(shí)留言，提出寶貴的意見。第四章 編碼實(shí)現(xiàn)主要編碼實(shí)現(xiàn)： 首頁 健身項(xiàng)目 俱樂部簡(jiǎn)介 項(xiàng)目簡(jiǎn)介 俱樂部新聞 Flash動(dòng)畫 實(shí)現(xiàn)代碼如下： Flash 按鈕代碼如

15、下： 層代碼如下： 字幕滾動(dòng)代碼如下： 歡迎光臨極限健身俱樂部！歡迎您踴躍報(bào)名，多一點(diǎn)運(yùn)動(dòng)，多一份健康！ 表單代碼如下： ： 留言容： 第五章 系統(tǒng)調(diào)試5.1 調(diào)試過程中遇到的問題 1設(shè)計(jì)困難 制作之前必須先要構(gòu)思清楚，自己想要做什么風(fēng)格和主題的，而這個(gè)看似簡(jiǎn)單的問題其實(shí)很復(fù)雜，也是最關(guān)鍵的部分，主要設(shè)計(jì)思路清晰，就可以按照計(jì)劃進(jìn)行，但恰恰萬事開頭難，主頁的設(shè)計(jì)讓我花費(fèi)很長(zhǎng)時(shí)間，當(dāng)設(shè)計(jì)好主頁，掌握方向后，便順利了很多。 2. 首頁失敗制作過程中不知道什么原因，一開始只是插圖的時(shí)候出現(xiàn)問題，但卻無法進(jìn)行下去，導(dǎo)致前半部分白做了，又從頭開始做的。3.圖層運(yùn)用不當(dāng) 圖層使用起來還是有很多問題的，例如

16、，圖片位置不對(duì)，擋住了部分文字，只能回到設(shè)計(jì)頁面重新調(diào)整，一開始很難一次成功的，必須要進(jìn)行多次修改才能達(dá)到自己理想的效果。4.布局掌握不準(zhǔn)確 設(shè)計(jì)中并沒有使用大量布局設(shè)計(jì)，原因是使用不是很理想，總是搞不清自己要用多大的空間，總是不恰當(dāng)，導(dǎo)致只在一個(gè)子頁中使用布局功能?？赡苁且婚_始學(xué)習(xí)表格習(xí)慣了，不習(xí)慣用布局做的原因。后面的都是以表格為主設(shè)計(jì)。5.路徑出錯(cuò) 做的過程中曾出現(xiàn)連接出錯(cuò)，找不到要的容，后來仔細(xì)檢查改正過來，網(wǎng)頁正常運(yùn)行。第六章 總結(jié)與心得 經(jīng)過本學(xué)期的學(xué)習(xí)，我學(xué)會(huì)了網(wǎng)頁制作這門課程，網(wǎng)頁在日常生活中運(yùn)用非常的廣泛，學(xué)好這門課，對(duì)我們是有很大幫助的，這學(xué)期經(jīng)過王少華老師詳細(xì)的講解這門課

17、程，我真的從中學(xué)到了很多關(guān)于網(wǎng)頁制作的知識(shí)。感王老師的認(rèn)真教導(dǎo)。們堂課老師講解的都很詳細(xì)，很透徹，還拓展一些書本沒有的知識(shí)。同時(shí)也少不了課設(shè)指導(dǎo)老師的幫助，為我們收集相關(guān)資料，方便我們更好的完成課設(shè)。課程設(shè)計(jì)是培養(yǎng)學(xué)生綜合運(yùn)用所學(xué)知識(shí)發(fā)現(xiàn)提出分析和解決實(shí)際問題，鍛煉實(shí)踐能力的重要環(huán)節(jié)，是對(duì)學(xué)生實(shí)際工作能力的具體訓(xùn)練和考察過程，.隨著科學(xué)技術(shù)發(fā)展的日新月異，當(dāng)今計(jì)算機(jī)應(yīng)用在生活中可以說得是無處不在。因此作為二十一世紀(jì)的大學(xué)來說掌握計(jì)算機(jī)開發(fā)技術(shù)是十分重要的。回顧起此次課程設(shè)計(jì)，至今我們?nèi)愿锌H多，從理論到實(shí)踐，在整整半個(gè)學(xué)期的日子里，可以學(xué)到很多很多的東西，同時(shí)不僅可以鞏固了以前所學(xué)過的知識(shí)，而且學(xué)到了很多在書本上所沒有學(xué)到過的知識(shí)。通過這次課程設(shè)計(jì)使我們懂得了理論與實(shí)際相結(jié)合是很重要的，只有理論知識(shí)是遠(yuǎn)遠(yuǎn)不夠的，只有把所學(xué)的理論知識(shí)與實(shí)踐相結(jié)合起來，從理論中得出結(jié)論，才能真正為社會(huì)服務(wù)，從而提高自己的實(shí)際動(dòng)手能力和獨(dú)立思考的能力。在設(shè)計(jì)的過程中遇到問題，可以說得是困難重重，但難