FrontPage2003學(xué)習(xí)課件

1、 -FrontPage2003【授課人：陳盈授課人：陳盈】 FrontPage2003是Office2003組件之一，運(yùn)行與啟動(dòng)Office其他軟件相同。啟動(dòng)成功后，出現(xiàn)的初始畫(huà)面可能因機(jī)器使用情況的不同而不同，菜單部分與Office中的其他軟件相似，最大區(qū)別是工作區(qū)的左端有一個(gè)視圖欄，包含：網(wǎng)頁(yè)、文件夾、報(bào)表、導(dǎo)航、超鏈接、任務(wù)。8.1 認(rèn)識(shí)認(rèn)識(shí)FrontP 3.FrontPage2003與其他 Office組件的整合性更加提高，打開(kāi)和運(yùn)行的速度比FrontPage2000更快。 FrontPage2003的特點(diǎn)：的特點(diǎn)： FrontPage2003啟動(dòng)后顯示頁(yè)面 2遠(yuǎn)程網(wǎng)站視圖。同步此網(wǎng)站

2、和遠(yuǎn)程網(wǎng)站之間的文件。遠(yuǎn)程網(wǎng)站視圖。同步此網(wǎng)站和遠(yuǎn)程網(wǎng)站之間的文件。3文件夾視圖。用于管理站點(diǎn)中的文件和文件夾。文件夾視圖。用于管理站點(diǎn)中的文件和文件夾。4報(bào)表視圖。分析網(wǎng)站并管理其內(nèi)容。報(bào)表視圖。分析網(wǎng)站并管理其內(nèi)容。5導(dǎo)航視圖。顯示站點(diǎn)的導(dǎo)航結(jié)構(gòu)，用于對(duì)站點(diǎn)結(jié)構(gòu)的導(dǎo)航視圖。顯示站點(diǎn)的導(dǎo)航結(jié)構(gòu)，用于對(duì)站點(diǎn)結(jié)構(gòu)的管理。管理。6超鏈接視圖。用于顯示站點(diǎn)中每一頁(yè)的超鏈接。超鏈接視圖。用于顯示站點(diǎn)中每一頁(yè)的超鏈接。 7任務(wù)視圖。用于創(chuàng)建和管理站點(diǎn)中的任務(wù)。任務(wù)視圖。用于創(chuàng)建和管理站點(diǎn)中的任務(wù)。 網(wǎng)頁(yè)是一個(gè)文件。網(wǎng)頁(yè)經(jīng)由網(wǎng)址（ URL ）來(lái)識(shí)別與存取，當(dāng)我們?cè)跒g覽器輸入網(wǎng)址后，經(jīng)過(guò)一段復(fù)雜而又快速的程

3、序，網(wǎng)頁(yè)文件會(huì)被傳送到你的計(jì)算機(jī)，然后再通過(guò)瀏覽器解釋網(wǎng)頁(yè)的內(nèi)容，再展示到你的眼前。v 是萬(wàn)維網(wǎng)中的一“頁(yè)”，通常是HTML格式（文件擴(kuò)展名為.html或.htm）。v 網(wǎng)頁(yè)通常有以下元素：F 文字資料 F 圖像檔案 F 超鏈結(jié) v 網(wǎng)頁(yè)的合成體為網(wǎng)站，一個(gè)網(wǎng)站的開(kāi)始點(diǎn)為首頁(yè)。 案例學(xué)生個(gè)人就職網(wǎng)站 本章案例“個(gè)人就業(yè)網(wǎng)站”，該網(wǎng)站的主頁(yè)上有5個(gè)板塊，分別是：學(xué)習(xí)經(jīng)歷、求職簡(jiǎn)歷、求職須知、課程成績(jī)、作品圖片。學(xué)生個(gè)人就職網(wǎng)站結(jié)構(gòu)圖如圖8-2所示。 學(xué)生個(gè)人就職網(wǎng)站結(jié)構(gòu)圖 FrontPage2003開(kāi)發(fā)本案例，用到的知識(shí)點(diǎn)主要有： 創(chuàng)建站點(diǎn) 文本的格式化 網(wǎng)頁(yè)屬性的設(shè)置(背景顏色、背景圖片、網(wǎng)頁(yè)

4、標(biāo)題、背景音樂(lè)) 插入層 水平線與圖像的插入 表格的制作及用表格布局 超鏈接(文本超鏈接、圖像超鏈接、熱點(diǎn)超鏈接、書(shū)簽超鏈接) 表單的制作 框架網(wǎng)頁(yè)制作 幾種動(dòng)態(tài)效果(字幕、交互式按鈕、動(dòng)態(tài)DTML、站點(diǎn)計(jì)數(shù)器) 插入Flash影片等。 個(gè)人就職網(wǎng)站主頁(yè) 站點(diǎn)的創(chuàng)建 所謂站點(diǎn) 就是多個(gè)相關(guān)網(wǎng)頁(yè)通過(guò)各種鏈接關(guān)聯(lián)起來(lái)的集合。在使用FrontPage 2003設(shè)計(jì)網(wǎng)頁(yè)之前,應(yīng)建立一個(gè)本地站點(diǎn)，用來(lái)管理創(chuàng)建的網(wǎng)頁(yè)。 。圖8-4 “網(wǎng)站模板”對(duì)話框 一、新建一個(gè)網(wǎng)頁(yè) 在FrontPage2003的主窗口中，單擊“視圖”欄上的“網(wǎng)頁(yè)”視圖，使當(dāng)前處于網(wǎng)頁(yè)視圖模式下。單擊菜單欄上的“文件”，在彈出的下拉菜單

5、中選中“新建”，在窗口的右邊出現(xiàn)“新建”面板，在新建網(wǎng)頁(yè)項(xiàng)中選擇“其他網(wǎng)頁(yè)模板”。打開(kāi)如圖8-4所示的“網(wǎng)站模板”對(duì)話框。單擊“常規(guī)”選項(xiàng)卡，在列表框中顯示了FrontPage2003提供的創(chuàng)建網(wǎng)頁(yè)的11種模板，包括有普通網(wǎng)頁(yè)、表單網(wǎng)頁(yè)向?qū)?、常?jiàn)問(wèn)題、目錄、確認(rèn)表單等。使用各類模板可以創(chuàng)建不同的網(wǎng)頁(yè)。 當(dāng)前網(wǎng)頁(yè)是新建的網(wǎng)頁(yè)并且尚未保存，則單擊“常用”工具欄中的“保存”按鈕，在彈出的“另存為”對(duì)話框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾，然后在“文件名”下拉列表框中輸入網(wǎng)頁(yè)的文件名“index.htm”，再單擊“保存”按鈕即可。 如果當(dāng)前網(wǎng)頁(yè)是從當(dāng)前網(wǎng)站打開(kāi)的，則單擊“常用”工具欄中的“保存”按鈕即可。

6、如果當(dāng)前網(wǎng)頁(yè)是從當(dāng)前網(wǎng)站之外的位置打開(kāi)的，則單擊“文件”|“另存為”命令，在彈出的“另存為”對(duì)話框中找到并雙擊要保存網(wǎng)頁(yè)的文件夾，并在“文件名”下拉列表框中輸入網(wǎng)頁(yè)的文件名，最后單擊“保存”按鈕即可。 網(wǎng)頁(yè)的屬性包括網(wǎng)頁(yè)的背景顏色、圖片、網(wǎng)頁(yè)的標(biāo)題和網(wǎng)頁(yè)的頁(yè)邊距等。選擇菜單“文件”“屬性” 命令或在頁(yè)面空白處右鍵單擊選擇“頁(yè)面屬性”命令則可以在彈出的對(duì)話框中進(jìn)行設(shè)置，如圖8-5所示，或者在沒(méi)有選中任何對(duì)象的情形下，選菜單“格式”“背景”，直接進(jìn)行背景顏色圖片的設(shè)置。 一、插入表格一、插入表格 在“表格”菜單“插入”級(jí)聯(lián)式菜單中選擇“表格”命令，出現(xiàn)如圖8-6所示。單擊“確定”就可以網(wǎng)頁(yè)中插入表

7、格。 圖8-6插入表格屬性對(duì)話框 v表格屬性設(shè)置若想設(shè)置表格的邊框粗細(xì)、顏色以及表格的背景可指向表格，用鼠標(biāo)右鍵單擊表格，在彈出快捷菜單中選擇“表格屬性”命令，打開(kāi)“表格屬性”對(duì)話框如圖8-6所示 。大?。涸O(shè)置表格的行列數(shù)目。 布局：設(shè)置表格的對(duì)齊方式、邊框粗細(xì)（無(wú)邊框?yàn)?）、單元格邊距（表格內(nèi)單元邊框線之間的距離）、單元格間距（單元格內(nèi)容與邊框線之間的距離）。指定寬度：指定寬度前，則在復(fù)選框前打上“”，寬度單位有兩種分別為像素和百分比，百分比是相對(duì)瀏覽器而言，像素則為絕對(duì)值。 1.選定表格對(duì)象 選定單元格，執(zhí)行“表格”“選定” “單元格”命令；選定行、列或整個(gè)表格，在“表格”“選定”中選擇相

8、應(yīng)的命令即可。2.插入、刪除表格對(duì)象 插入行或列，可以使用“表格”“插入” “行或列”命令，也可以用鼠標(biāo)右擊表格后在快捷菜單中選擇相應(yīng)的命令。如果要?jiǎng)h除行或列，只要選定行或列后單擊“表格” “刪除單元格”命令即可刪除。3.合并、拆分單元格 合并、拆分單元格的操作可以通過(guò)“表格”菜單的“合并單元格”或“拆分單元格”命令來(lái)完成。也可以通過(guò)右擊鼠標(biāo)后在彈出的快捷菜單中選擇相應(yīng)的命令進(jìn)行。 4.設(shè)置表格或單元格屬性 將打開(kāi)“表格屬性”或“單元格屬性”對(duì)話框，或右擊鼠標(biāo)彈出快捷菜單。 網(wǎng)頁(yè)中插入換行符可將網(wǎng)頁(yè)中的一段網(wǎng)頁(yè)內(nèi)容斷開(kāi)。FrontPage中的換行分成“隔行換行“（兩行之間有空行）和“緊湊換行”

9、（兩行間沒(méi)有空行）兩種，這兩種換行符的插入方法分別是：（1）插入“隔行換行”。直接在插入點(diǎn)按Enter鍵。（2）插入“緊湊換行”。先定位插入點(diǎn)，選擇“插入”菜單“換行符”命令，或按Shift+Enter組合鍵。 方法：光標(biāo)定位于表格第二行，單擊“插入”菜單“水平線”命令，就可以在第二行中插入水平線。單擊剛插入的水平線，右鍵單擊在快捷菜單中選擇“水平線屬性”。如圖8-8水平線屬性對(duì)話框。圖8-8水平線屬性對(duì)話框 將插入點(diǎn)定位欲插入圖片位置，選擇“插入”菜單上的“圖片”命令。從“圖片”子菜單中選擇“來(lái)自文件”命令，在對(duì)話框?qū)ふ倚枰膱D片文件，單擊“確定”按鈕插入圖片。 在圖片上右鍵單擊，在快捷菜單

10、中選擇“圖片屬性”，在圖片屬性對(duì)話框中可以設(shè)置圖片屬性。如圖8-9插入圖片對(duì)話框 。 插入圖片對(duì)話框 六、插入背景音樂(lè)六、插入背景音樂(lè)具體操作步驟為：在網(wǎng)頁(yè)視圖模式下，單擊“文件”菜單“屬性”命令或“格式”菜單“背景”命令或右鍵單擊網(wǎng)頁(yè)快捷菜單中選擇“頁(yè)面屬性命令”。選擇“常規(guī)”選項(xiàng)卡，在“背景音樂(lè)”欄下“位置”框中輸入播放的聲音文件的位置，若選中“不限次數(shù)”復(fù)選框，表示在瀏覽器中該音頻文件將持續(xù)地播放。 8.2.7超鏈接超鏈接概念：超鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁(yè)之間、站點(diǎn)與站點(diǎn)之間的一種鏈接關(guān)系，它不僅使站點(diǎn)內(nèi)的每一個(gè)網(wǎng)頁(yè)有機(jī)地聯(lián)系在一起上，而且使不同的站點(diǎn)之間建立了聯(lián)系。使用超鏈接，瀏覽者可以從

11、一個(gè)網(wǎng)頁(yè)轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，從一個(gè)站點(diǎn)轉(zhuǎn)到其他的站點(diǎn)。除了指向網(wǎng)頁(yè)和和站點(diǎn)，超鏈接還可以指向圖片、電子郵件地址、多媒體文件，甚至可以指向一個(gè)程序。 1鏈接到網(wǎng)頁(yè)鏈接到網(wǎng)頁(yè)首先選定要建立超鏈接的文本，單擊“插入”“超鏈接”命令，或右鍵單擊選定的文本在快捷菜單中選擇“超鏈接”，打開(kāi)如圖8-10所示的“插入超鏈接”對(duì)話框。根據(jù)超鏈接的目標(biāo)，用戶可以從列表框中選定某個(gè)網(wǎng)頁(yè)文件，也可以直接在“地址”文本框（URL）中輸入要鏈接的目標(biāo)地址，還可以單擊圖標(biāo)，從彈出的“選擇文件”對(duì)話框中選定鏈接的目標(biāo)文件。選定的目標(biāo)文件地址均會(huì)出現(xiàn)在地址文本框（URL）中。 方法如下：（ 1 ）首 先 選 定 要 建 立 超 鏈

12、 接 的 文 本 ， 單 擊 “ 插入”“超鏈接”命令，或右鍵單擊選定的文本在快捷菜單中選擇“超鏈接”，打開(kāi)如圖8-10所示的“插入超鏈接”對(duì)話框。（2）在“編輯超鏈接”對(duì)話框中的地址文本框中輸入 所 需 要 鏈 接 的 其 他 網(wǎng) 站 的 網(wǎng) 頁(yè) 如“http:/ 單擊“確定”按鈕即可完成超鏈接的設(shè)置。 方法如下：（1）選中要電子郵件鏈接的文本，單擊工具欄中的“插入超鏈接”按鈕，打開(kāi)“插入超鏈接”對(duì)話框；（2）單擊“電子郵件地址”選項(xiàng)，對(duì)話框變成圖8-10所示； （3）在“要顯示的文字”文本框中輸入要顯示的文字，在“電子郵件地址”文本框中輸入郵件地址，在“主題”文本框中輸入主題；（4）單擊“

13、確定”按鈕。 1圖像的默認(rèn)超鏈接圖像的默認(rèn)超鏈接先選中圖片，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“超鏈接”菜單項(xiàng)，會(huì)彈出一個(gè)“編輯超鏈接”對(duì)話框或者單擊“插入”菜單上的“超鏈接”。 （1）如果要鏈接的是當(dāng)前站點(diǎn)中的文件或計(jì)算機(jī)中某個(gè)目錄下的文件，則從列表框中選擇網(wǎng)頁(yè)文件，查找該文件，單擊“確定”按鈕。 （2）如果要鏈接的網(wǎng)頁(yè)或文件夾來(lái)自Web，在“插入超鏈接”對(duì)話框中的地址文本框中輸入所需要鏈接的網(wǎng)站, 單擊“確定”按鈕。（3）如果要鏈接的是電子郵件，打開(kāi)“插入超鏈接”對(duì)話框，單擊左邊的電子郵件地址，在“電子郵件地址” 文本框中輸入郵件地址，單擊“確定”按鈕。 2圖像的熱點(diǎn)鏈接圖像的熱點(diǎn)鏈接

14、熱點(diǎn)是圖像上具有超鏈接的區(qū)域，一幅圖片上可以包含若干個(gè)熱點(diǎn)，單擊圖片中的這些熱點(diǎn)可以跳轉(zhuǎn)到不同的目標(biāo)。熱點(diǎn)形狀可以是矩形、圓形或多邊形，熱點(diǎn)位置可自行確定。設(shè)置熱點(diǎn)的方法如下：（1）選定圖片后，在編輯區(qū)的底部會(huì)自動(dòng)彈出如圖8-11所示的圖片工具欄。（2）單擊圖片工具欄的熱點(diǎn)形狀按鈕（例如長(zhǎng)方形按鈕），這時(shí)鼠標(biāo)變成鉛筆形狀，將光標(biāo)定位到需創(chuàng)建熱點(diǎn)區(qū)域的左上角或右下角，然后拖動(dòng)鼠標(biāo)形成一個(gè)熱點(diǎn)區(qū)域，松開(kāi)鼠標(biāo)后會(huì)自動(dòng)彈出“創(chuàng)建超鏈接”對(duì)話框。（3）在“創(chuàng)建超鏈接”對(duì)話框中設(shè)定鏈接目標(biāo)。圖8-11圖片工具欄 利用書(shū)簽實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)部跳轉(zhuǎn)。（1）選定要插入書(shū)簽的位置。（2）單擊“插入”“書(shū)簽”命令，彈出“書(shū)

15、簽”對(duì)話框。在對(duì)話框內(nèi)輸入書(shū)簽名后單擊“確定”按鈕，即可創(chuàng)建一個(gè)書(shū)簽。（3）建立書(shū)簽后，就可以創(chuàng)建鏈接到該書(shū)簽的超鏈接。創(chuàng)建的方法和建立超鏈接的方法相同，只是選擇書(shū)簽作為超鏈接的目標(biāo)。 表單是用來(lái)收集瀏覽者的用戶名、密碼、E-mail地址、個(gè)人愛(ài)好和聯(lián)系地址等用戶信息的輸入?yún)^(qū)域集合。圖8-12公司概況表單 。FrontPage2003提供了文本框、文本區(qū)、單選按鈕、復(fù)選框、下拉框、提交按鈕和重置按鈕等豐富的表單域。 圖8-12公司概況表單 “表單” “表單”命令，在網(wǎng)頁(yè)上插入一個(gè)表單。在表單內(nèi)輸入所需的文本，例如“姓名”、“性別”等，然后在對(duì)應(yīng)的位置插入表單對(duì)象。圖8-13表單域類型 1 1文

16、本框文本框 2下拉菜單下拉菜單 3復(fù)選框復(fù)選框 4選項(xiàng)按鈕選項(xiàng)按鈕 5文本區(qū)文本區(qū)6按鈕按鈕 框架網(wǎng)頁(yè)是種特殊的網(wǎng)頁(yè)，它可將瀏覽器窗口分成不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的網(wǎng)頁(yè)。 1創(chuàng)建框架單擊菜單欄上的“文件”，在彈出的下拉菜單中選中“新建”，在窗口的右邊出現(xiàn)“新建”面板，在新建項(xiàng)中選擇“其他網(wǎng)站模板”。然后在彈出的“網(wǎng)頁(yè)模板”對(duì)話框中選擇“框架網(wǎng)頁(yè)”選項(xiàng)卡，如圖8-14所示。 2設(shè)置框架屬性鼠標(biāo)右擊某個(gè)框架后，在彈出的快捷菜單中可以設(shè)置“框架屬性” 。 在創(chuàng)建網(wǎng)頁(yè)時(shí)，有時(shí)為了達(dá)到特殊的顯示效果，可以將框架線去掉。選擇“文件”菜單上“屬性”命令，打開(kāi)“網(wǎng)頁(yè)屬性”對(duì)話框，然后選擇“框架”選項(xiàng)

17、卡。用戶還可以在設(shè)置每個(gè)框架的屬性時(shí)，單擊“框架屬性”對(duì)話框中的“框架網(wǎng)頁(yè)”按鈕，顯示邊框前“”去掉就可以隱藏框架線。 “保存”命令，會(huì)出現(xiàn)4次“另存為”對(duì)話框，“另存為”對(duì)話框預(yù)覽區(qū)將指示所保存的框架對(duì)象。保存一個(gè)框架的網(wǎng)頁(yè)后，F(xiàn)rontPage 2003會(huì)對(duì)每一個(gè)尚未保存的新網(wǎng)頁(yè)或框架網(wǎng)頁(yè)重復(fù)進(jìn)行此操作，直到全部網(wǎng)頁(yè)和框架網(wǎng)頁(yè)都保存為止。 v 二、特殊效果FrontPage 2003 的組件功能可以為網(wǎng)頁(yè)加入動(dòng)態(tài)效果，設(shè)計(jì)出生動(dòng)活潑的Web網(wǎng)頁(yè)。1字幕2站點(diǎn)計(jì)數(shù)器3交互式按鈕4設(shè)置網(wǎng)頁(yè)過(guò)渡方式 5. 設(shè)置動(dòng)態(tài)HTML效果 v 一、測(cè)試網(wǎng)頁(yè)網(wǎng)頁(yè)制作完成后還需要對(duì)網(wǎng)頁(yè)進(jìn)行測(cè)試，以檢查每個(gè)網(wǎng)頁(yè)的功能是否實(shí)現(xiàn)，超鏈接是否正確等。1拼寫(xiě)檢查拼寫(xiě)檢查是網(wǎng)頁(yè)測(cè)試時(shí)最基本的一項(xiàng)檢查，可以使用FrontPage 2000自帶的拼寫(xiě)檢查功能，它可以檢查并修改整個(gè)站點(diǎn)所有頁(yè)面的英文拼寫(xiě)及語(yǔ)法錯(cuò)誤。 2000，打開(kāi)站點(diǎn)，單擊視圖欄的“超鏈接”按鈕，切換到超鏈接視圖。雙擊其主頁(yè)圖標(biāo)打開(kāi)主頁(yè)。（2）單擊工具欄中的“在瀏覽器中預(yù)覽”按鈕，并把瀏覽器窗口最大化。依次點(diǎn)擊