第5章網(wǎng)頁(yè)制作教參

1、第五章 網(wǎng)頁(yè)制作本章概述本章運(yùn)用FrontPage 2000軟件的空白網(wǎng)站模板，介紹了網(wǎng)頁(yè)制作的各種方法和技巧，使學(xué)生在了解什么是網(wǎng)頁(yè)的同時(shí)，熟悉常用的網(wǎng)頁(yè)元素，通過(guò)資料的收集和整理、網(wǎng)站結(jié)構(gòu)的總體規(guī)劃、網(wǎng)頁(yè)技巧的運(yùn)用和實(shí)施，能夠獨(dú)立制作有主題的個(gè)人網(wǎng)站，并上網(wǎng)發(fā)布。通過(guò)本章的學(xué)習(xí)，使學(xué)生的綜合運(yùn)用能力得到進(jìn)一步提高。本章教學(xué)要求與課時(shí)安排1本章教學(xué)要求(1) 掌握FrontPage 2000的啟動(dòng)和退出方法。(2) 掌握網(wǎng)頁(yè)制作的各種技術(shù)和方法，包括文字處理、圖片處理、框架、表格、表單、鏈接等。(3) 學(xué)會(huì)使用FrontPage 2000導(dǎo)航視圖組織網(wǎng)站結(jié)構(gòu)。(4) 學(xué)會(huì)使用報(bào)表視圖管理網(wǎng)站

2、。(5) 了解動(dòng)態(tài)網(wǎng)頁(yè)制作的一般方法。(6) 學(xué)會(huì)申請(qǐng)免費(fèi)主頁(yè)空間并上傳網(wǎng)頁(yè)。2教學(xué)內(nèi)容及課時(shí)安排 第一節(jié) 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 約1課時(shí) 第二節(jié) 網(wǎng)頁(yè)的建立 約2課時(shí) 第三節(jié) 網(wǎng)頁(yè)圖片處理 約2課時(shí) 第四節(jié) 網(wǎng)頁(yè)框架 約2課時(shí) 第五節(jié) 網(wǎng)頁(yè)表格 約2課時(shí) 第六節(jié) 表單的制作 約2課時(shí) 第七節(jié) 創(chuàng)建超鏈接 約2課時(shí) 第八節(jié) 動(dòng)態(tài)網(wǎng)頁(yè)制作 約2課時(shí) 第九節(jié) 網(wǎng)站管理 約2課時(shí)教材分析和教法建議第一節(jié) 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)一、 教學(xué)要求(1) 了解網(wǎng)頁(yè)的組成元素，理解網(wǎng)站、網(wǎng)頁(yè)、主頁(yè)、HTML等幾個(gè)概念。(2) 了解常用網(wǎng)頁(yè)制作工具。(3) 掌握FrontPage 2000的啟動(dòng)的退出方法。(4) 熟悉F

3、rontPage 2000的操作界面，了解各種視圖的用途。二、 教材分析與教法建議本節(jié)主要介紹網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)和FrontPage 2000的啟動(dòng)和退出，目的在于讓學(xué)生了解什么是網(wǎng)頁(yè)，可以使用哪些工具制作網(wǎng)頁(yè)，為后面的章節(jié)做鋪墊。在基礎(chǔ)知識(shí)部分，有必要讓學(xué)生搞清以下概念。（1）什么是網(wǎng)站？網(wǎng)站是計(jì)算機(jī)網(wǎng)絡(luò)上的位置，它使信息以網(wǎng)頁(yè)或文檔的形式提供給使用瀏覽器訪問(wèn)站點(diǎn)的訪問(wèn)者。計(jì)算機(jī)網(wǎng)絡(luò)可以是世界范圍的 Internet 或 Intranet（鏈接辦公室中所有計(jì)算機(jī)的局域網(wǎng)）。信息可以 HTML 網(wǎng)頁(yè)或其他文檔格式發(fā)布。為了查看站點(diǎn)上的信息，訪問(wèn)者需要使用瀏覽器程序（如 Microsoft(r)

4、Internet Explorer或Netscape Navigator），通過(guò)這些程序?qū)?Web 站點(diǎn)上的 HTML 網(wǎng)頁(yè)翻譯為監(jiān)視器上的文本或圖形。（2）什么是網(wǎng)頁(yè)？網(wǎng)頁(yè)是全球廣域網(wǎng)上的基本文檔，用 HTML (超文本標(biāo)記語(yǔ)言) 書寫，其中可以包含文本、圖片、動(dòng)畫、音樂(lè)、鏈接等元素。網(wǎng)頁(yè)可以是站點(diǎn)的一部份，也可以獨(dú)立存在。每一個(gè)網(wǎng)站都是由若干網(wǎng)頁(yè)組成的，各網(wǎng)頁(yè)之間通過(guò)鏈接聯(lián)系在一起。（3）什么是主頁(yè)？使用瀏覽器訪問(wèn)網(wǎng)站時(shí)，網(wǎng)站中第一個(gè)被執(zhí)行的文件稱為主頁(yè)，主頁(yè)的基本功能是幫助訪問(wèn)者輕松瀏覽網(wǎng)站，其中可能包括有關(guān)站點(diǎn)創(chuàng)作者的個(gè)人信息、工作部門和公司、指向同一 Web 站點(diǎn)的其他文檔的鏈接或指

5、向相關(guān)內(nèi)容的其他站點(diǎn)的鏈接等內(nèi)容。為了吸引訪問(wèn)者，主頁(yè)的頁(yè)面要美觀、內(nèi)容要做到組織嚴(yán)密并且要提供有用的信息。不同的WEB服務(wù)器把不同的文件名識(shí)別為主頁(yè)，多數(shù)服務(wù)器將index.htm識(shí)別為主頁(yè)，也有的服務(wù)器將home.htm、welcome.htm、default.htm識(shí)別為主頁(yè)。在FrontPage中引入其他網(wǎng)站時(shí)，如果該網(wǎng)站的主頁(yè)文件名與FrontPage可識(shí)別的主頁(yè)文件名不同，那么FrontPage會(huì)自動(dòng)將其主頁(yè)文件名更改為index.htm。（4）什么是 HTML？HTML (超文本標(biāo)記語(yǔ)言)是一種用于全球廣域網(wǎng)上文檔中的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。該語(yǔ)言使用內(nèi)嵌代碼或標(biāo)記來(lái)描述網(wǎng)頁(yè)內(nèi)容和外觀，指

6、示W(wǎng)eb瀏覽器應(yīng)該如何顯示網(wǎng)頁(yè)元素，以及如何回復(fù)使用者的操作。由于HTML語(yǔ)言的跨平臺(tái)功能使得 HTML 成為在其他不兼容計(jì)算機(jī)系統(tǒng)間交換信息的理想方式。HTML 的缺點(diǎn)在于標(biāo)記不能廣泛使用，因此創(chuàng)作者通常無(wú)法預(yù)料最終網(wǎng)頁(yè)在訪問(wèn)者瀏覽器中顯示的外觀。由于市場(chǎng)上的瀏覽器軟件有好幾種，盡管所有的瀏覽器能夠轉(zhuǎn)換多數(shù) HTML 標(biāo)記，但是某些標(biāo)記只有特定類型的瀏覽器才能處理。因此，如果使用了這些標(biāo)記，則訪問(wèn)者可能不能以創(chuàng)建網(wǎng)頁(yè)的方式查看該網(wǎng)頁(yè)，所以，最好在頁(yè)面上注明建議使用的瀏覽器類型。搞清以上概念之后，引入本課的課題網(wǎng)頁(yè)制作，要制作網(wǎng)頁(yè)，首先就需要尋找一種合適的工具。該部分主要讓學(xué)生了解常用的網(wǎng)頁(yè)制

7、作工具，從發(fā)展過(guò)程來(lái)看，這些工具的使用由難到易，其中的CDIDA軟件是信息學(xué)奧林匹克競(jìng)賽江蘇省應(yīng)用能力競(jìng)賽所使用的網(wǎng)頁(yè)制作工具。對(duì)于熟悉HTML語(yǔ)言的人而言，任何一種文本編輯器（如記事本、WORD、WPS、寫字板等）都可以用來(lái)制作網(wǎng)頁(yè)，方法是直接鍵入網(wǎng)頁(yè)的 HTML 標(biāo)記，然后在 Web 瀏覽器中將其打開。許多字處理程序（如Microsoft Word、WPS 2000等）有 HTML 轉(zhuǎn)換功能，可以將已有文檔另存為 HTML 文檔。但是，大多數(shù)轉(zhuǎn)換器只將 HTML 格式標(biāo)記添加到文本中，有時(shí)不保留文檔的原始外觀。使用腳本方式和其他工具的組合，可以為 Intranet 或 Internet 建

8、立動(dòng)態(tài) Web 站點(diǎn)。Microsoft Visual InterDevTM是功能強(qiáng)大的 Web 應(yīng)用程序開發(fā)工具，使用這種工具可以快速開發(fā)交互的 Web 站點(diǎn)。Visual InterDev 以數(shù)據(jù)庫(kù)工具為特征，使連接到Web 站點(diǎn)的符合開放數(shù)據(jù)庫(kù)連接 (ODBC)的數(shù)據(jù)庫(kù)更加輕松。對(duì)于大多數(shù)人而言，希望使用不需要懂得HTML的創(chuàng)作工具。這些工具以“所見即所得”的用戶界面為特征，如Microsoft FrontPage、flash、dreamweaver等。使用FrontPage 2000制作網(wǎng)頁(yè)，可以將主要精力放在內(nèi)容的組織和版面的設(shè)計(jì)上，無(wú)須用戶輸入難記的HTML代碼，由FrontPag

9、e自動(dòng)在幕后生成所有的HTML代碼。當(dāng)然，盡管使用FrontPage制作網(wǎng)頁(yè)不需要學(xué)習(xí)HTML，但懂得一些HTML知識(shí)更有好處，因?yàn)镠TML在不斷地發(fā)展，許多新的標(biāo)記在不斷涌現(xiàn)，為了能夠在網(wǎng)站中使用這些最新效果，在當(dāng)前的FrontPage版本不支持新效果的時(shí)候，可以直接使用HTML語(yǔ)言來(lái)實(shí)現(xiàn)。介紹常用工具后，強(qiáng)調(diào)本書選擇FrontPage 2000的原因在于： FrontPage 2000除了能進(jìn)行網(wǎng)頁(yè)編輯外，還能進(jìn)行網(wǎng)站的管理和維護(hù)。為突出這一功能，可以通過(guò)以下幾點(diǎn)進(jìn)行描述：（1）正因?yàn)樗哂袕?qiáng)大的網(wǎng)站創(chuàng)建、維護(hù)和發(fā)布功能，所以凡是在FrontPage中創(chuàng)建或由FrontPage維護(hù)的站點(diǎn)，

10、都有一個(gè)特殊的站點(diǎn)名稱：FrontPage Web，與其他網(wǎng)站不同之處在于它們可以由FrontPage來(lái)增加一些獨(dú)特的性能，而使用其它網(wǎng)頁(yè)制作程序生成的網(wǎng)站文件夾，則必須通過(guò)FrontPage轉(zhuǎn)換器轉(zhuǎn)換后，才能在FrontPage中打開。（2） 在FrontPage中，可以建立新網(wǎng)站、引入已有網(wǎng)站和刪除網(wǎng)站。在此意義上，F(xiàn)rontPage的功能類似于windows 98資源管理器，不同之處在于FrontPage只管理與網(wǎng)站相關(guān)的網(wǎng)頁(yè)文件以及網(wǎng)頁(yè)中所使用的圖片、動(dòng)畫等文件。為便于管理網(wǎng)站，每一個(gè)FrontPage Web站點(diǎn)都含有一套標(biāo)準(zhǔn)的文件夾，在FrontPage中可以看到以下兩個(gè)文件夾：_

11、private 文件夾：其中保存正在建造中的頁(yè)面、參考文件和其它一些重要數(shù)據(jù)，雖然這個(gè)文件夾可見，但存在此文件夾下的文件對(duì)于各種瀏覽器來(lái)說(shuō)是隱藏的。images 文件夾：該文件夾專門用來(lái)存放圖片，凡是網(wǎng)頁(yè)中出現(xiàn)的圖片、動(dòng)畫等文件，最好保存在此文件夾中，使網(wǎng)站保持清潔。在Windows 98資源管理器中觀察網(wǎng)站文件夾，還可以看到另外一些文件夾，如_vti_cnf、_vti_pvt、_borders等，其中存放的是一些關(guān)于站點(diǎn)的重要數(shù)據(jù)，僅供FrontPage自己使用。（3）在網(wǎng)站的創(chuàng)建、管理和維護(hù)過(guò)程中，F(xiàn)rontPage會(huì)跟蹤網(wǎng)站中的所有文件，因此制作網(wǎng)頁(yè)時(shí)，最好先創(chuàng)建一個(gè)網(wǎng)站，然后再制作網(wǎng)站

12、中的具體網(wǎng)頁(yè)。同樣，刪除網(wǎng)站時(shí)，也要在FrontPage中進(jìn)行，F(xiàn)rontPage會(huì)將網(wǎng)站中所有的文件，包括網(wǎng)頁(yè)、圖片、動(dòng)畫、聲音等文件全部刪除。為了充分發(fā)揮FrontPage 2000的網(wǎng)站管理功能，制作網(wǎng)頁(yè)時(shí)，最好先創(chuàng)建一個(gè)網(wǎng)站，然后在此網(wǎng)站中進(jìn)行各網(wǎng)頁(yè)的制作，F(xiàn)rontPage 2000利用內(nèi)置的模板和向?qū)Ш?jiǎn)化了網(wǎng)站的創(chuàng)建過(guò)程，這些模板是一些完成了頁(yè)面間鏈接的樣板站點(diǎn)，使用時(shí)只要將文字和圖形增加到頁(yè)面中即可，如果這些模板不能滿足需要，也可以直接使用空白站點(diǎn)模板來(lái)設(shè)計(jì)制作自己的站點(diǎn)。在教學(xué)過(guò)程中可以先建立一個(gè)個(gè)人站點(diǎn)，用來(lái)介紹六種視圖方式的用途，然后將課本中的例題作為學(xué)生練習(xí)，進(jìn)行鞏固。在

13、FrontPage 2000中，有六種視圖方式，每一種視圖提供關(guān)于網(wǎng)站的不同信息，可以用來(lái)有效地管理網(wǎng)站。在這一部分必須讓學(xué)生理解每一種視圖的用途和使用方法，以便在以后創(chuàng)建和維護(hù)網(wǎng)站時(shí)，能夠根據(jù)需要選擇其中的一種來(lái)完成任務(wù)。其中：網(wǎng)頁(yè)視圖：可以用來(lái)創(chuàng)建、編輯、和預(yù)覽網(wǎng)頁(yè)，具有所見即所得的特性。文件夾視圖：顯示站點(diǎn)內(nèi)容的組織方式，用于管理站點(diǎn)中的文件和文件夾。跟Windows資源管理器相似，在文件夾視圖中可以創(chuàng)建、刪除、復(fù)制與移動(dòng)文件夾。該視圖將工作區(qū)分為左右兩部分，左側(cè)顯示網(wǎng)站中所有文件夾，單擊任一文件夾，右側(cè)工作區(qū)將顯示該文件夾下的內(nèi)容。在“文件夾”視圖中，可以移動(dòng)某頁(yè)面的位置，F(xiàn)rontP

14、age將自動(dòng)更新與該頁(yè)面有關(guān)的所有鏈接。報(bào)表視圖：用來(lái)分析站點(diǎn)內(nèi)容。如計(jì)算站點(diǎn)中的所有文件大小、顯現(xiàn)出那個(gè)文件沒(méi)有鏈接到其他任一文件、指出慢速或過(guò)期的網(wǎng)頁(yè)、以工作或是它們被分配的人和其他等方式來(lái)把文件分組。導(dǎo)航視圖：用來(lái)創(chuàng)建、顯示、打印和更改網(wǎng)站導(dǎo)航結(jié)構(gòu)的視圖。在這個(gè)視圖中可以清晰地看見整個(gè)網(wǎng)站的組織結(jié)構(gòu)（工作區(qū)上方）和文件組成（工作區(qū)下方），拖曳水平分割線可以改變上下窗口的相對(duì)大小。將工作區(qū)下方的文件名拖動(dòng)到工作區(qū)上方的組織圖中，將在網(wǎng)站中增加一個(gè)頁(yè)面，同時(shí)FrontPage 2000會(huì)依據(jù)結(jié)構(gòu)圖的形式自動(dòng)產(chǎn)生鏈接；在組織圖內(nèi)部拖動(dòng)頁(yè)面圖標(biāo)，將改變網(wǎng)站結(jié)構(gòu)；雙擊頁(yè)面圖標(biāo)，可以進(jìn)入“網(wǎng)頁(yè)視圖”

15、對(duì)頁(yè)面進(jìn)行修改。超鏈接視圖：顯示來(lái)自和指向站點(diǎn)中每一個(gè)網(wǎng)頁(yè)的所有超級(jí)鏈接。該視圖以圖形的方式顯示網(wǎng)站中各文件之間的鏈接情況，網(wǎng)頁(yè)之間的鏈接通過(guò)箭頭來(lái)標(biāo)志。當(dāng)頁(yè)面中含有許多鏈接時(shí)，為了更清晰地顯示鏈接情況，可以通過(guò)工具欄按鈕來(lái)控制顯示某類鏈接，如圖像超鏈接、重復(fù)超鏈接、頁(yè)內(nèi)超鏈接。如果網(wǎng)站中含有一個(gè)斷開的鏈接，那么這一斷開的鏈接顯示為一根斷開的線和一個(gè)撕開的頁(yè)面圖標(biāo)。如果某頁(yè)面圖標(biāo)旁邊出現(xiàn)紅色三角，表明該頁(yè)出現(xiàn)某類錯(cuò)誤，要解決錯(cuò)誤，可以右擊頁(yè)面圖標(biāo)，在快捷菜單中單擊“屬性”菜單，打開“屬性”對(duì)話框，此時(shí)“錯(cuò)誤”標(biāo)簽已經(jīng)打開，在“說(shuō)明”框中顯示有關(guān)該錯(cuò)誤的詳細(xì)說(shuō)明。 任務(wù)視圖：列出站點(diǎn)中要完成的任

16、務(wù)。所謂任務(wù)，是指維護(hù)WEB站點(diǎn)所需要完成的行動(dòng)。FrontPage 2000提供的“任務(wù)”視圖，類似于一個(gè)工作備忘錄兼計(jì)劃表，其中記錄了尚未完成仍需完成的任務(wù)，如處理超鏈接、更新圖象、增加內(nèi)容等。在WEB站點(diǎn)初步建立之后，需要定期或過(guò)一段時(shí)間進(jìn)行更新，保持站點(diǎn)信息的時(shí)效性，否則過(guò)時(shí)的信息無(wú)法提起訪問(wèn)者的興趣。隨著站點(diǎn)規(guī)模的擴(kuò)大，需要搜集和發(fā)布的信息也隨之增加，這時(shí)，網(wǎng)站管理員需要跟蹤所有的修改請(qǐng)求，并把它們作為任務(wù)分配給適當(dāng)?shù)脑O(shè)計(jì)人員進(jìn)行更新。因此，任務(wù)列表被網(wǎng)站的所有設(shè)計(jì)者所共享，并以列表方式組織任務(wù)，提供每項(xiàng)任務(wù)的詳細(xì)信息，還能對(duì)每項(xiàng)任務(wù)進(jìn)行詳細(xì)的跟蹤。在“任務(wù)”視圖中可以添加未完成任務(wù)

17、的名稱，設(shè)置工作的優(yōu)先順序以及負(fù)責(zé)此任務(wù)的工作人員，以此來(lái)簡(jiǎn)化站點(diǎn)的維護(hù)工作。在FrontPage網(wǎng)頁(yè)視圖中，有三種工作方式：普通、HTML和預(yù)覽。既可以在普通方式下輸入文字、插入圖片等來(lái)編排網(wǎng)頁(yè)，也可以在HTML方式下中輸入HTML代碼來(lái)編排網(wǎng)頁(yè)，當(dāng)然一般情況下都不采用后者，而是通過(guò)HTML方式查看HTML代碼，必要時(shí)修改其中的代碼，解決實(shí)際應(yīng)用中出現(xiàn)的某些無(wú)法解決的小問(wèn)題。在HTML方式下，可以直接輸入HTML代碼，也可以使用“查找和替換”功能對(duì)范圍廣大的代碼進(jìn)行修改。當(dāng)出現(xiàn)無(wú)法識(shí)別輸入的HTML代碼時(shí)（可能代碼出錯(cuò)或者FrontPage不支持這一代碼功能），在普通方式下頁(yè)面中會(huì)出現(xiàn)一個(gè)內(nèi)

18、部含有問(wèn)號(hào)的黃色小矩形，對(duì)于輸錯(cuò)的HTML代碼，可以雙擊該矩形，對(duì)HTML代碼進(jìn)行修改，然后單擊工具欄中的“刷新”按鈕即可。對(duì)于FrontPage不支持的HTML代碼，雖然頁(yè)面上有出錯(cuò)標(biāo)記，且在FrontPage中無(wú)法預(yù)覽，但通過(guò)WEB瀏覽器來(lái)瀏覽頁(yè)面時(shí)，應(yīng)該不會(huì)出錯(cuò)。雖然在普通方式下創(chuàng)建頁(yè)面時(shí)，這些頁(yè)面與通過(guò)瀏覽器中觀察的頁(yè)面很相似，但是為了精確地了解網(wǎng)站發(fā)布后，訪問(wèn)者所看到的頁(yè)面的實(shí)際情形，最好在預(yù)覽方式下對(duì)頁(yè)面進(jìn)行觀察。因?yàn)椴煌臑g覽器處理同樣的HTML代碼會(huì)有細(xì)微的差別，考慮到Internet上所有的訪問(wèn)者使用的瀏覽器會(huì)有所不同，因此最好在幾個(gè)不同的瀏覽器中瀏覽網(wǎng)頁(yè)，然后調(diào)整頁(yè)面結(jié)構(gòu)，

19、使之趨于完美。第二節(jié) 網(wǎng)頁(yè)的建立一、 教學(xué)要求(1) 熟悉網(wǎng)頁(yè)中的各種元素及其制作方法，初步了解網(wǎng)頁(yè)制作過(guò)程。(2) 掌握網(wǎng)頁(yè)文字處理、插入圖片、動(dòng)畫、水平線以及設(shè)置背景的方法。二、 教材分析與教法建議本節(jié)的主要任務(wù)是制作一個(gè)簡(jiǎn)單網(wǎng)頁(yè)，讓學(xué)生熟悉網(wǎng)頁(yè)中的各種元素及其制作方法，對(duì)網(wǎng)頁(yè)制作過(guò)程有初步的了解。在教學(xué)過(guò)程中，可以先展示制作好的網(wǎng)頁(yè)，然后從頭開始，將制作過(guò)程演示出來(lái)。因?yàn)閷W(xué)生在Word2000中已學(xué)會(huì)了圖文混排，所以在本節(jié)的教學(xué)中應(yīng)側(cè)重于網(wǎng)頁(yè)編排與Word文檔編排的不同之處。為了充分發(fā)揮FrontPage2000的網(wǎng)站管理功能，制作網(wǎng)頁(yè)時(shí)，最好先創(chuàng)建一個(gè)網(wǎng)站，然后在此網(wǎng)站中進(jìn)行各網(wǎng)頁(yè)的制

20、作。FrontPage2000利用內(nèi)置的模板和向?qū)Ш?jiǎn)化了網(wǎng)站的創(chuàng)建過(guò)程，這些模板是一些完成了頁(yè)面間鏈接的樣板站點(diǎn)，使用時(shí)只要將文字和圖形增加到頁(yè)面中即可。如果這些模板不能滿足需要，也可以直接使用空白網(wǎng)站模板來(lái)設(shè)計(jì)制作自己的站點(diǎn)。為了學(xué)會(huì)網(wǎng)頁(yè)制作的各種技巧，本節(jié)講述網(wǎng)頁(yè)制作時(shí)，采用空白網(wǎng)站模板，來(lái)獨(dú)立創(chuàng)建一個(gè)網(wǎng)站。因?yàn)橹谱骶W(wǎng)頁(yè)的手段和技巧較多，版面設(shè)計(jì)更是豐富多彩，所以上課時(shí)，重點(diǎn)應(yīng)放在介紹網(wǎng)頁(yè)的制作手段上，讓學(xué)生了解十種手段（文字、圖片、表格、框架、表單、鏈接等），至于如何讓頁(yè)面更美觀，應(yīng)該讓學(xué)生自己去發(fā)揮，這一點(diǎn)也體現(xiàn)在上機(jī)實(shí)習(xí)上。雖然啟動(dòng)FrontPage2000后，進(jìn)入網(wǎng)頁(yè)視圖就可以直接

21、制作網(wǎng)頁(yè)，但是這樣制作出來(lái)的網(wǎng)頁(yè)文件存在一些問(wèn)題，最突出的問(wèn)題就是網(wǎng)頁(yè)中所插入的圖片、動(dòng)畫、聲音等文件的路徑使用的是絕對(duì)路徑，在這種情況下，如果網(wǎng)站位置發(fā)生遷移，所有圖片、動(dòng)畫、聲音文件的路徑必須修改為服務(wù)器可以搜索到的位置，否則在圖片出現(xiàn)的位置將無(wú)法顯示圖片本身，而顯示為一個(gè)圖標(biāo)，解決的辦法是單擊HTML標(biāo)簽，將所有插入的圖片、動(dòng)畫、聲音等文件的路徑改為相對(duì)路徑，如果圖片、動(dòng)畫等文件較多的話，以上操作的工作量相當(dāng)可觀，因此建議在啟動(dòng)FrontPage2000后，先創(chuàng)建一個(gè)網(wǎng)站，再對(duì)頁(yè)面進(jìn)行編輯，這樣在網(wǎng)站文件夾內(nèi)，使用相對(duì)路徑進(jìn)行文件的引用，即使整個(gè)網(wǎng)站發(fā)生遷移，網(wǎng)站內(nèi)部的相對(duì)位置卻保持不變

22、。另外，還可以讓FrontPage2000來(lái)跟蹤站點(diǎn)和頁(yè)面的變化以便及時(shí)更新。因?yàn)槭澜缟嫌卸喾N文字，為了使不同的文字能在瀏覽器中被正確地顯示出來(lái)，需要在網(wǎng)頁(yè)中增加有關(guān)語(yǔ)言代碼的標(biāo)志，這樣瀏覽器就知道以何種編碼方式顯示該網(wǎng)頁(yè)。FrontPage在頁(yè)面屬性中進(jìn)行語(yǔ)言設(shè)置，其中預(yù)定義了一些國(guó)家的語(yǔ)言，如果使用中文Windows98，那么其中有一條是簡(jiǎn)體中文（GB2312），將語(yǔ)言定義成簡(jiǎn)體中文（GB2312）后，當(dāng)用戶瀏覽該頁(yè)面時(shí)，即使系統(tǒng)中沒(méi)有中文環(huán)境（中文Windows或外掛中文環(huán)境），也能看到整齊的中文頁(yè)面。學(xué)習(xí)了WORD之后，學(xué)生已掌握文字處理工作，因此以下具體操作可以讓學(xué)生自己完成，教師總

23、結(jié)時(shí)再點(diǎn)明網(wǎng)頁(yè)制作和文字處理的不同之處。（1）文字輸入文字方面的不同之處主要是字體的運(yùn)用。在頁(yè)面中使用某些不常用的字體時(shí)，雖然頁(yè)面更醒目、更美觀，但是如果訪問(wèn)者的計(jì)算機(jī)沒(méi)有安裝這種字體，瀏覽器將用缺省的字體來(lái)表示文本，這樣，不但無(wú)法看出設(shè)計(jì)者的預(yù)期效果，更嚴(yán)重的是可能因?yàn)樽煮w不兼容而造成亂碼，使訪問(wèn)者無(wú)法正常瀏覽頁(yè)面。因此，建議不要使用不常用的字體（包括Office2000自帶的14種中文字體）。某些標(biāo)題文字一定要通過(guò)字體的變化加以突出或美化時(shí)，可以在Photoshop等軟件中將其做成圖片，再插入到頁(yè)面中。（2）圖片除了掌握插入圖片的方法外，對(duì)于網(wǎng)頁(yè)中常用的圖片格式也應(yīng)該有所了解，這樣學(xué)生才能

24、理解為什么保存網(wǎng)頁(yè)時(shí)會(huì)將圖片轉(zhuǎn)換為其他格式。FrontPage 2000支持GIF、JPG、PNG三種圖片格式，它們都屬于壓縮的圖片，文件長(zhǎng)度較小，因此適合網(wǎng)絡(luò)傳輸。另外，它們適用于各種平臺(tái)（Windows、Unix、Macintosh等），因此大部分瀏覽器都將它們作為標(biāo)準(zhǔn)圖片格式。利用FrontPage 2000制作網(wǎng)頁(yè)時(shí)，雖然可以將任何類型的圖片文件插入到網(wǎng)頁(yè)中，但在引入圖片的時(shí)候，會(huì)將具有256色或更少顏色的圖象轉(zhuǎn)換成GIF格式，而將多于256色的圖片轉(zhuǎn)換為JPG格式。GIF圖形采用非失真的壓縮方式，最多只能顯示256種顏色，適合一些高反差、色彩單一的圖象，如商標(biāo)、卡通等。當(dāng)將其它格式的

25、圖片另存為GIF格式時(shí)，可以看到在保證圖片分辨率的同時(shí)，圖片的色彩發(fā)生了改變。JPG格式采用失真式壓縮，在保證色彩變化層次的同時(shí)，犧牲圖片的清晰度。所以該格式適合于顯示色彩豐富的圖片，如照片、電子美術(shù)作品等。PNG格式集GIF和JPG兩種圖片的優(yōu)點(diǎn)，采用非失真的壓縮方式，同時(shí)色彩可以支持到48bits，但是目前未被普遍采用，有些瀏覽器還不支持該格式。（3）動(dòng)畫在網(wǎng)頁(yè)中可以使用GIF動(dòng)畫和Flash動(dòng)畫。GIF動(dòng)畫的每一幀圖片都是GIF格式，利用GIF動(dòng)畫工具，如GIF Animator等，將各幀串在一起，形成一個(gè)單獨(dú)的文件，這就是GIF動(dòng)畫，WEB瀏覽器可以連續(xù)快速地顯示這些圖片，這樣就產(chǎn)生動(dòng)

26、畫效果。Flash動(dòng)畫則是利用Flash軟件制作的一種動(dòng)畫格式，在網(wǎng)頁(yè)中插入這種動(dòng)畫后，需要專門的Flash插件才能播放。（4）水平線水平線是貫穿網(wǎng)頁(yè)寬度的細(xì)灰條，用于分隔文本或加著重符。添加水平線后，可以修改其屬性來(lái)更改寬度、高度、對(duì)齊方式和顏色。如果網(wǎng)頁(yè)使用了主題，則會(huì)使用圖形來(lái)代替水平線以匹配主題。（5）背景設(shè)置背景的主要目的是為了使網(wǎng)頁(yè)更美觀。網(wǎng)頁(yè)的背景可以是某一種顏色，也可以是一幅圖片。如果該圖片比屏幕小，則瀏覽器自動(dòng)重復(fù)使用該圖片將屏幕鋪滿（平鋪）。使用較大圖片做背景無(wú)疑會(huì)延長(zhǎng)網(wǎng)頁(yè)的下載時(shí)間，因此建議使用小圖片做背景。（6）保存一般情況下，保存網(wǎng)頁(yè)時(shí)，F(xiàn)rontPage會(huì)提示將網(wǎng)頁(yè)

27、中引用的圖片、動(dòng)畫、聲音等文件同時(shí)保存下來(lái)，以保持它們?cè)陧?yè)面中的位置，每一個(gè)圖片或動(dòng)畫都按規(guī)則另取了一個(gè)文件名，此時(shí)可以重命名，將圖片等文件存放到默認(rèn)文件夾中（當(dāng)前頁(yè)面所在的文件夾），或改變圖片等文件的保存位置，將它們保存到另一固定文件夾（如Images文件夾）中，使網(wǎng)站看起來(lái)更整潔。第三節(jié) 網(wǎng)頁(yè)圖片處理一、教學(xué)要求(1) 熟悉FrontPage2000的圖片處理功能。(2) 掌握?qǐng)D文布局的方法。(3) 學(xué)會(huì)“設(shè)置透明顏色”按鈕的用法，并能在網(wǎng)頁(yè)制作過(guò)程中靈活運(yùn)用。(4) 學(xué)會(huì)使用“自動(dòng)縮略圖”技巧來(lái)加速網(wǎng)頁(yè)的下載。二、教材分析與教法建議添加圖形，如圖片，動(dòng)畫和視頻到站點(diǎn)上時(shí)，對(duì)網(wǎng)站的影響有兩

28、個(gè)，一是站點(diǎn)大小將會(huì)迅速增加，二是延長(zhǎng)網(wǎng)頁(yè)的下載時(shí)間。若 Internet 服務(wù)提供商限制站點(diǎn)大小，則圖形的大小、質(zhì)量，類型和數(shù)量就是重要的考慮因素。本節(jié)主要介紹網(wǎng)頁(yè)中的圖片處理方法，通過(guò)這些處理，不但使網(wǎng)頁(yè)更美觀，還應(yīng)使網(wǎng)頁(yè)更實(shí)用。在教學(xué)過(guò)程中應(yīng)講明各種操作的目的和方法，讓學(xué)生理解為什么要進(jìn)行這些圖片處理，并在實(shí)際制作中靈活運(yùn)用。(1) 圖文布局在網(wǎng)頁(yè)中，圖片與文本的對(duì)齊方式有十種，分別是：左對(duì)齊：圖片放在左邊界處，文本在右側(cè)環(huán)繞圖片。右對(duì)齊：圖片放在右邊界處，文本在左側(cè)環(huán)繞圖片。頂邊對(duì)齊：使圖片的頂部與文本行中最高文本的頂部對(duì)齊。文本上方：與文字頂端對(duì)齊。相對(duì)垂直居中：使圖片的中線與文本行

29、底線對(duì)齊。絕對(duì)垂直居中：使圖片的中線與行中最高文本的中間對(duì)齊?；€：使圖片與文本基線對(duì)齊（緊靠文本底下的一條無(wú)形的直線）。相對(duì)底邊對(duì)齊：使圖片的底部與文本對(duì)齊。絕對(duì)底部對(duì)齊：使圖片的底部與行中文本的底部對(duì)齊。水平居中：使圖片的中線與行中最高文本的中間對(duì)齊。每種對(duì)齊方式的名稱和實(shí)際對(duì)齊效果不夠明確，可以安排學(xué)生自己實(shí)踐，然后總結(jié)得出具體結(jié)論。(2) 圖片定位和圖層在FrontPage 2000中，對(duì)圖片與文字同等處理，所以圖片只能放置在文字之間，且只能在文字和圖片之間進(jìn)行移動(dòng)。如果頁(yè)面上沒(méi)有任何文字，那么圖片只能放置在第一行首位，使用直接拖動(dòng)圖片的方法，無(wú)法移動(dòng)圖片的位置。這一知識(shí)點(diǎn)可以通過(guò)設(shè)問(wèn)

30、的方法，先在新建網(wǎng)頁(yè)中插入一幅圖片，然后要求學(xué)生改變圖片位置，當(dāng)學(xué)生無(wú)法完成任務(wù)時(shí)，引入絕對(duì)定位的概念，同時(shí)介紹圖片工具欄。當(dāng)網(wǎng)頁(yè)中插入若干圖片時(shí)，這些圖片可以重疊起來(lái)，形成特殊效果。在系統(tǒng)默認(rèn)的情況下，后插入的圖片將重疊在已有圖片之上，這樣就形成了圖層。雖然通過(guò)演示可以明顯看出效果，但教師應(yīng)有意識(shí)地選擇一些背景透明的圖片來(lái)演示，通過(guò)幾幅圖片重疊，形成一幅完整的圖片。這樣，不但可以說(shuō)明重疊的效果，還可以在以后學(xué)習(xí)鏈接時(shí)將這些圖片分別鏈接到其他網(wǎng)頁(yè)，由此，學(xué)生可以進(jìn)一步理解重疊圖片的意義所在。(3) 透明所謂透明，是指將圖片中的一種顏色擦除（通常是背景色），這樣頁(yè)面的背景顏色就可以透過(guò)來(lái)。通過(guò)教

31、師的演示，學(xué)生不難看出透明的效果，而教師則要進(jìn)一步說(shuō)明一個(gè)GIF圖片只能有一種透明色，無(wú)論選擇擦除哪一種顏色，圖片各處的該種顏色都將消失。接下來(lái)可以引導(dǎo)學(xué)生利用“圖片”工具欄的相應(yīng)按鈕，對(duì)圖片進(jìn)行各種處理，如調(diào)整亮度、對(duì)比度、凹凸效果、黑白效果、旋轉(zhuǎn)等，學(xué)生對(duì)圖片處理較感興趣，因此可以讓學(xué)生自己操作，體會(huì)各種特殊效果。除了“透明”屬性外，GIF圖片還有“交錯(cuò)”的效果，這種效果類似于電視特技中的“淡出”，開始圖片上仿佛有一層薄霧，然后圖片越來(lái)越清晰，直到圖片完全下載。這種效果看起來(lái)好象圖片下載的速度較快，其實(shí)不然，它只是讓訪問(wèn)者在等待頁(yè)面下載的時(shí)間里有內(nèi)容可看，而不必等到圖片完全下載后才顯示頁(yè)面

32、。同樣如果將JPG格式的圖片屬性設(shè)置為“漸進(jìn)”，其效果與GIF格式的“交錯(cuò)”類似。要定義圖片的“交錯(cuò)”或“漸進(jìn)”效果，可以右擊圖片，在快捷菜單中單擊“圖片屬性”，打開“圖片屬性”對(duì)話框，單擊“常規(guī)”標(biāo)簽，在“類型”中勾選相應(yīng)屬性即可。(4) 自動(dòng)縮略圖當(dāng)網(wǎng)頁(yè)中采用大型圖片時(shí)，可能需要花很長(zhǎng)時(shí)間來(lái)下載（取決于訪問(wèn)者的系統(tǒng)），這時(shí)，可能導(dǎo)致訪問(wèn)者在等待中失去耐心。因此建議使用較小的圖片。如果要改變網(wǎng)頁(yè)中圖片的大小，既可以通過(guò)改變圖形的高度和寬度屬性來(lái)調(diào)整圖形大小，也可以在網(wǎng)頁(yè)上直接拖動(dòng)圖片四周的控制點(diǎn)來(lái)調(diào)整其大小。但是應(yīng)該向?qū)W生明確這樣的操作僅僅通過(guò)更改 HTML 標(biāo)記符使圖片在屏幕上顯示得較小，

33、而實(shí)際的圖片文件大小和下載時(shí)間并不會(huì)更改。因此，真正要減少圖片文件的大小和下載時(shí)間，必須先在頁(yè)面上重置它的大小，然后單擊“圖片” 工具欄“重新取樣”按鈕，這樣，文件大小才會(huì)減少以匹配較小的尺寸。另外，可以將圖片轉(zhuǎn)換為JPG格式，并降低質(zhì)量設(shè)置，增加文件的壓縮率而使文件大小減少。如果一定要使用大圖片來(lái)說(shuō)明問(wèn)題，則可以通過(guò)縮略圖來(lái)解決?？s略圖是能快速下載的圖片的縮小版本。使用 FrontPage 2000自動(dòng)縮略圖功能可以自動(dòng)創(chuàng)建縮略圖，且縮略圖具有指向原始圖片的超鏈接，訪問(wèn)者單擊它即可通過(guò)超鏈接看到原來(lái)的圖片。 第四節(jié) 網(wǎng)頁(yè)框架一、教學(xué)要求(1) 理解框架結(jié)構(gòu)的含義和用途。(2) 掌握建立框架網(wǎng)

34、頁(yè)的方法。(3) 掌握框架網(wǎng)頁(yè)的保存方法。二、教材分析與教法建議在本節(jié)課的教學(xué)過(guò)程中，應(yīng)首先通過(guò)框架網(wǎng)頁(yè)與其他網(wǎng)頁(yè)的對(duì)比，引導(dǎo)學(xué)生理解框架的含義：框架是一種獨(dú)特的結(jié)構(gòu)，可以將一個(gè)頁(yè)面分割成幾個(gè)不同的組成部分，每一部分都是一個(gè)單獨(dú)的整體，可以顯示一個(gè)網(wǎng)頁(yè)，這樣，在瀏覽器的一個(gè)窗口中可以同時(shí)瀏覽多個(gè)網(wǎng)頁(yè)。然后再演示兩種不同框架結(jié)構(gòu)網(wǎng)頁(yè)，一種框架設(shè)計(jì)結(jié)構(gòu)一目了然，讓人輕松穿梭其間；另一種框架設(shè)計(jì)卻將窗口分割得亂七八遭，讓人越看越亂。通過(guò)對(duì)比，讓學(xué)生知道設(shè)計(jì)框架的目的，并深化為哪些網(wǎng)頁(yè)的內(nèi)容可以使用框架、如何使用框架。通常在以下幾種情況下使用框架較為理想：(1) 目錄表：在頁(yè)面中使用一個(gè)具有鏈接的目錄

35、表，將目錄放在一個(gè)固定的框架中，通過(guò)另一框架觀看每一目錄所鏈接的各個(gè)頁(yè)面。如將窗口分為上下兩個(gè)框架，上面顯示產(chǎn)品目錄，下面顯示每種產(chǎn)品的型號(hào)、價(jià)格等詳細(xì)信息。(2) 固定的頁(yè)面內(nèi)容：如頁(yè)面大標(biāo)題。(3) 更好的表單和效果：可以在一個(gè)框架中建立表單，在另一個(gè)框架中顯示表單統(tǒng)計(jì)結(jié)果，這樣更為直觀和迅捷。在FrontPage2000通過(guò)框架網(wǎng)頁(yè)模板建立框架，其中共有10種不同結(jié)構(gòu)的框架，應(yīng)用于不同的目的，根據(jù)需要選擇其中的一種，然后分別指定各框架中的網(wǎng)頁(yè)文件，也可以直接在框架中進(jìn)行網(wǎng)頁(yè)制作。如果FrontPage所提供的基本框架樣式都無(wú)法滿足需要，可以先選擇一個(gè)較為接近的框架進(jìn)行套用，然后再通過(guò)“拆

36、分框架”菜單將框架拆分成所需的樣式。在制作過(guò)程中，如果發(fā)現(xiàn)各框架大小不合理，可以通過(guò)拖動(dòng)框架邊框進(jìn)行粗略調(diào)整，也可以通過(guò)“框架屬性”對(duì)話框進(jìn)行精確調(diào)整。從“框架屬性”對(duì)話框可以看出框架大小有三種不同的度量單位，除了可以設(shè)置框架所占的百分比和像素外，還可以設(shè)置各框架的相對(duì)比例。最后，應(yīng)該向?qū)W生說(shuō)明并不是所有的瀏覽器都支持框架的設(shè)置（如CDIDA），因此可能有人無(wú)法瀏覽到這一網(wǎng)頁(yè)。因?yàn)榭蚣芫W(wǎng)頁(yè)可能同時(shí)包含幾個(gè)網(wǎng)頁(yè)，因此在保存框架頁(yè)面時(shí)，需要根據(jù)窗口提示，為不同的網(wǎng)頁(yè)命名。單擊“保存”按鈕，在“另存為”對(duì)話框中包含一個(gè)框架頁(yè)面圖，其中一個(gè)框架會(huì)處于高亮狀態(tài)，表示正在保存的頁(yè)面，根據(jù)提示，分別給不同的

37、網(wǎng)頁(yè)命名。今后如果只修改了其中的一個(gè)頁(yè)面，需要保存時(shí)，可單擊該頁(yè)的框架，然后單擊菜單“框架”、“保存頁(yè)面”。第五節(jié) 網(wǎng)頁(yè)表格一、教學(xué)要求(1) 理解表格在網(wǎng)頁(yè)制作中的特殊用途。(2) 掌握繪制表格的方法并能根據(jù)實(shí)際需要設(shè)計(jì)表格。(3) 掌握設(shè)置表格的邊框、背景、大小的方法。二、教材分析與教法建議本節(jié)主要通過(guò)主頁(yè)頁(yè)面的設(shè)計(jì)和編排，介紹網(wǎng)頁(yè)表格的制作和編輯。在Word2000中，學(xué)生已經(jīng)學(xué)會(huì)表格的三種制作方法，因此本課應(yīng)該側(cè)重于網(wǎng)頁(yè)表格與Word2000文本表格的不同之處。主要是表格的功能不同，網(wǎng)頁(yè)表格的功能已不僅僅是組織數(shù)據(jù)，而更多地被用來(lái)設(shè)計(jì)頁(yè)面布局，這樣既可以充分利用整個(gè)頁(yè)面空間，同時(shí)也使頁(yè)

38、面更整齊、美觀。通過(guò)對(duì)主頁(yè)頁(yè)面的觀察和分析可知：在網(wǎng)頁(yè)制作中，可以先設(shè)計(jì)版面，然后利用表格功能將頁(yè)面劃分成若干單元格，每一單元格填充相應(yīng)文字或圖片，再對(duì)表格進(jìn)行美化后，即可產(chǎn)生所需網(wǎng)頁(yè)。過(guò)去用HTML代碼產(chǎn)生表格，不僅代碼復(fù)雜，而且稍不注意就容易出錯(cuò)，給調(diào)試工作帶來(lái)麻煩。FrontPage具有增強(qiáng)的表格制作功能，可以使用制表工具，直接在網(wǎng)頁(yè)上畫出任意形狀和大小的表格，使用鼠標(biāo)更可以自由改變表格的大小和寬度，因此，在FrontPage中制作網(wǎng)頁(yè)，設(shè)計(jì)者可以將更多的精力放在版面設(shè)計(jì)上。在網(wǎng)頁(yè)中建立表格的方法與Word相同，所以該部分可以安排學(xué)生自己完成。教師總結(jié)時(shí)說(shuō)明：因?yàn)閮?nèi)容和版面的需要，網(wǎng)頁(yè)中

39、的表格一般都較復(fù)雜，所以，大多采用“手動(dòng)制表”方法。在FrontPage中可以對(duì)表格進(jìn)行的行列操作很多，如表格中的單元格可以再進(jìn)行拆分或合并等。也可以將表格轉(zhuǎn)換成文本，甚至可以將現(xiàn)有的文本轉(zhuǎn)變?yōu)楸砀?。已繪制好的表格，可以在單元格中插入文字、圖片、表單字段甚至另一表格。通過(guò)“表格屬性”和“單元格屬性”的設(shè)置，定義表格的大小、背景、邊框等參數(shù)，使之更美觀。最后提醒學(xué)生為避免因訪問(wèn)者瀏覽器設(shè)置的不同而產(chǎn)生不同的效果，在設(shè)計(jì)表格時(shí)，最好采用相對(duì)大小和相對(duì)位置的設(shè)置（按百分比）。第六節(jié) 表單的制作一、教學(xué)要求(1) 理解表單網(wǎng)頁(yè)的用途。(2) 掌握六種表單字段的含義。(3) 掌握表單網(wǎng)頁(yè)的制作方法，能夠

40、與表格技術(shù)相結(jié)合，制作美觀實(shí)用的表單。(4) 了解表單資料的收集原理。(5) 了解搜索表單的用途。二、教材分析與教法建議本節(jié)介紹表單的建立和表單資料的收集，在教學(xué)過(guò)程中，首先要讓學(xué)生理解表單的作用。通常情況下，訪問(wèn)者瀏覽頁(yè)面是為了閱讀文章、查找信息，他們所做的僅僅是在不同的鏈接之間進(jìn)行簡(jiǎn)單的瀏覽和單擊，因此這是一種單方面的對(duì)話。如果網(wǎng)站設(shè)計(jì)者想統(tǒng)計(jì)訪問(wèn)者信息，了解他們的意見和建議，則必須通過(guò)表單進(jìn)行。一般的網(wǎng)站都有訪客留言板或用戶注冊(cè)表，通過(guò)展示某一網(wǎng)站的留言板，學(xué)生不難理解表單的功能。接下來(lái)通過(guò)表單網(wǎng)頁(yè)向?qū)Ы⒁粋€(gè)聯(lián)絡(luò)信息表單，這樣學(xué)生對(duì)表單的建立有了初步的印象，并通過(guò)對(duì)這一表單內(nèi)的各種字段

41、的認(rèn)識(shí)，熟悉六種字段的功能。然后再通過(guò)逐個(gè)插入表單字段的方法，建立個(gè)性化表單。在這一過(guò)程中，學(xué)生不僅要學(xué)會(huì)各種字段的設(shè)置方法，更重要的是應(yīng)該有統(tǒng)籌規(guī)劃的意識(shí)，并與前面所學(xué)的表格知識(shí)相聯(lián)系，設(shè)計(jì)出緊湊合理的表單。為了讓訪問(wèn)者知道應(yīng)該在文本框中輸入什么信息，應(yīng)在各字段前增加文本標(biāo)識(shí)。為了讓服務(wù)器知道哪幾個(gè)單選按鈕或復(fù)選框用來(lái)回答同一個(gè)問(wèn)題，則必須為每一個(gè)單選按鈕組或復(fù)選框組指定一個(gè)內(nèi)部名稱，并為每個(gè)單選按鈕或復(fù)選框指定一個(gè)值。這些內(nèi)部名稱不會(huì)被顯示在表單上，但可在表單結(jié)果中用來(lái)標(biāo)識(shí)該單選按鈕組或復(fù)選框組。每一個(gè)單選按鈕組中可以指定一個(gè)單選按鈕作為默認(rèn)選項(xiàng)。每一個(gè)表單外都有一個(gè)虛線框，內(nèi)部都有一個(gè)提

42、交按鈕和清除按鈕，單擊清除按鈕，將清除所輸入的信息，重新輸入；單擊提交按鈕，表示訪問(wèn)者信息輸入結(jié)束，同時(shí)把這些數(shù)據(jù)送回服務(wù)器。服務(wù)器根據(jù)訪問(wèn)者提交的數(shù)據(jù)，進(jìn)行資料的收集和處理。應(yīng)該讓學(xué)生明白該過(guò)程在服務(wù)器端通過(guò)CGI或ASP程序來(lái)完成，如果沒(méi)有配套的CGI程序則無(wú)法進(jìn)行。FrontPage使用了一些具有特定功能的程序來(lái)取代CGI的功能，因此，只要設(shè)計(jì)表單時(shí)指定要以哪些程序來(lái)處理，這些程序就會(huì)自動(dòng)添加到網(wǎng)頁(yè)中，不需要專門撰寫CGI程序來(lái)配合。當(dāng)然，網(wǎng)站所在的服務(wù)器必須支持FrontPage Server Extentions，否則表單無(wú)法產(chǎn)生作用，所以大多數(shù)學(xué)校的教學(xué)演示用計(jì)算機(jī)都無(wú)法進(jìn)行表單資

43、料的收集和整理，因此向?qū)W生解釋產(chǎn)生這一現(xiàn)象的原因非常必要。缺省狀態(tài)下，F(xiàn)rontPage將表單結(jié)果以一個(gè)文件形式保存在網(wǎng)站中，這個(gè)文件位于_private文件夾下，名為results.txt，可以通過(guò)任何文本編輯器進(jìn)行查看。每一位訪問(wèn)者提交表單時(shí)，F(xiàn)rontPage就將表單結(jié)果增加到上述文件中。當(dāng)然也可以將表單結(jié)果發(fā)送到一個(gè)E-mail地址中，或者把所獲得的數(shù)據(jù)發(fā)布到另一個(gè)頁(yè)面上，通過(guò)主頁(yè)上的標(biāo)題鏈接，讓所有人都可以看到結(jié)果。在搜索表單部分，應(yīng)讓學(xué)生搞清它的功能僅限于在本網(wǎng)站內(nèi)部進(jìn)行搜索，幫助訪問(wèn)者迅速查找所需主題，而不是Web上的搜索引擎。搜索表單的建立方法比較簡(jiǎn)單，但在創(chuàng)建時(shí)應(yīng)注意以下幾個(gè)

44、問(wèn)題：(1) 應(yīng)向訪問(wèn)者說(shuō)明如何使用搜索表單，并將搜索表單緊接在解釋文本之后。(2) 搜索表單不會(huì)對(duì)大約300個(gè)一般的英語(yǔ)單詞進(jìn)行搜索，例如“a”、“the” 等等。(3) 在站點(diǎn)中保存網(wǎng)頁(yè)的時(shí)候，F(xiàn)rontPage 將會(huì)把所有新單詞添加到站點(diǎn)的文本索引中。文本索引是不斷增加的：新的單詞會(huì)被加入到索引中，但舊的不會(huì)被刪除。要?jiǎng)?chuàng)建新的文本索引并去除過(guò)時(shí)的單詞，須依次單擊菜單“工具”、“重新計(jì)算超鏈接”。注意：如果有很多外部超鏈接，這個(gè)過(guò)程可能會(huì)用幾分鐘時(shí)間，因?yàn)?FrontPage 必須連接并檢查每個(gè)超鏈接。 (4) 如果站點(diǎn)是基于服務(wù)器的，并且服務(wù)器運(yùn)行 Microsoft FrontPage

45、 服務(wù)器擴(kuò)展，則FrontPage 會(huì)根據(jù)包含在網(wǎng)站所有網(wǎng)頁(yè)中的單字自動(dòng)創(chuàng)建文本索引。創(chuàng)建搜索表單來(lái)讓站點(diǎn)訪問(wèn)者對(duì)指定單字或短語(yǔ)搜索您的站點(diǎn)。當(dāng)訪問(wèn)者提交搜索表單， FrontPage 檢索文本索引，并且按匹配程度顯示指向包含搜索文本的網(wǎng)頁(yè)的超鏈接列表。第七節(jié) 創(chuàng)建超鏈接一、 教學(xué)要求(1) 理解超鏈接的概念，了解鏈接的種類。(2) 學(xué)會(huì)規(guī)劃網(wǎng)站的各個(gè)鏈接，并正確完成。(3) 掌握創(chuàng)建超鏈接的方法。二、教材分析與教法建議WWW的精彩之處就在于把大量的信息和頁(yè)面通過(guò)各種鏈接組織起來(lái)，單擊含有超鏈接的文本或圖片，可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。在前面的學(xué)習(xí)中，學(xué)生已經(jīng)掌握了大部分網(wǎng)頁(yè)制作技術(shù)，并已制作出了68

46、個(gè)網(wǎng)頁(yè)，如何將這些網(wǎng)頁(yè)組合成一個(gè)有機(jī)的整體，是本課的主要任務(wù)，也是最終形成作品的時(shí)機(jī)，因此，本課內(nèi)容是本章的重點(diǎn)。在教學(xué)過(guò)程中，教師可以通過(guò)先回顧第四章的有關(guān)知識(shí)，引入本課的主題-超鏈接，來(lái)說(shuō)明每一個(gè)鏈接都有鏈接源和鏈接目標(biāo)，根據(jù)鏈接目標(biāo)的不同，一般可以將鏈接分為三種：一種是與絕對(duì)網(wǎng)址的鏈接，通常是不同網(wǎng)站之間的鏈接；另一種是相對(duì)網(wǎng)址的鏈接，通常是同一網(wǎng)站中不同網(wǎng)頁(yè)之間的鏈接；第三種是同一頁(yè)面內(nèi)部的鏈接，通常是書簽式鏈接。然后，展示課本示例網(wǎng)站，單擊各種類型的超鏈接讓學(xué)生直觀地看到鏈接源和鏈接目標(biāo)。介紹了超鏈接的種類、作用后，再進(jìn)一步說(shuō)明網(wǎng)站中的鏈接應(yīng)事先加以規(guī)劃，這一理念從規(guī)劃網(wǎng)站結(jié)構(gòu)開始，

47、貫穿于整個(gè)網(wǎng)站制作過(guò)程，目的在于使訪問(wèn)者輕松瀏覽網(wǎng)站。接下來(lái)進(jìn)行超鏈接的設(shè)計(jì)和制作，在此過(guò)程中，教師可以先介紹一下如何創(chuàng)建超鏈接，然后讓學(xué)生自己動(dòng)手實(shí)踐在同一頁(yè)面內(nèi)部的鏈接，如“返回頁(yè)首”的鏈接，并進(jìn)行預(yù)覽，教師補(bǔ)充說(shuō)明這一種鏈接的使用場(chǎng)合。然后由教師講解“書簽”鏈接，這是本課的一個(gè)難點(diǎn)。書簽是網(wǎng)頁(yè)上被標(biāo)記的位置或被標(biāo)記的選中文本。作為超鏈接的目標(biāo)，一個(gè)書簽可應(yīng)用到一個(gè)字符串或一個(gè)網(wǎng)頁(yè)的指定位置上。在URL中，書簽之前會(huì)有一個(gè)#符，稱之為鎖定標(biāo)記。通過(guò)書簽的鏈接，訪問(wèn)者就不必從頭到尾瀏覽，也不必通過(guò)滾動(dòng)條尋找所需資料。通常，如果一個(gè)網(wǎng)頁(yè)內(nèi)容較多，為便于瀏覽，可以提供幾個(gè)書簽和索引標(biāo)題，并創(chuàng)建頁(yè)

48、面內(nèi)部鏈接，讓訪問(wèn)者迅速?gòu)木W(wǎng)頁(yè)中的特定位置開始瀏覽，當(dāng)然還應(yīng)提供返回頁(yè)首的鏈接。在課堂教學(xué)過(guò)程中，教師可以先通過(guò)滾動(dòng)條展示一個(gè)較長(zhǎng)網(wǎng)頁(yè)的全貌，再通過(guò)單擊各個(gè)指向書簽的鏈接，來(lái)瀏覽同一網(wǎng)頁(yè)，使學(xué)生體會(huì)使用書簽的優(yōu)點(diǎn)，進(jìn)而講述要建立書簽式鏈接，必須先定義好書簽，才能進(jìn)行鏈接。教師演示完畢后，除了讓學(xué)生依例完成操作外，還應(yīng)提出“在不同網(wǎng)頁(yè)之間可否進(jìn)行書簽式鏈接？”，讓學(xué)生進(jìn)行探索和實(shí)踐，并找出正確答案。在不同頁(yè)面之間的鏈接部分，由于操作上的相似性，教師應(yīng)重點(diǎn)突破框架間鏈接的目標(biāo)框架這一難點(diǎn)，首先應(yīng)讓學(xué)生分清鏈接的五種目標(biāo)框架的含義，并根據(jù)需要選擇其中的一種。網(wǎng)頁(yè)默認(rèn)值：Main框架。相同框架：在鏈接

49、所在的框架中顯示鏈接目標(biāo)。整頁(yè)：將框架展開，滿屏后顯示鏈接目標(biāo)。新建窗口：新建一個(gè)瀏覽器窗口顯示鏈接目標(biāo)。父框架：當(dāng)框架中又劃分了其它框架時(shí)，選擇此項(xiàng)可以回到上一層框架顯示鏈接目標(biāo)。在學(xué)生作品中，目標(biāo)框架問(wèn)題主要表現(xiàn)在兩方面，一是向下一層網(wǎng)頁(yè)鏈接時(shí)，目標(biāo)框架一般采取默認(rèn)值（即main框架），二是從框架結(jié)構(gòu)的網(wǎng)頁(yè)返回主頁(yè)時(shí)，目標(biāo)框架一般采用“整頁(yè)”，否則將使整個(gè)框架結(jié)構(gòu)重復(fù)嵌套，頁(yè)面顯得混亂不堪。鏈接到WEB站點(diǎn)的主要目的在于鏈接到一些與本網(wǎng)站主題相關(guān)的其它網(wǎng)站或自己喜歡的、希望推薦給網(wǎng)友的網(wǎng)站，也可以鏈接到一個(gè)E-mail地址。與網(wǎng)站內(nèi)部鏈接的不同之處在于此鏈接必須采用絕對(duì)地址。在這一階段的學(xué)

50、習(xí)中，應(yīng)發(fā)揮學(xué)生自主學(xué)習(xí)的精神，由學(xué)生自己完成相應(yīng)的鏈接，而教師的主要任務(wù)是讓學(xué)生明確鏈接目標(biāo)是絕對(duì)地址還是相對(duì)地址，并說(shuō)明使用相對(duì)地址進(jìn)行鏈接的優(yōu)點(diǎn)。在FrontPage 2000中定義鏈接時(shí)，一般都是以絕對(duì)路徑方式進(jìn)行的。如在與絕對(duì)地址的鏈接中，鏈接目標(biāo)的URL通常都形如等；在同一網(wǎng)站內(nèi)部的鏈接，鏈接目標(biāo)的地址形如“file:/D:/huanbao/index.htm”，這樣當(dāng)網(wǎng)站位置遷移到其它電腦時(shí)，就無(wú)法找到這些目標(biāo)文件了。因此，在編輯頁(yè)面時(shí)，除了與WEB上的其它網(wǎng)站或E-mail地址之間的鏈接外，建議使用相對(duì)地址（形如“index.htm”）來(lái)建立

51、鏈接，這樣即使網(wǎng)站發(fā)生遷移，網(wǎng)站內(nèi)部文件的相對(duì)結(jié)構(gòu)不會(huì)發(fā)生變化。在學(xué)習(xí)圖像映射時(shí)，教師先作如下提示：如果將圖片作為鏈接源，一張圖片只能建立一個(gè)鏈接。如果要在一個(gè)圖片中建立幾個(gè)鏈接，則要運(yùn)用圖像映射技術(shù)，先在圖片中設(shè)置幾個(gè)熱區(qū)，然后分別建立鏈接，注意熱區(qū)不能重疊。只要讓學(xué)生理解圖像映射的含義以及繪制熱區(qū)的方法，學(xué)生就可以輕松完成這種鏈接，但教師應(yīng)該補(bǔ)充說(shuō)明：圖像映射一定要運(yùn)用得當(dāng)，否則訪問(wèn)者可能看不出該圖片中的多重鏈接，從而抹殺了網(wǎng)站的設(shè)計(jì)意圖。最后，教師進(jìn)行總結(jié)并強(qiáng)調(diào)在設(shè)計(jì)鏈接時(shí)，應(yīng)注意鏈接的層次不宜過(guò)多，否則會(huì)使網(wǎng)站難以管理，對(duì)訪問(wèn)者而言，容易迷失方向。另外，網(wǎng)頁(yè)之間的鏈接最好采取雙向鏈接，

52、即既要設(shè)計(jì)主頁(yè)到次頁(yè)的鏈接，也要提供從次頁(yè)返回主頁(yè)的鏈接，讓訪問(wèn)者來(lái)去自如。利用FrontPage2000的超鏈接視圖和報(bào)表視圖可以檢查鏈接是否正常、跟蹤修復(fù)斷鏈。在超鏈接視圖中，可以清楚地看到每個(gè)網(wǎng)頁(yè)之間的鏈接情形，若有中斷的鏈接，從圖標(biāo)上就可以直觀地看出來(lái)。在報(bào)表視圖中，則報(bào)告所有出現(xiàn)問(wèn)題的鏈接，以便修復(fù)。從本節(jié)課開始，教師就應(yīng)有意識(shí)地讓學(xué)生學(xué)會(huì)使用不同的視圖方式來(lái)提高效率，充分運(yùn)用FrontPage2000的網(wǎng)站管理功能來(lái)發(fā)現(xiàn)問(wèn)題并解決問(wèn)題。在課時(shí)允許的情況下，教師可以適當(dāng)補(bǔ)充介紹如何修改超鏈接的外觀，使網(wǎng)頁(yè)更美觀。如果超鏈接源是文本，該文本就以下劃線和藍(lán)色（默認(rèn)色）來(lái)顯示，實(shí)際上超鏈接

53、文本有三種顏色：超鏈接即未被選中的超鏈接；當(dāng)前超鏈接單擊了某超鏈接后該鏈接所變成的顏色；已訪問(wèn)過(guò)的超鏈接當(dāng)訪問(wèn)者觀察了超鏈接后返回頁(yè)面時(shí)該鏈接所變成的顏色，即已經(jīng)被瀏覽過(guò)的超鏈接。Web 瀏覽器根據(jù)一個(gè)具體的時(shí)間周期來(lái)決定超鏈接是否已經(jīng)被訪問(wèn)。例如在 Microsoft Internet Explorer 中，這個(gè)時(shí)間周期就是指定的保留歷史記錄的時(shí)間，默認(rèn)值為20天。如果20天內(nèi)瀏覽過(guò)這些網(wǎng)頁(yè)，超鏈接狀態(tài)將會(huì)變成“已訪問(wèn)過(guò)的超鏈接”。如果20天內(nèi)沒(méi)有訪問(wèn)這些網(wǎng)頁(yè)，或者清除了歷史記錄，則超鏈接狀態(tài)將會(huì)變成“超鏈接”。表示鏈接狀態(tài)的三種顏色可以在“網(wǎng)頁(yè)屬性”對(duì)話框中進(jìn)行更改，但要注意色彩的協(xié)調(diào)。如

54、果超鏈接源是圖片，那么這一圖片與其它圖象沒(méi)有什么不同，只是移動(dòng)指針指向含有鏈接的圖片，指針會(huì)變成手形，此時(shí)單擊鼠標(biāo)，鏈接目標(biāo)將出現(xiàn)在屏幕上。也可以在含有鏈接的圖片四周加上藍(lán)框，以示區(qū)分。為了在鏈接上產(chǎn)生動(dòng)態(tài)效果，可以向超鏈接添加字體效果。所謂字體效果，是指當(dāng)鼠標(biāo)懸停在含有超鏈接的文本上時(shí)，文本的字體、字號(hào)、字型和顏色發(fā)生改變。操作步驟如下：(1) 在網(wǎng)頁(yè)視圖模式下，右擊網(wǎng)頁(yè)，再單擊快捷菜單中的“網(wǎng)頁(yè)屬性”，然后單擊“背景”標(biāo)簽。 (2) 選擇“啟用超鏈接翻轉(zhuǎn)效果”復(fù)選框。 (3) 單擊 翻轉(zhuǎn)樣式。 (4) 設(shè)置字體屬性，如字體、字型、字號(hào)和顏色等。第八節(jié) 動(dòng)態(tài)網(wǎng)頁(yè)制作一、教學(xué)要求(1) 掌握懸

55、停按鈕的制作方法。(2) 掌握橫幅廣告管理器的使用方法，能夠制作幻燈。(3) 掌握滾動(dòng)字幕的制作方法。(4) 學(xué)會(huì)計(jì)數(shù)器的設(shè)定方法。(5) 學(xué)會(huì)添加背景音樂(lè)。二、教材分析與教法建議本節(jié)的內(nèi)容主要介紹FrontPage的組件菜單，通過(guò)這些菜單的運(yùn)用，能夠使網(wǎng)頁(yè)產(chǎn)生動(dòng)態(tài)效果。過(guò)去，類似的動(dòng)態(tài)效果只能通過(guò)在HTML代碼中加入Java Applet小程序或JavaScript程序來(lái)實(shí)現(xiàn)，現(xiàn)在在FrontPage2000中可以通過(guò)菜單和對(duì)話框來(lái)創(chuàng)建，極大地方便了用戶。當(dāng)然，從網(wǎng)頁(yè)的HTML代碼可以看出，這些效果依然是通過(guò)Java Applet小程序或JavaScript程序?qū)崿F(xiàn)的，只不過(guò)是由FrontP

56、age2000自動(dòng)將這些程序插入到頁(yè)面中的。本課內(nèi)容生動(dòng)活潑，學(xué)生學(xué)習(xí)興趣高，所以建議以學(xué)生自主學(xué)習(xí)為主，教師適當(dāng)加以提示和總結(jié)，引導(dǎo)學(xué)生除了掌握本書的制作技巧外，還要關(guān)注HTML語(yǔ)言的最新技術(shù)及其效果，增強(qiáng)網(wǎng)頁(yè)制作能力。(1) 懸停按鈕為了使某些鏈接能引起用戶的格外注意，可以采用懸停按鈕。懸停按鈕的功能是由一個(gè)Java小程序來(lái)實(shí)現(xiàn)的。在FrontPage2000中可以生成各種動(dòng)態(tài)按鈕，移動(dòng)鼠標(biāo)指向按鈕時(shí)，按鈕的顏色或圖案會(huì)按照預(yù)先的設(shè)置效果（如光暈、凸出、凹進(jìn)等）發(fā)生變化，甚至發(fā)出聲音。教師講解時(shí)演示一種懸停按鈕的制作方法和動(dòng)態(tài)效果后，就可以安排學(xué)生自己去摸索其它效果，并進(jìn)行按鈕圖案的選擇、

57、文字顏色的搭配，產(chǎn)生更豐富的動(dòng)態(tài)效果。(2) 橫幅廣告管理器本來(lái)，橫幅廣告管理器是為了制作循環(huán)顯示的廣告，來(lái)吸引訪問(wèn)者購(gòu)買產(chǎn)品，如Yahoo網(wǎng)站中的橫幅廣告。每一個(gè)橫幅廣告都是一個(gè)Java小程序，這一程序可以實(shí)現(xiàn)在同一位置顯示多個(gè)圖象，并通過(guò)不斷的旋轉(zhuǎn)來(lái)分別顯示這些圖象。利用這一功能，也可以制作網(wǎng)頁(yè)中的其它內(nèi)容。在橫幅廣告制作中要注意，所設(shè)置的廣告圖片出現(xiàn)的區(qū)域是固定的，如果其中的圖片大小不一，必須保證上述區(qū)域能放置最大一幅圖片，其余小圖片都居中對(duì)齊。當(dāng)然，要使橫幅廣告看起來(lái)更好，最好所有的圖片都具有相同的尺寸。(3) 滾動(dòng)字幕通常在HTML代碼中加入JavaScript腳本來(lái)實(shí)現(xiàn)滾動(dòng)字幕，它的效果僅在IE中可以顯示出來(lái)，在其它瀏覽器中，將直接顯示字幕內(nèi)容而沒(méi)有動(dòng)畫效果。如果通過(guò)Java小程序來(lái)實(shí)現(xiàn)，就可以在更多瀏覽器中看到效果。滾動(dòng)字幕有滾動(dòng)、幻燈、交替三種操作方式，“滾動(dòng)”可以讓文字沿設(shè)置的方向，從字幕區(qū)域的一邊出現(xiàn)，到另一邊消失；“幻燈”可以讓文字沿設(shè)置的方向，從字幕區(qū)域的一邊出現(xiàn)，當(dāng)字幕到另一邊時(shí)停住并保持在屏幕上；“交替”可以讓文字在字幕區(qū)域來(lái)回移動(dòng)。(4) 記數(shù)器記數(shù)器在頁(yè)面上看起來(lái)有點(diǎn)象里程表，用來(lái)記錄訪問(wèn)次數(shù)或某頁(yè)面被選中的次數(shù)，默認(rèn)值為0，即從0開始記數(shù)。訪問(wèn)者每次