第1章網(wǎng)站的建立

主編黃洪杰幻燈制作黃洪杰電子工業(yè)出版社《網(wǎng)頁(yè)制作基礎(chǔ)教程》中等職業(yè)學(xué)校電子信息類(lèi)教材（計(jì)算機(jī)技術(shù)專(zhuān)業(yè)）電子教案第1章網(wǎng)站的建立1.1網(wǎng)頁(yè)與制作工具

如果把因特網(wǎng)上的每個(gè)網(wǎng)站看成一本書(shū)，那么在瀏覽網(wǎng)站時(shí)看到的每個(gè)畫(huà)面則是這本書(shū)中的一頁(yè)，我們稱(chēng)之為“網(wǎng)頁(yè)”。而在進(jìn)入網(wǎng)站后顯示的第一個(gè)畫(huà)頁(yè)，我們稱(chēng)其為“主頁(yè)”。主頁(yè)就像一本書(shū)的目錄，它是所有網(wǎng)頁(yè)的索引頁(yè)。通過(guò)單擊主頁(yè)上的超級(jí)鏈接，可以打開(kāi)這個(gè)網(wǎng)站中的其他網(wǎng)頁(yè)。

網(wǎng)站就是由一個(gè)個(gè)網(wǎng)頁(yè)構(gòu)成的。

1.1.1認(rèn)識(shí)網(wǎng)頁(yè)1.1.2加入INTERNET大家庭個(gè)人主頁(yè)是你的數(shù)字化化身，你可以通過(guò)它把你的個(gè)性、愛(ài)好表露出來(lái)，不必?fù)?dān)心別人的哂笑。

一個(gè)介紹茶藝的個(gè)人網(wǎng)頁(yè)

1.1.3HTML語(yǔ)言

HTML語(yǔ)言是一種超文本標(biāo)記語(yǔ)言，它用來(lái)描述某個(gè)事物應(yīng)該如何合理地顯示在計(jì)算機(jī)屏幕上。也可以這么說(shuō)，HTML就是以特殊的標(biāo)記形式存儲(chǔ)為通常的文本文件。

HTML文件并不難于讀懂，只是比較繁瑣。

<center><b><fontface="黑體"><fontsize=18>歡迎參觀我的主頁(yè)</font></font></b></center>

在網(wǎng)頁(yè)上實(shí)現(xiàn)“歡迎參觀我的主頁(yè)”這句話為黑體18號(hào)字并居中顯示，相應(yīng)的HTML語(yǔ)句為：

1.1.4網(wǎng)頁(yè)制作工具

網(wǎng)頁(yè)制作軟件可以實(shí)現(xiàn)主頁(yè)制作者與HTML語(yǔ)言的分離，我們只需在編輯器中輸入文本或圖片，網(wǎng)頁(yè)制作軟件將幫助我們將這些文本或圖片轉(zhuǎn)換成相應(yīng)的HTML語(yǔ)言代碼。

Dreamweaver被認(rèn)為是更專(zhuān)業(yè)的網(wǎng)頁(yè)制作工具，它和Macromedia公司的另外兩個(gè)產(chǎn)品Flash，F(xiàn)ireworks一起稱(chēng)為“網(wǎng)絡(luò)三劍客”。擁有更廣泛的網(wǎng)頁(yè)制作者群，

1.2使用Dreamweaver建立一個(gè)網(wǎng)站

DreamweaverMX是一種“所見(jiàn)即所得”的網(wǎng)頁(yè)制作工具，它也是目前最常用的網(wǎng)頁(yè)制作工具之一。DreamweaverMX對(duì)于DHTML(動(dòng)態(tài)網(wǎng)頁(yè))的支持非常好，可以制作出許多精彩的互動(dòng)頁(yè)面特效。

1.2.1Dreamweaver的工作界面

“插入”面板網(wǎng)頁(yè)編輯區(qū)“屬性”面板菜單欄浮動(dòng)面板組“插入”面板共有12個(gè)獨(dú)立的選項(xiàng)卡，在網(wǎng)頁(yè)編輯的過(guò)程中，可通過(guò)單擊面板上的按鈕來(lái)為網(wǎng)頁(yè)添加相應(yīng)的元素；“屬性”面板則用于顯示修改所選中的網(wǎng)頁(yè)元素的屬性。

1.2.2畫(huà)出網(wǎng)站結(jié)構(gòu)圖

為全面地展示一個(gè)主題，往往需要制作若干個(gè)網(wǎng)頁(yè)，把這些網(wǎng)頁(yè)互相鏈接起來(lái)，就構(gòu)成了一個(gè)網(wǎng)站。在開(kāi)始建立網(wǎng)站之前，首先要確定網(wǎng)站的主題，根據(jù)主題確定這個(gè)網(wǎng)站需要由多少個(gè)網(wǎng)頁(yè)構(gòu)成，以及這些網(wǎng)頁(yè)之間的關(guān)聯(lián)關(guān)系等。在制作網(wǎng)站之前應(yīng)該先畫(huà)出結(jié)構(gòu)圖，這樣不但可以規(guī)劃網(wǎng)站結(jié)構(gòu)，使網(wǎng)站條理清楚、主題鮮明，還可以確定各個(gè)網(wǎng)頁(yè)的內(nèi)容，方便大家思考各網(wǎng)頁(yè)之間的鏈接方式。

1.2.3建立一個(gè)網(wǎng)站

在DreamweaverMX工作窗口中，單擊“站點(diǎn)”菜單中的“新建站點(diǎn)”命令，打開(kāi)“未命名站點(diǎn)1的站點(diǎn)定義為”對(duì)話框

。輸入新站點(diǎn)的名稱(chēng)。

選擇是否需要使用服務(wù)器技術(shù)。

選擇在何處編輯網(wǎng)頁(yè)。

更改保存位置。

選擇如何連接到遠(yuǎn)程服務(wù)器。

選擇是否讓別人和你同時(shí)編輯同一個(gè)網(wǎng)頁(yè)。

單擊完成，返回DreamweaverMX工作窗口。

1.2.4在網(wǎng)站中添加網(wǎng)頁(yè)

在浮動(dòng)面板“文件”項(xiàng)的“站點(diǎn)”選項(xiàng)卡中，將鼠標(biāo)指針移到站點(diǎn)名稱(chēng)上，單擊右鍵，從彈出的快捷菜單中選擇“新建文件”，站點(diǎn)文件夾被展開(kāi)，同時(shí)自動(dòng)建立了一個(gè)名為“untitled.htm”的網(wǎng)頁(yè)

。1.2.5更改網(wǎng)頁(yè)名稱(chēng)

網(wǎng)頁(yè)建立以后，名稱(chēng)欄中的“untitled.htm”處在選定狀態(tài)，可直接輸入網(wǎng)頁(yè)文件名。

用同樣的方法可以建立多個(gè)網(wǎng)頁(yè)。

1.3創(chuàng)建網(wǎng)站地圖

創(chuàng)建網(wǎng)站地圖可以規(guī)劃和管理網(wǎng)頁(yè)之間的關(guān)系，同時(shí)實(shí)現(xiàn)網(wǎng)頁(yè)之間的導(dǎo)航。1.3.1創(chuàng)建網(wǎng)站地圖

單擊“站點(diǎn)”選項(xiàng)卡中的“展開(kāi)/折疊”按鈕

按住“站點(diǎn)地圖”按鈕，從彈出的菜單中單擊“地圖和文件”，打開(kāi)“站點(diǎn)地圖”窗口。

在窗口右側(cè)文件列表中找到“index.htm”，右擊該文件，在彈出的快捷菜單中單擊“設(shè)為首頁(yè)”，把“index.htm”設(shè)置為這個(gè)網(wǎng)站的主頁(yè)。左側(cè)窗口中單擊“index.htm”文件圖標(biāo)，使其右邊出現(xiàn)鏈接標(biāo)志，拖動(dòng)該標(biāo)志到右側(cè)窗口中的文件上。松開(kāi)鼠標(biāo)，該文件圖標(biāo)出現(xiàn)在左側(cè)窗口中并與“index.htm”相連接。

用用同樣的方法，完成網(wǎng)站地圖。

1.3.2在網(wǎng)站地圖中更改網(wǎng)頁(yè)標(biāo)題

網(wǎng)頁(yè)標(biāo)題指的是瀏覽該網(wǎng)頁(yè)時(shí)顯示在瀏覽器標(biāo)題欄中的名字，而不是這個(gè)網(wǎng)頁(yè)的文件名。

打開(kāi)網(wǎng)頁(yè)，在窗口頂端的“標(biāo)題”欄中單擊，將其中的“無(wú)標(biāo)題文檔”刪除，輸入網(wǎng)頁(yè)的標(biāo)題，

單擊“文件”菜單中的“保存”命令，保存所做的修改。

在浮動(dòng)面板“文件”項(xiàng)的“站點(diǎn)”選項(xiàng)卡中，單擊“展開(kāi)/折疊”按鈕，再