網(wǎng)頁設計課程設計報告

1、欽 州學院網(wǎng)頁設計課程設計報告博客類網(wǎng)站的設計院 系 物理與材料科學學院 專 業(yè) 電子信息工程 學 生 班 級 2007級1班 姓 名 黃文燕 學 號 0705401119 指導教師單位 欽州學院 指導教師姓名 曲藝 指導教師職稱 助教 2010年11月博客類網(wǎng)站的設計電子信息工程專業(yè)2007級 黃文燕指導教師 曲藝摘要：根據(jù)本課程設計的要求，本人制作了一個博客類網(wǎng)站，本網(wǎng)站仿效一些大型博客類網(wǎng)站，內容相對比較簡寫。就內容有博客首頁、留言、相冊、心情訴說、博友、留言等，采用的是靜態(tài)網(wǎng)頁制作技術。用到flash、一些代碼制作、背景音樂，標簽滾動公告。采用統(tǒng)一附加樣式，使界面結構框架統(tǒng)一。還有動態(tài)

2、導航條和動態(tài)日歷，整體讓人一目了然，方便瀏覽。關鍵詞：日記，相冊，心情，博友，留言設計目的:（1）進一步熟練掌握軟件Dreamweaver8 ，更一步提升網(wǎng)頁的熟練設計；（2）由普通的網(wǎng)頁設計更進一步專業(yè)網(wǎng)站的設計，全面了解專業(yè)網(wǎng)站布局與設計，技巧亮點等等。設計技術指標與要求:（1）在網(wǎng)頁中插入Flash；（2）利用標簽選擇和代碼提示制作滾動公告；（3）利用插入文本域制作登錄區(qū)；（4）制作圓角表格；（5）利用附加外部CSS樣式快速制作出統(tǒng)一風格的網(wǎng)頁；（6）使用代碼提示制作帶背景音樂的網(wǎng)頁。目錄前言11 博客類網(wǎng)站的設計 11.1 設計思想 11.1.1 設計方案11.1.2 設計技術亮點11

3、.2 設計步驟 11.2.1 博客首頁的設計11.2.2 博客日志頁的設計31.2.3 博客相冊頁的設計 41.2.4 心情訴說頁的設計51.2.5 博客留言頁的設計51.2.6 博友頁的設計72 作品測試與驗收 83 設計體會 8參考文獻 8 8 / 11文檔可自由編輯打印前言現(xiàn)在網(wǎng)絡通訊越來越發(fā)達了，網(wǎng)上博客已經(jīng)成為人們交流必不可少的工具。博客給我們提供一個相當方便的交流平臺，注冊博客的博友們都知道，博客與電子郵箱、即時網(wǎng)上聊天等有著相當方便的優(yōu)點，適用于廣大網(wǎng)民。網(wǎng)絡日記本方便可靠安全性好，交友留言，相片上傳，個性音樂設置，還有動態(tài)心情等等，非常便捷。1 博客類網(wǎng)站的設計1.1 設計思想

4、1.1.1 設計方案方案:考慮到博客類網(wǎng)站的大部分設計風格都相同，在參考了一些例如新浪博客和126博客和QQ空間后，就是領悟博客不外乎有首頁，有相冊，留言，交友，寫日記文章等等。所以本人在這次設計業(yè)采用普通博客類的風格，做了一個簡單的博客類網(wǎng)站，統(tǒng)一布局風格，共7個頁面，相對比較簡陋，內容也相對簡單,流程圖如下：博客類網(wǎng)站博客首頁博客相冊博客日記心情訴說博客留言博友1.1.2 設計技術亮點主要有Flash的插入，滾動公告和滾動相冊的制作，代碼插入背景音樂，動態(tài)日歷，動態(tài)導航條的制作，友情鏈接的等等。設計布局采用統(tǒng)一CSS樣式，網(wǎng)頁頂部導航相同，統(tǒng)一風格，綠色為背景，讓人有健康和諧的感覺。1.2

5、 設計步驟1.2.1 博客首頁的設計圖1（1）上圖1為每頁所具有相同頂部頁，在每頁頂部中插入可以滑動導航條，動態(tài)滾動文字，圖片和flash，其中flash已經(jīng)透明化。滾動文字代碼如下<div class="STYLE1" id="Layer31"><marquee scrollamount="2" direction="left" width="400" onMouseOver="this.stop()" onMouseOut="this.star

6、t()">歡迎光臨黃文燕的博客空間，在這里我們一起交流合作，傾聽，這里有屬于我們的世界一切從這里開始我們一起樂天地</marquee></div>。圖2首頁內容如上圖2，登錄區(qū)域是用插入文本域來制作的，動態(tài)日歷時采用插入代碼的形式，首頁中間有今日關注的最新動態(tài)新聞，點擊可以有相關的鏈接，瀏覽新聞。右邊有人生警句，下面有博文，最近更新news，采用的是文字向上滾動效果，布局色彩相對還是比較搭配。1.2.2 博客日志頁的設計圖3日志頁內容如上圖3，頁面左邊是一些圖片用以美化頁面，右上是日記列表，里面有日記分類，如個人日記、博友日記，分享日記，轉載日記等等。下

7、面顯示的十最新更新的博客文章?？梢詫ψ罱娜沼涍M行管理，如修改，刪除等等。每篇日記還添加了行為鏈接，當鼠標單擊是會彈出相關的日記內容的窗口，可以瀏覽日記內容。日記列表相關代碼如下：<td><img src="images/w.jpg" width="12" height="12"><span class="STYLE4" onMouseDown="MM_openBrWindow('riji.html','','')"&

8、gt;<u>個人日記</u> 你是自己，你了解多少？(0/5) <img src="images/j.jpg" width="13" height="11"> 編輯 更多</span></td></span></td><td><img src="images/w.jpg" width="12" height="12"><span class="STYLE

9、4"><u>個人日記</u> 天天飲食的始終家常菜，你會會了嗎？(4/7) <img src="images/j.jpg" width="13" height="11"> 編輯。1.2.3 博客相冊頁的設計圖4相冊頁面如上圖4，相冊頁面有公告欄，有最新相冊模板，相冊評論，相冊容量顯示等等。有滾動相冊，兩個滾動相冊相對方向來回滾動，下面是相冊管理，顯示相冊張數(shù)，名稱等等。其中相冊滾動代碼如下:<div id="Layer42"><marquee s

10、crollamount="7"behavior="alternate" loop="100" direction="left" height="100" width="760"><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物1.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images

11、人物2.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物5.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物6.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物7.jpg" border=2><IMG width

12、=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物8.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物12.jpg" border=2><IMG width=140 height=105 src="F:網(wǎng)頁設計課程設計個人博客網(wǎng)頁images人物11.jpg" border=2></marquee></div> 1.2.4 心情訴說頁的設計圖5心情訴說頁

13、內容如上圖5，右邊有最新動態(tài)，心情說說，博友隨筆，生活感悟，文章轉載等等，還有心情收藏，即是最新文章收藏。1.2.5 博客留言頁的設計博客留言頁有兩個頁面，查看留言頁和填寫留言頁。主要代碼有友情鏈接：<table width="55%" border="0" align="center"><tr><th scope="col"><div align="center" class="STYLE5">友情鏈接</div>

14、</th></tr><tr><td><form id="form1" name="form1" method="post" action=""><select name="menu1" onChange="MM_jumpMenu('parent',this,0)"><option value="">新浪博客</option> <option

15、 value="">我要自學</option> <optionvalue="">天天飲食</option><optionvalue="">網(wǎng)頁設計學習</option> </select> </form> </td> </tr> </table>圖6查看留言頁如上圖6，查看留言頁有不同博友的留言，可以看到博友的留言，頭像，呢稱，頁可以編輯留言，如QQ留言、編輯、刪除等，左邊還有友情鏈接，查看留言，填寫留言，添加

16、留言等，點擊會跳到相關的鏈接。在此頁面。你可以隨時瀏覽到博友的不同心情，隨時可以看到最新動態(tài)，同樣通過友情鏈接，可以看到不同的好友，還有喜歡的網(wǎng)站。圖7填寫留言頁如上圖7，填寫留言頁左邊主要是圖片，用來美化頁面。用到了鼠標經(jīng)過圖像，圖像導航條，更生動，右邊就是相關的填寫留言，昵稱，地址，聯(lián)系方式，填寫留言內容，提交等等。下面還插入了一下閃圖小貓，更具生動可愛。1.2.6 博友頁的設計圖8博友頁如上圖8，博友頁左邊有最近訪客，顯示博友頭像，呢稱，可以查看博友資料，取消關注等等。上面有好友動態(tài)，心情等等。下面有評論，可以查看，評論，轉發(fā)，右邊有博友管理，還有博友分類，添加，查找，刪除，是否公開等等。2 作品測試與驗收作品的測試與驗收實質就是做完作品設計后測試作品，看看是否按設計要求實現(xiàn)相關的功能。本人在今次設計作品到完成過程中花費了相當多的時間，參考了較多相關的網(wǎng)站，最終能夠按時完成，并測試，整體上實現(xiàn)功能，成功通過了老師的驗收。3 設計體會在設計的過程，我了解了許多關于網(wǎng)站的知識，首先在設計之前需有方案，有整體的布局，流程分析，也懂得相關專業(yè)網(wǎng)站設計步驟。同時了解到自己在網(wǎng)頁設計方面知識欠缺，許多知識點都還沒有