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

1、網(wǎng)頁制作工具設(shè)計說明書題目：青島濱海學(xué)院精品課程網(wǎng)站姓名:王海燕學(xué)號:20101070130 班級：10信高1班指導(dǎo)教師：孫俊國完成日期：2011/12/15目錄 TOC o 1-5 h z HYPERLINK l bookmark10 o Current Document 青島濱海學(xué)院精品課程設(shè)計與制作說明書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)站功能設(shè)計3主頁功能3副頁功能3 HYPERLINK l bookmark27 o Current Document 第2章精品課程網(wǎng)站設(shè)計與制作3 HYPERLINK l bookmark30 o Current Document 2.1主頁設(shè)計3 HYPERLINK l bookmark43 o Current Document 2.2副頁設(shè)計5第3章核心代碼7 HYPERLINK l bookmark64 o Current Document 4.1網(wǎng)頁設(shè)計的重點分析84.2網(wǎng)頁設(shè)計的難點分析9 HYPERLINK l bookmark70 o Curren

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

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

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

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

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

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

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

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

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