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

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

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

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

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

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

1.1.3HTML語言

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

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

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

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

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

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

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

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

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

1.2.1Dreamweaver的工作界面

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

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

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

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

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

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

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

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

更改保存位置。

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

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

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

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

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

。1.2.5更改網(wǎng)頁名稱

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

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

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

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

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

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

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

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

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

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

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

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

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