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