靜態(tài)網(wǎng)頁制作課程設(shè)計(jì) 個(gè)人網(wǎng)站

PAGEPAGE9靜態(tài)網(wǎng)頁制作課程設(shè)計(jì)系部：班級：09級計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)學(xué)號：姓名：指導(dǎo)老師：完成日期：2011年01月06日教師評語目錄第一章：開發(fā)工具………04第二章：需求分析………06第三章：設(shè)計(jì)與規(guī)劃…….08第四章：開發(fā)與步驟……10第五章：測試與發(fā)布……17第六章：總結(jié)……………20第七章：參考文獻(xiàn)………21第一章開發(fā)工具本網(wǎng)站是由dreamweaver8、flash、fireworks為主要開發(fā)工具。dreamweaver8：dreamweaver是目前主流的網(wǎng)頁設(shè)計(jì)工具，不僅具有強(qiáng)大的頁面設(shè)計(jì)功能，而且具有完善的站點(diǎn)管理能力，使用dreamweaver設(shè)計(jì)網(wǎng)頁將是一個(gè)便捷、高效的工作流程。dreamweaver8是dreamweaver的最新一代產(chǎn)品，結(jié)合了dreamweaver的可視化排版功能，融合了dreamweaverultradev的動(dòng)態(tài)數(shù)據(jù)庫頁面開發(fā)工具和homesite的強(qiáng)大的代碼編輯支持。在操作界面上，一改往日陳舊的面孔，將以緊湊明快的界面贏得用戶的青睞。Flash：Flash的前身是FutureWave公司的FutureSplash，是世界上第一個(gè)商用的二維矢量動(dòng)畫軟件，用于設(shè)計(jì)和編輯Flash文檔。1996年11月，美國Macromedia公司收購了FutureWave，并將其改名為Flash。在出到Flash8以后，Macromedia又被Adobe公司收購。，最新版本為：AdobeFlashCS5。Flash通常也指MacromediaFlashPlayer（現(xiàn)AdobeFlashPlayer），用于播放Flash文件。Fireworks：Fireworks是Macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，它大大簡化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，無論是專業(yè)設(shè)計(jì)家還是業(yè)余愛好者，使用Fireworks都不僅可以輕松地制作出十分動(dòng)感的GIF動(dòng)畫，還可以輕易地完成大圖切割、動(dòng)態(tài)按鈕、動(dòng)態(tài)翻轉(zhuǎn)圖等，因此，對于輔助網(wǎng)頁編輯來說，F(xiàn)ireworks將是最大的功臣。借助于MacromediaFireworks8，您可以在直觀、可定制的環(huán)境中創(chuàng)建和優(yōu)化用于網(wǎng)頁的圖像并進(jìn)行精確控制。Fireworks業(yè)界領(lǐng)先的優(yōu)化工具可幫助您在最佳圖像品質(zhì)和最小壓縮大小之間達(dá)到平衡。它與MacromediaDreamweaver?和MacromediaFlash?共同構(gòu)成的集成工作流程可以讓您創(chuàng)建并優(yōu)化圖像，同時(shí)又能避免由于進(jìn)行Roundtrip編輯而丟失信息或浪費(fèi)時(shí)間。利用可視化工具，無需學(xué)習(xí)代碼即可創(chuàng)建具有專業(yè)品質(zhì)的網(wǎng)頁圖形和動(dòng)畫，如變換圖像和彈出菜單等。第二章：需求分析目的：動(dòng)漫世界致力于打造一個(gè)內(nèi)容豐富多彩，更新快速及時(shí)，網(wǎng)站運(yùn)行穩(wěn)定，能夠滿足大多數(shù)網(wǎng)民閱讀需求的個(gè)人網(wǎng)站總體來說，本人建站有2個(gè)目的：1、能夠?yàn)榫W(wǎng)民觀看、尋找動(dòng)漫、動(dòng)畫和圖片提供一個(gè)安全快速穩(wěn)定的網(wǎng)絡(luò)平臺；能夠滿足大多數(shù)網(wǎng)民的需求。2、個(gè)人可以通過建站的過程，學(xué)習(xí)到比較全面的互聯(lián)網(wǎng)知識；能夠在建站一到二年內(nèi)，讓本人的整體電腦技術(shù)能夠上一個(gè)臺階；二、網(wǎng)站的內(nèi)容概括網(wǎng)站以紫色調(diào)為主，淡雅系列，讓人看見后可以靜心觀看交流。網(wǎng)站主要是模仿百度里的空間為模板，本網(wǎng)站是以動(dòng)漫、漫畫連接為主，圖片以在網(wǎng)上尋找以相冊形式存放為主，日志方式為輔。網(wǎng)站的導(dǎo)航條有，“主頁、日志、動(dòng)漫、漫畫、相冊、個(gè)人檔案”。先到網(wǎng)上去找圖片，圖片主要是以動(dòng)漫電視的圖畫為主，其他的卡通圖片為輔。然后到各個(gè)動(dòng)漫官方網(wǎng)站連接動(dòng)漫電視，到網(wǎng)上去連接漫畫。在網(wǎng)上連接為主，自己下載些動(dòng)漫、漫畫。三．系統(tǒng)功能：主頁、日志、動(dòng)漫、漫畫、相冊、個(gè)人檔案主頁：在主頁當(dāng)中必須把所有分頁的開始的內(nèi)容在這個(gè)頁面顯現(xiàn)出來，每個(gè)分頁都必須占有一席之地，同時(shí)主頁當(dāng)中還有一個(gè)flash用來使頁面動(dòng)起來。日志：日志里面分有個(gè)人日志、動(dòng)漫日志、漫畫日志。日志里的內(nèi)容以在外網(wǎng)站連接為主。動(dòng)漫：動(dòng)漫網(wǎng)頁中，主要介紹一些經(jīng)典動(dòng)漫、完結(jié)動(dòng)漫、最新動(dòng)漫、熱門動(dòng)漫。同時(shí)以連接為主。漫畫：漫畫網(wǎng)頁中，主要介紹一些經(jīng)典漫畫、完結(jié)漫畫、最新漫畫、熱門漫畫。同時(shí)以連接為主。相冊：在此頁面中只有圖片連接相冊為主。個(gè)人檔案：主要介紹個(gè)人的資料，以一張圖片來對頁面調(diào)色。第三章：設(shè)計(jì)與規(guī)劃個(gè)人網(wǎng)站的設(shè)計(jì)就比企業(yè)網(wǎng)站要自由得多，不同的行業(yè)，不同興趣和愛好的網(wǎng)頁制作者，不同的設(shè)計(jì)目的，所設(shè)計(jì)出來的網(wǎng)頁會(huì)有很大不同。一個(gè)好的網(wǎng)頁設(shè)計(jì)，不一定很優(yōu)美，很技巧，但在搭配上很和諧，也可能很個(gè)性。正如中國的名言：仁者見仁，智者見智。不同風(fēng)格的網(wǎng)站，都會(huì)在網(wǎng)絡(luò)上找到屬于自己的知音。我的個(gè)人網(wǎng)站的流程主要有下面的圖所示。一個(gè)flash動(dòng)畫個(gè)人日志頁面一個(gè)flash動(dòng)畫個(gè)人日志頁面動(dòng)漫頁面漫畫頁面相冊頁面?zhèn)€人資料頁面主頁規(guī)劃與設(shè)計(jì)：1、網(wǎng)站采用以紫色調(diào)為主，本網(wǎng)站是以動(dòng)畫為題材，所以頁面的素材是以各個(gè)漫畫動(dòng)畫為原材料。2、網(wǎng)站里面的內(nèi)容大多是采用外連接。3、各個(gè)網(wǎng)頁里面必須有能夠返回主頁面的鏈接，本文是才用模板來建立的，相對其他的網(wǎng)頁是比較簡單和工程小，不復(fù)雜。4、網(wǎng)站的前景可以忽略不計(jì)，因?yàn)楸揪W(wǎng)站只是提供自己娛樂，技術(shù)還不能達(dá)到可以讓人收場瀏覽的地步。所以本網(wǎng)站只是自己的自娛自樂，和一點(diǎn)點(diǎn)的技術(shù)。5、頁面的主要設(shè)計(jì)：主頁：在主頁當(dāng)中把幾個(gè)分頁面的內(nèi)容用表的形式排列出來，在連接到各個(gè)分頁上去，本網(wǎng)站的才用文字與圖片來連接。在主頁面當(dāng)中還必須要有個(gè)人的聯(lián)系方法，本網(wǎng)站采用的是以郵件的形式。2）分頁：在各個(gè)分頁當(dāng)中要用表來排版面和必須要有能夠連接到主頁（index）上的鏈接對象，本網(wǎng)頁是用文字來連接。3）網(wǎng)站：在網(wǎng)站的建設(shè)當(dāng)中要考慮到建設(shè)網(wǎng)頁的需求，要正確的建立。第四章：開發(fā)與步驟1．網(wǎng)頁從一個(gè)Flash進(jìn)入2、個(gè)人網(wǎng)頁的主頁index3、個(gè)人網(wǎng)站的日志網(wǎng)頁4、個(gè)人網(wǎng)站的動(dòng)漫頁面5、個(gè)人網(wǎng)站的漫畫頁面6、個(gè)人網(wǎng)站相冊頁面7個(gè)人網(wǎng)站的個(gè)人檔案頁面第五章：測試與發(fā)布網(wǎng)站測試：網(wǎng)站發(fā)布之前，通常都會(huì)檢查網(wǎng)頁在不同版本瀏覽器下的顯示情況。尤其是制作大型的或訪問量高的網(wǎng)站，這個(gè)步驟十分必要。由于各種版本的瀏覽器支持的HTML語言的版本不同，所以要讓網(wǎng)頁能夠在大多數(shù)瀏覽器中順利顯示，就不得不做盡可能仔細(xì)的檢查，必要時(shí)還得舍棄一些較新的效果。1.測試的內(nèi)容：(1)確保頁面在目標(biāo)瀏覽器中能夠如預(yù)期的那樣工作，并確保這些頁面在其他瀏覽器中要么工作正常，要么“明確地拒絕工作”。

(2)應(yīng)盡可能多地在不同的瀏覽器和平臺上預(yù)覽頁面。

這使您有機(jī)會(huì)查看布局、顏色、字體大小和默認(rèn)瀏覽器窗口大小等方面的區(qū)別，這些區(qū)別在目標(biāo)瀏覽器檢查中是無法預(yù)見的

(3)檢查站點(diǎn)是否有斷開的鏈接，并修復(fù)斷開的鏈接。

(4)監(jiān)測頁面的文件大小以及下載這些頁面所占用的時(shí)間

(5)運(yùn)行一些站點(diǎn)報(bào)告來測試并解決整個(gè)站點(diǎn)的問題。

(6)檢查您的代碼中是否存在標(biāo)簽或語法錯(cuò)誤2.運(yùn)用Dreamweaver提供的站點(diǎn)報(bào)告測試功能Dreamweaver提供的站點(diǎn)測試功能可以幫助我們檢測網(wǎng)頁在六種不同版本的常用瀏覽器中的支持情況，最后還會(huì)自動(dòng)生成一份報(bào)告。若要運(yùn)行報(bào)告以測試站點(diǎn)，請執(zhí)行以下操作：(1)選擇“站點(diǎn)”—>“報(bào)告”，出現(xiàn)“報(bào)告”對話框。

提示：若要僅為站點(diǎn)運(yùn)行輔助功能報(bào)告，可以選擇“文件”—>“檢查頁”—>“檢查輔助功能”，報(bào)告將出現(xiàn)在“結(jié)果”面板組的“站點(diǎn)報(bào)告”面板中。2)選擇要報(bào)告的類別和要運(yùn)行的報(bào)告類型。(3)單擊“運(yùn)行”，創(chuàng)建報(bào)告。結(jié)果列表出現(xiàn)在“站點(diǎn)報(bào)告”面板（在“結(jié)果”面板組中）中。根據(jù)運(yùn)行的報(bào)告的類型，可能會(huì)提示您保存文件、定義站點(diǎn)或選擇文件夾（如果尚未執(zhí)行這些操作）。二、使用LeapFTP將靜態(tài)網(wǎng)頁設(shè)計(jì)課程網(wǎng)站發(fā)布到服務(wù)器上

網(wǎng)頁檢測完以后就可以發(fā)布到服務(wù)器上了。發(fā)布可以使用專門的FTP工具，也可以充分利用Dreamweaver的網(wǎng)頁發(fā)布功能。常用的FTP工具軟件有LeapFTP、CuteFTP等，大家可以根據(jù)自己的愛好選擇。如果你沒有自己的服務(wù)器，就可以到互聯(lián)網(wǎng)上申請免費(fèi)空間或購買空間，這里我們可以使用操作簡單的LeapFTP工具發(fā)布網(wǎng)頁。1、啟動(dòng)LeapFTP，如下圖所示：2)輸入FTP服務(wù)器地址、用戶名和密碼，端口號默認(rèn)為21，回車，賬號和密碼正確，系統(tǒng)會(huì)顯示登錄成功信息：3）在LeapFTP左邊找到我們做好的精品課程網(wǎng)頁，將其拖放放到右側(cè)的服務(wù)器文件中，網(wǎng)頁就開始發(fā)布了。4）等所有資料（網(wǎng)頁、圖片文件夾及相關(guān)文件）上傳完畢，就完成了網(wǎng)頁發(fā)布。5）打開自已的瀏覽器，輸入/html，訪問一下，如果能正確顯示我們做的頁面效果，網(wǎng)站就發(fā)布成功了。第六章總結(jié)作為首次建成的網(wǎng)站的站長，做一個(gè)個(gè)人網(wǎng)站不難，但是要想在同類行業(yè)出類拔萃，那是困難重重，我建站的資本非常低，天時(shí)，地利，人和一樣都跟我不沾邊，成功的道路非常遙遠(yuǎn)，而我唯一的優(yōu)勢，可能就是我比別人多了一份興趣。我的網(wǎng)站主要是配色這點(diǎn)讓我很傷腦，整個(gè)網(wǎng)頁由于配色不到位所以給人的視覺沖擊不大，并且對素材的尋找和運(yùn)用也沒弄好，總之這次的網(wǎng)站做得不怎么好，但我相信我下一次一定可以做得比這次更好的，只要我不半途而廢，那么我會(huì)更厲害。盡管困難重重，但是，我覺得，在互聯(lián)網(wǎng)大發(fā)展的背景之下，必定會(huì)有很多個(gè)人網(wǎng)站會(huì)站起來，這樣的成功例子太多太多了。只要我能在殘酷的競爭中堅(jiān)持下來，厚積薄發(fā)，希望每一個(gè)我的朋友，親人，每一個(gè)喜歡看動(dòng)漫的朋友，都能支持我走下去，不斷鼓勵(lì)我，鞭策我，不斷給我更多更好的建議，不斷糾正我犯下的每一個(gè)錯(cuò)誤，我必定會(huì)以更多的努力來回報(bào)每一個(gè)支持我第七章參考文獻(xiàn)dreamweaver8中文版實(shí)用教程flash視頻編輯fireworks圖片編輯百度網(wǎng)站上的信息Ps:主頁的代碼<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>動(dòng)漫世界</title><styletype="text/css"><!--body{ background-image:url(); background-color:#9900FF;}a:link{ text-decoration:none; color:#66FFFF;}a:visited{ text-decoration:none; color:#FF0000;}a:hover{ text-decoration:none; color:#FFFF33;}a:active{ text-decoration:none; color:#9900FF;}body,td,th{ font-family:宋體; color:#000000;}.STYLE3{ font-family:"宋體"; font-size:18px;}.STYLE5{font-family:"宋體";font-size:x-large;font-weight:bold;}.STYLE6{font-weight:bold;font-size:x-large;}.STYLE7{font-size:18px}--></style></head><body><tablewidth="1175"height="1092"border="0"align="center"><tralign="center"valign="middle"><tdheight="269"colspan="5"background="image/tou.jpg"> </td></tr><tralign="center"valign="middle"><tdheight="43"colspan="5"><tablewidth="1432"height="39"border="0"><tralign="center"valign="middle"bgcolor="#CC99FF"><tdwidth="230"height="35"><h1><spanclass="STYLE5"></span><ahref="#">主頁</a></h1></td><tdwidth="230"><h1><spanclass="STYLE5"><ahref="日志.html">日志</a></span></h1></td><tdwidth="230"><spanclass="STYLE5"><ahref="動(dòng)漫.html">動(dòng)漫</a></span></td><tdwidth="230"><spanclass="STYLE5"><ahref="漫畫.html">漫畫</a></span></td><tdwidth="230"><spanclass="STYLE5"><ahref="相冊.html">相冊</a></span></td><tdwidth="230"><spanclass="STYLE5"><ahref="個(gè)人檔案.html">個(gè)人檔案</a></span></td></tr></table></td></tr><tralign="left"valign="top"><tdheight="279"colspan="2"align="center"valign="middle"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="500"height="300"><paramname="movie"value="2.swf"/><paramname="quality"value="high"/><embedsrc="2.swf"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"width="500"height="300"></embed></object></td><td><h1><ahref="日志.html"></a><ahref="日志.html"><imgsrc="image/images/頭像/3cae9d3d6b7de131bba1675f.jpg"width="120"height="120"border="0"/></a><ahref="日志.html">日志</a></h1><p><ahref="/283369569"class="STYLE7">四川省蓬溪縣農(nóng)村長大的孩子們，進(jìn)來回憶一下……</a></p><p><ahref="/283369569"class="STYLE7">兩個(gè)小時(shí)內(nèi)不能同吃的東西(必看)</a></p><p> </p></td><tdcolspan="2"><h1><ahref="個(gè)人檔案.html"><imgsrc="image/images/頭像/1209442413-5.gif"width="80"height="80"/>個(gè)人檔案</a></h1><p>姓名：YLQ</p><p>年齡：20</p><p>就讀學(xué)校所在地：重慶</p><p>專業(yè)：計(jì)算機(jī)網(wǎng)絡(luò)</p><p>愛好：二次元</p><p>討厭：沒有二次元</p></td></tr><tralign="left"valign="top"><tdheight="164"colspan="2"align="left"valign="middle"><h1><ahref="動(dòng)漫.html"><imgsrc="image/images/頭像/2009070708425472.jpg"width="119"height="130"/>動(dòng)漫</a></h1></td><tdwidth="591"rowspan="2"><h1><ahref="相冊.html"><imgsrc="image/images/頭像/0303551P6-6.gif"width="100"height="100"/>相冊</a></h1><p><ahref="image/imagess/血/index.htm"><imgsrc="image/xi.jpg"width="500"height="300"border="0"/></a></p></td><tdwidth="496"colspan="2"><h1><ahref="漫畫.html"><imgsrc="image/images/頭像/528f88fd5d0ac8d1fd037feb.jpg"width="150"height="150"/>漫畫</a></h1><p> </p></td></tr><tr><tdwidth="226"height="274"align="left"valign="top"><p><spanclass="STYLE3">《<ahref="/isearch/%E5%B0%91%E5%B9%B4%E9%98%B4%E9%98%B3%E5%B8%88/">少年陰陽師</a></span>》</p><p><spanclass="STYLE3">《<ahref="/isearch/%E6%9A%B4%E9%A3%8E%E9%9B%A8%E4%B9%8B%E5%A4%9C/">暴風(fēng)雨之夜</a>》</span></p><p><spanclass="STYLE3">《<ahref="/isearch/%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85/">火影忍者</a>》</span></p><p><spanclass="STYLE3">《<ahref="/isearch/%E6%AD%BB%E7%A5%9E/">死神</a>》</span></p><p><spanclass="STYLE3">《<ahref="/isearch/%E6%B5%B7%E8%B4%BC%E7%8E%8B/">海賊王</a>》</span></p><p><spanclass="STYLE3">《<ahref="妖精標(biāo)本">妖精標(biāo)本</a>》</span></p><p><spanclass="STYLE3">《<ahref="/isearch/%E5%A5%87%E5%B9%BB%E8%B4%B5%E5%85%AC%E5%AD%90/">奇幻貴公子</a>》</span></p><p> </p></td><tdwidth="268"align="left"valign="top"><pclass="STYLE3">《<ahref="/isearch/%E7%BB%93%E7%95%8C%E5%B8%88/">結(jié)界師</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E6%BB%91%E5%A4%B4%E9%AC%BC%E4%B9%8B%E5%AD%99/">滑頭鬼之孫</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E5%AE%A0%E7%89%A9%E5%B0%8F%E7%B2%BE%E7%81%B5/">寵物小精靈</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E7%8A%AC%E5%A4%9C%E5%8F%89%20/">犬夜叉</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E5%AE%B6%E5%BA%AD%E6%95%99%E5%B8%88REBORN%EF%BC%81/">家庭教師REBORN！</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E9%BB%91%E6%89%A7%E4%BA%8B/">黑執(zhí)事</a>》</p><pclass="STYLE3">《<ahref="/isearch/%E9%92%A2%E4%B9%8B%E7%82%BC%E9%87%91%E6%9C%AF%E5%B8%88/">鋼之煉金術(shù)師</a>》</p></td><tdwidth="247"align="left"valign="top"><pclass="STYLE3">★<ahref="/v2/user/search.aspx?key=櫻蘭高校男公關(guān)部">櫻蘭高校男公關(guān)部</a></p><pclass="STYLE3">★<ahref="/comic/120/">死神</a></p><pclass="STYLE3">★<ahref="/v2/user/search.aspx?key=翼年代記">翼年代記</a></p><pclass="STYLE3">★<ahref="/v2/user/search.aspx?key=黑執(zhí)事">黑執(zhí)事</a></p><pclass="STYLE3">★<ahref="/v2/user/search.aspx?key=水果籃子">水果籃子</a></p><pclass="STYLE3">★<ahref="/v2/user/search