【文章內(nèi)容簡介】 了解到學校和校史館的基本情況，為下面的瀏覽校史做一定的鋪墊。經(jīng)過調(diào)查，很多學校的校史館網(wǎng)站中都有簡介，但是它們只是介紹了學校情況或者只是介紹了校史館情況，我們綜合它們的優(yōu)點，在校史館網(wǎng)站簡介欄目中分別對華北水利水電學院和學院校史館進行介紹。第一，這樣使該網(wǎng)站不脫離華北水利水電學院這個大整體。第二，也不會遠離該網(wǎng)站的主題—校史館。同時也豐富了校史館網(wǎng)站的內(nèi)容，可謂一舉多得。 學校靈魂準確的來說，校訓稱之為學校的靈魂。但是這里學校的靈魂不只包括校訓，因為我感覺學校幾十年發(fā)展得到的精華都是學校的靈魂經(jīng)過長年發(fā)展，每個學校都會形成自己獨有的教學體系和教學風格，以及辦學理念。這些都會表現(xiàn)在一些學校標志上，該版塊的設立就是為了向大家展示華北水利水電學院的各種標志，包括校徽、校訓、校歌、學風、校風、教風、政風等。以體現(xiàn)華北水利水電學院“育人為本，學以致用”的辦學理念。 華水歷程講述華北水利水電學院從“北京水利學?！钡健昂颖彼妼W院”再到邯鄲更名為“華北水利水電學院”直到現(xiàn)在坐落與鄭州的曲折歷程。主要以文字加圖片的表現(xiàn)方法向訪問者展示學校歷史。該欄目以校史展覽的形式，分為前言、北京時期、岳城時期、邯鄲時期、鄭州時期、結束語幾個版塊，在這幾個版塊中分別介紹華北水利水電學院的幾次變遷，以及每次變遷對學校的意義。 看圖知校史與“華水歷程”是配套板塊，由于只有文字表現(xiàn)太單調(diào)，專門設立該版塊，主要以各時期的圖片來展現(xiàn)歷史重溫歷史，文字歷程與照片歷程共同展現(xiàn)，更富吸引力和表現(xiàn)力。 華水人物該版塊的設立為的是展示一些華水有名校友的光輝成績和華水名師以及各時期的領導，向外人展現(xiàn)我校的教學成績以及教學實力，同時激發(fā)同學們的自豪感，激勵老師們更加努力的提升教學質(zhì)量。該欄目下又分為華水名師、桃李芬芳、各時期書記、院長三個子欄目，從這三個方面對華北水利水電學院的優(yōu)秀人物及校友進行介紹和展示。 圖片記錄室該版塊主要用圖片記錄一些與學院相關的大事件，以及一些比較重要的事情，向大家展示我們學院的影響力。欄目下又分為母校榮譽、國際交流與合作、囑托與期盼、省部共建四個子欄目。 校園活動記該版塊的設立是經(jīng)過調(diào)查和嚴格論證的結果。上邊說過校史館如果只是講述校史，第一會限制網(wǎng)站的更新速度；第二會降低網(wǎng)站的訪問率和吸引力。這是一個網(wǎng)站致命的缺點。經(jīng)過調(diào)查發(fā)現(xiàn)很多同學比較關注校園活動，但是卻沒有路徑去獲得校園活動的一些資料。該版塊的子欄目可以在后臺實現(xiàn)很簡單的添加，根據(jù)校園活動的舉辦更新網(wǎng)站，給同學們更方便了解校園活動的一個平臺?；谝陨习鎵K的設置和劃分，我們得到下面這個網(wǎng)站的結構圖：圖41 網(wǎng)站結構圖 網(wǎng)頁的界面設計 網(wǎng)頁界面的構成要素水利院校校史館網(wǎng)站建設除了文字和圖像以外，還包含幻燈片等新興元素，更借助由代碼語言編程所實現(xiàn)的各種交互式效果，增加網(wǎng)站建設了網(wǎng)頁界面的生動性和復雜性，也使得在進行網(wǎng)站設計時需要考慮更多頁面元素的排布、優(yōu)化。一般來說，本網(wǎng)站的網(wǎng)頁界面主要由下面幾個因素構成：（1）文字：文字元素是信息傳達的主體部分。網(wǎng)頁中的文字主要包括標題、信息、文字鏈接、幾種主要形式。標題和傳統(tǒng)媒體中信息傳達的基本作用相同，是其相關內(nèi)容的簡要說明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁面重要比率的元素，同時又是信息重要載體，它的字體、大小、顏色和排布對頁面整體設計影響極大。（2）圖形：圖形在網(wǎng)頁網(wǎng)站建設界面中具有重要作用。合理的運用圖形?？梢陨鷦又庇^、形象地表現(xiàn)設計主題。校史館網(wǎng)站中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標題、背景、主圖、鏈接圖標四種。（3）頁面版式：版式是網(wǎng)頁界面設計的重要組成部分，它將文字、圖形等視覺元素進行組合配置，使頁面整體視覺效果美觀和諧，便于閱讀，實現(xiàn)信息傳達的最佳效果。 （4）色彩：彩色網(wǎng)頁比單色網(wǎng)頁更具吸引力；色彩本身具有象征作用。（5）技術：網(wǎng)站建設網(wǎng)頁的技術要素并非任何情況下在網(wǎng)頁中都能直觀體現(xiàn)，但是卻代表了設計的整體水平，也是衡量設計成功的重要標準。網(wǎng)頁界面設計最基本的技術要求包括：瀏覽器、傳輸速度、屏幕分辨率、顏色顯示。 網(wǎng)頁的整體造型在制作網(wǎng)頁的過程中，最先考慮的因素是網(wǎng)站的布局。一個網(wǎng)頁是否做的成功，內(nèi)容和色彩固然十分重要，如果沒有一個好的整體架構來實現(xiàn)它，那么這個網(wǎng)頁是不會成功的。用戶看到的要么是滿篇文字，要么是色彩絢爛，吸引眼球但找不到重點。所以在選擇網(wǎng)頁所要表達的主題和填寫內(nèi)容，考慮色調(diào)之前，一定要預先考慮好網(wǎng)頁的整體布局，這樣才能牢牢的抓住用戶，讓用戶輕松容易的找到這個網(wǎng)頁想要傳達的首要信息。網(wǎng)頁的布局通常指的是網(wǎng)頁的整體架構，說的通俗一點就是排版。最重要的就是讓用戶第一眼就看到這個網(wǎng)頁所想要傳達的信息。本網(wǎng)站的特點就是網(wǎng)頁的整體架構十分的清晰明了，便于用戶瀏覽。在本網(wǎng)站的建設中中，創(chuàng)建網(wǎng)頁的構架主要有以下幾點： （1）首先慮整個網(wǎng)頁的長和寬，以及長度和寬度之間的比例。通常情況下，為了方便用戶的瀏覽習慣，網(wǎng)頁的長度極限被定制為網(wǎng)頁滿屏顯示后不出現(xiàn)橫向滾動條?？v向則沒有太大的限制，采取的是垂直滾動的形式來顯示頁面的內(nèi)容。設計一個邊框來分開文字和瀏覽器的邊緣，或者是設置背景顏色來區(qū)分。有了邊框或者背景色來區(qū)分文字和瀏覽器的邊緣，整個網(wǎng)頁的內(nèi)容顯得更加緊湊，集中。（2）其次是考慮導航條的設置。導航條是網(wǎng)頁中最最重要的部分，從用戶的習慣來講，導航條一般設置在網(wǎng)頁的頂端靠近第一排文字的地方或者設置在正文的左邊，本網(wǎng)站的導航條設置在網(wǎng)頁的頂端，方便用戶瀏覽網(wǎng)頁的內(nèi)容，所以導航條一定要反映整個網(wǎng)站的架構，把最值得推薦的網(wǎng)頁鏈接放置在導航條中。（3）正文的框架設置（橫向因素和縱向因素交錯）網(wǎng)頁做的是否成功通常就會取決于正文的框架結構。華北水利水電學院校史館網(wǎng)站的建設中，正文采用左邊是文章，右邊分為子欄目導航、推薦文章、熱點文章三個板塊，這樣避免了整個網(wǎng)頁只是一篇文章的單調(diào)性，同時給訪問者更方便瀏覽和切換文章的功能。 網(wǎng)頁的色彩搭配打開一個網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站的豐富內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對人的視覺效果非常明顯，一個網(wǎng)站設計成功與否，在某種程度上取決與設計者對色彩的運用和搭配。網(wǎng)站的色系是瀏覽者整體的視覺觀感，若一個網(wǎng)站色系能有一致性，不僅會使網(wǎng)站看起來美觀，更能讓瀏覽者對內(nèi)容不易混淆，增加了瀏覽的簡潔與方便。而網(wǎng)站的色系更能襯托出網(wǎng)站的主題，若色系能與主題合理搭配，將會增加瀏覽者的易讀性。網(wǎng)站的色系包含了網(wǎng)頁的底色、文字字型、圖片的色系、顏色等等，這不單只是將顏色搭配得當就算完美，還要配合每個內(nèi)容，及網(wǎng)站主題。該網(wǎng)站不論導航欄還是一些邊框，默認采用草綠色，給人一種清新自然的感覺，同時每個頁面右上方都有顏色轉(zhuǎn)換的插件，用戶可以根據(jù)自己的喜好選擇整個網(wǎng)站的顏色。5 網(wǎng)站的具體實現(xiàn) 運行環(huán)境建立該網(wǎng)站共用到三種軟件，其中PhotoShop和DreamWeaver沒有專用的運行環(huán)境：（1）PhotoShop運行環(huán)境為Windows 2000/2003/XP/Vista；（2）DreamWeaver的運行環(huán)境為Win9x/NT/2000/XP/2003；下面主要介紹DeDeCMS的運行環(huán)境：（3）DeDeCMS運行環(huán)境及安裝。在安裝DeDeCMS之前，我們需要有一個服務器環(huán)境來支持，在本地安裝服務器環(huán)境最簡單的方法就是使用Apache+MySQL+PHP的一鍵式服務器套件，國內(nèi)外這樣的服務器環(huán)境套件非常多，例如APMServer、XAMPP、WAMP、PHPNow等等，這里我們以織夢自主制作的DeDeAMP套件來架設DeDeCMS所需要的服務器環(huán)境。：解壓后得到一個自解壓包：雙擊得到以下界面：圖51 環(huán)境安裝界面選擇要安裝到的目錄下，點擊安裝按鈕。雙擊出現(xiàn)以下界面：圖52 環(huán)境安裝界面根據(jù)自己的需要選擇上邊的選項，建議選擇PHP5+Mysql5。然后點擊安裝。直到結束，這樣DeDeCMS的運行環(huán)境就安裝完成了。我們完成了環(huán)境的準備之后，我們就可以按照下面DeDeCMS的安裝步驟安裝DeDeCMS主程序了。 建立站點 DeDeCMS的安裝與設置首先在瀏覽器地址欄輸入安裝向?qū)У木W(wǎng)址，出現(xiàn)以下頁面。圖53 DeDeCMS安裝界面選擇“我已經(jīng)閱讀并同意此協(xié)議”后點擊繼續(xù)。下一步出現(xiàn)環(huán)境檢測頁面，如果前面的運行環(huán)境已經(jīng)順利完成，可以直接點擊繼續(xù)。出現(xiàn)下面的參數(shù)配置頁面：圖54 參數(shù)配置界面只需要在數(shù)據(jù)庫密碼欄中填入默認密碼123456和管理員密碼欄中輸入你的密碼，其它的就按默認的設定，點擊下一步，安裝完成。DeDeCMS就安裝完成了。這樣我們就可以看到我們的站點。 Dreamweaver中站點建設啟動Macromedia Dreamweaver 8，啟動后顯示的是起始頁。在右邊的側(cè)邊欄中間，“文件”面板上有一個藍色的“管理站點”鏈接，點一下；出來一個“管理站點”的對話框，里面現(xiàn)在還是空的，點右上角的“新建”按鈕，在彈出的復選框中選擇“站點”，出來一個面板；（1）這時候就開始進行站點的創(chuàng)建步驟，把中間站點的名字改為“校史館”，第二行的站點地址不動它，點“下一步”；（2）在第二個頁面中，由于在此網(wǎng)站建設中只是用DW做一個本地網(wǎng)頁設計器，所以我們選擇選擇“否，不使用服務器技術”，然后點“下一步”；（3）這時出來保存位置的對話框，選擇“編輯我計算機上的本地副本，完成后再上傳到服務器”選項，下邊設置為D:\DeDeCMS\，點“下一步”繼續(xù)；（4）在“您如何連接到遠程服務器”下的下拉菜單中選擇“無”，點“下一步”繼續(xù)；（5）這時候就出來了“總結”頁面，顯示一下剛才的設置情況，確認無誤后點“完成”即可。這樣就在DreamWeaver中成功地建立了一個站點。 前臺的實現(xiàn) 網(wǎng)站導航欄內(nèi)容網(wǎng)站導航欄設置八個欄目，包括主頁、簡介、學校靈魂、華水歷程、看圖知校史、華水人物、圖片記錄室、校園活動記。以下進行簡要介紹。首頁：顯示網(wǎng)站的首頁。以一張完整的圖片做為背景，最下方設置導航欄以連接到每個欄目。簡介：連接到簡介板塊，對華北水利水電學院以及學院校史館進行介紹。學校靈魂：展示?；铡⑿８?、校訓、校風、學風、教風、政風。華水歷程：講述華北水利水電學院幾次變遷的發(fā)展歷程?？磮D知校史：展示華北水利水電學院每個階段的圖片。華水人物：向大家展示華北水利水電的知名人物，包括名師，各時期的書記院長及知名校友。圖片記錄室：主要用圖片記錄一些與學院相關的大事件，以及一些比較重要的事情，向大家展示我們學院的影響力。欄目下又分為母校榮譽、國際交流與合作、囑托與期盼、省部共建四個子欄目。校園活動記：記錄每一個校園中舉辦的大型活動。 網(wǎng)站首頁網(wǎng)站首頁是一個網(wǎng)站最核心的部分之一，作用相當于校史館的大門，可以給人很重要的第一印象。華北水利水電校史館網(wǎng)站主頁的背景圖是用華北水利水電學院花園校區(qū)的一張俯瞰圖，經(jīng)過Photoshop的特效處理而成，處理過程中分別運用了漸變工具，圖片轉(zhuǎn)移疊加，圖層樣式設置等技術，完成后效果如下圖所示：圖55 校史館首頁效果圖首頁樣式是用Dreamweaver進行設計，將設計成的代碼經(jīng)過修改轉(zhuǎn)移到CMS的模板中，代碼如圖所示。!DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns=headmeta equiv=ContentType content=text/html。 charset=gb2312 /title華北水利水電學院校史館（網(wǎng)絡版）/titlestyle type=text/css!body { backgroundimage: url({dede:}/images/)。 backgroundrepeat: repeat。}/style/headbodyimg src={dede:}/images/ alt=華北水院校史館（網(wǎng)絡版） width=1242 height=590 border=0 usemap=Map /map name=Map id=Maparea shape=rect coords=4,503,94,544 href={dede:type typeid=39。639。}[field:typelink/]{/dede:type} alt=學校及校史館簡介 /area shape=rect coords=101,503,260,543 href={dede:type typeid=39。739。}[field:typelink/]{/dede:type} alt=學校靈魂 /area shape=rect coords=267,503,434,543 href={dede:type typeid=39。839。}[field:typelink/]{/dede:type} alt=華水歷程 /area shape=rect coords=441,503,652,541 href={dede:type typeid=39。939。}[field:typelink/]{/dede:type} alt=看圖知校史 /area shape=rect coords=659,503,849,541 href={dede:type typeid=39。1039。}[field:typelink/]{/dede:type} alt=華水人物 /ar