1、1,網(wǎng)頁(yè)制作軟件FrontPage 2003,2,2,山,網(wǎng)頁(yè)制作軟件FrontPage 2003,1 FrontPage 2003概述 2 網(wǎng)頁(yè)基本元素編輯 3 網(wǎng)頁(yè)布局 4 表單應(yīng)用 5 網(wǎng)站發(fā)布及管理,2,3,山,1 FrontPage 2003概述,1.1 功能特點(diǎn) 1.2 窗口界面 1.3 基本操作,2,4,山,1.1 功能特點(diǎn),FrontPage讓初學(xué)者無(wú)需掌握HTML語(yǔ)言或具備編程基礎(chǔ)知識(shí)便能夠編寫出界面優(yōu)美、功能完善的網(wǎng)站。下面簡(jiǎn)單介紹一下FrontPage的特點(diǎn)。 “所見即所得”的網(wǎng)頁(yè)編輯環(huán)境，也就是說(shuō)，用戶在網(wǎng)頁(yè)編輯窗口中看到的效果就是瀏覽器中顯示的效果。 易學(xué)易用的操作界

2、面，像其它Office套件一樣，在FrontPage中集成了大量的網(wǎng)頁(yè)模板和網(wǎng)站向?qū)?，讓用戶很方便快捷地制作出?yōu)美的網(wǎng)頁(yè)。 功能強(qiáng)大的新版本FrontPage融合了網(wǎng)頁(yè)管理、網(wǎng)頁(yè)編輯、網(wǎng)頁(yè)發(fā)布和網(wǎng)站維護(hù)等多種功能，利用FrontPage制作的網(wǎng)頁(yè)支持最新的網(wǎng)頁(yè)標(biāo)準(zhǔn)，比如DHTML、XML、CSS2等等。,2,5,山,1.2 窗口界面,FrontPage 2003主界面主要由菜單欄、工具欄、視圖欄、狀態(tài)欄、主編輯窗口和任務(wù)窗格等6大部分組成。,2,6,山,“網(wǎng)頁(yè)”視圖,選擇【視圖】【網(wǎng)頁(yè)】命令，打開網(wǎng)頁(yè)視圖。 網(wǎng)頁(yè)視圖是FrontPage中最常用的工作界面，網(wǎng)頁(yè)的創(chuàng)建、編輯、預(yù)覽等基本操作都是在

3、此視圖中進(jìn)行的。網(wǎng)頁(yè)視圖窗口底部有4個(gè)標(biāo)簽：“設(shè)計(jì)”、“拆分”、“代碼”和“預(yù)覽”，它們分別控制著網(wǎng)頁(yè)的4種顯示模式。在設(shè)計(jì)模式下，能夠以“所見即所得”的方式編輯網(wǎng)頁(yè)；在代碼模式下，可以查看或編輯網(wǎng)頁(yè)的HTML的源代碼；在預(yù)覽模式下，可以預(yù)覽網(wǎng)頁(yè)的效果；在拆分模式下，能夠同時(shí)編輯網(wǎng)頁(yè)和查看或編輯網(wǎng)頁(yè)的HTML的源代碼。,2,7,山,“網(wǎng)頁(yè)”視圖,2,8,山,“文件夾”視圖,單擊 “視圖”欄中的“文件夾”圖標(biāo)或選擇【視圖】【文件夾】命令，打開文件夾視圖。 在文件夾視圖下，網(wǎng)站顯示為一組文件和文件夾。在此視圖下可以對(duì)網(wǎng)站中的文件夾和各種文件進(jìn)行管理。,2,9,山,“報(bào)表”視圖,單擊“視圖”欄中的“

4、報(bào)表”圖標(biāo)或選擇【視圖】【報(bào)表】命令，打開報(bào)表視圖。 通過(guò)報(bào)表視圖，可以在運(yùn)行報(bào)表查詢后分析網(wǎng)站內(nèi)容。,2,10,山,“導(dǎo)航”視圖,單擊“視圖”欄中的“導(dǎo)航”圖標(biāo)或選擇【視圖】【導(dǎo)航】命令，打開導(dǎo)航視圖。 導(dǎo)航視圖用于管理網(wǎng)站中各網(wǎng)頁(yè)的層次關(guān)系結(jié)構(gòu)圖。可以通過(guò)鼠標(biāo)將結(jié)構(gòu)圖中的網(wǎng)頁(yè)拖到新位置來(lái)改變鏈接結(jié)構(gòu)。,2,11,山,“超鏈接”視圖,單擊“視圖”欄中“超鏈接”圖標(biāo)或選擇【視圖】【超鏈接】命令。 超鏈接視圖用于管理網(wǎng)站中網(wǎng)頁(yè)的超鏈接。,2,12,山,“任務(wù)”視圖,單擊“視圖”欄中的“任務(wù)”圖標(biāo)或選擇【視圖】【任務(wù)】命令，可打開任務(wù)視圖。 任務(wù)視圖可以實(shí)現(xiàn)網(wǎng)站任務(wù)的管理。網(wǎng)站的任務(wù)是指網(wǎng)站管理人

5、員維護(hù)網(wǎng)站的任務(wù)，包括網(wǎng)頁(yè)的更新和網(wǎng)站的檢查等。,2,13,山,“遠(yuǎn)程網(wǎng)站”視圖,可以使用“遠(yuǎn)程網(wǎng)站”視圖發(fā)布整個(gè)網(wǎng)站，或有選擇地發(fā)布個(gè)別文件。還可以在兩個(gè)或多個(gè)位置之間同步文件，即確保包含相同內(nèi)容的網(wǎng)站都包含最新的更改。,2,14,山,1.3基本操作,1網(wǎng)站的規(guī)劃 2網(wǎng)站的基本操作 3網(wǎng)頁(yè)的基本操作,2,15,山,網(wǎng)站的規(guī)劃,首先要明確建立網(wǎng)站的目的。 其次要明確網(wǎng)站的瀏覽者群。 最后要考慮到如何能夠便于網(wǎng)站的日常維護(hù)。,2,16,山,網(wǎng)站的基本操作,1) 創(chuàng)建網(wǎng)站 創(chuàng)建一個(gè)Web網(wǎng)站有兩種方法。第一種方法是利用FrontPage的Web網(wǎng)站模板和向?qū)?，這種方法操作簡(jiǎn)單、速度快，比較適合建立

6、大、中型的Web網(wǎng)站。第二種方法是逐個(gè)地創(chuàng)建網(wǎng)頁(yè)文件，然后創(chuàng)建它們之間的鏈接關(guān)系，這種方法適合于網(wǎng)頁(yè)數(shù)量不多的小型網(wǎng)站。 使用FrontPage模板創(chuàng)建網(wǎng)站的步驟： 啟動(dòng)FrontPage應(yīng)用程序； 選擇【文件】【新建】命令，打開“新建”任務(wù)窗格； 選擇網(wǎng)站模板，在“新建網(wǎng)站”欄選擇“由一個(gè)網(wǎng)頁(yè)組成的網(wǎng)站”，打開“網(wǎng)站模板”對(duì)話框，在“指定新網(wǎng)站的位置”文本框中輸入新網(wǎng)站的位置及名稱，然后單擊“確定”按鈕。,2,17,山,2）關(guān)閉網(wǎng)站 選擇【文件】【關(guān)閉網(wǎng)站】命令。 關(guān)閉網(wǎng)站即關(guān)閉網(wǎng)站及該網(wǎng)站下的所有網(wǎng)頁(yè)。 3）打開網(wǎng)站 選擇【文件】【打開網(wǎng)站】命令，“打開網(wǎng)站”對(duì)話框。 選擇網(wǎng)站名稱，然后單

7、擊“打開”按鈕。,網(wǎng)站的基本操作,2,18,山,網(wǎng)頁(yè)的基本操作,1）新建網(wǎng)頁(yè) 在FrontPage 2003中可以直接創(chuàng)建一個(gè)空白網(wǎng)頁(yè)，也可以利用網(wǎng)頁(yè)模板和網(wǎng)頁(yè)向?qū)?lái)創(chuàng)建。 在某網(wǎng)站中創(chuàng)建新網(wǎng)頁(yè)，在此網(wǎng)站的文件夾視圖和導(dǎo)航視圖方式下單擊視圖窗口右上角的“新建網(wǎng)頁(yè)”按鈕。 創(chuàng)建不屬于某網(wǎng)站的新網(wǎng)頁(yè)，在任何視圖方式下，選擇【文件】【新建】命令，打開“新建”任務(wù)窗格，可在新建任務(wù)窗格中，選擇一種合適的模板新建網(wǎng)頁(yè)；或者單擊常用工具欄上的“新建”按鈕 。,2,19,山,2）打開網(wǎng)頁(yè) 打開當(dāng)前網(wǎng)站中的網(wǎng)頁(yè)，在任何視圖中雙擊該網(wǎng)頁(yè)圖標(biāo)或文件名即可打開網(wǎng)頁(yè)。 打開其它網(wǎng)站中的網(wǎng)頁(yè)，選擇【文件】【打開】命令，

8、在“打開文件”對(duì)話框中選擇具體網(wǎng)頁(yè)文件打開。 3）保存網(wǎng)頁(yè) 保存當(dāng)前網(wǎng)站中的網(wǎng)頁(yè)，單擊工具欄中的保存按鈕，或【文件】【保存】命令即可。如果網(wǎng)頁(yè)中有圖片，則會(huì)彈出“保存嵌入式文件”對(duì)話框，提示保存圖片文件。 保存不屬于當(dāng)前網(wǎng)站中的網(wǎng)頁(yè)，則需要指定保存路徑。 4）關(guān)閉網(wǎng)頁(yè) 選擇【文件】【關(guān)閉】命令。這種方式關(guān)閉的僅是當(dāng)前網(wǎng)頁(yè)，要注意與關(guān)閉網(wǎng)站的區(qū)別。,網(wǎng)頁(yè)的基本操作,2,20,山,2 網(wǎng)頁(yè)基本元素編輯,2.1 文本編輯 2.2 圖像編輯 2.3 超鏈接創(chuàng)建 2.4 Web組件,2,21,山,2.1文本編輯,1文本添加 2設(shè)置段落和文本格式 3插入水平線 4設(shè)置網(wǎng)頁(yè)屬性,2,22,山,文本添加,在網(wǎng)

9、頁(yè)中添加文本與在Word中添加文本的操作基本相同。此外，在網(wǎng)頁(yè)中輸入文本時(shí)，如果已經(jīng)達(dá)到網(wǎng)頁(yè)邊界，則文本會(huì)自動(dòng)回滾到下一行繼續(xù)輸入，這種換行方式并不會(huì)產(chǎn)生新行或是一個(gè)新段落，隨著網(wǎng)頁(yè)邊界的變化或是編輯窗口的調(diào)整，F(xiàn)rontPage 2003會(huì)自動(dòng)調(diào)整這個(gè)回滾位置。 按下+鍵將產(chǎn)生新行，即換行，新行與上一行之間沒有回滾關(guān)系。 按下鍵產(chǎn)生一個(gè)新段落。,2,23,山,設(shè)置段落和文本格式,可以使用格式工具欄（如圖7.2.1所示）或“字體”和“段落”對(duì)話框?qū)ξ谋竞投温涞母袷竭M(jìn)行設(shè)置。其操作方法跟Word基本相同。,2,24,山,插入水平線,為了修飾頁(yè)面，明顯區(qū)分開標(biāo)題與正文，可選擇【插入】【水平線】命令

10、在當(dāng)前光標(biāo)點(diǎn)插入一條水平線。雙擊水平線或選擇【格式】【屬性】命令彈出“水平線屬性”對(duì)話框，可對(duì)水平線的高度、寬度、顏色和對(duì)齊方式進(jìn)行設(shè)置。,2,25,山,設(shè)置網(wǎng)頁(yè)屬性,網(wǎng)頁(yè)屬性是一個(gè)網(wǎng)頁(yè)整體的屬性，記錄關(guān)于網(wǎng)頁(yè)的非頁(yè)面部分的相關(guān)信息。適當(dāng)?shù)脑O(shè)置可以達(dá)到增加網(wǎng)頁(yè)美觀和縮減網(wǎng)頁(yè)文件大小的效果。 方法一：右擊頁(yè)面，從彈出的快捷菜單中選擇“網(wǎng)頁(yè)屬性”命令。 方法二：選擇【格式】【背景】命令； 方法三：選擇【文件】【屬性】命令；,2,26,山,2.2圖像編輯,1插入圖像 2編輯圖像 3設(shè)置圖片屬性,2,27,山,插入圖像,插入一幅關(guān)于“背景”的剪貼畫的操作步驟： 將插入點(diǎn)定位在需要插入圖片的位置； 選擇

11、【插入】【圖片】【剪貼畫】命令，打開“剪貼畫”任務(wù)窗格，如圖所示； 在任務(wù)窗格中，用戶可在“搜索文字”文本框中輸入剪貼畫的關(guān)鍵字“背景”； 單擊“搜索”按鈕開始搜索，在任務(wù)窗格下方列表框中列出了搜索到的剪貼畫； 單擊剪貼畫右側(cè)的下三角按鈕，彈出剪貼畫的快捷菜單，單擊“插入”命令即可。,2,28,山,剪貼畫是軟件（microsoft office）自帶的，它是一些wmf格式（當(dāng)然也有的是emf格式的）的矢量圖，軟件中有很多分類，它插入到ppt中，背景是透明的，不會(huì)影響后面的內(nèi)容，而普通圖片做不到。這些剪貼畫放在了C:Program FilesMicrosoft Officemedia，文件夾下，

12、而圖片的畫包含了各種格式，是從（軟件）外部插入的，一般有jpg，jpeg，bmp，gif等格式。 而自選圖形是利用軟件的繪圖工具欄里的繪圖工具繪制出來(lái)的各種幾何圖形。 這三種都可稱為圖，插到ppt中都有八個(gè)控制點(diǎn)，外加一個(gè)旋轉(zhuǎn)控制點(diǎn)。,2,29,山,插入來(lái)自文件的圖片的操作步驟： 將插入點(diǎn)定位在需要插入圖片的位置； 將插入點(diǎn)定位在需要插入圖片的位置； 選擇【插入】【圖片】【來(lái)自文件】命令，或單擊“常用”工具欄中“插入圖片”按鈕； 打開“圖片”對(duì)話框，選擇所需文件，單擊“插入”按鈕。,插入圖像,2,30,山,編輯圖像,在網(wǎng)頁(yè)中插入圖像后，還可對(duì)圖像進(jìn)行編輯。用鼠標(biāo)單擊選取圖像，在屏幕上就會(huì)出現(xiàn)“

13、圖片”工具欄。利用“圖片”工具欄可對(duì)圖片進(jìn)行旋轉(zhuǎn)、剪裁、沖蝕，設(shè)置凹凸效果、透明背景色，調(diào)整亮度、對(duì)比度以及在圖片中加入文字等。選中圖片后，拖動(dòng)圖片周圍的控點(diǎn)可改變圖片大小。,2,31,山,設(shè)置圖片屬性,選定所需的圖片，單擊鼠標(biāo)右鍵，從快捷菜單中選擇“圖片屬性”命令，彈出“圖片屬性”對(duì)話框。在對(duì)話框的“常規(guī)”和“外觀”兩個(gè)選項(xiàng)卡中進(jìn)行設(shè)置，可以做出各種圖文混排的頁(yè)面效果。,2,32,山,2.3 超鏈接創(chuàng)建,1選擇鏈接的載體 2選擇鏈接的目標(biāo) 3指定目標(biāo)窗口 4驗(yàn)證超級(jí)鏈接 5設(shè)置超鏈接的狀態(tài)顏色 6圖像映射,2,33,山,超鏈接是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的地的指針，這個(gè)目的地可以是另一個(gè)網(wǎng)頁(yè)或同

14、一個(gè)網(wǎng)頁(yè)中的其他位置，也可以是一個(gè)電子郵件、一個(gè)Word文檔或者是一個(gè)應(yīng)用程序。 創(chuàng)建超鏈接的步驟： 選擇鏈接的載體； 選擇鏈接的目標(biāo)； 指定目標(biāo)窗口。,2.3 超鏈接創(chuàng)建,2,34,山,選擇鏈接的載體,鏈接的載體是顯示鏈接的頁(yè)面元素。將鼠標(biāo)指針移到包含超鏈接的文字或圖像上時(shí)，鼠標(biāo)指針就會(huì)變成形狀，當(dāng)瀏覽者單擊此文本串或圖像，瀏覽器將打開相應(yīng)地址的網(wǎng)頁(yè)。 選定鏈接的載體后，單擊“常用”工具欄上“插入超鏈接”按鈕，或選擇【插入】【超級(jí)鏈】命令，打開“插入超鏈接”對(duì)話框。,2,35,山,選擇鏈接的目標(biāo),鏈接的目標(biāo)包括原有文件或網(wǎng)頁(yè)、本文檔中的位置（書簽）、新建文檔、電子郵件等。根據(jù)跳轉(zhuǎn)目的地的不同

15、，網(wǎng)頁(yè)中鏈接可分為4種類型。 1）原有文件或網(wǎng)頁(yè)直接跳轉(zhuǎn)到已經(jīng)存在的某一網(wǎng)頁(yè)或文件。 如果是本網(wǎng)站內(nèi)的網(wǎng)頁(yè)，可用光標(biāo)在“插入超鏈接”對(duì)話框列表文件中選擇。 如果是本機(jī)上其它網(wǎng)站中的網(wǎng)頁(yè)，則選擇“插入超鏈接”對(duì)話框中的按鈕，或從“查找范圍”中選擇相應(yīng)的網(wǎng)站，再選擇所需網(wǎng)頁(yè)。 如果是Internet上其它網(wǎng)站的某一網(wǎng)頁(yè)，可單擊按鈕打開瀏覽器找到該頁(yè)面后，該頁(yè)面的網(wǎng)址會(huì)自動(dòng)出現(xiàn)在“地址”欄；也可以直接在地址欄文本框中輸入該網(wǎng)頁(yè)的地址。,2,36,山,2）本文檔中的位置是直接跳轉(zhuǎn)到本網(wǎng)頁(yè)中的某書簽標(biāo)志的位置。要進(jìn)行此鏈接操作，必須先用【插入】【書簽】命令在網(wǎng)頁(yè)中的某些位置插入書簽； 在“插入超鏈接”對(duì)

16、話框中單擊“本文檔中的位置”，然后選擇該網(wǎng)頁(yè)上的書簽，將會(huì)在書簽位置創(chuàng)建一超鏈接。,選擇鏈接的目標(biāo),2,37,山,3）新建文檔可以將當(dāng)前選中的鏈接的載體鏈接到一個(gè)新建的頁(yè)面上。單擊“新建文檔”按鈕，在“新建文檔名稱”欄填寫該網(wǎng)頁(yè)的名稱。,選擇鏈接的目標(biāo),2,38,山,4）單擊“電子郵件地址”按鈕，在“電子郵件地址”欄填寫目標(biāo)電子郵件地址，可創(chuàng)建一個(gè)到電子郵件的鏈接。,選擇鏈接的目標(biāo),2,39,山,指定目標(biāo)窗口,鏈接的目標(biāo)網(wǎng)頁(yè)選定后，可以指定目標(biāo)網(wǎng)頁(yè)是在本窗口中顯示還是在新打開的瀏覽器窗口中顯示。單擊“插入超鏈接”對(duì)話框中“目標(biāo)框架”按鈕，打開“目標(biāo)框架” 對(duì)話框，。指定鏈接的目標(biāo)網(wǎng)頁(yè)的目標(biāo)窗口

17、，默認(rèn)是在當(dāng)前窗口中打開目標(biāo)網(wǎng)頁(yè)。 “公用的目標(biāo)區(qū)”列表框選項(xiàng)含義如下： 相同框架：鏈接的目標(biāo)網(wǎng)頁(yè)顯示在包含該超鏈接的同一個(gè)框架內(nèi)。 整頁(yè)：將框架展開為全窗口后顯示鏈接的目標(biāo)網(wǎng)頁(yè)。 新建窗口：另外打開一個(gè)瀏覽窗口顯示鏈接的目標(biāo)網(wǎng)頁(yè)。 父框架：如果是一頁(yè)套一頁(yè)的框架網(wǎng)頁(yè)，選擇父框架可以回到上一層框架顯示鏈接的目標(biāo)網(wǎng)頁(yè)。,2,40,山,驗(yàn)證超級(jí)鏈接,上面的三個(gè)步驟設(shè)置完成后，超鏈接的創(chuàng)建便完成了。接下來(lái)有必要驗(yàn)證一下超鏈接是否正確，可用如下的方法來(lái)驗(yàn)證： 網(wǎng)頁(yè)的設(shè)計(jì)視圖中，把鼠標(biāo)移到已經(jīng)創(chuàng)建了超鏈接的載體上（文字、圖像），鼠標(biāo)變成手狀，按下鍵，然后單擊鼠標(biāo)，便可驗(yàn)證鏈接目的地。 在網(wǎng)頁(yè)的預(yù)覽視圖中

18、，用鼠標(biāo)單擊創(chuàng)建了鏈接的載體，便可驗(yàn)證鏈接目的地。,2,41,山,設(shè)置超鏈接的狀態(tài)顏色,在瀏覽器中瀏覽網(wǎng)頁(yè)時(shí)，已經(jīng)訪問(wèn)過(guò)的超鏈接、尚未訪問(wèn)過(guò)的超鏈接和正在訪問(wèn)的超鏈接應(yīng)有不同的顏色顯示，使瀏覽者一目了然。 設(shè)置超鏈接的狀態(tài)顏色方法：選擇【格式】【背景】命令，打開“網(wǎng)頁(yè)屬性”對(duì)話框。選中“背景”選項(xiàng)卡，對(duì)與超鏈接有關(guān)的部分進(jìn)行設(shè)置。,2,42,山,圖像映射 視圖-工具欄-圖片,圖像映射也稱MAP技術(shù)，是指在一幅圖像上建立不同形狀的熱點(diǎn)區(qū)域，每一個(gè)區(qū)域都是一個(gè)超鏈接。制作步驟如下： 選定要制作圖像映射的圖片，此時(shí)屏幕會(huì)顯示出“圖片”工具欄，在“圖片”工具欄上有5個(gè)專門是為圖像映射功能設(shè)置的。 單擊

19、“圖片”工具欄中一種熱點(diǎn)形式，并將光標(biāo)移到要制作圖像映射的圖片中，光標(biāo)變成鉛筆形狀然后用鼠標(biāo)在圖片中拖動(dòng)出一個(gè)矩形區(qū)域。 松開鼠標(biāo)后，出現(xiàn)“創(chuàng)建超鏈接”對(duì)話框，從中可設(shè)置該熱點(diǎn)的鏈接目標(biāo)。,2,43,山,2.4 Web組件,1字幕 2交互式按鈕 3橫幅廣告 4計(jì)數(shù)器,2,44,山,字幕,字幕是在瀏覽器中能夠水平滾動(dòng)的文字，其文字具有動(dòng)態(tài)特點(diǎn)，可以用于發(fā)布網(wǎng)站的通知和提示信息。其操作步驟如下： 選擇插入字幕的位置； 選擇【插入】【W(wǎng)eb組件】命令； 選擇“選擇一種效果”列表中的“字幕”選項(xiàng)，然后單擊“完成”按鈕，打開“字幕屬性”對(duì)話框； 設(shè)置字幕屬性，如在文本框中輸入滾動(dòng)的文字，選擇滾動(dòng)方向等，

20、然后單擊“確定”按鈕，便完成滾動(dòng)字幕的插入； 切換到預(yù)覽視圖，觀看滾動(dòng)字幕的效果。 更改字幕屬性，在網(wǎng)頁(yè)設(shè)計(jì)視圖下雙擊該字幕，或選中字幕單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“字幕屬性”，便可彈出字幕屬性對(duì)話框。,2,45,山,交互式按鈕,交互式按鈕也稱懸停按鈕，是一種可以變化的按鈕。當(dāng)將鼠標(biāo)指針移到交互式按鈕上時(shí)，它會(huì)變成新的樣子；當(dāng)鼠標(biāo)指針離開交互式按鈕時(shí)，它又會(huì)自動(dòng)變回到原來(lái)的樣子。交互式按鈕一般用在導(dǎo)航條中。 在網(wǎng)頁(yè)中插入交互式按鈕操作步驟如下： 選擇插入交互式按鈕的位置； 選擇【插入】【W(wǎng)eb組件】命令，打開如上圖所示的對(duì)話框； 選擇“選擇一種效果”列表中的“交互式按鈕”選項(xiàng)，然后單擊

21、“完成”按鈕，打開“交互式按鈕”屬性對(duì)話框； 設(shè)置交互式按鈕屬性，然后單擊“確定”按鈕，便完成交互式按鈕的插入； 切換到預(yù)覽視圖，查看交互式按鈕的效果。,2,46,山,設(shè)置交互式按鈕的屬性： 在按鈕選項(xiàng)卡下，在“文本”屬性框中輸入按鈕上顯示的文字；在“鏈接”屬性框中設(shè)置鏈接的目的地；按鈕列表框中選擇按鈕的樣式等。 在字體選項(xiàng)卡下，可以設(shè)置按鈕上的文字的相關(guān)格式。 在圖像選項(xiàng)卡下，可以設(shè)置按鈕上顯示的圖像及屬性。 更改交互式按鈕屬性，在網(wǎng)頁(yè)設(shè)計(jì)視圖下雙擊該按鈕，或選中該按鈕右擊，在彈出的快捷菜單中選擇“按鈕屬性”命令，便可彈出交互式按鈕屬性對(duì)話框。,交互式按鈕,2,47,山,Dreamweave

22、r 里設(shè)置鼠標(biāo)懸停下拉菜單,2,48,山,橫幅廣告,橫幅廣告的動(dòng)畫形式就像一幅不停變換著的廣告牌。 在網(wǎng)頁(yè)中插入橫幅廣告的操作步驟： 選擇插入位置； “工具”菜單-“自定義”-命令-“插入”-“橫幅廣告管理器” 選擇【插入】【橫幅廣告管理器】命令，打開“橫幅廣告管理器屬性”對(duì)話框； 選擇屬性對(duì)話框中的“添加”按鈕，添加要顯示的圖片（至少要有兩幅圖片才能變換顯示）； 高度、寬度屬性設(shè)置圖片的顯示框的大??；過(guò)渡效果設(shè)置圖片的顯示效果。 切換到預(yù)覽視圖，查看橫幅廣告的效果。,2,49,山,計(jì)數(shù)器,計(jì)數(shù)器可以統(tǒng)計(jì)并顯示網(wǎng)頁(yè)的訪問(wèn)次數(shù)。你可以在網(wǎng)站的主頁(yè)上添加一個(gè)計(jì)數(shù)器，這樣就可以知道該網(wǎng)站的訪問(wèn)次數(shù)。

23、 只有在發(fā)布網(wǎng)站之后，才可以對(duì)計(jì)數(shù)器進(jìn)行測(cè)試以確保它可以正確工作。 提示：計(jì)數(shù)器要能正常工作，網(wǎng)站必須發(fā)布到安裝有FrontPage ServerExtensions（支持在FrontPage中進(jìn)行創(chuàng)作并能擴(kuò)展Web服務(wù)器功能的程序和腳本的集合）、SharePoint Team Services v1.0 from Microsoft或Microsoft Windows SharePoint Services 2.0 的Web服務(wù)器上。,2,50,山,3 網(wǎng)頁(yè)布局,3.1 表格布局 3.2 框架布局,2,51,山,3.1 表格布局,1創(chuàng)建表格 2編輯表格 3設(shè)置表格和單元格的屬性 4實(shí)例,2,

24、52,山,表格在網(wǎng)頁(yè)制作中的作用有以下兩個(gè)方面： 用于顯示有一定格式的數(shù)據(jù)和信息。 用于對(duì)整個(gè)網(wǎng)頁(yè)版面的控制，組織數(shù)據(jù)、排列網(wǎng)頁(yè)元素(文本、圖像、視頻等)的空間位置。 表格在網(wǎng)頁(yè)中的使用比較多，表格的引入使網(wǎng)頁(yè)變得整齊美觀。許多漂亮的網(wǎng)頁(yè)都是利用表格實(shí)現(xiàn)布局的。,3.1 表格布局,2,53,山,創(chuàng)建表格,在FrontPage中表格的創(chuàng)建和編輯同在Word中相似。 創(chuàng)建表格的基本方法： 使用“常用”工具欄中的“插入表格”按鈕。 選擇【表格】【插入】【表格】命令。 選擇【表格】【繪制表格】命令。用鼠標(biāo)控制畫筆繪制任意表格。,2,54,山,編輯表格,表格繪制好后，根據(jù)需要對(duì)表格中的文字進(jìn)行編輯，對(duì)行

25、高列寬進(jìn)行調(diào)整，對(duì)表格的行、列、單元格可作增加或刪除操作。具體操作與在Word中一樣。,2,55,山,設(shè)置表格和單元格的屬性,在表格內(nèi)任意位置右擊，在出現(xiàn)快捷菜單中選擇“表格屬性”選項(xiàng)，或選擇【表格】【表格屬性】【表格】命令，彈出“表格屬性”對(duì)話框，可對(duì)表格的布局、邊框和背景進(jìn)行設(shè)置。 在某一單元格內(nèi)右擊，在彈出的快捷菜單中選擇“單元格屬性”命令，彈出“單元格屬性”對(duì)話框，可對(duì)該單元格的布局、邊框和背景進(jìn)行設(shè)置。,2,56,山,3.2 框架布局,1創(chuàng)建框架網(wǎng)頁(yè) 2框架的編輯 3框架屬性的設(shè)置,2,57,山,框架是一種特殊的網(wǎng)頁(yè)，它將瀏覽器窗口劃分成功能獨(dú)立的幾個(gè)部分，每部分是一個(gè)框架，每個(gè)框架

26、分別對(duì)應(yīng)于一個(gè)獨(dú)立的網(wǎng)頁(yè)，這樣可以在一個(gè)窗口上同時(shí)觀看到多個(gè)頁(yè)面組成的信息界面。各個(gè)框架之間還可以設(shè)置超鏈接。很多網(wǎng)站都具有這樣的結(jié)構(gòu)。,3.2 框架布局,2,58,山,創(chuàng)建框架網(wǎng)頁(yè),創(chuàng)建框架網(wǎng)頁(yè)的步驟如下所示： 選擇【文件】【新建】命令，出現(xiàn)“新建網(wǎng)頁(yè)或網(wǎng)站”任務(wù)窗格； 單擊“其他網(wǎng)頁(yè)模板”命令，彈出“網(wǎng)頁(yè)模板”對(duì)話框； 選中“框架網(wǎng)頁(yè)”選項(xiàng)卡，在列表中選擇所需的模板 。 單擊“確定”按鈕，建立了一個(gè)新的框架網(wǎng)頁(yè)。,2,59,山,在框架網(wǎng)頁(yè)每一個(gè)子窗口中都有兩個(gè)按鈕，單擊“新建網(wǎng)頁(yè)”按鈕，一個(gè)新的空白網(wǎng)頁(yè)就會(huì)出現(xiàn)在框架中；單擊“設(shè)置初始網(wǎng)頁(yè)”按鈕，彈出“插入超鏈接”對(duì)話框，在對(duì)話框中選擇某一

27、目標(biāo)網(wǎng)頁(yè)作為此框架的初始網(wǎng)頁(yè)。,創(chuàng)建框架網(wǎng)頁(yè),2,60,山,框架網(wǎng)頁(yè)的保存。單擊“常用”工具欄上的“保存”按鈕，則會(huì)彈出“另存為”對(duì)話框。則依次把框架網(wǎng)頁(yè)中的“新建網(wǎng)頁(yè)”保存完后，再保存“框架集文件” 。對(duì)話框右側(cè)為框架示意圖，深藍(lán)色框突出顯示表示正在保存的框架。,創(chuàng)建框架網(wǎng)頁(yè),2,61,山,框架的編輯,對(duì)于已經(jīng)建立好的框架網(wǎng)頁(yè)，可以再對(duì)它進(jìn)行編輯，比如對(duì)某個(gè)框架再拆分或刪除，重新進(jìn)行框架布局。 1）拆分框架 單擊選定要拆分的框架，選擇【框架】【拆分框架】命令，打開“拆分框架”對(duì)話框，根據(jù)需要選擇“拆分為列”或“拆分成行”。 2）刪除框架 先單擊選定要?jiǎng)h除的框架，再選擇【框架】【刪除框架】命令

28、。,2,62,山,框架屬性的設(shè)置,選中需要設(shè)置的框架，選擇【框架】【框架屬性】命令；或者單擊鼠標(biāo)右鍵，從快捷菜單中選擇“框架屬性”菜單項(xiàng)，打開“框架屬性”對(duì)話框。 “框架大小”有百分比、相對(duì)大小、象素值三種設(shè)置方式。 “邊距”可以設(shè)置框架內(nèi)容和框架邊框之間的距離。 “顯示滾動(dòng)條”列表中各個(gè)選項(xiàng)表示：“需要時(shí)顯示”選項(xiàng)，當(dāng)瀏覽器窗口太小不能放下框架的全部?jī)?nèi)容時(shí)，滾動(dòng)條就會(huì)出現(xiàn)；“不顯示”選項(xiàng)，無(wú)論什么情況，滾動(dòng)條都不會(huì)出現(xiàn)；“始終顯示”選項(xiàng)，滾動(dòng)條自始至終都會(huì)出現(xiàn)，即使它們不需要時(shí)也會(huì)出現(xiàn)。 顯示或隱藏框架周圍的邊框：?jiǎn)螕簟斑x項(xiàng)”右邊的“框架網(wǎng)頁(yè)”按鈕，選中或清除“顯示邊框”復(fù)選框。,2,63,

29、山,4 表單應(yīng)用,4.1 創(chuàng)建表單網(wǎng)頁(yè) 4.2 發(fā)布表單網(wǎng)頁(yè),2,64,山,4.1 創(chuàng)建表單網(wǎng)頁(yè),創(chuàng)建表單網(wǎng)頁(yè)有兩種方法，一種是利用FrontPage提供的模板或向?qū)Э梢钥焖賱?chuàng)建表單網(wǎng)頁(yè)；另一種是使用表單域來(lái)定制表單。 下面以插入表單域來(lái)定制表單為例，說(shuō)明創(chuàng)建表單的操作方法： 插入表單。選擇【插入】【表單】【表單】命令；或用鼠標(biāo)拖動(dòng)子菜單頂部就會(huì)出現(xiàn)“表單”工具欄，再單擊“表單”工具欄中的“表單”按鈕。此時(shí)，會(huì)出現(xiàn)一個(gè)由虛線框表示的表單框，表單內(nèi)只有“提交”按鈕和“重置”按鈕。 插入表單域。為了使表單中的每個(gè)表單域?qū)R，在創(chuàng)建表單域之前在表單中插入表格。然后依次插入各表單域。 設(shè)置表單域?qū)傩浴?/p>

30、表單網(wǎng)頁(yè)布局設(shè)計(jì)好以后，還需要對(duì)表單域?qū)傩赃M(jìn)行設(shè)置，才能使表單正常工作。,2,65,山,下面分別介紹按鈕、單行文本框、復(fù)選框表單域的屬性設(shè)置。 在頁(yè)面中雙擊相應(yīng)的表單域，或右擊此表單域，彈出快捷菜單，選擇“表單域?qū)傩浴泵?，就可打開其屬性對(duì)話框，對(duì)該表單域進(jìn)行屬性設(shè)置。 1）“按鈕屬性”對(duì)話框如圖所示。“值/標(biāo)簽”設(shè)置按鈕上顯示的文字。按鈕的類型可設(shè)置按鈕的功能。 “重置”類型按鈕，可以清除表單內(nèi)的所有內(nèi)容，所有表單域都恢復(fù)原始設(shè)置。 “提交”類型按鈕，可以把訪問(wèn)者填寫的表單內(nèi)容發(fā)送到表單按鈕指定的網(wǎng)頁(yè)或相關(guān)程序。 “普通”類型按鈕，用戶可調(diào)用自己編寫的程序處理表單中的數(shù)據(jù)，定制表單功能。,4

31、.1 創(chuàng)建表單網(wǎng)頁(yè),2,66,山,2）單行文本框的表單域適合訪問(wèn)者做簡(jiǎn)單回答，如姓名、密碼、電話號(hào)碼等。 “名稱”屬性：用于設(shè)置該表單域的名稱，通過(guò)這個(gè)名稱表單與Web服務(wù)器才能進(jìn)行交流。 “初始值”屬性：設(shè)置文本框中顯示的默認(rèn)值。 “寬度”屬性：設(shè)置文本框的寬度，但不會(huì)影響瀏覽者在文本框中可以輸入的文本數(shù)量。 “密碼域”屬性：如果選擇“是”選項(xiàng)時(shí)文本框信息內(nèi)容將會(huì)以“*”表示。,4.1 創(chuàng)建表單網(wǎng)頁(yè),2,67,山,3）復(fù)選框提供訪問(wèn)者設(shè)置多個(gè)選項(xiàng)的功能。 “值”屬性：用來(lái)描述該復(fù)選框選中后所表示的含義，這是一個(gè)“布爾”值，例如：ON/OFF，True/False等； “初始狀態(tài)”屬性：用于設(shè)

32、置復(fù)選框的初始狀態(tài)，即打開網(wǎng)頁(yè)時(shí)，復(fù)選框是否被選中。,4.1 創(chuàng)建表單網(wǎng)頁(yè),2,68,山,4.2 發(fā)布表單網(wǎng)頁(yè),1保存表單信息 2創(chuàng)建確認(rèn)表單網(wǎng)頁(yè),2,69,山,保存表單信息,表單作為網(wǎng)頁(yè)中一種最重要的信息收集和交流工具，能夠幫助網(wǎng)站管理員收集信息，但是只有瀏覽者提交了表單結(jié)果后網(wǎng)站管理員才能收到信息。對(duì)于瀏覽者提交的表單結(jié)果，F(xiàn)rontPage都會(huì)以某一種方式保存起來(lái)。 設(shè)置保存表單結(jié)果的步驟： 在表單內(nèi)單擊鼠標(biāo)右鍵，從快捷菜單中選擇“表單屬性”命令，彈出“表單屬性”對(duì)話框。 設(shè)置表單屬性。 在“將結(jié)果保存到”區(qū)域中選擇“發(fā)送到”選項(xiàng)。在“文件名稱”框中指定保存表單結(jié)果的文件路徑及文件名稱，

33、將表單結(jié)果保存到某一個(gè)文件中。在“電子郵件地址”框中輸入收集表單結(jié)果的網(wǎng)站管理員的電子郵件地址。這樣每當(dāng)網(wǎng)站訪問(wèn)者提交表單時(shí)，網(wǎng)站管理員就可以接收到份電子郵件信息。,2,70,山,創(chuàng)建確認(rèn)表單網(wǎng)頁(yè),確認(rèn)表單網(wǎng)頁(yè)用于給瀏覽者反饋信息。瀏覽者提交表單以后，并不知道是否發(fā)送成功，這時(shí)需要反饋給瀏覽者確認(rèn)信息。確認(rèn)表單網(wǎng)頁(yè)是一種已經(jīng)設(shè)置好了的網(wǎng)頁(yè)，它將會(huì)依據(jù)網(wǎng)頁(yè)瀏覽者所填寫表單內(nèi)容的不同，而反饋不同的結(jié)果。 創(chuàng)建確認(rèn)表單網(wǎng)頁(yè)的步驟： 新建一網(wǎng)頁(yè)，并輸入確認(rèn)信息。設(shè)置表單屬性。 插入確認(rèn)域 選擇【插入】【W(wǎng)eb組件】命令，打開“插入Web組件”對(duì)話框。在對(duì)話框的組件類型列表中選擇“高級(jí)控件”選項(xiàng)，在對(duì)話框右列表中選擇“確認(rèn)域”選項(xiàng)，打開“確認(rèn)域?qū)傩浴睂?duì)話框，輸入要確認(rèn)的表單域名稱name（即提交網(wǎng)頁(yè)中的“姓名”表單域）。,2,71,