【導(dǎo)讀】工作中遇到的實際問題，培養(yǎng)實際研發(fā)能力，將課堂知識轉(zhuǎn)化為實踐能力。計論文提高綜合分析能力，同時將專業(yè)技術(shù)知識上升到理論概括認識。JavaScript等腳本語言編寫代碼，熟悉MySQL數(shù)據(jù)庫，能設(shè)計并實現(xiàn)數(shù)據(jù)庫，熟練使用SQL常用語句。完成開發(fā)并進行測試。點是開源、簡單、速度快、性能穩(wěn)定。HTML、PHP、JavaScript等目前流行的腳本語言。修改和刪除數(shù)據(jù)，并對其進行后期的維護。于天恩，PHP精解案例教程，清華大學(xué)出版社、北京交通大學(xué)出版社，

　　

【正文】 。微軟等公司均為 W3C 支持者。這一點是最重要的，因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡(luò)應(yīng)用的升級而被淘汰。 支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是 IE7或者是火狐，您的網(wǎng)站都能很好的兼容。 搜索引擎更加友好。相對與傳統(tǒng)的 table, 采用 DIV + CSS 技術(shù)的網(wǎng)頁，對于搜索引擎的收錄更加友好。 樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便。 現(xiàn)在 YAHOO， MSN 等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的 網(wǎng)站，均采用 DIV + CSS 的框架模式，更加印證了 DIV + CSS 本科畢業(yè)設(shè)計論文 17 是大勢所趨。 CSS 的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。 CSS 網(wǎng)頁布局的意義體現(xiàn)在如下方面： 使頁面載入得更快 由于將大部分頁面代碼寫在了 CSS 當中，使得頁面體積容量變得更小。相對于表格嵌套的方式， DIV+CSS 將頁面獨立成更多的區(qū)域，在打開頁面的時候，逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里，使得加載速度很慢。 降低流量費用 頁面體積變小，瀏覽速度變快，這就使得對于某些控制主機流量的網(wǎng)站來說是最大的優(yōu)勢了。 修改設(shè)計時更有效率 由于使用了 DIV+CSS 制作方法，在修改頁面的時候更加容易省時。根據(jù)區(qū)域內(nèi)容標記，到 CSS 里找到相應(yīng)的 ID，使 得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式。 保持視覺的一致性 DIV+CSS 最重要的優(yōu)勢之一：保持視覺的一致性；以往表格嵌套的制作方法，會使得頁面與頁面，或者區(qū)域與區(qū)域之間的顯示效果會有偏差。而使用DIV+CSS 的制作方法，將所有頁面，或所有區(qū)域統(tǒng)一用 CSS 文件控制，就避免了不同區(qū)域或不同頁面體現(xiàn)出的效果偏差。 更好地被搜索引擎收錄 由于將大部分的 HTML 代碼和內(nèi)容樣式寫入了 CSS 文件中，這就使得網(wǎng)頁中正文部分更為突出明顯，便于被搜索引擎采集收錄。 對瀏覽者和瀏覽器更具親和力 我們都知道網(wǎng)站做出來是給瀏覽者使用的，對瀏覽者和瀏覽器更具親和力，DIV+CSS 在這方面更具優(yōu)勢。由于 CSS 富含豐富的樣式，使頁面更加靈活性，它可以根據(jù)不同的瀏覽器，而達到顯示效果的統(tǒng)一和不變形。 本科畢業(yè)設(shè)計論文 18 第 3 章 網(wǎng)站的分析與設(shè)計 網(wǎng)站框架的設(shè)計 網(wǎng)站設(shè)計的藝術(shù)性與可用性 一個好的網(wǎng)站能使用戶有良好的體驗，它需包括兩方面的內(nèi)容 ： 優(yōu)秀的藝術(shù)性與良好的可用性。藝術(shù)性提升價值、增強功能，并幫助用戶在愉悅的視覺聽覺環(huán)境中完成目標。而可用性的任務(wù)是確保產(chǎn)品滿足目標用戶群體的需求和目標，同時，產(chǎn)品對于這個 群體來說易于使用。但是很多時候，這兩方面似乎存在著矛盾 。 網(wǎng)站其實是一種非物質(zhì)的數(shù)字化產(chǎn)品，但是不管是物質(zhì)的還是非物質(zhì)的產(chǎn)品，其 本質(zhì)的目的都是一樣的 —— 服務(wù)于人類。因此我們的設(shè)計無時無刻都應(yīng)該從人的角度出發(fā)，以人為核心，全面考慮人的精神和物質(zhì)需求。一個優(yōu)秀的網(wǎng)站應(yīng)該是人性化的。它是帶給人愉悅的，具有吸引力的，藝術(shù)性的 ； 同時它具有良好的可用性的，有效的，易于使用，使人滿意的。 藝術(shù)性和可用性都有其優(yōu)勢和劣勢。藝術(shù)性與可用性之間經(jīng)常存在有益的緊張關(guān)系。缺少了 任何一方 都是不行的。 僅有藝術(shù)性而不考慮可用性的網(wǎng)站不 是成功的網(wǎng)站。有的網(wǎng)站充滿了創(chuàng)意，有著絢麗的畫面，充滿了想象力和創(chuàng)造力?？墒?，用戶發(fā)現(xiàn)，他們不知道怎么使用導(dǎo)航 ； 甚至也許，為了版面的簡潔醒目，導(dǎo)航是隱藏的，根本就找不到 ； 還有，用戶找不到后退鍵，無法后退 ； 絢麗的背景使得文字變得難以辨認 ； 太小的文字雖然顯得版面非常精制，但是，老年人根本無法看清 ； 背景音樂無法關(guān)閉，重復(fù)播放使人生厭 ； 介紹動畫的 下 載時間過長，令人失去耐心 ?? 這些直接會導(dǎo)致什么樣的結(jié)果 ？ 這些網(wǎng)站沒有滿足用戶的需求，它使用戶有挫折感，留下負面體驗。很多人訪問因特網(wǎng)是因為它能比其他方法更高效的得到自己所 需的信息，或更能實現(xiàn)自己的目標。但是，當他發(fā)現(xiàn)，網(wǎng)站不能滿足自己的需求時，他們就會去選擇其他的方法。通常是去選擇其他的網(wǎng)站。據(jù)統(tǒng)計，不能提供有效的可用性的網(wǎng)站會導(dǎo)致近 40%重復(fù)訪問者的流失和 50%在線營業(yè)額的喪失 。 本科畢業(yè)設(shè)計論文 19 僅有可用性沒有藝術(shù)性也會帶來消極的影響。用戶體驗不僅僅是由有效性和效率決定的。用戶需要美的體驗。美的本質(zhì)是人在實踐的基礎(chǔ)上形成的合規(guī)律性與合目的性的統(tǒng)一的形式，是人的本質(zhì)力量 (感性、理性、才能 )通過自由自 覺地創(chuàng)造活動的感性的對象化，是人本能的需求。當用戶第一次打開一個網(wǎng)站，給他留下最初印象的是網(wǎng) 站的風(fēng)格、圖案和色彩。所以，只有可用性而缺乏藝術(shù)性的網(wǎng)站同樣是“不可用”的 。 很多時候 ， 網(wǎng)站的藝術(shù)設(shè)計人員和可用性設(shè)計人員之間總是存在著矛盾。實際上，如果精心設(shè)計，這兩者是可以共存，甚至是可以相互促進的。藝術(shù)性可以幫助提升可用性。合理運用圖形、 色 彩等設(shè)計元素，可以有效引導(dǎo)用戶的視覺焦點，增強可用性。運用人們所熟悉的生活中的物品或是動作隱喻而設(shè)計的圖標，使人容易理解，能更自信的駕馭。比如，在電子商務(wù)網(wǎng)站上，用鼠標把物品拖放進購物車，表示把購買此件物品。就是運用了人們在現(xiàn)實生活中購物的經(jīng)驗，并讓此經(jīng)驗延伸到非物 質(zhì)的購物場所 —— 電子商務(wù)網(wǎng)站。精心排版的頁面使用戶能用更短的時間掃視內(nèi)容，使用戶能高效完成目的。而良好的可用性則可以使用戶將注意力集中于網(wǎng)站的“藝術(shù)性”。良好的可用性應(yīng)該是用戶看不到的。事實上 ，如果網(wǎng)站在形式和功能上都能反映它們的目標用戶的需求和期望，用戶能夠自信駕馭。那么它們就能夠為用戶提供全面的 正面體驗 —— 使用戶可以在這個網(wǎng)站上完 成他們想完成的工作，并且是高效的、滿意的完成。如果一個網(wǎng)站易于使用，用戶不會意識到自己是如何使用它的。相反，他們將自己的注意力集中 在內(nèi)容、設(shè)計和站點所傳遞的品牌形象， 精美的設(shè)計 就會被用戶充分注意。因為用戶全神貫注，他們不會在使用過程中受到可用性問題的困擾。于是，網(wǎng)站的目標實現(xiàn)了，用戶的目的實現(xiàn)了。更好的是，用戶們還會再次光顧這個網(wǎng)站。藝術(shù)性和可用性的共存才能夠?qū)崿F(xiàn)真正的成功。 總之， 一個好的網(wǎng)站，其設(shè)計必然是以人為核心的，能給人以正面的綜合體驗。包括美的形式外觀和良好的可用性。設(shè)計者在設(shè)計過程中要始終圍繞人的需求這個核心，將藝術(shù)性和可用性融入設(shè)計中，使其在網(wǎng)站中共存，相互促進，設(shè)計出優(yōu)秀的網(wǎng)站。 本科畢業(yè)設(shè)計論文 20 網(wǎng)站首頁的設(shè)計 （一） 設(shè)計原則 了解用戶需求 了解學(xué)校網(wǎng)站的特點 ，以及用戶需要實現(xiàn)的功能。 內(nèi)容與形式相統(tǒng)一 根據(jù)學(xué) 校的特點，學(xué)校的網(wǎng)站應(yīng)該既嚴肅， 又活潑。動與靜有機結(jié)合。 方便瀏覽 導(dǎo)航要清晰，鏈接要準確。在任意一個頁面都能夠返回主頁，從主頁又可以 找到任意一個頁 面的入口。 訪問速度快 文件要盡可能小，盡可能少用動畫和大圖片。在設(shè)計時同一類內(nèi)容的文件最好使用同一個頁面來顯示。 色彩和搭配和諧 在整個站點的色彩選擇上，應(yīng)該盡量使用同一種色系的，色彩種類以不超過三，四種為界限 。 簡潔美觀 頁面要簡潔美觀，不要采用太復(fù)雜的視覺效果，不采用聲音，大型動畫、圖 片， 風(fēng)格要統(tǒng)一。 具有較好的安全性 具有一定的安全保護措施，如密碼驗證，用戶權(quán)限等。 易維護和升級 網(wǎng)站交付使用之后要容易維護更新，可以不斷升級。用戶可以根據(jù)自己的需要作一定的修改。維護更新要簡單，無需專業(yè)人員專職維護。 具有交互功能 用戶可以從網(wǎng)站接收反饋信息 。 （二） 預(yù)期達到的 水平 網(wǎng)站頻道及欄目的內(nèi)容定位清晰、有統(tǒng)一的分類標準，欄目名稱準確，具有簡明、直觀、易操作的特點 。 有詳細的網(wǎng)站地圖可供查詢，并能鏈接到相關(guān)內(nèi)容 。 布局結(jié)構(gòu)清楚合理，瀏覽網(wǎng)站能清晰分辨網(wǎng)站的重點內(nèi)容 。 本科畢業(yè)設(shè)計論文 21 有部分市、縣和學(xué)校網(wǎng)站鏈接 。 及時發(fā)布學(xué)校的各項信息，如學(xué)校介紹、教學(xué)成果、教學(xué)計劃等，以及能夠用于學(xué)校的各項通知、公告的發(fā)布 。 有統(tǒng)一的色彩風(fēng)格和主色調(diào)，同時能體現(xiàn)學(xué)校網(wǎng)站的特色，各頁面配色服從總體色彩體系 。 有統(tǒng)一的 LOGO 設(shè)計，各層級頁面均包含設(shè)計上協(xié)調(diào)一致的標識圖案及文字 。 在頁面顯著位置放置學(xué)校名稱和域名 。 頁面設(shè)計整齊，沒有變形的頁面和文字，沒有表格錯行，文字錯位等現(xiàn)象 。 網(wǎng)頁文件大小 小于 150K。 1 有簡單的資源上傳、查詢等功能 。 1 后臺內(nèi)容構(gòu)架完整、科學(xué)、合 理，邏輯關(guān)系清晰，便于全面了解和管理網(wǎng)站內(nèi)容和操作 。 1 所有的網(wǎng)頁和服務(wù)，兼容多種操作系統(tǒng)下的瀏覽器 。 1 采用內(nèi)容管理系統(tǒng)和相應(yīng)的數(shù)據(jù)庫管理 。 1 網(wǎng)站技術(shù)構(gòu)架安全、穩(wěn)定，鏈接無誤 。 1 在寬帶環(huán)境下能保證用戶的瀏覽速度，打開網(wǎng)頁沒有明顯延遲 。 （三） 首 頁構(gòu)建基本內(nèi)容 校園門戶網(wǎng)站首頁是 來訪者 第一眼 看到 的 頁面 ， 首頁的 版式 合不合理 、 內(nèi)容 恰不恰當 ，直接影響 瀏覽者 對網(wǎng)站的感覺 ， 同時 在 很大程度 上 影響 了 其 是否愿意繼續(xù) 瀏覽下去。 因此， 依照 上述設(shè)計原則和 預(yù)期達到的目標， 對 此次 所要完成的門戶網(wǎng)站首頁做出如下設(shè)計 ： 首頁從上至下分為三部分： 頁面頂部， 頁面主體， 頁面底部 。 頁面頂部 展示 學(xué)校 LOGO、 導(dǎo)航欄 以及 訪問當天的 日期 。 其中， 導(dǎo)航欄的 內(nèi)容 預(yù)計 包括 ： 網(wǎng)站首頁 ： 從其它頁面返回首頁和 刷新首頁 ； 學(xué)校概況 ： 鏈接到 新頁面， 提供對學(xué)校概況的介紹 ； 教育新聞 ： 鏈接到新頁面， 可 查看 校內(nèi)外新聞； 本科畢業(yè)設(shè)計論文 22 機構(gòu)設(shè)置 ： 鏈接到新頁面， 可查看學(xué)校的機構(gòu)設(shè)置； 教學(xué)科研 ： 鏈接到新頁面， 提供學(xué)校最新 教學(xué)科研動態(tài)； 校園文化 ： 鏈接到新頁面， 展示 豐富的校園 活動； 校長信箱 ： 鏈接到新頁面， 可向 校長寫信留言 ； 資源下載 ： 鏈接到新頁面， 提供 教學(xué) 課件和 資料 下載 ； 用戶中心 ： 鏈接到新頁面， 已登記 用戶可 修改 用戶 信息 ， 學(xué)生用戶可 進一步查詢成績； 成績查詢 ： 鏈接到新頁面， 提供學(xué)生用戶 查詢考試成績。 頁面 主體 設(shè)計 分為三部分 ， 布局 總共 八個 小 塊， 依照 從上到下 、從左到右的順序 依次為： 校長寄語 ： 滾動 文字 ， 展示校長寄語， 可鏈接至 學(xué)校簡介頁面 ； 校園新聞 ： 展示 若干條近期校園新聞 ，可鏈接 至 校園新聞頁面； 圖片新聞 ： 若干 圖片 組成的幻燈片 新聞 ，可鏈接至詳細內(nèi)容； 小調(diào)查 ： 小型的投票系統(tǒng)， 可投票、查看結(jié)果 ； 教學(xué)科研 ： 展 示若干條近期 最新教學(xué)科研動態(tài) ，可鏈接至 新頁面； 用戶登錄 ： 已登記用戶可在此登錄 ， 具有 各種登錄 錯誤提示； 學(xué)生活動 ： 展示 近期學(xué)生活動， 可鏈接至 校園文化頁面； 校園風(fēng)光 ： 展示 若干 校園風(fēng)光圖片， 可鏈接至 新頁面， 查看大圖。 頁面底部 設(shè)計 ： 友情鏈接 ： 提供友情鏈接； 管理登錄： 網(wǎng)站后臺管理 員 從此鏈接進入后臺管理登錄； 版權(quán)聲明： 版權(quán)聲明 ； 技術(shù)支持 ： 聯(lián)系作者； 來訪人數(shù)統(tǒng)計 ： 統(tǒng)計 來訪人數(shù)， 顯示當前來訪者 為 第幾位 。 靜態(tài)元素與動態(tài)元素劃分 靜態(tài)元素 是網(wǎng)站 展示給來訪者 的靜態(tài)內(nèi)容， 不具有交互性， 主要包括 文字、圖片、 幻燈片、 滾動字幕、 日期顯示 等內(nèi)容 ； 而動態(tài)元素 具有 與來訪者的交互性，通過來訪者的 操作 （點擊、刷新或登錄） 實現(xiàn) 信息交互。 此次 要設(shè)計與實現(xiàn)的門戶網(wǎng)站 主要包括以下靜態(tài)內(nèi)容： 本科畢業(yè)設(shè)計論文 23 宣傳模塊：包括學(xué)校形象展示、團體展示、與 校園風(fēng)光 展示等，具有較好的宣傳和展示能力； 校園新聞 發(fā)布：支持滾動和全部兩種公告類型，公告具有一定的有效期； 教學(xué)、教育類資訊：面向普通公眾，提供近期教學(xué)、教育類資訊； 日期的顯示等。 動態(tài)頁面元素主要包括： 投票模塊 、 來訪人數(shù)統(tǒng)計 、后臺管理、 用戶中心 、 校長信箱 、成績查詢 等，還將進一步實現(xiàn)站內(nèi)搜索 、資源 下載等模塊。 源 文件的存儲目錄設(shè)計 源文件 是 建設(shè)和維護網(wǎng)站 的重要 資源， 是否 有一個清晰 、簡潔 的源文件存儲目錄， 直接影響著 網(wǎng)站的前期建設(shè) 工作 是否 順利 高效 和后期維護 工作是否 簡便易行。 為 了 網(wǎng)站建設(shè)的工作 快速 高效 進行， 降低后期維護 工作 的難度， 設(shè)計 源文件的存儲目錄如下所述： 本項目所建設(shè)的 校園門戶網(wǎng)站 的所有 源文件 分別 存放在 一個 瀏覽器能訪問的 Web 目錄 的 子目錄下 ， 這些源文件 主要 包括 擴展名為 php 的 網(wǎng)頁文件， 擴展名為 css 的層疊樣式表文件， 擴展名為 js 的 JavaScrip