【摘 要】通過校園主頁的設(shè)計和實現(xiàn)，詳細描述如何規(guī)劃、搭建、制作網(wǎng)站主頁的過程

【關(guān)鍵詞】Div+css html flash javascript

隨著Internet技術(shù)的不斷發(fā)展，信息查詢、游戲聊天、電子商務(wù)等網(wǎng)絡(luò)應(yīng)用已經(jīng)滲透到人類社會的各個角落，人們已步入網(wǎng)絡(luò)時代。作為網(wǎng)絡(luò)世界的支撐點的網(wǎng)站，更是人們關(guān)注的熱點：政府利用網(wǎng)站宣傳自己的施政綱領(lǐng)，日益成為與百姓交流的直通車；企業(yè)利用網(wǎng)站宣傳自己的形象，挖掘無限商機；個人利用網(wǎng)站展示個性風采，創(chuàng)建彼此溝通的橋梁。因此，越來越多的人希望擁有網(wǎng)站，政府、企業(yè)甚至個人擁有自己的網(wǎng)站已經(jīng)成為必然的趨勢。

如何豐富校園學生生活，定期發(fā)布學校各種信息，提高在校學生對學校的關(guān)注，讓報考本校的考生有一個了解學校的窗口，諸如此類的問題都需要通過網(wǎng)站的主頁予以體現(xiàn)。所以網(wǎng)站主頁的設(shè)計理念一定要突出實用與簡潔，直觀的版面風格讓網(wǎng)友一眼就能找到自己需要的信息，而且版面可以隨時增加，以動態(tài)的適應(yīng)使用需求。下面就通過一個具體的實例，討論一下校園網(wǎng)網(wǎng)站首頁設(shè)計和制作過程

一、主頁總體規(guī)劃思路

設(shè)計網(wǎng)頁首先要考慮的是網(wǎng)頁兼容性問題，時下眾多的瀏覽器使網(wǎng)頁的顯示會有差別，特別要注意ie與Mozilla firefox瀏覽器的亂碼問題。以div+css打框架，使用table.css表格修飾，然后進行表單修飾form.css，最后是css的優(yōu)化。

首先，把需要展現(xiàn)的內(nèi)容分成若干個塊，想好幾行幾列，每個塊都是一個單一的色塊，用css定義，這里應(yīng)該注意要主次分明，不要全部用大塊分割頁面，主要以左右布局。然后用css定義字體行間距等參數(shù)，注意防止文字因過長發(fā)生折行破壞頁面整潔，最終目的是要保證這個畫面整齊與簡潔。

其次，圖片的處理也要講究，頁面的主要位置放置480*320的大圖會使整個頁面顯得大氣，有吸引力。Flash的設(shè)計也要時尚美觀，代碼要開源，以便于維護，也方便圖片調(diào)取。

最后是校園bbs的文章調(diào)取，通過交互論壇更好的與學生、網(wǎng)友交流，提高網(wǎng)站的粘稠度，并隨時注意選取優(yōu)質(zhì)文章圖片等，呈現(xiàn)在首頁，為網(wǎng)站增加亮點

總結(jié)上述幾點，校園網(wǎng)首頁應(yīng)分為頭條新聞圖片發(fā)布區(qū)，文字新聞動態(tài)發(fā)布區(qū)，圖片展示區(qū)，校園信息發(fā)布區(qū)，這么幾大板塊。

二、具體實現(xiàn)以及代碼舉例

（一）網(wǎng)頁主框架設(shè)計

在這里可以看到網(wǎng)頁的結(jié)構(gòu)是非常簡潔的，我們用header.css來定義導航，用#centers.left來定義左邊欄，#centers.right來定義主內(nèi)容框，其余圖片跟bbs的展示區(qū)，讓網(wǎng)友非常方便快捷的找到想看的內(nèi)容。

（二）網(wǎng)頁內(nèi)容樣式的定義

作為一個成熟的網(wǎng)站，css代碼單獨定義，我簡單列舉部分主要代碼加以說明：

下面是部分CSS布局框架代碼

#header ，#centers ，#footer{ width：100%； margin：0 auto； line-height：60px； font-weight：bold；}

#header{ height：62px； border：1px solid #CCCCCC； }

#centers{ padding：7px 0；}

#footer{ border-top：1px solid #CCCCCC； background：#F3F3F3；}

#centers .left{ float：left； width：210px； border：1px solid #00CC55；}

#centers .right{ float：left； width：480px；border：1px solid #00CC55； background：#ccc}

以上代碼是實現(xiàn)通過幾個板塊、背景顏色與大小的不同來增加美觀度和可辨識度.

（3）利用js腳本實現(xiàn)bbs文章調(diào)用

對于bbs論壇文章的調(diào)用通過在與之間合適的

這里bbs.js是文件名稱，bbs.xx.com/js/腳本的路徑\"

三、設(shè)計、開發(fā)工具的使用

dreamweaver是非常好用的web開發(fā)工具之一，他可以更高效的設(shè)計與開發(fā)網(wǎng)站，它的可視化編輯功能更容易讓初學者上手，而且主界面可以顯示代碼視圖和設(shè)計視圖，使制作網(wǎng)頁變得輕松。代碼編寫時的提示功能讓編寫html代碼時不易出錯。

Photoshop是adobe公司的圖片制作軟件，強大的圖片處理能力和濾鏡功能讓設(shè)計人員在創(chuàng)新上可以得心應(yīng)手，而且adobe公司自從收購了Macromedia公司，它對dreamweaver的兼容性也變得非常強。

四、總結(jié)

通過以上的闡述是對網(wǎng)站網(wǎng)頁制作的一個全面概述，而制作網(wǎng)頁的目的就是：（一）提供最多信息給更多的網(wǎng)友；（二）優(yōu)化代碼、提高兼容性、方便其他網(wǎng)站搜索，降低運行成本，提高網(wǎng)站下載速度；（三）維護簡單，易操作。（四）通過bbs，提高交互性。

校園網(wǎng)是一個體現(xiàn)活潑向上的正能量、具備準確及時的發(fā)布校園內(nèi)的各項信息、收集學生和教師的各項反饋等各項功能于一身的綜合性網(wǎng)站，因此它的主頁設(shè)計也就更加成為網(wǎng)站建設(shè)過程中的重中之重。

參考文獻：

[1]胡崧，李海，劉芬芬Dreamweaver CS5中文版標準教程 中國青年出版社

[2]李超 css網(wǎng)站布局實錄 科學出版社

[3]高升，邵玉梅，勞翠金 Windows Server 2003系統(tǒng)管理 清華大學出版社