網(wǎng)頁設(shè)計說明書.doc

1、設(shè)計說明書需求分析目標(biāo)定位a、 制作這個網(wǎng)站的目的是為了方便我們學(xué)院的新生與老生能快速瀏覽的我們學(xué)校的基本情況，了解我們學(xué)校所有好玩，有趣的事情。b、 本網(wǎng)站的主要職能是實時為新生提供部分新的資訊。c、 本網(wǎng)站所面向的用戶是所有進(jìn)入我校的同學(xué)以及想要了解我們學(xué)校的用戶。用戶分析a、 使用本網(wǎng)站的用戶主要是想要了解我們學(xué)校的所有信息，并且能夠為他們提供所需的生活所需的信息。b、 他們最想本網(wǎng)站為他們提供校內(nèi)外的所有資訊，包括飲食，住宿，景點旅游等。c、 本網(wǎng)站制作內(nèi)容架構(gòu)清晰，避免過多的文字介紹造成用戶過多閱讀的麻煩。d、 用戶可以每天瀏覽我們?yōu)槠涮峁┑膶崟r熱點以及校內(nèi)外最新的資訊，比如：校園通

2、知、飯?zhí)脙r格等。市場前景a、 本網(wǎng)站的市場需求在于為本校師生以及想要了解我校的用戶提供最便捷，最新的信息。b、 基于前面的分析， 決定了本網(wǎng)站的設(shè)計風(fēng)格要簡明、清晰；主題圍繞著學(xué)生所需而開展。網(wǎng)站規(guī)劃內(nèi)容策劃a、 本往網(wǎng)站主要經(jīng)營的內(nèi)容是：校園文化、校園資訊、美食住宿、周邊景點等主題。b、 基于以上主題，其中重點制作的是校園文化和美食住宿；而輔助的是校園資訊等主題。對于網(wǎng)頁如此劃分的目的是， 使用本網(wǎng)站的用戶都是想要了解我們學(xué)校于他們息息相關(guān)的事情，無論是新生、老生還是其他用戶，都想知道我們學(xué)校有哪些特色的文化和美食。文化可以增進(jìn)他們知道我們學(xué)校的最近的文化活動生活。 而美食， 則能吸引更多的

3、學(xué)生來了解我們學(xué)校的吃貨，這對于新進(jìn)校園的新生有著極強引導(dǎo)作用。界面設(shè)計a、 對于每個版塊的設(shè)計都有著其不同的元素，首頁，主要突出網(wǎng)頁圍繞的主題設(shè)計導(dǎo)航，并且使用簡單明了的文字對學(xué)院做出說明；而二級頁面，則分為六個版塊，每個版塊都有著不同的設(shè)計元素來突出其主題； 對于三級頁面， 由于其劃分表達(dá)內(nèi)容上得較為詳細(xì)，所以社體元素較為單調(diào)以圖文介紹為主。b、 全版設(shè)計所使用的元素極為簡單，主要以框架、線條、設(shè)計，在此基礎(chǔ)之上配合色彩、陰影、重疊、浮動、定位等的元素來協(xié)調(diào)畫面風(fēng)格。c、 對于次級頁面的導(dǎo)航欄設(shè)計，是浮動置于頁面的底部，這樣設(shè)計的效果是讓用戶瀏覽簡潔方便，而且導(dǎo)航欄不會占據(jù)頁面的內(nèi)容。網(wǎng)站

4、設(shè)計網(wǎng)站架構(gòu)圖水院生活指南網(wǎng)社團活動水院文化學(xué)習(xí)環(huán)境校園風(fēng)光機構(gòu)設(shè)置宣傳視頻*細(xì)模塊 *招生就業(yè)水院資訊水院要聞吃遍水院住宿環(huán)境校園內(nèi)部生活指南街口廣百購物娛樂欣榮商城流溪灘*涂折疊快 *周邊景點石門公園森林公園流溪公園交通路線頁面設(shè)計圖主頁面水院生活指南（）首頁輪播：學(xué)院各主題圖文本：簡介水院水院文化生活指南機構(gòu)設(shè)置周邊景點水院資訊交通路線?水院單位二級頁面水院文化（）首頁首頁：水院文化文本：文化生活簡潔社團活動學(xué)習(xí)環(huán)境宣傳視頻拖動形狀至中心， 跳轉(zhuǎn)到下一頁面拖動后，形狀復(fù)位校園風(fēng)光?水院單位機構(gòu)設(shè)置（）首頁首頁：機構(gòu)設(shè)置主體部門教學(xué)系部黨群組織行政單位教輔單位動圖（左右滑動） ：師資力量，

5、學(xué)生作品?水院單位水院資訊（）首頁首頁：水院資訊文字滾動欄招生就業(yè)水院要聞?wù)猩蜆I(yè)水院要聞可加折疊顯示?水院單位生活指南（）首頁輪播：生活主題圖片首頁：生活指南吃貨圖片住宿圖片購物、美味與住宿街口中心欣榮商圈第九菜系學(xué)生宿舍?水院單位周邊景點（）首頁首頁：周邊景點文本：介紹周圍景點帶圖標(biāo)：溪頭村帶圖標(biāo)：石門帶圖標(biāo)：玫瑰園帶圖標(biāo)：流溪河?水院單位交通路線（）首頁首頁：交通路線到校自駕車到校公車游玩路線?水院單位三級頁面社團活動 -首頁首頁：水院文化 社團活動大屏顯示（未點擊時，出現(xiàn)社團主體圖點擊時，輪換到每個社團的介紹內(nèi)容）?水院單位學(xué)習(xí)環(huán)境（）首頁首頁：水院文化 學(xué)習(xí)環(huán)境學(xué)習(xí)（設(shè)計）圖片簡潔文

6、字說明以下類推（具體見詳細(xì)圖）長邊幅網(wǎng)頁，上下拖動，參考“八音盒”頂部?水院單位校園風(fēng)光首頁首頁：水院文化 校園風(fēng)光環(huán)境（設(shè)計）圖片簡潔文字說明以下類推（具體見詳細(xì)圖）長邊幅網(wǎng)頁，上下拖動，參考“八音盒”頂部?水院單位宣傳視頻（）首頁首頁：水院文化 宣傳視頻視頻窗口視頻窗口?水院單位街口中心（）首頁首頁：生后指南 街口中心簡介街口購物中心圖片短文字簡介短文字簡介?水院單位欣榮商圈首頁首頁：生后指南 欣榮商圈簡介欣榮宏廣場圖片短文字簡介短文字簡介?水院單位第九菜系（）首頁首頁：生后指南 第九菜系輪播：特色菜歷屆學(xué)生評價飯?zhí)萌な露涛淖趾喗?水院單位學(xué)生宿舍首頁首頁：生后指南 學(xué)生宿舍宿舍彩漫動圖高

7、清、特寫（亂搭）?水院單位部分板塊設(shè)計圖周邊景點 -折疊塊設(shè)計圖首頁：周邊景點 玫瑰園 詳細(xì)介紹景點大圖基本信息景點亮點溫馨提示上下折疊模塊（表格）?水院單位學(xué)習(xí)環(huán)境詳細(xì)設(shè)計圖（主要參考八音盒）首頁首頁：水院文化 學(xué)習(xí)環(huán)境環(huán)氛境圍（設(shè)設(shè)計）計）圖片圖片簡潔文字說明靜謐相冊（設(shè)計）圖片?水院單位底部導(dǎo)航條首頁水 院 文化機 構(gòu) 設(shè)置水院資訊生 活指南周 邊 景點交 通 路線程序設(shè)計模板代碼 水院生活指南 /*公共樣式 */*margin:0px;padding:0px;ul lilist-style-type:none;#page atext-decoration: none;color:#00

8、0;text-shadow:none; p,h2text-shadow:none;color:#000;body #pagebackground-image:url(img/);fonttext-shadow:none;/*body margin-bottom:60px !important; /*頁面上升 */*內(nèi)容樣式 */*頁眉 */.headwidth:100%;height:40px;background:#ddd;/* 內(nèi)容 */.navwidth:90%;height:60px;border-bottom:1px #000 solid;margin:20px auto;/* 頁腳 */.foot ptext-align:center;color:#000;/*導(dǎo)航樣式 */首頁 當(dāng)前位置： 首頁 水院資訊 廣東水利電力職業(yè)技術(shù)學(xué)院©