山東專升本指定用書石油大學(xué)教材課件第6章

1、大學(xué)IT第第 六六 章章 網(wǎng)網(wǎng) 頁頁 制制 作作 目 錄上一頁下一頁 結(jié) 束2021-11-111大學(xué)IT第六章 網(wǎng)頁制作6.1 HTML簡介簡介 6.2 FrontPage 2003概述概述 6.3 網(wǎng)頁制作網(wǎng)頁制作 6.4 網(wǎng)頁布局網(wǎng)頁布局 6.5 創(chuàng)建表單頁面創(chuàng)建表單頁面 6.6 網(wǎng)頁的發(fā)布網(wǎng)頁的發(fā)布 目 錄上一頁下一頁 結(jié) 束2021-11-112大學(xué)IT6.1 HTML簡介 HTML即即Hypertext Markup Language的縮寫。它使的縮寫。它使用一些約定的標(biāo)記（用一些約定的標(biāo)記（Tag）對文本進(jìn)行標(biāo)注，定義網(wǎng)頁）對文本進(jìn)行標(biāo)注，定義網(wǎng)頁的數(shù)據(jù)格式，描述的數(shù)據(jù)格式，描述

2、Web頁中的信息，控制文本的顯示。頁中的信息，控制文本的顯示。 我們把用我們把用HTML語言編寫的文件稱為語言編寫的文件稱為HTML文件。它文件。它通常被存儲在通常被存儲在Web服務(wù)器上，客戶端通過瀏覽器向服務(wù)器上，客戶端通過瀏覽器向Web服務(wù)器發(fā)出請求，服務(wù)器響應(yīng)請求并將服務(wù)器發(fā)出請求，服務(wù)器響應(yīng)請求并將HTML文件發(fā)送文件發(fā)送給瀏覽器，然后由瀏覽器對文件中的標(biāo)記作出相應(yīng)的解給瀏覽器，然后由瀏覽器對文件中的標(biāo)記作出相應(yīng)的解釋，以頁面的形式呈現(xiàn)在用戶屏幕上。因此，我們又把釋，以頁面的形式呈現(xiàn)在用戶屏幕上。因此，我們又把HTML文檔稱為網(wǎng)頁文檔稱為網(wǎng)頁 (Web Page)。 目 錄上一頁下一頁

3、 結(jié) 束2021-11-113大學(xué)IT6.1 HTML簡介HTML語言是一種標(biāo)記語言，簡單易學(xué)。語言是一種標(biāo)記語言，簡單易學(xué)。用用HTML語言編寫的網(wǎng)頁實(shí)際上是一種文本文件，語言編寫的網(wǎng)頁實(shí)際上是一種文本文件，它以它以.htm或或.html為擴(kuò)展名，我們可以使用任何為擴(kuò)展名，我們可以使用任何文本處理軟件（例如：記事本）編寫。文本處理軟件（例如：記事本）編寫。6.1.1 HTML語言概述語言概述6.1.2 HTML語言的基本語法語言的基本語法返 回 目 錄上一頁下一頁 結(jié) 束2021-11-114大學(xué)IT6.1.1 HTML語言概述 HTML語言是由世界性的標(biāo)準(zhǔn)化組織語言是由世界性的標(biāo)準(zhǔn)化組織W

4、3C（World Wide Web Consortium）制定的，通過）制定的，通過瀏覽瀏覽可以了解到可以了解到HTML標(biāo)準(zhǔn)的標(biāo)準(zhǔn)的最新動態(tài)。最新動態(tài)。下面介紹下面介紹HTML文件的基本構(gòu)成和文件的基本構(gòu)成和HTML文文件的層次結(jié)構(gòu)。件的層次結(jié)構(gòu)。 目 錄上一頁下一頁 結(jié) 束2021-11-115大學(xué)IT1. HTML文件的基本構(gòu)成文件的基本構(gòu)成 Internet中的每一個中的每一個HTML文件都包括文本內(nèi)文件都包括文本內(nèi)容和容和HTML標(biāo)記兩部分。其中，標(biāo)記兩部分。其中，HTML標(biāo)記負(fù)責(zé)標(biāo)記負(fù)責(zé)控制文本顯示的外觀和版式，并為瀏覽器指定各控制文本顯示的外觀和版式

5、，并為瀏覽器指定各種鏈接的圖像、聲音和其他對象的位置。多數(shù)種鏈接的圖像、聲音和其他對象的位置。多數(shù)HTML標(biāo)記的書寫格式如下：標(biāo)記的書寫格式如下：文本內(nèi)容文本內(nèi)容 標(biāo)記名寫在標(biāo)記名寫在“”內(nèi)。多數(shù)內(nèi)。多數(shù)HTML標(biāo)記同時具標(biāo)記同時具有起始和結(jié)束標(biāo)記，并且成對出現(xiàn)，但也有些有起始和結(jié)束標(biāo)記，并且成對出現(xiàn)，但也有些HTML標(biāo)記沒有結(jié)束標(biāo)記。另外，標(biāo)記沒有結(jié)束標(biāo)記。另外，HTML標(biāo)記不標(biāo)記不區(qū)分大小寫。區(qū)分大小寫。HTML文件的基本構(gòu)成文件的基本構(gòu)成 目 錄上一頁下一頁 結(jié) 束2021-11-116大學(xué)IT 某些某些HTML標(biāo)記還具有一些屬性，這些屬性指定標(biāo)記還具有一些屬性，這些屬性指定對象的特性，

6、如背景顏色、文本字體及大小、對對象的特性，如背景顏色、文本字體及大小、對齊方式等。屬性一般放在齊方式等。屬性一般放在“起始標(biāo)記起始標(biāo)記”中，格式中，格式如下：如下： 文本內(nèi)容文本內(nèi)容 其中標(biāo)記名和屬性之間用空格分隔。如果標(biāo)記其中標(biāo)記名和屬性之間用空格分隔。如果標(biāo)記有多種屬性，屬性之間也要用空格分隔。有多種屬性，屬性之間也要用空格分隔。 HTML文件的基本構(gòu)成文件的基本構(gòu)成 目 錄上一頁下一頁 結(jié) 束2021-11-117大學(xué)IT2. HTML網(wǎng)頁的結(jié)構(gòu)網(wǎng)頁的結(jié)構(gòu) 現(xiàn)在我們先看一個簡單的現(xiàn)在我們先看一個簡單的HTML文件，從中體會用文件，從中體會用HTML語言編寫網(wǎng)頁時的層次結(jié)構(gòu)。語言編寫網(wǎng)頁時

7、的層次結(jié)構(gòu)。 【例【例9-1】用】用HTML語言編寫一個簡單的網(wǎng)頁。語言編寫一個簡單的網(wǎng)頁。我的第一個我的第一個Web頁頁歡迎進(jìn)入歡迎進(jìn)入HTML世界！世界！這里我們首先介紹這里我們首先介紹HTML語言的基本知識和語法。語言的基本知識和語法。然后，講授如何使用然后，講授如何使用HTML語言編寫您的語言編寫您的Web頁面。頁面。 目 錄上一頁下一頁 結(jié) 束2021-11-118大學(xué)ITHTML語言概述 將上述代碼用文本編輯器編輯并保存為一個擴(kuò)將上述代碼用文本編輯器編輯并保存為一個擴(kuò)展名為展名為.htm的文件，雙擊該文件圖標(biāo)，在瀏覽器的文件，雙擊該文件圖標(biāo)，在瀏覽器中看到如下圖所示的結(jié)果。中看到如

8、下圖所示的結(jié)果。圖9-1 目 錄上一頁下一頁 結(jié) 束2021-11-119大學(xué)IT 從上例可以看出，一般從上例可以看出，一般HTML文件都是以文件都是以開頭，以開頭，以結(jié)束。其文件結(jié)構(gòu)由以結(jié)束。其文件結(jié)構(gòu)由以下兩部分組成：下兩部分組成：1）頭部（）頭部（Head） HTML文件的頭部由文件的頭部由和和標(biāo)記定標(biāo)記定義。通常情況下，文件的標(biāo)題、語言字符集信義。通常情況下，文件的標(biāo)題、語言字符集信息等都放在頭部信息中。最常用到的標(biāo)記是息等都放在頭部信息中。最常用到的標(biāo)記是，它用于定義網(wǎng)頁文件的標(biāo)題，它用于定義網(wǎng)頁文件的標(biāo)題，當(dāng)該網(wǎng)頁文件被打開后，網(wǎng)頁文件的標(biāo)題將出當(dāng)該網(wǎng)頁文件被打開后，網(wǎng)頁文件的標(biāo)題

9、將出現(xiàn)在瀏覽器的標(biāo)題欄中?，F(xiàn)在瀏覽器的標(biāo)題欄中。 目 錄上一頁下一頁 結(jié) 束2021-11-1110大學(xué)IT文件結(jié)構(gòu)2）正文主體（）正文主體（Body）正文主體是正文主體是HTML文件的核心內(nèi)容，由文件的核心內(nèi)容，由和和標(biāo)記定義。標(biāo)記定義。標(biāo)記具有一些常用的屬性，標(biāo)記具有一些常用的屬性，格式如下：格式如下：其中，其中，bgcolor為背景顏色，為背景顏色，color為文本顏色。為文本顏色。n為六為六位十六進(jìn)制數(shù)。位十六進(jìn)制數(shù)。如果網(wǎng)頁使用背景圖像，格式如下：如果網(wǎng)頁使用背景圖像，格式如下：HTML對格式的要求并不嚴(yán)格，當(dāng)對格式的要求并不嚴(yán)格，當(dāng)HTML文件被瀏覽文件被瀏覽器掃描時，所有包含在文

10、件中的空格、回車等均被忽器掃描時，所有包含在文件中的空格、回車等均被忽略。因此你可以將一行寫成兩行或多行，在瀏覽器中略。因此你可以將一行寫成兩行或多行，在瀏覽器中結(jié)果是相同的。結(jié)果是相同的。 返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1111大學(xué)IT6.1.2 HTML語言的基本語法1. 文本布局文本布局1）段落標(biāo)記）段落標(biāo)記標(biāo)記指定文檔中一個獨(dú)立的段落。通過設(shè)置標(biāo)記指定文檔中一個獨(dú)立的段落。通過設(shè)置align屬性，控制段落的對齊方式，其值可以是屬性，控制段落的對齊方式，其值可以是left、center、right、justify，分別表示左對齊、居中、右對，分別表示左對齊、居中、右對

11、齊和兩端對齊，默認(rèn)值為左對齊。齊和兩端對齊，默認(rèn)值為左對齊。使用格式如下：使用格式如下： 2）換行標(biāo)記）換行標(biāo)記 標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有起始標(biāo)記。標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有起始標(biāo)記。3）水平線標(biāo)記）水平線標(biāo)記水平線標(biāo)記水平線標(biāo)記用于在網(wǎng)頁中插入一條水平線。用于在網(wǎng)頁中插入一條水平線。 目 錄上一頁下一頁 結(jié) 束2021-11-1112大學(xué)IT2. 文字格式文字格式 HTML語言中用于文字格式化的標(biāo)記有：語言中用于文字格式化的標(biāo)記有： 1）標(biāo)題標(biāo)記）標(biāo)題標(biāo)記 格式為：格式為： 標(biāo)題文字內(nèi)容標(biāo)題文字內(nèi)容 其中其中n說明大小級別，取值范圍為說明大小級別，取值范圍為1到到6的數(shù)字。把的

12、數(shù)字。把標(biāo)題分為標(biāo)題分為 6級，即級，即h1h6，其中，其中h1文字最大，文字最大，h6文文字最小。字最小。 目 錄上一頁下一頁 結(jié) 束2021-11-1113大學(xué)IT2）字體標(biāo)記）字體標(biāo)記 字體標(biāo)記用來對文字格式進(jìn)行設(shè)置，主要具有以下屬性：字體標(biāo)記用來對文字格式進(jìn)行設(shè)置，主要具有以下屬性： （1）size屬性：用來控制文字的大小，格式如下：屬性：用來控制文字的大小，格式如下： 其中其中n的取值范圍為的取值范圍為17的數(shù)字，默認(rèn)值為的數(shù)字，默認(rèn)值為3。 標(biāo)記和標(biāo)記和標(biāo)記都可以控制文字的大小。一般情況下，標(biāo)記都可以控制文字的大小。一般情況下，文章的標(biāo)題最好由文章的標(biāo)題最好由標(biāo)記控制，而其余的文字

13、由標(biāo)記控制，而其余的文字由標(biāo)標(biāo)記控制。相比較而言，記控制。相比較而言，對字體的控制更加靈活。對字體的控制更加靈活。 （2）color屬性：用來控制文字的顏色，格式如下：屬性：用來控制文字的顏色，格式如下： 其中其中n是一個十六進(jìn)制的六位數(shù)。是一個十六進(jìn)制的六位數(shù)。（3）face屬性：用來指明文字使用的字體，格式如下：屬性：用來指明文字使用的字體，格式如下： 其中字體名的選擇由其中字體名的選擇由Windows操作系統(tǒng)安裝的字體決定。如：操作系統(tǒng)安裝的字體決定。如：宋體、楷體宋體、楷體_GB2312、Times New Roman、Arial等。等。文字格式文字格式 目 錄上一頁下一頁 結(jié) 束20

14、21-11-1114大學(xué)IT3）字形標(biāo)記）字形標(biāo)記 字形標(biāo)記用于設(shè)置文字的粗體、斜體、下字形標(biāo)記用于設(shè)置文字的粗體、斜體、下劃線、上標(biāo)、下標(biāo)等。劃線、上標(biāo)、下標(biāo)等。標(biāo)記格式標(biāo)記格式字形結(jié)果字形結(jié)果粗體粗體斜體斜體下劃線下劃線/SUP上標(biāo)上標(biāo)/SUB下標(biāo)下標(biāo)文字格式文字格式 目 錄上一頁下一頁 結(jié) 束2021-11-1115大學(xué)IT3. 插入圖片插入圖片 標(biāo)記將圖片插入網(wǎng)頁中，用于設(shè)置圖片的大小以及標(biāo)記將圖片插入網(wǎng)頁中，用于設(shè)置圖片的大小以及相鄰文字的排列方式。該標(biāo)記具有以下屬性：相鄰文字的排列方式。該標(biāo)記具有以下屬性：（1）src屬性：指明圖片文件所在的位置。格式如下：屬性：指明圖片文件所在的

15、位置。格式如下： 其中其中URL指圖片文件存放的位置。指圖片文件存放的位置。（2）alt屬性：圖片的文字說明，當(dāng)鼠標(biāo)指針指向圖片時，屬性：圖片的文字說明，當(dāng)鼠標(biāo)指針指向圖片時，該圖片的說明性文字彈出。格式如下：該圖片的說明性文字彈出。格式如下： （3）width和和height屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。屬性：設(shè)置圖片顯示區(qū)域的寬度和高度。格式如下：格式如下： 其中其中width和和height屬性的取值屬性的取值n1和和n2，可以是像素?cái)?shù)或百，可以是像素?cái)?shù)或百分比。分比。 目 錄上一頁下一頁 結(jié) 束2021-11-1116大學(xué)IT（4）border屬性：設(shè)置圖片文件的邊框。格式屬性：

16、設(shè)置圖片文件的邊框。格式如下：如下： 其中其中n為像素?cái)?shù)。為像素?cái)?shù)。（5）align屬性：設(shè)置圖片相對于文本的位置關(guān)屬性：設(shè)置圖片相對于文本的位置關(guān)系。格式為：系。格式為： 對齊方式可以是：對齊方式可以是：top（頂端對齊）、（頂端對齊）、middle（相對垂直居中）、（相對垂直居中）、bottom（相對底邊對齊）、（相對底邊對齊）、left（左對齊）、（左對齊）、right（右對齊）、（右對齊）、texttop（文（文本上方）等。本上方）等。插入圖片插入圖片 目 錄上一頁下一頁 結(jié) 束2021-11-1117大學(xué)IT4. 插入超鏈接插入超鏈接 在在HTML語言中，語言中，和和標(biāo)記用于設(shè)置網(wǎng)頁

17、中標(biāo)記用于設(shè)置網(wǎng)頁中的超鏈接，的超鏈接，href屬性指明被超鏈接的文件地址。格屬性指明被超鏈接的文件地址。格式如下：式如下： 超鏈接文本超鏈接文本 用于表示超鏈接的文本一般顯示為藍(lán)色并且加下用于表示超鏈接的文本一般顯示為藍(lán)色并且加下劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針指向該文本時，箭劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針指向該文本時，箭頭變?yōu)槭中危⒃跒g覽器的狀態(tài)欄中顯示該超鏈接頭變?yōu)槭中?，并在瀏覽器的狀態(tài)欄中顯示該超鏈接的地址。的地址。 若使用圖片做超鏈接，可使用如下格式完成：若使用圖片做超鏈接，可使用如下格式完成： 目 錄上一頁下一頁 結(jié) 束2021-11-1118大學(xué)IT5. 使用表格使用表格 在網(wǎng)頁中插

18、入一個表格，需要用到一組在網(wǎng)頁中插入一個表格，需要用到一組HTML標(biāo)記。定義表格的有關(guān)標(biāo)記如下：標(biāo)記。定義表格的有關(guān)標(biāo)記如下： 定義表格區(qū)域。定義表格區(qū)域。 定義表格標(biāo)題。定義表格標(biāo)題。 定義表格頭。定義表格頭。 定義表格行。定義表格行。 定義表格單元格。定義表格單元格。返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1119大學(xué)IT 常用的標(biāo)記屬性中，常用的標(biāo)記屬性中，border屬性用屬性用于設(shè)置表格邊框的寬度；于設(shè)置表格邊框的寬度；width、height屬性用于設(shè)置表格或單元格的寬度、高屬性用于設(shè)置表格或單元格的寬度、高度；度；cellspacing和和cellpadding屬性分別

19、用屬性分別用于設(shè)置單元格之間的間隙和單元格內(nèi)部于設(shè)置單元格之間的間隙和單元格內(nèi)部空白；空白；align屬性用于設(shè)置表格或單元格屬性用于設(shè)置表格或單元格的對齊方式；的對齊方式；bgcolor和和background屬性屬性分別用于設(shè)置表格的背景顏色和背景圖分別用于設(shè)置表格的背景顏色和背景圖像像。表格屬性表格屬性 目 錄上一頁下一頁 結(jié) 束2021-11-1120大學(xué)IT6.2 FrontPage 2003概述 雖然使用一般的文本編輯器就可以編寫雖然使用一般的文本編輯器就可以編寫HTML文檔，但是使用專門的文檔，但是使用專門的HTML編輯器或編輯器或Web創(chuàng)作工具往往更加方便。具有創(chuàng)作工具往往更加

20、方便。具有“所見即所得所見即所得”功能的功能的Web頁面創(chuàng)作工具可以使頁面創(chuàng)作工具可以使Web創(chuàng)作人員直創(chuàng)作人員直接面對接面對Web頁面進(jìn)行編輯修改，并且能立即看到頁面進(jìn)行編輯修改，并且能立即看到Web頁面的顯示效果。頁面的顯示效果。 FrontPage 2003是微軟公司開發(fā)的網(wǎng)頁制作是微軟公司開發(fā)的網(wǎng)頁制作和網(wǎng)站管理工具，它是和網(wǎng)站管理工具，它是Microsoft Office 2003的組的組件之一，與件之一，與Office的其他組件高度融合，界面友的其他組件高度融合，界面友好，功能強(qiáng)大，易學(xué)易用，是目前使用較為廣泛好，功能強(qiáng)大，易學(xué)易用，是目前使用較為廣泛的網(wǎng)頁制作、網(wǎng)站管理工具之一。

21、的網(wǎng)頁制作、網(wǎng)站管理工具之一。 目 錄上一頁下一頁 結(jié) 束2021-11-1121大學(xué)IT6.2 FrontPage 2003概述6.2.1 FrontPage 2003的主要功能的主要功能6.2.2 FrontPage 2003的啟動與退出的啟動與退出6.2.3 網(wǎng)頁與網(wǎng)站網(wǎng)頁與網(wǎng)站6.2.4 FrontPage 2003的網(wǎng)頁視圖模式的網(wǎng)頁視圖模式6.2.5 FrontPage 2003中的視圖中的視圖返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1122大學(xué)IT6.2.1 FrontPage 2003的主要功能 FrontPage 2003的主要功能是制作網(wǎng)頁和管理的主要功能是制作網(wǎng)

22、頁和管理站點(diǎn)。站點(diǎn)。 使用使用FrontPage 2003可以創(chuàng)建新的網(wǎng)頁，也可可以創(chuàng)建新的網(wǎng)頁，也可以打開并修改已經(jīng)存在的網(wǎng)頁。以打開并修改已經(jīng)存在的網(wǎng)頁。FrontPage 2003提供了多種編輯網(wǎng)頁的方式，不但可以直接修改提供了多種編輯網(wǎng)頁的方式，不但可以直接修改HTML，而且可以采用，而且可以采用“所見即所得所見即所得”的方式編的方式編輯網(wǎng)頁，還可以使用菜單命令插入各種網(wǎng)頁元素，輯網(wǎng)頁，還可以使用菜單命令插入各種網(wǎng)頁元素，使用對話框修改其屬性，十分靈活。使用對話框修改其屬性，十分靈活。 返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1123大學(xué)IT 在在FrontPage 2003

23、中，可以很容易地插入文本、中，可以很容易地插入文本、圖片、表格、組件等元素；可以使用主題和樣式圖片、表格、組件等元素；可以使用主題和樣式表、共享邊框、框架等管理網(wǎng)頁的外觀；還可以表、共享邊框、框架等管理網(wǎng)頁的外觀；還可以使用表單等元素設(shè)計(jì)出交互式網(wǎng)頁。使用表單等元素設(shè)計(jì)出交互式網(wǎng)頁。 FrontPage 2003提供了強(qiáng)大的站點(diǎn)管理功能。提供了強(qiáng)大的站點(diǎn)管理功能。一組相關(guān)網(wǎng)頁和有關(guān)文件組成一個站點(diǎn)，站點(diǎn)也一組相關(guān)網(wǎng)頁和有關(guān)文件組成一個站點(diǎn)，站點(diǎn)也是是FrontPage 2003對網(wǎng)站進(jìn)行管理的基本單位。對網(wǎng)站進(jìn)行管理的基本單位。在在FrontPage 2003中可以輕松實(shí)現(xiàn)設(shè)計(jì)、管理、中可以輕

24、松實(shí)現(xiàn)設(shè)計(jì)、管理、分析、發(fā)布和維護(hù)站點(diǎn)等工作。分析、發(fā)布和維護(hù)站點(diǎn)等工作。FrontPage 2003的主要功能 目 錄上一頁下一頁 結(jié) 束2021-11-1124大學(xué)IT6.2.3 網(wǎng)頁與網(wǎng)站 網(wǎng)頁是全球廣域網(wǎng)上的基本文檔，用網(wǎng)頁是全球廣域網(wǎng)上的基本文檔，用HTML書寫，通書寫，通常以常以.htm或或.html為擴(kuò)展名。網(wǎng)頁可以獨(dú)立存在，但常常作為擴(kuò)展名。網(wǎng)頁可以獨(dú)立存在，但常常作為網(wǎng)站的一部分。網(wǎng)站是一組相關(guān)網(wǎng)頁和有關(guān)文件的組合，為網(wǎng)站的一部分。網(wǎng)站是一組相關(guān)網(wǎng)頁和有關(guān)文件的組合，一般有一個特殊的網(wǎng)頁作為瀏覽的起始點(diǎn)，稱為主頁一般有一個特殊的網(wǎng)頁作為瀏覽的起始點(diǎn)，稱為主頁（Homepage

25、），用來引導(dǎo)用戶訪問其他網(wǎng)頁。），用來引導(dǎo)用戶訪問其他網(wǎng)頁。 網(wǎng)站通常位于網(wǎng)站通常位于Web服務(wù)器上，客戶機(jī)通過網(wǎng)絡(luò)向服務(wù)器上，客戶機(jī)通過網(wǎng)絡(luò)向Web服服務(wù)器發(fā)送請求，務(wù)器發(fā)送請求，Web服務(wù)器響應(yīng)客戶機(jī)的請求，并使用服務(wù)器響應(yīng)客戶機(jī)的請求，并使用HTTP協(xié)議將網(wǎng)頁和有關(guān)文件通過網(wǎng)絡(luò)傳送回客戶機(jī)，客戶協(xié)議將網(wǎng)頁和有關(guān)文件通過網(wǎng)絡(luò)傳送回客戶機(jī)，客戶機(jī)端使用網(wǎng)頁瀏覽器就能看到網(wǎng)頁的內(nèi)容了。機(jī)端使用網(wǎng)頁瀏覽器就能看到網(wǎng)頁的內(nèi)容了。 目 錄上一頁下一頁 結(jié) 束2021-11-1125大學(xué)IT網(wǎng)頁與網(wǎng)站在在FrontPage 2003中，可以建立和編輯獨(dú)立的網(wǎng)中，可以建立和編輯獨(dú)立的網(wǎng)頁，也可以設(shè)計(jì)和管

26、理站點(diǎn)。在站點(diǎn)中可以包含大量頁，也可以設(shè)計(jì)和管理站點(diǎn)。在站點(diǎn)中可以包含大量網(wǎng)頁和各種文件，甚至可以包含子站點(diǎn)，而且只有在網(wǎng)頁和各種文件，甚至可以包含子站點(diǎn)，而且只有在使用站點(diǎn)時，使用站點(diǎn)時，F(xiàn)rontPage 2003的許多特性才有效。的許多特性才有效。通常，在通常，在FrontPage 2003中建立的站點(diǎn)需要發(fā)布到中建立的站點(diǎn)需要發(fā)布到Internet中的中的Web服務(wù)器上，成為真正意義上的網(wǎng)站，服務(wù)器上，成為真正意義上的網(wǎng)站，Internet上的用戶才能訪問。有時，可以在同一臺計(jì)算機(jī)上上的用戶才能訪問。有時，可以在同一臺計(jì)算機(jī)上安裝安裝Web服務(wù)器端軟件，從而將站點(diǎn)發(fā)布到本機(jī)進(jìn)行測試。服

27、務(wù)器端軟件，從而將站點(diǎn)發(fā)布到本機(jī)進(jìn)行測試。用用FrontPage 2003也可以建立基于本地硬盤的站點(diǎn)，這也可以建立基于本地硬盤的站點(diǎn)，這種站點(diǎn)以本機(jī)文件夾的形式存在，不需要發(fā)布到服務(wù)器，這種站點(diǎn)以本機(jī)文件夾的形式存在，不需要發(fā)布到服務(wù)器，這時，需要服務(wù)器支持的功能是不可用的。時，需要服務(wù)器支持的功能是不可用的。返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1126大學(xué)IT6.2.4 FrontPage 2003的網(wǎng)頁視圖模式的網(wǎng)頁視圖模式 FrontPage 2003提供了四種網(wǎng)頁視圖模式：提供了四種網(wǎng)頁視圖模式： 設(shè)計(jì)視圖是打開網(wǎng)頁首先進(jìn)入的視圖，可以在其中設(shè)計(jì)視圖是打開網(wǎng)頁首先進(jìn)入的

28、視圖，可以在其中輸入文本、插入圖片、插入表格等，也可以任意進(jìn)行輸入文本、插入圖片、插入表格等，也可以任意進(jìn)行修改。修改。 代碼視圖中，用戶可以查看、編寫和編輯代碼視圖中，用戶可以查看、編寫和編輯HTML標(biāo)標(biāo)記。記。 預(yù)覽視圖中可以看到網(wǎng)頁在預(yù)覽視圖中可以看到網(wǎng)頁在Web瀏覽器中的大體顯瀏覽器中的大體顯示情況。示情況。 FrontPage 2003新增的拆分視圖將窗口工作區(qū)拆分成上、新增的拆分視圖將窗口工作區(qū)拆分成上、下兩部分，上半部分是代碼區(qū)，下半部分是設(shè)計(jì)區(qū)。無論對下兩部分，上半部分是代碼區(qū)，下半部分是設(shè)計(jì)區(qū)。無論對哪一個區(qū)域進(jìn)行修改，另一個區(qū)域都會做出相應(yīng)的改變。哪一個區(qū)域進(jìn)行修改，另一個

29、區(qū)域都會做出相應(yīng)的改變。返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1127大學(xué)IT6.2.5 FrontPage 2003中的視圖 FrontPage 2003提供了以下幾種視圖以方便用戶提供了以下幾種視圖以方便用戶對站點(diǎn)的管理，用戶可以在不同的視圖中進(jìn)行相應(yīng)對站點(diǎn)的管理，用戶可以在不同的視圖中進(jìn)行相應(yīng)的操作。的操作。1. 網(wǎng)頁視圖網(wǎng)頁視圖2. 文件夾視圖文件夾視圖3. 遠(yuǎn)程網(wǎng)站視圖遠(yuǎn)程網(wǎng)站視圖4. 報(bào)表視圖報(bào)表視圖5. 導(dǎo)航視圖導(dǎo)航視圖6. 超鏈接視圖超鏈接視圖7. 任務(wù)視圖任務(wù)視圖 目 錄上一頁下一頁 結(jié) 束2021-11-1128大學(xué)IT6.3 網(wǎng)網(wǎng) 頁頁 制制 作作Web站點(diǎn)的

30、開發(fā)，首先應(yīng)當(dāng)根據(jù)其用途進(jìn)站點(diǎn)的開發(fā)，首先應(yīng)當(dāng)根據(jù)其用途進(jìn)行規(guī)劃，確定站點(diǎn)結(jié)構(gòu)，在本地磁盤上創(chuàng)建站行規(guī)劃，確定站點(diǎn)結(jié)構(gòu)，在本地磁盤上創(chuàng)建站點(diǎn)，然后再建立網(wǎng)頁。點(diǎn)，然后再建立網(wǎng)頁。那么什么是那么什么是“站點(diǎn)站點(diǎn)”呢？呢？其實(shí)站點(diǎn)就是一組相關(guān)網(wǎng)頁和其他文件的其實(shí)站點(diǎn)就是一組相關(guān)網(wǎng)頁和其他文件的集合，這些網(wǎng)頁在集合，這些網(wǎng)頁在Internet中表現(xiàn)為一個完整中表現(xiàn)為一個完整結(jié)構(gòu)就稱為結(jié)構(gòu)就稱為“站點(diǎn)站點(diǎn)”。在。在FrontPage 2003中，中，站點(diǎn)以一個特殊文件夾的形式存儲。站點(diǎn)以一個特殊文件夾的形式存儲。 目 錄上一頁下一頁 結(jié) 束2021-11-1129大學(xué)IT6.3 網(wǎng) 頁 制 作6.3.

31、1 創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn)6.3.2 網(wǎng)頁編輯網(wǎng)頁編輯6.3.3 插入對象插入對象6.3.4 創(chuàng)建超鏈接創(chuàng)建超鏈接返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1130大學(xué)IT6.3.1 創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn) 使用使用FrontPage 2003的模板和向?qū)В脩艨梢暂p松地創(chuàng)的模板和向?qū)?，用戶可以輕松地創(chuàng)建出各種用途和風(fēng)格的站點(diǎn)。建出各種用途和風(fēng)格的站點(diǎn)。 新建站點(diǎn)時，可以根據(jù)自己的需求選擇不同的模板和新建站點(diǎn)時，可以根據(jù)自己的需求選擇不同的模板和向?qū)?。對于不同的模板和向?qū)?，其新建站點(diǎn)的步驟略有向?qū)Аτ诓煌哪０搴拖驅(qū)?，其新建站點(diǎn)的步驟略有不同。不同。 下面以下面以“由一個網(wǎng)頁組成的網(wǎng)站由一個網(wǎng)頁

32、組成的網(wǎng)站”模板為例，介紹新模板為例，介紹新建站點(diǎn)的方法。建站點(diǎn)的方法。（1）單擊）單擊“文件文件”菜單的菜單的“新建新建”命令，在命令，在“新建新建”任任務(wù)窗格中選擇務(wù)窗格中選擇“新建網(wǎng)站新建網(wǎng)站”中的中的“由一個網(wǎng)頁組成的網(wǎng)由一個網(wǎng)頁組成的網(wǎng)站站”；（2）在彈出的）在彈出的“網(wǎng)站模板網(wǎng)站模板”對話框的對話框的“指定新網(wǎng)站的位指定新網(wǎng)站的位置置”框中輸入新站點(diǎn)要保存的位置，也可使用框中輸入新站點(diǎn)要保存的位置，也可使用“瀏覽瀏覽”按鈕指定新站點(diǎn)的位置；按鈕指定新站點(diǎn)的位置； 目 錄上一頁下一頁 結(jié) 束2021-11-1131大學(xué)IT（3）單擊）單擊 “確定確定”按鈕，新建站點(diǎn)如下圖所按鈕，新建

33、站點(diǎn)如下圖所示示返 回該站點(diǎn)只有一個空白網(wǎng)頁該站點(diǎn)只有一個空白網(wǎng)頁index.htmindex.htm（主頁）和用（主頁）和用于存儲圖片的文件夾于存儲圖片的文件夾imagesimages，你可以打開，你可以打開index.htmindex.htm進(jìn)行編輯，也可以進(jìn)一步根據(jù)網(wǎng)站規(guī)劃進(jìn)行編輯，也可以進(jìn)一步根據(jù)網(wǎng)站規(guī)劃創(chuàng)建文件夾和新建其他網(wǎng)頁。創(chuàng)建文件夾和新建其他網(wǎng)頁。 選擇選擇“文件文件”菜單的菜單的“退出退出”命令，可以關(guān)閉命令，可以關(guān)閉FrontPage 2003FrontPage 2003。 目 錄上一頁下一頁 結(jié) 束2021-11-1132大學(xué)IT6.3.2 網(wǎng)頁編輯1. 新建網(wǎng)頁新建網(wǎng)頁

34、2. 打開打開/保存網(wǎng)頁保存網(wǎng)頁3. 預(yù)覽網(wǎng)頁預(yù)覽網(wǎng)頁4. 設(shè)置文字格式設(shè)置文字格式5. 設(shè)置段落格式設(shè)置段落格式6. 設(shè)置網(wǎng)頁屬性設(shè)置網(wǎng)頁屬性返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1133大學(xué)IT網(wǎng)頁編輯 要根據(jù)要根據(jù)“網(wǎng)頁模板網(wǎng)頁模板”創(chuàng)建一個新的網(wǎng)頁，可以創(chuàng)建一個新的網(wǎng)頁，可以按下面的步驟：按下面的步驟：（1）單擊）單擊“文件文件”菜單的菜單的“新建新建”命令，在命令，在“新建新建”任務(wù)窗格中選擇任務(wù)窗格中選擇“新建網(wǎng)頁新建網(wǎng)頁”中的中的“其其他網(wǎng)頁模板他網(wǎng)頁模板”。（2）在彈出的）在彈出的“網(wǎng)頁模板網(wǎng)頁模板”對話框中選擇所需對話框中選擇所需的網(wǎng)頁模板，可以在的網(wǎng)頁模板，可以

35、在“說明說明”及及“預(yù)覽預(yù)覽”區(qū)域查區(qū)域查看該模板的說明及預(yù)覽圖?？丛撃０宓恼f明及預(yù)覽圖。（3）單擊）單擊“確定確定”按鈕，系統(tǒng)新建一個基于所按鈕，系統(tǒng)新建一個基于所選模板的網(wǎng)頁。選模板的網(wǎng)頁。（4）單擊）單擊“文件文件”菜單，選擇菜單，選擇“保存保存”命令，命令，彈出彈出“另存為另存為”對話框。在此對話框中，輸對話框。在此對話框中，輸入文件名進(jìn)行保存。入文件名進(jìn)行保存。返 回1. 新建網(wǎng)頁新建網(wǎng)頁 目 錄上一頁下一頁 結(jié) 束2021-11-1134大學(xué)IT 在在FrontPage 2003中，編輯某個網(wǎng)頁之前，中，編輯某個網(wǎng)頁之前，需要先打開該網(wǎng)頁。打開網(wǎng)頁的方法有多種，需要先打開該網(wǎng)頁。打

36、開網(wǎng)頁的方法有多種，常用的有以下幾種：常用的有以下幾種：（1）使用）使用“文件文件”菜單的菜單的“打開打開”命令，或命令，或“常常用用”工具欄的工具欄的“打開打開”按鈕，在彈出的按鈕，在彈出的“打開文打開文件件”對話框中選擇相應(yīng)的網(wǎng)頁；對話框中選擇相應(yīng)的網(wǎng)頁；（2）如需要打開的文件已在打開的網(wǎng)站中，在文）如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標(biāo)即可將其打開。實(shí)際件夾視圖中雙擊該網(wǎng)頁圖標(biāo)即可將其打開。實(shí)際上，在其他視圖中雙擊網(wǎng)頁圖標(biāo)，同樣會打開指上，在其他視圖中雙擊網(wǎng)頁圖標(biāo)，同樣會打開指定網(wǎng)頁。定網(wǎng)頁。 要保存一個網(wǎng)頁，可以使用要保存一個網(wǎng)頁，可以使用“文件文件”菜單的菜單

37、的“保存保存”命令，或命令，或“常用常用”工具欄的工具欄的“保存保存”按按鈕，如需另存可使用鈕，如需另存可使用“文件文件”菜單的菜單的“另存為另存為”命令。命令。返 回2. 打開打開/保存網(wǎng)頁保存網(wǎng)頁網(wǎng)頁編輯 目 錄上一頁下一頁 結(jié) 束2021-11-1135大學(xué)IT網(wǎng)頁制作過程中，用戶可以切換到網(wǎng)頁制作過程中，用戶可以切換到“預(yù)覽預(yù)覽”視圖預(yù)覽網(wǎng)頁，也可以使用視圖預(yù)覽網(wǎng)頁，也可以使用“文件文件”菜單的菜單的“在瀏覽器中預(yù)覽在瀏覽器中預(yù)覽”命令預(yù)覽網(wǎng)頁。使用后者，命令預(yù)覽網(wǎng)頁。使用后者，系統(tǒng)會打開瀏覽器顯示網(wǎng)頁，如果該網(wǎng)頁尚未系統(tǒng)會打開瀏覽器顯示網(wǎng)頁，如果該網(wǎng)頁尚未保存，會彈出對話框提示用戶保

38、存網(wǎng)頁。保存，會彈出對話框提示用戶保存網(wǎng)頁。返 回3. 預(yù)覽網(wǎng)頁網(wǎng)頁編輯 目 錄上一頁下一頁 結(jié) 束2021-11-1136大學(xué)IT4. 設(shè)置文字格式 同其他同其他Microsoft Office組件一樣，在網(wǎng)頁中可以輸入文字，組件一樣，在網(wǎng)頁中可以輸入文字，復(fù)制、剪切和粘貼文字，設(shè)置文字格式，查找和替換文字等。復(fù)制、剪切和粘貼文字，設(shè)置文字格式，查找和替換文字等。 在在FrontPage 2003中，對文字的格式提供了相當(dāng)完整的設(shè)中，對文字的格式提供了相當(dāng)完整的設(shè)定功能，文字格式的變化也因此多種多樣?？梢允褂霉ぞ邫诙üδ?，文字格式的變化也因此多種多樣?？梢允褂霉ぞ邫谏系墓ぞ甙粹o或菜單命令快速

39、地改變文字的外觀。上的工具按鈕或菜單命令快速地改變文字的外觀。 設(shè)置文字格式的一般操作步驟是：選中文字，單擊設(shè)置文字格式的一般操作步驟是：選中文字，單擊“格式格式”菜單的菜單的“字體字體”命令，在彈出的命令，在彈出的“字體字體”對話框中設(shè)置字體對話框中設(shè)置字體的各種屬性，也可以使用的各種屬性，也可以使用“格式格式”工具欄中相應(yīng)的命令按鈕。工具欄中相應(yīng)的命令按鈕。 雖然可以設(shè)置各種美觀的字體，但是由于用戶只能使用本雖然可以設(shè)置各種美觀的字體，但是由于用戶只能使用本地計(jì)算機(jī)中安裝的字體顯示網(wǎng)頁，因此還是使用常見的字體地計(jì)算機(jī)中安裝的字體顯示網(wǎng)頁，因此還是使用常見的字體為好。為好。返 回網(wǎng)頁編輯 目

40、 錄上一頁下一頁 結(jié) 束2021-11-1137大學(xué)IT5. 設(shè)置段落格式設(shè)置段落格式 文字段落的格式編排對于一個網(wǎng)頁的外觀是至關(guān)重文字段落的格式編排對于一個網(wǎng)頁的外觀是至關(guān)重要的。要的。FrontPage 2003通過按通過按Enter鍵劃分段落。值得鍵劃分段落。值得注意的是，段落之間插入了一個空行。如果只是需要注意的是，段落之間插入了一個空行。如果只是需要換行，而不是另起一個段落，按換行，而不是另起一個段落，按Shift+Enter鍵即可。鍵即可。實(shí)際上，按實(shí)際上，按Enter鍵在鍵在HTML代碼中插入的是代碼中插入的是標(biāo)記，標(biāo)記，而按而按Shift+Enter鍵則插入的是鍵則插入的是標(biāo)記

41、。標(biāo)記。 段落格式主要包括對齊方式、縮進(jìn)和段落間距等。段落格式主要包括對齊方式、縮進(jìn)和段落間距等。設(shè)置段落格式的一般方法如下：設(shè)置段落格式的一般方法如下： 將插入點(diǎn)移動到要設(shè)置格式的段落中，或是選中該將插入點(diǎn)移動到要設(shè)置格式的段落中，或是選中該段落，單擊段落，單擊“格式格式”菜單的菜單的“段落段落”命令，在彈出的命令，在彈出的“段落段落”對話框中進(jìn)行各種段落格式屬性的設(shè)置。對話框中進(jìn)行各種段落格式屬性的設(shè)置。 返 回網(wǎng)頁編輯 目 錄上一頁下一頁 結(jié) 束2021-11-1138大學(xué)IT6. 設(shè)置網(wǎng)頁屬性設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性包括網(wǎng)頁的標(biāo)題、格式、頁邊距等。網(wǎng)頁屬性包括網(wǎng)頁的標(biāo)題、格式、頁邊距等。要

42、設(shè)置網(wǎng)頁屬性，用戶可以使用要設(shè)置網(wǎng)頁屬性，用戶可以使用“文件文件”菜單的菜單的“屬性屬性”命令，或者在網(wǎng)頁的任意地方單擊鼠標(biāo)右命令，或者在網(wǎng)頁的任意地方單擊鼠標(biāo)右鍵，在彈出的右鍵菜單中選擇鍵，在彈出的右鍵菜單中選擇“網(wǎng)頁屬性網(wǎng)頁屬性”命令，命令，F(xiàn)rontPage 2003將顯示將顯示“網(wǎng)頁屬性網(wǎng)頁屬性”對話框。對話框。網(wǎng)頁編輯 目 錄上一頁下一頁 結(jié) 束2021-11-1139大學(xué)IT1）“常規(guī)常規(guī)”屬性屬性 要設(shè)置網(wǎng)頁的要設(shè)置網(wǎng)頁的“常規(guī)常規(guī)”屬性，單擊屬性，單擊“網(wǎng)頁屬性網(wǎng)頁屬性”對話框的對話框的“常規(guī)常規(guī)”選項(xiàng)卡，如下圖所示。選項(xiàng)卡，如下圖所示?！皹?biāo)題標(biāo)題”框用于給出網(wǎng)頁的框用于給出網(wǎng)

43、頁的標(biāo)題，網(wǎng)頁標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。標(biāo)題，網(wǎng)頁標(biāo)題將顯示在瀏覽器的標(biāo)題欄中。“背景音樂背景音樂”框用于指定網(wǎng)頁的背景音樂，當(dāng)用瀏覽器打開網(wǎng)頁時，將自框用于指定網(wǎng)頁的背景音樂，當(dāng)用瀏覽器打開網(wǎng)頁時，將自動播放背景音樂。背景音樂區(qū)域的動播放背景音樂。背景音樂區(qū)域的“位置位置”框用于指定聲音框用于指定聲音文件的位置，用戶可以使用文件的位置，用戶可以使用“瀏覽瀏覽”按鈕選擇一個聲音文件；按鈕選擇一個聲音文件；“循環(huán)次數(shù)循環(huán)次數(shù)”框用于指定聲音要反復(fù)播放的次數(shù)，如果選中框用于指定聲音要反復(fù)播放的次數(shù)，如果選中“不限次數(shù)不限次數(shù)”復(fù)選框，表示一直不停地播放。復(fù)選框，表示一直不停地播放。網(wǎng)頁編輯 目

44、 錄上一頁下一頁 結(jié) 束2021-11-1140大學(xué)IT2）“格式格式”屬性屬性 要設(shè)置網(wǎng)頁的背景、顏色，可以使用要設(shè)置網(wǎng)頁的背景、顏色，可以使用“網(wǎng)頁網(wǎng)頁屬性屬性”對話框的對話框的“格式格式”選項(xiàng)卡，如下圖所示。選項(xiàng)卡，如下圖所示。 用戶可以選中用戶可以選中“背景圖片背景圖片”復(fù)選框，指定一復(fù)選框，指定一個圖片作為網(wǎng)頁的背景圖片。如果要將圖片按個圖片作為網(wǎng)頁的背景圖片。如果要將圖片按水印形式添加，需要選中水印形式添加，需要選中“使其成為水印使其成為水印”復(fù)復(fù)選框。通過單擊相應(yīng)的下拉列表框，可以設(shè)置選框。通過單擊相應(yīng)的下拉列表框，可以設(shè)置網(wǎng)頁的背景顏色、文本顏色以及超鏈接文字的網(wǎng)頁的背景顏色、

45、文本顏色以及超鏈接文字的顏色。當(dāng)同時設(shè)置背景圖片和背景顏色時，背顏色。當(dāng)同時設(shè)置背景圖片和背景顏色時，背景圖片將覆蓋背景色。景圖片將覆蓋背景色。返 回網(wǎng)頁編輯 目 錄上一頁下一頁 結(jié) 束2021-11-1141大學(xué)IT6.3.3 插入對象1.插入水平線插入水平線2.插入圖片插入圖片3.插入字幕插入字幕4.插入交互式按鈕插入交互式按鈕 5.插入站點(diǎn)計(jì)數(shù)器插入站點(diǎn)計(jì)數(shù)器 返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1142大學(xué)IT1.插入水平線插入水平線 在網(wǎng)頁中輸入文本內(nèi)容后，還可在不同的段落、行之在網(wǎng)頁中輸入文本內(nèi)容后，還可在不同的段落、行之間添加水平線，水平線將網(wǎng)頁分割成幾個部分，使得

46、網(wǎng)間添加水平線，水平線將網(wǎng)頁分割成幾個部分，使得網(wǎng)頁更具條理性。具體操作步驟如下：頁更具條理性。具體操作步驟如下： （1）在準(zhǔn)備插入水平線的位置設(shè)置插入點(diǎn)；）在準(zhǔn)備插入水平線的位置設(shè)置插入點(diǎn)； （2）單擊）單擊“插入插入”菜單的菜單的“水平線水平線”命令，插入水平命令，插入水平線。線。 要修改水平線的外觀，可以雙擊水平線，打開要修改水平線的外觀，可以雙擊水平線，打開“水平水平線屬性線屬性”對話框。對話框。“寬度寬度”框用于設(shè)置水平線的寬度，框用于設(shè)置水平線的寬度，“高度高度”框用于設(shè)置水平線的高度，框用于設(shè)置水平線的高度，“對齊方式對齊方式”用于用于設(shè)置水平線在網(wǎng)頁內(nèi)水平對齊的方式，設(shè)置水平線

47、在網(wǎng)頁內(nèi)水平對齊的方式，“顏色顏色”列表框列表框用于設(shè)置水平線的顏色，選中用于設(shè)置水平線的顏色，選中“實(shí)線（無陰影）實(shí)線（無陰影）”復(fù)選復(fù)選框時，水平線將被設(shè)成實(shí)心線。要為線條指定自定義樣框時，水平線將被設(shè)成實(shí)心線。要為線條指定自定義樣式或其他格式，可以使用式或其他格式，可以使用“樣式樣式”按鈕進(jìn)行設(shè)置。按鈕進(jìn)行設(shè)置。返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1143大學(xué)IT2. 插入圖片插入圖片 圖片可以使網(wǎng)頁變得生動活潑，并能吸引用戶的注意。圖片可以使網(wǎng)頁變得生動活潑，并能吸引用戶的注意。1）圖片文件的格式）圖片文件的格式 在在WWW上常用的圖像文件格式是上常用的圖像文件格式是JP

48、EG和和GIF，它們都，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸，因此被廣泛地應(yīng)用在因此被廣泛地應(yīng)用在Web站點(diǎn)的設(shè)計(jì)中。站點(diǎn)的設(shè)計(jì)中。GIF（Graphical Interchange Format，圖形交換格式）采，圖形交換格式）采用無損壓縮方式，其主要特征是支持動畫、透明度、圖形用無損壓縮方式，其主要特征是支持動畫、透明度、圖形漸進(jìn)，但漸進(jìn)，但GIF圖像包含的顏色不能超過圖像包含的顏色不能超過256種。種。JPEG（Joint Photograph Expert Group，聯(lián)合圖像專家組），聯(lián)合圖像專家組）格式是專為有幾百

49、萬種顏色的照片和圖形設(shè)計(jì)的，它采用格式是專為有幾百萬種顏色的照片和圖形設(shè)計(jì)的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。JPEG格式支持真彩色（格式支持真彩色（24位色），并且在壓縮大的圖像位色），并且在壓縮大的圖像方面已被證明很有效。方面已被證明很有效。 目 錄上一頁下一頁 結(jié) 束2021-11-1144大學(xué)IT2. 插入圖片插入圖片2）插入圖片的步驟）插入圖片的步驟（1）移動光標(biāo)至插入圖像的位置；）移動光標(biāo)至插入圖像的位置；（2）單擊）單擊“插入插入”菜單的菜單的“圖片圖片”命令，在子命令，在子菜單中選擇菜單中選擇“來自文件來自文件”

50、，彈出，彈出“圖片圖片”對話對話框；框；（3）利用）利用“圖片圖片”對話框選取需要插入的圖片對話框選取需要插入的圖片文件，單擊文件，單擊“插入插入”按鈕，即可將圖片插入網(wǎng)按鈕，即可將圖片插入網(wǎng)頁中。頁中。3）設(shè)置圖片屬性）設(shè)置圖片屬性 在在“圖片屬性圖片屬性”對話框的對話框的“外觀外觀”選項(xiàng)卡中，選項(xiàng)卡中，可以設(shè)置圖片的環(huán)繞方式、布局、大小等。可以設(shè)置圖片的環(huán)繞方式、布局、大小等。插入圖片插入圖片 目 錄上一頁下一頁 結(jié) 束2021-11-1145大學(xué)IT4）編輯圖片）編輯圖片可以使用可以使用“視圖視圖”菜單的菜單的“工具欄工具欄”命令中的命令中的“圖片圖片”子命令，使子命令，使“圖片圖片”工

51、具欄顯示在屏工具欄顯示在屏幕上。利用圖片工具欄，可以對圖片的亮度、幕上。利用圖片工具欄，可以對圖片的亮度、對比度進(jìn)行調(diào)整，可以旋轉(zhuǎn)、翻轉(zhuǎn)圖片，對圖對比度進(jìn)行調(diào)整，可以旋轉(zhuǎn)、翻轉(zhuǎn)圖片，對圖片進(jìn)行剪裁，設(shè)置透明顏色等操作。片進(jìn)行剪裁，設(shè)置透明顏色等操作。5）保存圖片）保存圖片插入圖片后保存網(wǎng)頁，如果圖片不在網(wǎng)站文件插入圖片后保存網(wǎng)頁，如果圖片不在網(wǎng)站文件夾中，將出現(xiàn)夾中，將出現(xiàn)“保存嵌入式文件保存嵌入式文件”對話框。如對話框。如果圖片在網(wǎng)站文件夾中，就不會出現(xiàn)此對話框。果圖片在網(wǎng)站文件夾中，就不會出現(xiàn)此對話框。返 回插入圖片插入圖片 目 錄上一頁下一頁 結(jié) 束2021-11-1146大學(xué)IT3.

52、插入字幕 在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字做成由左至在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字做成由左至右，或由右至左移動的動態(tài)效果，使網(wǎng)頁更加形象生右，或由右至左移動的動態(tài)效果，使網(wǎng)頁更加形象生動。具體操作步驟如下：動。具體操作步驟如下： （1）將插入點(diǎn)設(shè)置在要插入移動字幕的位置或者）將插入點(diǎn)設(shè)置在要插入移動字幕的位置或者選中作為移動字幕的文本，單擊選中作為移動字幕的文本，單擊“插入插入”菜單的菜單的“Web組件組件”命令，彈出命令，彈出“插入插入Web組件組件”對話框，對話框，在對話框的在對話框的“組件類型組件類型”列表框中選擇列表框中選擇“動態(tài)效果動態(tài)效果”，在在“選擇一種效果選擇一種效果”列表中

53、選擇列表中選擇“字幕字幕”，單擊，單擊“完完成成”按鈕，按鈕， “字幕屬性字幕屬性”對話框。對話框。 目 錄上一頁下一頁 結(jié) 束2021-11-1147大學(xué)IT（2）如果已經(jīng)選擇了作為移動字幕的文本，此文本）如果已經(jīng)選擇了作為移動字幕的文本，此文本就會出現(xiàn)在就會出現(xiàn)在“文本文本”框中，如果沒有選擇文本，可框中，如果沒有選擇文本，可在在“文本文本”框中輸入作為移動字幕的文本。框中輸入作為移動字幕的文本。 “字幕字幕屬性屬性”對話框如下圖所示：對話框如下圖所示： 插入字幕插入字幕2 目 錄上一頁下一頁 結(jié) 束2021-11-1148大學(xué)IT （3）“方向方向”區(qū)域用于指定文本的移動方向。區(qū)域用于指

54、定文本的移動方向?！八俣人俣取眳^(qū)域用于指定文字的滾動速度，區(qū)域用于指定文字的滾動速度，“延延遲遲”框中的數(shù)值表示字幕滾動一步的時間間隔框中的數(shù)值表示字幕滾動一步的時間間隔是多少毫秒，是多少毫秒，“數(shù)量數(shù)量”框中的數(shù)值表示字幕滾框中的數(shù)值表示字幕滾動一步的距離是多少像素。動一步的距離是多少像素?！氨憩F(xiàn)方式表現(xiàn)方式”區(qū)域區(qū)域用于指定文字的表現(xiàn)方式。選中用于指定文字的表現(xiàn)方式。選中“重復(fù)重復(fù)”區(qū)域區(qū)域的的“連續(xù)連續(xù)”復(fù)選框，移動字幕將連續(xù)滾動；若復(fù)選框，移動字幕將連續(xù)滾動；若要設(shè)置字幕滾動有限次數(shù)，可以取消選中要設(shè)置字幕滾動有限次數(shù)，可以取消選中“連連續(xù)續(xù)”復(fù)選框并輸入字幕重復(fù)的次數(shù)。復(fù)選框并輸入字

55、幕重復(fù)的次數(shù)。 （4）單擊）單擊“確定確定”按鈕，即可插入字幕。按鈕，即可插入字幕。返 回插入字幕插入字幕3 目 錄上一頁下一頁 結(jié) 束2021-11-1149大學(xué)IT4. 插入交互式按鈕交互式按鈕是一個動態(tài)按鈕，當(dāng)用戶將鼠標(biāo)交互式按鈕是一個動態(tài)按鈕，當(dāng)用戶將鼠標(biāo)指向交互式按鈕時，交互式按鈕會改變顏色或形指向交互式按鈕時，交互式按鈕會改變顏色或形狀。默認(rèn)情況下，交互式按鈕是一個帶有彩色方狀。默認(rèn)情況下，交互式按鈕是一個帶有彩色方框的文字按鈕，也可以應(yīng)用圖片創(chuàng)建交互式按鈕?？虻奈淖职粹o，也可以應(yīng)用圖片創(chuàng)建交互式按鈕。（1）將插入點(diǎn)設(shè)置在要插入交互式按鈕的位）將插入點(diǎn)設(shè)置在要插入交互式按鈕的位置，

56、單擊置，單擊“插入插入”菜單的菜單的“Web組件組件”命令，打命令，打開開“插入插入Web組件組件”對話框，在對話框的對話框，在對話框的“組件組件類型類型”列表框中選擇列表框中選擇“動態(tài)效果動態(tài)效果”，在，在“選擇一選擇一種效果種效果”列表中選擇列表中選擇“交互式按鈕交互式按鈕”，單擊，單擊“完完成成”按鈕，打開對話框。按鈕，打開對話框。 目 錄上一頁下一頁 結(jié) 束2021-11-1150大學(xué)IT（2）設(shè)置）設(shè)置按鈕按鈕字體字體圖像圖像（3）單擊）單擊“確定確定”按鈕，即可插入交互式按鈕。按鈕，即可插入交互式按鈕。 返 回插入交互式按鈕插入交互式按鈕2-3 目 錄上一頁下一頁 結(jié) 束2021-

57、11-1151大學(xué)IT5. 插入站點(diǎn)計(jì)數(shù)器插入站點(diǎn)計(jì)數(shù)器 （1）單擊）單擊“插入插入”菜單的菜單的“Web組件組件”命令，命令，打開打開“插入插入Web組件組件”對話框，在對話框的對話框，在對話框的“組件類型組件類型”列表框中選擇列表框中選擇“計(jì)數(shù)器計(jì)數(shù)器”，在，在“選擇計(jì)數(shù)器樣式選擇計(jì)數(shù)器樣式”列表中選擇一種樣式，單列表中選擇一種樣式，單擊擊“完成完成”按鈕，打開按鈕，打開“計(jì)數(shù)器屬性計(jì)數(shù)器屬性”對話框；對話框； （2）設(shè)置計(jì)數(shù)器屬性；）設(shè)置計(jì)數(shù)器屬性； （3）單擊）單擊“確定確定”按鈕，插入站點(diǎn)計(jì)數(shù)器。按鈕，插入站點(diǎn)計(jì)數(shù)器。返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1152大學(xué)IT

58、6.3.4 創(chuàng)建超鏈接Web網(wǎng)頁的強(qiáng)大之處就在于其超鏈接，使網(wǎng)頁的強(qiáng)大之處就在于其超鏈接，使用超鏈接能夠?qū)⒂贸溄幽軌驅(qū)nternet中的信息有機(jī)地組織中的信息有機(jī)地組織起來，使人們在豐富多彩的起來，使人們在豐富多彩的WWW世界輕松世界輕松地漫游。在瀏覽器中，超鏈接通常表現(xiàn)為與地漫游。在瀏覽器中，超鏈接通常表現(xiàn)為與普通文本或圖片不同的特點(diǎn)。將鼠標(biāo)移到一普通文本或圖片不同的特點(diǎn)。將鼠標(biāo)移到一個超鏈接上方時，鼠標(biāo)指針會變成手形。同個超鏈接上方時，鼠標(biāo)指針會變成手形。同時，與這個超鏈接相對應(yīng)的時，與這個超鏈接相對應(yīng)的URL會在窗口底會在窗口底部的狀態(tài)欄顯示出來。部的狀態(tài)欄顯示出來。 目 錄上一頁下

59、一頁 結(jié) 束2021-11-1153大學(xué)IT創(chuàng)建超鏈接1. 創(chuàng)建文本超鏈接創(chuàng)建文本超鏈接2. 創(chuàng)建圖片超鏈接創(chuàng)建圖片超鏈接3. 使用書簽超鏈接使用書簽超鏈接4. 創(chuàng)建電子郵件超鏈接創(chuàng)建電子郵件超鏈接5. 創(chuàng)建下載文件超鏈接創(chuàng)建下載文件超鏈接返 回 目 錄上一頁下一頁 結(jié) 束2021-11-1154大學(xué)IT1. 創(chuàng)建文本超鏈接文本超鏈接是指在文本上定義的超鏈接，單擊文本超文本超鏈接是指在文本上定義的超鏈接，單擊文本超鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標(biāo)。創(chuàng)建文本超鏈鏈接，會自動跳轉(zhuǎn)到指向的鏈接目標(biāo)。創(chuàng)建文本超鏈接的具體操作步驟如下：接的具體操作步驟如下：（1）選定要定義超鏈接的文本，從）選定要定義超

60、鏈接的文本，從“插入插入”菜單中選菜單中選擇擇“超鏈接超鏈接”命令，或單擊命令，或單擊“常用常用”工具欄上的工具欄上的“超超鏈接鏈接”按鈕按鈕 ，打開，打開“插入超鏈接插入超鏈接”對話框，如下圖所對話框，如下圖所示；示； 目 錄上一頁下一頁 結(jié) 束2021-11-1155大學(xué)IT （2）在）在“插入超鏈接插入超鏈接”對話框中選擇要鏈接的目對話框中選擇要鏈接的目標(biāo)網(wǎng)頁，單擊標(biāo)網(wǎng)頁，單擊“確定確定”按鈕，插入超鏈接，可以看按鈕，插入超鏈接，可以看到所選定的文本變?yōu)樗{(lán)色，并且?guī)в邢聞澗€，說明到所選定的文本變?yōu)樗{(lán)色，并且?guī)в邢聞澗€，說明選定的文本已經(jīng)被設(shè)置為超鏈接文本。選定的文本已經(jīng)被設(shè)置為超鏈接文本