存檔資料 成績：華東交通大學理工學院課程設計報告書所屬課程名稱網頁設計與制作實例教程題目Css+Div網頁博客制作分院電信分院專業班級信息管理與信息系統1班學號20110210450107學生姓名汪曉月指導教師程志平2014 年 1 月 1 日華東交通大學理工學院課程設計報告目 錄第1章博客類網站設計............................................................................................21.1引言............................................................................................................................2第2章設計思想與步驟...............................................................................................32.1設計思想.............................................................................................................32.1.1設計方案...................................................................................................32.1.2設計技術亮點.............................................................................................32.2設計步驟.............................................................................................................32.2.1博客首頁的設計.........................................................................................32.2.2博客日志頁的設計.....................................................................................52.2.3博客相冊頁的設計.....................................................................................62.2.4心情訴說頁的設計.....................................................................................72.2.5博客留言頁的設計.......................................................................................82.2.6博友頁的設計.............................................................................................10第3章頁面布局與規劃.............................................................................................11第4章相關代碼.........................................................................................................12第5章課程設計心得.................................................................................................14第6章參考文獻.........................................................................................................15華東交通大學理工學院課程設計報告第1章博客類網站設計1.1引言現在網絡通訊越來越發達了，網上博客已經成為人們交流必不可少的工具。博客給我們提供一個相當方便的交流平臺，注冊博客的博友們都知道，博客與電子郵箱、即時網上聊天等有著相當方便的優點，適用于廣大網民。網絡日記本方便可靠安全性好，交友留言，相片上傳，個性音樂設置，還有動態心情等等，非常便捷。意義：根據本課程設計的要求，本人制作了一個博客類網站，本網站仿效一些大型博客類網站，內容相對比較簡寫。就內容有博客首頁、留言、相冊、心情訴說、博友、留言等，采用的是靜態網頁制作技術。用到flash、一些代碼制作、背景音樂，標簽滾動公告。采用統一附加樣式，使界面結構框架統一。還有動態導航條和動態日歷，整體讓人一目了然，方便瀏覽。設計目的:進一步熟練掌握軟件Dreamweaver8，更一步提升網頁的熟練設計；由普通的網頁設計更進一步專業網站的設計，全面了解專業網站布局與設計，技巧亮點等等。設計技術指標與要求:在網頁中插入Flash；利用標簽選擇和代碼提示制作滾動公告；利用插入文本域制作登錄區；制作圓角表格；利用附加外部CSS樣式快速制作出統一風格的網頁；使用代碼提示制作帶背景音樂的網頁。-2-華東交通大學理工學院課程設計報告第2章 設計思想與步驟2.1 設計思想 設計方案方案:考慮到博客類網站的大部分設計風格都相同，在參考了一些例如新浪博客和126博客和QQ空間后，就是領悟博客不外乎有首頁，有相冊，留言，交友，寫日記文章等等。所以本人在這次設計業采用普通博客類的風格，做了一個簡單的博客類網站，統一布局風格，共7個頁面，相對比較簡陋，內容也相對簡單,流程圖如下： 設計技術亮點主要有Flash的插入，滾動公告和滾動相冊的制作，代碼插入背景音樂，動態日歷，動態導航條的制作，友情鏈接的等等。設計布局采用統一CSS樣式，網頁頂部導航相同，統一風格，綠色為背景，讓人有健康和諧的感覺。2.2 設計步驟 博客首頁的設計第3頁共16頁華東交通大學理工學院課程設計報告圖一 首頁設計（1）上圖1為每頁所具有相同頂部頁，在每頁頂部中插入可以滑動導航條，動態滾動文字，圖片和 flash，其中flash 已經透明化。滾動文字代碼如下<divclass="STYLE1"id="Layer31"><marqueescrollamount="2"direction="left" width="400" onMouseOver="this.stop()"onMouseOut="this.start()"> 歡迎光臨黃文燕的博客空間，在這里我們一起交流合作，傾聽，這里有屬于我們的世界??一切從這里開始??我們一起樂天地??</marquee></div>。圖二 首頁內容首頁內容如上圖2，登錄區域是用插入文本域來制作的，動態日歷時采用插入代碼的形式，首頁中間有今日關注的最新動態新聞，點擊可以有相第4頁共16頁華東交通大學理工學院課程設計報告關的鏈接，瀏覽新聞。右邊有人生警句，下面有博文，最近更新news，采用的是文字向上滾動效果，布局色彩相對還是比較搭配。 博客日志頁的設計圖三 日志頁內容日志頁內容如上圖 3，頁面左邊是一些圖片用以美化頁面， 右上是日記列表，里面有日記分類，如個人日記、博友日記，分享日記，轉載日記等等。下面顯示的十最新更新的博客文章?？梢詫ψ罱娜沼涍M行管理，如修改，刪除等等。每篇日記還添加了行為鏈接，當鼠標單擊是會彈出相關的日記內容的窗口，可以瀏覽日記內容。日記列表相關代碼如下：<td><img src="images/w.jpg" width="12" height="12"><spanclass="STYLE4"onMouseDown="MM_openBrWindow('riji.html','','')">[<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="STYLE4">[<u>個人日記</u>] 天天飲食的始終第5頁共16頁華東交通大學理工學院課程設計報告家常菜，你會會了嗎？(4/7) <imgsrc="images/j.jpg" width="13"height="11"> 編輯。 博客相冊頁的設計圖四 相冊頁面相冊頁面如上圖 4，相冊頁面有公告欄，有最新相冊模板，相冊評論，相冊容量顯示等等。有滾動相冊，兩個滾動相冊相對方向來回滾動，下面是相冊管理，顯示相冊張數，名稱等等。其中相冊滾動代碼如下 :<div id="Layer42"><marqueescrollamount="7"behavior="alternate" loop="100" direction="left"height="100"width="760">網頁設計課程設計 個人博客網頁 人物1.jpg"border=2>網頁設計課程設計 個人博客網頁 人物2.jpg"border=2>網頁設計課程設計 個人博客網頁 人物5.jpg"border=2>第6頁共16頁華東交通大學理工學院課程設計報告網頁設計課程設計 個人博客網頁 人物6.jpg"border=2>網頁設計課程設計 個人博客網頁 人物7.jpg"border=2>網頁設計課程設計 個人博客網頁 人物8.jpg"border=2>網頁設計課程設計 個人博客網頁 人物12.jpg"border=2>網頁設計課程設計 個人博客網頁 人物11.jpg"border=2></marquee></div> 心情訴說頁的設計圖五 心情訴說心情訴說頁內容如上圖 5，右邊有最新動態，心情說說，博友隨筆，生活感悟，文章轉載等等，還有心情收藏，即是最新文章收藏。第7頁共16頁華東交通大學理工學院課程設計報告 博客留言頁的設計博客留言頁有兩個頁面，查看留言頁和填寫留言頁。主要代碼有友情鏈接：<tablewidth="55%"border="0"align="center"><tr><thscope="col"><divalign="center"class="STYLE5"> 友情鏈接</div></th></tr><tr><td><formid="form1"name="form1"method="post"action=""><selectname="menu1"onChange="MM_jumpMenu('parent',this,0)"><option 新浪博客</option><option 我要自學</option>p;pn=0&db=0&s=8&word=%CC%EC%CC%EC%D2%FB%CA%B3&fr=ala0">天天飲食</option>shili/">網頁設計學習</option></select></form></td></tr></table>第8頁共16頁華東交通大學理工學院課程設計報告圖六 查看留言頁查看留言頁如上圖6，查看留言頁有不同博友的留言，可以看到博友的留言，頭像，呢稱，頁可以編輯留言，如QQ留言、編輯、刪除等，左邊還有友情鏈接，查看留言，填寫留言，添加留言等，點擊會跳到相關的鏈接。在此頁面。你可以隨時瀏覽到博友的不同心情，隨時可以看到最新動態，同樣通過友情鏈接，可以看到不同的好友，還有喜歡的網站。圖七 填寫留言頁填寫留言頁如上圖 7，填寫留言頁左邊主要是圖片，用來美化頁面。 用到了鼠標經過圖像，圖像導航條，更生動，右邊就是相關的填寫留言，昵第9頁共16頁華東交通大學理工學院課程設計報告稱，地址，聯系方式，填寫留言內容，提交等等。下面還插入了一下閃圖小貓，更具生動可愛。 博友頁的設計圖八 博友頁博友頁如上圖8，博友頁左邊有最近訪客，顯示博友頭像，呢稱，可以查看博友資料，取消關注等等。上面有好友動態，心情等等。下面有評論，可以查看，評論，轉發，右邊有博友管理，還有博友分類，添加，查找，刪除，是否公開等等。第10頁共16頁華東交通大學理工學院課程設計報告第3章 頁面布局與規劃頁面布局與規劃在網頁制作中，有許多的術語，例如： CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關于 HTML的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的 HTML基礎。下面我們就開始一步一步使用DIV+CSS進行網頁布局設計吧。所有的設計第一步就是構思， 構思好了，一般來說還需要用 PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來。實際的頁面局部圖如下：第11頁共16頁華東交通大學理工學院課程設計報告第4章 相關代碼<td><img src="images/w.jpg" width="12" height="12"><spanclass="STYLE4"onMouseDown="MM_openBrWindow('riji.html','','')">[<u> 個人日記</u>] 你是自己，你了解多少？(0/5) <img src="images/j.jpg"width="13"height="11"> 編輯更多</span></td></span></td><td><imgsrc="images/w.jpg"width="12"height="12"><spanclass="STYLE4">[<u>個人日記</u>]天天飲食的始終家常菜，你會會了嗎？(4/7)<imgsrc="images/j.jpg"width="13"height="11"><divid="Layer42"><marqueescrollamount="7"behavior="alternate"loop="100"direction="left"height="100"width="760">網頁設計課程設計個人博客網頁人物1.jpg"border=2>網頁設計課程設計個人博客網頁人物2.jpg"border=2>網頁設計課程設計個人博客網頁人物5.jpg"border=2>網頁設計課程設計個人博客網頁人物6.jpg"border=2>網頁設計課程設計個人博客網頁人物7.jpg"border=2>網頁設計課程設計個人博客網頁人物8.jpg"border=2>第12頁共16頁華東交通大學理工學院課程設計報告網頁設計課程設計 個人博客網頁 人物12.jpg"border=2>網頁設計課程設計 個人博客網頁 人物11.jpg"border=2></marquee></div><tablewidth="55%"border="0"align="center"><tr><thscope="col"><divalign="center"class="STYLE5"> 友情鏈接</div></th></tr><tr><td><formid="form1"name="form1"method="post"action=""><selectname="menu1"onChange="MM_jumpMenu('parent',this,0)"><option 新浪博客</option><option 我要自學</option>p;pn=0&db=0&s=8&word=%CC%EC%CC%EC%D2%FB%CA%B3&fr=ala0">天天飲食</option>eavershili/"> 網頁設計學習