第9章 網(wǎng)頁(yè)制作 《計(jì)算機(jī)文化基礎(chǔ)》 教材課件

1、第 九 章 網(wǎng) 頁(yè) 制 作 0第九章 網(wǎng)頁(yè)制作9.1 HTML簡(jiǎn)介 9.2 FrontPage 2003概述 9.3 網(wǎng)頁(yè)制作 9.4 網(wǎng)頁(yè)布局 9.5 創(chuàng)立表單頁(yè)面 9.6 網(wǎng)頁(yè)的發(fā)布 10/17/202219.1 HTML簡(jiǎn)介 HTML即Hypertext Markup Language的縮寫(xiě)。它使用一些約定的標(biāo)記Tag對(duì)文本進(jìn)行標(biāo)注，定義網(wǎng)頁(yè)的數(shù)據(jù)格式，描述Web頁(yè)中的信息，控制文本的顯示。 我們把用HTML語(yǔ)言編寫(xiě)的文件稱(chēng)為HTML文件。它通常被存儲(chǔ)在Web效勞器上，客戶(hù)端通過(guò)瀏覽器向Web效勞器發(fā)出請(qǐng)求，效勞器響應(yīng)請(qǐng)求并將HTML文件發(fā)送給瀏覽器，然后由瀏覽器對(duì)文件中的標(biāo)記作出相應(yīng)的

2、解釋?zhuān)皂?yè)面的形式呈現(xiàn)在用戶(hù)屏幕上。因此，我們又把HTML文檔稱(chēng)為網(wǎng)頁(yè) (Web Page)。 10/17/202229.1 HTML簡(jiǎn)介HTML語(yǔ)言是一種標(biāo)記語(yǔ)言，簡(jiǎn)單易學(xué)。用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)實(shí)際上是一種文本文件，它以.htm或.html為擴(kuò)展名，我們可以使用任何文本處理軟件例如：記事本編寫(xiě)。9.1.1 HTML語(yǔ)言概述9.1.2 HTML語(yǔ)言的根本語(yǔ)法返 回10/17/202239.1.1 HTML語(yǔ)言概述 HTML語(yǔ)言是由世界性的標(biāo)準(zhǔn)化組織W3CWorld Wide Web Consortium制定的，通過(guò)瀏覽可以了解到HTML標(biāo)準(zhǔn)的最新動(dòng)態(tài)。下面介紹HTML文件的根本構(gòu)成和HTM

3、L文件的層次結(jié)構(gòu)。 10/17/202241. HTML文件的根本構(gòu)成 Internet中的每一個(gè)HTML文件都包括文本內(nèi)容和HTML標(biāo)記兩局部。其中，HTML標(biāo)記負(fù)責(zé)控制文本顯示的外觀和版式，并為瀏覽器指定各種鏈接的圖像、聲音和其他對(duì)象的位置。多數(shù)HTML標(biāo)記的書(shū)寫(xiě)格式如下：文本內(nèi)容 標(biāo)記名寫(xiě)在“內(nèi)。多數(shù)HTML標(biāo)記同時(shí)具有起始和結(jié)束標(biāo)記，并且成對(duì)出現(xiàn)，但也有些HTML標(biāo)記沒(méi)有結(jié)束標(biāo)記。另外，HTML標(biāo)記不區(qū)分大小寫(xiě)。HTML文件的根本構(gòu)成10/17/20225 某些HTML標(biāo)記還具有一些屬性，這些屬性指定對(duì)象的特性，如背景顏色、文本字體及大小、對(duì)齊方式等。屬性一般放在“起始標(biāo)記中，格式如下

4、： 文本內(nèi)容 其中標(biāo)記名和屬性之間用空格分隔。如果標(biāo)記有多種屬性，屬性之間也要用空格分隔。 HTML文件的根本構(gòu)成10/17/202262. HTML網(wǎng)頁(yè)的結(jié)構(gòu) 現(xiàn)在我們先看一個(gè)簡(jiǎn)單的HTML文件，從中體會(huì)用HTML語(yǔ)言編寫(xiě)網(wǎng)頁(yè)時(shí)的層次結(jié)構(gòu)。 【例9-1】用HTML語(yǔ)言編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。我的第一個(gè)Web頁(yè)歡送進(jìn)入HTML世界！這里我們首先介紹HTML語(yǔ)言的根本知識(shí)和語(yǔ)法。然后，講授如何使用HTML語(yǔ)言編寫(xiě)您的Web頁(yè)面。10/17/20227HTML語(yǔ)言概述 將上述代碼用文本編輯器編輯并保存為一個(gè)擴(kuò)展名為.htm的文件，雙擊該文件圖標(biāo)，在瀏覽器中看到如以下圖所示的結(jié)果。圖9-110/17/2

5、0228 從上例可以看出，一般HTML文件都是以開(kāi)頭，以結(jié)束。其文件結(jié)構(gòu)由以下兩局部組成：1頭部Head HTML文件的頭部由和標(biāo)記定義。通常情況下，文件的標(biāo)題、語(yǔ)言字符集信息等都放在頭部信息中。最常用到的標(biāo)記是，它用于定義網(wǎng)頁(yè)文件的標(biāo)題，當(dāng)該網(wǎng)頁(yè)文件被翻開(kāi)后，網(wǎng)頁(yè)文件的標(biāo)題將出現(xiàn)在瀏覽器的標(biāo)題欄中。10/17/20229文件結(jié)構(gòu)2正文主體Body正文主體是HTML文件的核心內(nèi)容，由和標(biāo)記定義。標(biāo)記具有一些常用的屬性，格式如下：其中，bgcolor為背景顏色，color為文本顏色。n為六位十六進(jìn)制數(shù)。如果網(wǎng)頁(yè)使用背景圖像，格式如下：HTML對(duì)格式的要求并不嚴(yán)格，當(dāng)HTML文件被瀏覽器掃描時(shí)，所

6、有包含在文件中的空格、回車(chē)等均被忽略。因此你可以將一行寫(xiě)成兩行或多行，在瀏覽器中結(jié)果是相同的。 返 回10/17/2022109.1.2 HTML語(yǔ)言的根本語(yǔ)法1. 文本布局1段落標(biāo)記標(biāo)記指定文檔中一個(gè)獨(dú)立的段落。通過(guò)設(shè)置align屬性，控制段落的對(duì)齊方式，其值可以是left、center、right、justify，分別表示左對(duì)齊、居中、右對(duì)齊和兩端對(duì)齊，默認(rèn)值為左對(duì)齊。使用格式如下： 2換行標(biāo)記 標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有起始標(biāo)記。3水平線標(biāo)記水平線標(biāo)記用于在網(wǎng)頁(yè)中插入一條水平線。10/17/2022112. 文字格式 HTML語(yǔ)言中用于文字格式化的標(biāo)記有： 1標(biāo)題標(biāo)記 格式為： 標(biāo)

7、題文字內(nèi)容 其中n說(shuō)明大小級(jí)別，取值范圍為1到6的數(shù)字。把標(biāo)題分為 6級(jí)，即h1h6，其中h1文字最大，h6文字最小。10/17/2022122字體標(biāo)記 字體標(biāo)記用來(lái)對(duì)文字格式進(jìn)行設(shè)置，主要具有以下屬性： 1size屬性：用來(lái)控制文字的大小，格式如下： 其中n的取值范圍為17的數(shù)字，默認(rèn)值為3。 標(biāo)記和標(biāo)記都可以控制文字的大小。一般情況下，文章的標(biāo)題最好由標(biāo)記控制，而其余的文字由標(biāo)記控制。相比較而言，對(duì)字體的控制更加靈活。 2color屬性：用來(lái)控制文字的顏色，格式如下： 其中n是一個(gè)十六進(jìn)制的六位數(shù)。3face屬性：用來(lái)指明文字使用的字體，格式如下： 其中字體名的選擇由Windows操作系統(tǒng)

8、安裝的字體決定。如：宋體、楷體_GB2312、Times New Roman、Arial等。文字格式10/17/2022133字形標(biāo)記 字形標(biāo)記用于設(shè)置文字的粗體、斜體、下劃線、上標(biāo)、下標(biāo)等。標(biāo)記格式字形結(jié)果粗體斜體下劃線上標(biāo)下標(biāo)文字格式10/17/2022143. 插入圖片 標(biāo)記將圖片插入網(wǎng)頁(yè)中，用于設(shè)置圖片的大小以及相鄰文字的排列方式。該標(biāo)記具有以下屬性：1src屬性：指明圖片文件所在的位置。格式如下： 其中URL指圖片文件存放的位置。2alt屬性：圖片的文字說(shuō)明，當(dāng)鼠標(biāo)指針指向圖片時(shí)，該圖片的說(shuō)明性文字彈出。格式如下： 3width和height屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。格式如

9、下： 其中width和height屬性的取值n1和n2，可以是像素?cái)?shù)或百分比。10/17/2022154border屬性：設(shè)置圖片文件的邊框。格式如下： 其中n為像素?cái)?shù)。5align屬性：設(shè)置圖片相對(duì)于文本的位置關(guān)系。格式為： 對(duì)齊方式可以是：top頂端對(duì)齊、middle相對(duì)垂直居中、bottom相對(duì)底邊對(duì)齊、left左對(duì)齊、right右對(duì)齊、texttop文本上方等。插入圖片10/17/2022164. 插入超鏈接 在HTML語(yǔ)言中，和標(biāo)記用于設(shè)置網(wǎng)頁(yè)中的超鏈接，href屬性指明被超鏈接的文件地址。格式如下： 超鏈接文本 用于表示超鏈接的文本一般顯示為藍(lán)色并且加下劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針

10、指向該文本時(shí)，箭頭變?yōu)槭中危⒃跒g覽器的狀態(tài)欄中顯示該超鏈接的地址。 假設(shè)使用圖片做超鏈接，可使用如下格式完成： 10/17/2022175. 使用表格 在網(wǎng)頁(yè)中插入一個(gè)表格，需要用到一組HTML標(biāo)記。定義表格的有關(guān)標(biāo)記如下： 定義表格區(qū)域。 定義表格標(biāo)題。 定義表格頭。 定義表格行。 定義表格單元格。返 回10/17/202218 常用的標(biāo)記屬性中，border屬性用于設(shè)置表格邊框的寬度；width、height屬性用于設(shè)置表格或單元格的寬度、高度；cellspacing和cellpadding屬性分別用于設(shè)置單元格之間的間隙和單元格內(nèi)部空白；align屬性用于設(shè)置表格或單元格的對(duì)齊方式；b

11、gcolor和background屬性分別用于設(shè)置表格的背景顏色和背景圖像。表格屬性10/17/2022199.2 FrontPage 2003概述 雖然使用一般的文本編輯器就可以編寫(xiě)HTML文檔，但是使用專(zhuān)門(mén)的HTML編輯器或Web創(chuàng)作工具往往更加方便。具有“所見(jiàn)即所得功能的Web頁(yè)面創(chuàng)作工具可以使Web創(chuàng)作人員直接面對(duì)Web頁(yè)面進(jìn)行編輯修改，并且能立即看到Web頁(yè)面的顯示效果。 FrontPage 2003是微軟公司開(kāi)發(fā)的網(wǎng)頁(yè)制作和網(wǎng)站管理工具，它是Microsoft Office 2003的組件之一，與Office的其他組件高度融合，界面友好，功能強(qiáng)大，易學(xué)易用，是目前使用較為廣泛的網(wǎng)頁(yè)

12、制作、網(wǎng)站管理工具之一。10/17/2022209.2 FrontPage 2003概述9.2.1 FrontPage 2003的主要功能9.2.2 FrontPage 2003的啟動(dòng)與退出9.2.3 網(wǎng)頁(yè)與網(wǎng)站9.2.4 FrontPage 2003的網(wǎng)頁(yè)視圖模式9.2.5 FrontPage 2003中的視圖返 回10/17/2022219.2.1 FrontPage 2003的主要功能 FrontPage 2003的主要功能是制作網(wǎng)頁(yè)和管理站點(diǎn)。 使用FrontPage 2003可以創(chuàng)立新的網(wǎng)頁(yè)，也可以翻開(kāi)并修改已經(jīng)存在的網(wǎng)頁(yè)。FrontPage 2003提供了多種編輯網(wǎng)頁(yè)的方式，不但可

13、以直接修改HTML，而且可以采用“所見(jiàn)即所得的方式編輯網(wǎng)頁(yè)，還可以使用菜單命令插入各種網(wǎng)頁(yè)元素，使用對(duì)話框修改其屬性，十分靈活。 返 回10/17/202222 在FrontPage 2003中，可以很容易地插入文本、圖片、表格、組件等元素；可以使用主題和樣式表、共享邊框、框架等管理網(wǎng)頁(yè)的外觀；還可以使用表單等元素設(shè)計(jì)出交互式網(wǎng)頁(yè)。 FrontPage 2003提供了強(qiáng)大的站點(diǎn)管理功能。一組相關(guān)網(wǎng)頁(yè)和有關(guān)文件組成一個(gè)站點(diǎn)，站點(diǎn)也是FrontPage 2003對(duì)網(wǎng)站進(jìn)行管理的根本單位。在FrontPage 2003中可以輕松實(shí)現(xiàn)設(shè)計(jì)、管理、分析、發(fā)布和維護(hù)站點(diǎn)等工作。FrontPage 2003

14、的主要功能10/17/2022239.2.3 網(wǎng)頁(yè)與網(wǎng)站 網(wǎng)頁(yè)是全球廣域網(wǎng)上的根本文檔，用HTML書(shū)寫(xiě)，通常以.htm或.html為擴(kuò)展名。網(wǎng)頁(yè)可以獨(dú)立存在，但常常作為網(wǎng)站的一局部。網(wǎng)站是一組相關(guān)網(wǎng)頁(yè)和有關(guān)文件的組合，一般有一個(gè)特殊的網(wǎng)頁(yè)作為瀏覽的起始點(diǎn)，稱(chēng)為主頁(yè)Homepage，用來(lái)引導(dǎo)用戶(hù)訪問(wèn)其他網(wǎng)頁(yè)。 網(wǎng)站通常位于Web效勞器上，客戶(hù)機(jī)通過(guò)網(wǎng)絡(luò)向Web效勞器發(fā)送請(qǐng)求，Web效勞器響應(yīng)客戶(hù)機(jī)的請(qǐng)求，并使用HTTP協(xié)議將網(wǎng)頁(yè)和有關(guān)文件通過(guò)網(wǎng)絡(luò)傳送回客戶(hù)機(jī)，客戶(hù)機(jī)端使用網(wǎng)頁(yè)瀏覽器就能看到網(wǎng)頁(yè)的內(nèi)容了。10/17/202224網(wǎng)頁(yè)與網(wǎng)站在FrontPage 2003中，可以建立和編輯獨(dú)立的網(wǎng)頁(yè)，

15、也可以設(shè)計(jì)和管理站點(diǎn)。在站點(diǎn)中可以包含大量網(wǎng)頁(yè)和各種文件，甚至可以包含子站點(diǎn)，而且只有在使用站點(diǎn)時(shí)，F(xiàn)rontPage 2003的許多特性才有效。通常，在FrontPage 2003中建立的站點(diǎn)需要發(fā)布到Internet中的Web效勞器上，成為真正意義上的網(wǎng)站，Internet上的用戶(hù)才能訪問(wèn)。有時(shí)，可以在同一臺(tái)計(jì)算機(jī)上安裝Web效勞器端軟件，從而將站點(diǎn)發(fā)布到本機(jī)進(jìn)行測(cè)試。用FrontPage 2003也可以建立基于本地硬盤(pán)的站點(diǎn)，這種站點(diǎn)以本機(jī)文件夾的形式存在，不需要發(fā)布到效勞器，這時(shí)，需要效勞器支持的功能是不可用的。返 回10/17/2022259.2.4 FrontPage 2003的網(wǎng)

16、頁(yè)視圖模式 FrontPage 2003提供了四種網(wǎng)頁(yè)視圖模式：設(shè)計(jì)視圖是翻開(kāi)網(wǎng)頁(yè)首先進(jìn)入的視圖，可以在其中輸入文本、插入圖片、插入表格等，也可以任意進(jìn)行修改。代碼視圖中，用戶(hù)可以查看、編寫(xiě)和編輯HTML標(biāo)記。預(yù)覽視圖中可以看到網(wǎng)頁(yè)在Web瀏覽器中的大體顯示情況。 FrontPage 2003新增的拆分視圖將窗口工作區(qū)拆分成上、下兩局部，上半局部是代碼區(qū)，下半局部是設(shè)計(jì)區(qū)。無(wú)論對(duì)哪一個(gè)區(qū)域進(jìn)行修改，另一個(gè)區(qū)域都會(huì)做出相應(yīng)的改變。返 回10/17/2022269.2.5 FrontPage 2003中的視圖 FrontPage 2003提供了以下幾種視圖以方便用戶(hù)對(duì)站點(diǎn)的管理，用戶(hù)可以在不同的視

17、圖中進(jìn)行相應(yīng)的操作。1. 網(wǎng)頁(yè)視圖2. 文件夾視圖3. 遠(yuǎn)程網(wǎng)站視圖4. 報(bào)表視圖5. 導(dǎo)航視圖6. 超鏈接視圖7. 任務(wù)視圖10/17/2022279.3 網(wǎng) 頁(yè) 制 作Web站點(diǎn)的開(kāi)發(fā)，首先應(yīng)當(dāng)根據(jù)其用途進(jìn)行規(guī)劃，確定站點(diǎn)結(jié)構(gòu)，在本地磁盤(pán)上創(chuàng)立站點(diǎn)，然后再建立網(wǎng)頁(yè)。那么什么是“站點(diǎn)呢？其實(shí)站點(diǎn)就是一組相關(guān)網(wǎng)頁(yè)和其他文件的集合，這些網(wǎng)頁(yè)在Internet中表現(xiàn)為一個(gè)完整結(jié)構(gòu)就稱(chēng)為“站點(diǎn)。在FrontPage 2003中，站點(diǎn)以一個(gè)特殊文件夾的形式存儲(chǔ)。10/17/2022289.3 網(wǎng) 頁(yè) 制 作9.3.1 創(chuàng)立站點(diǎn)9.3.2 網(wǎng)頁(yè)編輯9.3.3 插入對(duì)象9.3.4 創(chuàng)立超鏈接返 回10/1

18、7/2022299.3.1 創(chuàng)立站點(diǎn) 使用FrontPage 2003的模板和向?qū)?，用?hù)可以輕松地創(chuàng)立出各種用途和風(fēng)格的站點(diǎn)。 新建站點(diǎn)時(shí)，可以根據(jù)自己的需求選擇不同的模板和向?qū)?。?duì)于不同的模板和向?qū)?，其新建站點(diǎn)的步驟略有不同。 下面以“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站模板為例，介紹新建站點(diǎn)的方法。1單擊“文件菜單的“新建命令，在“新建任務(wù)窗格中選擇“新建網(wǎng)站中的“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站；2在彈出的“網(wǎng)站模板對(duì)話框的“指定新網(wǎng)站的位置框中輸入新站點(diǎn)要保存的位置，也可使用“瀏覽按鈕指定新站點(diǎn)的位置；10/17/2022303單擊 “確定按鈕，新建站點(diǎn)如以下圖所示返 回該站點(diǎn)只有一個(gè)空白網(wǎng)頁(yè)index.htm主

19、頁(yè)和用于存儲(chǔ)圖片的文件夾images，你可以翻開(kāi)index.htm進(jìn)行編輯，也可以進(jìn)一步根據(jù)網(wǎng)站規(guī)劃創(chuàng)立文件夾和新建其他網(wǎng)頁(yè)。 選擇“文件菜單的“退出命令，可以關(guān)閉FrontPage 2003。10/17/2022319.3.2 網(wǎng)頁(yè)編輯1. 新建網(wǎng)頁(yè)2. 翻開(kāi)/保存網(wǎng)頁(yè)3. 預(yù)覽網(wǎng)頁(yè)4. 設(shè)置文字格式5. 設(shè)置段落格式6. 設(shè)置網(wǎng)頁(yè)屬性返 回10/17/202232網(wǎng)頁(yè)編輯 要根據(jù)“網(wǎng)頁(yè)模板創(chuàng)立一個(gè)新的網(wǎng)頁(yè)，可以按下面的步驟：1單擊“文件菜單的“新建命令，在“新建任務(wù)窗格中選擇“新建網(wǎng)頁(yè)中的“其他網(wǎng)頁(yè)模板。2在彈出的“網(wǎng)頁(yè)模板對(duì)話框中選擇所需的網(wǎng)頁(yè)模板，可以在“說(shuō)明及“預(yù)覽區(qū)域查看該模板的說(shuō)

20、明及預(yù)覽圖。3單擊“確定按鈕，系統(tǒng)新建一個(gè)基于所選模板的網(wǎng)頁(yè)。4單擊“文件菜單，選擇“保存命令，彈出“另存為對(duì)話框。在此對(duì)話框中，輸入文件名進(jìn)行保存。返 回1. 新建網(wǎng)頁(yè)10/17/202233 在FrontPage 2003中，編輯某個(gè)網(wǎng)頁(yè)之前，需要先翻開(kāi)該網(wǎng)頁(yè)。翻開(kāi)網(wǎng)頁(yè)的方法有多種，常用的有以下幾種：1使用“文件菜單的“翻開(kāi)命令，或“常用工具欄的“翻開(kāi)按鈕，在彈出的“翻開(kāi)文件對(duì)話框中選擇相應(yīng)的網(wǎng)頁(yè)；2如需要翻開(kāi)的文件已在翻開(kāi)的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁(yè)圖標(biāo)即可將其翻開(kāi)。實(shí)際上，在其他視圖中雙擊網(wǎng)頁(yè)圖標(biāo)，同樣會(huì)翻開(kāi)指定網(wǎng)頁(yè)。 要保存一個(gè)網(wǎng)頁(yè)，可以使用“文件菜單的“保存命令，或“常用工具

21、欄的“保存按鈕，如需另存可使用“文件菜單的“另存為命令。返 回2. 翻開(kāi)/保存網(wǎng)頁(yè)網(wǎng)頁(yè)編輯10/17/202234網(wǎng)頁(yè)制作過(guò)程中，用戶(hù)可以切換到“預(yù)覽視圖預(yù)覽網(wǎng)頁(yè)，也可以使用“文件菜單的“在瀏覽器中預(yù)覽命令預(yù)覽網(wǎng)頁(yè)。使用后者，系統(tǒng)會(huì)翻開(kāi)瀏覽器顯示網(wǎng)頁(yè)，如果該網(wǎng)頁(yè)尚未保存，會(huì)彈出對(duì)話框提示用戶(hù)保存網(wǎng)頁(yè)。返 回3. 預(yù)覽網(wǎng)頁(yè)網(wǎng)頁(yè)編輯10/17/2022354. 設(shè)置文字格式 同其他Microsoft Office組件一樣，在網(wǎng)頁(yè)中可以輸入文字，復(fù)制、剪切和粘貼文字，設(shè)置文字格式，查找和替換文字等。 在FrontPage 2003中，對(duì)文字的格式提供了相當(dāng)完整的設(shè)定功能，文字格式的變化也因此多種多樣

22、?？梢允褂霉ぞ邫谏系墓ぞ甙粹o或菜單命令快速地改變文字的外觀。 設(shè)置文字格式的一般操作步驟是：選中文字，單擊“格式菜單的“字體命令，在彈出的“字體對(duì)話框中設(shè)置字體的各種屬性，也可以使用“格式工具欄中相應(yīng)的命令按鈕。 雖然可以設(shè)置各種美觀的字體，但是由于用戶(hù)只能使用本地計(jì)算機(jī)中安裝的字體顯示網(wǎng)頁(yè)，因此還是使用常見(jiàn)的字體為好。返 回網(wǎng)頁(yè)編輯10/17/2022365. 設(shè)置段落格式 文字段落的格式編排對(duì)于一個(gè)網(wǎng)頁(yè)的外觀是至關(guān)重要的。FrontPage 2003通過(guò)按Enter鍵劃分段落。值得注意的是，段落之間插入了一個(gè)空行。如果只是需要換行，而不是另起一個(gè)段落，按Shift+Enter鍵即可。實(shí)際上

23、，按Enter鍵在HTML代碼中插入的是標(biāo)記，而按Shift+Enter鍵那么插入的是標(biāo)記。 段落格式主要包括對(duì)齊方式、縮進(jìn)和段落間距等。設(shè)置段落格式的一般方法如下： 將插入點(diǎn)移動(dòng)到要設(shè)置格式的段落中，或是選中該段落，單擊“格式菜單的“段落命令，在彈出的“段落對(duì)話框中進(jìn)行各種段落格式屬性的設(shè)置。 返 回網(wǎng)頁(yè)編輯10/17/2022376. 設(shè)置網(wǎng)頁(yè)屬性網(wǎng)頁(yè)屬性包括網(wǎng)頁(yè)的標(biāo)題、格式、頁(yè)邊距等。要設(shè)置網(wǎng)頁(yè)屬性，用戶(hù)可以使用“文件菜單的“屬性命令，或者在網(wǎng)頁(yè)的任意地方單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“網(wǎng)頁(yè)屬性命令，F(xiàn)rontPage 2003將顯示“網(wǎng)頁(yè)屬性對(duì)話框。網(wǎng)頁(yè)編輯10/17/20223

24、81“常規(guī)屬性 要設(shè)置網(wǎng)頁(yè)的“常規(guī)屬性，單擊“網(wǎng)頁(yè)屬性對(duì)話框的“常規(guī)選項(xiàng)卡，如以下圖所示?！皹?biāo)題框用于給出網(wǎng)頁(yè)的標(biāo)題，網(wǎng)頁(yè)標(biāo)題將顯示在瀏覽器的標(biāo)題欄中?！氨尘耙魳?lè)框用于指定網(wǎng)頁(yè)的背景音樂(lè)，當(dāng)用瀏覽器翻開(kāi)網(wǎng)頁(yè)時(shí)，將自動(dòng)播放背景音樂(lè)。背景音樂(lè)區(qū)域的“位置框用于指定聲音文件的位置，用戶(hù)可以使用“瀏覽按鈕選擇一個(gè)聲音文件；“循環(huán)次數(shù)框用于指定聲音要反復(fù)播放的次數(shù)，如果選中“不限次數(shù)復(fù)選框，表示一直不停地播放。網(wǎng)頁(yè)編輯10/17/2022392“格式屬性 要設(shè)置網(wǎng)頁(yè)的背景、顏色，可以使用“網(wǎng)頁(yè)屬性對(duì)話框的“格式選項(xiàng)卡，如以下圖所示。 用戶(hù)可以選中“背景圖片復(fù)選框，指定一個(gè)圖片作為網(wǎng)頁(yè)的背景圖片。如果要將

25、圖片按水印形式添加，需要選中“使其成為水印復(fù)選框。通過(guò)單擊相應(yīng)的下拉列表框，可以設(shè)置網(wǎng)頁(yè)的背景顏色、文本顏色以及超鏈接文字的顏色。當(dāng)同時(shí)設(shè)置背景圖片和背景顏色時(shí)，背景圖片將覆蓋背景色。返 回網(wǎng)頁(yè)編輯10/17/2022409.3.3 插入對(duì)象1.插入水平線2.插入圖片3.插入字幕4.插入交互式按鈕 5.插入站點(diǎn)計(jì)數(shù)器 返 回10/17/2022411.插入水平線 在網(wǎng)頁(yè)中輸入文本內(nèi)容后，還可在不同的段落、行之間添加水平線，水平線將網(wǎng)頁(yè)分割成幾個(gè)局部，使得網(wǎng)頁(yè)更具條理性。具體操作步驟如下： 1在準(zhǔn)備插入水平線的位置設(shè)置插入點(diǎn)； 2單擊“插入菜單的“水平線命令，插入水平線。 要修改水平線的外觀，可

26、以雙擊水平線，翻開(kāi)“水平線屬性對(duì)話框。“寬度框用于設(shè)置水平線的寬度，“高度框用于設(shè)置水平線的高度，“對(duì)齊方式用于設(shè)置水平線在網(wǎng)頁(yè)內(nèi)水平對(duì)齊的方式，“顏色列表框用于設(shè)置水平線的顏色，選中“實(shí)線無(wú)陰影復(fù)選框時(shí)，水平線將被設(shè)成實(shí)心線。要為線條指定自定義樣式或其他格式，可以使用“樣式按鈕進(jìn)行設(shè)置。返 回10/17/2022422. 插入圖片 圖片可以使網(wǎng)頁(yè)變得生動(dòng)活潑，并能吸引用戶(hù)的注意。1圖片文件的格式 在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，因此被廣泛地應(yīng)用在Web站點(diǎn)的設(shè)計(jì)中。GIFGraphical Interchange For

27、mat，圖形交換格式采用無(wú)損壓縮方式，其主要特征是支持動(dòng)畫(huà)、透明度、圖形漸進(jìn)，但GIF圖像包含的顏色不能超過(guò)256種。JPEGJoint Photograph Expert Group，聯(lián)合圖像專(zhuān)家組格式是專(zhuān)為有幾百萬(wàn)種顏色的照片和圖形設(shè)計(jì)的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。JPEG格式支持真彩色24位色，并且在壓縮大的圖像方面已被證明很有效。10/17/2022432. 插入圖片2插入圖片的步驟1移動(dòng)光標(biāo)至插入圖像的位置；2單擊“插入菜單的“圖片命令，在子菜單中選擇“來(lái)自文件，彈出“圖片對(duì)話框；3利用“圖片對(duì)話框選取需要插入的圖片文件，單擊“插入按鈕，即可將圖片插入網(wǎng)頁(yè)中

28、。3設(shè)置圖片屬性 在“圖片屬性對(duì)話框的“外觀選項(xiàng)卡中，可以設(shè)置圖片的環(huán)繞方式、布局、大小等。插入圖片10/17/2022444編輯圖片可以使用“視圖菜單的“工具欄命令中的“圖片子命令，使“圖片工具欄顯示在屏幕上。利用圖片工具欄，可以對(duì)圖片的亮度、比照度進(jìn)行調(diào)整，可以旋轉(zhuǎn)、翻轉(zhuǎn)圖片，對(duì)圖片進(jìn)行剪裁，設(shè)置透明顏色等操作。5保存圖片插入圖片后保存網(wǎng)頁(yè)，如果圖片不在網(wǎng)站文件夾中，將出現(xiàn)“保存嵌入式文件對(duì)話框。如果圖片在網(wǎng)站文件夾中，就不會(huì)出現(xiàn)此對(duì)話框。返 回插入圖片10/17/2022453. 插入字幕 在制作網(wǎng)頁(yè)時(shí)，可以將網(wǎng)頁(yè)中的文字做成由左至右，或由右至左移動(dòng)的動(dòng)態(tài)效果，使網(wǎng)頁(yè)更加形象生動(dòng)。具體操

29、作步驟如下： 1將插入點(diǎn)設(shè)置在要插入移動(dòng)字幕的位置或者選中作為移動(dòng)字幕的文本，單擊“插入菜單的“Web組件命令，彈出“插入Web組件對(duì)話框，在對(duì)話框的“組件類(lèi)型列表框中選擇“動(dòng)態(tài)效果，在“選擇一種效果列表中選擇“字幕，單擊“完成按鈕， “字幕屬性對(duì)話框。10/17/2022462如果已經(jīng)選擇了作為移動(dòng)字幕的文本，此文本就會(huì)出現(xiàn)在“文本框中，如果沒(méi)有選擇文本，可在“文本框中輸入作為移動(dòng)字幕的文本。 “字幕屬性對(duì)話框如以下圖所示： 插入字幕210/17/202247 3“方向區(qū)域用于指定文本的移動(dòng)方向?！八俣葏^(qū)域用于指定文字的滾動(dòng)速度，“延遲框中的數(shù)值表示字幕滾動(dòng)一步的時(shí)間間隔是多少毫秒，“數(shù)量框

30、中的數(shù)值表示字幕滾動(dòng)一步的距離是多少像素?！氨憩F(xiàn)方式區(qū)域用于指定文字的表現(xiàn)方式。選中“重復(fù)區(qū)域的“連續(xù)復(fù)選框，移動(dòng)字幕將連續(xù)滾動(dòng)；假設(shè)要設(shè)置字幕滾動(dòng)有限次數(shù)，可以取消選中“連續(xù)復(fù)選框并輸入字幕重復(fù)的次數(shù)。 4單擊“確定按鈕，即可插入字幕。返 回插入字幕310/17/2022484. 插入交互式按鈕交互式按鈕是一個(gè)動(dòng)態(tài)按鈕，當(dāng)用戶(hù)將鼠標(biāo)指向交互式按鈕時(shí)，交互式按鈕會(huì)改變顏色或形狀。默認(rèn)情況下，交互式按鈕是一個(gè)帶有彩色方框的文字按鈕，也可以應(yīng)用圖片創(chuàng)立交互式按鈕。1將插入點(diǎn)設(shè)置在要插入交互式按鈕的位置，單擊“插入菜單的“Web組件命令，翻開(kāi)“插入Web組件對(duì)話框，在對(duì)話框的“組件類(lèi)型列表框中選擇“

31、動(dòng)態(tài)效果，在“選擇一種效果列表中選擇“交互式按鈕，單擊“完成按鈕，翻開(kāi)對(duì)話框。10/17/2022492設(shè)置按鈕字體圖像3單擊“確定按鈕，即可插入交互式按鈕。 返 回插入交互式按鈕2-310/17/2022505. 插入站點(diǎn)計(jì)數(shù)器 1單擊“插入菜單的“Web組件命令，翻開(kāi)“插入Web組件對(duì)話框，在對(duì)話框的“組件類(lèi)型列表框中選擇“計(jì)數(shù)器，在“選擇計(jì)數(shù)器樣式列表中選擇一種樣式，單擊“完成按鈕，翻開(kāi)“計(jì)數(shù)器屬性對(duì)話框； 2設(shè)置計(jì)數(shù)器屬性； 3單擊“確定按鈕，插入站點(diǎn)計(jì)數(shù)器。返 回10/17/2022519.3.4 創(chuàng)立超鏈接Web網(wǎng)頁(yè)的強(qiáng)大之處就在于其超鏈接，使用超鏈接能夠?qū)nternet中的信息

32、有機(jī)地組織起來(lái)，使人們?cè)谪S富多彩的WWW世界輕松地漫游。在瀏覽器中，超鏈接通常表現(xiàn)為與普通文本或圖片不同的特點(diǎn)。將鼠標(biāo)移到一個(gè)超鏈接上方時(shí)，鼠標(biāo)指針會(huì)變成手形。同時(shí)，與這個(gè)超鏈接相對(duì)應(yīng)的URL會(huì)在窗口底部的狀態(tài)欄顯示出來(lái)。 10/17/202252創(chuàng)立超鏈接1. 創(chuàng)立文本超鏈接2. 創(chuàng)立圖片超鏈接3. 使用書(shū)簽超鏈接4. 創(chuàng)立電子郵件超鏈接5. 創(chuàng)立下載文件超鏈接返 回10/17/2022531. 創(chuàng)立文本超鏈接文本超鏈接是指在文本上定義的超鏈接，單擊文本超鏈接，會(huì)自動(dòng)跳轉(zhuǎn)到指向的鏈接目標(biāo)。創(chuàng)立文本超鏈接的具體操作步驟如下：1選定要定義超鏈接的文本，從“插入菜單中選擇“超鏈接命令，或單擊“常用

33、工具欄上的“超鏈接按鈕 ，翻開(kāi)“插入超鏈接對(duì)話框，如以下圖所示；10/17/202254 2在“插入超鏈接對(duì)話框中選擇要鏈接的目標(biāo)網(wǎng)頁(yè)，單擊“確定按鈕，插入超鏈接，可以看到所選定的文本變?yōu)樗{(lán)色，并且?guī)в邢聞澗€，說(shuō)明選定的文本已經(jīng)被設(shè)置為超鏈接文本。 保存網(wǎng)頁(yè)，在瀏覽器中預(yù)覽效果，當(dāng)鼠標(biāo)移至鏈接文字時(shí)，鼠標(biāo)指針變成手形，此時(shí)單擊鼠標(biāo)就跳轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)。創(chuàng)立文本超鏈接10/17/202255 圖片超鏈接是指在圖片上創(chuàng)立的超鏈接，圖片超鏈接比文本超鏈接顯得更加生動(dòng)活潑，單擊圖片超鏈接，會(huì)自動(dòng)跳轉(zhuǎn)到指向的鏈接目標(biāo)?？梢詫⒄麄€(gè)圖片設(shè)置為超鏈接，也可以為圖片分配一個(gè)或多個(gè)熱點(diǎn)。熱點(diǎn)是圖片上的超鏈接區(qū)域，包含

34、熱點(diǎn)的圖片稱(chēng)為圖像映射，用戶(hù)單擊熱點(diǎn)區(qū)域可以轉(zhuǎn)到相應(yīng)的鏈接目標(biāo)。2. 創(chuàng)立圖片超鏈接10/17/202256 1選定要定義超鏈接的圖片，從“插入菜單中選擇“超鏈接命令，或單擊“常用工具欄上的“超鏈接按鈕，翻開(kāi)“插入超鏈接對(duì)話框； 2在對(duì)話框中選擇要鏈接的目標(biāo)網(wǎng)頁(yè)，單擊“確定按鈕，即可插入超鏈接。 保存網(wǎng)頁(yè)，在瀏覽器中預(yù)覽效果，當(dāng)鼠標(biāo)移至鏈接圖片時(shí)，鼠標(biāo)指針變成手形，此時(shí)單擊鼠標(biāo)就跳轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)。1創(chuàng)立圖片超鏈接10/17/202257 熱點(diǎn)可以是圖片上具有某種形狀的一塊區(qū)域或文本，當(dāng)用戶(hù)單擊該區(qū)域或文本時(shí)，超鏈接目標(biāo)會(huì)顯示在Web瀏覽器中。在FrontPage 2003中，熱點(diǎn)的形狀可以是長(zhǎng)方

35、形、圓形或多邊形。 例如我們通過(guò)山東省地圖瀏覽山東省各城市的民俗風(fēng)情，當(dāng)鼠標(biāo)移至地圖上的各個(gè)城市時(shí)，鼠標(biāo)指針變?yōu)槭中?，單擊后翻開(kāi)描述該城市民俗風(fēng)情的頁(yè)面。2為圖片添加熱點(diǎn)10/17/202258為圖片添加熱點(diǎn)，具體操作步驟如下： 1選擇需要添加熱點(diǎn)的圖片。 2在“圖片工具欄中，單擊長(zhǎng)方形、圓形或多邊形熱點(diǎn)按鈕匹配需要的形狀。 3在圖片上，采用鼠標(biāo)拖動(dòng)操作畫(huà)出所選形狀。畫(huà)多邊形時(shí)，可單擊多邊形的第一個(gè)角，然后依次單擊多邊形其他角的位置，最后雙擊完成多邊形。 4釋放鼠標(biāo)，彈出“插入超鏈接對(duì)話框，按照插入超鏈接中所講方法創(chuàng)立超鏈接即可。10/17/202259為圖片添加熱點(diǎn) 重復(fù)步驟2、3、4，在圖

36、片上依次創(chuàng)立超鏈接到其他網(wǎng)頁(yè)。當(dāng)鼠標(biāo)移動(dòng)到熱點(diǎn)區(qū)域時(shí)，光標(biāo)變?yōu)槭中危缫韵聢D所示。單擊鼠標(biāo)，超鏈接的目標(biāo)網(wǎng)頁(yè)就會(huì)顯示在Web瀏覽器窗口中。返 回10/17/2022603. 使用書(shū)簽超鏈接對(duì)于網(wǎng)頁(yè)的超鏈接，往往使用戶(hù)跳轉(zhuǎn)到目標(biāo)網(wǎng)頁(yè)的頂端，應(yīng)用書(shū)簽?zāi)軌蚋鼑?yán)格地控制用戶(hù)到達(dá)網(wǎng)頁(yè)內(nèi)的某個(gè)具體位置。書(shū)簽是網(wǎng)頁(yè)中被標(biāo)記的位置或被標(biāo)記的文本。單擊書(shū)簽超鏈接，將直接跳轉(zhuǎn)到該書(shū)簽所在的位置。1插入書(shū)簽1選中作為書(shū)簽的文本，或?qū)⒐鈽?biāo)定位在要插入書(shū)簽的位置。2選擇“插入菜單的“書(shū)簽命令，彈出“書(shū)簽對(duì)話框，如右圖所示，所選文本自動(dòng)出現(xiàn)在“書(shū)簽名稱(chēng)框中。3單擊“確定按鈕，插入書(shū)簽，可以看到所選文本下方出現(xiàn)虛線。10/

37、17/2022612創(chuàng)立書(shū)簽超鏈接 1選定要定義超鏈接的文本或圖片； 2從“插入菜單中選擇“超鏈接命令，彈出“插入超鏈接對(duì)話框，如以下圖所示，在對(duì)話框的“鏈接到欄單擊“本文檔中的位置，選擇要鏈接的書(shū)簽； 3單擊“確定按鈕，插入書(shū)簽超鏈接。 保存網(wǎng)頁(yè)，在瀏覽器中預(yù)覽效果，單擊頁(yè)面中的書(shū)簽超鏈接，頁(yè)面會(huì)跳轉(zhuǎn)到書(shū)簽的位置。10/17/2022624. 創(chuàng)立電子郵件超鏈接 電子郵件超鏈接為用戶(hù)發(fā)送電子郵件提供了極大的方便，單擊電子郵件超鏈接后，允許用戶(hù)書(shū)寫(xiě)電子郵件內(nèi)容，并發(fā)往指定的地址。具體操作步驟如下： 1選擇作為電子郵件超鏈接的文本或圖片； 2從“插入菜單中選擇“超鏈接命令，彈出“插入超鏈接對(duì)話框

38、； 3在對(duì)話框的“鏈接到欄單擊“電子郵件地址，在“電子郵件地址框中輸入所需電子郵件地址，還可以在“主題框中鍵入電子郵件的主題； 4單擊“確定按鈕，完成電子郵件超鏈接的創(chuàng)立。返 回10/17/2022635. 創(chuàng)立下載文件超鏈接 如果要在網(wǎng)站中提供資料下載功能，就需要?jiǎng)?chuàng)立下載鏈接，網(wǎng)站中每個(gè)用于下載的文件要對(duì)應(yīng)一個(gè)下載鏈接。具體操作步驟如下： 1選擇作為文件超鏈接的文本或圖片； 2從“插入菜單中選擇“超鏈接命令，彈出“插入超鏈接對(duì)話 框，在對(duì)話框中選擇要下載的文件； 3單擊“確定按鈕，完成文件超鏈接的創(chuàng)立。 保存網(wǎng)頁(yè)，在瀏覽器中預(yù)覽效果，單擊創(chuàng)立的文件超鏈接時(shí)，彈出“文件下載對(duì)話框，如以下圖所示

39、，用戶(hù)可以根據(jù)需要翻開(kāi)或保存文件。返 回10/17/2022649.4 網(wǎng) 頁(yè) 布 局 網(wǎng)頁(yè)的布局設(shè)計(jì)，是將文字、圖片等網(wǎng)頁(yè)元素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁(yè)所限定的范圍中進(jìn)行視覺(jué)的關(guān)聯(lián)與配置，從而將設(shè)計(jì)意圖以視覺(jué)形式表現(xiàn)出來(lái)。網(wǎng)頁(yè)的布局一般使用表格或框架來(lái)實(shí)現(xiàn)。10/17/2022659.4 網(wǎng) 頁(yè) 布 局9.4.1 創(chuàng)立和使用表格9.4.2 創(chuàng)立框架9.4.3 創(chuàng)立框架超鏈接返 回10/17/2022669.4.1 創(chuàng)立和使用表格 表格由單元格構(gòu)成的行和列組成，單元格中可以插入文本、圖片以及其他對(duì)象。利用表格可以有條理地排列數(shù)據(jù)或組織網(wǎng)頁(yè)布局。表格的行、列和單元格都可以進(jìn)行復(fù)制、粘貼，在表

40、格中還可以插入表格，一層層的表格嵌套使設(shè)計(jì)更加方便。FrontPage 2003提供了與Word字處理軟件類(lèi)似的表格處理功能，在網(wǎng)頁(yè)中可以輕松地創(chuàng)立和編輯表格。10/17/2022671. 創(chuàng)立表格創(chuàng)立表格有以下三種常用方法： 1使用“表格菜單的“插入子菜單中的“表格命令，可以對(duì)插入的表格進(jìn)行精確的設(shè)置，包括行和列的數(shù)目、對(duì)齊方式、單元格間距、單元格襯距、邊框粗細(xì)和背景等。 2使用“常用工具欄的“插入表格按鈕 ，快速插入表格。 3使用“表格菜單的“繪制表格命令，手動(dòng)繪制表格。10/17/2022682. 設(shè)置表格屬性 插入表格后，翻開(kāi)如以下圖所示的“表格屬性對(duì)話框，可以設(shè)置表格屬性。1設(shè)置表格

41、行數(shù)和列數(shù)。2設(shè)置表格布局，包括設(shè)置表格的對(duì)齊方式、浮動(dòng)、寬度等。3在“粗細(xì)數(shù)值框中輸入數(shù)值，即可設(shè)置表格邊框的粗細(xì)。4在背景區(qū)域，可以通過(guò)“顏色框設(shè)置單一色彩的表格背景，也可選中“使用背景圖片復(fù)選框，用“瀏覽按鈕設(shè)置圖片作為表格的背景。10/17/2022693. 設(shè)置單元格屬性 將光標(biāo)放置在需要設(shè)置屬性的單元格中，使用“表格菜單的“表格屬性子菜單中的“單元格命令，翻開(kāi)如以下圖所示的“單元格屬性對(duì)話框，設(shè)置單元格屬性。 在“背景區(qū)域中可以設(shè)置單元格的背景顏色，或使用圖片作為背景。 在“布局區(qū)域可以設(shè)置水平、垂直對(duì)齊方式，指定寬度、高度、標(biāo)題單元格，設(shè)置行跨距、列跨距等。 在“邊框區(qū)域中可以設(shè)

42、置單元格邊框的顏色、亮邊框、暗邊框。10/17/202270創(chuàng)立表格后，可以對(duì)表格單元格、行和列的布局和結(jié)構(gòu)進(jìn)行調(diào)整，以滿(mǎn)足不同的需要。如調(diào)整行、列或單元格；插入行、列或單元格；刪除行、列或單元格；合并、拆分單元格；平均分布行高、列寬；設(shè)置單元格屬性等。返 回4. 調(diào)整表格10/17/2022719.4.2 創(chuàng)立框架 框架的使用是進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的一種重要手段?？蚣軐g覽器窗口劃分為幾個(gè)區(qū)域，每個(gè)框架中都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)。瀏覽器窗口中顯示的網(wǎng)頁(yè)實(shí)際是這些框架的集合，因此被稱(chēng)為框架網(wǎng)頁(yè)?？蚣芫W(wǎng)頁(yè)并不包含顯示的內(nèi)容，只是記錄了該框架網(wǎng)頁(yè)包含幾個(gè)框架、其拆分方式以及每個(gè)框架中顯示哪個(gè)網(wǎng)頁(yè)與其他

43、網(wǎng)頁(yè)的超鏈接等。10/17/202272 在FrontPage 2003中，可以使用框架網(wǎng)頁(yè)布局模板輕松創(chuàng)立框架網(wǎng)頁(yè)。具體操作步驟如下： 1單擊“文件菜單的“新建命令，在“新建任務(wù)窗格中選擇“新建網(wǎng)頁(yè)中的“其他網(wǎng)頁(yè)模板。 2在彈出的“網(wǎng)頁(yè)模板對(duì)話框中，切換到“框架網(wǎng)頁(yè)選項(xiàng)卡，選擇所需的模板，如“目錄模板，可在“說(shuō)明及“預(yù)覽區(qū)域查看該模板的說(shuō)明及預(yù)覽圖。1. 創(chuàng)立框架網(wǎng)頁(yè)10/17/202273 3單擊“確定按鈕，完成框架網(wǎng)頁(yè)的創(chuàng)立，如以下圖所示； 4每個(gè)框架中，單擊“設(shè)置初始網(wǎng)頁(yè)按鈕可以建立與已經(jīng)存在網(wǎng)頁(yè)的超鏈接，從而在此框架中顯示該網(wǎng)頁(yè)；單擊“新建網(wǎng)頁(yè)按鈕可以建立顯示在該框架中的新網(wǎng)頁(yè)。 創(chuàng)

44、立框架網(wǎng)頁(yè)在該圖窗口底部新增了“無(wú)框架視圖模式，可以為不支持框架的瀏覽器創(chuàng)立替代網(wǎng)頁(yè)。10/17/202274 保存框架網(wǎng)頁(yè)需要保存框架和各個(gè)框架中的網(wǎng)頁(yè)。例如，使用“目錄模板創(chuàng)立的框架網(wǎng)頁(yè)需要保存作為容器的框架網(wǎng)頁(yè)和分別顯示在兩個(gè)框架中的兩個(gè)網(wǎng)頁(yè)。具體操作步驟如下： 1使用“文件菜單的“保存命令，或單擊“常用工具欄的“保存按鈕，彈出“另存為對(duì)話框。 2在“另存為對(duì)話框右邊的框架網(wǎng)頁(yè)預(yù)覽圖中，深藍(lán)色的區(qū)域或邊框指明了框架中正在保存的網(wǎng)頁(yè)。進(jìn)行相應(yīng)設(shè)置后，單擊“保存按鈕，該網(wǎng)頁(yè)保存完畢。 3重復(fù)步驟2，直至所有的框架網(wǎng)頁(yè)都保存完畢，如使用“目錄模板創(chuàng)立的框架網(wǎng)頁(yè)需要保存三次。如果某個(gè)框架網(wǎng)頁(yè)通過(guò)

45、單擊“設(shè)置初始網(wǎng)頁(yè)按鈕建立與已經(jīng)存在網(wǎng)頁(yè)的超鏈接，那么不會(huì)彈出“另存為對(duì)話框保存該網(wǎng)頁(yè)。2. 保存框架網(wǎng)頁(yè)10/17/202275 當(dāng)使用模板創(chuàng)立的框架結(jié)構(gòu)不能滿(mǎn)足需要時(shí)，可以通過(guò)拆分框架制作出更為復(fù)雜的框架網(wǎng)頁(yè)。具體操作步驟如下： 1選擇要拆分的框架，在“框架菜單中選擇“拆分框架命令，翻開(kāi)“拆分框架對(duì)話框； 4根據(jù)需要選擇“拆分為列或“拆分成行選項(xiàng)，單擊“確定按鈕完成拆分。 也可按住Ctrl鍵拖動(dòng)框架的邊框?qū)崿F(xiàn)拆分框架。3. 拆分框架10/17/202276可以從框架結(jié)構(gòu)中刪除指定的框架。此時(shí)系統(tǒng)只是把框架從框架網(wǎng)頁(yè)中刪去，而此框架中的網(wǎng)頁(yè)文件仍然存在。刪除了一個(gè)框架后，其余框架會(huì)加寬以填充

46、刪除框架留下的空間。假設(shè)框架網(wǎng)頁(yè)只有一個(gè)框架，那么不能刪除該框架。刪除框架的具體操作方法是：選擇要?jiǎng)h除的框架，在“框架菜單中選擇“刪除框架命令。4. 刪除框架10/17/202277 在框架網(wǎng)頁(yè)中可以設(shè)置框架的大小、框架的邊距和在框架中是否顯示滾動(dòng)條等屬性。具體操作方法是：選擇框架，從“框架菜單中選擇“框架屬性命令，彈出“框架屬性對(duì)話框，如右圖所示。 在“名稱(chēng)框中輸入新的框架名稱(chēng)，即可對(duì)該框架進(jìn)行重命名。 在“框架大小區(qū)域中設(shè)置寬度和高度，可以改變框架的大小，也可用鼠標(biāo)拖動(dòng)框架的邊框直接調(diào)整框架的寬度和高度。返 回5. 設(shè)置框架屬性10/17/2022789.4.3 創(chuàng)立框架超鏈接框架超鏈接的

47、使用使網(wǎng)頁(yè)之間的組織更加靈活、有效。1. 創(chuàng)立框架超鏈接 假設(shè)要設(shè)置框架超鏈接，執(zhí)行以下操作：1選擇要?jiǎng)?chuàng)立超鏈接的文字或圖片，從“插入菜單中選擇“超鏈接命令，彈出“插入超鏈接對(duì)話框；2在“插入超鏈接對(duì)話框中選擇要鏈接的目標(biāo)網(wǎng)頁(yè)，單擊“目標(biāo)框架按鈕，出現(xiàn)“目標(biāo)框架對(duì)話框；3在“當(dāng)前框架網(wǎng)頁(yè)區(qū)域中單擊要用作目標(biāo)的框架，單擊“確定按鈕，返回到“插入超鏈接對(duì)話框，在對(duì)話框底部標(biāo)簽“目標(biāo)框架后顯示設(shè)置的目標(biāo)框架名稱(chēng)；4單擊“確定按鈕，完成框架超鏈接的創(chuàng)立。10/17/2022792. 使用特殊的目標(biāo)框架 在指定目標(biāo)框架時(shí)，除了當(dāng)前框架外，還提供了一些特殊的框架來(lái)創(chuàng)立不同效果的目標(biāo)框架。這些特殊框架位于“

48、目標(biāo)框架對(duì)話框的“公用的目標(biāo)區(qū)區(qū)域中，有以下幾種：相同框架：將鏈接的網(wǎng)頁(yè)顯示在包含該超鏈接的同一個(gè)框架內(nèi)。整頁(yè)：將框架展開(kāi)為整個(gè)窗口，顯示鏈接網(wǎng)頁(yè)。新建窗口：翻開(kāi)另外一個(gè)新窗口，顯示鏈接網(wǎng)頁(yè)。父框架：在當(dāng)前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁(yè)。返 回10/17/2022809.5 創(chuàng)立表單頁(yè)面 表單是Web效勞器與客戶(hù)交互的手段。表單的作用就是收集用戶(hù)的輸入信息，從而實(shí)現(xiàn)網(wǎng)站與用戶(hù)的交互。例如，用戶(hù)可以用表單收集用戶(hù)的個(gè)人資料，也可以用表單設(shè)計(jì)一個(gè)訂貨單，讓用戶(hù)指定要購(gòu)置的商品名稱(chēng)、型號(hào)、數(shù)量等。10/17/2022819.5 創(chuàng)立表單頁(yè)面9.5.1 插入表單域9.5.2 提交表單返 回10/17/2

49、022829.5.1 插入表單域 表單中至少要有一個(gè)供用戶(hù)輸入信息的域，一個(gè)用來(lái)把信息發(fā)送給效勞器的“提交按鈕，以及一個(gè)用來(lái)去除域中現(xiàn)有內(nèi)容的“重置按鈕。當(dāng)用戶(hù)在表單中輸入信息，單擊“提交按鈕后，這些信息將被發(fā)送到效勞器，效勞器端程序?qū)?duì)這些信息進(jìn)行處理。使用“插入菜單的“表單子菜單的“表單命令，將插入一個(gè)非常簡(jiǎn)單的表單。該表單只有“提交和“重置兩個(gè)按鈕，但這是所有復(fù)雜表單的根底，可以在其中插入更多的表單域。在FrontPage 2003中，可以插入文本框、文本區(qū)、復(fù)選框、選項(xiàng)按鈕、分組框、下拉框、按鈕、高級(jí)按鈕等表單域。10/17/202283 文本框用于讓用戶(hù)輸入一行文字。將光標(biāo)放在要插入

50、文本框的位置，使用“插入菜單的“表單命令，再選擇“文本框子命令，即可插入一個(gè)文本框，如以下圖所示。 翻開(kāi)“文本框?qū)傩詫?duì)話框，可以設(shè)置文本框的屬性。 “文本框?qū)傩詫?duì)話框中，“名稱(chēng)用來(lái)設(shè)置該文本框的名稱(chēng)，“初始值用于設(shè)置文本框內(nèi)一開(kāi)始顯示的內(nèi)容，“寬度用來(lái)設(shè)置文本框所能輸入字符的個(gè)數(shù)，“密碼域用來(lái)設(shè)置是否讓文本框內(nèi)輸入的字符可見(jiàn)。 插入文本框時(shí)，假設(shè)插入點(diǎn)在一個(gè)已有的表單內(nèi)，就把一個(gè)新的文本框插入到這個(gè)表單中。假設(shè)插入點(diǎn)在表單之外，那么創(chuàng)立的文本框包含“提交和“重置按鈕。1. 插入文本框10/17/202284文本區(qū)和文本框類(lèi)似，都用于輸入文本，不同之處在于文本區(qū)中可以接受多行文本。當(dāng)文本區(qū)中輸入

51、內(nèi)容較多時(shí)，可以拖動(dòng)上下滾動(dòng)條。將光標(biāo)放在要插入文本區(qū)的位置，使用“插入菜單的“表單命令，再選擇“文本區(qū)子命令，即可插入一個(gè)文本區(qū)，如以下圖所示。 文本區(qū)屬性與文本框?qū)傩愿鞠嗤€可以在“行數(shù)框中設(shè)置該文本區(qū)包含的文本行數(shù)。2. 插入文本區(qū)10/17/202285 復(fù)選框是提供給用戶(hù)的一個(gè)選項(xiàng)，一般彼此獨(dú)立的多個(gè)復(fù)選框組成一組，用戶(hù)可以在其中任意選擇，也可以同時(shí)選中所有項(xiàng)，或一個(gè)都不選。 將光標(biāo)放在要插入復(fù)選框的位置，使用“插入菜單的“表單命令，再選擇“復(fù)選框子命令，插入一個(gè)復(fù)選框，最后在復(fù)選框旁鍵入文字進(jìn)行說(shuō)明。如果需要插入多個(gè)復(fù)選框，重復(fù)以上操作即可。 “復(fù)選框?qū)傩詫?duì)話框中，“名稱(chēng)用于設(shè)

52、置復(fù)選框的名稱(chēng)，“值用于返回復(fù)選框是否已選中， “初始狀態(tài) 選項(xiàng)按鈕組用于設(shè)置初始狀態(tài)下該復(fù)選框是否被選中，默認(rèn)為“未選中，“Tab鍵次序表示當(dāng)按下Tab鍵切換輸入焦點(diǎn)時(shí)，該復(fù)選框所在的次序。3. 插入復(fù)選框10/17/202286 選項(xiàng)按鈕與復(fù)選框類(lèi)似，不同的是一組選項(xiàng)按鈕只能選中其中的一個(gè)，其外形是圓的。 將光標(biāo)放在要插入選項(xiàng)按鈕的位置，使用“插入菜單的“表單命令，再選擇“選項(xiàng)按鈕子命令，插入一個(gè)選項(xiàng)按鈕，最后在選項(xiàng)按鈕旁鍵入文字進(jìn)行說(shuō)明。如果需要插入多個(gè)選項(xiàng)按鈕，重復(fù)以上操作即可。如以下圖所示，插入四個(gè)選項(xiàng)按鈕供用戶(hù)評(píng)價(jià)自己的網(wǎng)頁(yè)。 “選項(xiàng)按鈕屬性對(duì)話框中，“組名稱(chēng)用來(lái)設(shè)置此選項(xiàng)按鈕所屬

53、組的名稱(chēng)，如果把多個(gè)選項(xiàng)按鈕編成一組，必須使它們的組名稱(chēng)相同。4. 插入選項(xiàng)按鈕10/17/2022875. 插入分組框 如果要將一組相關(guān)的控件或文本與網(wǎng)頁(yè)或當(dāng)前表單中的其他信息分開(kāi)，可以使用分組框。 將光標(biāo)放在要插入分組框的位置，使用“插入菜單的“表單命令，再選擇“分組框子命令，即可插入分組框?！胺纸M框?qū)傩詫?duì)話框中，“標(biāo)簽用來(lái)設(shè)置分組框的名稱(chēng)?！皩?duì)齊用來(lái)設(shè)置分組框標(biāo)簽的對(duì)齊方式。6. 插入下拉框 下拉框用于從一個(gè)列表中選擇一項(xiàng)或幾項(xiàng)。從功能的角度講，可以用一組復(fù)選框或一組單項(xiàng)選擇按鈕來(lái)實(shí)現(xiàn)，但下拉框占用的網(wǎng)頁(yè)空間相對(duì)較小。 將光標(biāo)放在要插入下拉框的位置，使用“插入菜單的“表單命令，再選擇“下

54、拉框子命令，即可插入下拉框。 “下拉框?qū)傩詫?duì)話框中，單擊“添加按鈕，將翻開(kāi)“添加選項(xiàng)對(duì)話框，可以設(shè)置選項(xiàng)名稱(chēng)，指定選項(xiàng)的初始狀態(tài)是選中還是未選中。10/17/2022887插入按鈕和高級(jí)按鈕 一個(gè)表單中至少要有一個(gè)“提交按鈕和一個(gè)“重置按鈕。“提交按鈕的作用是把表單中的數(shù)據(jù)提交給Web效勞器的表單處理程序，“重置按鈕的作用是把表單中的數(shù)據(jù)清空，以便重新填寫(xiě)。將光標(biāo)放在要插入按鈕的位置，使用“插入菜單的“表單命令，再選擇“按鈕子命令，即可插入按鈕。在“按鈕屬性對(duì)話框中可以設(shè)置按鈕的名稱(chēng)、值/標(biāo)簽、按鈕類(lèi)型等屬性。按鈕可以設(shè)置為“提交、“重置或普通按鈕，對(duì)于“提交和“重置按鈕來(lái)說(shuō)，它們的動(dòng)作是默認(rèn)的。 高級(jí)按鈕的插入與屬性設(shè)置與普通按鈕根本相同，但是高級(jí)按鈕具備更加精確的控制按鈕屬性的能力。返 回10/17/2022899.5.2 提交表單 用戶(hù)結(jié)束表單操作后，單擊“提交按鈕，當(dāng)“提交按鈕設(shè)置了表單結(jié)果送至何處后可以正常處理。表單處理程序?qū)Ρ韱蔚奶幚砜梢允菍⒈韱谓Y(jié)果保存為文件，或?qū)⒈韱谓Y(jié)果發(fā)送至一個(gè)電子郵件地址。1. 將表單結(jié)果保存為文件 在表單上單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“表單屬性命令，翻開(kāi)“表單屬性對(duì)話框，如以下圖所示。10/1