網(wǎng)頁設(shè)計報告樣本

寧波理工學(xué)院寧波理工學(xué)院期末大作業(yè)課程名稱電子商務(wù)網(wǎng)站建設(shè)作業(yè)名稱電子商務(wù)網(wǎng)站前臺頁面設(shè)計報告專業(yè)班級電子商務(wù)121小構(gòu)成員313026范思遠(yuǎn)313024孔維淦313029林錦濤指引教師肖瑋學(xué)院經(jīng)濟與貿(mào)易學(xué)院完畢日期1月13日目錄TOC\o"1-3"\h\z一、項目概述 1（一）設(shè)計內(nèi)容…………………2(二)設(shè)計目…………………2二、市場分析 3（一）行業(yè)背景 3（二）網(wǎng)站定位 4（三）SWOT分析…………..…………..4三、需求分析…………6四、網(wǎng)站整體設(shè)計 6（一）網(wǎng)站風(fēng)格設(shè)計 6（二）欄目設(shè)計 7（三）目錄構(gòu)造設(shè)計 7五、前臺網(wǎng)頁設(shè)計與制作 12(一)頁面布局……………...…12(二)首頁制作………………...12(三)二級頁面制作…………...12（四）內(nèi)容頁面制作……………12六、總結(jié)與展望 13項目概述設(shè)計內(nèi)容本設(shè)計是運用DreamWave軟件建立一種校園體育運動興趣者交流網(wǎng)站，在這個網(wǎng)站上咱們可以實現(xiàn)同校體育興趣者交流、挖掘咱們身邊體育明星、展示校園體育事業(yè)魅力、欣賞運動精彩瞬間等功。設(shè)計目咱們這個校園體育運動網(wǎng)站目就是集合整個校園所有體育運動信息，涉及體育賽事預(yù)告、各類體育運動精彩鏡頭、學(xué)校里各個體育項目體育達(dá)人等各種信息，讓校園里所有運動興趣者更加深刻理解自己學(xué)校體育信息，宣傳帶動全校運動熱潮，也可以讓并未關(guān)注運動同窗理解自己學(xué)校運動信息，感受其魅力，加入到校園運動興趣者人們庭里來。一切精彩運動信息盡在校園體育網(wǎng)。市場分析行業(yè)背景在當(dāng)前網(wǎng)絡(luò)飛速發(fā)展時代，網(wǎng)站應(yīng)用被運用到各個角落，在體育這一領(lǐng)域，各種大型體育網(wǎng)站噴涌而出，如搜狐體育、新浪體育、虎撲網(wǎng)等各種國內(nèi)國外網(wǎng)站，在中華人民共和國幾乎所有體育賽事信息都已經(jīng)被這些大型網(wǎng)站所壟斷，依照有關(guān)數(shù)據(jù)表白中華人民共和國大概有百分之六十人通過上網(wǎng)來關(guān)注體育新聞。看圖一、圖二：圖一、關(guān)注體育信息途徑人數(shù)比例分析圖圖二、中華人民共和國興趣體育與不興趣體育、比關(guān)注體育人數(shù)比例圖從圖一咱們可以看出當(dāng)前大某些中華人民共和國人都是運用網(wǎng)絡(luò)來獲取各類體育信息，而從圖二咱們可以看出在中華人民共和國興趣體育人數(shù)是非常多，換而言之，有諸多人也許會運用網(wǎng)絡(luò)來關(guān)注體育信息。從這兩張分析圖咱們可以懂得，中華人民共和國有諸多人關(guān)注體育，有諸多人通過體育網(wǎng)站來關(guān)注體育，這就是體育網(wǎng)站這個行業(yè)背景。網(wǎng)站定位咱們校園體育網(wǎng)重要建立目是為校園內(nèi)所有體育興趣者、或關(guān)注體育人服務(wù)，為她們提供校園內(nèi)最專業(yè)、最全面、最新鮮、最精彩體育信息，在這個網(wǎng)站上，咱們要實現(xiàn)校園體育信息共享化、公開化、全面化，每個人都能得到自己想懂得體育賽事、體育人物信息。讓各類運動興趣者有一種網(wǎng)上交流平臺，盡情討論、交流、交友等活動。在此基本上，咱們也會設(shè)立專門廣告招商欄目，尋找增自己贊助商，一次來獲取一定收益。咱們網(wǎng)站定位就是覺得校園運動興趣者提供體育信息為主，同步尋找贊助商獲取利益為輔公眾信息平臺。SWOT分析優(yōu)勢分析咱們建立是一種大學(xué)專屬校園體育網(wǎng)，相比那些大型體育網(wǎng)站咱們有著屬于自己優(yōu)勢，第一，咱們建立是小型體育網(wǎng)站，要解決數(shù)據(jù)，要設(shè)計內(nèi)容相比那些大型網(wǎng)站來說要簡樸多，咱們網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站前期成本投入少，技術(shù)規(guī)定低，好做、容易做，風(fēng)險性相對來說非常低、這可以讓咱們大膽去做。第二，咱們校園體育網(wǎng)覆蓋范疇小，每一種都是一種大學(xué)獨立網(wǎng)站，意味著它基本宣傳范疇、應(yīng)用范疇等只是一種學(xué)校而已，并不是全國乃至全世界性。它宣傳范疇小，難度低，讓一種大學(xué)里人懂得這個網(wǎng)站方式多要，但難度低，容易操作，宣傳所需時間短，回報快。劣勢分析正如上文所述，當(dāng)前許多體育興趣者都是通過這些大型體育網(wǎng)站來關(guān)注體。信息，而咱們校園體育網(wǎng)宣傳范疇也只是在一種小小學(xué)校而已。宣傳出去容易，但被不被接受就是此外一回事，通過這些大型體育網(wǎng)來理解體育信息已經(jīng)是她們尋常生活了。咱們最大劣勢就是無法容易讓咱們網(wǎng)站在學(xué)生腦海里占據(jù)一席之地。咱們機遇當(dāng)前中華人民共和國體育事業(yè)正處在穩(wěn)步發(fā)展階段，而作為整體一小某些，大學(xué)生體育事業(yè)也是如此，越來越多大學(xué)生不但僅滿足于關(guān)注大型體育新聞，開始去關(guān)懷身邊校體育新聞，但缺少專業(yè)公共信息平臺。咱們校園體育網(wǎng)就是專門為其打造，這是咱們機遇。咱們面臨挑戰(zhàn)在咱們此類型網(wǎng)站浮現(xiàn)之前，學(xué)生獲取學(xué)校體育信息途徑大體有如下三種：第一，通過校園官網(wǎng)上體育這一欄目。第二，通過校園公示欄來理解。第三，學(xué)生之間口頭傳述。這三類途徑就是咱們挑戰(zhàn)，咱們要把她們所有取締，一家獨大。需求分析校園體育網(wǎng)站建立解決了許多人需求，她為諸多人在獲取先關(guān)信息時候提供應(yīng)協(xié)助。學(xué)生需求有諸多學(xué)生缺少獲取體育信息途徑，從而導(dǎo)致她熱情無處揮發(fā)，減少對體育熱愛。她們也許由于無法懂得自己熱愛項目比賽信息而著急，也許由于無法理解自己所仰慕體育達(dá)人二苦惱，她們?nèi)鄙龠@樣一種公眾平臺，需要這種平臺來滿足她們需求。教師需求學(xué)校在各個體育項目中均有自己校隊，有時學(xué)校也許會晤臨專業(yè)人才缺少狀況，她們需要有潛力人來參加這個隊伍，這個是體育教師任務(wù)，在現(xiàn)實中教師很難找到最適當(dāng)人才，或者也許錯過最佳人才，那她們就需要此類平臺來提供有關(guān)信息，協(xié)助她們挑選出最佳人才。網(wǎng)站整體建設(shè)網(wǎng)站風(fēng)格設(shè)計咱們校園體育網(wǎng)站是體育類網(wǎng)站，風(fēng)格自然要與體育掛鉤。體育運動是激情澎湃，是布滿魅力，但是體育信息是繁瑣，為了能讓顧客迅速地找到自己想要信息，咱們校園體育網(wǎng)網(wǎng)站風(fēng)格采用了簡樸明了風(fēng)格，頁面整體使用了以白色和灰色為主色調(diào)，讓人看了不煩亂。欄目設(shè)計咱們校園體育網(wǎng)站風(fēng)格是簡潔明白，目是為了讓顧客立即找到想要找信息。而咱們欄目設(shè)計也是往這個方面構(gòu)思。整個網(wǎng)頁欄目共分為六個方面：主頁、咱們故事、照片墻、咱們榮譽、新聞、聯(lián)系咱們。主頁：進(jìn)入網(wǎng)站第一種網(wǎng)頁包括某些簡略網(wǎng)站信息，如學(xué)校體育事業(yè)簡述、學(xué)校體育賽事預(yù)告、少量體育校隊合照。主頁是進(jìn)入其她子頁渠道，因而她也包括了涉及自己在內(nèi)其她五個子頁欄目。關(guān)于咱們：這個頁面簡介了學(xué)校各個體育校隊大合照以及它們有關(guān)簡介。照片墻：里面包括了許多精彩照片，有精彩體育賽事照片集錦，有學(xué)校知名體育達(dá)人個人照片，和體育關(guān)于照片都在這里。咱們榮譽：這里重要是記錄了校隊、各個院隊運動員在各種賽事獲得各個獎項榮譽。新聞：記錄學(xué)校每天發(fā)生在體育界有趣、重要體育信息。聯(lián)系咱們；為每個顧客提供協(xié)助聯(lián)系地方，顧客可以在這里發(fā)郵件給咱們，或是問問題，或是提供素材。目錄構(gòu)造設(shè)計先設(shè)立一種大文獻(xiàn)夾，在這個文獻(xiàn)夾下面設(shè)立JS、IMAGE、CSS這三個文獻(xiàn)目錄和主頁等其她五個子頁。Js文獻(xiàn)夾存儲JavaScript程序，image存儲建設(shè)網(wǎng)站所需各種照片，在里面尚有一種文獻(xiàn)也是存儲照片，這些是某些案件照片（目是為了操作時候以便某些），css存儲對全局某些頁面定義。前臺網(wǎng)頁制作與設(shè)計頁面布局校園體育網(wǎng)站頁面布局大體分為上、中、下三某些，比例為2:7：1，上某些是包括Logo和欄目這兩某些，中某些涉及學(xué)校體育簡介，比賽預(yù)告，照相素材征集，以及若干圖片。下某些這涉及了版權(quán)欄和有關(guān)鏈接網(wǎng)址。其中中間某些還被劃分了一下。中間某些橫方向以一比一比例分割為兩塊，再將下面某些縱方向以三比二比例分開，上面是學(xué)校事業(yè)簡介，下面左邊（五分之三某些）是照相素材征集，右邊（五分之二某些）是賽事預(yù)告。首頁制作1、頭部制作頭部某些是logo和欄目兩個方面，可以使用潛逃在head層兩個DIV層，其構(gòu)造如下：之后對這兩某些進(jìn)行大小、顏色排列和ciss定義設(shè)立。值得注意是在頭部張圖片中設(shè)立立體旋轉(zhuǎn)功能，這是運用了css定義。2、主體某些制作主體某些一白色為重要背景色，加上灰色來輔助，白色某些是學(xué)校體育事業(yè)簡介，放一張代表學(xué)校標(biāo)志性建筑----圖書館，下面某些是照相素材征集和賽事預(yù)告，這兩個是以灰色為背景色，也加入了一張照片來讓布局更加美觀合理。照片某些用了最簡樸插入，也是用div引導(dǎo)：背景設(shè)定中可以輸入如下代碼：其她某些就是某些簡樸文字輸入：3.尾部設(shè)計最后尾部設(shè)計很簡樸只有一種有關(guān)鏈接網(wǎng)站就好了，最后就是整個網(wǎng)頁結(jié)尾，其代碼和生成圖為：二級頁面制作二級頁面是主頁分支，是從屬關(guān)系，網(wǎng)站二級頁面與主頁是統(tǒng)一風(fēng)格，咱們校園網(wǎng)站它二級頁面和主頁在投不方面是同樣，相似logo和欄目，不同是下面主體，主頁是各個欄目小模塊，而二級頁面就是把這些模塊內(nèi)容詳細(xì)化,如下圖：主頁頭部：子頁頭部：她們頭部內(nèi)容是同樣。但是主體不同樣，子頁主體頁面和其代碼是：咱們校園體育網(wǎng)站風(fēng)格是統(tǒng)一，首頁為第一級別，子頁為第二級別，兩者是從屬關(guān)系，就像上述說同樣，兩者在一某些上都是相似，因而，可以把這些相似內(nèi)容做成一種文獻(xiàn)，例如導(dǎo)航和主體是同樣，就可以做成index.html文獻(xiàn)，內(nèi)容底部每個頁面也均有這個相似某些，就可以做成botton.html文獻(xiàn)。做好這些文獻(xiàn)后，再做其她文獻(xiàn)頁面時候，就不需要重新布局，而是在動態(tài)頁面中用include包括就可以了。使用include包括文獻(xiàn)辦法更加有助于網(wǎng)站維護(hù)，大大節(jié)約了技術(shù)成本。內(nèi)容頁面制作每一種欄目代表一種子頁面，每一種子頁面均有她專屬內(nèi)容，她們內(nèi)容都不同樣，有代碼也有些不同。例如新聞頁面內(nèi)容和代碼是：而照片墻內(nèi)容與代碼是：兩者代碼中對圖片修飾，有只是但單純設(shè)立大小，有這直接用div來定義，時圖片可以放大旋轉(zhuǎn)?？偨Y(jié)與展望通過制作校園體育網(wǎng)和做它網(wǎng)頁分析報告咱們總結(jié)一下結(jié)論：建立一種先進(jìn)網(wǎng)站頁面需要夯實硬實力，高水準(zhǔn)網(wǎng)頁制作水平，才干把自己想全面完美用網(wǎng)頁展示出來。網(wǎng)站建設(shè)需要闖時間積累，從最初市場分析到實踐操作，再到網(wǎng)站調(diào)試檢測，