FrontPage2003學習資料

1、12 1 FrontPage 2003概述 2 網頁基本元素編輯 3 網頁布局 4 表單應用 5 網站發(fā)布及管理 3 7.1.1 功能特點 7.1.2 窗口界面 7.1.3 基本操作 4 FrontPage讓初學者無需掌握HTML語言或具備編程基礎知識便能夠編寫出界面優(yōu)美、功能完善的網站。下面簡單介紹一下FrontPage的特點。 “所見即所得”的網頁編輯環(huán)境，也就是說，用戶在網頁編輯窗口中看到的效果就是瀏覽器中顯示的效果。 易學易用的操作界面，像其它Office套件一樣，在FrontPage中集成了大量的網頁模板和網站向導，讓用戶很方便快捷地制作出優(yōu)美的網頁。 功能強大的新版本FrontPa

2、ge融合了網頁管理、網頁編輯、網頁發(fā)布和網站維護等多種功能，利用FrontPage制作的網頁支持最新的網頁標準，比如DHTML、XML、CSS2等等。 5 FrontPage 2003主界面主要由菜單欄、工具欄、視圖欄、狀態(tài)欄、主編輯窗口和任務窗格等6大部分組成。6 選擇【視圖】【網頁】命令，打開網頁視圖。 網頁視圖是FrontPage中最常用的工作界面，網頁的創(chuàng)建、編輯、預覽等基本操作都是在此視圖中進行的。網頁視圖窗口底部有4個標簽：“設計”、“拆分”、“代碼”和“預覽”，它們分別控制著網頁的4種顯示模式。在設計模式下，能夠以“所見即所得”的方式編輯網頁；在代碼模式下，可以查看或編輯網頁的H

3、TML的源代碼；在預覽模式下，可以預覽網頁的效果；在拆分模式下，能夠同時編輯網頁和查看或編輯網頁的HTML的源代碼。 78 單擊 “視圖”欄中的“文件夾”圖標或選擇【視圖】【文件夾】命令，打開文件夾視圖。 在文件夾視圖下，網站顯示為一組文件和文件夾。在此視圖下可以對網站中的文件夾和各種文件進行管理。 9 單擊“視圖”欄中的“報表”圖標或選擇【視圖】【報表】命令，打開報表視圖。 通過報表視圖，可以在運行報表查詢后分析網站內容。10 單擊“視圖”欄中的“導航”圖標或選擇【視圖】【導航】命令，打開導航視圖。 導航視圖用于管理網站中各網頁的層次關系結構圖?？梢酝ㄟ^鼠標將結構圖中的網頁拖到新位置來改變鏈

4、接結構。 11 單擊“視圖”欄中“超鏈接”圖標或選擇【視圖】【超鏈接】命令。 超鏈接視圖用于管理網站中網頁的超鏈接。12 單擊“視圖”欄中的“任務”圖標或選擇【視圖】【任務】命令，可打開任務視圖。 任務視圖可以實現網站任務的管理。網站的任務是指網站管理人員維護網站的任務，包括網頁的更新和網站的檢查等。 13 可以使用“遠程網站”視圖發(fā)布整個網站，或有選擇地發(fā)布個別文件。還可以在兩個或多個位置之間同步文件，即確保包含相同內容的網站都包含最新的更改。 14 1網站的規(guī)劃 2網站的基本操作 3網頁的基本操作 15 首先要明確建立網站的目的。 其次要明確網站的瀏覽者群。 最后要考慮到如何能夠便于網站的

5、日常維護。 16 1) 創(chuàng)建網站 創(chuàng)建一個Web網站有兩種方法。第一種方法是利用FrontPage的Web網站模板和向導，這種方法操作簡單、速度快，比較適合建立大、中型的Web網站。第二種方法是逐個地創(chuàng)建網頁文件，然后創(chuàng)建它們之間的鏈接關系，這種方法適合于網頁數量不多的小型網站。 使用FrontPage模板創(chuàng)建網站的步驟： 啟動FrontPage應用程序； 選擇【文件】【新建】命令，打開“新建”任務窗格； 選擇網站模板，在“新建網站”欄選擇“由一個網頁組成的網站”，打開“網站模板”對話框，在“指定新網站的位置”文本框中輸入新網站的位置及名稱，然后單擊“確定”按鈕。 17 2）關閉網站 選擇【文

6、件】【關閉網站】命令。 關閉網站即關閉網站及該網站下的所有網頁。 3）打開網站 選擇【文件】【打開網站】命令，“打開網站”對話框。 選擇網站名稱，然后單擊“打開”按鈕。 18 1）新建網頁 在FrontPage 2003中可以直接創(chuàng)建一個空白網頁，也可以利用網頁模板和網頁向導來創(chuàng)建。 在某網站中創(chuàng)建新網頁，在此網站的文件夾視圖和導航視圖方式下單擊視圖窗口右上角的“新建網頁”按鈕。 創(chuàng)建不屬于某網站的新網頁，在任何視圖方式下，選擇【文件】【新建】命令，打開“新建”任務窗格，可在新建任務窗格中，選擇一種合適的模板新建網頁；或者單擊常用工具欄上的“新建”按鈕 。 19 2）打開網頁 打開當前網站中的

7、網頁，在任何視圖中雙擊該網頁圖標或文件名即可打開網頁。 打開其它網站中的網頁，選擇【文件】【打開】命令，在“打開文件”對話框中選擇具體網頁文件打開。 3）保存網頁 保存當前網站中的網頁，單擊工具欄中的保存按鈕，或【文件】【保存】命令即可。如果網頁中有圖片，則會彈出“保存嵌入式文件”對話框，提示保存圖片文件。 保存不屬于當前網站中的網頁，則需要指定保存路徑。 4）關閉網頁 選擇【文件】【關閉】命令。這種方式關閉的僅是當前網頁，要注意與關閉網站的區(qū)別。 20 7.2.1 文本編輯 7.2.2 圖像編輯 7.2.3 超鏈接創(chuàng)建 7.2.4 Web組件 21 1文本添加 2設置段落和文本格式 3插入水

8、平線 4設置網頁屬性 22 在網頁中添加文本與在Word中添加文本的操作基本相同。此外，在網頁中輸入文本時，如果已經達到網頁邊界，則文本會自動回滾到下一行繼續(xù)輸入，這種換行方式并不會產生新行或是一個新段落，隨著網頁邊界的變化或是編輯窗口的調整，FrontPage 2003會自動調整這個回滾位置。 按下+鍵將產生新行，即換行，新行與上一行之間沒有回滾關系。 按下鍵產生一個新段落。 23 可以使用格式工具欄（如圖7.2.1所示）或“字體”和“段落”對話框對文本和段落的格式進行設置。其操作方法跟Word基本相同。24 為了修飾頁面，明顯區(qū)分開標題與正文，可選擇【插入】【水平線】命令在當前光標點插入一

9、條水平線。雙擊水平線或選擇【格式】【屬性】命令彈出“水平線屬性”對話框，可對水平線的高度、寬度、顏色和對齊方式進行設置。 25 網頁屬性是一個網頁整體的屬性，記錄關于網頁的非頁面部分的相關信息。適當的設置可以達到增加網頁美觀和縮減網頁文件大小的效果。 方法一：右擊頁面，從彈出的快捷菜單中選擇“網頁屬性”命令。 方法二：選擇【格式】【背景】命令； 方法三：選擇【文件】【屬性】命令； 26 1插入圖像 2編輯圖像 3設置圖片屬性 27 插入一幅關于“背景”的剪貼畫的操作步驟： 將插入點定位在需要插入圖片的位置； 選擇【插入】【圖片】【剪貼畫】命令，打開“剪貼畫”任務窗格，如圖所示； 在任務窗格中，

10、用戶可在“搜索文字”文本框中輸入剪貼畫的關鍵字“背景”； 單擊“搜索”按鈕開始搜索，在任務窗格下方列表框中列出了搜索到的剪貼畫； 單擊剪貼畫右側的下三角按鈕，彈出剪貼畫的快捷菜單，單擊“插入”命令即可。 28 插入來自文件的圖片的操作步驟： 將插入點定位在需要插入圖片的位置； 將插入點定位在需要插入圖片的位置； 選擇【插入】【圖片】【來自文件】命令，或單擊“常用”工具欄中“插入圖片”按鈕； 打開“圖片”對話框，選擇所需文件，單擊“插入”按鈕。 29 在網頁中插入圖像后，還可對圖像進行編輯。用鼠標單擊選取圖像，在屏幕上就會出現“圖片”工具欄。利用“圖片”工具欄可對圖片進行旋轉、剪裁、沖蝕，設置凹

11、凸效果、透明背景色，調整亮度、對比度以及在圖片中加入文字等。選中圖片后，拖動圖片周圍的控點可改變圖片大小。 30 選定所需的圖片，單擊鼠標右鍵，從快捷菜單中選擇“圖片屬性”命令，彈出“圖片屬性”對話框。在對話框的“常規(guī)”和“外觀”兩個選項卡中進行設置，可以做出各種圖文混排的頁面效果。 31 1選擇鏈接的載體 2選擇鏈接的目標 3指定目標窗口 4驗證超級鏈接 5設置超鏈接的狀態(tài)顏色 6圖像映射 32 超鏈接是從一個網頁指向另一個目的地的指針，這個目的地可以是另一個網頁或同一個網頁中的其他位置，也可以是一個電子郵件、一個Word文檔或者是一個應用程序。 創(chuàng)建超鏈接的步驟： 選擇鏈接的載體； 選擇鏈

12、接的目標； 指定目標窗口。 33 鏈接的載體是顯示鏈接的頁面元素。將鼠標指針移到包含超鏈接的文字或圖像上時，鼠標指針就會變成形狀，當瀏覽者單擊此文本串或圖像，瀏覽器將打開相應地址的網頁。 選定鏈接的載體后，單擊“常用”工具欄上“插入超鏈接”按鈕，或選擇【插入】【超級鏈】命令，打開“插入超鏈接”對話框。 34 鏈接的目標包括原有文件或網頁、本文檔中的位置（書簽）、新建文檔、電子郵件等。根據跳轉目的地的不同，網頁中鏈接可分為4種類型。 1）原有文件或網頁直接跳轉到已經存在的某一網頁或文件。 如果是本網站內的網頁，可用光標在“插入超鏈接”對話框列表文件中選擇。 如果是本機上其它網站中的網頁，則選擇“

13、插入超鏈接”對話框中的按鈕，或從“查找范圍”中選擇相應的網站，再選擇所需網頁。 如果是Internet上其它網站的某一網頁，可單擊按鈕打開瀏覽器找到該頁面后，該頁面的網址會自動出現在“地址”欄；也可以直接在地址欄文本框中輸入該網頁的地址。 35 2）本文檔中的位置是直接跳轉到本網頁中的某書簽標志的位置。要進行此鏈接操作，必須先用【插入】【書簽】命令在網頁中的某些位置插入書簽； 在“插入超鏈接”對話框中單擊“本文檔中的位置”，然后選擇該網頁上的書簽，將會在書簽位置創(chuàng)建一超鏈接。 36 3）新建文檔可以將當前選中的鏈接的載體鏈接到一個新建的頁面上。單擊“新建文檔”按鈕，在“新建文檔名稱”欄填寫該網

14、頁的名稱。37 4）單擊“電子郵件地址”按鈕，在“電子郵件地址”欄填寫目標電子郵件地址，可創(chuàng)建一個到電子郵件的鏈接。 38 鏈接的目標網頁選定后，可以指定目標網頁是在本窗口中顯示還是在新打開的瀏覽器窗口中顯示。單擊“插入超鏈接”對話框中“目標框架”按鈕，打開“目標框架” 對話框，。指定鏈接的目標網頁的目標窗口，默認是在當前窗口中打開目標網頁。 “公用的目標區(qū)”列表框選項含義如下： 相同框架：鏈接的目標網頁顯示在包含該超鏈接的同一個框架內。 整頁：將框架展開為全窗口后顯示鏈接的目標網頁。 新建窗口：另外打開一個瀏覽窗口顯示鏈接的目標網頁。 父框架：如果是一頁套一頁的框架網頁，選擇父框架可以回到上

15、一層框架顯示鏈接的目標網頁。 39 上面的三個步驟設置完成后，超鏈接的創(chuàng)建便完成了。接下來有必要驗證一下超鏈接是否正確，可用如下的方法來驗證： 網頁的設計視圖中，把鼠標移到已經創(chuàng)建了超鏈接的載體上（文字、圖像），鼠標變成手狀，按下鍵，然后單擊鼠標，便可驗證鏈接目的地。 在網頁的預覽視圖中，用鼠標單擊創(chuàng)建了鏈接的載體，便可驗證鏈接目的地。 40 在瀏覽器中瀏覽網頁時，已經訪問過的超鏈接、尚未訪問過的超鏈接和正在訪問的超鏈接應有不同的顏色顯示，使瀏覽者一目了然。 設置超鏈接的狀態(tài)顏色方法：選擇【格式】【背景】命令，打開“網頁屬性”對話框。選中“背景”選項卡，對與超鏈接有關的部分進行設置。 41 圖

16、像映射也稱MAP技術，是指在一幅圖像上建立不同形狀的熱點區(qū)域，每一個區(qū)域都是一個超鏈接。制作步驟如下： 選定要制作圖像映射的圖片，此時屏幕會顯示出“圖片”工具欄，在“圖片”工具欄上有5個專門是為圖像映射功能設置的。 單擊“圖片”工具欄中一種熱點形式，并將光標移到要制作圖像映射的圖片中，光標變成鉛筆形狀然后用鼠標在圖片中拖動出一個矩形區(qū)域。 松開鼠標后，出現“創(chuàng)建超鏈接”對話框，從中可設置該熱點的鏈接目標。 42 1字幕 2交互式按鈕 3橫幅廣告 43 字幕是在瀏覽器中能夠水平滾動的文字，其文字具有動態(tài)特點，可以用于發(fā)布網站的通知和提示信息。其操作步驟如下： 選擇插入字幕的位置； 選擇【插入】【

17、Web組件】命令； 選擇“選擇一種效果”列表中的“字幕”選項，然后單擊“完成”按鈕，打開“字幕屬性”對話框； 設置字幕屬性，如在文本框中輸入滾動的文字，選擇滾動方向等，然后單擊“確定”按鈕，便完成滾動字幕的插入； 切換到預覽視圖，觀看滾動字幕的效果。 更改字幕屬性，在網頁設計視圖下雙擊該字幕，或選中字幕單擊鼠標右鍵，在彈出的快捷菜單中選擇“字幕屬性”，便可彈出字幕屬性對話框。 44 交互式按鈕也稱懸停按鈕，是一種可以變化的按鈕。當將鼠標指針移到交互式按鈕上時，它會變成新的樣子；當鼠標指針離開交互式按鈕時，它又會自動變回到原來的樣子。交互式按鈕一般用在導航條中。 在網頁中插入交互式按鈕操作步驟如

18、下： 選擇插入交互式按鈕的位置； 選擇【插入】【Web組件】命令，打開如上圖所示的對話框； 選擇“選擇一種效果”列表中的“交互式按鈕”選項，然后單擊“完成”按鈕，打開“交互式按鈕”屬性對話框； 設置交互式按鈕屬性，然后單擊“確定”按鈕，便完成交互式按鈕的插入； 切換到預覽視圖，查看交互式按鈕的效果。 45 設置交互式按鈕的屬性： 在按鈕選項卡下，在“文本”屬性框中輸入按鈕上顯示的文字；在“鏈接”屬性框中設置鏈接的目的地；按鈕列表框中選擇按鈕的樣式等。 在字體選項卡下，可以設置按鈕上的文字的相關格式。 在圖像選項卡下，可以設置按鈕上顯示的圖像及屬性。 更改交互式按鈕屬性，在網頁設計視圖下雙擊該按

19、鈕，或選中該按鈕右擊，在彈出的快捷菜單中選擇“按鈕屬性”命令，便可彈出交互式按鈕屬性對話框。 46 橫幅廣告的動畫形式就像一幅不停變換著的廣告牌。 在網頁中插入橫幅廣告的操作步驟： 選擇插入位置； 選擇【插入】【橫幅廣告管理器】命令，打開“橫幅廣告管理器屬性”對話框； 選擇屬性對話框中的“添加”按鈕，添加要顯示的圖片（至少要有兩幅圖片才能變換顯示）； 高度、寬度屬性設置圖片的顯示框的大??；過渡效果設置圖片的顯示效果。 切換到預覽視圖，查看橫幅廣告的效果。 47 7.3.1 表格布局 7.3.2 框架布局 48 1創(chuàng)建表格 2編輯表格 3設置表格和單元格的屬性 4實例 49 表格在網頁制作中的作

20、用有以下兩個方面： 用于顯示有一定格式的數據和信息。 用于對整個網頁版面的控制，組織數據、排列網頁元素(文本、圖像、視頻等)的空間位置。 表格在網頁中的使用比較多，表格的引入使網頁變得整齊美觀。許多漂亮的網頁都是利用表格實現布局的。 50 在FrontPage中表格的創(chuàng)建和編輯同在Word中相似。 創(chuàng)建表格的基本方法： 使用“常用”工具欄中的“插入表格”按鈕。 選擇【表格】【插入】【表格】命令。 選擇【表格】【繪制表格】命令。用鼠標控制畫筆繪制任意表格。 51 表格繪制好后，根據需要對表格中的文字進行編輯，對行高列寬進行調整，對表格的行、列、單元格可作增加或刪除操作。具體操作與在Word中一樣

21、。 52 在表格內任意位置右擊，在出現快捷菜單中選擇“表格屬性”選項，或選擇【表格】【表格屬性】【表格】命令，彈出“表格屬性”對話框，可對表格的布局、邊框和背景進行設置。 在某一單元格內右擊，在彈出的快捷菜單中選擇“單元格屬性”命令，彈出“單元格屬性”對話框，可對該單元格的布局、邊框和背景進行設置。 53 1創(chuàng)建框架網頁 2框架的編輯 3框架屬性的設置 54 框架是一種特殊的網頁，它將瀏覽器窗口劃分成功能獨立的幾個部分，每部分是一個框架，每個框架分別對應于一個獨立的網頁，這樣可以在一個窗口上同時觀看到多個頁面組成的信息界面。各個框架之間還可以設置超鏈接。很多網站都具有這樣的結構。 55 創(chuàng)建框

22、架網頁的步驟如下所示： 選擇【文件】【新建】命令，出現“新建網頁或網站”任務窗格； 單擊“其他網頁模板”命令，彈出“網頁模板”對話框； 選中“框架網頁”選項卡，在列表中選擇所需的模板 。 單擊“確定”按鈕，建立了一個新的框架網頁。 56 在框架網頁每一個子窗口中都有兩個按鈕，單擊“新建網頁”按鈕，一個新的空白網頁就會出現在框架中；單擊“設置初始網頁”按鈕，彈出“插入超鏈接”對話框，在對話框中選擇某一目標網頁作為此框架的初始網頁。57 框架網頁的保存。單擊“常用”工具欄上的“保存”按鈕，則會彈出“另存為”對話框。則依次把框架網頁中的“新建網頁”保存完后，再保存“框架集文件” 。對話框右側為框架示

23、意圖，深藍色框突出顯示表示正在保存的框架。 58 對于已經建立好的框架網頁，可以再對它進行編輯，比如對某個框架再拆分或刪除，重新進行框架布局。 1）拆分框架 單擊選定要拆分的框架，選擇【框架】【拆分框架】命令，打開“拆分框架”對話框，根據需要選擇“拆分為列”或“拆分成行”。 2）刪除框架 先單擊選定要刪除的框架，再選擇【框架】【刪除框架】命令。 59 選中需要設置的框架，選擇【框架】【框架屬性】命令；或者單擊鼠標右鍵，從快捷菜單中選擇“框架屬性”菜單項，打開“框架屬性”對話框。 “框架大小”有百分比、相對大小、象素值三種設置方式。 “邊距”可以設置框架內容和框架邊框之間的距離。 “顯示滾動條”

24、列表中各個選項表示：“需要時顯示”選項，當瀏覽器窗口太小不能放下框架的全部內容時，滾動條就會出現；“不顯示”選項，無論什么情況，滾動條都不會出現；“始終顯示”選項，滾動條自始至終都會出現，即使它們不需要時也會出現。 顯示或隱藏框架周圍的邊框：單擊“選項”右邊的“框架網頁”按鈕，選中或清除“顯示邊框”復選框。 60 7.4.1 創(chuàng)建表單網頁 7.4.2 發(fā)布表單網頁 61 創(chuàng)建表單網頁有兩種方法，一種是利用FrontPage提供的模板或向導可以快速創(chuàng)建表單網頁；另一種是使用表單域來定制表單。 下面以插入表單域來定制表單為例，說明創(chuàng)建表單的操作方法： 插入表單。選擇【插入】【表單】【表單】命令；或

25、用鼠標拖動子菜單頂部就會出現“表單”工具欄，再單擊“表單”工具欄中的“表單”按鈕。此時，會出現一個由虛線框表示的表單框，表單內只有“提交”按鈕和“重置”按鈕。 插入表單域。為了使表單中的每個表單域對齊，在創(chuàng)建表單域之前在表單中插入表格。然后依次插入各表單域。 設置表單域屬性。表單網頁布局設計好以后，還需要對表單域屬性進行設置，才能使表單正常工作。62 下面分別介紹按鈕、單行文本框、復選框表單域的屬性設置。 在頁面中雙擊相應的表單域，或右擊此表單域，彈出快捷菜單，選擇“表單域屬性”命令，就可打開其屬性對話框，對該表單域進行屬性設置。 1）“按鈕屬性”對話框如圖所示。“值/標簽”設置按鈕上顯示的文

26、字。按鈕的類型可設置按鈕的功能。 “重置”類型按鈕，可以清除表單內的所有內容，所有表單域都恢復原始設置。 “提交”類型按鈕，可以把訪問者填寫的表單內容發(fā)送到表單按鈕指定的網頁或相關程序。 “普通”類型按鈕，用戶可調用自己編寫的程序處理表單中的數據，定制表單功能。 63 2）單行文本框的表單域適合訪問者做簡單回答，如姓名、密碼、電話號碼等。 “名稱”屬性：用于設置該表單域的名稱，通過這個名稱表單與Web服務器才能進行交流。 “初始值”屬性：設置文本框中顯示的默認值。 “寬度”屬性：設置文本框的寬度，但不會影響瀏覽者在文本框中可以輸入的文本數量。 “密碼域”屬性：如果選擇“是”選項時文本框信息內容

27、將會以“*”表示。 64 3）復選框提供訪問者設置多個選項的功能。 “值”屬性：用來描述該復選框選中后所表示的含義，這是一個“布爾”值，例如：ON/OFF，True/False等； “初始狀態(tài)”屬性：用于設置復選框的初始狀態(tài)，即打開網頁時，復選框是否被選中。 65 1保存表單信息 2創(chuàng)建確認表單網頁 66 表單作為網頁中一種最重要的信息收集和交流工具，能夠幫助網站管理員收集信息，但是只有瀏覽者提交了表單結果后網站管理員才能收到信息。對于瀏覽者提交的表單結果，FrontPage都會以某一種方式保存起來。 設置保存表單結果的步驟： 在表單內單擊鼠標右鍵，從快捷菜單中選擇“表單屬性”命令，彈出“表單

28、屬性”對話框。 設置表單屬性。 在“將結果保存到”區(qū)域中選擇“發(fā)送到”選項。在“文件名稱”框中指定保存表單結果的文件路徑及文件名稱，將表單結果保存到某一個文件中。在“電子郵件地址”框中輸入收集表單結果的網站管理員的電子郵件地址。這樣每當網站訪問者提交表單時，網站管理員就可以接收到份電子郵件信息。67 確認表單網頁用于給瀏覽者反饋信息。瀏覽者提交表單以后，并不知道是否發(fā)送成功，這時需要反饋給瀏覽者確認信息。確認表單網頁是一種已經設置好了的網頁，它將會依據網頁瀏覽者所填寫表單內容的不同，而反饋不同的結果。 創(chuàng)建確認表單網頁的步驟： 新建一網頁，并輸入確認信息。設置表單屬性。 插入確認域 選擇【插入】【Web組件】命令，打開“插入Web組件”對話框。在對話框的組件類型列表中選擇“高級控件”選項，在對話框右列表中選擇“確認域”選項，打開“確認域屬性”對話框，輸入要確認的表單域名稱name（即提交網頁中的“姓名”表單域）。 68 保存表單確認網頁。 將提交網頁與確認網頁關聯起來。 打開提交網頁,在表單域內單擊右鍵，從彈出的快捷菜單中選擇“表單屬性”選項，在打開