計算機(jī)基礎(chǔ)知識第八版教材課件第8章

第八章

網(wǎng)頁制作

——大學(xué)IT——第一頁，共九十九頁。第八章網(wǎng)頁制作8.1概述8.2HTML簡介8.3網(wǎng)頁制作8.4網(wǎng)頁布局8.5創(chuàng)建表單頁面8.6網(wǎng)頁的發(fā)布

12/7/20222——大學(xué)IT——第二頁，共九十九頁。8.1概述

8.1.1網(wǎng)站8.1.2服務(wù)器與瀏覽器8.1.3網(wǎng)頁8.1.4網(wǎng)頁制作工具8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言12/7/20223——大學(xué)IT——第三頁，共九十九頁。8.1.1網(wǎng)站

網(wǎng)站是一組相關(guān)網(wǎng)頁和有關(guān)文件的集合，一般有一個特殊的網(wǎng)頁作為瀏覽的起始點，稱為主頁（Homepage），用來引導(dǎo)用戶訪問其他網(wǎng)頁。網(wǎng)站中的內(nèi)容通常包括網(wǎng)頁和相關(guān)的文件，一般被存儲在同一個目錄中，并根據(jù)網(wǎng)站欄目或資源類型進(jìn)行分類，分別存放在不同的子目錄中。本地網(wǎng)站在制作完成后，不經(jīng)過發(fā)布是不能被其他瀏覽者訪問的。發(fā)布就是將本地網(wǎng)站的內(nèi)容傳輸?shù)竭B接Internet的Web服務(wù)器上。網(wǎng)站發(fā)布后，即獲得一個網(wǎng)站地址。12/7/20224——大學(xué)IT——第四頁，共九十九頁。8.1.2服務(wù)器與瀏覽器

網(wǎng)站通常位于Web服務(wù)器上，Web服務(wù)器又稱WWW服務(wù)器、網(wǎng)站服務(wù)器或站點服務(wù)器。從本質(zhì)上講，Web服務(wù)器就是一個軟件系統(tǒng)，它通過網(wǎng)絡(luò)接收HTTP請求，然后提供HTTP響應(yīng)給請求者。HTTP響應(yīng)一般包含一個HTML文件，但也可以包含文本文件、圖像或其他類型的文件。要使一臺計算機(jī)成為一臺Web服務(wù)器，就需要安裝專門的服務(wù)程序。要瀏覽Web頁面，必須在本地計算機(jī)上安裝瀏覽器軟件。瀏覽器就是Web客戶端，它是一個應(yīng)用程序，用于與Web服務(wù)器建立連接，并與之進(jìn)行通信。瀏覽器和服務(wù)器之間通過超文本傳送協(xié)議（HyperTextTransferProtocol，HTTP）進(jìn)行通信。12/7/20225——大學(xué)IT——第五頁，共九十九頁。8.1.3網(wǎng)頁

網(wǎng)頁一般又稱為HTML文件，是一種可以在WWW上傳輸，能被瀏覽器認(rèn)識和翻譯成頁面并顯示出來的文件。通常用戶看到的網(wǎng)頁大多是以.htm和.html為擴(kuò)展名的文件。12/7/20226——大學(xué)IT——第六頁，共九十九頁。8.1.3網(wǎng)頁1.網(wǎng)頁內(nèi)容一般來說，網(wǎng)頁主要由文字、圖片、動畫、超鏈接和特殊組件等元素構(gòu)成。2.靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁根據(jù)網(wǎng)頁的生成方式，大致可以分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種。12/7/20227——大學(xué)IT——第七頁，共九十九頁。8.1.4網(wǎng)頁制作工具

1.網(wǎng)頁制作三劍客Dreamweaver、Flash、Fireworks被稱為網(wǎng)頁制作“三劍客”。（1）Dreamweaver是美國著名的軟件開發(fā)商Macromedia公司推出的一個所見即所得的可視化網(wǎng)站開發(fā)工具，該軟件同時適用于初學(xué)者和專業(yè)網(wǎng)頁設(shè)計師。（2）Fireworks也是由Macromedia公司開發(fā)的一種工具，它以處理網(wǎng)頁圖片為特長，并可以輕松創(chuàng)造GIF動畫。（3）Flash是當(dāng)今Internet最流行的動畫作品的制作工具，并成為事實上的交互式矢量動畫標(biāo)準(zhǔn)。12/7/20228——大學(xué)IT——第八頁，共九十九頁。8.1.4網(wǎng)頁制作工具2.MicrosoftFrontPage2003FrontPage2003是微軟公司推出的MicrosoftOffice2003家族的成員之一，與Office的其他組件高度融合，界面友好，功能強(qiáng)大，易學(xué)易用。FrontPage2003的主要功能是設(shè)計、制作、管理網(wǎng)頁或站點。12/7/20229——大學(xué)IT——第九頁，共九十九頁。8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言

1.HTMLHTML是HypertextMarkupLanguage的縮寫，是WWW技術(shù)的基礎(chǔ)，它使用一些約定的標(biāo)記（Tag）對文本進(jìn)行標(biāo)注，定義網(wǎng)頁的數(shù)據(jù)格式，描述Web頁中的信息，控制文本的顯示。我們把用HTML語言編寫的文件稱為HTML文件，把HTML文檔稱為網(wǎng)頁（WebPage）。用HTML語言編寫的網(wǎng)頁實際上是一種文本文件，它以.htm或.html為擴(kuò)展名。12/7/202210——大學(xué)IT——第十頁，共九十九頁。8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言2.XMLXML是ExtensibleMarkupLanguage的縮寫，中文名為可擴(kuò)展標(biāo)記語言。其主要用途是在Internet上傳遞或處理數(shù)據(jù)。XML與HTML不是并列的概念，它可以說是HTML的補(bǔ)丁，以彌補(bǔ)HTML的不足。比如，在HTML中不允許用戶自定義控制標(biāo)識符，而在XML中允許用戶這樣做。XML文件的擴(kuò)展名為.xml。12/7/202211——大學(xué)IT——第十一頁，共九十九頁。8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言3.CSSCSS是CascadingStyleSheets的縮寫，中文名為層疊樣式表，主要用來對網(wǎng)頁數(shù)據(jù)進(jìn)行編排、格式化、顯示、特效等。傳統(tǒng)的HTML不能對網(wǎng)頁數(shù)據(jù)進(jìn)行隨心所欲的格式化，而CSS語言卻滿足了這種要求，它對網(wǎng)頁的特殊顯示、特殊效果提供了很大的幫助。目前，大多數(shù)網(wǎng)頁都用了CSS。12/7/202212——大學(xué)IT——第十二頁，共九十九頁。8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言4.DHTMLDHTML是動態(tài)的HTML，這種技術(shù)要求網(wǎng)頁具備動態(tài)功能，如動態(tài)交互、動態(tài)更新等。事實上，這是要求我們應(yīng)該掌握Web中所包含的對象、對象集，以及對象的屬性、方法、事件等，然后用程序處理這些對象相關(guān)的屬性、方法，讓事件去完成一定的處理程序，以達(dá)到網(wǎng)頁的動態(tài)效果。12/7/202213——大學(xué)IT——第十三頁，共九十九頁。8.1.5網(wǎng)頁設(shè)計的相關(guān)計算機(jī)語言5.腳本語言腳本（Script）語言是嵌入到HTML代碼中的程序，根據(jù)運行的位置不同把它分為客戶端腳本和服務(wù)器端腳本?？蛻舳四_本是運行在客戶端的程序，服務(wù)器端腳本是運行在服務(wù)器端的程序。這里所說的客戶端指的是瀏覽器，服務(wù)器端指的是Web服務(wù)器。目前較為流行的腳本語言有JavaScript和VBScript。12/7/202214——大學(xué)IT——第十四頁，共九十九頁。8.2HTML簡介

HTML文件是一種純文本文件，我們可以使用任何文本處理軟件（如記事本）來創(chuàng)建或處理HTML文件。

8.2.1HTML語言概述

8.2.2常用的HTML標(biāo)記12/7/202215——大學(xué)IT——第十五頁，共九十九頁。8.2.1HTML語言概述HTML語言是由世界性的標(biāo)準(zhǔn)化組織W3C（WorldWideWebConsortium）制定的，通過瀏覽可以了解到HTML標(biāo)準(zhǔn)的最新動態(tài)。下面介紹HTML文件的基本構(gòu)成和層次結(jié)構(gòu)。12/7/202216——大學(xué)IT——第十六頁，共九十九頁。1.HTML文件標(biāo)記Internet中的每一個HTML文件都包括文本內(nèi)容和HTML標(biāo)記兩部分。其中，HTML標(biāo)記負(fù)責(zé)控制文本顯示的外觀和版式，并為瀏覽器指定各種鏈接的圖像、聲音和其他對象的位置。多數(shù)HTML標(biāo)記的書寫格式如下：<標(biāo)記名>文本內(nèi)容</標(biāo)記名>標(biāo)記名寫在“<>”內(nèi)。多數(shù)HTML標(biāo)記同時具有起始和結(jié)束標(biāo)記，并且成對出現(xiàn)，但也有些HTML標(biāo)記沒有結(jié)束標(biāo)記。另外，HTML標(biāo)記不區(qū)分大小寫。8.2.1HTML語言概述12/7/202217——大學(xué)IT——第十七頁，共九十九頁。某些HTML標(biāo)記還具有一些屬性，這些屬性指定對象的特性，如背景顏色、文本字體及大小、對齊方式等。屬性一般放在“起始標(biāo)記”中，格式如下：<標(biāo)記名屬性1=值1屬性2=值2…>文本內(nèi)容</標(biāo)記名>其中標(biāo)記名和屬性之間用空格分隔。如果標(biāo)記有多種屬性，屬性之間也要用空格分隔。8.2.1HTML語言概述12/7/202218——大學(xué)IT——第十八頁，共九十九頁。2.HTML網(wǎng)頁的結(jié)構(gòu)現(xiàn)在我們先看一個簡單的HTML文件，從中體會用HTML語言編寫網(wǎng)頁時的層次結(jié)構(gòu)?！纠?-1】用HTML語言編寫一個簡單的網(wǎng)頁。<html><head><title>我的第一個Web頁</title></head><body><h1>歡迎進(jìn)入HTML世界！</h1><p>這里我們首先介紹HTML語言的基本知識和語法。然后，講授如何使用HTML語言編寫您的Web頁面。</p></body></html>8.2.1HTML語言概述12/7/202219——大學(xué)IT——第十九頁，共九十九頁。將上述代碼用文本編輯器編輯并保存為一個擴(kuò)展名為.htm的文件，雙擊該文件圖標(biāo)，在瀏覽器中看到如下圖所示的結(jié)果。圖9-18.2.1HTML語言概述

12/7/202220——大學(xué)IT——第二十頁，共九十九頁。從上例可以看出，一般HTML文件都是以<html>開頭，以</html>結(jié)束。其文件結(jié)構(gòu)由以下兩部分組成：1）頭部（Head）HTML文件的頭部由<head>和</head>標(biāo)記定義。通常情況下，文件的標(biāo)題、語言字符集信息等都放在頭部信息中。最常用到的標(biāo)記是<title>…</title>，它用于定義網(wǎng)頁文件的標(biāo)題，當(dāng)該網(wǎng)頁文件被打開后，網(wǎng)頁文件的標(biāo)題將出現(xiàn)在瀏覽器的標(biāo)題欄中。8.2.1HTML語言概述12/7/202221——大學(xué)IT——第二十一頁，共九十九頁。2）正文主體（Body）正文主體是HTML文件的核心內(nèi)容，由<body>和</body>標(biāo)記定義。<body>標(biāo)記具有一些常用的屬性，格式如下：<bodybgcolor=#ncolor=#n>…</body>其中，bgcolor為背景顏色，color為文本顏色。n為六位十六進(jìn)制數(shù)。如果網(wǎng)頁使用背景圖像，格式如下：<bodybackground="路徑/圖片文件名">…</body>HTML對格式的要求并不嚴(yán)格，當(dāng)HTML文件被瀏覽器掃描時，所有包含在文件中的空格、回車等均被忽略。因此你可以將一行寫成兩行或多行，在瀏覽器中結(jié)果是相同的。返回8.2.1HTML語言概述12/7/202222——大學(xué)IT——第二十二頁，共九十九頁。8.2.2常用的HTML標(biāo)記

1.文本布局1）段落標(biāo)記<p><p>…</p>標(biāo)記指定文檔中一個獨立的段落。通過設(shè)置align屬性，控制段落的對齊方式，其值可以是left、center、right、justify，分別表示左對齊、居中、右對齊和兩端對齊，默認(rèn)值為左對齊。使用格式如下：<palign=對齊方式>…</p>2）換行標(biāo)記<br><br>標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有起始標(biāo)記。3）水平線標(biāo)記<hr>水平線標(biāo)記<hr>用于在網(wǎng)頁中插入一條水平線。12/7/202223——大學(xué)IT——第二十三頁，共九十九頁。2.文字格式HTML語言中用于文字格式化的標(biāo)記有：1）標(biāo)題標(biāo)記<hn>格式為：<hn屬性=屬性值>標(biāo)題文字內(nèi)容</hn>其中n說明大小級別，取值范圍為1到6的數(shù)字。把標(biāo)題分為6級，即h1~h6，其中h1文字最大，h6文字最小。12/7/202224——大學(xué)IT——第二十四頁，共九十九頁。2）字體標(biāo)記<font>字體標(biāo)記用來對文字格式進(jìn)行設(shè)置，主要具有以下屬性：（1）size屬性：控制文字的大小，格式如下：<fontsize=n>…</font>其中n的取值范圍為1～7的數(shù)字，默認(rèn)值為3。<font>標(biāo)記和<hn>標(biāo)記都可以控制文字的大小。一般情況下，文章的標(biāo)題最好由<hn>標(biāo)記控制，而其余的文字由<font>標(biāo)記控制。相比較而言，<font>對字體的控制更加靈活。（2）color屬性：控制文字的顏色，格式如下：<fontcolor=#n或英文表示的顏色>…</font>其中n是一個十六進(jìn)制的六位數(shù)。（3）face屬性：指明文字使用的字體，格式如下：

<fontface=字體名>…</font>

其中字體名的選擇由Windows操作系統(tǒng)安裝的字體決定。如：宋體、楷體_GB2312、TimesNewRoman、Arial等。12/7/202225——大學(xué)IT——第二十五頁，共九十九頁。3）字形標(biāo)記字形標(biāo)記用于設(shè)置文字的粗體、斜體、下劃線、上標(biāo)、下標(biāo)等，如表所示：標(biāo)記格式字形<b>…</b>粗體<i>…</i>斜體<u>…</u>下劃線^…上標(biāo)_…下標(biāo)12/7/202226——大學(xué)IT——第二十六頁，共九十九頁。3.圖片<img>標(biāo)記將圖片插入網(wǎng)頁中，用于設(shè)置圖片的大小以及相鄰文字的排列方式。該標(biāo)記具有以下屬性：（1）src屬性：指明圖片文件所在的位置。格式如下：<imgsrc=URL>其中URL指圖片文件存放的位置。（2）alt屬性：圖片的文字說明，當(dāng)鼠標(biāo)指針指向圖片時，該圖片的說明性文字彈出。格式如下：<imgsrc=URLalt=說明文字>（3）width和height屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。格式如下：<imgsrc=URLwidth=n1height=n2>其中width和height屬性的取值n1和n2，可以是像素數(shù)或百分比。12/7/202227——大學(xué)IT——第二十七頁，共九十九頁。（4）border屬性：設(shè)置圖片文件的邊框。格式如下：<imgsrc=URLborder=n>其中n為像素數(shù)。（5）align屬性：設(shè)置圖片相對于文本的位置關(guān)系。格式為：<imgsrc=URLalign=對齊方式>對齊方式可以是：top（頂端對齊）、middle（相對垂直居中）、bottom（相對底邊對齊）、left（左對齊）、right（右對齊）、texttop（文本上方）等。12/7/202228——大學(xué)IT——第二十八頁，共九十九頁。4.超鏈接

在HTML語言中，<a>和</a>標(biāo)記用于設(shè)置網(wǎng)頁中的超鏈接，href屬性指明被超鏈接的文件地址。格式如下：<ahref=URL>超鏈接文本</a>用于表示超鏈接的文本一般顯示為藍(lán)色并且加下劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針指向該文本時，箭頭變?yōu)槭中危⒃跒g覽器的狀態(tài)欄中顯示該超鏈接的地址。若使用圖片做超鏈接，可使用如下格式完成：<ahref=URL1><imgsrc=URL2></a>12/7/202229——大學(xué)IT——第二十九頁，共九十九頁。5.表格在網(wǎng)頁中插入一個表格，需要用到一組HTML標(biāo)記。定義表格的有關(guān)標(biāo)記如下：

<table>…</table> 定義表格區(qū)域。<caption>…</caption>定義表格標(biāo)題。<th>…</th> 定義表格頭。<tr>…</tr> 定義表格行。<td>…</td> 定義表格單元格。返回12/7/202230——大學(xué)IT——第三十頁，共九十九頁。常用的標(biāo)記屬性中，border屬性用于設(shè)置表格邊框的寬度；width、height屬性用于設(shè)置表格或單元格的寬度、高度；cellspacing和cellpadding屬性分別用于設(shè)置單元格之間的間隙和單元格內(nèi)部空白；align屬性用于設(shè)置表格或單元格的對齊方式；bgcolor和background屬性分別用于設(shè)置表格的背景顏色和背景圖像。表格屬性12/7/202231——大學(xué)IT——第三十一頁，共九十九頁。8.3網(wǎng)

頁

制

作8.3.1FrontPage2003概述8.3.2創(chuàng)建站點8.3.3網(wǎng)頁編輯8.3.4插入對象8.3.5創(chuàng)建超鏈接12/7/202232——大學(xué)IT——第三十二頁，共九十九頁。8.3.1FrontPage2003概述

FrontPage2003可以按下列方法啟動：單擊“開始”按鈕，在“開始”菜單中指向“程序”→“MicrosoftOffice”→“MicrosoftOfficeFrontPage2003”；通過創(chuàng)建FrontPage2003的快捷方式啟動。FrontPage2003的退出可以使用以下幾種方式：選取“文件”菜單中的“退出”；單擊窗口右上角的“關(guān)閉”按鈕；按快捷鍵Alt+F4等。12/7/202233——大學(xué)IT——第三十三頁，共九十九頁。8.3.1FrontPage2003概述啟動FrontPage2003后，可以看到以下幾種視圖，用戶可以在不同的視圖中進(jìn)行相應(yīng)的操作。1.網(wǎng)頁視圖

網(wǎng)頁視圖是FrontPage2003中最常用的工作界面，網(wǎng)頁的創(chuàng)建、編輯、預(yù)覽等基本操作都是在此視圖中進(jìn)行的。FrontPage2003提供了四種網(wǎng)頁視圖模式，即設(shè)計、拆分、代碼、預(yù)覽。2.文件夾視圖

文件夾視圖用于管理文件和文件夾，使用它可以直接處理文件和文件夾以及組織網(wǎng)站內(nèi)容。在此視圖中，可以創(chuàng)建、刪除、復(fù)制和移動文件夾，具體操作與在Windows資源管理器中類似。3.遠(yuǎn)程網(wǎng)站視圖

遠(yuǎn)程網(wǎng)站視圖用于站點和站點內(nèi)文件的發(fā)布。在遠(yuǎn)程網(wǎng)站視圖中查看文件時，文件將用圖標(biāo)和描述性文字進(jìn)行標(biāo)記以表示發(fā)布狀態(tài)。12/7/202234——大學(xué)IT——第三十四頁，共九十九頁。8.3.1FrontPage2003概述4.報表視圖

報表視圖用于查看站點的各種情況，如文件內(nèi)容、更新鏈接、文件列表及變化情況等。

5.導(dǎo)航視圖

利用導(dǎo)航視圖可以清晰地看到當(dāng)前站點的主頁和其他網(wǎng)頁的鏈接關(guān)系，也可以設(shè)置站點的導(dǎo)航結(jié)構(gòu)或添加、刪除網(wǎng)頁。6.超鏈接視圖

超鏈接視圖將當(dāng)前站點顯示為鏈接文件的一個網(wǎng)絡(luò)，它們表示了站點中各個網(wǎng)頁之間的相互鏈接關(guān)系。利用超鏈接視圖可以管理站點中各個網(wǎng)頁的超鏈接。7.任務(wù)視圖

任務(wù)視圖主要用于創(chuàng)建和管理任務(wù)。任務(wù)視圖以列格式顯示網(wǎng)站中的所有任務(wù)，并在各個標(biāo)題下提供有關(guān)各項任務(wù)的當(dāng)前信息。

12/7/202235——大學(xué)IT——第三十五頁，共九十九頁。

創(chuàng)建站點

使用FrontPage2003的模板和向?qū)?，用戶可以輕松地創(chuàng)建出各種用途和風(fēng)格的站點。新建站點時，可以根據(jù)自己的需求選擇不同的模板和向?qū)Аτ诓煌哪０搴拖驅(qū)?，其新建站點的步驟略有不同。下面以“由一個網(wǎng)頁組成的網(wǎng)站”模板為例，介紹新建站點的方法。（1）單擊“文件”菜單的“新建”命令，在“新建”任務(wù)窗格中選擇“新建網(wǎng)站”中的“由一個網(wǎng)頁組成的網(wǎng)站”；（2）在彈出的“網(wǎng)站模板”對話框的“指定新網(wǎng)站的位置”框中輸入新站點要保存的位置，也可使用“瀏覽”按鈕指定新站點的位置；12/7/202236——大學(xué)IT——第三十六頁，共九十九頁。（3）單擊“確定”按鈕，新建站點如下圖所示返回該站點只有一個空白網(wǎng)頁index.htm（主頁）和用于存儲圖片的文件夾images，你可以打開index.htm進(jìn)行編輯，也可以進(jìn)一步根據(jù)網(wǎng)站規(guī)劃創(chuàng)建文件夾和新建其他網(wǎng)頁。選擇“文件”菜單的“退出”命令，可以關(guān)閉FrontPage2003。12/7/202237——大學(xué)IT——第三十七頁，共九十九頁。1.新建網(wǎng)頁要根據(jù)“網(wǎng)頁模板”創(chuàng)建一個新的網(wǎng)頁，可以按下面的步驟：（1）單擊“文件”菜單的“新建”命令，在“新建”任務(wù)窗格中選擇“新建網(wǎng)頁”中的“其他網(wǎng)頁模板”。（2）在彈出的“網(wǎng)頁模板”對話框中選擇所需的網(wǎng)頁模板，可以在“說明”及“預(yù)覽”區(qū)域查看該模板的說明及預(yù)覽圖。（3）單擊“確定”按鈕，系統(tǒng)新建一個基于所選模板的網(wǎng)頁。（4）單擊“文件”菜單，選擇“保存”命令，彈出“另存為”對話框。在此對話框中，輸入文件名進(jìn)行保存。返回8.3.3網(wǎng)頁編輯12/7/202238——大學(xué)IT——第三十八頁，共九十九頁。2.打開/保存網(wǎng)頁FrontPage2003中，編輯某個網(wǎng)頁之前，需要先打開該網(wǎng)頁。打開網(wǎng)頁的方法有多種，常用的有以下幾種：（1）使用“文件”菜單的“打開”命令，或“常用”工具欄的“打開”按鈕，在彈出的“打開文件”對話框中選擇相應(yīng)的網(wǎng)頁；（2）如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標(biāo)即可將其打開。實際上，在其他視圖中雙擊網(wǎng)頁圖標(biāo)，同樣會打開指定網(wǎng)頁。要保存一個網(wǎng)頁，可以使用“文件”菜單的“保存”命令，或“常用”工具欄的“保存”按鈕，如需另存可使用“文件”菜單的“另存為”命令。返回8.3.3網(wǎng)頁編輯12/7/202239——大學(xué)IT——第三十九頁，共九十九頁。3.預(yù)覽網(wǎng)頁網(wǎng)頁制作過程中，用戶可以切換到“預(yù)覽”視圖預(yù)覽網(wǎng)頁，也可以使用“文件”菜單的“在瀏覽器中預(yù)覽”命令預(yù)覽網(wǎng)頁。使用后者，系統(tǒng)會打開瀏覽器顯示網(wǎng)頁，如果該網(wǎng)頁尚未保存，會彈出對話框提示用戶保存網(wǎng)頁。返回8.3.3網(wǎng)頁編輯12/7/202240——大學(xué)IT——第四十頁，共九十九頁。8.3.3網(wǎng)頁編輯4.設(shè)置文字格式同其他MicrosoftOffice組件一樣，在網(wǎng)頁中可以輸入文字，復(fù)制、剪切和粘貼文字，設(shè)置文字格式，查找和替換文字等。在FrontPage2003中，對文字的格式提供了相當(dāng)完整的設(shè)定功能，文字格式的變化也因此多種多樣?？梢允褂霉ぞ邫谏系墓ぞ甙粹o或菜單命令快速地改變文字的外觀。設(shè)置文字格式的一般操作步驟是：選中文字，單擊“格式”菜單的“字體”命令，在彈出的“字體”對話框中設(shè)置字體的各種屬性，也可以使用“格式”工具欄中相應(yīng)的命令按鈕。雖然可以設(shè)置各種美觀的字體，但是由于用戶只能使用本地計算機(jī)中安裝的字體顯示網(wǎng)頁，因此還是使用常見的字體為好。返回12/7/202241——大學(xué)IT——第四十一頁，共九十九頁。8.3.3網(wǎng)頁編輯5.設(shè)置段落格式文字段落的格式編排對于一個網(wǎng)頁的外觀是至關(guān)重要的。FrontPage2003通過按Enter鍵劃分段落。值得注意的是，段落之間插入了一個空行。如果只是需要換行，而不是另起一個段落，按Shift+Enter鍵即可。實際上，按Enter鍵在HTML代碼中插入的是<p>標(biāo)記，而按Shift+Enter鍵則插入的是<br>標(biāo)記。段落格式主要包括對齊方式、縮進(jìn)和段落間距等。設(shè)置段落格式的一般方法如下：將插入點移動到要設(shè)置格式的段落中，或是選中該段落，單擊“格式”菜單的“段落”命令，在彈出的“段落”對話框中進(jìn)行各種段落格式屬性的設(shè)置。返回12/7/202242——大學(xué)IT——第四十二頁，共九十九頁。8.3.3網(wǎng)頁編輯6.設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性包括網(wǎng)頁的標(biāo)題、格式、頁邊距等。要設(shè)置網(wǎng)頁屬性，用戶可以使用“文件”菜單的“屬性”命令，或者在網(wǎng)頁的任意地方單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“網(wǎng)頁屬性”命令，F(xiàn)rontPage2003將顯示“網(wǎng)頁屬性”對話框。12/7/202243——大學(xué)IT——第四十三頁，共九十九頁。6.設(shè)置網(wǎng)頁屬性1）“常規(guī)”屬性要設(shè)置網(wǎng)頁的“常規(guī)”屬性，單擊“網(wǎng)頁屬性”對話框的“常規(guī)”選項卡?！皹?biāo)題”框用于給出網(wǎng)頁的標(biāo)題，網(wǎng)頁標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。“背景音樂”框用于指定網(wǎng)頁的背景音樂，當(dāng)用瀏覽器打開網(wǎng)頁時，將自動播放背景音樂。背景音樂區(qū)域的“位置”框用于指定聲音文件的位置，用戶可以使用“瀏覽”按鈕選擇一個聲音文件；“循環(huán)次數(shù)”框用于指定聲音要反復(fù)播放的次數(shù)，如果選中“不限次數(shù)”復(fù)選框，表示一直不停地播放。12/7/202244——大學(xué)IT——第四十四頁，共九十九頁。6.設(shè)置網(wǎng)頁屬性2）“格式”屬性要設(shè)置網(wǎng)頁的背景、顏色，可以使用“網(wǎng)頁屬性”對話框的“格式”選項卡。用戶可以選中“背景圖片”復(fù)選框，指定一個圖片作為網(wǎng)頁的背景圖片。如果要將圖片按水印形式添加，需要選中“使其成為水印”復(fù)選框。通過單擊相應(yīng)的下拉列表框，可以設(shè)置網(wǎng)頁的背景顏色、文本顏色以及超鏈接文字的顏色。當(dāng)同時設(shè)置背景圖片和背景顏色時，背景圖片將覆蓋背景色。返回12/7/202245——大學(xué)IT——第四十五頁，共九十九頁。8.3.4插入對象1.插入水平線在網(wǎng)頁中輸入文本內(nèi)容后，還可在不同的段落、行之間添加水平線，水平線將網(wǎng)頁分割成幾個部分，使得網(wǎng)頁更具條理性。具體操作步驟如下：（1）在準(zhǔn)備插入水平線的位置設(shè)置插入點；（2）單擊“插入”菜單的“水平線”命令，插入水平線。要修改水平線的外觀，可以雙擊水平線，打開“水平線屬性”對話框?！皩挾取笨蛴糜谠O(shè)置水平線的寬度，“高度”框用于設(shè)置水平線的高度，“對齊方式”用于設(shè)置水平線在網(wǎng)頁內(nèi)水平對齊的方式，“顏色”列表框用于設(shè)置水平線的顏色，選中“實線（無陰影）”復(fù)選框時，水平線將被設(shè)成實心線。要為線條指定自定義樣式或其他格式，可以使用“樣式”按鈕進(jìn)行設(shè)置。返回12/7/202246——大學(xué)IT——第四十六頁，共九十九頁。8.3.4插入對象

2.插入圖片圖片可以使網(wǎng)頁變得生動活潑，并能吸引用戶的注意。1）圖片文件的格式在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，因此被廣泛地應(yīng)用在Web站點的設(shè)計中。GIF（GraphicalInterchangeFormat，圖形交換格式）采用無損壓縮方式，其主要特征是支持動畫、透明度、圖形漸進(jìn)，但GIF圖像包含的顏色不能超過256種。JPEG（JointPhotographExpertGroup，聯(lián)合圖像專家組）格式是專為有幾百萬種顏色的照片和圖形設(shè)計的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。JPEG格式支持真彩色（24位色），并且在壓縮大的圖像方面已被證明很有效。12/7/202247——大學(xué)IT——第四十七頁，共九十九頁。2.插入圖片2）插入圖片和設(shè)置圖片屬性（方法同Word）3）編輯圖片利用“圖片”工具欄能夠完成一些常用的圖像編輯功能。4）保存圖片插入圖片后保存網(wǎng)頁，如果圖片不在網(wǎng)站文件夾中，將出現(xiàn)“保存嵌入式文件”對話框。如果圖片在網(wǎng)站文件夾中，就不會出現(xiàn)此對話框。

12/7/202248——大學(xué)IT——第四十八頁，共九十九頁。8.3.4插入對象3.插入字幕在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字做成由左至右，或由右至左移動的動態(tài)效果，使網(wǎng)頁更加形象生動。具體操作步驟如下：（1）將插入點設(shè)置在要插入移動字幕的位置或者選中作為移動字幕的文本，單擊“插入”菜單的“Web組件”命令，彈出“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“動態(tài)效果”，在“選擇一種效果”列表中選擇“字幕”，單擊“完成”按鈕，打開“字幕屬性”對話框。12/7/202249——大學(xué)IT——第四十九頁，共九十九頁。（2）如果已經(jīng)選擇了作為移動字幕的文本，此文本就會出現(xiàn)在“文本”框中，如果沒有選擇文本，可在“文本”框中輸入作為移動字幕的文本。（3）“方向”區(qū)域用于指定文本的移動方向。“速度”區(qū)域用于指定文字的滾動速度，“延遲”框中的數(shù)值表示字幕滾動一步的時間間隔是多少毫秒，“數(shù)量”框中的數(shù)值表示字幕滾動一步的距離是多少像素?！氨憩F(xiàn)方式”區(qū)域用于指定文字的表現(xiàn)方式。選中“重復(fù)”區(qū)域的“連續(xù)”復(fù)選框，移動字幕將連續(xù)滾動；若要設(shè)置字幕滾動有限次，可以取消選中“連續(xù)”復(fù)選框并輸入字幕重復(fù)的次數(shù)?！氨尘吧绷斜砜蛴糜谠O(shè)置移動字幕的背景顏色?！按笮　眳^(qū)域用于設(shè)置字幕的寬度與高度。（4）單擊“確定”按鈕，即可插入字幕。3.插入字幕

12/7/202250——大學(xué)IT——第五十頁，共九十九頁。8.3.4插入對象4.插入交互式按鈕交互式按鈕是一個動態(tài)按鈕，當(dāng)用戶將鼠標(biāo)指向交互式按鈕時，交互式按鈕會改變顏色或形狀。默認(rèn)情況下，交互式按鈕是一個帶有彩色方框的文字按鈕，也可以應(yīng)用圖片創(chuàng)建交互式按鈕。（1）將插入點設(shè)置在要插入交互式按鈕的位置，單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“動態(tài)效果”，在“選擇一種效果”列表中選擇“交互式按鈕”，單擊“完成”按鈕，打開“交互式按鈕”屬性對話框。（2）設(shè)置按鈕字體圖像（3）單擊“確定”按鈕，即可插入交互式按鈕。

12/7/202251——大學(xué)IT——第五十一頁，共九十九頁。8.3.4插入對象5.插入站點計數(shù)器（1）單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“計數(shù)器”，在“選擇計數(shù)器樣式”列表中選擇一種樣式，單擊“完成”按鈕，打開“計數(shù)器屬性”對話框；（2）設(shè)置計數(shù)器屬性；（3）單擊“確定”按鈕，插入站點計數(shù)器。返回12/7/202252——大學(xué)IT——第五十二頁，共九十九頁。

創(chuàng)建超鏈接Web網(wǎng)頁的強(qiáng)大之處就在于其超鏈接，使用超鏈接能夠?qū)nternet中的信息有機(jī)地組織起來，使人們在豐富多彩的WWW世界輕松地漫游。超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的鏈接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，也可以是相同網(wǎng)頁上的不同位置，還可以是圖片、文件、電子郵件地址等。超鏈接由鏈接載體和鏈接目標(biāo)兩部分組成。根據(jù)鏈接載體的特點，可以把鏈接分為文本超鏈接與圖片超鏈接兩大類。12/7/202253——大學(xué)IT——第五十三頁，共九十九頁。8.3.5創(chuàng)建超鏈接1.創(chuàng)建文本超鏈接文本超鏈接是指在文本上定義的超鏈接，單擊文本超鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標(biāo)。創(chuàng)建文本超鏈接的具體操作步驟如下：（1）選定要定義超鏈接的文本，從“插入”菜單中選擇“超鏈接”命令，或單擊“常用”工具欄上的“超鏈接”按鈕，打開“插入超鏈接”對話框，如下圖所示；12/7/202254——大學(xué)IT——第五十四頁，共九十九頁。1.創(chuàng)建文本超鏈接（2）在“插入超鏈接”對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊“確定”按鈕，插入超鏈接，可以看到所選定的文本變?yōu)樗{(lán)色，并且?guī)в邢聞澗€，說明選定的文本已經(jīng)被設(shè)置為超鏈接文本。保存網(wǎng)頁，在瀏覽器中預(yù)覽效果。當(dāng)鼠標(biāo)移至鏈接文字時，鼠標(biāo)指針變成手形，此時單擊鼠標(biāo)就跳轉(zhuǎn)到目標(biāo)網(wǎng)頁。12/7/202255——大學(xué)IT——第五十五頁，共九十九頁。圖片超鏈接是指在圖片上創(chuàng)建的超鏈接，圖片超鏈接比文本超鏈接顯得更加生動活潑，單擊圖片超鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標(biāo)?？梢詫⒄麄€圖片設(shè)置為超鏈接，也可以為圖片分配一個或多個熱點。熱點是圖片上的超鏈接區(qū)域，包含熱點的圖片稱為圖像映射，用戶單擊熱點區(qū)域可以轉(zhuǎn)到相應(yīng)的鏈接目標(biāo)。2.創(chuàng)建圖片超鏈接12/7/202256——大學(xué)IT——第五十六頁，共九十九頁。（1）選定要定義超鏈接的圖片，從“插入”菜單中選擇“超鏈接”命令，或單擊“常用”工具欄上的“超鏈接”按鈕，打開“插入超鏈接”對話框；（2）在對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊“確定”按鈕，即可插入超鏈接。保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，當(dāng)鼠標(biāo)移至鏈接圖片時，鼠標(biāo)指針變成手形，此時單擊鼠標(biāo)就跳轉(zhuǎn)到目標(biāo)網(wǎng)頁。1）創(chuàng)建圖片超鏈接12/7/202257——大學(xué)IT——第五十七頁，共九十九頁。熱點可以是圖片上具有某種形狀的一塊區(qū)域或文本，當(dāng)用戶單擊該區(qū)域或文本時，超鏈接目標(biāo)會顯示在Web瀏覽器中。在FrontPage2003中，熱點的形狀可以是長方形、圓形或多邊形。例如我們通過山東省地圖瀏覽山東省各城市的民俗風(fēng)情，當(dāng)鼠標(biāo)移至地圖上的各個城市時，鼠標(biāo)指針變?yōu)槭中?，單擊后打開描述該城市民俗風(fēng)情的頁面。2）為圖片添加熱點12/7/202258——大學(xué)IT——第五十八頁，共九十九頁。為圖片添加熱點，具體操作步驟如下：（1）選擇需要添加熱點的圖片；（2）在“圖片”工具欄中，單擊長方形、圓形或多邊形熱點按鈕匹配需要的形狀；（3）在圖片上，采用鼠標(biāo)拖動操作畫出所選形狀（畫多邊形時，可單擊多邊形的第一個角，然后依次單擊多邊形其他角的位置，最后雙擊完成多邊形）；（4）釋放鼠標(biāo)，彈出“插入超鏈接”對話框，按照插入超鏈接中所講方法創(chuàng)建超鏈接即可。12/7/202259——大學(xué)IT——第五十九頁，共九十九頁。為圖片添加熱點

重復(fù)步驟（2）、（3）、（4），在圖片上依次創(chuàng)建超鏈接到其他網(wǎng)頁。當(dāng)鼠標(biāo)移動到熱點區(qū)域時，光標(biāo)變?yōu)槭中危缦聢D所示。單擊鼠標(biāo)，超鏈接的目標(biāo)網(wǎng)頁就會顯示在Web瀏覽器窗口中。返回12/7/202260——大學(xué)IT——第六十頁，共九十九頁。3.使用書簽超鏈接對于網(wǎng)頁的超鏈接，往往使用戶跳轉(zhuǎn)到目標(biāo)網(wǎng)頁的頂端，應(yīng)用書簽?zāi)軌蚋鼑?yán)格地控制用戶到達(dá)網(wǎng)頁內(nèi)的某個具體位置。書簽是網(wǎng)頁中被標(biāo)記的位置或被標(biāo)記的文本。1）插入書簽（1）選中作為書簽的文本，或?qū)⒐鈽?biāo)定位在要插入書簽的位置。（2）選擇“插入”菜單的“書簽”命令，彈出“書簽”對話框，如右圖所示，所選文本自動出現(xiàn)在“書簽名稱”框中。（3）單擊“確定”按鈕，插入書簽，可以看到所選文本下方出現(xiàn)虛線。12/7/202261——大學(xué)IT——第六十一頁，共九十九頁。2）創(chuàng)建書簽超鏈接（1）選定要定義超鏈接的文本或圖片；（2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框，如下圖所示，在對話框的“鏈接到”欄單擊“本文檔中的位置”，選擇要鏈接的書簽，單擊“確定”按鈕，插入書簽超鏈接。保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，單擊頁面中的書簽超鏈接，頁面會跳轉(zhuǎn)到書簽的位置。12/7/202262——大學(xué)IT——第六十二頁，共九十九頁。4.創(chuàng)建電子郵件超鏈接電子郵件超鏈接為用戶發(fā)送電子郵件提供了極大的方便，單擊電子郵件超鏈接后，允許用戶書寫電子郵件內(nèi)容，并發(fā)往指定的地址。具體操作步驟如下：（1）選擇作為電子郵件超鏈接的文本或圖片；（2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框；（3）在對話框的“鏈接到”欄單擊“電子郵件地址”，在“電子郵件地址”框中輸入所需電子郵件地址，還可以在“主題”框中鍵入電子郵件的主題；（4）單擊“確定”按鈕，完成電子郵件超鏈接的創(chuàng)建。返回12/7/202263——大學(xué)IT——第六十三頁，共九十九頁。5.創(chuàng)建下載文件超鏈接如果要在網(wǎng)站中提供資料下載功能，就需要創(chuàng)建下載鏈接，網(wǎng)站中每個用于下載的文件要對應(yīng)一個下載鏈接。具體操作步驟如下：（1）選擇作為文件超鏈接的文本或圖片；（2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框，在對話框中選擇要下載的文件；（3）單擊“確定”按鈕，完成文件超鏈接的創(chuàng)建。保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，單擊創(chuàng)建的文件超鏈接時，彈出“文件下載”對話框，如下圖所示，用戶可以根據(jù)需要打開或保存文件。返回12/7/202264——大學(xué)IT——第六十四頁，共九十九頁。8.4網(wǎng)頁布局網(wǎng)頁的布局設(shè)計，是將文字、圖片等網(wǎng)頁元素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中進(jìn)行視覺的關(guān)聯(lián)與配置，從而將設(shè)計意圖以視覺形式表現(xiàn)出來。網(wǎng)頁的布局一般使用表格或框架來實現(xiàn)。12/7/202265——大學(xué)IT——第六十五頁，共九十九頁。8.4網(wǎng)頁布局8.4.1創(chuàng)建和使用表格8.4.2創(chuàng)建和使用框架返回12/7/202266——大學(xué)IT——第六十六頁，共九十九頁。創(chuàng)建和使用表格

表格由單元格構(gòu)成的行和列組成，單元格中可以插入文本、圖片以及其他對象。利用表格可以有條理地排列數(shù)據(jù)或組織網(wǎng)頁布局。表格的行、列和單元格都可以進(jìn)行復(fù)制、粘貼，在表格中還可以插入表格，一層層的表格嵌套使設(shè)計更加方便。FrontPage2003提供了與Word字處理軟件類似的表格處理功能，在網(wǎng)頁中可以輕松地創(chuàng)建和編輯表格。12/7/202267——大學(xué)IT——第六十七頁，共九十九頁。1.創(chuàng)建表格創(chuàng)建表格有以下三種常用方法：（1）使用“表格”菜單的“插入”子菜單中的“表格”命令，可以對插入的表格進(jìn)行精確的設(shè)置，包括行和列的數(shù)目、對齊方式、單元格間距、單元格襯距、邊框粗細(xì)和背景等。（2）使用“常用”工具欄的“插入表格”按鈕，快速插入表格。（3）使用“表格”菜單的“繪制表格”命令，手動繪制表格。12/7/202268——大學(xué)IT——第六十八頁，共九十九頁。2.設(shè)置表格屬性插入表格后，為了使表格看上去更專業(yè)、更美觀，需要設(shè)置表格的屬性。（1）設(shè)置表格行數(shù)和列數(shù)。（2）設(shè)置表格布局，包括設(shè)置表格的對齊方式、浮動、寬度等。（3）在“粗細(xì)”數(shù)值框中輸入數(shù)值，即可設(shè)置表格邊框的粗細(xì)。（4）在背景區(qū)域，可以通過“顏色”框設(shè)置單一色彩的表格背景，也可選中“使用背景圖片”復(fù)選框，用“瀏覽”按鈕設(shè)置圖片作為表格的背景。12/7/202269——大學(xué)IT——第六十九頁，共九十九頁。3.設(shè)置單元格屬性將光標(biāo)放置在需要設(shè)置屬性的單元格中，使用“表格”菜單的“表格屬性”子菜單中的“單元格”命令，打開“單元格屬性”對話框，設(shè)置單元格屬性。在“背景”區(qū)域中可以設(shè)置單元格的背景顏色，或使用圖片作為背景。

在“布局”區(qū)域可以設(shè)置水平、垂直對齊方式，指定寬度、高度、標(biāo)題單元格，設(shè)置行跨距、列跨距等。在“邊框”區(qū)域中可以設(shè)置單元格邊框的顏色、亮邊框、暗邊框。12/7/202270——大學(xué)IT——第七十頁，共九十九頁。創(chuàng)建表格后，可以對表格單元格、行和列的布局和結(jié)構(gòu)進(jìn)行調(diào)整，以滿足不同的需要。如調(diào)整行、列或單元格；插入行、列或單元格；刪除行、列或單元格；合并、拆分單元格；平均分布行高、列寬；設(shè)置單元格屬性等。返回4.調(diào)整表格12/7/202271——大學(xué)IT——第七十一頁，共九十九頁。

創(chuàng)建和使用框架框架的使用是進(jìn)行網(wǎng)頁布局設(shè)計的一種重要手段?？蚣軐g覽器窗口劃分為幾個區(qū)域，每個框架中都可以顯示一個獨立的網(wǎng)頁。瀏覽器窗口中顯示的網(wǎng)頁實際是這些框架的集合，因此被稱為框架網(wǎng)頁。框架網(wǎng)頁并不包含顯示的內(nèi)容，只是記錄了該框架網(wǎng)頁包含幾個框架、其拆分方式以及每個框架中顯示哪個網(wǎng)頁（與其他網(wǎng)頁的超鏈接）等。12/7/202272——大學(xué)IT——第七十二頁，共九十九頁。

在FrontPage2003中，可以使用框架網(wǎng)頁布局模板輕松創(chuàng)建框架網(wǎng)頁。具體操作步驟如下：（1）單擊“文件”菜單的“新建”命令，在“新建”任務(wù)窗格中選擇“新建網(wǎng)頁”中的“其他網(wǎng)頁模板”。（2）在彈出的“網(wǎng)頁模板”對話框中，切換到“框架網(wǎng)頁”選項卡，選擇所需的模板，如“目錄”模板，可在“說明”及“預(yù)覽”區(qū)域查看該模板的說明及預(yù)覽圖。1.創(chuàng)建框架網(wǎng)頁12/7/202273——大學(xué)IT——第七十三頁，共九十九頁。（3）單擊“確定”按鈕，完成框架網(wǎng)頁的創(chuàng)建，如下圖所示；（4）每個框架中，單擊“設(shè)置初始網(wǎng)頁”按鈕可以建立與已經(jīng)存在網(wǎng)頁的超鏈接，從而在此框架中顯示該網(wǎng)頁；單擊“新建網(wǎng)頁”按鈕可以建立顯示在該框架中的新網(wǎng)頁。在該圖窗口底部新增了“無框架”視圖模式，可以為不支持框架的瀏覽器創(chuàng)建替代網(wǎng)頁。12/7/202274——大學(xué)IT——第七十四頁，共九十九頁。保存框架網(wǎng)頁需要保存框架和各個框架中的網(wǎng)頁。例如，使用“目錄”模板創(chuàng)建的框架網(wǎng)頁需要保存作為容器的框架網(wǎng)頁和分別顯示在兩個框架中的兩個網(wǎng)頁。具體操作步驟如下：（1）使用“文件”菜單的“保存”命令，或單擊“常用”工具欄的“保存”按鈕，彈出“另存為”對話框。（2）在“另存為”對話框右邊的框架網(wǎng)頁預(yù)覽圖中，深藍(lán)色的區(qū)域或邊框指明了框架中正在保存的網(wǎng)頁。進(jìn)行相應(yīng)設(shè)置后，單擊“保存”按鈕，該網(wǎng)頁保存完畢。（3）重復(fù)步驟（2），直至所有的框架網(wǎng)頁都保存完畢，如使用“目錄”模板創(chuàng)建的框架網(wǎng)頁需要保存三次。如果某個框架網(wǎng)頁通過單擊“設(shè)置初始網(wǎng)頁”按鈕建立與已經(jīng)存在網(wǎng)頁的超鏈接，則不會彈出“另存為”對話框保存該網(wǎng)頁。2.保存框架網(wǎng)頁12/7/202275——大學(xué)IT——第七十五頁，共九十九頁。當(dāng)使用模板創(chuàng)建的框架結(jié)構(gòu)不能滿足需要時，可以通過拆分框架制作出更為復(fù)雜的框架網(wǎng)頁。具體操作步驟如下：（1）選擇要拆分的框架，在“框架”菜單中選擇“拆分框架”命令，打開“拆分框架”對話框；（2）根據(jù)需要選擇“拆分為列”或“拆分成行”選項，單擊“確定”按鈕完成拆分。也可按住Ctrl鍵拖動框架的邊框?qū)崿F(xiàn)拆分框架。3.拆分框架12/7/202276——大學(xué)IT——第七十六頁，共九十九頁?？梢詮目蚣芙Y(jié)構(gòu)中刪除指定的框架。此時系統(tǒng)只是把框架從框架網(wǎng)頁中刪去，而此框架中的網(wǎng)頁文件仍然存在。刪除了一個框架后，其余框架會加寬以填充刪除框架留下的空間。若框架網(wǎng)頁只有一個框架，則不能刪除該框架。刪除框架的具體操作方法是：選擇要刪除的框架，在“框架”菜單中選擇“刪除框架”命令。4.刪除框架12/7/202277——大學(xué)IT——第七十七頁，共九十九頁。在框架網(wǎng)頁中可以設(shè)置框架的大小、框架的邊距和在框架中是否顯示滾動條等屬性。具體操作方法是：選擇框架，從“框架”菜單中選擇“框架屬性”命令，彈出“框架屬性”對話框，如右圖所示。

在“名稱”框中輸入新的框架名稱，即可對該框架進(jìn)行重命名。在“框架大小”區(qū)域中設(shè)置寬度和高度，可以改變框架的大小，也可用鼠標(biāo)拖動框架的邊框直接調(diào)整框架的寬度和高度。返回5.設(shè)置框架屬性12/7/202278——大學(xué)IT——第七十八頁，共九十九頁。6創(chuàng)建框架超鏈接框架超鏈接的使用使網(wǎng)頁之間的組織更加靈活、有效。1).創(chuàng)建框架超鏈接若要設(shè)置框架超鏈接，執(zhí)行下列操作：（1）選擇要創(chuàng)建超鏈接的文字或圖片，從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框；（2）在“插入超鏈接”對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊“目標(biāo)框架”按鈕，出現(xiàn)“目標(biāo)框架”對話框；（3）在“當(dāng)前框架網(wǎng)頁”區(qū)域中單擊要用作目標(biāo)的框架，單擊“確定”按鈕，返回到“插入超鏈接”對話框，在對話框底部標(biāo)簽“目標(biāo)框架”后顯示設(shè)置的目標(biāo)框架名稱；（4）單擊“確定”按鈕，完成框架超鏈接的創(chuàng)建。12/7/202279——大學(xué)IT——第七十九頁，共九十九頁。2).使用特殊的目標(biāo)框架在指定目標(biāo)框架時，除了當(dāng)前框架外，還提供了一些特殊的框架來創(chuàng)建不同效果的目標(biāo)框架。這些特殊框架位于“目標(biāo)框架”對話框的“公用的目標(biāo)區(qū)”區(qū)域中，有以下幾種：相同框架：將鏈接的網(wǎng)頁顯示在包含該超鏈接的同一個框架內(nèi)。整頁：將框架展開為整個窗口，顯示鏈接網(wǎng)頁。新建窗口：打開另外一個新窗口，顯示鏈接網(wǎng)頁。父框架：在當(dāng)前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁。返回12/7/202280——大學(xué)IT——第八十頁，共九十九頁。8.5創(chuàng)建表單頁面表單是Web服務(wù)器與客戶交互的手段。表單的作用就是收集用戶的輸入信息，從而實現(xiàn)網(wǎng)站與用戶的交互。例如，用戶可以用表單收集用戶的個人資料，也可以用表單設(shè)計一個訂貨單，讓用戶指定要購買的商品名稱、型號、數(shù)量等。12/7/202281——大學(xué)IT——第八十一頁，共九十九頁。8.5創(chuàng)建表單頁面8.5.1插入表單域8.5.2提交表單返回12/7/202282——大學(xué)IT——第八十二頁，共九十九頁。

插入表單域表單中至少要有一個供用戶輸入信息的域，一個用來把信息發(fā)送給服務(wù)器的“提交”按鈕，以及一個用來清除域中現(xiàn)有內(nèi)容的“重置”按鈕。當(dāng)用戶在表單中輸入信息，單擊“提交”按鈕后，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端程序?qū)@些信息進(jìn)行處理。使用“插入”菜單的“表單”子菜單的“表單”命令，將插入一個非常簡單的表單。該表單只有“提交”和“重置”兩個按鈕，但這是所有復(fù)雜表單的基礎(chǔ)，可以在其中插入更多的表單域。在FrontPage2003中，可以插入文本框、文本區(qū)、復(fù)選框、選項按鈕、分組框、下拉框、按鈕、高級按鈕等表單域。12/7/202283——大學(xué)IT——第八十三頁，共九十九頁。文本框用于讓用戶輸入一行文字。將光標(biāo)放在要插入文本框的位置，使用“插入”菜單的“表單”命令，再選擇“文本框”子命令，即可插入一個文本框，如下圖所示。要設(shè)置文本框的屬性，可以使用“格式”菜單中的“屬性”命令，也可以使用右鍵菜單中的“表單域?qū)傩浴泵睿蛑苯与p擊文本框，打開“文本框?qū)傩浴睂υ捒?。在“文本框?qū)傩浴睂υ捒蛑?，“名稱”用于設(shè)置該文本框的名稱，“初始值”用于設(shè)置文本框內(nèi)一開始顯示的內(nèi)容，“寬度”用于設(shè)置文本框所能輸入字符的個數(shù)，“密碼域”用于設(shè)置是否讓文本框內(nèi)輸入的字符可見。插入文本框時，若插入點在一個已有的表單內(nèi)，就把一個新的文本框插入到這個表單中。若插入點在表單之外，則創(chuàng)建的文本框包含“提交”和“重置”按鈕。1.插入文本框12/7/202284——大學(xué)IT——第八十四頁，共九十九頁。文本區(qū)和文本框類似，都用于輸入文本，不同之處在于文本區(qū)中可以接受多行文本。當(dāng)文本區(qū)中輸入內(nèi)容較多時，可以拖動上下滾動條。將光標(biāo)放在要插入文本區(qū)的位置，使用“插入”菜單的“表單”命令，再選擇“文本區(qū)”子命令，即可插入一個文本區(qū)，如下圖所示。文本區(qū)屬性與文本框?qū)傩曰鞠嗤?，還可以在“行數(shù)”框中設(shè)置該文本區(qū)包含的文本行數(shù)。2.插入文本區(qū)12/7/202285——大學(xué)IT——第八十五頁，共九十九頁。復(fù)選框是提供給用戶的一個選項，一般彼此獨立的多個復(fù)選框組成一組，用戶可以在其中任意選擇，也可以同時選中所有項，或一個都不選。將光標(biāo)放在要插入復(fù)選框的位置，使用“插入”菜單的“表單”命令，再選擇“復(fù)選框”子命令，插入一個復(fù)選框，最后在復(fù)選框旁鍵入文字進(jìn)行說明。如果需要插入多個復(fù)選框，重復(fù)以上操作即可。

“復(fù)選框?qū)傩浴睂υ捒蛉缬覉D所示，“名稱”用于設(shè)置復(fù)選框的名稱，“值”用于返回復(fù)選框是否已選中，“初始狀態(tài)”選項按鈕組用于設(shè)置初始狀態(tài)下該復(fù)選框是否被選中，默認(rèn)為“未選中”，“Tab鍵次序”表示當(dāng)按下Tab鍵切換輸入焦點時，該復(fù)選框所在的次序。3.插入復(fù)選框12/7/202286——大學(xué)IT——第八十六頁，共九十九頁。

選項按鈕與復(fù)選框類似，不同的是一組選項按鈕只能選中其中的一個，其外形是圓的。將光標(biāo)放在要插入選項按鈕的位置，使用“插入”菜單的“表單”命令，再選擇“選項按鈕”子命令，插入一個選項按鈕，最后在選項按鈕旁鍵入文字進(jìn)行說明。如果需要插入多個選項按鈕，重復(fù)以上操作即可。如下圖所示，插入四個選項按鈕供用戶評價自己的網(wǎng)頁。在“選項按鈕屬性”對話框中，“組名稱”用來設(shè)置此選項按鈕所屬組的名稱，如果把多個選項按鈕編成一組，必須使它們的組名稱相同。4.插入選項按鈕12/7/202287——大學(xué)IT——第八十七頁，共九十九頁。5.插入分組框如果要將一組相關(guān)的控件或文本與網(wǎng)頁或當(dāng)前表單中的其他信息分開，可以使用分組框。將光標(biāo)放在要插入分組框的位置，使用“插入”菜單的“表單”命令，再選擇“分組框”子命令，即可插入分組框。在“分組框?qū)傩浴睂υ捒蛑校皹?biāo)簽”用來設(shè)置分組框的名稱?！皩R”用來設(shè)置分組框標(biāo)簽的對齊方式。6.插入下拉框

下拉框用于從一個列表中選擇一項或幾項。從功能的角度講，可以用一組復(fù)選框或一組單選按鈕來實現(xiàn)，但下拉框占用的網(wǎng)頁空間相對較小。將光標(biāo)放在要插入下拉框的位置，使用“插入”菜單的“表單”命令，再選擇“下拉框”子命令，即可插入下拉框。在“下拉框?qū)傩浴睂υ捒蛑?，單擊“添加”按鈕，將打開“添加選項”對話框，可以設(shè)置選項名稱，指定選項的初始狀態(tài)是選中還是未選中。12/7/202288——大學(xué)IT——第八十八頁，共九十九頁。7．插入按鈕和高級按鈕

一個表單中至少要有一個“提交”按鈕和一個“重置”按鈕?！疤峤弧卑粹o的作用是把表單中的數(shù)據(jù)提交給Web服務(wù)器的表單處理程序，“重置”按鈕的作用是把表單中的數(shù)據(jù)清空，以便重新填寫。將光標(biāo)放在要插入按鈕的位置，使用“插入”菜單的“表單”命令，再選擇“按鈕”子命令，即可插入按鈕。在“按鈕屬性”對話框中可以設(shè)置按鈕的名稱、值/標(biāo)簽、按鈕類型等屬性。按鈕可以設(shè)置為“提交”、“重置”或普通按鈕，對于“提交”和“重置”按鈕來說，它們的動作是默認(rèn)的。高級按鈕的插入與屬性設(shè)置與普通按鈕基本相同，但是高級按鈕具備更加精確的控制按鈕屬性的能力。返回12/7/202289——大學(xué)IT——第八十九頁，共九十九頁。

提交表單用戶結(jié)束表單操作后，單擊“提交”按鈕，當(dāng)“提交”按鈕設(shè)置了表單結(jié)果送至何處后可以正常處理。表單處理程序?qū)Ρ韱蔚奶幚砜梢允菍⒈韱谓Y(jié)果保存為文件，或?qū)⒈韱谓Y(jié)果發(fā)送至一個電子郵件地址。1.將表單結(jié)果保存為文件在表單上單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇“表單屬性”命令，打開“表單屬性”對話框，如下圖所示。12/7/202290——大學(xué)IT——第九十頁，共九十九頁。2.將表單結(jié)果發(fā)送至電子郵件

也可以使用電子郵件發(fā)送表單結(jié)果，當(dāng)用戶提交表單時，就會向指定的電子郵件地址發(fā)送一個包含表單結(jié)果的郵件。打開“表單屬性”對話框，在“電子郵件地址”框中，輸入要向其發(fā)送表單結(jié)果的電子郵件地址。如果只想用電子郵件發(fā)送表單結(jié)果，而不想將其保存到文件中，可以清除文本框“文件名稱”。單擊“選項”按鈕，在“電子郵件結(jié)果”選項卡中可以設(shè)置接收結(jié)果的電子郵件地址、電子郵件格式、郵件標(biāo)題等選項。要使用FrontPage默認(rèn)的表單處理程序，Web服務(wù)器必須安