1、第 九 章 網(wǎng) 頁 制 作 大學(xué)IT第 九 章 網(wǎng) 頁 制 作 大學(xué)IT第九章 網(wǎng)頁制作9.1 HTML簡介 9.2 FrontPage 2003概述 9.3 網(wǎng)頁制作 9.4 網(wǎng)頁布局 9.5 創(chuàng)建表單頁面 9.6 網(wǎng)頁的發(fā)布 10/12/20221大學(xué)IT第九章 網(wǎng)頁制作9.1 HTML簡介 10/10/2029.1 HTML簡介 HTML即Hypertext Markup Language的縮寫。它使用一些約定的標記（Tag）對文本進行標注，定義網(wǎng)頁的數(shù)據(jù)格式，描述Web頁中的信息，控制文本的顯示。 我們把用HTML語言編寫的文件稱為HTML文件。它通常被存儲在Web服務(wù)器上，客戶端通過

2、瀏覽器向Web服務(wù)器發(fā)出請求，服務(wù)器響應(yīng)請求并將HTML文件發(fā)送給瀏覽器，然后由瀏覽器對文件中的標記作出相應(yīng)的解釋，以頁面的形式呈現(xiàn)在用戶屏幕上。因此，我們又把HTML文檔稱為網(wǎng)頁 (Web Page)。 10/12/20222大學(xué)IT9.1 HTML簡介 HTML即Hypertext9.1 HTML簡介HTML語言是一種標記語言，簡單易學(xué)。用HTML語言編寫的網(wǎng)頁實際上是一種文本文件，它以.htm或.html為擴展名，我們可以使用任何文本處理軟件（例如：記事本）編寫。9.1.1 HTML語言概述9.1.2 HTML語言的基本語法返 回10/12/20223大學(xué)IT9.1 HTML簡介HTML

3、語言是一種標記語言，簡單易學(xué)。用9.1.1 HTML語言概述 HTML語言是由世界性的標準化組織W3C（World Wide Web Consortium）制定的，通過瀏覽可以了解到HTML標準的最新動態(tài)。下面介紹HTML文件的基本構(gòu)成和HTML文件的層次結(jié)構(gòu)。 10/12/20224大學(xué)IT9.1.1 HTML語言概述 HTML語言是由世界性的1. HTML文件的基本構(gòu)成 Internet中的每一個HTML文件都包括文本內(nèi)容和HTML標記兩部分。其中，HTML標記負責(zé)控制文本顯示的外觀和版式，并為瀏覽器指定各種鏈接的圖像、聲音和其他對象的位置。多數(shù)HTML標記的書寫格式如下：文本內(nèi)容 標記名

4、寫在“”內(nèi)。多數(shù)HTML標記同時具有起始和結(jié)束標記，并且成對出現(xiàn)，但也有些HTML標記沒有結(jié)束標記。另外，HTML標記不區(qū)分大小寫。HTML文件的基本構(gòu)成10/12/20225大學(xué)IT1. HTML文件的基本構(gòu)成HTML文件的基本構(gòu)成10/10 某些HTML標記還具有一些屬性，這些屬性指定對象的特性，如背景顏色、文本字體及大小、對齊方式等。屬性一般放在“起始標記”中，格式如下： 文本內(nèi)容 其中標記名和屬性之間用空格分隔。如果標記有多種屬性，屬性之間也要用空格分隔。 HTML文件的基本構(gòu)成10/12/20226大學(xué)IT 某些HTML標記還具有一些屬性，這些屬性指定對象的特性2. HTML網(wǎng)頁的結(jié)

5、構(gòu) 現(xiàn)在我們先看一個簡單的HTML文件，從中體會用HTML語言編寫網(wǎng)頁時的層次結(jié)構(gòu)。 【例9-1】用HTML語言編寫一個簡單的網(wǎng)頁。我的第一個Web頁歡迎進入HTML世界！這里我們首先介紹HTML語言的基本知識和語法。然后，講授如何使用HTML語言編寫您的Web頁面。10/12/20227大學(xué)IT2. HTML網(wǎng)頁的結(jié)構(gòu)10/10/20227大學(xué)ITHTML語言概述 將上述代碼用文本編輯器編輯并保存為一個擴展名為.htm的文件，雙擊該文件圖標，在瀏覽器中看到如下圖所示的結(jié)果。圖9-110/12/20228大學(xué)ITHTML語言概述 將上述代碼用文本編輯器編輯并保存為一 從上例可以看出，一般HTM

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

7、TML文件被瀏覽器掃描時，所有包含在文件中的空格、回車等均被忽略。因此你可以將一行寫成兩行或多行，在瀏覽器中結(jié)果是相同的。 返 回10/12/202210大學(xué)IT文件結(jié)構(gòu)2）正文主體（Body）返 回10/10/20229.1.2 HTML語言的基本語法1. 文本布局1）段落標記標記指定文檔中一個獨立的段落。通過設(shè)置align屬性，控制段落的對齊方式，其值可以是left、center、right、justify，分別表示左對齊、居中、右對齊和兩端對齊，默認值為左對齊。使用格式如下： 2）換行標記 標記可以強制文本換行。該標記只有起始標記。3）水平線標記水平線標記用于在網(wǎng)頁中插入一條水平線。10

8、/12/202211大學(xué)IT9.1.2 HTML語言的基本語法1. 文本布局10/102. 文字格式 HTML語言中用于文字格式化的標記有： 1）標題標記 格式為： 標題文字內(nèi)容 其中n說明大小級別，取值范圍為1到6的數(shù)字。把標題分為 6級，即h1h6，其中h1文字最大，h6文字最小。10/12/202212大學(xué)IT2. 文字格式10/10/202212大學(xué)IT2）字體標記 字體標記用來對文字格式進行設(shè)置，主要具有以下屬性： （1）size屬性：用來控制文字的大小，格式如下： 其中n的取值范圍為17的數(shù)字，默認值為3。 標記和標記都可以控制文字的大小。一般情況下，文章的標題最好由標記控制，而其

9、余的文字由標記控制。相比較而言，對字體的控制更加靈活。 （2）color屬性：用來控制文字的顏色，格式如下： 其中n是一個十六進制的六位數(shù)。（3）face屬性：用來指明文字使用的字體，格式如下： 其中字體名的選擇由Windows操作系統(tǒng)安裝的字體決定。如：宋體、楷體_GB2312、Times New Roman、Arial等。文字格式10/12/202213大學(xué)IT2）字體標記文字格式10/10/2022133）字形標記 字形標記用于設(shè)置文字的粗體、斜體、下劃線、上標、下標等。標記格式字形結(jié)果粗體斜體下劃線上標下標文字格式10/12/202214大學(xué)IT3）字形標記標記格式字形結(jié)果粗體/3.

10、插入圖片 標記將圖片插入網(wǎng)頁中，用于設(shè)置圖片的大小以及相鄰文字的排列方式。該標記具有以下屬性：（1）src屬性：指明圖片文件所在的位置。格式如下： 其中URL指圖片文件存放的位置。（2）alt屬性：圖片的文字說明，當(dāng)鼠標指針指向圖片時，該圖片的說明性文字彈出。格式如下： （3）width和height屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。格式如下： 其中width和height屬性的取值n1和n2，可以是像素數(shù)或百分比。10/12/202215大學(xué)IT3. 插入圖片10/10/202215大學(xué)IT（4）border屬性：設(shè)置圖片文件的邊框。格式如下： 其中n為像素數(shù)。（5）align屬性：設(shè)置圖

11、片相對于文本的位置關(guān)系。格式為： 對齊方式可以是：top（頂端對齊）、middle（相對垂直居中）、bottom（相對底邊對齊）、left（左對齊）、right（右對齊）、texttop（文本上方）等。插入圖片10/12/202216大學(xué)IT（4）border屬性：設(shè)置圖片文件的邊框。格式如下：插入圖4. 插入超鏈接 在HTML語言中，和標記用于設(shè)置網(wǎng)頁中的超鏈接，href屬性指明被超鏈接的文件地址。格式如下： 超鏈接文本 用于表示超鏈接的文本一般顯示為藍色并且加下劃線。在瀏覽器中，當(dāng)鼠標指針指向該文本時，箭頭變?yōu)槭中?，并在瀏覽器的狀態(tài)欄中顯示該超鏈接的地址。 若使用圖片做超鏈接，可使用如下格

12、式完成： 10/12/202217大學(xué)IT4. 插入超鏈接10/10/202217大學(xué)IT5. 使用表格 在網(wǎng)頁中插入一個表格，需要用到一組HTML標記。定義表格的有關(guān)標記如下： 定義表格區(qū)域。 定義表格標題。 定義表格頭。 定義表格行。 定義表格單元格。返 回10/12/202218大學(xué)IT5. 使用表格返 回10/10/202218大學(xué)IT 常用的標記屬性中，border屬性用于設(shè)置表格邊框的寬度；width、height屬性用于設(shè)置表格或單元格的寬度、高度；cellspacing和cellpadding屬性分別用于設(shè)置單元格之間的間隙和單元格內(nèi)部空白；align屬性用于設(shè)置表格或單元格的

13、對齊方式；bgcolor和background屬性分別用于設(shè)置表格的背景顏色和背景圖像。表格屬性10/12/202219大學(xué)IT 常用的標記屬性中，border屬性用于設(shè)置表格邊框的寬度；9.2 FrontPage 2003概述 雖然使用一般的文本編輯器就可以編寫HTML文檔，但是使用專門的HTML編輯器或Web創(chuàng)作工具往往更加方便。具有“所見即所得”功能的Web頁面創(chuàng)作工具可以使Web創(chuàng)作人員直接面對Web頁面進行編輯修改，并且能立即看到Web頁面的顯示效果。 FrontPage 2003是微軟公司開發(fā)的網(wǎng)頁制作和網(wǎng)站管理工具，它是Microsoft Office 2003的組件之一，與Of

14、fice的其他組件高度融合，界面友好，功能強大，易學(xué)易用，是目前使用較為廣泛的網(wǎng)頁制作、網(wǎng)站管理工具之一。10/12/202220大學(xué)IT9.2 FrontPage 2003概述 雖然使用一般的文9.2 FrontPage 2003概述9.2.1 FrontPage 2003的主要功能9.2.2 FrontPage 2003的啟動與退出9.2.3 網(wǎng)頁與網(wǎng)站9.2.4 FrontPage 2003的網(wǎng)頁視圖模式9.2.5 FrontPage 2003中的視圖返 回10/12/202221大學(xué)IT9.2 FrontPage 2003概述9.2.1 Fr9.2.1 FrontPage 2003的主

15、要功能 FrontPage 2003的主要功能是制作網(wǎng)頁和管理站點。 使用FrontPage 2003可以創(chuàng)建新的網(wǎng)頁，也可以打開并修改已經(jīng)存在的網(wǎng)頁。FrontPage 2003提供了多種編輯網(wǎng)頁的方式，不但可以直接修改HTML，而且可以采用“所見即所得”的方式編輯網(wǎng)頁，還可以使用菜單命令插入各種網(wǎng)頁元素，使用對話框修改其屬性，十分靈活。 返 回10/12/202222大學(xué)IT9.2.1 FrontPage 2003的主要功能 在FrontPage 2003中，可以很容易地插入文本、圖片、表格、組件等元素；可以使用主題和樣式表、共享邊框、框架等管理網(wǎng)頁的外觀；還可以使用表單等元素設(shè)計出交互式

16、網(wǎng)頁。 FrontPage 2003提供了強大的站點管理功能。一組相關(guān)網(wǎng)頁和有關(guān)文件組成一個站點，站點也是FrontPage 2003對網(wǎng)站進行管理的基本單位。在FrontPage 2003中可以輕松實現(xiàn)設(shè)計、管理、分析、發(fā)布和維護站點等工作。FrontPage 2003的主要功能10/12/202223大學(xué)IT 在FrontPage 2003中，可以很容易地插入文9.2.3 網(wǎng)頁與網(wǎng)站 網(wǎng)頁是全球廣域網(wǎng)上的基本文檔，用HTML書寫，通常以.htm或.html為擴展名。網(wǎng)頁可以獨立存在，但常常作為網(wǎng)站的一部分。網(wǎng)站是一組相關(guān)網(wǎng)頁和有關(guān)文件的組合，一般有一個特殊的網(wǎng)頁作為瀏覽的起始點，稱為主頁（

17、Homepage），用來引導(dǎo)用戶訪問其他網(wǎng)頁。 網(wǎng)站通常位于Web服務(wù)器上，客戶機通過網(wǎng)絡(luò)向Web服務(wù)器發(fā)送請求，Web服務(wù)器響應(yīng)客戶機的請求，并使用HTTP協(xié)議將網(wǎng)頁和有關(guān)文件通過網(wǎng)絡(luò)傳送回客戶機，客戶機端使用網(wǎng)頁瀏覽器就能看到網(wǎng)頁的內(nèi)容了。10/12/202224大學(xué)IT9.2.3 網(wǎng)頁與網(wǎng)站 網(wǎng)頁是全球廣域網(wǎng)上的基本文檔，用網(wǎng)頁與網(wǎng)站在FrontPage 2003中，可以建立和編輯獨立的網(wǎng)頁，也可以設(shè)計和管理站點。在站點中可以包含大量網(wǎng)頁和各種文件，甚至可以包含子站點，而且只有在使用站點時，F(xiàn)rontPage 2003的許多特性才有效。通常，在FrontPage 2003中建立的站點需要

18、發(fā)布到Internet中的Web服務(wù)器上，成為真正意義上的網(wǎng)站，Internet上的用戶才能訪問。有時，可以在同一臺計算機上安裝Web服務(wù)器端軟件，從而將站點發(fā)布到本機進行測試。用FrontPage 2003也可以建立基于本地硬盤的站點，這種站點以本機文件夾的形式存在，不需要發(fā)布到服務(wù)器，這時，需要服務(wù)器支持的功能是不可用的。返 回10/12/202225大學(xué)IT網(wǎng)頁與網(wǎng)站在FrontPage 2003中，可以建立和編輯獨9.2.4 FrontPage 2003的網(wǎng)頁視圖模式 FrontPage 2003提供了四種網(wǎng)頁視圖模式：設(shè)計視圖是打開網(wǎng)頁首先進入的視圖，可以在其中輸入文本、插入圖片、插

19、入表格等，也可以任意進行修改。代碼視圖中，用戶可以查看、編寫和編輯HTML標記。預(yù)覽視圖中可以看到網(wǎng)頁在Web瀏覽器中的大體顯示情況。 FrontPage 2003新增的拆分視圖將窗口工作區(qū)拆分成上、下兩部分，上半部分是代碼區(qū)，下半部分是設(shè)計區(qū)。無論對哪一個區(qū)域進行修改，另一個區(qū)域都會做出相應(yīng)的改變。返 回10/12/202226大學(xué)IT9.2.4 FrontPage 2003的網(wǎng)頁視圖模式 9.2.5 FrontPage 2003中的視圖 FrontPage 2003提供了以下幾種視圖以方便用戶對站點的管理，用戶可以在不同的視圖中進行相應(yīng)的操作。1. 網(wǎng)頁視圖2. 文件夾視圖3. 遠程網(wǎng)站視

20、圖4. 報表視圖5. 導(dǎo)航視圖6. 超鏈接視圖7. 任務(wù)視圖10/12/202227大學(xué)IT9.2.5 FrontPage 2003中的視圖 9.3 網(wǎng) 頁 制 作Web站點的開發(fā)，首先應(yīng)當(dāng)根據(jù)其用途進行規(guī)劃，確定站點結(jié)構(gòu)，在本地磁盤上創(chuàng)建站點，然后再建立網(wǎng)頁。那么什么是“站點”呢？其實站點就是一組相關(guān)網(wǎng)頁和其他文件的集合，這些網(wǎng)頁在Internet中表現(xiàn)為一個完整結(jié)構(gòu)就稱為“站點”。在FrontPage 2003中，站點以一個特殊文件夾的形式存儲。10/12/202228大學(xué)IT9.3 網(wǎng) 頁 制 作Web站點的開發(fā)，首先應(yīng)當(dāng)根據(jù)其用途9.3 網(wǎng) 頁 制 作9.3.1 創(chuàng)建站點9.3.2 網(wǎng)

21、頁編輯9.3.3 插入對象9.3.4 創(chuàng)建超鏈接返 回10/12/202229大學(xué)IT9.3 網(wǎng) 頁 制 作9.3.1 創(chuàng)建站點返 回10/9.3.1 創(chuàng)建站點 使用FrontPage 2003的模板和向?qū)?，用戶可以輕松地創(chuàng)建出各種用途和風(fēng)格的站點。 新建站點時，可以根據(jù)自己的需求選擇不同的模板和向?qū)?。對于不同的模板和向?qū)В湫陆ㄕ军c的步驟略有不同。 下面以“由一個網(wǎng)頁組成的網(wǎng)站”模板為例，介紹新建站點的方法。（1）單擊“文件”菜單的“新建”命令，在“新建”任務(wù)窗格中選擇“新建網(wǎng)站”中的“由一個網(wǎng)頁組成的網(wǎng)站”；（2）在彈出的“網(wǎng)站模板”對話框的“指定新網(wǎng)站的位置”框中輸入新站點要保存的位置，

22、也可使用“瀏覽”按鈕指定新站點的位置；10/12/202230大學(xué)IT9.3.1 創(chuàng)建站點 使用FrontPage 200（3）單擊 “確定”按鈕，新建站點如下圖所示返 回該站點只有一個空白網(wǎng)頁index.htm（主頁）和用于存儲圖片的文件夾images，你可以打開index.htm進行編輯，也可以進一步根據(jù)網(wǎng)站規(guī)劃創(chuàng)建文件夾和新建其他網(wǎng)頁。 選擇“文件”菜單的“退出”命令，可以關(guān)閉FrontPage 2003。10/12/202231大學(xué)IT（3）單擊 “確定”按鈕，新建站點如下圖所示返 回該站點只9.3.2 網(wǎng)頁編輯1. 新建網(wǎng)頁2. 打開/保存網(wǎng)頁3. 預(yù)覽網(wǎng)頁4. 設(shè)置文字格式5. 設(shè)

23、置段落格式6. 設(shè)置網(wǎng)頁屬性返 回10/12/202232大學(xué)IT9.3.2 網(wǎng)頁編輯1. 新建網(wǎng)頁返 回10/10/20網(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）單擊“文件”菜單，選擇“保存”命令，彈出“另存為”對話框。在此對話框中，輸入文件名進行保存。返 回1. 新建網(wǎng)頁10/12/202233大學(xué)IT網(wǎng)頁

24、編輯 要根據(jù)“網(wǎng)頁模板”創(chuàng)建一個新的網(wǎng)頁，可以按下 在FrontPage 2003中，編輯某個網(wǎng)頁之前，需要先打開該網(wǎng)頁。打開網(wǎng)頁的方法有多種，常用的有以下幾種：（1）使用“文件”菜單的“打開”命令，或“常用”工具欄的“打開”按鈕，在彈出的“打開文件”對話框中選擇相應(yīng)的網(wǎng)頁；（2）如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標即可將其打開。實際上，在其他視圖中雙擊網(wǎng)頁圖標，同樣會打開指定網(wǎng)頁。 要保存一個網(wǎng)頁，可以使用“文件”菜單的“保存”命令，或“常用”工具欄的“保存”按鈕，如需另存可使用“文件”菜單的“另存為”命令。返 回2. 打開/保存網(wǎng)頁網(wǎng)頁編輯10/12/202234

25、大學(xué)IT 在FrontPage 2003中，編輯某個網(wǎng)頁之前，網(wǎng)頁制作過程中，用戶可以切換到“預(yù)覽”視圖預(yù)覽網(wǎng)頁，也可以使用“文件”菜單的“在瀏覽器中預(yù)覽”命令預(yù)覽網(wǎng)頁。使用后者，系統(tǒng)會打開瀏覽器顯示網(wǎng)頁，如果該網(wǎng)頁尚未保存，會彈出對話框提示用戶保存網(wǎng)頁。返 回3. 預(yù)覽網(wǎng)頁網(wǎng)頁編輯10/12/202235大學(xué)IT網(wǎng)頁制作過程中，用戶可以切換到“預(yù)覽”視圖預(yù)覽網(wǎng)頁，也可以使4. 設(shè)置文字格式 同其他Microsoft Office組件一樣，在網(wǎng)頁中可以輸入文字，復(fù)制、剪切和粘貼文字，設(shè)置文字格式，查找和替換文字等。 在FrontPage 2003中，對文字的格式提供了相當(dāng)完整的設(shè)定功能，文字格

26、式的變化也因此多種多樣?？梢允褂霉ぞ邫谏系墓ぞ甙粹o或菜單命令快速地改變文字的外觀。 設(shè)置文字格式的一般操作步驟是：選中文字，單擊“格式”菜單的“字體”命令，在彈出的“字體”對話框中設(shè)置字體的各種屬性，也可以使用“格式”工具欄中相應(yīng)的命令按鈕。 雖然可以設(shè)置各種美觀的字體，但是由于用戶只能使用本地計算機中安裝的字體顯示網(wǎng)頁，因此還是使用常見的字體為好。返 回網(wǎng)頁編輯10/12/202236大學(xué)IT4. 設(shè)置文字格式 同其他Microsoft 5. 設(shè)置段落格式 文字段落的格式編排對于一個網(wǎng)頁的外觀是至關(guān)重要的。FrontPage 2003通過按Enter鍵劃分段落。值得注意的是，段落之間插入了一

27、個空行。如果只是需要換行，而不是另起一個段落，按Shift+Enter鍵即可。實際上，按Enter鍵在HTML代碼中插入的是標記，而按Shift+Enter鍵則插入的是標記。 段落格式主要包括對齊方式、縮進和段落間距等。設(shè)置段落格式的一般方法如下： 將插入點移動到要設(shè)置格式的段落中，或是選中該段落，單擊“格式”菜單的“段落”命令，在彈出的“段落”對話框中進行各種段落格式屬性的設(shè)置。 返 回網(wǎng)頁編輯10/12/202237大學(xué)IT5. 設(shè)置段落格式 文字段落的格式編排對于一個網(wǎng)頁的外6. 設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性包括網(wǎng)頁的標題、格式、頁邊距等。要設(shè)置網(wǎng)頁屬性，用戶可以使用“文件”菜單的“屬性”命令，

28、或者在網(wǎng)頁的任意地方單擊鼠標右鍵，在彈出的右鍵菜單中選擇“網(wǎng)頁屬性”命令，F(xiàn)rontPage 2003將顯示“網(wǎng)頁屬性”對話框。網(wǎng)頁編輯10/12/202238大學(xué)IT6. 設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性包括網(wǎng)頁的標題、格式、頁邊距等。要1）“常規(guī)”屬性 要設(shè)置網(wǎng)頁的“常規(guī)”屬性，單擊“網(wǎng)頁屬性”對話框的“常規(guī)”選項卡，如下圖所示?！皹祟}”框用于給出網(wǎng)頁的標題，網(wǎng)頁標題將顯示在瀏覽器的標題欄中?！氨尘耙魳贰笨蛴糜谥付ňW(wǎng)頁的背景音樂，當(dāng)用瀏覽器打開網(wǎng)頁時，將自動播放背景音樂。背景音樂區(qū)域的“位置”框用于指定聲音文件的位置，用戶可以使用“瀏覽”按鈕選擇一個聲音文件；“循環(huán)次數(shù)”框用于指定聲音要反復(fù)播放的次數(shù)

29、，如果選中“不限次數(shù)”復(fù)選框，表示一直不停地播放。網(wǎng)頁編輯10/12/202239大學(xué)IT1）“常規(guī)”屬性 要設(shè)置網(wǎng)頁的“常規(guī)”屬性，單擊“網(wǎng)2）“格式”屬性 要設(shè)置網(wǎng)頁的背景、顏色，可以使用“網(wǎng)頁屬性”對話框的“格式”選項卡，如下圖所示。 用戶可以選中“背景圖片”復(fù)選框，指定一個圖片作為網(wǎng)頁的背景圖片。如果要將圖片按水印形式添加，需要選中“使其成為水印”復(fù)選框。通過單擊相應(yīng)的下拉列表框，可以設(shè)置網(wǎng)頁的背景顏色、文本顏色以及超鏈接文字的顏色。當(dāng)同時設(shè)置背景圖片和背景顏色時，背景圖片將覆蓋背景色。返 回網(wǎng)頁編輯10/12/202240大學(xué)IT2）“格式”屬性 要設(shè)置網(wǎng)頁的背景、顏色，可以使用“網(wǎng)

30、9.3.3 插入對象1.插入水平線2.插入圖片3.插入字幕4.插入交互式按鈕 5.插入站點計數(shù)器 返 回10/12/202241大學(xué)IT9.3.3 插入對象1.插入水平線返 回10/10/201.插入水平線 在網(wǎng)頁中輸入文本內(nèi)容后，還可在不同的段落、行之間添加水平線，水平線將網(wǎng)頁分割成幾個部分，使得網(wǎng)頁更具條理性。具體操作步驟如下： （1）在準備插入水平線的位置設(shè)置插入點； （2）單擊“插入”菜單的“水平線”命令，插入水平線。 要修改水平線的外觀，可以雙擊水平線，打開“水平線屬性”對話框?！皩挾取笨蛴糜谠O(shè)置水平線的寬度，“高度”框用于設(shè)置水平線的高度，“對齊方式”用于設(shè)置水平線在網(wǎng)頁內(nèi)水平對齊

31、的方式，“顏色”列表框用于設(shè)置水平線的顏色，選中“實線（無陰影）”復(fù)選框時，水平線將被設(shè)成實心線。要為線條指定自定義樣式或其他格式，可以使用“樣式”按鈕進行設(shè)置。返 回10/12/202242大學(xué)IT1.插入水平線 在網(wǎng)頁中輸入文本內(nèi)容后，還可在不同的段2. 插入圖片 圖片可以使網(wǎng)頁變得生動活潑，并能吸引用戶的注意。1）圖片文件的格式 在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，因此被廣泛地應(yīng)用在Web站點的設(shè)計中。GIF（Graphical Interchange Format，圖形交換格式）采用無損壓縮方式，其主要特征是支持動畫、

32、透明度、圖形漸進，但GIF圖像包含的顏色不能超過256種。JPEG（Joint Photograph Expert Group，聯(lián)合圖像專家組）格式是專為有幾百萬種顏色的照片和圖形設(shè)計的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。JPEG格式支持真彩色（24位色），并且在壓縮大的圖像方面已被證明很有效。10/12/202243大學(xué)IT2. 插入圖片 圖片可以使網(wǎng)頁變得生動活潑，并能吸引用戶的2. 插入圖片2）插入圖片的步驟（1）移動光標至插入圖像的位置；（2）單擊“插入”菜單的“圖片”命令，在子菜單中選擇“來自文件”，彈出“圖片”對話框；（3）利用“圖片”對話框選取需要插入的圖片文件

33、，單擊“插入”按鈕，即可將圖片插入網(wǎng)頁中。3）設(shè)置圖片屬性 在“圖片屬性”對話框的“外觀”選項卡中，可以設(shè)置圖片的環(huán)繞方式、布局、大小等。插入圖片10/12/202244大學(xué)IT2. 插入圖片2）插入圖片的步驟插入圖片10/10/20224）編輯圖片可以使用“視圖”菜單的“工具欄”命令中的“圖片”子命令，使“圖片”工具欄顯示在屏幕上。利用圖片工具欄，可以對圖片的亮度、對比度進行調(diào)整，可以旋轉(zhuǎn)、翻轉(zhuǎn)圖片，對圖片進行剪裁，設(shè)置透明顏色等操作。5）保存圖片插入圖片后保存網(wǎng)頁，如果圖片不在網(wǎng)站文件夾中，將出現(xiàn)“保存嵌入式文件”對話框。如果圖片在網(wǎng)站文件夾中，就不會出現(xiàn)此對話框。返 回插入圖片10/12

34、/202245大學(xué)IT4）編輯圖片返 回插入圖片10/10/202245大學(xué)3. 插入字幕 在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字做成由左至右，或由右至左移動的動態(tài)效果，使網(wǎng)頁更加形象生動。具體操作步驟如下： （1）將插入點設(shè)置在要插入移動字幕的位置或者選中作為移動字幕的文本，單擊“插入”菜單的“Web組件”命令，彈出“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“動態(tài)效果”，在“選擇一種效果”列表中選擇“字幕”，單擊“完成”按鈕， “字幕屬性”對話框。10/12/202246大學(xué)IT3. 插入字幕 在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字（2）如果已經(jīng)選擇了作為移動字幕的文本，此文本就會出現(xiàn)

35、在“文本”框中，如果沒有選擇文本，可在“文本”框中輸入作為移動字幕的文本。 “字幕屬性”對話框如下圖所示： 插入字幕210/12/202247大學(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è)置字幕滾動有限次數(shù)，可以取消選中“連續(xù)”復(fù)選框并輸入字幕重復(fù)的次數(shù)。 （4）單擊“確定”按鈕，即可插入

36、字幕。返 回插入字幕310/12/202248大學(xué)IT （3）“方向”區(qū)域用于指定文本的移動方向。“速度”區(qū)域4. 插入交互式按鈕交互式按鈕是一個動態(tài)按鈕，當(dāng)用戶將鼠標指向交互式按鈕時，交互式按鈕會改變顏色或形狀。默認情況下，交互式按鈕是一個帶有彩色方框的文字按鈕，也可以應(yīng)用圖片創(chuàng)建交互式按鈕。（1）將插入點設(shè)置在要插入交互式按鈕的位置，單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“動態(tài)效果”，在“選擇一種效果”列表中選擇“交互式按鈕”，單擊“完成”按鈕，打開對話框。10/12/202249大學(xué)IT4. 插入交互式按鈕交互式按鈕是一個動

37、態(tài)按鈕，當(dāng)用戶將鼠標指（2）設(shè)置按鈕字體圖像（3）單擊“確定”按鈕，即可插入交互式按鈕。 返 回插入交互式按鈕2-310/12/202250大學(xué)IT（2）設(shè)置返 回插入交互式按鈕2-310/10/202255. 插入站點計數(shù)器 （1）單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“計數(shù)器”，在“選擇計數(shù)器樣式”列表中選擇一種樣式，單擊“完成”按鈕，打開“計數(shù)器屬性”對話框； （2）設(shè)置計數(shù)器屬性； （3）單擊“確定”按鈕，插入站點計數(shù)器。返 回10/12/202251大學(xué)IT5. 插入站點計數(shù)器 （1）單擊“插入”菜單的“Web組件9.3

38、.4 創(chuàng)建超鏈接Web網(wǎng)頁的強大之處就在于其超鏈接，使用超鏈接能夠?qū)nternet中的信息有機地組織起來，使人們在豐富多彩的WWW世界輕松地漫游。在瀏覽器中，超鏈接通常表現(xiàn)為與普通文本或圖片不同的特點。將鼠標移到一個超鏈接上方時，鼠標指針會變成手形。同時，與這個超鏈接相對應(yīng)的URL會在窗口底部的狀態(tài)欄顯示出來。 10/12/202252大學(xué)IT9.3.4 創(chuàng)建超鏈接Web網(wǎng)頁的強大之處就在于其超鏈接，創(chuàng)建超鏈接1. 創(chuàng)建文本超鏈接2. 創(chuàng)建圖片超鏈接3. 使用書簽超鏈接4. 創(chuàng)建電子郵件超鏈接5. 創(chuàng)建下載文件超鏈接返 回10/12/202253大學(xué)IT創(chuàng)建超鏈接1. 創(chuàng)建文本超鏈接返 回1

39、0/10/202251. 創(chuàng)建文本超鏈接文本超鏈接是指在文本上定義的超鏈接，單擊文本超鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標。創(chuàng)建文本超鏈接的具體操作步驟如下：（1）選定要定義超鏈接的文本，從“插入”菜單中選擇“超鏈接”命令，或單擊“常用”工具欄上的“超鏈接”按鈕 ，打開“插入超鏈接”對話框，如下圖所示；10/12/202254大學(xué)IT1. 創(chuàng)建文本超鏈接文本超鏈接是指在文本上定義的超鏈接，單擊 （2）在“插入超鏈接”對話框中選擇要鏈接的目標網(wǎng)頁，單擊“確定”按鈕，插入超鏈接，可以看到所選定的文本變?yōu)樗{色，并且?guī)в邢聞澗€，說明選定的文本已經(jīng)被設(shè)置為超鏈接文本。 保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，當(dāng)鼠標移

40、至鏈接文字時，鼠標指針變成手形，此時單擊鼠標就跳轉(zhuǎn)到目標網(wǎng)頁。創(chuàng)建文本超鏈接10/12/202255大學(xué)IT （2）在“插入超鏈接”對話框中選擇要鏈接的目標網(wǎng)頁 圖片超鏈接是指在圖片上創(chuàng)建的超鏈接，圖片超鏈接比文本超鏈接顯得更加生動活潑，單擊圖片超鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標?？梢詫⒄麄€圖片設(shè)置為超鏈接，也可以為圖片分配一個或多個熱點。熱點是圖片上的超鏈接區(qū)域，包含熱點的圖片稱為圖像映射，用戶單擊熱點區(qū)域可以轉(zhuǎn)到相應(yīng)的鏈接目標。2. 創(chuàng)建圖片超鏈接10/12/202256大學(xué)IT 圖片超鏈接是指在圖片上創(chuàng)建的超鏈接，圖片超鏈接比文本超鏈接 （1）選定要定義超鏈接的圖片，從“插入”菜單中選擇

41、“超鏈接”命令，或單擊“常用”工具欄上的“超鏈接”按鈕，打開“插入超鏈接”對話框； （2）在對話框中選擇要鏈接的目標網(wǎng)頁，單擊“確定”按鈕，即可插入超鏈接。 保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，當(dāng)鼠標移至鏈接圖片時，鼠標指針變成手形，此時單擊鼠標就跳轉(zhuǎn)到目標網(wǎng)頁。1）創(chuàng)建圖片超鏈接10/12/202257大學(xué)IT （1）選定要定義超鏈接的圖片，從“插入”菜單中選 熱點可以是圖片上具有某種形狀的一塊區(qū)域或文本，當(dāng)用戶單擊該區(qū)域或文本時，超鏈接目標會顯示在Web瀏覽器中。在FrontPage 2003中，熱點的形狀可以是長方形、圓形或多邊形。 例如我們通過山東省地圖瀏覽山東省各城市的民俗風(fēng)情，當(dāng)鼠標移至

42、地圖上的各個城市時，鼠標指針變?yōu)槭中?，單擊后打開描述該城市民俗風(fēng)情的頁面。2）為圖片添加熱點10/12/202258大學(xué)IT 熱點可以是圖片上具有某種形狀的一塊區(qū)域或文本，當(dāng)用戶為圖片添加熱點，具體操作步驟如下： （1）選擇需要添加熱點的圖片。 （2）在“圖片”工具欄中，單擊長方形、圓形或多邊形熱點按鈕匹配需要的形狀。 （3）在圖片上，采用鼠標拖動操作畫出所選形狀。畫多邊形時，可單擊多邊形的第一個角，然后依次單擊多邊形其他角的位置，最后雙擊完成多邊形。 （4）釋放鼠標，彈出“插入超鏈接”對話框，按照插入超鏈接中所講方法創(chuàng)建超鏈接即可。10/12/202259大學(xué)IT為圖片添加熱點，具體操作步驟

43、如下： （1）選擇需要添加為圖片添加熱點 重復(fù)步驟（2）、（3）、（4），在圖片上依次創(chuàng)建超鏈接到其他網(wǎng)頁。當(dāng)鼠標移動到熱點區(qū)域時，光標變?yōu)槭中?，如下圖所示。單擊鼠標，超鏈接的目標網(wǎng)頁就會顯示在Web瀏覽器窗口中。返 回10/12/202260大學(xué)IT為圖片添加熱點 重復(fù)步驟（2）、（3）、（4），在圖片3. 使用書簽超鏈接對于網(wǎng)頁的超鏈接，往往使用戶跳轉(zhuǎn)到目標網(wǎng)頁的頂端，應(yīng)用書簽?zāi)軌蚋鼑栏竦乜刂朴脩舻竭_網(wǎng)頁內(nèi)的某個具體位置。書簽是網(wǎng)頁中被標記的位置或被標記的文本。單擊書簽超鏈接，將直接跳轉(zhuǎn)到該書簽所在的位置。1）插入書簽（1）選中作為書簽的文本，或?qū)⒐鈽硕ㄎ辉谝迦霑灥奈恢谩＃?）選擇“插

44、入”菜單的“書簽”命令，彈出“書簽”對話框，如右圖所示，所選文本自動出現(xiàn)在“書簽名稱”框中。（3）單擊“確定”按鈕，插入書簽，可以看到所選文本下方出現(xiàn)虛線。10/12/202261大學(xué)IT3. 使用書簽超鏈接對于網(wǎng)頁的超鏈接，往往使用戶跳轉(zhuǎn)到目標網(wǎng)2）創(chuàng)建書簽超鏈接 （1）選定要定義超鏈接的文本或圖片； （2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框，如下圖所示，在對話框的“鏈接到”欄單擊“本文檔中的位置”，選擇要鏈接的書簽； （3）單擊“確定”按鈕，插入書簽超鏈接。 保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，單擊頁面中的書簽超鏈接，頁面會跳轉(zhuǎn)到書簽的位置。10/12/202262大學(xué)

45、IT2）創(chuàng)建書簽超鏈接10/10/202262大學(xué)IT4. 創(chuàng)建電子郵件超鏈接 電子郵件超鏈接為用戶發(fā)送電子郵件提供了極大的方便，單擊電子郵件超鏈接后，允許用戶書寫電子郵件內(nèi)容，并發(fā)往指定的地址。具體操作步驟如下： （1）選擇作為電子郵件超鏈接的文本或圖片； （2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框； （3）在對話框的“鏈接到”欄單擊“電子郵件地址”，在“電子郵件地址”框中輸入所需電子郵件地址，還可以在“主題”框中鍵入電子郵件的主題； （4）單擊“確定”按鈕，完成電子郵件超鏈接的創(chuàng)建。返 回10/12/202263大學(xué)IT4. 創(chuàng)建電子郵件超鏈接 電子郵件超鏈接為用戶

46、發(fā)送電子5. 創(chuàng)建下載文件超鏈接 如果要在網(wǎng)站中提供資料下載功能，就需要創(chuàng)建下載鏈接，網(wǎng)站中每個用于下載的文件要對應(yīng)一個下載鏈接。具體操作步驟如下： （1）選擇作為文件超鏈接的文本或圖片； （2）從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話 框，在對話框中選擇要下載的文件； （3）單擊“確定”按鈕，完成文件超鏈接的創(chuàng)建。 保存網(wǎng)頁，在瀏覽器中預(yù)覽效果，單擊創(chuàng)建的文件超鏈接時，彈出“文件下載”對話框，如下圖所示，用戶可以根據(jù)需要打開或保存文件。返 回10/12/202264大學(xué)IT5. 創(chuàng)建下載文件超鏈接 返 回10/10/2022649.4 網(wǎng) 頁 布 局 網(wǎng)頁的布局設(shè)計，是將文

47、字、圖片等網(wǎng)頁元素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中進行視覺的關(guān)聯(lián)與配置，從而將設(shè)計意圖以視覺形式表現(xiàn)出來。網(wǎng)頁的布局一般使用表格或框架來實現(xiàn)。10/12/202265大學(xué)IT9.4 網(wǎng) 頁 布 局 網(wǎng)頁的布局設(shè)計，是將文字、圖9.4 網(wǎng) 頁 布 局9.4.1 創(chuàng)建和使用表格9.4.2 創(chuàng)建框架9.4.3 創(chuàng)建框架超鏈接返 回10/12/202266大學(xué)IT9.4 網(wǎng) 頁 布 局9.4.1 創(chuàng)建和使用表格返 回9.4.1 創(chuàng)建和使用表格 表格由單元格構(gòu)成的行和列組成，單元格中可以插入文本、圖片以及其他對象。利用表格可以有條理地排列數(shù)據(jù)或組織網(wǎng)頁布局。表格的行、列和單元格都可以進行復(fù)制

48、、粘貼，在表格中還可以插入表格，一層層的表格嵌套使設(shè)計更加方便。FrontPage 2003提供了與Word字處理軟件類似的表格處理功能，在網(wǎng)頁中可以輕松地創(chuàng)建和編輯表格。10/12/202267大學(xué)IT9.4.1 創(chuàng)建和使用表格 表格由單元格構(gòu)成的行和1. 創(chuàng)建表格創(chuàng)建表格有以下三種常用方法： （1）使用“表格”菜單的“插入”子菜單中的“表格”命令，可以對插入的表格進行精確的設(shè)置，包括行和列的數(shù)目、對齊方式、單元格間距、單元格襯距、邊框粗細和背景等。 （2）使用“常用”工具欄的“插入表格”按鈕 ，快速插入表格。 （3）使用“表格”菜單的“繪制表格”命令，手動繪制表格。10/12/202268

49、大學(xué)IT1. 創(chuàng)建表格創(chuàng)建表格有以下三種常用方法：10/10/2022. 設(shè)置表格屬性 插入表格后，打開如下圖所示的“表格屬性”對話框，可以設(shè)置表格屬性。（1）設(shè)置表格行數(shù)和列數(shù)。（2）設(shè)置表格布局，包括設(shè)置表格的對齊方式、浮動、寬度等。（3）在“粗細”數(shù)值框中輸入數(shù)值，即可設(shè)置表格邊框的粗細。（4）在背景區(qū)域，可以通過“顏色”框設(shè)置單一色彩的表格背景，也可選中“使用背景圖片”復(fù)選框，用“瀏覽”按鈕設(shè)置圖片作為表格的背景。10/12/202269大學(xué)IT2. 設(shè)置表格屬性（1）設(shè)置表格行數(shù)和列數(shù)。10/10/203. 設(shè)置單元格屬性 將光標放置在需要設(shè)置屬性的單元格中，使用“表格”菜單的“表格

50、屬性”子菜單中的“單元格”命令，打開如下圖所示的“單元格屬性”對話框，設(shè)置單元格屬性。 在“背景”區(qū)域中可以設(shè)置單元格的背景顏色，或使用圖片作為背景。 在“布局”區(qū)域可以設(shè)置水平、垂直對齊方式，指定寬度、高度、標題單元格，設(shè)置行跨距、列跨距等。 在“邊框”區(qū)域中可以設(shè)置單元格邊框的顏色、亮邊框、暗邊框。10/12/202270大學(xué)IT3. 設(shè)置單元格屬性 在“背景”區(qū)域中可以設(shè)置創(chuàng)建表格后，可以對表格單元格、行和列的布局和結(jié)構(gòu)進行調(diào)整，以滿足不同的需要。如調(diào)整行、列或單元格；插入行、列或單元格；刪除行、列或單元格；合并、拆分單元格；平均分布行高、列寬；設(shè)置單元格屬性等。返 回4. 調(diào)整表格10

51、/12/202271大學(xué)IT創(chuàng)建表格后，可以對表格單元格、行和列的布局和結(jié)構(gòu)進行調(diào)整，以9.4.2 創(chuàng)建框架 框架的使用是進行網(wǎng)頁布局設(shè)計的一種重要手段?？蚣軐g覽器窗口劃分為幾個區(qū)域，每個框架中都可以顯示一個獨立的網(wǎng)頁。瀏覽器窗口中顯示的網(wǎng)頁實際是這些框架的集合，因此被稱為框架網(wǎng)頁。框架網(wǎng)頁并不包含顯示的內(nèi)容，只是記錄了該框架網(wǎng)頁包含幾個框架、其拆分方式以及每個框架中顯示哪個網(wǎng)頁（與其他網(wǎng)頁的超鏈接）等。10/12/202272大學(xué)IT9.4.2 創(chuàng)建框架 框架的使用是進行網(wǎng)頁布局設(shè)計的 在FrontPage 2003中，可以使用框架網(wǎng)頁布局模板輕松創(chuàng)建框架網(wǎng)頁。具體操作步驟如下： （1）單

52、擊“文件”菜單的“新建”命令，在“新建”任務(wù)窗格中選擇“新建網(wǎng)頁”中的“其他網(wǎng)頁模板”。 （2）在彈出的“網(wǎng)頁模板”對話框中，切換到“框架網(wǎng)頁”選項卡，選擇所需的模板，如“目錄”模板，可在“說明”及“預(yù)覽”區(qū)域查看該模板的說明及預(yù)覽圖。1. 創(chuàng)建框架網(wǎng)頁10/12/202273大學(xué)IT 在FrontPage 2003中，可以使用框架網(wǎng)頁布 （3）單擊“確定”按鈕，完成框架網(wǎng)頁的創(chuàng)建，如下圖所示； （4）每個框架中，單擊“設(shè)置初始網(wǎng)頁”按鈕可以建立與已經(jīng)存在網(wǎng)頁的超鏈接，從而在此框架中顯示該網(wǎng)頁；單擊“新建網(wǎng)頁”按鈕可以建立顯示在該框架中的新網(wǎng)頁。 創(chuàng)建框架網(wǎng)頁在該圖窗口底部新增了“無框架”視圖

53、模式，可以為不支持框架的瀏覽器創(chuàng)建替代網(wǎng)頁。10/12/202274大學(xué)IT （3）單擊“確定”按鈕，完成框架網(wǎng)頁的創(chuàng)建，如下圖所 保存框架網(wǎng)頁需要保存框架和各個框架中的網(wǎng)頁。例如，使用“目錄”模板創(chuàng)建的框架網(wǎng)頁需要保存作為容器的框架網(wǎng)頁和分別顯示在兩個框架中的兩個網(wǎng)頁。具體操作步驟如下： （1）使用“文件”菜單的“保存”命令，或單擊“常用”工具欄的“保存”按鈕，彈出“另存為”對話框。 （2）在“另存為”對話框右邊的框架網(wǎng)頁預(yù)覽圖中，深藍色的區(qū)域或邊框指明了框架中正在保存的網(wǎng)頁。進行相應(yīng)設(shè)置后，單擊“保存”按鈕，該網(wǎng)頁保存完畢。 （3）重復(fù)步驟（2），直至所有的框架網(wǎng)頁都保存完畢，如使用“目錄

54、”模板創(chuàng)建的框架網(wǎng)頁需要保存三次。如果某個框架網(wǎng)頁通過單擊“設(shè)置初始網(wǎng)頁”按鈕建立與已經(jīng)存在網(wǎng)頁的超鏈接，則不會彈出“另存為”對話框保存該網(wǎng)頁。2. 保存框架網(wǎng)頁10/12/202275大學(xué)IT 保存框架網(wǎng)頁需要保存框架和各個框架中的網(wǎng)頁。例如，使 當(dāng)使用模板創(chuàng)建的框架結(jié)構(gòu)不能滿足需要時，可以通過拆分框架制作出更為復(fù)雜的框架網(wǎng)頁。具體操作步驟如下： （1）選擇要拆分的框架，在“框架”菜單中選擇“拆分框架”命令，打開“拆分框架”對話框； （4）根據(jù)需要選擇“拆分為列”或“拆分成行”選項，單擊“確定”按鈕完成拆分。 也可按住Ctrl鍵拖動框架的邊框?qū)崿F(xiàn)拆分框架。3. 拆分框架10/12/20227

55、6大學(xué)IT 當(dāng)使用模板創(chuàng)建的框架結(jié)構(gòu)不能滿足需要時，可以通過拆分可以從框架結(jié)構(gòu)中刪除指定的框架。此時系統(tǒng)只是把框架從框架網(wǎng)頁中刪去，而此框架中的網(wǎng)頁文件仍然存在。刪除了一個框架后，其余框架會加寬以填充刪除框架留下的空間。若框架網(wǎng)頁只有一個框架，則不能刪除該框架。刪除框架的具體操作方法是：選擇要刪除的框架，在“框架”菜單中選擇“刪除框架”命令。4. 刪除框架10/12/202277大學(xué)IT可以從框架結(jié)構(gòu)中刪除指定的框架。此時系統(tǒng)只是把框架從框架網(wǎng)頁 在框架網(wǎng)頁中可以設(shè)置框架的大小、框架的邊距和在框架中是否顯示滾動條等屬性。具體操作方法是：選擇框架，從“框架”菜單中選擇“框架屬性”命令，彈出“框架

56、屬性”對話框，如右圖所示。 在“名稱”框中輸入新的框架名稱，即可對該框架進行重命名。 在“框架大小”區(qū)域中設(shè)置寬度和高度，可以改變框架的大小，也可用鼠標拖動框架的邊框直接調(diào)整框架的寬度和高度。返 回5. 設(shè)置框架屬性10/12/202278大學(xué)IT 在框架網(wǎng)頁中可以設(shè)置框架的大小、框架的邊距和在框架中9.4.3 創(chuàng)建框架超鏈接框架超鏈接的使用使網(wǎng)頁之間的組織更加靈活、有效。1. 創(chuàng)建框架超鏈接 若要設(shè)置框架超鏈接，執(zhí)行下列操作：（1）選擇要創(chuàng)建超鏈接的文字或圖片，從“插入”菜單中選擇“超鏈接”命令，彈出“插入超鏈接”對話框；（2）在“插入超鏈接”對話框中選擇要鏈接的目標網(wǎng)頁，單擊“目標框架”按

57、鈕，出現(xiàn)“目標框架”對話框；（3）在“當(dāng)前框架網(wǎng)頁”區(qū)域中單擊要用作目標的框架，單擊“確定”按鈕，返回到“插入超鏈接”對話框，在對話框底部標簽“目標框架”后顯示設(shè)置的目標框架名稱；（4）單擊“確定”按鈕，完成框架超鏈接的創(chuàng)建。10/12/202279大學(xué)IT9.4.3 創(chuàng)建框架超鏈接框架超鏈接的使用使網(wǎng)頁之間的組織2. 使用特殊的目標框架 在指定目標框架時，除了當(dāng)前框架外，還提供了一些特殊的框架來創(chuàng)建不同效果的目標框架。這些特殊框架位于“目標框架”對話框的“公用的目標區(qū)”區(qū)域中，有以下幾種：相同框架：將鏈接的網(wǎng)頁顯示在包含該超鏈接的同一個框架內(nèi)。整頁：將框架展開為整個窗口，顯示鏈接網(wǎng)頁。新建窗

58、口：打開另外一個新窗口，顯示鏈接網(wǎng)頁。父框架：在當(dāng)前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁。返 回10/12/202280大學(xué)IT2. 使用特殊的目標框架返 回10/10/2022809.5 創(chuàng)建表單頁面 表單是Web服務(wù)器與客戶交互的手段。表單的作用就是收集用戶的輸入信息，從而實現(xiàn)網(wǎng)站與用戶的交互。例如，用戶可以用表單收集用戶的個人資料，也可以用表單設(shè)計一個訂貨單，讓用戶指定要購買的商品名稱、型號、數(shù)量等。10/12/202281大學(xué)IT9.5 創(chuàng)建表單頁面 表單是Web服務(wù)器與客戶交互的9.5 創(chuàng)建表單頁面9.5.1 插入表單域9.5.2 提交表單返 回10/12/202282大學(xué)IT9.5 創(chuàng)建表

59、單頁面9.5.1 插入表單域返 回10/9.5.1 插入表單域 表單中至少要有一個供用戶輸入信息的域，一個用來把信息發(fā)送給服務(wù)器的“提交”按鈕，以及一個用來清除域中現(xiàn)有內(nèi)容的“重置”按鈕。當(dāng)用戶在表單中輸入信息，單擊“提交”按鈕后，這些信息將被發(fā)送到服務(wù)器，服務(wù)器端程序?qū)@些信息進行處理。使用“插入”菜單的“表單”子菜單的“表單”命令，將插入一個非常簡單的表單。該表單只有“提交”和“重置”兩個按鈕，但這是所有復(fù)雜表單的基礎(chǔ)，可以在其中插入更多的表單域。在FrontPage 2003中，可以插入文本框、文本區(qū)、復(fù)選框、選項按鈕、分組框、下拉框、按鈕、高級按鈕等表單域。10/12/202283大

60、學(xué)IT9.5.1 插入表單域 表單中至少要有一個供用戶輸入 文本框用于讓用戶輸入一行文字。將光標放在要插入文本框的位置，使用“插入”菜單的“表單”命令，再選擇“文本框”子命令，即可插入一個文本框，如下圖所示。 打開“文本框?qū)傩浴睂υ捒?，可以設(shè)置文本框的屬性。 “文本框?qū)傩浴睂υ捒蛑校懊Q”用來設(shè)置該文本框的名稱，“初始值”用于設(shè)置文本框內(nèi)一開始顯示的內(nèi)容，“寬度”用來設(shè)置文本框所能輸入字符的個數(shù)，“密碼域”用來設(shè)置是否讓文本框內(nèi)輸入的字符可見。 插入文本框時，若插入點在一個已有的表單內(nèi)，就把一個新的文本框插入到這個表單中。若插入點在表單之外，則創(chuàng)建的文本框包含“提交”和“重置”按鈕。1. 插