如何進行高校校園網絡站點建設

李廣琴

[內容摘要]高校校園網是高校文化的載體，是校園文化建設的重要組成部分，是傳播校園網絡文化的主陣地，對校園網絡建設起著引導作用。本文對Dreamweaver進行簡介，對高校校園網站的建設進行了大體介紹等。

[關鍵詞]網站；高校；校園；網絡

高校校園網絡文化是高校在長期發展過程中形成的精神文化和物質文化的總和，是一所大學的精神、道德規范、文化傳統、生活方式的價值觀，在教學、科研、管理、服務、培養等方面發揮作用，并通過高校人際活動，不斷進化、積淀和發揚。近幾年來，國內提出許多新型多元的校園網絡文化建設思路，提出廣泛開展高校校園文化網絡建設活動，構建全方位育人的新格局。

一、Dreamweaver MX網頁特色及使用技巧

隨著高校校園網的不斷擴充，網絡建設成為大家普遍關注的問題。Dreamweaver MX支持最新的HTML和CSS標準，將動態層的概念進行了擴展，其歷史面板、模板、庫以及強大的站點管理功能大大提高了工作效率。HTML是超文本標記語言，是WWW的描述語言。網站是多個由超級鏈接連在一起的網頁的集合，網頁可以是幾個，也可以是成千上萬個。由于Internet上的網站是通過鏈接地址進行定位的，所以網站也被稱為站點。網頁是一個包含文本、圖片、超級鏈接以及其他交互信息元素的網絡文件，通過Internet傳輸，用戶可以使用瀏覽器來查看。

靈活使用查找與替換：當我們的站點里有多個文件要進行相同的修改時（或者單個文件要進行多處一樣的修改）單擊編輯/查找和替換，在彈出的對話框里進行相應的設置即可。同時還可以查找內容如源代碼、文本（高級）和指定的標簽，在相應的選項里進行設置是否區分大小寫等。

設定網站配色方案，運用到這一功能，我們可以快速為網站設定配色方案：單擊命令/設定配色方案，在彈出的對話框里進行相應設置即可。

二、網站的制作過程

1.站點結構圖

2.定義站點

使用Dreamweaver MX建立站點：打開Dreamweaver MX文件，打開站點窗口（包括站點和資源），然后再選擇定義站點，選中后將出現站點定義窗口：站點名稱處填上要建立的站點名稱（school），這個名字只起識別作用，與網站發布后真實的名字無關；本地根文件夾處選擇設置網站在本地硬盤的位置，點擊后面的文件夾圖標可以選擇硬盤的任意目錄作為存放網站文件的目錄（c：＼school）；緩存可以使文件的移動、改名、查找等站點管理的操作速度大大提升，因此建議在這里打上鉤；其余的可以默認，當然可以試選擇不同的，默認圖像文件夾為站點默認存放圖片的文件夾（以后在做網頁的過程中，使用非站點內的圖片時，它會提示是否把該文件復制到這個文件夾內）；HTTP 地址為成人高校校園站點的網址HTTP//www.hgrtvu.com。之后，我們要指向整個站點的主頁，在站點布局里進行設置；遠程信息一項也是非常有用的，可以用它來管理成人高校校園的網站。

3.瀏覽器設置

Dreamweaver MX提供了兩種視圖，布局視圖和標準視圖，在布局視圖中能讓網頁某一部分固定，而另一部分自動伸展，這樣無論瀏覽器窗口多大，都能使我們的網頁適合瀏覽器的窗口，而不發生變形。比如建立一個新站點，然后用熟悉的表格工具畫一個表格，可以不限它的寬度，因為可以讓它自動伸展適合瀏覽器窗口（當然也可以直接在布局視圖中畫表格），然后單擊對象面板最底下的布局視圖按鈕，同樣出現一個對話框，直接點擊確定即切換至布局視圖，表格左上角會有一個綠色的layout table標簽，它代表著這個表格，標簽中有三個空白部分，每一個都標明了寬度且有一個小三角形。在這個表格中，我們希望表格最左邊的列固定，而整個表格適合瀏覽器的寬度，選擇最后一列，單擊它上面的三角形按鈕，在出現菜單中選擇make column autostretch，由于是一個新站點，這時將彈出對話框提示，為了能夠使行伸展，Dreamweaver MX需要放置一些spacer圖片在另一些行里。下面有三個選項：第一，Create a spacer image：創建一個spacer圖片，這個圖片在瀏覽器窗口是不會顯示出來的，它只是起固定表格的作用；第二，Use an existing spacer image：利用存在的spacer圖片；第三，Don't use spacer images for autostretch：不利用spacer圖片來做伸展，這樣其余行將會變形。 已經定義的站點將不會出現這個對話框，但仍可以利用Add Spacer Image增加spacer圖片。

4.頁面設計

雙擊文件圖標即可以對其進行編輯，在編輯的過程中，可以對當前頁面進行設置。比如背景，可以在一個頁面里以一幅圖片作為整個頁面的背景，其具體步驟如下：單擊修改／頁面屬性，彈出頁面屬性的對話框。第一，標題：網頁的標題，內容將在瀏覽器的標題欄中出現；第二，背景圖象：整個網頁的背景圖片；第三，文本：網頁頁面的文字默認的顏色；第四，鏈接：頁面中具有鏈接文字的默認顏色；第五，訪問過的鏈接：頁面中鏈接文字被訪問后的顏色；第六，活動鏈接：點擊鏈接時文字的顏色；第七，左邊界：頁面距屏幕左邊的距離；第八，右邊界：頁面距屏幕右邊的距離；第九，邊界寬度：邊緣寬度；第十，邊界高度：邊緣高度。確定后完成頁面屬性的設置。在這里要注意編輯的文件必須是以htm的后綴，它同時也是這個網頁文件的類型說明，表示這個網頁文件是屬于靜態的HTML文件（也可以用后綴html表示）。

5.網頁背景設計

網頁中的背景設計是相當重要的，尤其是對于成人高校校園主頁來說，好的背景不但能影響訪問者對網頁內容的接受程度，還能影響訪問者對整個網站的印象。

（1）顏色背景：顏色背景在網頁文件中，一般通過標簽來指定頁面的顏色背景，其HTML語法為： 其中的"color"表示不同的顏色，可以用各種不同的顏色表示方法，比較常用的是直接用顏色的英文名稱，如red、yellow、blue等，此外還可以用十六進制、百分比值法和整數法，其效果都是一樣的。

（2）圖片背景：把照片及圖片作為頁面的背景讓大家看到，這里我用上一點簡單的CSS。在網頁文件的……之間加入一些CSS語句，在網頁頁面中就可以看到照片或圖片位于頁面的正中間，而且在拉動瀏覽器窗口的滾動條時，照片仍然位于頁面的正中間而不隨頁面內容一起滾動。如果覺得照片位于頁面的正中間不滿意，也可以隨意地調整它在頁面中的位置。

6.Dreamweaver MX 消除虛線框

onfocus="this.blur（）"這條代碼能消除鏈接時的虛線框，可以用Ctrl+C、Ctrl+V逐個消除鏈接時候的虛線框，但是當一個網頁上有幾個甚至上百個鏈接的時候，這樣的方式就不太可行了，有一種更好的方式，能更快消除每個鏈接上的虛線框，當然用“查找/替換”功能就能解決，但作為一個優秀的web developer，用盡可能少的代碼實現一樣的功能才是追求的目標，由微軟在IE5.0后開始提供的一種新的指令組合，它可以把某種特定功能的代碼封裝在一個組件之中，從而實現代碼的重復使用，也就是Html Components，簡稱為htc。作為一個組件，htc里包含了屬性、方法、事件等各種知識，回到Onfocus=this.blur（），很顯然，onfocus是一個事件，this.blur（）則是被事件所觸發的對象，這樣我們即可寫出代碼。

7.網站特效制作

（1）實現瀏覽器狀態欄中的滾動字幕

按下F8鍵，在Behaviors窗口中選取Behaviors，單擊“＋”，再選取“Set Text→Set Text of Status Bar”，最后在彈出的對話框中輸入成人高校校園網頁中需要滾動的文字就可以了。

（2）在網頁中加入注釋

代碼：< ！-- 這里輸入注釋 -->

（3）自動加入最后修改日期

在源代碼中的…< /BODY>之間加入如下代碼：

< Script Language="JavaScript"><！--

document.write（"Last Updated："+document.lastModified）；

-->< /Script>

（4）定義網頁的關鍵字（KeyWords）

格式：< meta name="keywords"content="dreamweaver，flash，fireworks">

content中的即為關鍵字，用逗號隔開，在Dreamweaver中用「Insert」-「Head」-KeyWords命令

（5）去掉鏈接的下劃線

在源代碼中的…之間輸入如下代碼：