個(gè)人博客系統(tǒng)課程設(shè)計(jì)

1、<p><b>　　課程設(shè)計(jì)說明書</b></p><p><b>　　課程設(shè)計(jì)任務(wù)書</b></p><p>　　課程名稱：工程實(shí)訓(xùn)（一）</p><p>　　設(shè)計(jì)題目：個(gè)人博客系統(tǒng)</p><p>　　已知技術(shù)參數(shù)和設(shè)計(jì)要求：</p><p>　　問題描述（功能

2、要求）：</p><p>　　個(gè)人博客系統(tǒng)用來展示個(gè)人風(fēng)采，用戶界面設(shè)計(jì)不做統(tǒng)一規(guī)定，但應(yīng)做到界面友好，易于操作。</p><p>　　(1) 制作多級(jí)頁面，實(shí)現(xiàn)圖片滾動(dòng)，跑馬燈等效果</p><p>　　（2）盡可能完整地解析html文件，要標(biāo)代碼注釋</p><p>　　2. 運(yùn)行環(huán)境要求：</p><p><

3、;b>　?。?）客戶端：</b></p><p>　　windows操作系統(tǒng)</p><p><b>　　IE瀏覽器</b></p><p><b>　?。?）服務(wù)器：</b></p><p>　　windows server 版操作系統(tǒng)</p><p>&

4、lt;b>　　IIS組件安裝</b></p><p><b>　　3. 技術(shù)要求：</b></p><p>　　要求分別使用三種不同的方式來實(shí)現(xiàn)。</p><p><b>　　HTML</b></p><p><b>　　CSS</b></p>

5、<p>　　JavaScript</p><p><b>　　XML</b></p><p><b>　　PhotoShop</b></p><p>　　(1)了解有關(guān)Web網(wǎng)站建設(shè)的基本概念與方法。</p><p>　　(2)掌握網(wǎng)頁設(shè)計(jì)制作的基本概念，有關(guān)美學(xué)基本知識(shí)與設(shè)計(jì)制作流程。&

6、lt;/p><p>　　(3)掌握網(wǎng)絡(luò)信息發(fā)布與維護(hù)的方法。</p><p><b>　　設(shè)計(jì)工作量：</b></p><p><b>　　80課時(shí)</b></p><p><b>　　工作計(jì)劃：</b></p><p>　　2011級(jí)軟件工程所有班級(jí)<

7、;/p><p>　　4課時(shí)：課程設(shè)計(jì)相關(guān)知識(shí)介紹。多媒體教室</p><p>　　72課時(shí)： 設(shè)計(jì)、上機(jī)、調(diào)試。計(jì)算機(jī)系機(jī)房</p><p>　　4課時(shí)：答辯。計(jì)算機(jī)系機(jī)房。</p><p>　?。ň唧w時(shí)間地點(diǎn)老師先申請(qǐng)，機(jī)動(dòng)安排）</p><p>　　指導(dǎo)教師簽名：　　　　　　　　　日期：　　　　　　　　</p&g

8、t;<p>　　教研室主任簽名：　　　　　　　 日期：　　　　　　　　</p><p>　　系主任簽名：　　　　　　　　　 日期：　　　　　　　　</p><p><b>　　目 錄</b></p><p>　　1設(shè)計(jì)內(nèi)容與要求6</p><p><b>　　1.1設(shè)計(jì)內(nèi)容6</

9、b></p><p><b>　　1.2要求6</b></p><p><b>　　2設(shè)計(jì)說明7</b></p><p>　　2.1 需求分析7</p><p><b>　　2.2系統(tǒng)設(shè)計(jì)7</b></p><p><b>　　2

10、.3 測(cè)試11</b></p><p><b>　　3總結(jié)12</b></p><p><b>　　參考文獻(xiàn)13</b></p><p><b>　　附錄 源代碼14</b></p><p><b>　　1設(shè)計(jì)內(nèi)容與要求</b><

11、/p><p><b>　　1.1設(shè)計(jì)內(nèi)容</b></p><p>　　個(gè)人博客系統(tǒng)用來展示個(gè)人風(fēng)采，包括：</p><p><b>　　個(gè)人簡介</b></p><p><b>　　心情日志</b></p><p><b>　　我的說說</b

12、></p><p><b>　　友情鏈接</b></p><p><b>　　溫馨相冊(cè)</b></p><p><b>　　1.2要求</b></p><p>　　使用多種技術(shù)來實(shí)現(xiàn)。</p><p><b>　　HTML</b&g

13、t;</p><p><b>　　CSS</b></p><p>　　JavaScript</p><p><b>　　XML</b></p><p><b>　　PhotoShop</b></p><p><b>　　通過項(xiàng)目實(shí)踐，</

14、b></p><p>　　(1)了解有關(guān)Web網(wǎng)站建設(shè)的基本概念與方法。</p><p>　　(2)掌握網(wǎng)頁設(shè)計(jì)制作的基本概念，有關(guān)美學(xué)基本知識(shí)與設(shè)計(jì)制作流程。</p><p>　　(3)掌握網(wǎng)絡(luò)信息發(fā)布與維護(hù)的方法。</p><p><b>　　性能需求：</b></p><p>　　界面

15、友好，易于操作。</p><p><b>　　簡潔美觀。</b></p><p>　　另外要求：手工編寫HTML網(wǎng)頁代碼，在代碼中增加注釋，文檔規(guī)范完整，里程碑需通過小組討論及評(píng)審。</p><p><b>　　2設(shè)計(jì)說明</b></p><p><b>　　2.1 需求分析</b&

16、gt;</p><p><b>　　一．實(shí)訓(xùn)目的</b></p><p>　　通過本實(shí)訓(xùn)，應(yīng)具有創(chuàng)建一個(gè)小型個(gè)人網(wǎng)站的能力。</p><p>　　1）了解有關(guān)計(jì)算機(jī)網(wǎng)絡(luò)信息的收集﹑加工﹑處理﹑發(fā)布與維護(hù)的基本框架與工作流程。</p><p>　　2）掌握網(wǎng)頁設(shè)計(jì)制作的基本概念，有關(guān)美學(xué)基本知識(shí)與設(shè)計(jì)制作流程。</p

17、><p>　　3）掌握HTML﹑CSS等頁面設(shè)計(jì)方面相關(guān)技術(shù)。.</p><p>　　功能結(jié)構(gòu)：博客主頁，個(gè)人簡介，我的說說，心情日志，友情鏈接。</p><p><b>　　三．需求用例</b></p><p>　　個(gè)人簡介信息，包括基本資料（姓名，QQ，年齡，家鄉(xiāng)），性格（描述個(gè)人的評(píng)價(jià)信息），興趣（介紹個(gè)人的興趣與愛好

18、）。</p><p><b>　　1）首頁顯示</b></p><p>　　首頁主要顯示各個(gè)鏈接，文章與圖片展示和個(gè)人簡介等信息。</p><p><b>　　2）我的說說</b></p><p>　　本頁面展示了部分名人的名言警句。</p><p><b>　　3

19、）溫馨相冊(cè)顯示</b></p><p>　　本頁面用照片展示了我喜歡的明星，我的高中生活以及我喜歡的動(dòng)漫人物。</p><p><b>　　4）心情日志</b></p><p>　　關(guān)于我喜歡的一些文摘。</p><p><b>　　5）友情鏈接</b></p><p

20、>　　關(guān)于長沙各個(gè)大學(xué)以及自己感興趣地方的鏈接。</p><p><b>　　2.2系統(tǒng)設(shè)計(jì)</b></p><p><b>　　問題描述與功能設(shè)計(jì)</b></p><p>　　個(gè)人博客系統(tǒng)體現(xiàn)出博客的制作、博客的美化等。博客系統(tǒng)中含：個(gè)人首頁、心情日志、溫馨相冊(cè)、個(gè)人檔案、技術(shù)文章、友情鏈接等頻道。個(gè)人首頁概述了博

21、客的基本概念；心情日志有兩篇笑話；溫馨相冊(cè)貼了幾個(gè)圖；個(gè)人檔案介紹了黃天蓉的基本信息；技術(shù)文章粘貼了首頁的代碼。通過對(duì)博客的制作，掌握了網(wǎng)頁制作的基本技術(shù)，培養(yǎng)了綜合實(shí)力。</p><p>　　個(gè)人檔案頻道 利用代碼建構(gòu)，利用div，在頁面的上方描寫歡迎語，在頁面的右方編寫各個(gè)鏈接，在整個(gè)頁面的中間來描述一些所需的信息，還有利用了嵌套的方式來體現(xiàn)不同的效果。以下這些代碼描述了整個(gè)背景的插入和建立div來描述歡迎

22、語的運(yùn)動(dòng)軌跡和顏色字體大小。</p><p><b>　　個(gè)人簡介</b></p><p>　　<div> 利用分塊</p><p>　　<div id="mean" class="mean"></p><p>　　<

23、;img src="2.jpg" width="250" height="250" /></p><p>　　<ul class="nav"></p><p>　　<li><h2 href="#">個(gè)人信息：</h2></li>

24、;</p><p>　　<li><b href="#">姓名：覃浩然</b></li></p><p>　　<li><b href="#">性別：男</b></li></p><p>　　<li><b href=&

25、quot;#">年齡：18</b></li></p><p>　　<li><b href="#">職業(yè)：學(xué)生</b></li></p><p>　　<li><b href="#">愛好：打籃球</b></li><

26、;/p><p>　　<li><b href="#">性格：寶里寶氣</b></li></p><p>　　<li><b href="#">人生格言：<br>一.走自己的路，讓別人去說吧！<br></p><p>　　二.我心中有猛虎，細(xì)

27、嗅薔薇。</b></li></p><p><b>　　</ul></b></p><p>　　</div> 分塊結(jié)束</p><p><b>　　相冊(cè)設(shè)計(jì)</b></p><p>　　<body bgcolor=&qu

28、ot;#B0B0B0"></p><p>　　<h1>爺 紅遍全球 歡迎您?。?！</h1></p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<h2>

29、我最喜愛的籃球明星lebron james</h2> 規(guī)定相片的大小及規(guī)格</p><p>　　<img src="3.jpg" width="125" height="125"></p><p>　　<img src="4.jpg" width="125

30、" height="125"></p><p>　　<img src="5.jpg" width="125" height="125"></p><p><b>　　我的說說</b></p><p><b>　　<body

31、></b></p><p>　　<h2>我的說說：</h2></p><p>　　<h3>一.你若安好，便是晴天。<br></p><p>　　二.金錢這種東西，只要能解決個(gè)人的生活就行，若是過多了，它會(huì)成為遏制人類才能的禍害。<br> </p><p>　　三.

32、今天所做之事勿候明天，自己所做之事勿候他人。<br></p><p>　　四. 今天應(yīng)做的事沒有做，明天再早也是耽誤了。<br></p><p>　　五 .具有豐富知識(shí)和經(jīng)驗(yàn)的人，比只有一種知識(shí)和經(jīng)驗(yàn)的人更容易產(chǎn)生新的聯(lián)想和獨(dú)到的見解。<br></p><p>　　六.科學(xué)的每一項(xiàng)巨大成就，都是以大膽的幻想為出發(fā)點(diǎn)的。<b

33、r></p><p><b>　　技術(shù)文章</b></p><p>　　<div> 分塊</p><p>　　<div id="mm" class="mm"></p><p>　　

34、<b><h2>心情日志:</h2></b></p><p><b>　　<ul></b></p><p>　　<li><a href="q.html">你若安好，便是晴天</a> </li></p><p>　　<

35、;li><a href="w.html">青春散場(chǎng)，誰知道幸福的摸樣</a> </li></p><p>　　<li><a href="e.html">獨(dú)角戲</a> </li></p><p>　　<li><a href="r.ht

36、ml">天珠變</a> </li></p><p>　　<li><a href="">陳二狗的妖孽人生</a> </li></p><p>　　<li><a href="">讓青春繼續(xù)</a> </li></p

37、><p>　　<li><a href="">等待就是浪費(fèi)青春</a> </li></p><p>　　<li><a href="">嘻嘻 </a> </li></p><p>　　<li><a href="&

38、quot;>哈哈</a> </li></p><p>　　</ul> 分塊結(jié)束</p><p><b>　　</div></b></p><p><b>　　界面設(shè)計(jì)</b></p>

39、<p>　　圖2.1 心情日志頁面</p><p>　　圖2.2 主頁截圖2.3 測(cè)試</p><p>　　通過瀏覽器對(duì)網(wǎng)頁進(jìn)行測(cè)試，看一下網(wǎng)頁布局的效果，然后針對(duì)一些要改的地方進(jìn)行修改與調(diào)整直到完成個(gè)人首頁的整體布局效果，然后通過點(diǎn)擊一些具有鏈接屬性的文字進(jìn)行鏈接點(diǎn)擊之后進(jìn)入所鏈接的頁面，在初次鏈接的時(shí)候，網(wǎng)頁做得不是很好，然后通過一系列的編碼修改和測(cè)試，最終效果與所

40、得效果與所期待的效果一樣。</p><p><b>　　3總結(jié)</b></p><p>　　通過這次網(wǎng)頁設(shè)計(jì)與制作的學(xué)習(xí)，從中我了解和學(xué)習(xí)到了很多很多，從Html到css再到j(luò)avacript，這一過程中，讓我們深深地了解到一個(gè)網(wǎng)頁從設(shè)計(jì)到制作完成過程中所要付出的艱辛與努力，從一個(gè)簡單的排版 到最后整體的布局都需要經(jīng)過自己的深思熟慮才能達(dá)到一個(gè)比較好的結(jié)果，這也并不是

41、一個(gè)簡單的過程，需要耐心與恒心才能實(shí)現(xiàn)它，當(dāng)自己真真正正將他做出來時(shí)，收獲感與喜悅感將會(huì)更加強(qiáng)烈，網(wǎng)頁設(shè)計(jì)廣泛存在于生活當(dāng)中，所以學(xué)好了他，在社會(huì)上我們又將多了一份生存的工具。所以，在這方面，我們更得加油！去努力實(shí)現(xiàn)它，直至最好！?。?lt;/p><p><b>　　參考文獻(xiàn)</b></p><p>　　[1] 張學(xué)勇，袁偉森. 個(gè)人博客系統(tǒng)開發(fā)實(shí)戰(zhàn)[M]. 北京：中國軟

42、件行業(yè)產(chǎn)學(xué)研合作實(shí)訓(xùn)平臺(tái).</p><p>　　[2] 前沿科技. 精通CSS+DIV網(wǎng)頁樣式布局[M]. 北京：人民郵電出版社，2007</p><p><b>　　附錄 源代碼</b></p><p><b>　　<head></b></p><p>　　<META http-

43、equiv=Content-Type content="text/html; charset=gb2312"></p><p>　　<META content="MSHTML 6.00.2900.5512" name=GENERATOR></p><p>　　<meta http-equiv="content-typ

44、e" content="text/html; charset=utf-8" /></p><p>　　<title>>覃浩然的博客歡迎您！</title></p><p>　　<meta name="keywords" content="" /></p>&l

45、t;p>　　<meta name="description" content="" /></p><p>　　<link href="default.css" rel="stylesheet" type="text/css" media="screen" /><

46、;/p><p><b>　　</head></b></p><p><b>　　<body></b></p><p>　　<!-- start header --></p><p>　　<div id="header"></p&g

47、t;<p>　　<div id="logo"></p><p>　　<h1><a href="#">爺 紅遍全球歡迎您?。?！ </a></h1></p><p>　　<h2>覃浩然制造</a></h2></p><p&g

48、t;<b>　　</div></b></p><p>　　<div id="menu"></p><p><b>　　<ul></b></p><p>　　<li class="active"><a href="inde

49、x.html" accesskey="1" title="">主頁</a></li></p><p>　　<li><a href="personal.html" accesskey="2" title="">個(gè)人簡介</a></li&

50、gt;</p><p>　　<li><a href="photo.html" accesskey="3" title="">我的相冊(cè)</a></li></p><p>　　<li><a href="dailylife.html" accesske

51、y="4" title="">我的說說</a></li></p><p>　　<li><a href="txt.html" accesskey="5" title="">心情日志</a></li></p><p>

52、　　<li><a href="links.html" accesskey="6" title="">友情鏈接</a></li></p><p><b>　　</ul></b></p><p><b>　　</div></b

53、></p><p><b>　　</div></b></p><p>　　<!-- end header --></p><p>　　<div id="gallery"></p><p>　　<div id="top-photo"&g

54、t;</p><p>　　<p><a href="#"><img src="B.jpg" alt="" width="830" height="300" /></a></p></p><p><b>　　</div&

55、gt;</b></p><p><b>　　</div></b></p><p>　　<!-- start page --></p><p>　　<div id="page"></p><p>　　<!-- start content -->

56、</p><p>　　<div id="content"></p><p>　　<div class="post"></p><p>　　<h1 class="title">歡迎來到我的博客！</h1></p><p>　　<h2

57、 class="byline">最新說說：</h2></p><p>　　<div class="entry"></p><p>　　1.你要活得堅(jiān)強(qiáng) 一直堅(jiān)強(qiáng)下去 像巨人一樣！<br></p><p>　　2.我想給你你要的生活 我會(huì)努力</p><p&g

58、t;<b>　　</div></b></p><p><b>　　3.你真好！??！</b></p><p><b>　　</div></b></p><p>　　<div class="post"></p><p>　　&

59、lt;h2 class="title">最新日志：</h2></p><p>　　<b>一.你若安好，便是晴天</b></p><p>　　<div class="entry"></p><p>　　一個(gè)人，一本書，一杯茶，一簾夢(mèng)。<br></p>

60、<p>　　站在時(shí)光的十字路口，回望過去的種種單純與美好，欣慰而悲涼。<br></p><p>　　花開花落，風(fēng)卷云舒。青春如同流沙般從指縫溜走，過去的倔強(qiáng)與輕，<br></p><p>　　原來如此荒誕不羈。俗世喧囂，總會(huì)想在空靈停滯的時(shí)空內(nèi)，獨(dú)倚幽窗，<br></p><p>　　品一壺清茶，細(xì)細(xì)體味光陰如梭，年華

61、老去。<br></p><p>　　<b>二.青春散場(chǎng)，誰知道幸福的摸樣</b><br></p><p>　　恍惚中，又是落花滿地，又是草枯葉黃的時(shí)節(jié)了，<br></p><p>　　寫著盛開在眼眸之外的純白容顏，一行一行爬出來的文字全是落寞。<br></p><p>　

62、　這么久為什么看到的還是離人淚。歲月的輪回里，<br></p><p>　　到底轉(zhuǎn)動(dòng)著多少未了的情緣。我們傷心悲涼的經(jīng)過了流年，<br></p><p>　　連青春都燃燒殆盡。卻還渡不過寂寞。</p><p><b>　　</div></b></p><p>　　<p class

63、="meta"><a href="#" class="more"></a> &nbsp;&nbsp;&nbsp; <</a></p></p><p>　　<h2>留言板：</h2><br></p><p>　　&

64、lt;h3>一.祝你天天開心，過得愉快！<br></p><p>　　二.有空一起打籃球哦！</h3></p><p><b>　　</div></b></p><p><b>　　</div></b></p><p>　　<!-- end

65、 content --></p><p>　　<!-- start sidebar --></p><p>　　<div id="sidebar"></p><p><b>　　<ul></b></p><p>　　<li><h2&g

66、t;最新照片：</h2></p><p><b>　　<ul></b></p><p>　　<b>我喜歡的卡通</b><br></p><p>　　<img src="12.jpg" width="125" height="125

67、"></p><p><b>　　</ul></b></p><p><b>　　</li></b></p><p><b>　　<li></b></p><p>　　<h2>我的日志：</h2><

68、;/p><p><b>　　<ul></b></p><p>　　<li><a href="q.html">你若安好，便是晴天</a> </li></p><p>　　<li><a href="w.html">青春散場(chǎng)，誰知道

69、幸福的摸樣</a> </li></p><p>　　<li><a href="e.html">獨(dú)角戲</a> </li></p><p>　　<li><a href="r.html">天珠變</a> </li></p>

70、<p>　　<li><a href="">陳二狗的妖孽人生</a> </li></p><p>　　<li><a href="">讓青春繼續(xù)</a> </li></p><p>　　<li><a href="&quo

71、t;>等待就是浪費(fèi)青春</a> </li></p><p>　　<li><a href="">嘻嘻 </a> </li></p><p>　　<li><a href="">哈哈</a> </li></p><

72、;p><b>　　</ul></b></p><p><b>　　</li></b></p><p><b>　　</ul></b></p><p><b>　　</div></b></p><p>　

73、　<!-- end sidebar --></p><p><b>　　</div></b></p><p>　　<div style="clear: both; height: 30px">&nbsp;</div></p><p>　　<!-- end page

74、 --></p><p>　　<div id="footer"></p><p>　　<h1>來了就要留下你的腳印?。?！</h1></p><p><b>　　</div></b></p><p><b>　　</body>&