6.1網(wǎng)頁制作與FrontPage6.2設(shè)計(jì)表單網(wǎng)頁第6章網(wǎng)頁制作及其工具返回主目錄第6章網(wǎng)頁制作及其工具6.1網(wǎng)頁制作與FrontPage

6.1.1Web頁面電子商務(wù)最重要的一個(gè)環(huán)節(jié)就是在網(wǎng)上發(fā)布信息，掌握網(wǎng)頁制作技術(shù)是網(wǎng)上發(fā)布信息的必要條件。用于網(wǎng)頁制作的工具很多，如Dreamweaver、Flash、Fireworks、FrontPage等，對于網(wǎng)頁制作的初學(xué)者來說，F(xiàn)rontPage被認(rèn)為是最容易掌握的一個(gè)網(wǎng)頁制作工具，而且，其效果也相當(dāng)不錯(cuò)。因此，本章主要介紹用FrontPage制作Web頁面。網(wǎng)頁是用HTML（超文本標(biāo)識語言）在文本文件中加入標(biāo)記以*.Htm或者*.html保存的文件，但*.Htm或者*.html與Word生成的.doc文檔不同，后者包含了插入的圖片和其它對象，可以自由地移動(dòng)和發(fā)布，而網(wǎng)頁是純文本文件，它并不包含插入其中的圖片等對象，它只是將插入對象的位置告訴瀏覽器，而后由瀏覽器來定位和顯示。所以，如果在網(wǎng)頁中插入了圖片或者其它對象，一定要將這些圖片文件與網(wǎng)頁一起發(fā)布，否則網(wǎng)頁將不能正常顯示。如果在網(wǎng)頁中有一個(gè)鏈接指向本地的另一個(gè)網(wǎng)頁文件，也要把這個(gè)圖片文件與該網(wǎng)頁文件一并發(fā)布，否則，當(dāng)點(diǎn)擊這個(gè)鏈接時(shí)，瀏覽器將找不到要跳轉(zhuǎn)的目標(biāo)文件。

6.1.2如何制作頁面FrontPage是微軟公司推出的Web站點(diǎn)創(chuàng)建和管理工具，它包含以下幾項(xiàng)功能：①創(chuàng)建、設(shè)計(jì)和管理整個(gè)Web站點(diǎn)；②“所見即所得”地制作Web頁面；③將計(jì)算機(jī)配置為Web服務(wù)器，通過Internet或Intranet對外發(fā)布Web頁面；④處理Web頁面中圖像；⑤FrontPage的擴(kuò)展功能。

1.啟動(dòng)主頁制作工具在Window98/NT/2000系統(tǒng)中安裝FrontPage后，將生成一個(gè)“MicrosoftFrontPage”快捷菜單，選擇此菜單可以執(zhí)行FrontPage2000，進(jìn)入FrontPage的普通網(wǎng)頁編輯器后，出現(xiàn)如圖6-1所示的FrontPage窗口。這個(gè)窗口有點(diǎn)象Word窗口，實(shí)際上微軟是把FrontPage作為Office中的一部分來發(fā)布的，所以FrontPage和其它成員有類似的界面。不過，在Word中處理的是文檔，在FrontPage中處理的是頁面。至于工具欄的使用、其它的編輯操作和剪貼板功能，則與Word中的用法幾乎是一樣的。圖6-1FrontPage窗口2.制作簡單的頁面1）輸入文字輸入文字的步驟如下：(1)按工具欄上的按鈕，新建一個(gè)空白網(wǎng)頁。(2)在網(wǎng)頁中鍵入文字，其使用方法與其它字處理軟件相同。(3)設(shè)置文本的格式。用鼠標(biāo)選定一塊文本后，可以用來調(diào)整對齊方式，用來改變文本字體效果。其它用來更改文本顏色及文字大小的工具均與Word中的相同。(4)保存網(wǎng)頁。指定保存的路徑和文件名，一個(gè)純文本的網(wǎng)頁就編成了。新建一個(gè)網(wǎng)頁應(yīng)馬上保存文件，并為本次工作專門建立一個(gè)目錄，把相關(guān)的文件都保存在該目錄中。可以在目錄中再建立下一級的子目錄，如imge子目錄專門存放網(wǎng)頁中的圖片,down子目錄存放下載文件，sound子目錄存放聲音文件等，這樣，在以后發(fā)布主頁時(shí)只要將工作目錄中的文件和子目錄一并上載即可。需要注意的是，回車時(shí)的設(shè)置和Word有所不同，Shift+Enter為行回車，而直接按Enter則是段落回車，段落回車后的兩行之間會(huì)插入一個(gè)空白行。在鍵入中文字符的時(shí)候，最好將字體設(shè)置為宋體，因?yàn)橛械臑g覽器只支持宋體中文字符的顯示，如果使用其它字體，則可能出現(xiàn)亂碼。2）插入圖片將光標(biāo)移動(dòng)到頁面要插入圖片的位置，選擇“插入/圖片”菜單，其選擇方法與在Word中的相同，如果直接點(diǎn)擊圖像工具欄按鈕，就會(huì)出現(xiàn)如圖6-2所示的對話框。可以直接鍵入圖片的所在位置。如果在網(wǎng)頁中插入了圖片，在發(fā)布網(wǎng)頁時(shí)一定要將圖片放在一起，而且還要保持網(wǎng)頁文件和圖片文件的相對路徑不變，否則網(wǎng)頁中的圖片將不能正常顯示。如果在工作目錄下建立了一個(gè)子目錄專門存放圖片，這樣就不會(huì)出現(xiàn)相對路徑改變的情況。注意，制作網(wǎng)頁時(shí)不要在網(wǎng)頁中插入過多的圖片，否則由于網(wǎng)絡(luò)通信帶寬有限，會(huì)造成用戶等待下載網(wǎng)頁的時(shí)間過長。圖6-2選擇圖片對話框3））插插入入表表格格FrontPage提提供供了了強(qiáng)強(qiáng)有有力力的的表表格格制制作作功功能能。。將光光標(biāo)標(biāo)移移動(dòng)動(dòng)到到要要插插入入表表格格處處，，選選擇擇““表表格格/插插入入/表表格格””菜菜單單，，可可直直接接插插入入新新的的表表格格，，彈彈出出的的對對話話框框如如圖圖6-3所所示示。。將其其中中的的““邊邊框框粗粗細(xì)細(xì)””設(shè)設(shè)置置為為0，，則則在在網(wǎng)網(wǎng)頁頁中中不不顯顯示示表表格格的的邊邊框框。。但但在在編編輯輯時(shí)時(shí)可可以以看看到到虛虛線線的的邊邊框框。。這這只只是是為為了了便便于于編編輯輯，，使使用用戶戶在在瀏瀏覽覽器器中中看看不不到到表表格格的的邊邊框框。。4））插插入入超超鏈鏈接接超鏈鏈接接是是FrontPage非非常常重重要要的的概概念念，，超超鏈鏈接接可可以以有有效效而而又又清清晰晰地地組組織織網(wǎng)網(wǎng)頁頁，，并并讓讓訪訪問問者者方方便便地地瀏瀏覽覽相相關(guān)關(guān)信信息息。。圖6-3““插插入入表表格格””對對話話框框當(dāng)訪訪問問者者單單擊擊一一個(gè)個(gè)超超鏈鏈接接，，Web瀏瀏覽覽器器就就根根據(jù)據(jù)超超鏈鏈接接所所指指示示的的URL從從相相應(yīng)應(yīng)的的位位置置檢檢索索文文檔檔，，如如果果成成功功的的話話就就顯顯示示出出來來，，如如果果超超鏈鏈接接跳跳轉(zhuǎn)轉(zhuǎn)的的目目標(biāo)標(biāo)不不是是網(wǎng)網(wǎng)頁頁而而是是其其它它類類型型的的文文件件，，Web瀏瀏覽覽器器就就會(huì)會(huì)自自動(dòng)動(dòng)運(yùn)運(yùn)行行相相應(yīng)應(yīng)的的程程序序以以打打開開文文件件或或者者讓讓用用戶戶下下載載文文件件。。要建立超鏈接接，首先要在在網(wǎng)頁中選擇擇要作為超鏈鏈接載體的文文本或者圖像像，然后使用用“插入”菜菜單上的“超超鏈接”命令令，F(xiàn)rontPage編輯器將打打開“創(chuàng)建超超鏈接”對話話框，如圖6-4所示。。圖6-4““創(chuàng)建超鏈接接”對話框6.2設(shè)計(jì)計(jì)表單網(wǎng)提提交表單提交表單是使使用最為普遍遍的一種表單單。顧名思義義，提交表單單就是把用戶戶填寫的內(nèi)容容提交到服務(wù)務(wù)器上。在FrontPage2000里，，設(shè)計(jì)表單要要用到的對象象作為一組頁頁面元素放置置在“插入””菜單里，單單擊“插入””菜單，選擇擇“表單”選選項(xiàng)，就會(huì)打打開一個(gè)子菜菜單，里面列列出常用的表表單元素，如如單行文本框框、滾動(dòng)文本本框、復(fù)選框框、單選按鈕鈕、下拉菜單單、按鈕等。。這些對象在在表單里稱之之為“表單域域”。當(dāng)在網(wǎng)網(wǎng)頁中中插入入第一一個(gè)表表單域域的時(shí)時(shí)候，，F(xiàn)rontPage會(huì)會(huì)自動(dòng)動(dòng)創(chuàng)建建一個(gè)個(gè)表單單，在在表單單的周周圍有一個(gè)個(gè)虛框框，這這是表表單的的邊界界，表表單的的邊界界就起起到區(qū)區(qū)分表表單與與網(wǎng)頁頁上其其它內(nèi)內(nèi)容的的作用用。根根據(jù)需需要用用戶填填寫或或者選選擇的的內(nèi)容容在網(wǎng)網(wǎng)頁上上添加加各種種表單單域，，可以以組成成各種種各樣樣的提提交表表單。。注意，，當(dāng)插插入點(diǎn)點(diǎn)在表表單邊邊界以以外，，將會(huì)會(huì)創(chuàng)建建另外外一個(gè)個(gè)表單單，因因此，，在向向表單單里加加入新新的表表單域域時(shí)要要注意意光標(biāo)標(biāo)的位位置是是否在在表單單邊界界以內(nèi)內(nèi)。1.單單行文文本框框文本框框是表表單中中收集集信息息的主主要工工具，，根據(jù)據(jù)用戶戶輸入入信息息的多多少，，可以以分別別采用用單行行文本本框和和多行行文本本框。。當(dāng)只只需要要輸入入姓名名、民民族、、電話話號碼碼等簡簡單信信息的的時(shí)候候，往往往采采用對對話文文本框框。從“插入””菜單的““表單”子子菜單中單單擊“單行行文本框””按鈕，就就會(huì)在網(wǎng)頁頁上插入一一個(gè)單行文文本框，如如果網(wǎng)頁上上還沒有表表單，將會(huì)會(huì)自動(dòng)創(chuàng)建建一個(gè)表單單，并加入入“提交””和“重新新填寫”按按鈕。用鼠標(biāo)右右鍵單擊擊文本框框，在快快速菜單單中選擇擇單擊““表單域域?qū)傩浴薄边x項(xiàng)，，打開如如圖6-6所示示的對話話框便可可進(jìn)行單單行文本本框的設(shè)設(shè)置。文本框的“名名稱”是每個(gè)個(gè)表單域的標(biāo)標(biāo)志，在服務(wù)務(wù)器程序中處處理表單時(shí)使使用這個(gè)名稱稱來調(diào)用文本本框里的內(nèi)容容；“初始值值”是當(dāng)網(wǎng)頁頁瀏覽時(shí)就在在文本框里出出現(xiàn)的默認(rèn)文文字；“寬度度”是規(guī)定的的文本框的顯顯示寬度，而而不是輸入文文字的寬度；；“Tab鍵鍵順序”是指指定在按動(dòng)““Tab”鍵鍵時(shí)，光標(biāo)在在表單域之間間切換的順序序；如果要建建立一個(gè)輸入入密碼的文本本框，只要選選中“密碼域域”欄中的復(fù)復(fù)選框“是””，則用戶鍵鍵入的任何字字符都顯示為為“*”。2.滾動(dòng)文本本框如果需要輸入入比較多的文文字，可以選選擇滾動(dòng)文本本框。它的使使用方法和單單行文本框的的選擇方法相相類似，所不不同的是在屬屬性設(shè)置里沒沒有“密碼域域”，而多了了顯示行數(shù)的的設(shè)置。3.復(fù)選框?qū)τ谛枰脩魬暨M(jìn)行選擇的的情況，可以以使用“復(fù)選選框”和“單單選按鈕”來來制作選擇題題。同樣地，，從“插入””菜單的“表表單”子菜單單中單擊“復(fù)復(fù)選框”選項(xiàng)項(xiàng)，就在網(wǎng)頁頁上插入了一一個(gè)復(fù)選框““”。可以在在復(fù)選框的旁旁邊加入文字字以表明復(fù)選選框的內(nèi)容。。用右鍵單擊擊復(fù)選框，在在快捷菜單中中選擇“表單單域?qū)傩浴边x選項(xiàng)，可以打打開如圖6-7所示的復(fù)復(fù)選框?qū)傩栽O(shè)設(shè)置對話框。。圖6-7復(fù)復(fù)選框?qū)賹傩詮?fù)選框中““名稱”和和“Tab鍵順序””的設(shè)置和和文本框中中的設(shè)置是是一樣的；；“值”是是指要發(fā)送送到服務(wù)器器的復(fù)選框框所對應(yīng)的的數(shù)值或內(nèi)內(nèi)容，可以以在輸入框框里輸入指指定的值；；“初始狀狀態(tài)”是指指定默認(rèn)情情況下復(fù)選選框是否被被選中。4.單選按按鈕單選按鈕的的使用方法法與復(fù)選框框的使用方方法相類似似，所不同同的是單選選按鈕的名名稱是“組組名稱”。。因?yàn)閱芜x選按鈕的功功能是在幾幾個(gè)選項(xiàng)里里指定一個(gè)個(gè)選項(xiàng)，那那么這幾個(gè)個(gè)選項(xiàng)就是是一個(gè)組，，它們共同同使用一個(gè)個(gè)組名稱。。同組的單單選按鈕只只能有一個(gè)個(gè)被選中。。5.下下拉拉菜菜單單通過過表表單單的的下下拉拉菜菜單單還還可可以以為為用用戶戶事事先先定定義義好好一一系系列列選選項(xiàng)項(xiàng)，，在在下下拉拉列列表表或或者者滾滾動(dòng)動(dòng)列列表表中中顯顯示示，，由由用用戶戶進(jìn)進(jìn)行行選選擇擇。。從從右右鍵鍵的的快快捷捷菜菜單單中中的的““表表單單域域選選項(xiàng)項(xiàng)””可可以以打打開開如如圖圖6-8所所示示的的下下拉拉列列表表屬屬性性對對話話框框。。如果果設(shè)設(shè)定定““高高度度””大大于于1，，則則就就會(huì)會(huì)顯顯示示一一個(gè)個(gè)滾滾動(dòng)動(dòng)列列表表；；““允允許許多多重重選選項(xiàng)項(xiàng)””指指定定列列表表是是否否可可以以同同時(shí)時(shí)選選擇擇多多個(gè)個(gè)選選項(xiàng)項(xiàng)；；單單擊擊““添添加加””按按鈕鈕可可以以設(shè)設(shè)定定一一個(gè)個(gè)列列表表項(xiàng)項(xiàng)目目，，對對話話框框如如圖圖6-9所所示示。。在““選選項(xiàng)項(xiàng)””中中輸輸入入列列表表中中顯顯示示的的文文字字；；在在““指指定定值值””中中輸輸入入要要發(fā)發(fā)送送到到服服務(wù)務(wù)器器上上的的值值；；在在““初初始始狀狀態(tài)態(tài)””欄欄指指定定該該選選項(xiàng)項(xiàng)的的默默認(rèn)認(rèn)選選擇擇狀狀態(tài)態(tài)。。圖6-8下下列列菜單單屬性性圖6-9添添加選選項(xiàng)6.按按鈕表單所所要用用到的的按鈕鈕有兩兩個(gè)：：“提提交””按鈕鈕和““重新新填寫寫”按按鈕。。在插插入第第一個(gè)個(gè)表單單域的的時(shí)候候，就就會(huì)自自動(dòng)建建立這這兩個(gè)個(gè)按鈕鈕。用用右鍵鍵單擊擊按鈕鈕，在在快捷捷菜單單中選選擇““表單單域?qū)賹傩浴薄边x項(xiàng)項(xiàng)，可可以打打開如如圖6-10所所示的的“按按鈕屬屬性””對話話框。。在“值值/標(biāo)標(biāo)簽””中指指定的的是在在按鈕鈕上顯顯示的的文字字；““按鈕鈕類型型”用用來設(shè)設(shè)置按按鈕的的功能能；““普通通”按按鈕是是用來來配合合腳本本語言言（如如JavaScript）使使用的的；““提交交”按按鈕將將表單單的內(nèi)內(nèi)容發(fā)發(fā)送到到服務(wù)務(wù)器上上；““重置置”按按鈕將將表單單里所所有表表單域域的內(nèi)內(nèi)容恢恢復(fù)到到默認(rèn)認(rèn)狀態(tài)態(tài)。注意，，表單單是網(wǎng)網(wǎng)頁的的一部部分，，同樣樣可以以加入入文字字等內(nèi)內(nèi)容。。在制制作表表單的的時(shí)候候，要要正確確加入入需要要的表表單域域，將將它們們在網(wǎng)網(wǎng)頁上上合適適地排排列，，并配配合文文字等等內(nèi)容容，組組成一一個(gè)清清楚而而美觀觀的表表單。。圖6-10按按鈕鈕屬屬性性7.提提交交表表單單的的屬屬性性設(shè)設(shè)置置為了了使使表表單單的的信信息息能能上上傳傳到到服服務(wù)務(wù)器器，，僅僅有有““提提交交””按按鈕鈕是是不不夠夠的的，，還還必必須須指指定定表表單單提提交交的的目目的的地地：：可可以以將將表表單單的的內(nèi)內(nèi)容容保保存存在在當(dāng)當(dāng)前前站站點(diǎn)點(diǎn)的的一一個(gè)個(gè)文文件件里里；；或或是是將將表表單單信信息息發(fā)發(fā)送送到到指指定定的的E-mail地地址址；；也也可可以以把把表表單單的的內(nèi)內(nèi)容容發(fā)發(fā)送送給給自自己己編編制制的的一一個(gè)個(gè)表表單單處處理理網(wǎng)網(wǎng)頁頁或或應(yīng)應(yīng)用用程程序序。。指指定定表表單單發(fā)發(fā)送送目目的的地地是是在在表表單單屬屬性性里里完完成成的的。。設(shè)置置提提交交表表單單屬屬性性的的操操作作步步驟驟如如下下：：（1））在在表表單單邊邊界界內(nèi)內(nèi)單單擊擊右右鍵鍵，，在在快快捷捷菜菜單單中中選選擇擇““表表單單屬屬性性””選選項(xiàng)項(xiàng)，，彈彈出出如如圖圖6-11所所示示的的對對話話框框。。圖6-11表表單單屬屬性性（2））設(shè)設(shè)置置發(fā)發(fā)送送目目標(biāo)標(biāo)。。表表單單信信息息可可以以發(fā)發(fā)送送到到以以下下四四種種形形式式的的對對象象中中：：一一是是發(fā)發(fā)送送到到網(wǎng)網(wǎng)站站的的一一個(gè)個(gè)文文件件保保存存起起來來；；二二是是作作為為一一份份電電子子郵郵件件寄寄到到指指定定的的E-mail地地址址；；三三是是把把表表單單的的數(shù)數(shù)據(jù)據(jù)保保存存到到一一個(gè)個(gè)數(shù)數(shù)據(jù)據(jù)庫庫里里；；四四是是發(fā)發(fā)送送到到另另外外編編制制的的表表單單處處理理網(wǎng)網(wǎng)頁頁或或應(yīng)應(yīng)用用程程序序。。在在選選中中““發(fā)發(fā)送送到到””單單選選按按鈕鈕時(shí)時(shí)，，單單擊擊““選選項(xiàng)項(xiàng)””按按鈕鈕，，可可以以進(jìn)進(jìn)行行表表單單信信息息發(fā)發(fā)送送目目標(biāo)標(biāo)的的設(shè)設(shè)置置，，如如圖圖6-12所所示示。。（3）對保存存表單信息的的文件進(jìn)行設(shè)設(shè)置。在圖6-12中中，“文件名名稱”指定將將要保存表單單信息的文件件名；“文件件格式”選擇擇信息以什么么格式存放在在文件里；““可選的第二二文件”指定定另外一個(gè)存存放表單信息息的文件。圖6-12保存表單單屬性6.2.2搜索表單單在FrontPage2000中提提供了“搜搜索表單””組件，可可以很方便便地在網(wǎng)頁頁中加入全全文檢索的的功能。搜搜索表單實(shí)實(shí)現(xiàn)的是對對整個(gè)網(wǎng)站站的所有文文件進(jìn)行全全文檢索。。只要在搜搜索表單的的搜索輸入入框里填上上一個(gè)單詞詞，單擊““開始搜索索”按鈕，，搜索表單單就會(huì)自動(dòng)動(dòng)搜索站點(diǎn)點(diǎn)上所有文文件的內(nèi)容容，查找與與搜索單詞詞相匹配的的語句，并并將搜索結(jié)結(jié)果以超鏈鏈接的形式式列在網(wǎng)頁頁上，以便便用戶選擇擇瀏覽。建立搜索表表單的操作作步驟如下下：（1）啟動(dòng)動(dòng)FrontPage2000并新新建或者打打開站點(diǎn)。。搜索表單單組件必須須在站點(diǎn)工工作方式下下才能插入入到網(wǎng)頁上上。從“插插入”菜單單的“組件件”子菜單單中選擇““搜索表單單”選項(xiàng)，，打開“搜搜索表單屬屬性”對話話框，如圖圖6-13所示。圖6-13搜索表單單屬性（2）設(shè)置置搜索表單單在網(wǎng)頁上上顯示的屬屬性。在圖圖6-13所示的選選項(xiàng)卡中要要設(shè)置的是是搜索表單單在網(wǎng)頁上上的顯示形形式。“輸輸入框的標(biāo)標(biāo)簽”是出出現(xiàn)在輸入入框左邊的的文字，用用來提示用用戶輸入搜搜索文字；；“以字符符為單位的的寬度”是是指定輸入入框允許