計算機基礎知識第9章.ppt

1、第九章網(wǎng)頁制作,第九章 網(wǎng)頁制作,9.1 HTML簡介 9.2 FrontPage概述 9.3網(wǎng)頁制作 9.4網(wǎng)頁布局 9.5創(chuàng)建表單頁面 9.6網(wǎng)頁的發(fā)布,9.1 HTML簡介,9.1.1 HTML語言概述 9.1.2 HTML語言的基本語法,9.1.1 HTML語言概述,HTML即HyperText Markup Language(超文本標記語言) 的縮寫。使用一些約定的標記（Tag）對文本進行標注，定義網(wǎng)頁的數(shù)據(jù)格式，描述Web頁中的信息，控制文本的顯示。 用HTML語言編寫的文件稱為HTML文件（網(wǎng)頁）。通常被存儲在Web服務器上，客戶端通過瀏覽器向Web服務器發(fā)出請求，服務器響應請求

2、并將HTML文件發(fā)送給瀏覽器，然后由瀏覽器對文件中的標記作出相應的解釋，以頁面的形式呈現(xiàn)在用戶屏幕上。因此，把HTML文檔在Web瀏覽器中的這種表現(xiàn)形式稱為Web頁面 (Web Page)。,HTML語言概述,HTML語言是一種標記語言。用HTML語言編寫的網(wǎng)頁實際上是一種文本文件，以.htm或.html為擴展名，可以使用任何文本處理軟件（例如：記事本）編寫。 HTML語言是由世界性的標準化組織W3C（World Wide Web Consortium）制定的。通過瀏覽可以了解到HTML標準的最新動態(tài)。,1. HTML文件的基本構成,每一個HTML文件都包括文本

3、內(nèi)容和HTML標記兩部分。其中，HTML標記負責控制文本顯示的外觀和版式，并為瀏覽器指定各種鏈接的圖像、聲音和其他對象的位置。多數(shù)HTML標記的書寫格式如下： 文本內(nèi)容 標記名寫在“”內(nèi)。多數(shù)HTML標記同時具有起始和結束標記，并且成對出現(xiàn)，但也有些HTML標記沒有結束標記。另外，HTML標記不區(qū)分大小寫。,1. HTML文件的基本構成,某些HTML標記還具屬性。這些屬性指定對象的特性，如背景顏色、文本字體大小、對齊方式等。屬性一般放在“起始標記”中，格式如下： 文本內(nèi)容 其中標記名和屬性之間用空格分隔。如果標記有多種屬性，屬性之間也要用空格分開。,2. HTML網(wǎng)頁的結構,【例9-1】用HT

4、ML語言編寫一個簡單的網(wǎng)頁。 我的第一個Web頁 歡迎進入HTML世界！ 這里我們首先介紹HTML語言的基本知識和語法。然后，講授如何使用HTML語言編寫您的Web頁面。 ,HTML語言概述,將上述代碼用文本編輯器（如記事本）編輯并保存為一個擴展名為.htm的文件，雙擊該文件圖標，在瀏覽器中看到結果?；蚣尤氲紽rontPage中的“代碼”頁在“預覽”頁或“設計”頁中觀察結果。,HTML語言概述,1）頭部（Head） HTML文件的頭部由和標記定義。文件的標題、語言字符集信息等都放在頭部信息中。 最常用到的標記是，它用于定義網(wǎng)頁文件的標題，當該網(wǎng)頁文件被打開后，網(wǎng)頁文件的標題將出現(xiàn)在瀏覽器的標題

5、欄中（見前頁）。,HTML語言概述,2）正文主體（Body） 正文主體是HTML文件的核心內(nèi)容，由和標記定義。標記具有一些常用的屬性，格式如下： 其中，bgcolor為背景顏色，color為文本顏色。n為六位十六進制數(shù)。 如果網(wǎng)頁使用背景圖像，格式為： HTML對格式的要求并不嚴格，當HTML文件被瀏覽器掃描時，所有包含在文件中的空格、回車等均被忽略了。因此你可以將一行寫成兩行或多行，在瀏覽器中結果是相同的。,9.1.2 HTML語言的基本語法,1. 文本布局 2. 文字格式,1. 文本布局,1）段落標記 標記指定文檔中一個獨立的段落。通過設置align屬性，控制段落的對齊方式，其值可以是le

6、ft、center、right、 justify ，分別表示左對齊、居中和右對齊和兩端對齊，默認值為左對齊。 使用格式如下： 標記定義的兩個段落之間留有一個空行。 2）換行標記 標記可以強制文本換行。該標記只有開始標記。 3）水平線標記 水平線標記用于在網(wǎng)頁中插入一條水平線。 例如表示插入紅色水平線,2. 文字格式,HTML語言中用于文字格式化的標記有： 1）標題標記 格式為： 標題文字內(nèi)容 其中n說明大小級別，取值范圍為1到6的數(shù)字。把標題分為 6級，即h1h6，其中h1文字最大，h6文字最小。,2. 文字格式,2）字體標記字體標記用來對文字格式進行設置，主要具有以下屬性： （1）size屬

7、性用來控制文字的大小，其格式為： 其中n的取值范圍為17的數(shù)字，默認值為3。 標記和標記都可以控制文字的大小。一般情況下，文章的標題最好由標記控制，而其余的文字由標記控制。相比較而言，對字體的控制更加靈活。 （2）color屬性用來控制文字的顏色，其格式為： 其中n是一個十六進制的六位數(shù)。 （3）face屬性用來指明文字使用的字體，其格式為： 其中，字體名的選擇由Windows操作系統(tǒng)安裝的字體決定。如：宋體、楷體_GB2312、Times New Roman、Arial等。,2. 文字格式,3）字形標記 字形標記用于設置文字的粗體、斜體、上標、下標、下劃線等，如下表所示。,3. 插入圖片,標

8、記將圖片插入網(wǎng)頁中。可以設置圖片的大小以及相鄰文字的排列方式。該標記具有以下屬性： （1）src屬性：指明圖片文件所在的位置。格式為： 其中URL是指圖片文件存放的位置。 （2）alt屬性：圖片的文字說明，當鼠標指針指向圖片時，該圖片的說明性文字彈出。格式為： ,3. 插入圖片,（3）height和width屬性：設置圖片顯示區(qū)域的高度和寬度。格式為： 其中height和width屬性的取值n1和n2為像素數(shù)，像素數(shù)越大，圖片顯示越大。 （4）border屬性：設置圖片文件的邊框。格式為： 其中n為像素數(shù)。 （5）align屬性：設置圖片相對于文本的位置關系。格式為： 對齊方式可以是：top（

9、頂邊對齊）、middle（垂直居中）、bottom（底邊對齊）、left（左對齊）、right（右對齊）。,4. 超鏈接,在HTML語言中，和標記用于設置網(wǎng)頁中的超鏈接href屬性指明被超鏈接的文件地址。格式為： 超鏈接文本 用于表示超鏈接的文本一般顯示為藍色并且加下劃線。在瀏覽器中，當鼠標指針指向該文本時，箭頭變?yōu)槭中?，并在瀏覽器的狀態(tài)欄中顯示該超鏈接的地址。 若使用圖片做超鏈接，可使用如下格式完成： ,5. 使用表格,在網(wǎng)頁中插入一個表格，需要用到一組HTML標記。定義表格的有關標記如下： 定義表格。 定義表行。 定義表列。 常用的標記屬性中，border屬性用于設置表格邊框的寬度；wid

10、th、height屬性設定表格或表項的寬度、高度，取值可以是像素數(shù)或百分數(shù)；cellspacing和cellpadding屬性分別用于設置單元格之間的間隙和單元格內(nèi)部空白；align屬性設置表格或表項的對齊方式；bgcolor和background屬性設置表格背景的顏色和背景圖像。,第九章網(wǎng)頁制作,9.2 FrontPage概述,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的編輯方式 9.2.5 FrontPage 2003中的

11、視圖,9.2.1 FrontPage 2003的主要功能,FrontPage 2003的主要功能是制作網(wǎng)頁和管理網(wǎng)站。 使用FrontPage 可以創(chuàng)建新的網(wǎng)頁，也可以修改已經(jīng)存在的網(wǎng)頁。FrontPage 提供了多種編輯網(wǎng)頁的方式，可以直接修改HTML，而且采用“所見即所得”的方式編輯網(wǎng)頁。 在FrontPage 2003中，可以很容易地插入文本、圖片、表格、組件等元素；可以使用主題，共享邊框，框架等管理網(wǎng)頁的外觀；還可以使用表單等元素設計出交互式網(wǎng)頁。 FrontPage 2003提供了強大的站點管理功能。一組相關網(wǎng)頁和有關文件組成一個站點，站點也是FrontPage 2003對網(wǎng)站進行管

12、理的基本單位。在FrontPage 2003中可以輕松實現(xiàn)設計、管理、分析、發(fā)布和維護站點等工作。,9.2.2 FrontPage 的啟動與退出,1. FrontPage 2003的啟動 FrontPage 2003可以按下列步驟啟動： （1）單擊“開始”按鈕，在“開始”菜單中單擊“程序”； （2）在“程序”菜單中單擊Microsoft FrontPage，即可打開Microsoft FrontPage 2003窗口。 另外，也可以在桌面上建立FrontPage 2003快捷方式后在桌面上雙擊該圖標，即可啟動FrontPage 2003。 注意：不要雙擊.html文件圖標，而應啟動FrontP

13、age后在“文件”/“打開”打開.html文件。,FrontPage 2003的啟動與退出,2. FrontPage 2003的退出 FrontPage 2003的退出有以下三種方式： （1）選取“文件”菜單中的“退出”。 （2）單擊操作窗口中右上角的“關閉”按鈕。 （3）按快捷鍵Alt+F4。,9.2.3 網(wǎng)頁與網(wǎng)站,網(wǎng)頁是WWW上的基本文檔，用HTML書寫，通常以.htm或.html為擴展名。網(wǎng)頁可以獨立存在，但常常作為網(wǎng)站的一部分。 網(wǎng)站是一組相關網(wǎng)頁和有關文件的組合。網(wǎng)站一般有一個特殊的網(wǎng)頁作為瀏覽的起始點，稱為主頁（Homepage），用來引導用戶訪問其他網(wǎng)頁。 網(wǎng)站通常位于Web服

14、務器上?？蛻魴C通過網(wǎng)絡向Web服務器發(fā)送請求，Web服務器響應客戶機的請求，并使用HTTP協(xié)議將網(wǎng)頁和有關文件通過網(wǎng)絡傳送回客戶機。客戶機端使用網(wǎng)頁瀏覽器就能看到網(wǎng)頁的內(nèi)容了。,網(wǎng)頁與網(wǎng)站,通常，在FrontPage 2003中建立的站點需要發(fā)布到Internet中的Web服務器上，成為真正意義上的網(wǎng)站，Internet上的用戶才能訪問。有時，可以在同一臺計算機上安裝Web服務器端軟件（如IIS等），從而可以將站點發(fā)布到本機進行測試。 用FrontPage 2003也可以建立基于本地硬盤的站點，這種站點以本機文件夾的形式存在，不需要發(fā)布到服務器，這時，所有需要服務器支持的功能都是不可用的。 M

15、icrosoft Office FrontPage 已被其下一版本 Microsoft Office SharePoint Designer 2007所取代,9.2.4 FrontPage 2003的編輯方式,FrontPage 2003提供了四種網(wǎng)頁視圖模式： 設計視圖：是打開網(wǎng)頁首先進入的視圖，可以在其中輸入文本、插入圖片、插入表格等，也可以任意進行修改。 代碼視圖：用戶可以查看、編寫和編輯HTML標記。 預覽視圖：可以看到網(wǎng)頁在Web瀏覽器中的大體顯示情況。 FrontPage 2003新增的拆分視圖：將窗口工作區(qū)拆分成上、下兩部分，上半部分是代碼區(qū)，下半部分是設計區(qū)。無論對哪一個區(qū)域進

16、行修改，另一個區(qū)域都會做出相應的改變。,9.2.5 FrontPage 2003中的視圖,FrontPage 2003提供了7種網(wǎng)站視圖以方便用戶對站點的管理，可以在不同的視圖中進行不同的操作。 1. 網(wǎng)頁視圖 網(wǎng)頁視圖是FrontPage 中最常用的工作界面。網(wǎng)頁的創(chuàng)建、編輯、預覽等基本操作都是在此視圖中進行的。 2. 文件夾視圖 在文件夾視圖中，站點顯示為一組文件和文件夾?？梢栽谖募A視圖中創(chuàng)建、移動和刪除文件或文件夾。,3. 報表視圖 使用報表視圖可以方便地了解當前站點的文件內(nèi)容、更新鏈接情況、組件錯誤、所有文件列表及變化情況等信息。可在“報表”工具欄中的“報表”下拉列表中選擇所需顯示的

17、報表。 4. 超鏈接視圖 超鏈接視圖將當前站點顯示為鏈接文件的一個網(wǎng)絡，它們反映了站點中各個網(wǎng)頁之間的相互鏈接關系。超鏈接視圖就像一張地圖，表明站點中的超鏈接路徑。,9.2.5 FrontPage 2003中的視圖,9.2.5 FrontPage 2003中的視圖,5. 任務視圖 任務視圖主要用來創(chuàng)建和管理任務。在視圖中列出了當前站點的“任務”，即當前站點中尚未完成的項目。 6. 導航視圖 使用導航視圖可方便地觀察站點的鏈接結構，它以層次狀的組織結構圖形式顯示。在該視圖下，可以通過拖曳操作改變鏈接結構。 7.遠程網(wǎng)站視圖 可以顯示本地網(wǎng)站及遠程網(wǎng)站中的文件。,第九章網(wǎng)頁制作,9.3網(wǎng)頁制作,9

18、.3 網(wǎng)頁制作,9.3.1 創(chuàng)建站點 9.3.2 網(wǎng)頁編輯 9.3.3 插入對象 9.3.4 創(chuàng)建超鏈接,9.3 網(wǎng) 頁 制 作,Web站點的開發(fā)，首先應當根據(jù)其用途進行規(guī)劃，確定站點結構，在本地磁盤上創(chuàng)建站點，然后再建立網(wǎng)頁。 那么什么是“站點”呢？ 其實站點就是一組相關網(wǎng)頁和其他文件的集合，這些網(wǎng)頁在Internet中表現(xiàn)為一個完整結構就稱為“站點”。在FrontPage 2003中，站點以一個特殊文件夾的形式存儲。,9.3.1 創(chuàng)建站點,使用FrontPage 2003的向導和模板，用戶可以輕松地創(chuàng)建出各種用途和風格的站點。 新建站點時，可以根據(jù)自己的需求選擇不同的模板和向導。對于不同的

19、模板和向導，其新建站點的步驟略有不同。下面以“只有一個網(wǎng)頁的站點”模板為例，介紹新建站點的方法。 （1）在“文件”菜單的“新建”子菜單中選擇“站點”，打開“新建”任務窗格；,創(chuàng)建站點,（2）單擊“只有一個網(wǎng)頁的站點”模板。 該站點只有一個空白網(wǎng)頁index.htm（主頁）和用于存儲圖片的文件夾images，你可以打開index.htm編輯該網(wǎng)頁，也可以進一步根據(jù)網(wǎng)站規(guī)劃創(chuàng)建文件夾和新建其他網(wǎng)頁。 要再次對該站點進行操作，使用“文件” /“打開站點”菜單命令打開該站點。,9.3.2 網(wǎng)頁編輯,1. 新建網(wǎng)頁 2. 打開網(wǎng)頁 3. 設置文字格式 4. 設置段落格式 5. 設置網(wǎng)頁屬性 6. 預覽網(wǎng)

20、頁,1. 新建網(wǎng)頁,要根據(jù)“網(wǎng)頁模板”創(chuàng)建一個新的網(wǎng)頁，可以按下面的步驟： （1）單擊“文件”菜單的“新建”命令，在“新建”任務窗格中選擇“新建網(wǎng)頁”中的“其他網(wǎng)頁模板”。 （2）在彈出的“網(wǎng)頁模板”對話框中選擇所需的網(wǎng)頁模板，可以在“說明”及“預覽”區(qū)域查看該模板的說明及預覽圖。 （3）單擊“確定”按鈕，系統(tǒng)新建一個基于所選模板的網(wǎng)頁。 （4）單擊“文件”菜單，選擇“保存”命令，彈出“另存為”對話框。在此對話框中，輸入文件名進行保存。,2. 打開/保存網(wǎng)頁,在FrontPage 2003中，編輯某個網(wǎng)頁之前，需要先打開該網(wǎng)頁。打開網(wǎng)頁的方法有多種，常用的有以下幾種： （1）使用“文件”菜單的

21、“打開”命令，或“常用”工具欄的“打開”按鈕，在彈出的“打開文件”對話框中選擇相應的網(wǎng)頁； （2）如需要打開的文件已在打開的網(wǎng)站中，在文件夾視圖中雙擊該網(wǎng)頁圖標即可將其打開。實際上，在其他視圖中雙擊網(wǎng)頁圖標，同樣會打開指定網(wǎng)頁。 要保存一個網(wǎng)頁，可以使用“文件”菜單的“保存”命令，或“常用”工具欄的“保存”按鈕，如需另存可使用“文件”菜單的“另存為”命令。,3. 設置文字格式,同其他Microsoft Office組件一樣，網(wǎng)頁中可以輸入文字，復制、剪切和粘貼文字，設置文字格式，查找和替換文字等。 文字格式包括字體、字形、大小、顏色和修飾效果等屬性。 設置文字格式的操作步驟是：選中文字，單擊“

22、格式” / “字體”菜單命令，打開“字體”對話框，在對話框中設置字體的各種屬性。 雖然可以設置各種美觀的字體，但是由于瀏覽者只能使用本地計算機中安裝的字體顯示網(wǎng)頁，因此還是使用常見的字體為好。,4. 設置段落格式,文字段落的格式編排對于一個網(wǎng)頁的外觀是至關重要的。FrontPage 2003通過按Enter鍵劃分段落。值得注意的是，段落之間插入了一個空行。如果只是需要換行，而不是另起一個段落，按Shift+Enter鍵即可。實際上，按Enter鍵在HTML代碼中插入的是標記，進行分段。而按Shift+Enter鍵則插入的是標記，進行分行(1.1.11)。 段落格式主要包括對齊方式、文本縮進和段

23、落間距等。設置段落格式的方法如下： （1）將插入點移動到要設置格式的段落中； （2）單擊“格式” /“段落”菜單命令； （3）在“段落”對話框中可以設置段落的各種屬性。,5. 設置網(wǎng)頁屬性,網(wǎng)頁的屬性包括網(wǎng)頁的標題、位置、背景、頁邊距等信息。 設置網(wǎng)頁屬性：先選中網(wǎng)頁，使用“文件” /“屬性”菜單命令，或者在網(wǎng)頁的“設計視圖”任意地方單擊鼠標右鍵，在彈出的菜單中選擇“網(wǎng)頁屬性”命令，將顯示“網(wǎng)頁屬性”對話框。 (1)“常規(guī)”屬性 “位置”框用于指定網(wǎng)頁的完整URL。 “標題”框用于給出網(wǎng)頁的標題。 “背景音樂”框用于指定網(wǎng)頁的背景聲音。 (2)“格式”屬性 要設置網(wǎng)頁的背景顏色、背景圖片以及超

24、鏈接的顏色，單擊“網(wǎng)頁屬性”對話框的“背景”選項卡 。 (3)“高級”屬性 在“邊距”選項卡中可以設置頁面的頂端頁邊距和左端頁邊距。,6. 預覽網(wǎng)頁,網(wǎng)頁制作過程中，用戶可以隨時對網(wǎng)頁進行預覽?？梢赞D換到預覽視圖方式，還可以使用“文件” /“在瀏覽器中預覽”菜單命令，使用外部瀏覽器打開當前網(wǎng)頁進行預覽。,9.3.3 插入對象,1.插入水平線 2.插入圖片 3.插入字幕 4.插入交互式按鈕 5.插入站點計數(shù)器,1.插入水平線,在網(wǎng)頁中輸入文本內(nèi)容之后，還可在不同的段落、行之間添加水平線，以增強視覺效果。 操作步驟如下： （1）在準備插入水平線的位置設置插入點。 （2）打開“插入” /“水平線”菜

25、單命令，此時在網(wǎng)頁的插入點處插入一條水平線。如果插入點位于或接近行尾，水平線將插入到下一行。,1.插入水平線,雙擊水平線，打開“水平線屬性”對話框，在“寬度”欄中可設置水平線的寬度，在“高度”欄中輸入水平線的高度，在“對齊方式”欄中選擇水平線在網(wǎng)頁內(nèi)水平對齊的方式，在“顏色”列表框內(nèi)設置水平線的顏色（將鼠標停留一會，待出現(xiàn)顏色提示后，按題目要求選擇顏色），系統(tǒng)默認的顏色是黑色，選擇“實線（無陰影）”復選框時，水平線將被設置成實心線，并且在水平線的邊緣上沒有陰影。,2. 插入圖片,1）圖片文件的格式 在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格式，文件的信息量小，適合于網(wǎng)

26、絡傳輸，現(xiàn)已幾乎被所有的Web瀏覽器所支持，因此被廣泛地應用在Web站點的設計中。 圖形交換格式GIF（Graphical Interchange Format）采用無損壓縮方式，其主要特征是支持動畫、透明度、圖形漸進，但GIF格式只支持256種顏色。 聯(lián)合圖像專家組JPEG（Joint Photograph Expert Group）格式是專為有幾百萬種顏色的照片和圖形設計的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。但JPEG格式支持真彩色（24位色），并且在壓縮大的圖像方面已被證明很有效。,2. 插入圖片,2）插入圖片的步驟 （1）移動光標至想要插入圖像處； （2）單擊菜單項中

27、的“插入”，選擇“圖片”項，再選取二 級菜單中的“來自文件”，彈出圖片對話框； （3）如果圖片在該站點中，選中圖片文件并按“確定”按鈕即可，否則單擊“從計算機上選擇一個文件”按鈕或單擊“使用Web瀏覽器來選擇網(wǎng)頁或文件”按鈕，從計算機本地硬盤中或者Internet上選中圖片并按“確定”按鈕，即可將其插入網(wǎng)頁中。,2. 插入圖片,3）設置圖片屬性 打開“圖片屬性”對話框，在“外觀”選項卡中，可以調(diào)整圖片的大小。為了防止改變圖片原來的長寬比例，可以選中“保持縱橫比”復選框，這樣圖片就會根據(jù)原來的長寬比例來調(diào)整大小。同樣在“外觀”選項卡中，可以選擇“對齊方式”，設置圖片邊框的寬度，0為無邊框。,2.

28、 插入圖片,4）編輯圖片 選中插入的圖片，單擊“視圖” /“工具欄”/“圖片”菜單命令，打開圖片編輯工具欄，可以對圖片的亮度、對比度進行調(diào)整，可以旋轉、翻轉圖片，對圖片進行剪裁，設置透明的顏色等操作。,3. 插入字幕,在制作網(wǎng)頁時，可以將網(wǎng)頁中的文字做成由左至右，或由右至左移動的動態(tài)效果。在網(wǎng)頁中加入移動字幕，會使網(wǎng)頁看起來更活潑。具體操作步驟如下： （1）將插入點設置在要插入移動字幕的位置或者選擇作為移動字幕的文本。（在拆分窗口） （2）單擊“插入”菜單中的“Web組件”，選擇“字幕”命令，出現(xiàn)“字幕屬性”對話框。,3. 插入字幕,（3）如果已經(jīng)選擇了作為移動字幕的文本，此文本就會出現(xiàn)在“文

29、本”框中。如果沒有選擇文本，可在“文本”框中輸入作為移動字幕的文本。,3. 插入字幕,（4）在“方向”區(qū)域中選擇文字的移動方向。在“速度”區(qū)域中可以指定文字的移動速度，在“延遲”框中輸入的數(shù)值表示在每個連續(xù)運動之間暫停的毫秒數(shù)，“數(shù)量”框中輸入的數(shù)值表示文本每次移動的距離。在“表現(xiàn)方式”區(qū)域中可以指定文字的運動方式，選中“重復”區(qū)域的“連續(xù)”復選框，則移動字幕連續(xù)不停循環(huán)；若要設置文本重復有限的次數(shù)，則取消選中并輸入字幕重復的次數(shù)。在“背景顏色”列表框中可以設置移動字幕的背景顏色。 （5）單擊“確定”按鈕。,4. 插入交互式按鈕,交互式按鈕是一個動態(tài)按鈕，當用戶將鼠標指向交互式按鈕時，交互式按

30、鈕會改變顏色或形狀。默認情況下，交互式按鈕是一個帶有彩色方框的文字按鈕，也可以應用圖片創(chuàng)建交互式按鈕。 （1）在“設計視圖”，將插入點設置在要插入交互式按鈕的位置，單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“動態(tài)效果”，在“選擇一種效果”列表中選擇“交互式按鈕”，單擊“完成”按鈕，打開對話框。,4. 插入交互式按鈕,（2）設置 按鈕 字體 圖像 （3）單擊“確定”按鈕，即可插入交互式按鈕。,5. 插入站點計數(shù)器,（1）單擊“插入”菜單的“Web組件”命令，打開“插入Web組件”對話框，在對話框的“組件類型”列表框中選擇“計數(shù)器”，在“

31、選擇計數(shù)器樣式”列表中選擇一種樣式，單擊“完成”按鈕，打開“計數(shù)器屬性”對話框； （2）設置計數(shù)器屬性； （3）單擊“確定”按鈕，插入站點計數(shù)器。,返 回,9.3.4 創(chuàng)建超鏈接,Web網(wǎng)頁的強大之處就在于其超鏈接，使用超鏈接能夠將Internet中的信息有機地組織起來，使人們在豐富多彩的WWW世界中輕松地漫游。在瀏覽器中，超鏈接通常表現(xiàn)為與普通文本或圖片不同的特點。將鼠標移到一個超鏈接上方時，鼠標指針會變成手形。同時，與這個超鏈接相對應的URL會在窗口底部的狀態(tài)欄顯示出來。,9.3.4 創(chuàng)建超鏈接,1. 創(chuàng)建文本超鏈接 2. 創(chuàng)建圖片超鏈接 3. 使用書簽超鏈接 4. 創(chuàng)建電子郵件超鏈接,1

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

33、接，圖片超鏈接比文本超鏈接顯得更加生動活潑，單擊圖片超鏈接，會自動跳轉到指向的鏈接目標?？梢詫⒄麄€圖片設置為超鏈接，也可以為圖片分配一個或多個熱點。熱點是圖片上的超鏈接區(qū)域，包含熱點的圖片稱為圖像映射，用戶單擊熱點區(qū)域可以轉到相應的鏈接目標。,2. 創(chuàng)建圖片超鏈接,（1）選定要定義超鏈接的圖片，從“插入” /“超鏈接”菜單命令，或單擊“常用”工具欄上的“超鏈接”按鈕，打開“插入超鏈接”對話框； （2）在對話框中選擇要鏈接的目標網(wǎng)頁，單擊“確定”按鈕，即可插入超鏈接。 保存網(wǎng)頁，在瀏覽器中預覽效果，當鼠標移至鏈接圖片時，鼠標指針變成手形，此時單擊鼠標就跳轉到目標網(wǎng)頁。,1）創(chuàng)建圖片超鏈接,熱點可

34、以是圖片上具有某種形狀的一塊區(qū)域或文本，當用戶單擊該區(qū)域或文本時，超鏈接目標會顯示在Web瀏覽器中。在FrontPage 2003中，熱點的形狀可以是長方形、圓形或多邊形。 例如我們通過山東省地圖瀏覽山東省各城市的民俗風情，當鼠標移至地圖上的各個城市時，鼠標指針變?yōu)槭中?，單擊后打開描述該城市民俗風情的頁面。,2）為圖片添加熱點,為圖片添加熱點，具體操作步驟如下：,（1）選擇需要添加熱點的圖片。右擊選“顯示圖片工具欄” （2）在“圖片”工具欄中，單擊長方形、圓形或多邊形熱點按鈕匹配需要的形狀。 （3）在圖片上，采用鼠標拖動操作畫出所選形狀。畫多邊形時，可單擊多邊形的第一個角，然后依次單擊多邊形其

35、他角的位置，最后雙擊完成多邊形。 （4）釋放鼠標，彈出“插入超鏈接”對話框，按照插入超鏈接中所講方法創(chuàng)建超鏈接即可。,為圖片添加熱點,重復步驟（2）、（3）、（4），在圖片上依次創(chuàng)建超鏈接到其他網(wǎng)頁。當鼠標移動到熱點區(qū)域時，光標變?yōu)槭中?，如下圖所示。單擊鼠標，超鏈接的目標網(wǎng)頁就會顯示在Web瀏覽器窗口中。,返 回,3. 使用書簽超鏈接,書簽能夠嚴格地控制用戶到達當前網(wǎng)頁內(nèi)的某個具體位置。書簽是網(wǎng)頁中被標記的位置或被標記的文本。單擊書簽超鏈接，將直接跳轉到該書簽所在的位置。,1）插入書簽 （1）選中作為書簽的文本，或將光標定位在要插入書簽的位置。 （2）選擇“插入” /“書簽”菜單命令，彈出“書

36、簽”對話框，如右圖所示，所選文本自動出現(xiàn)在“書簽名稱”框中。 （3）單擊“確定”按鈕，插入書簽，可以看到所選文本下方出現(xiàn)虛線。,2）創(chuàng)建書簽超鏈接 （1）選定要定義超鏈接的文本或圖片； （2）從“插入” /“超鏈接”菜單命令，彈出“插入超鏈接”對話框，如下圖所示，在對話框的“鏈接到”欄單擊“本文檔中的位置”，選擇要鏈接的書簽； （3）單擊“確定”按鈕，插入書簽超鏈接。 保存網(wǎng)頁，在瀏覽器中預覽效果，單擊頁面中的書簽超鏈接，頁面會跳轉到書簽的位置。,4. 創(chuàng)建電子郵件超鏈接,電子郵件超鏈接為用戶發(fā)送電子郵件提供了極大的方便，單擊電子郵件超鏈接后，允許用戶書寫電子郵件內(nèi)容，并發(fā)往指定的地址。具體操

37、作步驟如下： （1）選擇作為電子郵件超鏈接的文本或圖片； （2）從“插入” /“超鏈接”菜單命令，彈出“插入超鏈接”對話框； （3）在對話框的“鏈接到”欄單擊“電子郵件地址”，在“電子郵件地址”框中輸入所需電子郵件地址，還可以在“主題”框中鍵入電子郵件的主題； （4）單擊“確定”按鈕，完成電子郵件超鏈接的創(chuàng)建。,返 回,第九章網(wǎng)頁制作,9.4網(wǎng)頁布局,9.4 網(wǎng)頁布局,9.4.1 使用表格 9.4.2 框架,9.4.1 創(chuàng)建和使用表格,表格由行和列交叉所形成的單元格組成。在單元格中可以放置任何對象，例如文本、圖像、表單、FrontPage組件等。利用表格可以有條理地排列數(shù)據(jù)或者組織網(wǎng)頁布局。表

38、格可以將文本排列成并列的段落，或模擬文本的分欄形式，也可以利用寬度固定的表格在網(wǎng)頁上為文本提供邊界。 FrontPage 2003提供了與Word字處理軟件類似的表格處理功能，在網(wǎng)頁中可以輕松地創(chuàng)建和處理表格。,1. 創(chuàng)建表格,創(chuàng)建表格有以下三種方法： 方法（1）使用“表格”/“插入”/“表格”菜單命令，可以對插入的表格進行精確的設置，包括行和列的數(shù)目、對齊方式、單元格間距、單元格襯距、邊框粗細和背景等。 方法（2）使用“常用”工具欄的“插入表格”按鈕 ，快速插入表格。 方法（3）使用“表格” /“繪制表格”菜單命令，手動繪制表格。,2. 設置表格屬性,插入表格后，打開“表格屬性”對話框，可以

39、設置表格屬性。 對齊方式（指的是表格的對齊方式而非單元格）：可以選擇左對齊、右對齊、水平居中和兩端對齊。該屬性決定表格在網(wǎng)頁中的相對位置。 浮動：可以選擇左對齊、右對齊。該屬性決定表格與其他網(wǎng)頁元素的排列關系，即“文字環(huán)繞”效果。 指定寬度和高度：設置表格的大小?？梢允褂媒^對大小“像素”或相對大小“百分比”。 單元格襯距：設置表格線與表格內(nèi)容的距離。 單元格間距：設置兩個相鄰單元格邊框的距離。 邊框：粗細以像素為單位，可以選擇合適的邊框顏色。 背景：可以指定背景顏色或背景圖像。,3. 調(diào)整表格,創(chuàng)建表格后，可以對表格單元格、行和列的布局和結構進行調(diào)整，具體操作有：調(diào)整行、列或單元格；插入行、列

40、或單元格；刪除行、列或單元格；合并、拆分單元格；平均分布行高、列寬；設置單元格屬性等。在“單元格屬性”對話框中，可以設置單元格中內(nèi)容的布局，精確定義單元格的寬度、高度，確定單元格的背景以及邊框的顏色等。,9.4.2 創(chuàng)建框架,框架是進行網(wǎng)頁布局設計的一種重要手段?？蚣軐g覽器窗口劃分為幾個區(qū)域，在每個框架中都顯示一個獨立的網(wǎng)頁。瀏覽器窗口中顯示的網(wǎng)頁實際是這些框架的集合，因此被稱為框架網(wǎng)頁?？蚣芫W(wǎng)頁并不包含顯示的內(nèi)容，只是記錄了該框架網(wǎng)頁包含幾個框架、其拆分方式以及每個框架中顯示哪個網(wǎng)頁（與其他網(wǎng)頁的超鏈接）等。,例如，使用“橫幅和目錄”框架網(wǎng)頁模板創(chuàng)建的框架網(wǎng)頁實際上在瀏覽器中同時顯示四個網(wǎng)

41、頁：作為容器的框架 網(wǎng)頁和分別顯示在三個框架中的三個網(wǎng)頁。,1. 創(chuàng)建框架,在FrontPage 2003中，可以使用框架網(wǎng)頁布局模板輕松創(chuàng)建框架網(wǎng)頁。具體操作步驟如下： （1）單擊“文件” /“新建”菜單命令，在“新建”任務窗格中選擇“新建網(wǎng)頁”中的“其他網(wǎng)頁模板”。 （2）在彈出的“網(wǎng)頁模板”對話框中，切換到“框架網(wǎng)頁”選項卡，選擇所需的模板，如“目錄”模板，可在“說明”及“預覽”區(qū)域查看該模板的說明及預覽圖。,2. 保存框架網(wǎng)頁,（1）單擊“常用”工具欄中的“保存”按鈕，打開“另存為”對話框，在右邊的框架網(wǎng)頁預覽圖中，其中一個框架高亮顯示，表示正在保存該網(wǎng)頁； （2）在“文件名”框中輸入

42、網(wǎng)頁名稱； （3）單擊“更改”按鈕，設置網(wǎng)頁的標題； （4）單擊“保存”按鈕，該網(wǎng)頁保存完畢，框架圖中的另一個框架處于高亮狀態(tài)； （5）重復步驟（2）（4）的操作； （6）當對話框中的整個框架處于高亮狀態(tài)時，表示正在保存框架網(wǎng)頁本身； （7）輸入框架網(wǎng)頁的文件名稱及標題； （8）單擊“保存”按鈕。,3. 拆分框架,當使用模板創(chuàng)建的框架結構不能滿足需要時，可以通過拆分框架制作出更為復雜的框架網(wǎng)頁。操作步驟如下： （1）選擇要拆分的框架； （2）選擇“框架” / “拆分框架”菜單命令，打開“拆分框架”對話框； （3）根據(jù)需要選擇“拆分為列”或“拆分成行”選項； （4）單擊“確定”按鈕完成拆分。,4

43、. 刪除框架,可以從框架結構中刪除指定的框架。此時，系統(tǒng)只是把框架從框架網(wǎng)頁中刪去，而此框架中的網(wǎng)頁文件仍然存在。 操作方法是：選擇要刪除的框架，選擇“框架”/ “刪除框架”菜單命令即可。,5. 設置框架屬性,通過對框架屬性的設置，可以更改框架超鏈接的網(wǎng)頁、調(diào)整框架大小等。 基本操作是：選擇目標框架，從“框架”菜單中選擇“框架屬性”命令，出現(xiàn) “框架屬性”對話框，設置框架屬性。 單擊“框架屬性”對話框中的“框架網(wǎng)頁”按鈕，彈出 “網(wǎng)頁屬性”對話框，在這里可以調(diào)整框架間距。清除“顯示邊框”復選框時，可以隱藏框架邊框。,9.4.3 創(chuàng)建框架超鏈接,1. 創(chuàng)建框架超鏈接 （1）選擇要定義超鏈接的文字

44、或圖片； （2）單擊“常用”工具欄上的“超鏈接”按鈕，出現(xiàn)“創(chuàng)建超鏈接”對話框； （3）在“URL”框中輸入鏈接的目標網(wǎng)頁； （4）單擊“更改目標框架”按鈕，出現(xiàn)“目標框架”對話框； （5）在“當前框架網(wǎng)頁”區(qū)域中單擊要用作目標的框架； （6）單擊“確定”按鈕，返回到“創(chuàng)建超鏈接”對話框，在“目標框架”欄中顯示出設置的目標框架名稱； （7）單擊“確定”按鈕。,2. 使用特殊的目標框架,在指定目標框架時，除了當前的框架之外，還提供了一些特殊的框架來創(chuàng)建不同效果的目標框架。這些特殊框架位于選中的框架/“超鏈接”/“目標框架”對話框中的“公用的目標區(qū)”區(qū)域，有以下幾種： 相同框架：將鏈接的網(wǎng)頁顯示在

45、包含該超鏈接的同一個框架內(nèi)。 整頁：將框架展開為整個窗口后，顯示鏈接網(wǎng)頁。 新建窗口：打開另外一個新窗口，顯示鏈接網(wǎng)頁。 父框架：在當前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁。,第九章網(wǎng)頁制作,9.5創(chuàng)建表單頁面,9.5 創(chuàng)建表單頁面,9.5.1 插入表單域 9.5.2 提交表單,9.5.1 插入表單域,表單是由表單域組成的，表單域是客戶輸入信息的區(qū)域。在FrontPage 2003中，有6種表單域：單行文本框、滾動文本框、復選框、單選按鈕、下拉菜單、普通按鈕。,1. 單行文本框,單行文本框用于讓客戶輸入一行文字。要插入一個單行文本輸入框，使用“插入” /“表單”菜單命令，再選擇“單行文本框”。單行文本

46、框。 要設置單行文本框的屬性，可以右鍵單擊單行文本框，在彈出的快捷菜單中選擇“表單域屬性”命令，也可以直接雙擊單行文本框，F(xiàn)rontPage 2003將打開“文本框屬性”對話框。,2. 文本區(qū)（滾動文本框）,文本區(qū)（滾動文本框）允許客戶輸入多行文本。 要插入滾動文本框，使用“插入” /“表單”菜單命令，再選擇“滾動文本框”。 與單行文本框一樣，設置滾動文本框的屬性，可以右鍵單擊滾動文本框，在彈出的快捷菜單中選擇“表單域屬性”命令，或直接雙擊滾動文本框，F(xiàn)rontPage 2003將打開“滾動文本框屬性”對話框。,3. 復選框,復選框是提供給客戶的一個選項，一般彼此獨立的多個復選框組成一組，客戶

47、可以同時選中所有選項，也可以一個都不選。 要插入一個復選框，使用“插入” /“表單”菜單命令，再選擇“復選框”。 要設置復選框的屬性，右鍵單擊復選框，在彈出的菜單中選擇“表單域屬性”命令，或直接雙擊復選框，F(xiàn)rontPage 2003將打開“復選框屬性”對話框。 首先應當為復選框命名，當客戶提交表單時，復選框的名稱和狀態(tài)配對發(fā)送給Web服務器端的表單處理程序?？梢栽O置復選框的初始狀態(tài)是選中還是不選中。,4. 單選按鈕,單選按鈕通常組成一組互斥的選項，客戶只能選擇其中一項。 要插入單選按鈕，使用“插入”菜單上的“表單”命令，再選擇“單選按鈕”。 如果表單上有多個單選按鈕，F(xiàn)rontPage 20

48、03默認選中第一個。 要修改單選按鈕的屬性，右鍵單擊單選按鈕，在彈出的菜單中選擇“表單域屬性”命令，或直接雙擊單選按鈕，F(xiàn)rontPage 2003將打開“單選按鈕屬性”對話框。 要注意的是，如果把多個單選按鈕編成一組，必須使它們的組名相同。此外，可以單擊“驗證有效性”按鈕，限定客戶按一定的規(guī)則做出選擇。,5. 下拉菜單（下拉列表框）,下拉菜單用于從一個列表中選擇一項或幾項。從功能的角度講，可以用一組復選框或一組單選按鈕來實現(xiàn)，但下拉菜單占用的網(wǎng)頁空間相對較小。 要插入下拉菜單，使用“插入” /“表單”菜單命令，再選擇“下拉菜單”。插入的下拉菜單是空的，用戶可以右鍵單擊下拉菜單，在彈出的菜單中

49、選擇“表單域屬性”命令，或直接雙擊下拉菜單，F(xiàn)rontPage 2003將打開“下拉菜單屬性”對話框。,5. 下拉菜單（下拉列表框）,單擊“添加”按鈕，將打開“添加選項”對話框，在“選項”框內(nèi)輸入名稱，當客戶提交表單時，提交的是選項的名稱。如果想提交另外的值，應當選中“指定值”復選框，然后鍵入一個值。此外，用戶還可以指定選項的初始狀態(tài)是選定還是未選定。,6. 按鈕,一個表單上至少要有一個“提交”按鈕和一個“全部重寫”按鈕?！疤峤弧卑粹o的作用是把表單上的數(shù)據(jù)提交給Web服務器的表單處理程序，“全部重寫”按鈕的作用是把表單上的數(shù)據(jù)清空，以便重新填寫。 要插入按鈕，使用“插入”菜單上的“表單”命令，再選擇“按鈕”。 設置按鈕的屬性，可以右鍵單擊按鈕，在彈出的菜單中選擇“表單域屬性”命令，或直接雙擊按鈕，打開“按鈕屬性”對話框。 可以把按鈕作為“提交”、“全部重寫” 或者普通按鈕。對于“提交”按鈕和“全部重寫”按鈕來說，它們的動作特性是默認的。,9.5.2 提交表單,用戶結束表單操作后，單擊“提交”按鈕，當“提交”按鈕設置了表單結果送至何處后，表