網(wǎng)站設計說明書

1、網(wǎng)頁制作工具設計說明書題目：青島濱海學院精品課程網(wǎng)站姓名:王海燕學號:20101070130 班級：10信高1班指導教師：孫俊國完成日期：2011/12/15目錄 TOC o 1-5 h z HYPERLINK l bookmark10 o Current Document 青島濱海學院精品課程設計與制作說明書3 HYPERLINK l bookmark13 o Current Document 第1章網(wǎng)站的規(guī)劃3 HYPERLINK l bookmark16 o Current Document 1.1網(wǎng)站整體規(guī)劃3網(wǎng)站的定位3 HYPERLINK l bookmark19 o Curren

2、t Document 1.2網(wǎng)站功能設計3主頁功能3副頁功能3 HYPERLINK l bookmark27 o Current Document 第2章精品課程網(wǎng)站設計與制作3 HYPERLINK l bookmark30 o Current Document 2.1主頁設計3 HYPERLINK l bookmark43 o Current Document 2.2副頁設計5第3章核心代碼7 HYPERLINK l bookmark64 o Current Document 4.1網(wǎng)頁設計的重點分析84.2網(wǎng)頁設計的難點分析9 HYPERLINK l bookmark70 o Curren

3、t Document 小結(jié):網(wǎng)站設計小結(jié)9 HYPERLINK l bookmark73 o Current Document 參考文獻9青島濱海學院精品課程設計與制作說明書第1章網(wǎng)站的規(guī)劃1.1網(wǎng)站整體規(guī)劃網(wǎng)站的定位精品課程網(wǎng)站是一個學校的網(wǎng)站，首先網(wǎng)站整體上要給人體現(xiàn)出一種，溫馨的、充 滿文化氣息的、先進的、積極進取的校園氛圍，網(wǎng)頁整體上呈現(xiàn)橙黃色色調(diào)，這種色調(diào) 能帶給人熱情奔放、充滿激情正好適合大學生這個年齡段。網(wǎng)站板塊的設置網(wǎng)站的板塊從整體上分為主頁和副頁；進一步細分，主頁是由banner、logo、導航、 欄目組成；而副頁就相對簡潔些，主要分為banner、導航、欄目三個板塊。1.2

4、網(wǎng)站功能設計主頁功能1）通過主頁，你可以了解學校的新聞、教師風采、校園最新動態(tài)、以及國家精品課 程等內(nèi)容。2）同時主頁可以連接到各個副頁和校園論壇，以及友情鏈接各大高校主頁。3）主頁給人以視覺刺激，以擴大瀏覽者的瀏覽興趣，了解更多信息。副頁功能1）副頁把內(nèi)容具體化，是內(nèi)容更豐富、更清晰化。2）副頁的第二個功能是給瀏覽者提供下載平臺，例如：在申報文件中，我像瀏覽 者提供了下載文件功能，和在教學視頻中提供視頻下載。第2章精品課程網(wǎng)站設計與制作2.1主頁設計2.1.1 logo 設計Logo繼續(xù)采用我們學校的logo設計，把一個橢圓分成三塊，用三原色著色，分別 有不同的內(nèi)涵。Logo截圖如下:2.1

5、.2 banner 設計Banner是一進大門看到的凝聚雕塑，和與大門正對的嵩德樓結(jié)合而成，而且還有 文字型解讀學校歷史，并且集合了學校校訓：“開拓勤奮，坦誠務實?！币苍鲩L了網(wǎng)頁的 觀賞性。Banner截圖如下：欄目設計欄目排版豐富而又條理，即增加了閱讀性，又體現(xiàn)出美觀大方。欄目截圖如下:|曼.國家級精品課程】一應用韓語一 省級精品津程】一商務韓語校級精品課程】一影視欣賞申報精品課程】一動漫申報文件】中文解讀卷俊德：學術帶頭人（教 授），博士生導師，享受國 務院特殊津貼。曾荻國家人 事部中青年有突出貢獻專家 榮譽稱號，曾兼任全國氣相 沉租委員含委員氣現(xiàn)兼任腐 蝕與防護委員會理事，山西 表原市丞

6、處理協(xié)會理。發(fā)耒 學術論文洲。余篇校園網(wǎng)入口：點擊電 腦圖標進入校園網(wǎng)， 了解校園最新動態(tài)， 查看個人成績，校園 耒現(xiàn)令無下好召升=全體師生考依圖書館入口：圖書: 館篇有圖書150萬 本，是歡迎同學們 借閱。J7V郵箱I校長郵箱：導航設計導航欄主要運用flash動畫菜單欄工具，圖片交換，使要點擊內(nèi)容突出，既美觀又大方。導航欄截圖如下:風格與色彩搭配整體上采用尸字形設計風格，是內(nèi)容更加豐富，主頁采用潛橙與橙色里加了點紅 色的色彩搭配。給人一種溫馨而又充滿激情感覺，增加讀者的閱讀興趣，使網(wǎng)頁更具有 瀏覽性。技術運用1）主要應用表格進行布局，運用div和ap-div進行輔助布局。2）導航主要運用fl

7、ash動畫技術。3）運用fireworks以及ps對圖片進行處理、融合，設計出風格獨特獨特的banner， 以及做出網(wǎng)頁效果圖。4）應用代碼進行加工處理實現(xiàn)圖片與字的滾動以及統(tǒng)計瀏覽次數(shù)。2.2副頁設計副頁1欄目設計不同的副頁欄目設計不同，例如教學視頻副頁里添加了視頻在線瀏覽欄目，教學簡介里 則增加了對教師的介紹以及風采展示，還有校園風光里則增加了校園風景的動態(tài)瀏覽欄 目，聯(lián)系我們里則對班級同學進行了展示等等。欄目截圖如下：導航設計副頁導航與主頁導航并不完全相同，副頁導航更加簡練。截圖如下：風格與色彩搭配副頁色彩與主頁保持一致，副頁風格主要采用T型布局，和E型布局，跟據(jù)內(nèi)容 不同，添加不同欄目

8、框架。技術運用1）通知運用流動字體代碼編寫，圖片有的采用流動圖片代碼，有的使用flash技術 制作。2）運用fireworks以及ps對圖片進行處理、融合，設計出風格獨特獨特的banner， 以及做出網(wǎng)頁效果圖。副頁2欄目設計欄目設計根據(jù)內(nèi)容設計不同風格欄目。截圖如下：指定區(qū)域截圖irnBK日風光Craafied by MTdqJRegister Ntow 蟄 wemwe EU& rtaemTar我校開校園文化建設工作會韓國光州大學領導苗河我校校園新屁我稅召開考概動員大會風格與色彩搭配與主頁風格色彩相同。技術運用1）應用flash技術制做圖片展示，利用fireworks設計bannero2）運

9、用ap-div布局。第3章核心代碼 第4章精品課程網(wǎng)站網(wǎng)頁設計的重難點分析4.1網(wǎng)頁設計的重點分析主要體現(xiàn)在板式設計，色彩搭配上圍繞一個重點，整體協(xié)調(diào)，內(nèi)容豐富，特別 要突出主題，副頁既要體現(xiàn)與主頁的協(xié)調(diào)，還要突出不同主題的風格這是重點。欄目布局。網(wǎng)頁布局有“國”字型、拐角型、標題正文型、左右框架型、上下 框架型、綜合框架型、封面型、Flash型、變化型等多種形式。采用表格布局我認為是 最佳選擇，雖然布局的過程簡單易用，但是問題很多，例如：超鏈接問題，還不太穩(wěn)定； 采用ap-div進行輔助布局，但ap-div隨分辨率改變而發(fā)生變化，不過結(jié)果還算理想， 以后打算采用更穩(wěn)定的div布局4.2網(wǎng)頁設

10、計的難點分析1）網(wǎng)頁采用表格布局，不穩(wěn)定容易溢出，是整個網(wǎng)頁出現(xiàn)裂痕。2）超鏈接有時連不上。3）寫代碼時要考慮表格的代碼，進一步增加了難度，還有ap-div像素問題都是難 點。小結(jié)：網(wǎng)站設計小結(jié)在現(xiàn)代快速發(fā)展的社會，報紙、紙質(zhì)圖書將要被取代，一個重要的信息來源就是互 聯(lián)網(wǎng)，要想在互聯(lián)網(wǎng)上瀏覽信息，必須通過網(wǎng)站，所以網(wǎng)站的建設將更能使用戶更好的 運用互聯(lián)網(wǎng)，網(wǎng)站的實用性、美觀程度也促生了一些行業(yè)，例如：網(wǎng)頁美觀，網(wǎng)站模板 設計等，因此網(wǎng)站建設顯得尤為重要。學校網(wǎng)站建設，即方便同學們?yōu)g覽信息，也給外界了解我們學校提供了平臺，同時 也可在網(wǎng)站上進行師生交流，增加同學與老師的距離，也可使同學們在校園網(wǎng)

11、上學習優(yōu) 秀教師的教學視頻，給同學們提供更多的教學平臺。網(wǎng)站設計是一個繁瑣而又有意義的工作，考驗我們專業(yè)知識的同時，也在考驗著我 們的耐心。在網(wǎng)頁里可以體現(xiàn)我們的創(chuàng)意，設計方法讓我們的想法變得可視化，因此網(wǎng) 站建設也能體味其中的樂趣。參考文獻1 dreamweaver網(wǎng)頁設計與制作案例教程 3祈大鵬dreamweaver es4實用教程.北京：電子工業(yè)出版社，2010信息工程學院網(wǎng)頁制作工具實踐環(huán)節(jié)考核報告單2011-2012學年度第1學期期末排課編號：(2011-2012-1)-0714394-00425-1批閱日期： 年 月 日姓名王海燕班級10信高1班學號20101070130評分標準與評 價評分標準分值得分網(wǎng)站規(guī)劃好、素材