靜態(tài)網(wǎng)站實(shí)訓(xùn)報(bào)告

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

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

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

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