版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領
文檔簡介
1、<p><b> 課程設計說明書</b></p><p><b> 課程設計任務書</b></p><p> 課程名稱:工程實訓(一)</p><p> 設計題目:個人博客系統(tǒng)</p><p> 已知技術參數(shù)和設計要求:</p><p> 問題描述(功能
2、要求):</p><p> 個人博客系統(tǒng)用來展示個人風采,用戶界面設計不做統(tǒng)一規(guī)定,但應做到界面友好,易于操作。</p><p> (1) 制作多級頁面,實現(xiàn)圖片滾動,跑馬燈等效果</p><p> ?。?)盡可能完整地解析html文件,要標代碼注釋</p><p> 2. 運行環(huán)境要求:</p><p><
3、;b> (1)客戶端:</b></p><p> windows操作系統(tǒng)</p><p><b> IE瀏覽器</b></p><p><b> ?。?)服務器:</b></p><p> windows server 版操作系統(tǒng)</p><p>&
4、lt;b> IIS組件安裝</b></p><p><b> 3. 技術要求:</b></p><p> 要求分別使用三種不同的方式來實現(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)了解有關Web網(wǎng)站建設的基本概念與方法。</p><p> (2)掌握網(wǎng)頁設計制作的基本概念,有關美學基本知識與設計制作流程。&
6、lt;/p><p> (3)掌握網(wǎng)絡信息發(fā)布與維護的方法。</p><p><b> 設計工作量:</b></p><p><b> 80課時</b></p><p><b> 工作計劃:</b></p><p> 2011級軟件工程所有班級<
7、;/p><p> 4課時:課程設計相關知識介紹。多媒體教室</p><p> 72課時: 設計、上機、調(diào)試。計算機系機房</p><p> 4課時:答辯。計算機系機房。</p><p> ?。ň唧w時間地點老師先申請,機動安排)</p><p> 指導教師簽名: 日期: </p&g
8、t;<p> 教研室主任簽名: 日期: </p><p> 系主任簽名: 日期: </p><p><b> 目 錄</b></p><p> 1設計內(nèi)容與要求6</p><p><b> 1.1設計內(nèi)容6</
9、b></p><p><b> 1.2要求6</b></p><p><b> 2設計說明7</b></p><p> 2.1 需求分析7</p><p><b> 2.2系統(tǒng)設計7</b></p><p><b> 2
10、.3 測試11</b></p><p><b> 3總結(jié)12</b></p><p><b> 參考文獻13</b></p><p><b> 附錄 源代碼14</b></p><p><b> 1設計內(nèi)容與要求</b><
11、/p><p><b> 1.1設計內(nèi)容</b></p><p> 個人博客系統(tǒng)用來展示個人風采,包括:</p><p><b> 個人簡介</b></p><p><b> 心情日志</b></p><p><b> 我的說說</b
12、></p><p><b> 友情鏈接</b></p><p><b> 溫馨相冊</b></p><p><b> 1.2要求</b></p><p> 使用多種技術來實現(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> 通過項目實踐,</
14、b></p><p> (1)了解有關Web網(wǎng)站建設的基本概念與方法。</p><p> (2)掌握網(wǎng)頁設計制作的基本概念,有關美學基本知識與設計制作流程。</p><p> (3)掌握網(wǎng)絡信息發(fā)布與維護的方法。</p><p><b> 性能需求:</b></p><p> 界面
15、友好,易于操作。</p><p><b> 簡潔美觀。</b></p><p> 另外要求:手工編寫HTML網(wǎng)頁代碼,在代碼中增加注釋,文檔規(guī)范完整,里程碑需通過小組討論及評審。</p><p><b> 2設計說明</b></p><p><b> 2.1 需求分析</b&
16、gt;</p><p><b> 一.實訓目的</b></p><p> 通過本實訓,應具有創(chuàng)建一個小型個人網(wǎng)站的能力。</p><p> 1)了解有關計算機網(wǎng)絡信息的收集﹑加工﹑處理﹑發(fā)布與維護的基本框架與工作流程。</p><p> 2)掌握網(wǎng)頁設計制作的基本概念,有關美學基本知識與設計制作流程。</p
17、><p> 3)掌握HTML﹑CSS等頁面設計方面相關技術。.</p><p> 功能結(jié)構(gòu):博客主頁,個人簡介,我的說說,心情日志,友情鏈接。</p><p><b> 三.需求用例</b></p><p> 個人簡介信息,包括基本資料(姓名,QQ,年齡,家鄉(xiāng)),性格(描述個人的評價信息),興趣(介紹個人的興趣與愛好
18、)。</p><p><b> 1)首頁顯示</b></p><p> 首頁主要顯示各個鏈接,文章與圖片展示和個人簡介等信息。</p><p><b> 2)我的說說</b></p><p> 本頁面展示了部分名人的名言警句。</p><p><b> 3
19、)溫馨相冊顯示</b></p><p> 本頁面用照片展示了我喜歡的明星,我的高中生活以及我喜歡的動漫人物。</p><p><b> 4)心情日志</b></p><p> 關于我喜歡的一些文摘。</p><p><b> 5)友情鏈接</b></p><p
20、> 關于長沙各個大學以及自己感興趣地方的鏈接。</p><p><b> 2.2系統(tǒng)設計</b></p><p><b> 問題描述與功能設計</b></p><p> 個人博客系統(tǒng)體現(xiàn)出博客的制作、博客的美化等。博客系統(tǒng)中含:個人首頁、心情日志、溫馨相冊、個人檔案、技術文章、友情鏈接等頻道。個人首頁概述了博
21、客的基本概念;心情日志有兩篇笑話;溫馨相冊貼了幾個圖;個人檔案介紹了黃天蓉的基本信息;技術文章粘貼了首頁的代碼。通過對博客的制作,掌握了網(wǎng)頁制作的基本技術,培養(yǎng)了綜合實力。</p><p> 個人檔案頻道 利用代碼建構(gòu),利用div,在頁面的上方描寫歡迎語,在頁面的右方編寫各個鏈接,在整個頁面的中間來描述一些所需的信息,還有利用了嵌套的方式來體現(xiàn)不同的效果。以下這些代碼描述了整個背景的插入和建立div來描述歡迎
22、語的運動軌跡和顏色字體大小。</p><p><b> 個人簡介</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="#">個人信息:</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è):學生</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> 二.我心中有猛虎,細
27、嗅薔薇。</b></li></p><p><b> </ul></b></p><p> </div> 分塊結(jié)束</p><p><b> 相冊設計</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> 二.金錢這種東西,只要能解決個人的生活就行,若是過多了,它會成為遏制人類才能的禍害。<br> </p><p> 三.
32、今天所做之事勿候明天,自己所做之事勿候他人。<br></p><p> 四. 今天應做的事沒有做,明天再早也是耽誤了。<br></p><p> 五 .具有豐富知識和經(jīng)驗的人,比只有一種知識和經(jīng)驗的人更容易產(chǎn)生新的聯(lián)想和獨到的見解。<br></p><p> 六.科學的每一項巨大成就,都是以大膽的幻想為出發(fā)點的。<b
33、r></p><p><b> 技術文章</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">青春散場,誰知道幸福的摸樣</a> </li></p><p> <li><a href="e.html">獨角戲</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="">等待就是浪費青春</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> 界面設計</b></p>
39、<p> 圖2.1 心情日志頁面</p><p> 圖2.2 主頁截圖2.3 測試</p><p> 通過瀏覽器對網(wǎng)頁進行測試,看一下網(wǎng)頁布局的效果,然后針對一些要改的地方進行修改與調(diào)整直到完成個人首頁的整體布局效果,然后通過點擊一些具有鏈接屬性的文字進行鏈接點擊之后進入所鏈接的頁面,在初次鏈接的時候,網(wǎng)頁做得不是很好,然后通過一系列的編碼修改和測試,最終效果與所
40、得效果與所期待的效果一樣。</p><p><b> 3總結(jié)</b></p><p> 通過這次網(wǎng)頁設計與制作的學習,從中我了解和學習到了很多很多,從Html到css再到javacript,這一過程中,讓我們深深地了解到一個網(wǎng)頁從設計到制作完成過程中所要付出的艱辛與努力,從一個簡單的排版 到最后整體的布局都需要經(jīng)過自己的深思熟慮才能達到一個比較好的結(jié)果,這也并不是
41、一個簡單的過程,需要耐心與恒心才能實現(xiàn)它,當自己真真正正將他做出來時,收獲感與喜悅感將會更加強烈,網(wǎng)頁設計廣泛存在于生活當中,所以學好了他,在社會上我們又將多了一份生存的工具。所以,在這方面,我們更得加油!去努力實現(xiàn)它,直至最好?。?!</p><p><b> 參考文獻</b></p><p> [1] 張學勇,袁偉森. 個人博客系統(tǒng)開發(fā)實戰(zhàn)[M]. 北京:中國軟
42、件行業(yè)產(chǎn)學研合作實訓平臺.</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="">個人簡介</a></li&
50、gt;</p><p> <li><a href="photo.html" accesskey="3" title="">我的相冊</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.你要活得堅強 一直堅強下去 像巨人一樣!<br></p><p> 2.我想給你你要的生活 我會努力</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> 一個人,一本書,一杯茶,一簾夢。<br></p>
60、<p> 站在時光的十字路口,回望過去的種種單純與美好,欣慰而悲涼。<br></p><p> 花開花落,風卷云舒。青春如同流沙般從指縫溜走,過去的倔強與輕,<br></p><p> 原來如此荒誕不羈。俗世喧囂,總會想在空靈停滯的時空內(nèi),獨倚幽窗,<br></p><p> 品一壺清茶,細細體味光陰如梭,年華
61、老去。<br></p><p> <b>二.青春散場,誰知道幸福的摸樣</b><br></p><p> 恍惚中,又是落花滿地,又是草枯葉黃的時節(jié)了,<br></p><p> 寫著盛開在眼眸之外的純白容顏,一行一行爬出來的文字全是落寞。<br></p><p>
62、 這么久為什么看到的還是離人淚。歲月的輪回里,<br></p><p> 到底轉(zhuǎn)動著多少未了的情緣。我們傷心悲涼的經(jīng)過了流年,<br></p><p> 連青春都燃燒殆盡。卻還渡不過寂寞。</p><p><b> </div></b></p><p> <p class
63、="meta"><a href="#" class="more"></a> <</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">青春散場,誰知道
69、幸福的摸樣</a> </li></p><p> <li><a href="e.html">獨角戲</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;>等待就是浪費青春</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"> </div></p><p> <!-- end page
74、 --></p><p> <div id="footer"></p><p> <h1>來了就要留下你的腳?。。。?lt;/h1></p><p><b> </div></b></p><p><b> </body>&
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 眾賞文庫僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 個人博客管理系統(tǒng)課程設計
- 個人博客課程設計
- 個人博客課程設計報告
- 個人博客網(wǎng)站課程設計
- php課程設計---個人博客管理系統(tǒng)前后臺
- javaweb課程設計-基于java的個人博客系統(tǒng)
- 課程設計報告(博客網(wǎng)系統(tǒng))
- web課程設計--個人博客的設計與實現(xiàn)
- 基于b-s模式管理系統(tǒng)課程設計---個人博客后臺管理系統(tǒng)設計
- javaweb課程設計報告--個人博客網(wǎng)站的實現(xiàn)(java)
- j2ee課程設計報告--基于ssh的個人博客系統(tǒng)
- 個人理財系統(tǒng)課程設計
- 個人網(wǎng)站系統(tǒng)課程設計
- 數(shù)據(jù)庫應用課程設計報告-博客管理系統(tǒng)
- javaee 課程設計--個人財務系統(tǒng)
- 個人記賬系統(tǒng)課程設計報告
- 個人博客系統(tǒng)設計【開題報告】
- 畢業(yè)設計---個人博客系統(tǒng)設計
- 個人財務管理系統(tǒng)課程設計
- 個人博客系統(tǒng)畢業(yè)設計論文
評論
0/150
提交評論