html與FrontPage網(wǎng)頁制作.ppt

1、第九章 網(wǎng)頁制作,2020/7/14,第九章 網(wǎng)頁制作,2,第九章 網(wǎng)頁制作,9.1 HTML簡(jiǎn)介 9.2 FrontPage概述 9.3網(wǎng)頁制作 9.4網(wǎng)頁布局 9.5創(chuàng)建表單頁面 9.6網(wǎng)頁的發(fā)布,2020/7/14,第九章 網(wǎng)頁制作,3,9.1 HTML簡(jiǎn)介,HTML即HyperText Markup Language 的縮寫。它使用一些約定的標(biāo)記（Tag）對(duì)文本進(jìn)行標(biāo)注，定義網(wǎng)頁的數(shù)據(jù)格式，描述Web頁中的信息，控制文本的顯示。 我們把用HTML語言編寫的文件稱為HTML文件。它通常被存儲(chǔ)在Web服務(wù)器上，客戶端通過瀏覽器向Web服務(wù)器發(fā)出請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求并將HTML文件發(fā)送給瀏覽

2、器，然后由瀏覽器對(duì)文件中的標(biāo)記作出相應(yīng)的解釋，以頁面的形式呈現(xiàn)在用戶屏幕上。因此，我們又把HTML文檔在Web瀏覽器中的這種表現(xiàn)形式稱為Web頁面 (Web Page)。 HTML語言是一種標(biāo)記語言，簡(jiǎn)單易學(xué)。用HTML語言編寫的網(wǎng)頁實(shí)際上是一種文本文件，它以.htm或.html為擴(kuò)展名，我們可以使用任何文本處理軟件（例如：記事本）編寫。,2020/7/14,第九章 網(wǎng)頁制作,4,9.1 HTML簡(jiǎn)介,9.1.1 HTML語言概述 9.1.2 HTML語言的基本語法,2020/7/14,第九章 網(wǎng)頁制作,5,9.1.1 HTML語言概述,HTML語言是由世界性的標(biāo)準(zhǔn)化組織W3C(World W

3、ide Web Consortium)制定的。目前，其最新的標(biāo)準(zhǔn)版本是HTML 4.0。 1. HTML文件的基本構(gòu)成 Internet中的每一個(gè)HTML文件都包括兩部分： （1）文本內(nèi)容：含有需要展現(xiàn)的具體信息。 （2）HTML標(biāo)記：負(fù)責(zé)控制文本顯示的外觀和版式。 多數(shù)HTML標(biāo)記的書寫格式如下： 標(biāo)記名文本內(nèi)容標(biāo)記名 某些HTML標(biāo)記還具有一些的屬性（Attribute）。這些屬性指定文本的一些特性，如背景顏色、字體大小、對(duì)齊方式等。標(biāo)記屬性的使用格式如下： 標(biāo)記名 屬性1=值1 屬性2=值2 文本內(nèi)容 標(biāo)記名,2020/7/14,第九章 網(wǎng)頁制作,6,9.1.1 HTML語言概述,標(biāo)記名

4、通常寫在“”內(nèi)。一般的HTML標(biāo)記都具有起始和結(jié)束標(biāo)記，并且成對(duì)出現(xiàn)，兩者控制中間的文本，結(jié)束標(biāo)記前要加“”。但并不是所有的HTML標(biāo)記都具有起始和結(jié)束標(biāo)記，有些則沒有結(jié)束標(biāo)記。 HTML標(biāo)記不區(qū)分大小寫。如：HTML、html或HtMl，其結(jié)果都是一樣的。 標(biāo)記名稱和屬性之間用空格分隔。如果標(biāo)記有多種屬性，屬性之間也要用空格分開。,2020/7/14,第九章 網(wǎng)頁制作,7,9.1.1 HTML語言概述,2. HTML網(wǎng)頁的結(jié)構(gòu) HTML文件的層次結(jié)構(gòu)： 一般HTML文件都是以開頭，又以結(jié)束。其文件結(jié)構(gòu)由以下兩部分組成： （1）頭部（Head） HTML文件的頭部由和標(biāo)記定義。通常情況下，文件

5、的標(biāo)題、搜索引擎所用的關(guān)鍵字以及語言字符集信息等都放在頭部信息中。 （2）正文主體（Body） 由和標(biāo)記定義。標(biāo)記具有一些常用的屬性，格式為： 其中，bgcolor為背景顏色；text為文本顏色。n為六位十六進(jìn)制數(shù)。 如果網(wǎng)頁使用背景圖像，格式為： ,2020/7/14,第九章 網(wǎng)頁制作,8,9.1.2 HTML語言的基本語法,1. 文本布局 (1)段落標(biāo)記 標(biāo)記指定文檔中一個(gè)獨(dú)立的段落。使用格式如下： 標(biāo)記定義的兩個(gè)段落之間留有一個(gè)空行。 (2) 換行標(biāo)記 標(biāo)記可以強(qiáng)制文本換行。該標(biāo)記只有開始標(biāo)記。 (3) 水平線標(biāo)記 水平線標(biāo)記用于在網(wǎng)頁中插入一條水平線。使用格式如下： (4) 居中標(biāo)記

6、標(biāo)記中包含的內(nèi)容顯示在頁面中央。,2020/7/14,第九章 網(wǎng)頁制作,9,9.1.2 HTML語言的基本語法,例9-2 在網(wǎng)頁中設(shè)置段落和頁面格式。 文本布局 在這里我們首先向您介紹有關(guān)HTML語言的基本知識(shí)和基本語法。然后，講授如何使用HTML語言編寫您的Web頁面。 段落左對(duì)齊 段落居中 段落右對(duì)齊 ,2020/7/14,第九章 網(wǎng)頁制作,10,9.1.2 HTML語言的基本語法,2. 文字格式 HTML語言中用于文字格式化的標(biāo)記有： （1）標(biāo)題標(biāo)記 標(biāo)記定義文字標(biāo)題。標(biāo)題文字將以指定大小，黑體居中顯示。 格式： 標(biāo)題文字 其中，n為1到6的數(shù)字，表示字體大小。 （2）字體標(biāo)記 字體標(biāo)記

7、用來對(duì)文字格式進(jìn)行設(shè)置，主要具有以下屬性： 1) size屬性用來控制文字的大小，其格式為： ，n=1,2,3,4,5,6,7，默認(rèn)值為3。 2) color屬性用來控制文字的顏色，其格式為： ，n是一個(gè)十六進(jìn)制的六位數(shù)。 3) face屬性用來指明文字使用的字體，其格式為： ,2020/7/14,第九章 網(wǎng)頁制作,11,9.1.2 HTML語言的基本語法,（3）字形標(biāo)記 設(shè)置文字的粗體、斜體、上標(biāo)、下標(biāo)、下劃線等 。,2020/7/14,第九章 網(wǎng)頁制作,12,9.1.2 HTML語言的基本語法,3. 插入圖片 標(biāo)記將圖片插入網(wǎng)頁中。該標(biāo)記具有以下屬性： (1) src屬性：指明圖片文件所在

8、的位置。 格式： 其中URL是指圖片文件存放的位置。 (2) alt屬性：圖片的文字說明，當(dāng)鼠標(biāo)指針指向該圖片時(shí)，該說明性文字彈出。 格式： (3) height和width屬性：設(shè)置圖片顯示區(qū)域的高度和寬度。 格式： 其中height和width屬性中n1、n2的取值為像素?cái)?shù)，像素?cái)?shù)越大，圖片顯示越大 。 (4) border屬性：設(shè)置圖片文件的邊框。 格式：設(shè)置圖片的邊框。其中n為像素?cái)?shù)。 (5) align屬性：設(shè)置圖片相對(duì)于文本的位置關(guān)系。 格式：頂邊對(duì)齊/垂直居 中/底邊對(duì)齊/左對(duì)齊/右對(duì)齊,2020/7/14,第九章 網(wǎng)頁制作,13,9.1.2 HTML語言的基本語法,4. 超級(jí)鏈

9、接 在HTML語言中， 和標(biāo)記用于設(shè)置網(wǎng)頁中的超鏈接，href屬性指明被超鏈接的文件地址。 格式：超連接文本 用于表示超鏈接的文本一般顯示為藍(lán)色并且加下劃線。在瀏覽器中，當(dāng)鼠標(biāo)指針指向該文本時(shí)，箭頭變?yōu)槭中危⒃跒g覽器的狀態(tài)欄中顯示該鏈接的地址。 若使用圖片做超鏈接，可使用如下格式完成： ,2020/7/14,第九章 網(wǎng)頁制作,14,9.1.2 HTML語言的基本語法,5.使用表格 在網(wǎng)頁中插入一個(gè)表格，需要用到一組HTML標(biāo)記。定義表格的有關(guān)標(biāo)記如下： 定義表格。 定義表行。 定義表頭。 定義表列。 常用的標(biāo)記屬性： border屬性用于設(shè)置表格邊框的寬度；width、height屬性設(shè)定表

10、格和表項(xiàng)的寬度、高度，取值可以是像素?cái)?shù)或百分?jǐn)?shù)；cellspacing 和cellpadding屬性分別用于設(shè)置單元格之間的間隙和單元格內(nèi)部空白；align屬性設(shè)置表格和表項(xiàng)的對(duì)齊方式;bgcolor和background屬性設(shè)置表格背景的顏色和背景圖像。,2020/7/14,第九章 網(wǎng)頁制作,15,9.1.2 HTML語言的基本語法,例9-4 表格示例 表格示例 時(shí)間星期一 星期二 星期三 1-2節(jié)數(shù)學(xué)語文英語 3-4節(jié) 地理歷史生物 ,2020/7/14,第九章 網(wǎng)頁制作,16,9.2 FrontPage概述,專門Web創(chuàng)作工具具有“所見即所得”功能,Web創(chuàng)作人員直接對(duì)Web頁面進(jìn)行編輯

11、修改，并且能立即看到Web頁面的顯示效果。 FrontPage是微軟公司開發(fā)的網(wǎng)頁制作和網(wǎng)站管理工具。FrontPage 2003是Microsoft Office 2003組件之一，與Office其它組件高度融合。它界面友好，功能強(qiáng)大，易學(xué)易用，是目前使用最為廣泛的網(wǎng)頁制作、站點(diǎn)管理的工具。,2020/7/14,第九章 網(wǎng)頁制作,17,。,網(wǎng)頁制作步驟,1、首先在Internet網(wǎng)上申請(qǐng)網(wǎng)站的主頁空間和域名。在很多門戶網(wǎng)站都提供免費(fèi)的服務(wù)，但代價(jià)是要在你的主頁上留有該網(wǎng)站的廣告。如果你是為一個(gè)企業(yè)做的網(wǎng)站，最好不要用這種免費(fèi)的空間，因?yàn)樗鼐共荒鼙Ｕ夏闼龅木W(wǎng)站的安全 2、然后在自己的計(jì)算機(jī)

12、上設(shè)計(jì)出網(wǎng)頁?？梢岳靡恍┚W(wǎng)頁的制作工具。如：網(wǎng)頁編輯軟件FontPage 2003；圖片處理軟件，如PhotoShop；動(dòng)畫的制作軟件，如Flash等等。 3、通過FTP（文件傳輸）軟件，將網(wǎng)頁、有關(guān)的圖片文件、動(dòng)畫文件以及相關(guān)其它文件傳到網(wǎng)上。 4、登記搜索引擎。為自己所做的網(wǎng)站進(jìn)行宣傳，讓廣大的Internet網(wǎng)絡(luò)用戶能夠知道你的存在，否則你所做的網(wǎng)站就毫無意義，因?yàn)閯e人無法知道你的網(wǎng)頁。,2020/7/14,第九章 網(wǎng)頁制作,18,9.2 FrontPage概述,9.2.1 FrontPage的啟動(dòng)與退出 9.2.2 FrontPage中的視圖 9.2.3 FrontPage的編輯方式

13、 9.2.4 FrontPage中的視圖 9.2.5 FrontPage的編輯方式,2020/7/14,第九章 網(wǎng)頁制作,19,9.2.1 FrontPage的主要功能,FrontPage 2003集成了兩大功能模塊網(wǎng)頁制作模塊和網(wǎng)站管理模塊。 FrontPage 2003網(wǎng)頁制作模塊主要有以下一些功能： （1）強(qiáng)大的編輯功能 （2）制作編輯表格功能 （3）圖片處理功能 （4）超級(jí)鏈接自動(dòng)修復(fù)功能 （5）制作表單 （6）使用網(wǎng)頁框架 （7）提供豐富的組件 （8）插入外部程序。 （9）使用數(shù)據(jù)庫 （10）支持動(dòng)態(tài)HTML和CSS樣式表,2020/7/14,第九章 網(wǎng)頁制作,20,9.2.1 Fr

14、ontPage的主要功能,同時(shí)，F(xiàn)rontPage 2003具有強(qiáng)大的網(wǎng)站管理功能，是一款方便而又實(shí)用的Web站點(diǎn)的發(fā)布與維護(hù)工具，主要功能有： （1）建立站點(diǎn) （2）站點(diǎn)文件管理功能 （3）網(wǎng)頁導(dǎo)航管理功能 （4）任務(wù)管理功能 （5）網(wǎng)站發(fā)布與維護(hù)功能,2020/7/14,第九章 網(wǎng)頁制作,21,9.2.2 FrontPage的啟動(dòng)與退出,1FrontPage的啟動(dòng) FrontPage 2003可以按下列步驟啟動(dòng)： （1）單擊“開始”按鈕，在“開始”菜單中單擊“程序”。 （2）在“程序”菜單中單擊Microsoft FrontPage。 （3）打開的Microsoft FrontPage 2

15、003窗口 。 另外，也可以在桌面上建立FrontPage 2003快捷方式，然后在桌面上雙擊該圖標(biāo)，即可啟動(dòng)FrontPage 2003。 2. FrontPage的退出 FrontPage 2003的退出有以下三種方式： (1)選取“文件”菜單中的“退出”。 (2)單擊操作窗口中最右上角的關(guān)閉按鈕 (3)通過快捷鍵Alt+F4退出。,2020/7/14,第九章 網(wǎng)頁制作,22,9.2.3 網(wǎng)頁與網(wǎng)站,用HTML語言編寫的文件稱之為HTML文件，該文件需要通過Web瀏覽器解釋并顯示在屏幕上，所以它又被稱為網(wǎng)頁 (Web Page)。 一般而言，Web站點(diǎn)的第一個(gè)網(wǎng)頁被稱為主頁或者首頁(Hom

16、e Page)。 其實(shí)站點(diǎn)就是一組相關(guān)網(wǎng)頁和其他文件的集合。,2020/7/14,第九章 網(wǎng)頁制作,23,9.2.4 FrontPage中的視圖,FrontPage 2003提供了7種視圖以方便用戶對(duì)站點(diǎn)的管理，可以在不同的視圖中進(jìn)行不同的操作。 1. 網(wǎng)頁視圖 2. 文件夾視圖 3. 遠(yuǎn)程網(wǎng)站視圖 4. 報(bào)表視圖 5. 導(dǎo)航視圖 6. 超鏈接視圖 7. 任務(wù)視圖,2020/7/14,第九章 網(wǎng)頁制作,24,9.2.4 FrontPage中的視圖,1.“網(wǎng)頁”視圖 “網(wǎng)頁”視圖是FrontPage 2003中最常用的工作界面。網(wǎng)頁的創(chuàng)建、編輯、預(yù)覽等基本操作都是在此視圖中進(jìn)行的。 2.“文件夾

17、”視圖 在“文件夾”視圖中，站點(diǎn)顯示為一組文件和文件夾。在“文件夾”視圖中可以創(chuàng)建、移動(dòng)和刪除文件或文件夾。 3“報(bào)表”視圖 使用“報(bào)表”視圖可以方便了解當(dāng)前站點(diǎn)的文件內(nèi)容、更新鏈接情況、組件錯(cuò)誤、所有文件列表及變化情況等信息。 4“導(dǎo)航”視圖 使用“導(dǎo)航”視圖可方便地觀察站點(diǎn)的鏈接結(jié)構(gòu)。在該視圖中可以很直觀地瀏覽網(wǎng)站內(nèi)網(wǎng)頁之間的鏈接關(guān)系，同時(shí)也可以通過拖曳操作改變鏈接結(jié)構(gòu)。 5“超鏈接”視圖 “超鏈接”視圖將當(dāng)前站點(diǎn)顯示為鏈接文件的一個(gè)網(wǎng)絡(luò)，它們表示了站點(diǎn)中各個(gè)網(wǎng)頁之間的相互鏈接關(guān)系。 6. “任務(wù)”視圖 “任務(wù)”視圖主要用來創(chuàng)建和管理任務(wù)。在視圖中列出了當(dāng)前站點(diǎn)的“任務(wù)”，即當(dāng)前站點(diǎn)中尚未

18、完成的項(xiàng)目 。,2020/7/14,第九章 網(wǎng)頁制作,25,9.2.5 FrontPage的編輯方式,FrontPage 2003的網(wǎng)頁視圖下有四種方式：設(shè)計(jì)、代碼、預(yù)覽、拆分。 設(shè)計(jì)視圖是打開網(wǎng)頁首先進(jìn)入的視圖，可以在其中輸入文本、插入圖片、插入表格等，也可以任意進(jìn)行修改。 代碼視圖中，用戶可以查看、編寫和編輯HTML標(biāo)記。 預(yù)覽視圖中可以看到網(wǎng)頁在Web瀏覽器中的大體顯示情況。 FrontPage 2003新增的拆分視圖將窗口工作區(qū)拆分成上、下兩部分，上半部分是代碼區(qū)，下半部分是設(shè)計(jì)區(qū)。無論對(duì)哪一個(gè)區(qū)域進(jìn)行修改，另一個(gè)區(qū)域都會(huì)做出相應(yīng)的改變。,2020/7/14,第九章 網(wǎng)頁制作,26,9

19、.3 網(wǎng)頁制作,Web站點(diǎn)的開發(fā)，首先應(yīng)當(dāng)根據(jù)其用途規(guī)劃站點(diǎn)，確定站點(diǎn)的結(jié)構(gòu)，并在本地磁盤上創(chuàng)建站點(diǎn)以存儲(chǔ)制作完成的網(wǎng)頁及其他相關(guān)文件。然后再發(fā)布到指定服務(wù)器上（遠(yuǎn)程站點(diǎn)）。 9.3.1 創(chuàng)建站點(diǎn) 9.3.2 網(wǎng)頁編輯 9.3.3 插入對(duì)象 9.3.4 創(chuàng)建超鏈接,2020/7/14,第九章 網(wǎng)頁制作,27,9.3.1創(chuàng)建站點(diǎn),FrontPage 2003 提供了多個(gè)模板和向?qū)?。下面以“只有一個(gè)網(wǎng)頁的站點(diǎn)”模版為例，介紹新建站點(diǎn)的方法： （1）在FrontPage 2003窗口中，單擊“文件“菜單上的“新建”命令，再選擇“站點(diǎn)”，F(xiàn)rontPage 2003將打開“新建”對(duì)話框 。 （2）在“

20、新建”對(duì)話框的“指定新站點(diǎn)的位置”文本框中，輸入存儲(chǔ)站點(diǎn)的文件夾。 （3）雙擊“只有一個(gè)網(wǎng)頁的站點(diǎn)”模版，新建站點(diǎn) 。,2020/7/14,第九章 網(wǎng)頁制作,28,9.3.2網(wǎng)頁編輯,1新建網(wǎng)頁 要?jiǎng)?chuàng)建一個(gè)新的網(wǎng)頁，按下面的步驟操作。 （1）從“文件”菜單的“新建”子菜單中選擇“網(wǎng)頁”命令。 （2）出現(xiàn)“新建”對(duì)話框，選中“常規(guī)”選項(xiàng)卡。 （3）選擇所需的模板。 （4）單擊“確定”按鈕，系統(tǒng)新建一個(gè)基于所選模板的網(wǎng)頁。 （5）此時(shí)，新建的網(wǎng)頁顯示在窗口中，可以進(jìn)行編輯修改等。 （6）單擊“文件”菜單，選擇“保存文件”命令，彈出對(duì)話框，設(shè)置完成后單擊“保存”按鈕。 （7）單擊“視圖”框中的“導(dǎo)航

21、”圖標(biāo)，在“文件夾列表”中拖動(dòng)新建網(wǎng)頁到站點(diǎn)的結(jié)構(gòu)圖，將其置入相應(yīng)位置。,2020/7/14,第九章 網(wǎng)頁制作,29,9.3.2網(wǎng)頁編輯,2打開網(wǎng)頁 打開網(wǎng)頁的方法有多種，最常用的操作步驟如下： （1）在FrontPage 2003窗口中，單擊工具欄中“文件夾列表”按鈕。 （2）在“文件夾列表”窗口中，找到要編輯的網(wǎng)頁，然后雙擊網(wǎng)頁圖標(biāo)。 3設(shè)置文字格式 文字格式包括字體、字型、大小、顏色和修飾效果等屬性。 設(shè)置文字的格式操作如下： （1）選中文字。 （2）單擊“格式”菜單，選擇“字體”命令，打開 “字體”對(duì)話框。 （3）可在對(duì)話框中設(shè)置字體的各種屬性。,2020/7/14,第九章 網(wǎng)頁制作,

22、30,9.3.2網(wǎng)頁編輯,4設(shè)置段落格式 文字段落的格式編排對(duì)于一個(gè)網(wǎng)頁的外觀是至關(guān)重要的。FrontPage 2003通過按“Enter”劃分段落。值得注意的是，段落之間插入了一個(gè)空行。如果只是需要換行，而不是另起一個(gè)段落，按“Shift”+“Enter”鍵即可。實(shí)際上，按“Enter”在HTML代碼中插入的是標(biāo)記，而按“Shift”+“Enter”鍵則插入的是標(biāo)記。 段落格式主要包括對(duì)齊方式、文本縮進(jìn)和段落間距屬性。設(shè)置方法如下： （1）將插入點(diǎn)移動(dòng)到要設(shè)置格式的段落中。 （2）單擊“格式”菜單，選擇“段落”命令，彈出對(duì)話框。 （3）在“段落”對(duì)話框中可以設(shè)置段落的各種格式。,2020/7

23、/14,第九章 網(wǎng)頁制作,31,9.3.2網(wǎng)頁編輯,5設(shè)置項(xiàng)目列表 為列表添加項(xiàng)目符號(hào)或編號(hào)的具體操作如下： （1）選擇要添加項(xiàng)目符號(hào)或編號(hào)的列表項(xiàng)。 （2）單擊“格式”工具欄上的“項(xiàng)目符號(hào)”按鈕，可為列表添加項(xiàng)目符號(hào)。 （3）單擊“格式”工具欄上的“編號(hào)”按鈕，可為列表添加編號(hào)。,2020/7/14,第九章 網(wǎng)頁制作,32,9.3.2網(wǎng)頁編輯,6設(shè)置網(wǎng)頁屬性 網(wǎng)頁的屬性包括網(wǎng)頁的標(biāo)題、位置、背景、頁邊距等信息。要設(shè)置網(wǎng)頁屬性，可以使用“文件”菜單上的“屬性”命令，或者在網(wǎng)頁的任意地方單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“屬性”命令，將顯示“網(wǎng)頁屬性”對(duì)話框。 (1)“常規(guī)”屬性 “位置”框用于指

24、定網(wǎng)頁的完整URL。 “標(biāo)題”框用于給出網(wǎng)頁的標(biāo)題。 “背景音樂”框用于指定網(wǎng)頁的背景聲音。 (2)“背景”屬性 要設(shè)置網(wǎng)頁的背景顏色、背景圖片以及超鏈接的顏色，單擊“網(wǎng)頁屬性”對(duì)話框的“背景”選項(xiàng)卡 。 (3)“邊距”屬性 在“邊距”選項(xiàng)卡中可以設(shè)置頁面的頂端頁邊距和左端頁邊距。,2020/7/14,第九章 網(wǎng)頁制作,33,9.3.2網(wǎng)頁編輯,7預(yù)覽網(wǎng)頁 用戶可以轉(zhuǎn)換到預(yù)覽視圖方式預(yù)覽網(wǎng)頁，還可以使用“文件”菜單上的“在瀏覽器中預(yù)覽”命令，使用外部瀏覽器打開當(dāng)前網(wǎng)頁進(jìn)行預(yù)覽。此時(shí)，將打開“在瀏覽器中預(yù)覽”對(duì)話框 。 在“瀏覽器”框內(nèi)選擇一個(gè)web瀏覽器，在“窗口大小”框內(nèi)選輯窗口的尺寸，然后

25、單擊“預(yù)覽”按鈕。 用戶還可以單擊“添加”按鈕，添加其他的預(yù)覽瀏覽器。,2020/7/14,第九章 網(wǎng)頁制作,34,9.3.3插入對(duì)象,1插入特殊符號(hào) (1)在準(zhǔn)備插入特殊符號(hào)的網(wǎng)頁文本中置插入點(diǎn)。 (2)打開“插入”菜單，執(zhí)行其中的“符號(hào)”命令，打開“符號(hào)”對(duì)話框。 (3)在符號(hào)列表框中選擇要插入的符號(hào)，此時(shí)在“插入”按鈕右側(cè)的預(yù)覽框中會(huì)出現(xiàn)選 擇的符號(hào)，單擊“插入”按鈕之后，即可將特殊符號(hào)插入至網(wǎng)頁的插入點(diǎn)處。 (4)單擊“關(guān)閉”按鈕。,2020/7/14,第九章 網(wǎng)頁制作,35,9.3.3插入對(duì)象,2 插入水平線 操作步驟如下： (1)在準(zhǔn)備插入水平線的位置設(shè)置插入點(diǎn)。 (2)打開“插入

26、”菜單，選擇“水平線”命令，此時(shí)在網(wǎng)頁的插入點(diǎn)處插入一條水平線。如果插入點(diǎn)位于或接近行尾，則水平線將插入到下一行。將光標(biāo)移動(dòng)至水平線上雙擊，打開 “水平線屬性”對(duì)話框。在“寬度”欄中可設(shè)置水平線的寬度。在“高度”欄中輸入水平線的高度。在“對(duì)齊方式”欄中選擇水平線在網(wǎng)頁內(nèi)水平對(duì)齊的方式。在“顏色”列表框內(nèi)設(shè)置水平線的顏色，系統(tǒng)默認(rèn)的顏色是黑色。選擇“實(shí)線(無陰影)”復(fù)選框時(shí)，水平線將被設(shè)置成實(shí)心線，并且在水平線的邊緣上沒有陰影。,2020/7/14,第九章 網(wǎng)頁制作,36,9.3.3插入對(duì)象,3 插入圖片 （1）圖片文件的格式 在WWW上常用的圖像文件格式是JPEG和GIF，它們都是壓縮的圖像格

27、式，文件的信息量小，適合于網(wǎng)絡(luò)傳輸。 圖形交換格式GIF是第一種被WWW支持的圖像文件格式，它采用無損壓縮方式。其主要特征是支持動(dòng)畫、透明度、圖形漸進(jìn)。但GIF格式只支持256種顏色。 聯(lián)合照片專家組JPEG格式是專為有幾百萬種顏色的照片和圖形設(shè)計(jì)的，它采用有損壓縮方式，以犧牲圖片質(zhì)量換取大的壓縮比例。但JPEG格式支持真彩色（24位色），并且在壓縮大的圖像方面已被證明很有效。,2020/7/14,第九章 網(wǎng)頁制作,37,9.3.3插入對(duì)象,（2）插入圖片的步驟 第一步，移動(dòng)光標(biāo)至想要插入圖像處。 第二步，單擊菜單項(xiàng)中的“插入”，選擇“圖片”項(xiàng)，再選取二級(jí)菜單中的“來自文件(E)”，彈出對(duì)話框

28、。 第三步，如果圖片在該站點(diǎn)中，則選中圖片文件并按“確定”按鈕；否則單擊“從計(jì)算機(jī)上選擇一個(gè)文件”按鈕或單擊“使用web瀏覽器來選擇網(wǎng)頁或文件”按鈕，從計(jì)算機(jī)本地硬盤中或者Internet上選中圖片并按“確定”，即可將其插入網(wǎng)頁中。,2020/7/14,第九章 網(wǎng)頁制作,38,9.3.3插入對(duì)象,（3）設(shè)置圖片屬性 插入的圖片可以設(shè)置圖片屬性來調(diào)整圖片的大小、對(duì)齊方式等。在選定的圖片上單擊鼠標(biāo)右鍵，在快捷菜單中選擇“圖片屬性”命令，此時(shí)會(huì)出現(xiàn)“圖片屬性”對(duì)話框，選中“外觀”選項(xiàng)卡。在“大小”區(qū)域中調(diào)整圖片的大小參數(shù)。為了防止改變圖片原來的長(zhǎng)寬比例，可以選中“保持縱橫比”復(fù)選框，這樣圖片就會(huì)根據(jù)

29、原來的長(zhǎng)寬比例來調(diào)整大小。 單擊“對(duì)齊方式”列表框，選擇對(duì)齊方式。 在“邊框粗細(xì)”框中，輸入圖片邊框的寬度，“0”為無邊框 （4）編輯圖片 選中插入的圖片，單擊“查看”菜單中的“工具欄”，選擇“圖片”命令，打開圖片編輯工具欄，可以對(duì)圖片的亮度、對(duì)比度進(jìn)行調(diào)整，可以旋轉(zhuǎn)、翻轉(zhuǎn)圖片，對(duì)圖片進(jìn)行剪裁等操作。,2020/7/14,第九章 網(wǎng)頁制作,39,9.3.3插入對(duì)象,4插入字幕 （1）將插入點(diǎn)設(shè)置在要插入移動(dòng)字幕的位置或者選擇作為移動(dòng)字幕的文本。 （2）單擊“插入”菜單中的“組件”，選擇“字幕”命令。 （3）出現(xiàn)“字幕屬性”對(duì)話框，如果已經(jīng)選擇了作為移動(dòng)字幕的文本，此文本就會(huì)出現(xiàn)在“文本”框中。

30、如果沒有選擇文本，可在“文本”框中輸入作為移動(dòng)字幕的文本。 （4）在“方向”區(qū)域中選擇文字的移動(dòng)方向。在“速度”區(qū)域中可以指定文字的移動(dòng)速度，在“延遲”框中輸入的數(shù)值表示在每個(gè)連續(xù)運(yùn)動(dòng)之間暫停的毫秒數(shù)。“數(shù)量”框中輸入的數(shù)值表示文本每次移動(dòng)的距離。在“表現(xiàn)方式”區(qū)域中可以指定文字的運(yùn)動(dòng)方式。選中“重復(fù)”區(qū)域的“連續(xù)”復(fù)選框，移動(dòng)字幕連續(xù)不停循環(huán)，若要設(shè)置文本重復(fù)有限的次數(shù)，則取消選中并輸入字幕重復(fù)的次數(shù)。在“背景顏色” 列表框中可以設(shè)置移動(dòng)字幕的背景顏色。 （5）單擊“確定”按鈕。,2020/7/14,第九章 網(wǎng)頁制作,40,9.3.3插入對(duì)象,5插入懸停按鈕 懸停按鈕是一種動(dòng)感按鈕，當(dāng)訪問者

31、將鼠標(biāo)指向該按鈕時(shí)，按鈕就會(huì)改變顏色或形狀。 插入懸停按鈕的基本步驟如下： （1）將插入點(diǎn)設(shè)置在要插入懸停按鈕的位置。 （2）單擊“插入”菜單中的“組件”，選擇“懸停按鈕”命令，彈出“懸停按鈕屬性”對(duì)話框。,2020/7/14,第九章 網(wǎng)頁制作,41,9.3.3插入對(duì)象,（3）在“按鈕文本”框中輸入按鈕上的文本。可單擊“字體”按鈕，設(shè)置文本的字體、字型、大小和文本顏色屬性?！氨尘邦伾边x項(xiàng)是指按鈕的背景顏色，此選項(xiàng)一般不起作用。 在“效果”列表框中選擇當(dāng)鼠標(biāo)移到按鈕上時(shí)出現(xiàn)的視覺效果，包括“填充顏色”、 “顏色對(duì)比”、“發(fā)光”、“反色發(fā)光”、“微微發(fā)光”、“凸出”和“凹進(jìn)”效果。可以在“效果顏

32、色”列表框中指定當(dāng)實(shí)現(xiàn)某種效果時(shí)出現(xiàn)的顏色。 （4）可以通過單擊“自定義”按鈕，在彈出的“自定義”對(duì)話框中進(jìn)一步設(shè)置按鈕的屬性。 （5）設(shè)置完成，按“確定”按鈕。 此時(shí)，設(shè)置的圖片懸停按鈕出現(xiàn)在插入點(diǎn)位置。,2020/7/14,第九章 網(wǎng)頁制作,42,9.3.3插入對(duì)象,6站點(diǎn)計(jì)數(shù)器 使用“站點(diǎn)計(jì)數(shù)器”組件可以記錄訪問次數(shù)或者網(wǎng)頁被選中的次數(shù)。瀏覽者每次訪問網(wǎng)頁時(shí)，站點(diǎn)計(jì)數(shù)器中的數(shù)字就會(huì)隨之增加。插入“站點(diǎn)計(jì)數(shù)器”的步驟如下： （1）將插入點(diǎn)設(shè)置在要插入站點(diǎn)計(jì)數(shù)器的位置。 （2）單擊“插入”菜單中的“組件”，選擇“站點(diǎn)計(jì)數(shù)器”命令，出現(xiàn)“站點(diǎn) 計(jì)數(shù)器屬性”對(duì)話框 。 （3）在“站點(diǎn)計(jì)數(shù)器屬性”

33、對(duì)話框中，選擇所需的計(jì)數(shù)器樣式。若要使用自定義的計(jì)數(shù)器樣式，需在“計(jì)數(shù)器樣式”區(qū)中選擇“自定義圖片”選項(xiàng)，然后在文本框中輸入圖片的路徑及文件名。 注意：如果要自定義樣式，需要自行設(shè)計(jì)一個(gè)包含0到9數(shù)字的圖片，然后將該圖片存成GIF圖片文件格式。,2020/7/14,第九章 網(wǎng)頁制作,43,9.3.3插入對(duì)象,（4）選中“計(jì)數(shù)器重置為”復(fù)選框，在右側(cè)的文本框中輸入計(jì)數(shù)器的起始數(shù)。 （5）選中“設(shè)定數(shù)字位數(shù)”復(fù)選框，然后在右側(cè)的文本框中輸人數(shù)字作為計(jì)數(shù)器的位數(shù)。 （6）單擊“確定”按鈕。 此時(shí)，在網(wǎng)頁中插入了一個(gè)站點(diǎn)計(jì)數(shù)器。值得注意的是，此組件需要Web服務(wù)器的支持才能正確顯示。,2020/7/1

34、4,第九章 網(wǎng)頁制作,44,9.3.4創(chuàng)建超鏈接,1創(chuàng)建超鏈接 在web網(wǎng)頁中超鏈接一般有兩種表現(xiàn)方式，即以文本方式標(biāo)注的超鏈接和以圖片方式標(biāo)注的超鏈接。下面介紹這兩種方式超鏈接的創(chuàng)建過程。 （1）鏈接到已有的頁面 創(chuàng)建超鏈接的步驟如下： 第1步 選定要定義超鏈接的文本或圖像。 第2步 單擊“常用”工具欄上的“超鏈接”按鈕，或者從“插入”菜單中選擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，網(wǎng)站中的所有網(wǎng)頁出現(xiàn)在文件列表中，選擇鏈接的目標(biāo)網(wǎng)頁。 第4步 單擊“確定”按鈕，超鏈接創(chuàng)建完成。,2020/7/14,第九章 網(wǎng)頁制作,45,9.3.4創(chuàng)建超鏈接,（2）鏈接到一個(gè)新建頁面 其創(chuàng)建

35、步驟如下： 第1步 選定要定義超鏈接的文本或圖像。 第2步 單擊“常用”工具欄上的“超鏈接”按鈕，或者從“插入”菜單中選擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，單擊“創(chuàng)建一網(wǎng)頁并鏈接到該網(wǎng)頁”按鈕。 第4步 出現(xiàn)“新建”對(duì)話框，在“常規(guī)”選項(xiàng)卡中選擇一種網(wǎng)頁模板。單擊“確定”按鈕，鏈接到個(gè)新的網(wǎng)頁，然后編輯此網(wǎng)頁。,2020/7/14,第九章 網(wǎng)頁制作,46,9.3.4創(chuàng)建超鏈接,（3）鏈接到計(jì)算機(jī)中的文件 在FrontPage 2003中，可以創(chuàng)建鏈接到計(jì)算機(jī)中某文件的超鏈接。 其創(chuàng)建步驟如下： 第1步 選定要定義超鏈接的文本或圖像。 第2步 單擊“常用”工具欄上的“超鏈接”按

36、鈕，或者從“插入”菜單中選擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，單擊“制作一個(gè)指向您計(jì)算機(jī)上文件的超鏈接”按鈕。 第4步 出現(xiàn)“選擇文件”對(duì)話框，選擇要鏈接的文件。單擊“確定”按鈕，完成超鏈接的創(chuàng)建。 單擊窗口底部的“預(yù)覽”標(biāo)簽，切換至“預(yù)覽”模式。單擊此鏈接，就會(huì)打開鏈接到計(jì)算機(jī)中的文件。,2020/7/14,第九章 網(wǎng)頁制作,47,9.3.4創(chuàng)建超鏈接,（4）創(chuàng)建外部站點(diǎn)的超鏈接 在FrontPage 2003中，可以創(chuàng)建與WWW上其他站點(diǎn)的超鏈接。其創(chuàng)建步驟如下： 第1步 選定要定義超鏈接的文本或圖像。 第2步 單擊“常用”工具欄上的“超鏈接”按鈕，或者從“插入”菜單中選

37、擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，單擊“使用Web瀏覽器來選擇網(wǎng)頁或文件”按鈕。 第4步 系統(tǒng)自動(dòng)打開Web瀏覽器，在“地址”欄中輸入一個(gè)站點(diǎn)的地址，打開某個(gè)網(wǎng)頁。切換到FrontPage窗口中，這個(gè)地址就會(huì)出現(xiàn)在“創(chuàng)建超鏈接”對(duì)話框中的“URL”欄中。單擊“確定”按鈕，完成超鏈接的創(chuàng)建。 單擊窗口底部的“預(yù)覽”標(biāo)簽，切換至“預(yù)覽”模式。單擊此鏈接，就會(huì)打開鏈接對(duì)象的網(wǎng)頁。,2020/7/14,第九章 網(wǎng)頁制作,48,9.3.4創(chuàng)建超鏈接,（5）創(chuàng)建發(fā)送電子郵件的超鏈接 可以創(chuàng)建與電子郵件的超鏈接，以便反饋信息。 具體創(chuàng)建步驟如下： 第1步 選定要定義超鏈接的文本或圖像。

38、第2步 單擊“常用”工具欄上的“超鏈接”按鈕，或者從“插入”菜單中選擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，單擊“制作發(fā)送電子郵件的超鏈接”按鈕。 第4步 出現(xiàn)“創(chuàng)建電子郵件超鏈接”對(duì)話框，輸入一個(gè)電子郵件地址。單擊“確定”按鈕返回到“創(chuàng)建超鏈接”對(duì)話框，在“URL”欄中顯示了你的電子郵件地址。 第5步 單擊“確定”按鈕，完成超鏈接的創(chuàng)建。,2020/7/14,第九章 網(wǎng)頁制作,49,9.3.4創(chuàng)建超鏈接,2使用書簽 應(yīng)用書簽?zāi)軌蚋鼑?yán)密地控制訪問者到達(dá)網(wǎng)頁內(nèi)某個(gè)具體位置。當(dāng)訪問者單擊基于書簽的超鏈接時(shí)，將直接跳轉(zhuǎn)到這個(gè)書簽所在的位置。 （1）插入書簽 在創(chuàng)建到書簽的鏈接之前，必須

39、要在網(wǎng)頁中插入書簽。 具體步驟： 第1步 將光標(biāo)定位在要插入書簽的位置。 第2步 從“插入“菜單中選擇“書簽”命令。 第3步 出現(xiàn)“書簽”對(duì)話框，在“書簽名稱”框中鍵人書簽名稱 。 第4步 單擊“確定”按鈕，出現(xiàn)書簽標(biāo)記。,2020/7/14,第九章 網(wǎng)頁制作,50,9.3.4創(chuàng)建超鏈接,（2） 創(chuàng)建到書簽的超鏈接 步驟如下： 第1步 選定要定義超鏈接的文本或圖像。 第2步 單擊“常用”工具欄上的“超鏈接”按鈕，或者從“插入”菜單中選擇“超鏈接”命令。 第3步 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，選定已經(jīng)插入書簽的目標(biāo)網(wǎng)頁，在“可選”區(qū)域中單擊“書簽”下拉按鈕，在列表中選擇鏈接的書簽名 。 第4步 單擊

40、“確定”按鈕，完成超鏈接的制作。,2020/7/14,第九章 網(wǎng)頁制作,51,9.3.4創(chuàng)建超鏈接,3使用導(dǎo)航欄 為了使瀏覽者能在站點(diǎn)中的各個(gè)網(wǎng)頁之間的切換瀏覽,FrontPage 2003提供了“導(dǎo)航欄”功能。 插入導(dǎo)航欄的具體步驟如下： （1）將光標(biāo)設(shè)置在要插入導(dǎo)航欄的位置。 （2）從“插入”菜單中選擇“導(dǎo)航欄”命令。 （3）出現(xiàn)“導(dǎo)航欄屬性”對(duì)話框，在“要添加到網(wǎng)頁的超鏈接”區(qū)域中設(shè)定所需的超鏈接選項(xiàng)。當(dāng)選擇了一個(gè)選項(xiàng)時(shí)，相應(yīng)的超鏈接就以藍(lán)色出現(xiàn)在結(jié)構(gòu)示意圖中。 （4）在“方向和外觀”區(qū)域中選擇所需的方向和外觀選項(xiàng)。 （5）單擊“確定”按鈕，導(dǎo)航欄出現(xiàn)在網(wǎng)頁中的插入點(diǎn)位置 。 當(dāng)網(wǎng)站中網(wǎng)

41、頁的鏈接結(jié)構(gòu)發(fā)生改變時(shí)，導(dǎo)航欄將自動(dòng)進(jìn)行調(diào)整， 保持與變化后的鏈接結(jié)構(gòu)的一致性。,2020/7/14,第九章 網(wǎng)頁制作,52,9.4 網(wǎng)頁布局,網(wǎng)頁的布局設(shè)計(jì)，是將文字、圖形圖像等網(wǎng)頁元素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中，進(jìn)行視覺的關(guān)聯(lián)與配置，從而將設(shè)計(jì)意圖以視覺形式表現(xiàn)出來。 網(wǎng)頁的布局一般通過表格和框架的使用來實(shí)現(xiàn)。 9.4.1 創(chuàng)建和使用表格 9.4.2 創(chuàng)建框架 9.4.3 創(chuàng)建框架超鏈接,2020/7/14,第九章 網(wǎng)頁制作,53,9.4.1創(chuàng)建和使用表格,表格由行和列交叉所形成的單元格組成。在單元格中可以放置任何對(duì)象，例如文本、圖像、表單、FrontPage組件等。 利

42、用表格可以有條理地排列數(shù)據(jù)或者組織網(wǎng)頁布局。表格可以將文本排列成并列的段落，或模擬文本的分欄形式，也可以利用寬度固定的表格在網(wǎng)頁上為文本提供邊界。 FrontPage 2003提供了與WORD字處理軟件類似的表格處理功能，在網(wǎng)頁中可以輕松的創(chuàng)建和處理表格。,2020/7/14,第九章 網(wǎng)頁制作,54,9.4.1創(chuàng)建和使用表格,1創(chuàng)建表格 使用“常用”工具欄中的“插入表格”按鈕，可以按默認(rèn)方式快速地插入表格。 (1) 將插入點(diǎn)定位在要插入表格的位置。 (2) 單擊“常用”工具欄上的“插入表格”按鈕，然后向右下方拖動(dòng)鼠標(biāo)，在表格框中會(huì)顯示表格的大小。此時(shí)在插入點(diǎn)位置就會(huì)顯示一張空的表格。 使用菜單

43、命令可以對(duì)插入的表格進(jìn)行精確的設(shè)置，包括行和列的數(shù)目、邊框尺寸以及單元格寬度等。 （1）將插入點(diǎn)定位在要插入表格的位置。 （2）從“表格”菜單的“插入”子菜單中選擇“表格”命令。,2020/7/14,第九章 網(wǎng)頁制作,55,9.4.1創(chuàng)建和使用表格,（3）出現(xiàn)“插入表格”對(duì)話框。在“大小”區(qū)域中的“行”和“列”欄中輸入表格的行數(shù)和列數(shù)。 （4） 在“布局”區(qū)域中可以設(shè)置表格的布局方式，包括表格的對(duì)齊方式、邊框粗細(xì)等。 （5） 單擊“確定”按鈕，設(shè)置的表格出現(xiàn)在插入點(diǎn)位置。 可以手動(dòng)繪制表格，步驟如下： （1） 從“表格”菜單中選擇“手繪表格”命令，顯示“表格”工具欄。在“表格”工具欄中單擊“手

44、繪表格”按鈕，光標(biāo)變?yōu)殂U筆形狀。 （2）在要?jiǎng)?chuàng)建表格的位置按下鼠標(biāo)左鍵的同時(shí)拖動(dòng)光標(biāo)。在表格大小合適時(shí)松開鼠標(biāo)，個(gè)表格出現(xiàn)在網(wǎng)頁中。 （3）在表格內(nèi)將鉛筆光標(biāo)沿水平方向拖動(dòng)增加一個(gè)新行。在表格內(nèi)將鉛筆光標(biāo)沿垂直方向拖動(dòng)增加一個(gè)列行。重復(fù)該步驟可創(chuàng)建一個(gè)復(fù)雜的表格。 （4）單擊“表格”工具欄中的“清除” 按鈕，光標(biāo)變?yōu)橄鹌ば螤睿瑔螕舯砀窬€可清除該表格線。,2020/7/14,第九章 網(wǎng)頁制作,56,9.4.1創(chuàng)建和使用表格,2設(shè)置表格屬性 插入表格后，右單擊表格，在快捷菜單中選擇“表格屬性”命令，即可打開的“表格屬性”對(duì)話框。 對(duì)表格屬性的設(shè)置說明如下： 對(duì)齊方式：可以選擇左對(duì)齊、右對(duì)齊、水平居

45、中和兩端對(duì)齊。該屬性決定表格在網(wǎng)頁中的相對(duì)位置。 浮動(dòng)：可以選擇左對(duì)齊、右對(duì)齊。該屬性決定表格與其他網(wǎng)頁元素的排列關(guān)系，即“文字環(huán)繞”效果。 指定寬度和高度：表格的大小。可以使用決對(duì)大小“像素”或相對(duì)大小“百分比”。 單元格邊距：設(shè)置表格線與表格內(nèi)容的距離。 單元格間距：設(shè)置兩個(gè)相鄰單元格邊框的距離 。 邊框：粗細(xì)以像素為單位。可以選擇和是的邊框顏色 背景：可以指定背景顏色或背景圖像。,2020/7/14,第九章 網(wǎng)頁制作,57,9.4.1創(chuàng)建和使用表格,3調(diào)整表格 創(chuàng)建了表格之后，可以對(duì)各個(gè)表格單元格、行和列的布局和結(jié)構(gòu)進(jìn)行調(diào)整。 （1） 插入行或列 在表格中插入行或列的步驟如下： 第1步

46、將插入點(diǎn)定位在單元格內(nèi)。 第2步 從“表格”菜單的“插入”子菜單中選擇“行或列”命令。 第3步 出現(xiàn)“插入行或列”對(duì)話框，根據(jù)需要選中“行”或“列”單選框。然后在“行數(shù)”或“列數(shù)”選項(xiàng)欄中鍵入插入的行數(shù)或列數(shù) 。 第4步 在“位置”區(qū)域中選擇相對(duì)于當(dāng)前的插入位置。單擊“確定”按鈕。 提示：使用“表格”工具欄上的“插入行”或“插入列”按鈕可以快速表格中插入的行或列。,2020/7/14,第九章 網(wǎng)頁制作,58,9.4.1創(chuàng)建和使用表格,（2） 刪除行、列或單元格 刪除表格中的行或列的操作步驟入下： 第1步 選中要?jiǎng)h除的行、列或單元格。 第2步 單擊“表格”菜單中的“刪除單元格”命令。或者單擊“表

47、格”工具欄中的“刪除單元格”按鈕。 （3） 合并單元格 選中一個(gè)矩形區(qū)域內(nèi)的多個(gè)連續(xù)的單元格，單擊“表格”菜單中的“合并單元格”命令?；蛘邌螕簟氨砀瘛惫ぞ邫谥械摹昂喜卧瘛卑粹o。 （4） 拆分單元格 將插入點(diǎn)定位在要拆分的單元格中，單擊“表格”菜單中的“拆分單元格”命令?；蛘邌螕簟氨砀瘛惫ぞ邫谥械摹安鸱謫卧瘛?按鈕。出現(xiàn)“拆分單元格”對(duì)話框，如果選擇“拆分為行”選項(xiàng)，可以水平地拆分單元格；如果選擇“拆分為列”選項(xiàng)，可以垂直地拆分單元格。然后在“行數(shù)”或“列數(shù)”框中鍵人或選擇拆分的數(shù)目。單擊“確定”按鈕。,2020/7/14,第九章 網(wǎng)頁制作,59,9.4.1創(chuàng)建和使用表格,（5） 設(shè)置單元

48、格屬性 將插入點(diǎn)定位在單元格中，單擊“表格”菜單中的“屬性”，選擇“單元格”命令，彈出“單元格屬性”對(duì)話框。 可以設(shè)置單元格中內(nèi)容的布局，精確定義單元格的寬度、高度，確定單元格的背景以及邊框的顏色等。,2020/7/14,第九章 網(wǎng)頁制作,60,9.4.2創(chuàng)建框架,框架的使用是進(jìn)行網(wǎng)頁布局設(shè)計(jì)的一種重要手段。它將瀏覽器窗口劃分為幾個(gè)區(qū)域，稱為框架，在每個(gè)框架中都可以顯示一個(gè)獨(dú)立的網(wǎng)頁。 瀏覽器窗口中顯示的網(wǎng)頁，實(shí)際是這些框架的集合，因此被稱為框架網(wǎng)頁。 框架網(wǎng)頁并不包含顯示內(nèi)容，只是記錄了該框架網(wǎng)頁包含幾個(gè)框架、其拆分方式以及每個(gè)框架中顯示哪個(gè)網(wǎng)頁（與其它網(wǎng)頁的超鏈接）等。,2020/7/14

49、,第九章 網(wǎng)頁制作,61,9.4.2創(chuàng)建框架,1創(chuàng)建框架 FrontPage 2003提供了最流行的框架網(wǎng)頁布局模板，可以使用這些模板輕松地創(chuàng)建框架網(wǎng)頁。具體步驟如下： （1） 在“文件”菜單的“新建”子菜單中選擇“網(wǎng)頁”命令。 （2） 出現(xiàn)“新建”對(duì)話框，選中“框架網(wǎng)頁”選項(xiàng)卡。 （3） 選擇所需的模板，如“目錄”模板。在“說明”區(qū)域中顯示所 選模板的描述，在“預(yù)覽”區(qū)域中可以預(yù)覽框架網(wǎng)頁的布局 。 （4） 單擊“確定”按鈕，完成框架網(wǎng)頁的創(chuàng)建 。 在窗口的底部出現(xiàn)了兩個(gè)新的標(biāo)簽，“無框架”視圖為不能支持框架 的瀏覽器創(chuàng)建替代網(wǎng)頁。“框架網(wǎng)頁HTML”視圖顯示框架網(wǎng)頁的HTML代碼。 在每個(gè)

50、框架中，單擊“新建網(wǎng)頁”按鈕，可以建立顯示在該框架中的新網(wǎng)頁。單擊“設(shè)置初始網(wǎng)頁”按鈕，可以建立與已經(jīng)存在網(wǎng)頁的超鏈接，從而在此框架中顯示出來。,2020/7/14,第九章 網(wǎng)頁制作,62,9.4.2創(chuàng)建框架,2 保存框架網(wǎng)頁 （1） 單擊“常用”工具欄中的“保存”按鈕。 （2） 出現(xiàn)“另存為”對(duì)話框，在右邊的框架網(wǎng)頁預(yù)覽圖中，其中一個(gè)框架高亮顯示，表示正在保存的該網(wǎng)頁 。 （3） 在“文件名”框中輸入網(wǎng)頁名稱。 （4） 單擊“更改”按鈕，設(shè)置網(wǎng)頁的標(biāo)題。 （5） 單擊“保存”按鈕，該網(wǎng)頁保存完畢，框架圖中的另一個(gè)框架處于高亮狀態(tài)。 （6） 重復(fù)步驟（3）至步驟（5）的操作。 （7） 當(dāng)對(duì)話框

51、中的整個(gè)框架圖處于高亮狀態(tài)時(shí)，表示此時(shí)正在保存框架網(wǎng)頁本身。 （8） 輸入框架網(wǎng)頁的文件名稱及標(biāo)題。 （9） 單擊“保存”按鈕。,2020/7/14,第九章 網(wǎng)頁制作,63,9.4.2創(chuàng)建框架,3拆分框架 當(dāng)使用模板創(chuàng)建的框架結(jié)構(gòu)不能滿足需要時(shí)，可以通過拆分框架，制作出更為復(fù)雜的框架網(wǎng)頁。操作步驟如下： （1）選擇要拆分的框架。 （2）在“框架”菜單中選擇“拆分框架”命令。 （3) 出現(xiàn)“拆分框架”對(duì)話框，根據(jù)需要選擇“拆分為列”或“拆分成行”選項(xiàng)。 （4）單擊“確定”按鈕完成拆分。 4刪除框架 可以從框架結(jié)構(gòu)中刪除指定的框架。此時(shí)，系統(tǒng)只是把框架從框架網(wǎng)頁中刪去，而此框架中的網(wǎng)頁文件仍然存在

52、。 操作步驟是：選擇要?jiǎng)h除的框架，在“框架”菜單中選擇“刪除框架”命令即可。,2020/7/14,第九章 網(wǎng)頁制作,64,9.4.2創(chuàng)建框架,5設(shè)置框架屬性 通過對(duì)框架屬性的設(shè)置，可以更改框架超鏈接的網(wǎng)頁、調(diào)整框架大小等。 基本操作如下： 選擇目標(biāo)框架，從“框架”菜單中選擇“框架屬性”命令，出現(xiàn)“框架屬性”對(duì)話框。 下面對(duì)“框架屬性”作如下說明： 名稱：為每個(gè)框架命名一個(gè)名稱。 初始網(wǎng)頁：這里顯示該框架超鏈接的網(wǎng)頁?？梢酝ㄟ^單擊“瀏覽”按鈕選擇一個(gè)網(wǎng)頁，改變?cè)谠摽蚣苤酗@示的網(wǎng)頁。 框架大小：輸入框架寬度和行高，確定框架的大小。 邊距：設(shè)置框架內(nèi)顯示的內(nèi)容與框架之間的距離。 顯示滾動(dòng)條：可以選擇

53、框架的滾動(dòng)條顯示狀態(tài)。,2020/7/14,第九章 網(wǎng)頁制作,65,9.4.3創(chuàng)建框架超鏈接,1創(chuàng)建框架超鏈接 若要設(shè)置框架超鏈接，執(zhí)行下列操作： （1） 選擇要定義超鏈接的文字或圖片。 （2） 單擊“常用”工具欄上的“超鏈接” 按鈕。 （3） 出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，在“URL”框中輸入鏈接的目標(biāo)網(wǎng)頁。 （4） 單擊“更改目標(biāo)框架” 按鈕，出現(xiàn)“目標(biāo)框架”對(duì)話框。 （5）在“當(dāng)前框架網(wǎng)頁”區(qū)域中單擊要用作目標(biāo)的框架 。 （6） 單擊“確定”按鈕，返回到“創(chuàng)建超鏈接”對(duì)話框，在“目標(biāo)框架”欄中顯示出設(shè)置的目標(biāo)框架名稱。 （7） 單擊“確定”按鈕。,2020/7/14,第九章 網(wǎng)頁制作,66,

54、9.4 網(wǎng)頁布局,2使用特殊的目標(biāo)框架 在指定目標(biāo)框架時(shí)，除了當(dāng)前的框架之外，還提供了一些特殊的框架來創(chuàng)建不同效果的目標(biāo)框架。這些特殊框架位于“目標(biāo)框架”對(duì)話框中的“公用的目標(biāo)區(qū)”區(qū)域。 相同框架：將鏈接得網(wǎng)頁顯示在包含該超鏈接的同一個(gè)框架內(nèi)。 整頁：將框架展開為整個(gè)窗口后，顯示鏈接網(wǎng)頁。 新建窗口：打開另為一個(gè)新窗口，顯示鏈接網(wǎng)頁。 父框架：在當(dāng)前框架的上層框架內(nèi)顯示鏈接網(wǎng)頁。,2020/7/14,第九章 網(wǎng)頁制作,67,9.5 創(chuàng)建表單頁面,表單是Web服務(wù)器與客戶交互的手段。 表單的作用就是收集瀏覽者的輸入信息，從而實(shí)現(xiàn)網(wǎng)站與瀏覽者的交互。例如，用戶可以用表單收集客戶的個(gè)人資料，用戶也可

55、以用表單設(shè)計(jì)一個(gè)訂貨單，讓客戶指定要購買的商品名稱、型號(hào)、數(shù)量等。 9.5.1 插入表單域 9.5.2 提交表單,2020/7/14,第九章 網(wǎng)頁制作,68,9.5.1插入表單域,表單是由表單域組成的，表單域是客戶輸入信息的區(qū)域。在FrontPage 2003中，有6種表單域：?jiǎn)涡形谋究?、滾動(dòng)文本框、復(fù)選框、單選按鈕、下拉菜單、普通按鈕。 1單行文本框 單行文本輸入框用于讓客戶輸入一行文字。要插入一個(gè)單行文本輸入框，使用“插入”菜單上的“表單”命令，再選擇“單行文本框”。 要設(shè)置單行文本框的屬性，可以右單擊單行文本框，在彈出的快捷菜單中選擇“表單屬性”命令，也可以直接雙擊單行文本框，F(xiàn)ront

56、Page 2003將打開“文本框?qū)傩浴睂?duì)話框。 首先，要為單行文本框命名。當(dāng)客戶提交表單時(shí)，單行文本框的名稱和內(nèi)容被配對(duì)發(fā)送給Web服務(wù)器端的表單處理程序。在“初始值”框內(nèi)可以鍵入默認(rèn)內(nèi)容。寬度框設(shè)置單行文本框的顯示寬度。如果該單行文本框用于輸入口令，則選擇密碼域?yàn)椤笆恰保跒g覽器中，用戶輸入時(shí)，內(nèi)容顯示為“*”號(hào)。 單擊“驗(yàn)證有效姓”按鈕，設(shè)置限制用戶輸入的規(guī)則。,2020/7/14,第九章 網(wǎng)頁制作,69,9.5.1插入表單域,2滾動(dòng)文本框 滾動(dòng)文本框允許客戶輸入多行文本。 要插人滾動(dòng)文本框，使用“插入”菜單上的“表單”命令，再選擇“滾動(dòng)文本框” 與單行文本框一樣，設(shè)置滾動(dòng)文本框的屬性，可

57、以右單擊滾動(dòng)文本框，在彈出的快捷菜單中選擇“表單域?qū)傩浴泵?，或直接雙擊滾動(dòng)文本框，F(xiàn)rontPage 2003將打開“滾動(dòng)文本框?qū)傩浴睂?duì)話框 。 3復(fù)選框 復(fù)選框是提供給客戶的一個(gè)選項(xiàng)，一般彼此獨(dú)立的多個(gè)復(fù)選框組成一組，客戶可以同時(shí)選中所有選項(xiàng)，也可以一個(gè)都不選。 要插入一個(gè)復(fù)選框，使用“插入”菜單上的“表單”命令，再選擇“復(fù)選框”。 要修設(shè)置選框的屬性，右單擊復(fù)選框，在彈出的菜單中選擇“表單屬性”命令，或直接雙擊復(fù)選框，F(xiàn)rontPage 2003將打開“復(fù)選框?qū)傩浴睂?duì)話框。 首先應(yīng)當(dāng)為復(fù)選框命名，當(dāng)客戶提交表單時(shí)，復(fù)選框的名稱和狀態(tài)配對(duì)發(fā)送給Web服務(wù)器端的表單處理程序。 用戶可以結(jié)出復(fù)

58、選框的初始狀態(tài)是選中還是不選中，使用Tab鍵按順序選定。,2020/7/14,第九章 網(wǎng)頁制作,70,9.5.1插入表單域,4單選按鈕 單選按鈕組成一組互斥的選項(xiàng)。只能選擇其中一項(xiàng)。 要插入單選按鈕，使用“插入”菜單上的“表單”命令，再選擇“單選按鈕”。 如果表單上有多個(gè)單選按鈕，F(xiàn)rontPage默認(rèn)選中第一個(gè)。 要修改單選按鈕的屬性，右單擊單選按鈕，在彈出的菜單中選擇“表單屬性”命令，或直接雙擊單選按鈕，F(xiàn)rontPage 2003將打開“單選按鈕屬性”對(duì)話框 。 要注意的是，如果把多個(gè)單選按鈕編成一組，必須使它們的組名相同。此外，可以單擊“驗(yàn)證有效性”按鈕，限定客戶按一定的規(guī)則做出選擇。

59、,2020/7/14,第九章 網(wǎng)頁制作,71,9.5.1插入表單域,5下拉菜單（下拉列表框） 下拉菜單用于從一個(gè)列表中選擇一個(gè)或幾個(gè)項(xiàng)，從功能的角度講，可以用一組復(fù)選框或一組單選按鈕來實(shí)現(xiàn)，但下拉菜單占用的空間相對(duì)較小。 要插入下拉菜單，使用“插入”菜單上的“表單”命令，再選擇“下拉菜單”。插入的下拉菜單是空的，用戶可以右單擊下拉菜單，在彈出的菜單中選擇“表單屬性”命令，或直接雙擊下拉菜單，F(xiàn)rontPage 2003將打開“下拉菜單屬性”對(duì)話框 。 單擊“添加”按鈕，將打開“添加選項(xiàng)”對(duì)話框 。 首先在“選項(xiàng)”框內(nèi)輸入名稱，當(dāng)客戶提交表單時(shí)，提交的是選項(xiàng)的名稱。如果想提交另外的值，應(yīng)當(dāng)選中“指定值”復(fù)選框，然后鍵人一個(gè)值。此外，用戶還可以指定選項(xiàng)的初始狀態(tài)是選定還是未選定。,2020/7/14,第九章 網(wǎng)頁制作,72,9.5.1插入表單域,6按鈕 一個(gè)表單上至少要有一個(gè)“提交”按鈕和一個(gè)“全部重寫”按鈕，“提交”按鈕的作用是把表單上的數(shù)據(jù)提交給Web服務(wù)器的表單處理程序，“全部重寫”按鈕的作用是把表單上的數(shù)據(jù)清空，以便重新填寫。 要插入按鈕，使用“插入”菜單上的“表單”命令，再選擇“按鈕”。 設(shè)置按鈕的