html動漫網(wǎng)站畢業(yè)設(shè)計(含源文件)

1、精選文檔 題目： 動漫網(wǎng)站畢業(yè)設(shè)計 論文成果指導老師白燕青答辯成果主答辯老師綜合成果答辯委員會主任目 錄摘 要1引 言2一 概述3（一）軟件的選用與簡介3（三）課題爭辯的主要簡介4二 設(shè)計預(yù)備4（一）設(shè)計愿望4（二）確定網(wǎng)站主題5（三）確定網(wǎng)站形象5（四）確定網(wǎng)站內(nèi)容6三 各模塊簡介6（一）首頁模塊6（二）關(guān)于宮園薰6（三）人物介紹7（四）在線觀看8（五）動漫簡介8四 具體實現(xiàn)與分析9（一）靜態(tài)設(shè)計9（二）站點的建設(shè)與收集素材9（三）HTML語言10（四）用框架表格進行布局和排版12（五）添加網(wǎng)頁元素12（六）旋轉(zhuǎn)字特效12（七）網(wǎng)頁設(shè)計過程圖13致 謝14參考文獻：15引 言隨著科技的進步、

2、時代的進展，計算機信息行業(yè)也逐步壯大，人們也越來越離不開各種各樣的信息，人們對信息的追求越來越迫切。網(wǎng)站作為網(wǎng)絡(luò)信息主要的表現(xiàn)形式而且還是互聯(lián)網(wǎng)信息的主要承載者，在互聯(lián)網(wǎng)上表現(xiàn)出了它及其重要的地位，并發(fā)揮著及其重要的作用，無論是國內(nèi)還是國外都快速的進展和壯大，并被人們重視。網(wǎng)站的迷人之處在于它綜合使用文本、圖像、聲音、動畫視頻信息和內(nèi)容，具有豐富的多媒體表現(xiàn)與互動特點。毋庸置疑，網(wǎng)站已成為最吸引人的也是最有效的信息傳遞的手段與方式。隨著網(wǎng)絡(luò)技術(shù)的逐步進展，各類網(wǎng)站紛紛消滅。 隨著動漫產(chǎn)業(yè)，動漫文化的不斷進展，動漫已經(jīng)從過去的低年齡層向全民動漫方向進展，動漫產(chǎn)業(yè)鏈逐步完善，寵愛動漫的愛好者越來越

3、多。當然市場需求量也在不斷增長，越來越多的動漫愛好者在這一領(lǐng)域能期望得到更多動漫資源，獲得更多的一些能滿足他們各種愛好的資源集中地，而動漫網(wǎng)站則包含了動漫和動漫論壇，滿足了寬敞動漫迷的需求，漸漸形成了動漫一種文化特色存在。一 概述（一）軟件的選用與簡介Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特殊進展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越掃瞄器限制的布滿動感的網(wǎng)頁。Dreamweaver具有制作效率高、操作直觀、簡潔易學、站點管理便利等無可比擬的把握力量優(yōu)勢，但它也同樣存在

4、著難以精確達到與掃瞄器完全全都、不能實時更新、不能對大量信息進行更改、操作不便利、頁面原始代碼難以把握等不足。本設(shè)計選用的是Dreamweaver CS6。Adobe Photoshop CS4作為Adobe公司出品的最精彩的圖形圖像處理軟件，Photoshop以其強大的功能向我們證明著它的名至實。在網(wǎng)站設(shè)計時一些圖片素材如背景圖片、按鈕、LOGO等在運用到網(wǎng)站前基本需要用Photoshop做適當?shù)奶幚?。（如圖1-1）圖1-1 一些被PS處理過的圖片（二）選題的目的和意義 動漫作為一個文化產(chǎn)業(yè)，以其獨特的優(yōu)勢，新穎的特點，寬敞的受眾，政府的扶持，快速在各個市級城市體現(xiàn)價值，各個地方也都把動漫產(chǎn)

5、業(yè)作為經(jīng)濟新的增長點，與此同時，大量動漫從業(yè)者涌入社會，各種機會，挑戰(zhàn)應(yīng)運而生，動漫市場的虛火與雜化為目前主要表現(xiàn)特征，從業(yè)者面臨更多逆境，從而有些轉(zhuǎn)入相關(guān)行業(yè)。 在Internet飛速進展的今日，互聯(lián)網(wǎng)已成為人們快速獵取、發(fā)布和傳遞信息的重要渠道，因此網(wǎng)站建設(shè)在Internet應(yīng)用上的地位越來越重要了。目前Internet上已有上百萬個web站點，其內(nèi)容范圍跨越了教育科研、文化事業(yè)、金融、商業(yè)、新聞出版、消遣、體育等各個領(lǐng)域，其用戶群格外浩大。動漫設(shè)計網(wǎng)站成為越來越多動漫愛好者和非動漫愛好者獲得信息和溝通的平臺，它滿足了寬敞用戶隨時隨地進行溝通和溝通的需要，為網(wǎng)上用戶供應(yīng)溝通場所，實現(xiàn)高效動

6、態(tài)信息交換?，F(xiàn)在雖然有很多動漫網(wǎng)站，但版面千篇一律，缺乏共性化、前瞻性、頁面設(shè)計混亂，不利于用戶查看，因此我針對以上問題設(shè)計一個共性化、能個用戶帶來特殊視覺感動的動漫網(wǎng)站。網(wǎng)站實現(xiàn)的基本模塊有顯示動漫雜談信息，在線觀看動漫影片，動漫愛好者可以依據(jù)自己的需要進行掃瞄，本網(wǎng)站的主要特色是頁面新穎友好，內(nèi)容直觀，操作簡潔便利，適用于寬敞動漫愛好者。（三）課題爭辯的主要簡介現(xiàn)在互聯(lián)網(wǎng)是社會進展的必定趨勢，很多人已經(jīng)意識到網(wǎng)絡(luò)強大生命力和它在將來將要處于的重要地位。他們進行鉆研并且努力進入到一個新的空間、新的領(lǐng)域。其中包括動漫網(wǎng)站。在我們的日常、休閑生活當中，越來越多的人寵愛觀看動漫。就這個課題的爭辯，

7、由于是介紹動漫的網(wǎng)站，所以我只選擇了自己擅長和寵愛的動漫內(nèi)容，在突出動漫的風格共性和特點的同時，還應(yīng)用了我所學過的的網(wǎng)站設(shè)計技術(shù)和Photoshop技術(shù)等。二 設(shè)計預(yù)備“動漫網(wǎng)站要進展，要從動漫愛好者的需求動身，網(wǎng)頁設(shè)計是一門新興起的設(shè)計類，近幾年來隨著網(wǎng)絡(luò)的進展而漸漸受到人們的重視，它自己本身以網(wǎng)絡(luò)作為載體,把各種各樣的信息以最快捷、便利的方式傳達給大家。一個網(wǎng)站項目的確立一般是建立在各種各樣的需求上面的，這是動漫網(wǎng)站，所以這種需求一般來自于動漫愛好者，其中每個人的實際需求占了絕大數(shù)部分。因此如何更好地了解、分析需求，并且又能夠精確、清楚地以文檔的形式表達出來，保證開發(fā)過程以動漫愛好者的需求

8、為目的正確項目開發(fā)方向進行。（一）設(shè)計愿望越來越多的人寵愛上動漫，這就消滅了越來越多的動漫網(wǎng)站設(shè)計以及推廣的工作和任務(wù)。就我個人來說，我之所以在畢業(yè)設(shè)計的時候選擇這個課題是由于我自己也是一個動漫愛好者，在互聯(lián)網(wǎng)上擁有我自己的一席之地，從而真正的參與到互聯(lián)網(wǎng)中去，做個網(wǎng)絡(luò)新時代的仆人，同時也期望自己寵愛的一些動漫能夠和大家一起共享，和互聯(lián)網(wǎng)上的伴侶一起共享。（二）確定網(wǎng)站主題 做網(wǎng)站，首先必需要解決的就是網(wǎng)站內(nèi)容的問題，即是確定網(wǎng)站的主題。假如自己在某些方面越有愛好，或把握的資料越多，就可以做一個自己感愛好的東西。你可以有自己的見解，做出自己的特色網(wǎng)站。當然，也可以推銷自己，讓別人了解自己，和別

9、人進行溝通和溝通，呈現(xiàn)一些自己的東西，讓大家更好地了解自己。對于內(nèi)容主題的選擇，要做到小而精，即主題定位要小，且內(nèi)容要精。不要去試著作一個包羅萬象的站點，這往往會失去你的網(wǎng)站的特色，也會帶來很大的勞動，給網(wǎng)站的準時更新帶來更大的困難。我的網(wǎng)站主題是以我個人寵愛的動漫來制作的，介紹了這部動漫。（三）確定網(wǎng)站形象網(wǎng)站形象的設(shè)計可以從網(wǎng)站的LOGO、網(wǎng)站的顏色、網(wǎng)站的字體宣揚語等這些方面著手。網(wǎng)站顏色，網(wǎng)站給人的第一印象來自于視覺的沖擊，不同的顏色搭配會產(chǎn)生不同的效果，并可能影響到訪問者的心情?！皹藴暑伾敝傅氖悄荏w現(xiàn)網(wǎng)站形象和延長內(nèi)涵的顏色，給人們一種以整體統(tǒng)一的感覺。我個人網(wǎng)站的顏色是以淺藍色色

10、為主，淺藍色的字體和淺色的圖像給人一種舒適的感覺，仿佛生活在虛幻的世界里。 網(wǎng)站字體，和標準顏色一樣，標準字體是指用于標題、主菜單的一些特有字體。為了體現(xiàn)網(wǎng)站所特有的風格，可以依據(jù)自已的網(wǎng)站所表達的內(nèi)涵，選擇更貼切的字體。（如圖1-2）圖2-1 我的動漫網(wǎng)站LOGO（四）確定網(wǎng)站內(nèi)容我的動漫網(wǎng)站大體上包括了一些內(nèi)容：首頁、關(guān)于宮園薰、人物介紹、在線觀看、動漫簡介等動漫網(wǎng)站常用內(nèi)容，便利的大家的掃瞄。三 各模塊簡介一個網(wǎng)站的首頁其實是一個文檔，當一個網(wǎng)站服務(wù)器收到一臺電腦上網(wǎng)絡(luò)掃瞄器的信息連接懇求時，便會向這臺電腦發(fā)送這個文檔。當在掃瞄器的位址列輸入域名，而并未指向特定名目或檔案時，通常掃瞄器會

11、打開網(wǎng)站的首頁。 網(wǎng)站首頁往往會被編輯的很易于了解該網(wǎng)站所供應(yīng)的全部資訊，并引導互聯(lián)網(wǎng)用戶掃瞄網(wǎng)站其他部分的內(nèi)容。這部分內(nèi)容一般被認為是一個名目性質(zhì)的內(nèi)容，我的動漫網(wǎng)站的首頁給大家一目了然的感覺，打開首頁就可以了解我的個人網(wǎng)站的設(shè)計風格還可以看到一些特定的功能，大家可以盡情地掃瞄其中的信息。（一）首頁模塊介紹了一些關(guān)于動漫四月是你的謊言的的基本信息，比如女主角的姓名、學校、愛好愛好、還有一些動漫里的經(jīng)典語錄、包括網(wǎng)頁背景音樂等。期望大家可以進一步的了解四月是你的謊言這部動漫。如下圖1-3所示。圖3-1 網(wǎng)站首頁（二）關(guān)于宮園薰介紹了宮園薰的一些基本信息，里面有宮園薰的資料（宮園薰，女，市立墨谷

12、中學初三同學，小提琴手。家中開蛋糕店，寵愛小孩子，樂觀開朗，元氣十足。樂觀向上的心態(tài)也感染了身邊的人，有時候意外的會說出意義深刻的話或者引言。 寵愛美食，特殊是甜食。）如下圖1-4所示圖3-2 關(guān)于宮園薰（三）人物介紹在這里介紹了四月是你的謊言動漫里的一些主要登場人物包括男主角有馬公生、女主角宮園薰、澤部椿、渡亮太、相座武士等。還有旋轉(zhuǎn)字特效、網(wǎng)頁背景音樂、論壇導航、留言信息、和一些最近訪客。如下圖1-5所示圖3-3 人物介紹（四）在線觀看在線觀看這部分中列舉出了四月是你的謊言22集縮略圖及觀看地址網(wǎng)頁的底部還有一些網(wǎng)友自己制作的動漫相關(guān)MAD和觀看地址，本頁面同樣包括了，旋轉(zhuǎn)字特效、論壇導航

13、、留言信息、最近訪客等。如下圖1-6所示圖3-4 在線觀看（五）動漫簡介在動漫簡介這部分中介紹了四月是你的謊言這部動漫得過的相關(guān)獎項、出版時間、動漫劇情介紹、和四月是你的謊言幕后制作工作人員表。四月是你的謊言是由日本漫畫家新川直司作畫的漫畫。曾獲得講談社漫畫賞少年部門獎。故事敘述了擁有少見才能的中學男生（鋼琴家），和女生（小提琴家）共同努力、成長的青春物語。在2014年3月21日進行的noitaminA的10周年紀念活動”noitaminA發(fā)表會2014 10th Anniversary“上，四月是你的謊言宣布TV動畫化1-2 。電視動畫于2014年10月9日首播，全22話。在2015年5月1

14、5日發(fā)售的漫畫最終卷第7卷特裝版，會同捆推出OVA動畫。如下圖1-7所示。圖3-5 動漫簡介四 具體實現(xiàn)與分析（一）靜態(tài)設(shè)計先用Dreamweaver進行布局和排版。（二）站點的建設(shè)與收集素材創(chuàng)建本地站點的具體操作步驟如下：要制作一個網(wǎng)站，第一步操作都是一樣的，就是要創(chuàng)建一個“站點”，這樣可以使整個網(wǎng)站的結(jié)構(gòu)清楚地呈現(xiàn)在面前，避開了以后簡單的管理。 打開Dreamweaver從菜單中選擇“站點/新建站點”在彈出的對話框中填寫名目和指定文件夾，輸入站點名稱和默認的存放圖像的位置。在文本框中輸入自己已經(jīng)想好的網(wǎng)站名稱“個人網(wǎng)站”。填好后，單擊“下一步”，進入下一個步驟。由于我要做的是一個靜態(tài)的網(wǎng)頁

15、，所以選擇上面的一項“否，我不想使用服務(wù)器技術(shù)?！眴螕簟跋乱徊健?，進入下一個步驟。 在此選項中有兩個選擇，選擇推舉的“編輯我的計算機上的本地副本，完成后再上傳到服務(wù)器”。底下的文本框允許在本地磁盤上指定一個文件夾，Dreamweaver將在其中儲存站點文件的本地副本。單擊該文本框后面的文件夾圖標，新建并指定一個空的文件夾“D:/ys”。之后單擊“下一步“，進入下一個步驟。這一步是如何設(shè)置連接到遠程服務(wù)器，彈出式菜單中有6中選擇，這里選擇“無”。而后“下一步”再“完成”，這樣，一個站點就算建好了。收集素材：收集一些網(wǎng)站所需要的素材，比如圖片、音樂、文字等。做網(wǎng)站前的一些預(yù)備工作也是很重要的。只有

16、有了充分的預(yù)備我們才能把網(wǎng)站做好。因此在做網(wǎng)站前我們必需把做網(wǎng)站的過程中可能所需的全部的材料都預(yù)備好，這樣才能做出讓自己和大家都滿足的網(wǎng)站，而不至于在做的過程中亂了手腳。圖片的LOGO如下圖1-8所示圖4-1 LOGO呈現(xiàn)圖（三）HTML語言要想建出專業(yè)的Web頁面，就要學會利用HTML來編寫網(wǎng)頁。HTML(Hypertext Markup Language)超文本標記語言，是用于編寫網(wǎng)頁的主要語言。它是純文本的類型的語言，語法格外的簡潔。它通過對各種標記、元素、屬性、對象等的設(shè)置來建立與圖形、聲音、視頻等多媒體信息以及對其它超文本的鏈接。一般典型網(wǎng)頁應(yīng)當包括如下HTML代碼：<!doc

17、type html><html><head><meta charset="gb2312"><title>楊松的畢業(yè)設(shè)計-四月是你的謊言</title><link href="css/base.css" rel="stylesheet"><link href="css/index.css" rel="stylesheet"><link href="css/media.css" rel

18、="stylesheet"><meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><!-if lt IE 9><script src="js/modernizr.js"></script><!endif-></head><body><div class="ibody"> &

19、lt;header> <h1>四月是你的謊言</h1> <h2>星星在你的頭頂上閃爍著，與你交互訴說的話語，一句一句地，猶如星點般翩然落至眼前。</h2> <div class="logo"><a href=""></a></div> <nav id="topnav"><a href="index.html">首頁</a><a href="about.html&q

20、uot;>關(guān)于宮園薰</a><a href="newlist.html">人物介紹</a><a href="share.html">在線觀看</a><a href="new.html">動漫簡介</a></nav> </header> <article> <div class="banner"> <ul class="texts"> <p&g

21、t;春天 馬上就要來了 </p> <p> 讓我與你相遇的春天 就要來了 </p> <p> 再也沒有你的春天 就要來了</p> <p>-有馬公生</p> </ul> </div> <div class="bloglist"> <h2> <p><span>經(jīng)典</span>語錄</p> </h2> <div class="blogs"> <h3>

22、<a href="/">第四集消滅</a></h3> <figure><img src="images/01.jpg" width="101%" height="96" ></figure> <ul>其中，<title>與</title>之間是網(wǎng)頁的標題，一般被顯示在掃瞄器的標題欄中。<head>與</head>之間可以聲明和定義變量、方法，還可以加入java-script/vb-sc

23、ript等一些腳本語言。<body>與</body>之間是網(wǎng)頁的主要內(nèi)容，任何網(wǎng)頁元素都可以加入其中。例如在主體中可以加入<div>與</div>標簽是定義了一個層，加入<font>與</font>標簽是定義字體樣式，加入<style><!-></style>標簽是定義一個CSS樣式等。（四）用框架表格進行布局和排版主頁面使用的是上方固定，左側(cè)嵌套的框架共四個網(wǎng)頁。然后在main、top和left每個網(wǎng)頁中又嵌套了一個表格那是整個版面看起來更加整齊、清楚。Top中的表格用來組織頁面頭部的元素（下稱“頭表格”），在設(shè)計視圖下將鼠標光標置于網(wǎng)頁編輯區(qū)，點擊“插入”“表格”，設(shè)置2行、3列的表格，“表格寬度”1000像素，“邊框粗細”為1，點擊確定。選中表格在屬性把握面板中設(shè)置對齊方式為“居中對齊”。然后再將其次行單元格合并。并插入所需要的元素。Left中再插入一個2行1列的表格，用來組織左邊頁面的主體內(nèi)容，其它屬性同頭表格。再填入所需內(nèi)容，并加入超鏈接。最終再在Main網(wǎng)頁中插入一個1行2列的表格，用來組織頁面的主要內(nèi)容元素。 “邊框粗細”為1，設(shè)置表格為顯示邊框。（五）添加網(wǎng)頁元素利用設(shè)置表格圖片、插入圖片等形式添加網(wǎng)頁圖片元素。利用鍵盤輸入或復制粘貼等方式添加文字，文字顏