如何進(jìn)行高校校園網(wǎng)絡(luò)站點(diǎn)建設(shè)

李廣琴

[內(nèi)容摘要]高校校園網(wǎng)是高校文化的載體，是校園文化建設(shè)的重要組成部分，是傳播校園網(wǎng)絡(luò)文化的主陣地，對(duì)校園網(wǎng)絡(luò)建設(shè)起著引導(dǎo)作用。本文對(duì)Dreamweaver進(jìn)行簡介，對(duì)高校校園網(wǎng)站的建設(shè)進(jìn)行了大體介紹等。

[關(guān)鍵詞]網(wǎng)站；高校；校園；網(wǎng)絡(luò)

高校校園網(wǎng)絡(luò)文化是高校在長期發(fā)展過程中形成的精神文化和物質(zhì)文化的總和，是一所大學(xué)的精神、道德規(guī)范、文化傳統(tǒng)、生活方式的價(jià)值觀，在教學(xué)、科研、管理、服務(wù)、培養(yǎng)等方面發(fā)揮作用，并通過高校人際活動(dòng)，不斷進(jìn)化、積淀和發(fā)揚(yáng)。近幾年來，國內(nèi)提出許多新型多元的校園網(wǎng)絡(luò)文化建設(shè)思路，提出廣泛開展高校校園文化網(wǎng)絡(luò)建設(shè)活動(dòng)，構(gòu)建全方位育人的新格局。

一、Dreamweaver MX網(wǎng)頁特色及使用技巧

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

靈活使用查找與替換：當(dāng)我們的站點(diǎn)里有多個(gè)文件要進(jìn)行相同的修改時(shí)（或者單個(gè)文件要進(jìn)行多處一樣的修改）單擊編輯/查找和替換，在彈出的對(duì)話框里進(jìn)行相應(yīng)的設(shè)置即可。同時(shí)還可以查找內(nèi)容如源代碼、文本（高級(jí)）和指定的標(biāo)簽，在相應(yīng)的選項(xiàng)里進(jìn)行設(shè)置是否區(qū)分大小寫等。

設(shè)定網(wǎng)站配色方案，運(yùn)用到這一功能，我們可以快速為網(wǎng)站設(shè)定配色方案：單擊命令/設(shè)定配色方案，在彈出的對(duì)話框里進(jìn)行相應(yīng)設(shè)置即可。

二、網(wǎng)站的制作過程

1.站點(diǎn)結(jié)構(gòu)圖

2.定義站點(diǎn)

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

3.瀏覽器設(shè)置

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

4.頁面設(shè)計(jì)

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

5.網(wǎng)頁背景設(shè)計(jì)

網(wǎng)頁中的背景設(shè)計(jì)是相當(dāng)重要的，尤其是對(duì)于成人高校校園主頁來說，好的背景不但能影響訪問者對(duì)網(wǎng)頁內(nèi)容的接受程度，還能影響訪問者對(duì)整個(gè)網(wǎng)站的印象。

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

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

6.Dreamweaver MX 消除虛線框

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

7.網(wǎng)站特效制作

（1）實(shí)現(xiàn)瀏覽器狀態(tài)欄中的滾動(dòng)字幕

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

（2）在網(wǎng)頁中加入注釋

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

（3）自動(dòng)加入最后修改日期

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

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

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

-->< /Script>

（4）定義網(wǎng)頁的關(guān)鍵字（KeyWords）

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

content中的即為關(guān)鍵字，用逗號(hào)隔開，在Dreamweaver中用「Insert」-「Head」-KeyWords命令

（5）去掉鏈接的下劃線

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