電子商務第6章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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