電子商務(wù)第6章

1、6.1 網(wǎng)頁(yè)制作與FrontPage6.2 設(shè)計(jì)表單網(wǎng)頁(yè)第6章 網(wǎng)頁(yè)制作及其工具返回主目錄第6章 網(wǎng)頁(yè)制作及其工具6.1 網(wǎng)頁(yè)制作與FrontPage 6.1.1 Web頁(yè)面 電子商務(wù)最重要的一個(gè)環(huán)節(jié)就是在網(wǎng)上發(fā)布信息，掌握網(wǎng)頁(yè)制作技術(shù)是網(wǎng)上發(fā)布信息的必要條件。用于網(wǎng)頁(yè)制作的工具很多，如Dreamweaver、Flash、Fireworks、FrontPage等，對(duì)于網(wǎng)頁(yè)制作的初學(xué)者來(lái)說(shuō)，F(xiàn)rontPage被認(rèn)為是最容易掌握的一個(gè)網(wǎng)頁(yè)制作工具，而且，其效果也相當(dāng)不錯(cuò)。因此，本章主要介紹用FrontPage制作Web頁(yè)面。 網(wǎng)頁(yè)是用HTML（超文本標(biāo)識(shí)語(yǔ)言）在文本文件中加入標(biāo)記以*.Htm或者*

2、.html保存的文件，但*.Htm或者*.html與Word生成的.doc文檔不同，后者包含了插入的圖片和其它對(duì)象，可以自由地移動(dòng)和發(fā)布，而網(wǎng)頁(yè)是純文本文件，它并不包含插入其中的圖片等對(duì)象，它只是將插入對(duì)象的位置告訴瀏覽器，而后由瀏覽器來(lái)定位和顯示。所以，如果在網(wǎng)頁(yè)中插入了圖片或者其它對(duì)象，一定要將這些圖片文件與網(wǎng)頁(yè)一起發(fā)布，否則網(wǎng)頁(yè)將不能正常顯示。如果在網(wǎng)頁(yè)中有一個(gè)鏈接指向本地的另一個(gè)網(wǎng)頁(yè)文件，也要把這個(gè)圖片文件與該網(wǎng)頁(yè)文件一并發(fā)布，否則，當(dāng)點(diǎn)擊這個(gè)鏈接時(shí)，瀏覽器將找不到要跳轉(zhuǎn)的目標(biāo)文件。 6.1.2如何制作頁(yè)面 FrontPage是微軟公司推出的Web站點(diǎn)創(chuàng)建和管理工具，它包含以下幾項(xiàng)功能

3、： 創(chuàng)建、設(shè)計(jì)和管理整個(gè)Web站點(diǎn)； “所見即所得”地制作Web頁(yè)面； 將計(jì)算機(jī)配置為Web服務(wù)器，通過Internet或Intranet對(duì)外發(fā)布Web頁(yè)面； 處理Web頁(yè)面中圖像； FrontPage的擴(kuò)展功能。 1.啟動(dòng)主頁(yè)制作工具 在Window98/NT/2000系統(tǒng)中安裝FrontPage后，將生成一個(gè)“Microsoft FrontPage”快捷菜單，選擇此菜單可以執(zhí)行FrontPage 2000，進(jìn)入FrontPage的普通網(wǎng)頁(yè)編輯器后，出現(xiàn)如圖6-1所示的FrontPage窗口。 這個(gè)窗口有點(diǎn)象Word窗口，實(shí)際上微軟是把FrontPage作為Office中的一部分來(lái)發(fā)布的，所

4、以FrontPage和其它成員有類似的界面。不過，在Word中處理的是文檔，在FrontPage中處理的是頁(yè)面。至于工具欄的使用、其它的編輯操作和剪貼板功能，則與Word中的用法幾乎是一樣的。圖6-1 FrontPage窗口 2.制作簡(jiǎn)單的頁(yè)面 1）輸入文字 輸入文字的步驟如下： (1)按工具欄上的按鈕，新建一個(gè)空白網(wǎng)頁(yè)。 (2)在網(wǎng)頁(yè)中鍵入文字，其使用方法與其它字處理軟件相同。 (3)設(shè)置文本的格式。用鼠標(biāo)選定一塊文本后，可以用來(lái)調(diào)整對(duì)齊方式，用來(lái)改變文本字體效果。其它用來(lái)更改文本顏色及文字大小的工具均與Word中的相同。 (4)保存網(wǎng)頁(yè)。指定保存的路徑和文件名，一個(gè)純文本的網(wǎng)頁(yè)就編成了。新

5、建一個(gè)網(wǎng)頁(yè)應(yīng)馬上保存文件，并為本次工作專門建立一個(gè)目錄，把相關(guān)的文件都保存在該目錄中?？梢栽谀夸浿性俳⑾乱患?jí)的子目錄，如imge子目錄專門存放網(wǎng)頁(yè)中的圖片,down子目錄存放下載文件，sound子目錄存放聲音文件等，這樣，在以后發(fā)布主頁(yè)時(shí)只要將工作目錄中的文件和子目錄一并上載即可。 需要注意的是，回車時(shí)的設(shè)置和Word有所不同，Shift+Enter為行回車，而直接按Enter則是段落回車，段落回車后的兩行之間會(huì)插入一個(gè)空白行。在鍵入中文字符的時(shí)候，最好將字體設(shè)置為宋體，因?yàn)橛械臑g覽器只支持宋體中文字符的顯示，如果使用其它字體，則可能出現(xiàn)亂碼。 2）插入圖片 將光標(biāo)移動(dòng)到頁(yè)面要插入圖片的位置

6、，選擇“插入/圖片”菜單，其選擇方法與在Word中的相同，如果直接點(diǎn)擊圖像工具欄按鈕，就會(huì)出現(xiàn)如圖6-2所示的對(duì)話框。 可以直接鍵入圖片的所在位置。如果在網(wǎng)頁(yè)中插入了圖片，在發(fā)布網(wǎng)頁(yè)時(shí)一定要將圖片放在一起，而且還要保持網(wǎng)頁(yè)文件和圖片文件的相對(duì)路徑不變，否則網(wǎng)頁(yè)中的圖片將不能正常顯示。如果在工作目錄下建立了一個(gè)子目錄專門存放圖片，這樣就不會(huì)出現(xiàn)相對(duì)路徑改變的情況。 注意，制作網(wǎng)頁(yè)時(shí)不要在網(wǎng)頁(yè)中插入過多的圖片，否則由于網(wǎng)絡(luò)通信帶寬有限，會(huì)造成用戶等待下載網(wǎng)頁(yè)的時(shí)間過長(zhǎng)。圖6-2 選擇圖片對(duì)話框 3）插入表格 FrontPage提供了強(qiáng)有力的表格制作功能。 將光標(biāo)移動(dòng)到要插入表格處，選擇“表格/ 插

7、入/ 表格”菜單，可直接插入新的表格，彈出的對(duì)話框如圖6-3所示。 將其中的“邊框粗細(xì)”設(shè)置為0，則在網(wǎng)頁(yè)中不顯示表格的邊框。但在編輯時(shí)可以看到虛線的邊框。這只是為了便于編輯，使用戶在瀏覽器中看不到表格的邊框。 4）插入超鏈接 超鏈接是FrontPage非常重要的概念，超鏈接可以有效而又清晰地組織網(wǎng)頁(yè)，并讓訪問者方便地瀏覽相關(guān)信息。 圖6-3 “插入表格”對(duì)話框 當(dāng)訪問者單擊一個(gè)超鏈接，Web瀏覽器就根據(jù)超鏈接所指示的URL從相應(yīng)的位置檢索文檔，如果成功的話就顯示出來(lái)，如果超鏈接跳轉(zhuǎn)的目標(biāo)不是網(wǎng)頁(yè)而是其它類型的文件，Web瀏覽器就會(huì)自動(dòng)運(yùn)行相應(yīng)的程序以打開文件或者讓用戶下載文件。 要建立超鏈接

8、，首先要在網(wǎng)頁(yè)中選擇要作為超鏈接載體的文本或者圖像，然后使用“插入”菜單上的“超鏈接”命令，F(xiàn)rontPage編輯器將打開“創(chuàng)建超鏈接”對(duì)話框，如圖6-4所示。圖6-4 “創(chuàng)建超鏈接”對(duì)話框6.2 設(shè)計(jì)表單網(wǎng) 6.2.1提交表單 提交表單是使用最為普遍的一種表單。顧名思義，提交表單就是把用戶填寫的內(nèi)容提交到服務(wù)器上。在FrontPage 2000里，設(shè)計(jì)表單要用到的對(duì)象作為一組頁(yè)面元素放置在“插入”菜單里，單擊“插入”菜單，選擇“表單”選項(xiàng)，就會(huì)打開一個(gè)子菜單，里面列出常用的表單元素，如單行文本框、滾動(dòng)文本框、復(fù)選框、單選按鈕、下拉菜單、按鈕等。這些對(duì)象在表單里稱之為“表單域”。 當(dāng)在網(wǎng)頁(yè)中插

9、入第一個(gè)表單域的時(shí)候，F(xiàn)rontPage會(huì)自動(dòng)創(chuàng)建一個(gè)表單，在表單的周圍 有一個(gè)虛框，這是表單的邊界，表單的邊界就起到區(qū)分表單與網(wǎng)頁(yè)上其它內(nèi)容的作用。根據(jù)需要用戶填寫或者選擇的內(nèi)容在網(wǎng)頁(yè)上添加各種表單域，可以組成各種各樣的提交表單。 注意，當(dāng)插入點(diǎn)在表單邊界以外，將會(huì)創(chuàng)建另外一個(gè)表單，因此，在向表單里加入新的表單域時(shí)要注意光標(biāo)的位置是否在表單邊界以內(nèi)。 1.單行文本框 文本框是表單中收集信息的主要工具，根據(jù)用戶輸入信息的多少，可以分別采用單行文本框和多行文本框。當(dāng)只需要輸入姓名、民族、電話號(hào)碼等簡(jiǎn)單信息的時(shí)候，往往采用對(duì)話文本框。 從“插入”菜單的“表單”子菜單中單擊“單行文本框”按鈕，就會(huì)在

10、網(wǎng)頁(yè)上插入一個(gè)單行文本框，如果網(wǎng)頁(yè)上還沒有表單，將會(huì)自動(dòng)創(chuàng)建一個(gè)表單，并加入“提交”和“重新填寫”按鈕。 用鼠標(biāo)右鍵單擊文本框，在快速菜單中選擇單擊“表單域?qū)傩浴边x項(xiàng)，打開如圖6-6所示的對(duì)話框便可進(jìn)行單行文本框的設(shè)置。 文本框的“名稱”是每個(gè)表單域的標(biāo)志，在服務(wù)器程序中處理表單時(shí)使用這個(gè)名稱來(lái)調(diào)用文本框里的內(nèi)容；“初始值”是當(dāng)網(wǎng)頁(yè)瀏覽時(shí)就在文本框里出現(xiàn)的默認(rèn)文字；“寬度”是規(guī)定的文本框的顯示寬度，而不是輸入文字的寬度；“Tab鍵順序”是指定在按動(dòng)“Tab”鍵時(shí)，光標(biāo)在表單域之間切換的順序；如果要建立一個(gè)輸入密碼的文本框，只要選中“密碼域”欄中的復(fù)選框“是”，則用戶鍵入的任何字符都顯示為“*”

11、。 2.滾動(dòng)文本框 如果需要輸入比較多的文字，可以選擇滾動(dòng)文本框。它的使用方法和單行文本框的選擇方法相類似，所不同的是在屬性設(shè)置里沒有“密碼域”，而多了顯示行數(shù)的設(shè)置。 3.復(fù)選框 對(duì)于需要用戶進(jìn)行選擇的情況，可以使用“復(fù)選框”和“單選按鈕”來(lái)制作選擇題。同樣地，從“插入”菜單的“表單”子菜單中單擊“復(fù)選框”選項(xiàng)，就在網(wǎng)頁(yè)上插入了一個(gè)復(fù)選框“”?？梢栽趶?fù)選框的旁邊加入文字以表明復(fù)選框的內(nèi)容。用右鍵單擊復(fù)選框，在快捷菜單中選擇“表單域?qū)傩浴边x項(xiàng)，可以打開如圖6-7所示的復(fù)選框?qū)傩栽O(shè)置對(duì)話框。圖6-7 復(fù)選框?qū)傩?復(fù)選框中“名稱”和“Tab鍵順序”的設(shè)置和文本框中的設(shè)置是一樣的；“值”是指要發(fā)送到

12、服務(wù)器的復(fù)選框所對(duì)應(yīng)的數(shù)值或內(nèi)容，可以在輸入框里輸入指定的值；“初始狀態(tài)”是指定默認(rèn)情況下復(fù)選框是否被選中。 4.單選按鈕 單選按鈕的使用方法與復(fù)選框的使用方法相類似，所不同的是單選按鈕的名稱是“組名稱”。因?yàn)閱芜x按鈕的功能是在幾個(gè)選項(xiàng)里指定一個(gè)選項(xiàng)，那么這幾個(gè)選項(xiàng)就是一個(gè)組，它們共同使用一個(gè)組名稱。同組的單選按鈕只能有一個(gè)被選中。 5.下拉菜單 通過表單的下拉菜單還可以為用戶事先定義好一系列選項(xiàng)，在下拉列表或者滾動(dòng)列表中顯示，由用戶進(jìn)行選擇。從右鍵的快捷菜單中的“表單域選項(xiàng)”可以打開如圖6-8所示的下拉列表屬性對(duì)話框。 如果設(shè)定“高度”大于1，則就會(huì)顯示一個(gè)滾動(dòng)列表；“允許多重選項(xiàng)”指定列表

13、是否可以同時(shí)選擇多個(gè)選項(xiàng)；單擊“添加”按鈕可以設(shè)定一個(gè)列表項(xiàng)目，對(duì)話框如圖6-9所示。 在“選項(xiàng)”中輸入列表中顯示的文字；在“指定值”中輸入要發(fā)送到服務(wù)器上的值；在“初始狀態(tài)”欄指定該選項(xiàng)的默認(rèn)選擇狀態(tài)。圖6-8 下列菜單屬性圖6-9添加選項(xiàng) 6.按鈕 表單所要用到的按鈕有兩個(gè)：“提交”按鈕和“重新填寫”按鈕。在插入第一個(gè)表單域的時(shí)候，就會(huì)自動(dòng)建立這兩個(gè)按鈕。用右鍵單擊按鈕，在快捷菜單中選擇“表單域?qū)傩浴边x項(xiàng)，可以打開如圖6-10所示的“按鈕屬性”對(duì)話框。 在“值/標(biāo)簽”中指定的是在按鈕上顯示的文字；“按鈕類型”用來(lái)設(shè)置按鈕的功能；“普通”按鈕是用來(lái)配合腳本語(yǔ)言（如JavaScript）使用的

14、；“提交”按鈕將表單的內(nèi)容發(fā)送到服務(wù)器上；“重置”按鈕將表單里所有表單域的內(nèi)容恢復(fù)到默認(rèn)狀態(tài)。 注意，表單是網(wǎng)頁(yè)的一部分，同樣可以加入文字等內(nèi)容。在制作表單的時(shí)候，要正確加入需要的表單域，將它們?cè)诰W(wǎng)頁(yè)上合適地排列，并配合文字等內(nèi)容，組成一個(gè)清楚而美觀的表單。圖6-10 按鈕屬性 7.提交表單的屬性設(shè)置 為了使表單的信息能上傳到服務(wù)器，僅有“提交”按鈕是不夠的，還必須指定表單提交的目的地：可以將表單的內(nèi)容保存在當(dāng)前站點(diǎn)的一個(gè)文件里；或是將表單信息發(fā)送到指定的E-mail地址；也可以把表單的內(nèi)容發(fā)送給自己編制的一個(gè)表單處理網(wǎng)頁(yè)或應(yīng)用程序。指定表單發(fā)送目的地是在表單屬性里完成的。 設(shè)置提交表單屬性的

15、操作步驟如下： （1）在表單邊界內(nèi)單擊右鍵，在快捷菜單中選擇“表單屬性”選項(xiàng)，彈出如圖6-11所示的對(duì)話框。圖6-11表單屬性 （2）設(shè)置發(fā)送目標(biāo)。表單信息可以發(fā)送到以下四種形式的對(duì)象中：一是發(fā)送到網(wǎng)站的一個(gè)文件保存起來(lái)；二是作為一份電子郵件寄到指定的E-mail地址；三是把表單的數(shù)據(jù)保存到一個(gè)數(shù)據(jù)庫(kù)里；四是發(fā)送到另外編制的表單處理網(wǎng)頁(yè)或應(yīng)用程序。在選中“發(fā)送到”單選按鈕時(shí)，單擊“選項(xiàng)”按鈕，可以進(jìn)行表單信息發(fā)送目標(biāo)的設(shè)置，如圖6-12所示。 （3）對(duì)保存表單信息的文件進(jìn)行設(shè)置。在圖6-12 中，“文件名稱”指定將要保存表單信息的文件名；“文件格式”選擇信息以什么格式存放在文件里；“可選的第二

16、文件”指定另外一個(gè)存放表單信息的文件。圖6-12保存表單屬性 6.2.2搜索表單 在FrontPage 2000中提供了“搜索表單”組件，可以很方便地在網(wǎng)頁(yè)中加入全文檢索的功能。搜索表單實(shí)現(xiàn)的是對(duì)整個(gè)網(wǎng)站的所有文件進(jìn)行全文檢索。只要在搜索表單的搜索輸入框里填上一個(gè)單詞，單擊“開始搜索”按鈕，搜索表單就會(huì)自動(dòng)搜索站點(diǎn)上所有文件的內(nèi)容，查找與搜索單詞相匹配的語(yǔ)句，并將搜索結(jié)果以超鏈接的形式列在網(wǎng)頁(yè)上，以便用戶選擇瀏覽。 建立搜索表單的操作步驟如下： （1）啟動(dòng)FrontPage 2000并新建或者打開站點(diǎn)。搜索表單組件必須在站點(diǎn)工作方式下才能插入到網(wǎng)頁(yè)上。從“插入”菜單的“組件”子菜單中選擇“搜索

17、表單”選項(xiàng)，打開“搜索表單屬性”對(duì)話框，如圖6-13所示。圖6-13搜索表單屬性 （2）設(shè)置搜索表單在網(wǎng)頁(yè)上顯示的屬性。在圖6-13所示的選項(xiàng)卡中要設(shè)置的是搜索表單在網(wǎng)頁(yè)上的顯示形式。“輸入框的標(biāo)簽”是出現(xiàn)在輸入框左邊的文字，用來(lái)提示用戶輸入搜索文字；“以字符為單位的寬度”是指定輸入框允許輸入的最多的字符個(gè)數(shù)；還可以對(duì)兩個(gè)按鈕上的文字進(jìn)行設(shè)置。單擊對(duì)話框上方的“搜索結(jié)果”選項(xiàng)卡可以對(duì)搜索結(jié)果在網(wǎng)頁(yè)上的顯示形式進(jìn)行一些指定，如圖6-14所示。 （3）設(shè)置搜索結(jié)果列表在網(wǎng)頁(yè)上的顯示形式。顯示形式包括是否顯示匹配的程度、文件日期和格式、文件的大小等信息。設(shè)置完畢，單擊“確定”按鈕即可在網(wǎng)頁(yè)上添加一個(gè)

18、搜索表單，如圖6-15所示。圖6-14 設(shè)置搜索結(jié)果的顯示形式圖6-15 添加在網(wǎng)頁(yè)上的搜索表單 如果要修改已經(jīng)插入的搜索表單，只要用鼠標(biāo)右鍵單擊搜索表單，在彈出的快捷菜單中選擇“搜索表單屬性”選項(xiàng)，即可再次打開“搜索表單屬性”對(duì)話框進(jìn)行設(shè)置。 注意，F(xiàn)rontPage 2000的搜索表單使用的是FrontPage服務(wù)器擴(kuò)展的一個(gè)功能，搜索操作實(shí)際上是由服務(wù)器來(lái)執(zhí)行的，并把搜索結(jié)果發(fā)送給用戶以供瀏覽 。因此必須在支持FrpntPage服務(wù)器擴(kuò)展的Internet服務(wù)器上才能實(shí)現(xiàn)搜索功能。樹立質(zhì)量法制觀念、提高全員質(zhì)量意識(shí)。8月-228月-22Monday, August 1, 2022人生得意須盡歡，莫使金樽空對(duì)月。08:58:4508:58:4508: