靜態(tài)網(wǎng)站實訓報告

南京工業(yè)職業(yè)技術(shù)學院綜合項目實訓報告靜態(tài)網(wǎng)站實訓課題名稱噬魂神域動漫網(wǎng)站的設計與開發(fā)院系計算機與軟件學院專業(yè)網(wǎng)絡營銷班級電商1311學號1302693111學生姓名錢雨指導教師：田小敏2014年6月19日

目錄第一章緒論 11.1網(wǎng)站開發(fā)背景 11.2網(wǎng)站開發(fā)目的 11.3網(wǎng)站內(nèi)容 2第二章網(wǎng)站總體分析 32.1網(wǎng)站功能分析 32.2網(wǎng)站技術(shù)分析 32.2.1實訓操作環(huán)境 32.2.2網(wǎng)站技術(shù)介紹 3第三章網(wǎng)站總體設計 63.1網(wǎng)站總體框架圖 6第四章網(wǎng)站詳細設計 74.1網(wǎng)站操作流程 74.2主要功能模塊 104.3主要頁面介紹 144.4部分代碼展示 17致謝 19個人小結(jié) 21共23頁第22頁 第一章緒論1.1網(wǎng)站開發(fā)背景實訓要求，上學期我們學了網(wǎng)頁設計。將所學到的運用到實踐上。其次，本人特別喜歡看日本動漫，對網(wǎng)站也很感興趣，好的動漫網(wǎng)站可以讓動漫愛好者快速的找到自己喜歡的動漫。隨著經(jīng)濟，人民生活水平的提高，再加上網(wǎng)絡的快速發(fā)展，上網(wǎng)已經(jīng)成為普遍現(xiàn)象，而然中國龐大的人口，可以說幾乎每個人都看過動漫，通過網(wǎng)絡觀看動漫是一個趨勢，動漫網(wǎng)站有很大的前景和市場。1.2網(wǎng)站開發(fā)目的近年來，隨著一大批動漫作品的出現(xiàn)，越來越多的人開始接觸和喜歡動漫，帶動著全球的動漫熱潮。動漫的受眾人群，也從最初的青少年人群，逐步擴展到社會各個階層，不僅小孩子、學生和時尚青年熱衷于動漫，許多社會中堅階層也認識到動漫的魅力，融入到愛好動漫的群體。一大批動漫形象代替了部分真人明星的位置，成為了新時代眾多人的偶像，聰明可愛的喜洋洋，荒誕搞笑的灰太狼，機智勇敢的花木蘭，神通廣大的鐵臂阿童木……，動漫的影響力在幾年之內(nèi)迅速攀升，已經(jīng)成為我們這個時代流行文化的一種典型代表之一。動漫藝術(shù)的流行，是人類社會發(fā)展的必然。人類傳播信息的手段，從最初的簡單構(gòu)圖，到象形文字，再到文字和圖片，直到今天的動態(tài)影像，是一步步從簡單到復雜，從單一到多元化發(fā)展而來。今天的動態(tài)影像，包含了文字、聲音、二維圖像、三維圖像、動態(tài)變化，還有最新的互動交互性、觸摸感應和虛擬技術(shù)等科學技術(shù)的應用，使得今天的信息傳播擁有無比豐富的信息量和便捷的應用操作性。隨著我國經(jīng)濟的發(fā)展和人們消費觀念的更新，對動漫影視作品及其周邊產(chǎn)品的需求會得到進一步的提升。國內(nèi)動漫的匱乏現(xiàn)狀與少年兒童及其強烈的消費需要之間的矛盾是巨大的，其所帶來的商業(yè)空間也無疑將是巨大的！無論是投資巨大的動漫產(chǎn)業(yè)還是中小型動漫周邊產(chǎn)品的經(jīng)營，在未來的幾年里，肯定會獲得越來豐厚的回報！通過各地的動漫展覽情況來看，動漫市場無限廣闊，動漫行業(yè)是充滿商機與無限誘惑的，而今，點點星火正以燎原之勢在蔓延，不但各種動漫受到人們的喜愛，而且各式各樣的動漫圖書的發(fā)行和動漫節(jié)的舉辦也在不斷掀起陣陣動漫風暴。動漫網(wǎng)站有很大的市場，一個條理清晰的動漫網(wǎng)站更能吸引動漫愛好者。更能站穩(wěn)腳步，持久發(fā)展。1.3網(wǎng)站內(nèi)容噬魂神域動漫網(wǎng)匯集國內(nèi)、日韓、歐美、新馬泰動畫片于一體，按清晰的劇情分類供漫迷選擇性的觀看，其中包含熱血、機戰(zhàn)、運動、推理、冒險、耽美、搞笑、戰(zhàn)爭、神魔、忍者、競技、懸疑、社會、戀愛、寵物、蘿莉、吸血鬼、美少女類型動畫片！每部動漫都會作有詳細的介紹例：主角、作者、海報、出品地區(qū)、出品時間、劇情介紹、故事情節(jié)、都會一一作出注明，讓動漫迷對于想要看的動畫片有個初步的了解！噬魂神域動漫設立了觀眾喜愛的動漫專題，例如：火影忍者，海賊王，死神，柯南，奧特曼，家庭教師，網(wǎng)球王子等等熱門動漫專題[噬魂神域動漫網(wǎng)官方博客與微博，每天都會有更新大量的動漫資訊，動畫短片以及一些動漫周邊的新聞供大家一起分享??！第二章網(wǎng)站總體分析2.1網(wǎng)站功能分析（1）收藏網(wǎng)站功能點擊收藏本站按鈕就可以把噬魂神域動漫網(wǎng)放在收藏夾里，方便下次瀏覽網(wǎng)站。(2)實時播報功能最近更新，噬魂神域動漫網(wǎng)隨時都有最新的動漫資訊和更新的動漫，可以讓大家第一時間了解動漫的最新動態(tài)。（3）站內(nèi)搜索功能站內(nèi)搜索是指在噬魂神域動漫網(wǎng)站內(nèi)點擊搜索任意存在的動漫的名字，將會出現(xiàn)相應的動漫視頻?！?.2網(wǎng)站技術(shù)分析2.2.1實訓操作環(huán)境建網(wǎng)站的主機系統(tǒng)環(huán)境一般有兩種，就是windows和linus，不同的系統(tǒng)支持的軟件不同。

建網(wǎng)站主要軟件環(huán)境是數(shù)據(jù)庫MySQL，動態(tài)語言PHP,ASP等。linus比windows穩(wěn)定，不過支持的軟件版本比較低，好像windows最高支持MySQL4.12，linus支持的是MySQL3.2.8。此次做網(wǎng)站用到的硬件環(huán)境：電腦，鍵盤，鼠標，U盤，Windows7，Windowsxp；軟件環(huán)境：DreamweaverCS3，IE瀏覽器,WPS，美圖秀秀,截圖工具。2.2.2網(wǎng)站技術(shù)介紹（1）運用DreamweaverCS3大意：Dreamweaver是將“設計”和“代碼”編輯器集成在一起，既可以方便的進行源代碼編輯，也可以使用鼠標方式添加和設置對象。Dreamweaver是一種所見即所得的網(wǎng)頁編輯器，既有效的減少了代碼編寫的工作量，也確保所設計文檔的專業(yè)性和兼容性。強大css功能CSS樣式可以有效的控制網(wǎng)頁對象的外觀，美化網(wǎng)頁界面，如文本字體，顏色，表單樣式、圖像風格等。Dreamweaver中有強大的CSS樣式表編輯器，可以比較輕松的編輯CSS樣式。Dreamweaver提供了強大的站點管理功能，可以安全，系統(tǒng)的維護和管理各種規(guī)模的網(wǎng)站。集成性高Dreamweaver與Fireworks，F(xiàn)lash，Shockwave具有良好的集成性，可以在這些Web創(chuàng)作工具之間自由的進行切換。媒體支持能力強在Dreamweaver文檔中，可以靈活加入JAVA，F(xiàn)lash，Shockwave，ActiveX以及其他媒體元素，也可以對各種多媒體元素進行處理。擴展能力強Dreamweaver可以實現(xiàn)功能的擴展。利用Adobe公司免費提供的Dreamweaver插件，可以豐富Dreamweaver的媒體處理能力。（2）DreamweaverCS3中的CSS布局規(guī)則雖然我們一直建議大家不用Dreamweaver可視化編輯的方式進行CSS網(wǎng)頁布局，但依然很多朋友在使用。建立您可以使用DW的代碼編輯器進行CSS代碼的編寫。今天向大家介紹DreamweaverCS3網(wǎng)頁制作中的CSS布局規(guī)則。CSS文件的鏈接方式·附加鏈接：外部CSS文件·導入CSS：常用應用多個CSS文件時，將多個CSS導入一個CSS文件中CSS規(guī)則定義有三種·類比如“.RedText”、“.BlueText”和“.BigText”等等·標簽針對原有HTML標簽做的重新CSS定義·高級偽類、定義了ID的元素，以及綜合性定義CSS規(guī)則的應用·只有“類”樣式才需要應用，class=”xxxx”。任何元素都可以應用類?！lass與id的區(qū)別·標簽應用一般對于“body”標簽一次性使用，對于諸如“l(fā)i”、“td”等在頁面中重復性比較大的標簽不推薦定義?！じ呒壎噙\用，定義“#idli”比定義“l(fā)i”要好得多。CSS規(guī)則的執(zhí)行順序·按照CSS代碼的執(zhí)行先后順序·如果有重復的規(guī)則，按照后執(zhí)行的定義·最終規(guī)則是多個定義規(guī)則的綜合重點：高級規(guī)則定義·對于不同表格的文字樣式定義。（不同表格使用不同ID、使用類樣式定義）·一頁中的多種超級鏈接樣式定義·多個相同規(guī)則不同對象的CSS共同定義·對于同一對象定義的多種CSS方式考慮哪種更科學（擴展性和代碼精簡性）（3）網(wǎng)站的速度當訪客進入網(wǎng)站時，首先第一感覺就是網(wǎng)站的打開速度，如果首頁文件太大或者網(wǎng)站服務器偏慢，打開的速度則非常慢，那么就給客戶帶來一種非常不好的印象，在這要注意選擇高速穩(wěn)定的服務器，Div+Css的構(gòu)造，提升網(wǎng)站打開速度?？偨Y(jié)：網(wǎng)絡營銷只能拉來流量，但是最重要的是要怎樣提高轉(zhuǎn)化率。這樣慢慢堆積網(wǎng)站用戶，才能打造具有市場競爭力的網(wǎng)站。第三章網(wǎng)站總體設計3.1網(wǎng)站總體框架圖網(wǎng)站用了布局表格繪制了網(wǎng)站的整體結(jié)構(gòu)，導航欄做了動漫的八個分類，分別做了相應獨立的頁面做了詳細的介紹，用了鏈接將獨立的頁面與主頁鏈接起來，每個頁面里面又各自做了不同的效果。第四章網(wǎng)站詳細設計4.1網(wǎng)站操作流程首頁（運用導航欄）以下則為導航欄中的動漫目錄首頁用了布局表格繪制了首頁的整體結(jié)構(gòu)，首頁簡單明了，總結(jié)了整個動漫網(wǎng)，詳細的分類可以讓訪客能夠更快的找到自己想要的東西。用八個主要頁面細分了動漫的類型，日本，國產(chǎn)，歐美動漫分別放置著三個地區(qū)的動漫，TV,劇場，OVA則是另一分類，動漫資訊記載著一些動漫的新聞，熱點，可以讓大家隨時了解最新的動漫動態(tài)。（2）分區(qū)(例如)日本動漫例如：偽戀這是一部日本動漫分類中的日本動漫，點擊偽戀或者動漫的圖片就可以進入單獨頁面，單獨頁面介紹了動漫的名稱，作者，集數(shù)，類別等，還有完整的劇情介紹。點擊進入單獨頁面，動漫愛好者還可以觀看這部動漫。4.2主要功能模塊近年來，隨著一大批動漫作品的出現(xiàn)，越來越多的人開始接觸和喜歡動漫，帶動著全球的動漫熱潮。動漫的受眾人群，也從最初的青少年人群，逐步擴展到社會各個階層，不僅小孩子、學生和時尚青年熱衷于動漫，許多社會中堅階層也認識到動漫的魅力，融入到愛好動漫的群體。動漫藝術(shù)的流行，是人類社會發(fā)展的必然。人類傳播信息的手段，從最初的簡單構(gòu)圖，到象形文字，再到文字和圖片，直到今天的動態(tài)影像，是一步步從簡單到復雜，從單一到多元化發(fā)展而來。今天的動態(tài)影像，包含了文字、聲音、二維圖像、三維圖像、動態(tài)變化，還有最新的互動交互性、觸摸感應和虛擬技術(shù)等科學技術(shù)的應用，使得今天的信息傳播擁有無比豐富的信息量和便捷的應用操作性。（１）首頁進入噬魂神域動漫網(wǎng)首頁，最醒目的就是噬魂神域動漫網(wǎng)歡迎你字樣，給人一種親切的感覺。點擊每一個鏈接都可以進入詳細的介紹頁面，可以選擇你喜歡的內(nèi)容。首頁還有收藏本站，設為首頁等按扭，可以讓你下次訪問的時候更快，不用浪費時間。第一次訪問網(wǎng)站的訪客,導航欄對于他們來說非常重要，有了導航欄，訪客就可以輕易地找著他們想要的動漫。用了鏈接將獨立的頁面與主頁鏈接起來，又做了八個導航，幾乎每個導航下面都用了表格，分別例舉了不同的動漫，也做了相應獨立的頁面介紹該部動漫。（2）導航條專區(qū)

在國產(chǎn)動漫專區(qū)，點擊動漫的名字就可以鏈接到該動漫的詳情頁，還可以直接選擇動漫集數(shù)直接播放動漫。（3）(例如)動漫資訊專區(qū)動漫資訊專區(qū)，你不僅可以看到動漫的最新動態(tài)。了解你感興趣的動漫新聞，點擊動漫專區(qū)鏈接，進入詳情頁還有想我了嗎，感性的音樂可以享受，既得到視覺的享受又能得到聽覺的享受。

例舉：1.利用布局表格做了首頁，首頁有導航，由此進入每一個版塊，其中有超鏈接，熱區(qū)鏈接，層的幾個性質(zhì)，時間軸的功能，css樣式等。2.進入單獨頁面，顯示不同專區(qū)，列出不同產(chǎn)品進入相應的頁面，運用了鼠標經(jīng)過圖像，、鼠標移開圖像、鼠標點擊圖像、多處運用顯示隱藏層，每個頁面中插入不少動態(tài)圖片，多處有鏈接，css樣式。3.首頁中有設為首頁，收藏本站，可以讓動漫愛好者更方便進入本站，設為首頁可以隨時關(guān)注我們的網(wǎng)站，了解動漫動態(tài)。收藏本站就不用怕找不到網(wǎng)站了。4.3主要頁面介紹（1）主頁用了布局表格繪制了主頁的整體結(jié)構(gòu)，先做了總的概況，然后分別做了相應獨立的頁面做了詳細的介紹，用了鏈接將獨立的頁面與主頁鏈接起來，又做了八個導航，幾乎每個導航下面都用了層做了顯示隱藏，分別例舉了不同的動漫，也做了相應獨立的頁面介紹動漫，主頁簡潔明了。（2）日本動漫（3）動漫資訊4.4部分代碼展示(1)<tdwidth="74"align="center"valign="middle"class="STYLE14"><spanclass="STYLE24"><ahref="TV.html">TV版</a></span></td>(2)<ahref="javascript:window.close()">關(guān)閉窗口</a>(3)<divid="apDiv1"><imgsrc="om/卑鄙的我.jpg"width="195"height="230"id="Image1"onmouseover="MM_swapImage('Image1','','rb/心靈盟友.png','Image2','','om/斧子警察.png','Image3','','om/RWBY.jpg','Image4','','zg/暴走漫畫.png','Image5','','zg/斗龍戰(zhàn)士.jpg','Image6','','rb/守護甜心.jpg',1)"onmouseout="MM_swapImgRestore()"/></div>(4)<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"width="672"height="651"id="FLVPlayer"><paramname="movie"value="FLVPlayer_Progressive.swf"/><paramname="salign"value="lt"/><paramname="quality"value="high"/><paramname="scale"value="noscale"/><paramname="FlashVars"value="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=東京暗鴉/東京暗鴉&autoPlay=false&autoRewind=false"/><embedsrc="FLVPlayer_Progressive.swf"flashvars="&MM_ComponentVersion=1&skinName=Halo_Skin_3&streamName=東京暗鴉/東京暗鴉&autoPlay=false&autoRewind=false"quality="high"scale="noscale"width="672"height="651"name="FLVPlayer"salign="LT"type="application/x-shockwave-flash"pluginspage="/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"/></object>致謝時光荏苒，歲月如梭，這世界上唯一不變的就是變化。轉(zhuǎn)眼間大一下學期剛開始的兩周實訓就這樣結(jié)束了。閉上眼睛，可以瞬間調(diào)出大一來南工院的記憶，每一個場景細致可觸。睜開眼睛，一個學期結(jié)束了，新的學期已經(jīng)到來，每一刻時光都心有留念。兩周的實訓過得很快，在此我想對我的學校，我的老師和同學們表達我由衷的謝意。感謝教授過我學業(yè)的老師和同學們兩周來的關(guān)心，鼓勵和幫助。老師們課堂上的激情洋溢，課堂下的諄諄教誨；同學們在學習中的認真熱情，生活上的熱心主動，所有這些都讓我充滿了感動。雖然兩周的實訓就是對著電腦，不斷的做著一個網(wǎng)站，或許有些枯燥無聊厭煩的時候，但是更多的是充實和愉悅感。這次網(wǎng)站制作我得到了老師和同學的很多幫助。我的網(wǎng)站制作指導老師田小敏老師給予了我很大的幫助。非常感謝與我合作完成網(wǎng)站制作的孫星晨同學。他在我網(wǎng)站設計期間，給我的幫助非常的大，我們一起調(diào)查問題，克服困難，完成系統(tǒng)代碼，測試系統(tǒng)性能，這一路上對我?guī)椭艽?。感謝在整個網(wǎng)站制作期間和我密切合作的同學，和曾經(jīng)在各個方面給予過我?guī)椭幕锇閭?，在此，我再一次真誠地向幫助過我的老師和同學表示感謝！雖然網(wǎng)站做的不是很完美，但畢竟是我迄今為止第一次獨立完成的網(wǎng)站，感覺學到了很多東西，蠻不錯的，希望能多有一些這樣的機會讓我們?nèi)ュ憻捵约旱牟僮髂芰Γ瑢椭业睦蠋熗瑢W表示由衷的感謝！這些將是我人生中的一次重要的經(jīng)歷，將是我今后走上社會后的一筆巨大的財富.這次實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了不少的收獲.總體來說，這次是對我的綜合素質(zhì)的培養(yǎng)，鍛煉和提高。個人小結(jié)實在出乎我的