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

1、動漫網(wǎng)站畢業(yè)設(shè)計論文成績指導(dǎo)教師白燕青辯論成績主辯論教師綜合成績辯論委員會主任摘要 錯誤！未定義書簽.引言 3一概述 4一軟件的選用與簡介 4三課題研究的主要簡介 4二設(shè)計準備 5一設(shè)計愿望 5二確定網(wǎng)站主題 5三確定網(wǎng)站形象 5四確定網(wǎng)站內(nèi)容 6三各模塊簡介 6一首頁模塊 6二關(guān)于宮園薰 6三人物介紹 7四在線觀看 7五動漫簡介 7四具體實現(xiàn)與分析 7一靜態(tài)設(shè)計 7二站點的建設(shè)與收集素材 7三HTM格言 8四用框架表格進行布局和排版 10五添加網(wǎng)頁元素 10六旋轉(zhuǎn)字特效 10七網(wǎng)頁設(shè)計過程圖 11致謝 錯誤！未定義書簽.參考文獻： 12隨著科技的進步、時代的開展,計算機信息行業(yè)也逐步壯大,人

2、們也越來越 離不開各種各樣的信息,人們對信息的追求越來越迫切.網(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)站紛紛出現(xiàn).隨著動漫產(chǎn)業(yè),動漫文化的不斷開展,動漫已經(jīng)從過去的低年齡層向全民動 漫方向開展,動漫產(chǎn)業(yè)鏈逐步完善,喜歡動漫的愛好者越來越多.當然市場需求 量也在不斷

3、增長,越來越多的動漫愛好者在這一領(lǐng)域能希望得到更多動漫資源, 獲得更多的一些能滿足他們各種愛好的資源集中地,而動漫網(wǎng)站那么包含了動漫和 動漫論壇,滿足了廣闊動漫迷的需求,逐漸形成了動漫一種文化特色存在.概述一軟件的選用與簡介Dreamweaver是美國MACROMEDIA1開發(fā)的集網(wǎng)頁制作和治理網(wǎng)站于一身的 所見即所得網(wǎng)頁編輯器,它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別開展的視覺化網(wǎng)頁 開發(fā)工具,利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿 動感的網(wǎng)頁.DreamweaverM有制作效率高、操作直觀、簡單易學(xué)、站點治理方便 等無可比較的限制水平優(yōu)勢,但它也同樣存在著難以精確到達與瀏覽器

4、完全一致、 不能實時更新、不能對大量信息進行更改、操作不方便、頁面原始代碼難以限制 等缺乏.本設(shè)計選用的是 Dreamweaver CS6Adobe Photoshop CS4作為 Adobe公司出品的最出色的圖形圖像處理軟件, Photoshop以其強大的功能向我們證實著它的名至實. 在網(wǎng)站設(shè)計時一些圖片素材 如背景圖片、按鈕、LOGN在運用到網(wǎng)站前根本需要用 Photoshop做適當?shù)奶幚? 如圖1-1 圖1-1 一些被PS處理過的圖片二選題的目的和意義動漫作為一個文化產(chǎn)業(yè),以其獨特的優(yōu)勢,新奇的特點,廣闊的受眾,政府 的扶持,迅速在各個市級城市表達價值,各個地方也都把動漫產(chǎn)業(yè)作為經(jīng)濟新的

5、 增長點,與此同時,大量動漫從業(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)上用戶提供交流場所,實現(xiàn)高效動

6、態(tài)信息交換.現(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)用了我所學(xué)過的的網(wǎng)站設(shè)計技術(shù)和 Photoshop 技術(shù)等.二設(shè)計準備“動漫網(wǎng)站要開展,要從動漫愛好者的需求出發(fā),網(wǎng)頁設(shè)計是一門新興起的 設(shè)計類,近幾年來隨著網(wǎng)絡(luò)的開展而逐漸受到人們的重視,它自己本身以網(wǎng)絡(luò)作 為載體,把各種各樣的信息以最快捷、方便的方式傳達給大家.一個網(wǎng)站工程確實 立一般是建立在各種各樣的需求上面的,這是動漫網(wǎng)站,所以這種需求一般來自 于動漫愛好者,其中每個人的實際需求占了絕大數(shù)局部.因此如何更好地了解、 分析需求,并且又能夠準確、清楚地以文檔的形式表達出來,保證開

8、發(fā)過程以動 漫愛好者的需求為目的正確工程開發(fā)方向進行.一設(shè)計愿望越來越多的人喜歡上動漫,這就出現(xiàn)了越來越多的動漫網(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、銷自己,讓別 人了解自己,和別人進行溝通和交流,展示一些自己的東西,讓大家更好地了解 自己.對于內(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ǎng)站形象和延伸內(nèi)涵的色彩,給人們一種以整體統(tǒng)一

10、的感覺.我個人網(wǎng)站的色彩是以淺藍 色色為主,淺藍色的字體和淺色的圖像給人一種舒服的感覺,仿佛生活在虛幻的 世界里.網(wǎng)站字體,和標準色彩一樣,標準字體是指用于標題、主菜單的一些特有字 體.為了表達網(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ǎng) 絡(luò)瀏覽器的信息連接請求時,便會向這臺電腦發(fā)送這個文檔.當在瀏覽器的 位址列輸入域名,而

11、并未指向特定目錄或檔案時,通常瀏覽器會翻開網(wǎng)站的 首頁.網(wǎng)站首頁往往會被編輯的很易于了解該網(wǎng)站所提供的所有資訊,并引導(dǎo) 互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站其他局部的內(nèi)容.這局部內(nèi)容一般被認為是一個目錄性 質(zhì)的內(nèi)容,我的動漫網(wǎng)站的首頁給大家一目了然的感覺,翻開首頁就可以了 解我的個人網(wǎng)站的設(shè)計風格還可以看到一些特定的功能,大家可以盡情地瀏 覽其中的信息.一首頁模塊介紹了一些關(guān)于動漫?四月是你的謊話?的的根本信息,比方女主角的姓名、 學(xué)校、興趣愛好、還有一些動漫里的經(jīng)典語錄、包括網(wǎng)頁背景音樂等.希望大家 可以進一步的了解?四月是你的謊話?這部動漫.如下列圖 1-3所示.圖3-1網(wǎng)站首頁二關(guān)于宮園薰介紹了宮園薰的一

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

13、關(guān)MADffi觀看地址,本頁面同樣包括了,旋轉(zhuǎn)字特效、論壇導(dǎo)航、留言信息、最近訪客等.如下列圖 1-6所示圖3-4在線觀看五動漫簡介在動漫簡介這局部中介紹了?四月是你的謊話?這部動漫得過的相關(guān)獎項、 出版時間、動漫劇情介紹、和?四月是你的謊話?幕后制作工作人員表.?四月是你的謊話?是由日本漫畫家新川直司作畫的漫畫.曾獲得講談社漫 畫賞少年部門獎.故事講述了擁有少見才能的中學(xué)男生鋼琴家,和女生小 提琴家共同努力、成長的青春物語.在 2021年3月21日舉行的noitaminA的 10周年紀念活動" noitaminA 發(fā)表會202110th Anniversary"上,?四月

14、是 你的謊話?宣布TV動畫化1-2.電視動畫于2021年10月9日首播,全22話. 在2021年5月15日出售的漫畫最終卷第7卷特裝版,會同捆推出OVAS畫.如 下列圖1-7所示.圖3-5動漫簡介四具體實現(xiàn)與分析一靜態(tài)設(shè)計先用Dreamweaver®行布局和排版.二站點的建設(shè)與收集素材創(chuàng)立本地站點的具體操作步驟如下：要制作一個網(wǎng)站,第一步操作都是一樣的,就是要創(chuàng)立一個“站點,這樣 可以使整個網(wǎng)站的結(jié)構(gòu)清楚地展現(xiàn)在面前,防止了以后復(fù)雜的治理.翻開Dreamweaver從菜單中選擇“站點/新建站點在彈出的對話框中填寫目錄和指定 文件夾,輸入站點名稱和默認的存放圖像的位置.在文本框中輸入自

15、己已經(jīng)想好的網(wǎng)站名稱“個人網(wǎng)站.填好后,單擊“下一步,進入下一個步驟.由于我 要做的是一個靜態(tài)的網(wǎng)頁,所以選擇上面的一項“否,我不想使用效勞器技術(shù). 單擊“下一步,進入下一個步驟.在此選項中有兩個選擇,選擇推薦的“編輯我的計算機上的本地副本,完成后再上傳到效勞器.底下的文本框允許在本地 磁盤上指定一個文件夾,Dreamweaver將在其中儲存站點文件的本地副本.單擊該 文本框后面的文件夾圖標,新建并指定一個空的文件夾“ D:/ys ".之后單擊“下 一步“,進入下一個步驟.這一步是如何設(shè)置連接到遠程效勞器,彈出式菜單中 有6中選擇,這里選擇“無.而后“下一步再“完成,這樣,一個站點就

16、 算建好了.收集素材：收集一些網(wǎng)站所需要的素材,比方圖片、音樂、文字等.做網(wǎng)站前的一些準 備工作也是很重要的.只有有了充足的準備我們才能把網(wǎng)站做好.因此在做網(wǎng)站 前我們必須把做網(wǎng)站的過程中可能所需的所有的材料都準備好,這樣才能做出讓 自己和大家都滿意的網(wǎng)站,而不至于在做的過程中亂了手腳.圖片的LOGO口下列圖1-8所示圖4-1 LOGO展示圖(三)HTMLS言要想建出專業(yè)的 We頃面,就要學(xué)會利用 HTM球編寫網(wǎng)頁.HTML(Hypertext Markup Language)超文本標記語言,是用于編寫網(wǎng)頁的主要語言.它是純文本的 類型的語言,語法非常的簡單.它通過對各種標記、元素、屬性、對象

17、等的設(shè)置 來建立與圖形、聲音、視頻等多媒體信息以及對其它超文本的鏈接.一般典型網(wǎng) 頁應(yīng)該包括如下HTML弋碼：<!doctype html><html><head><meta charset="gb2312><title>楊松的畢業(yè)設(shè)計-四月是你的謊話</title><link href="css/base.css" rel="stylesheet"><link href="css/index.css" rel="styles

18、heet"><link href="css/media.css" rel="stylesheet">minimum-scale=1.0,<meta name="viewport" content="width=device-width, maximum-scale=1.0"><!-if It IE 9><script src="js/modernizr.js"></script><!endif-> </

19、head><body><div class="ibody><header><h1>四月是你的謊話</h1><h2>星星在你的頭頂上閃耀著,與你交互訴說的話語,一句一句地,如同星 點般翩然落至眼前.</h2><div class="logo"><a href=""></a></div><nav id="topnav"><a href="index.html>

20、 首頁 </a><a href="about.html> 關(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

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

22、quot;blogs">< h3><a href="/">第四集出現(xiàn) </a></h3><figure><imgsrc="images/01.jpg"width="101%"height="96" ></figure><ul>其中,<title>與</title> 之間是網(wǎng)頁的標題,一般被顯示在瀏覽器的標題欄中.<head>與</head>之間可以聲明和定義

23、變量、方法,還可以參加 java-script/vb-script等一些腳本語言.<body>f </body>之間是網(wǎng)頁的主要內(nèi)容,任何網(wǎng)頁元素都可以參加其中.例如在主體中可以參加<div> </div>標簽是定義了一個層,參加<font>與</font>標簽是定義字體樣式,參加<style><!-></style> 標簽是定義一個CSS羊式等.四用框架表格進行布局和排版主頁面使用的是上方固定,左側(cè)嵌套的框架共四個網(wǎng)頁.然后在 main、top 和left每個網(wǎng)頁中又嵌套了一個表格那是

24、整個版面看起來更加整潔、清楚.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)頁圖片元素.利用鍵盤