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

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

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

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

例舉：1.利用布局表格做了首頁，首頁有導航，由此進入每一個版塊，其中有超鏈接，熱區鏈接，層的幾個性質，時間軸的功能，css樣式等。2.進入單獨頁面，顯示不同專區，列出不同產品進入相應的頁面，運用了鼠標經過圖像，、鼠標移開圖像、鼠標點擊圖像、多處運用顯示隱藏層，每個頁面中插入不少動態圖片，多處有鏈接，css樣式。3.首頁中有設為首頁，收藏本站，可以讓動漫愛好者更方便進入本站，設為首頁可以隨時關注我們的網站，了解動漫動態。收藏本站就不用怕找不到網站了。4.3主要頁面介紹（1）主頁用了布局表格繪制了主頁的整體結構，先做了總的概況，然后分別做了相應獨立的頁面做了詳細的介紹，用了鏈接將獨立的頁面與主頁鏈接起來，又做了八個導航，幾乎每個導航下面都用了層做了顯示隱藏，分別例舉了不同的動漫，也做了相應獨立的頁面介紹動漫，主頁簡潔明了。（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()">關閉窗口</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/斗龍戰士.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>致謝時光荏苒，歲月如梭，這世界上唯一不變的就是變化。轉眼間大一下學期剛開始的兩周實訓就這樣結束了。閉上眼睛，可以瞬間調出大一來南工院的記憶，每一個場景細致可觸。睜開眼睛，一個學期結束了，新的學期已經到來，每一刻時光都心有留念。兩周的實訓過得很快，在此我想對我的學校，我的老師和同學們表達我由衷的謝意。感謝教授過我學業的老師和同學們兩周來的關心，鼓勵和幫助。老師們課堂上的激情洋溢，課堂下的諄諄教誨；同學們在學習中的認真熱情，生活上的熱心主動，所有這些都讓我充滿了感動。雖然兩周的實訓就是對著電腦，不斷的做著一個網站，或許有些枯燥無聊厭煩的時候，但是更多的是充實和愉悅感。這次網站制作我得到了老師和同學的很多幫助。我的網站制作指導老師田小敏老師給予了我很大的幫助。非常感謝與我合作完成網站制作的孫星晨同學。他在我網站設計期間，給我的幫助非常的大，我們一起調查問題，克服困難，完成系統代碼，測試系統性能，這一路上對我幫助很大。感謝在整個網站制作期間和我密切合作的同學，和曾經在各個方面給予過我幫助的伙伴們，在此，我再一次真誠地向幫助過我的老師和同學表示感謝！雖然網站做的不是很完美，但畢竟是我迄今為止第一次獨立完成的網站，感覺學到了很多東西，蠻不錯的，希望能多有一些這樣的機會讓我們去鍛煉自己的操作能力，對幫助我的老師同學表示由衷的感謝！這些將是我人生中的一次重要的經歷，將是我今后走上社會后的一筆巨大的財富.這次實習的收獲對我來說有不少，我自己感覺在知識、技能等方面都有了不少的收獲.總體來說，這次是對我的綜合素質的培養，鍛煉和提高。個人小結實在出乎我的