FrontPage網(wǎng)頁制作

1、第第8章章網(wǎng)頁制作軟件FrontPage2003本章要點本章要點1.站點的創(chuàng)建與發(fā)布。2.網(wǎng)頁的基本編輯。3.表格的操作和利用表格布局。4.文本的設(shè)置。5.網(wǎng)頁元素的插入。6.超鏈接的基本操作。7.表單的基本概念和操作。8.框架式網(wǎng)頁的制作。9.幾種特殊動態(tài)效果的制作。目目 錄錄l8.1認(rèn)識FrontPage2003l8.2案例學(xué)生個人就職網(wǎng)站8.2.1案例綜述8.2.2站點的創(chuàng)建8.2.3網(wǎng)頁的基本編輯8.2.4表格8.2.5文本設(shè)置8.2.6網(wǎng)頁元素的插入8.2.超鏈接8.2.8表單8.2.9框架式網(wǎng)頁8.2.10動態(tài)效果8.1 認(rèn)識認(rèn)識FrontPage2003lFrontPage200

2、3的特點：1.更容易建立專業(yè)、精確的網(wǎng)站。2.FrontPage2003不僅可以用來制作網(wǎng)頁，用戶可以使用它來建設(shè)和維護(hù)整個網(wǎng)站，更簡單的檢測、更新你的網(wǎng)站。工作組用戶可以通過FrontPage2003使分布在世界各地的子公司一起工作。3.FrontPage2003與其他Office組件的整合性更加提高，打開和運行的速度比FrontPage2000更快。一、 FrontPage2003概述FrontPage2003是Office2003組件之一，運行與啟動Office其他軟件相同。啟動成功后，出現(xiàn)的初始畫面可能因機器使用情況的不同而不同，一般的界面如圖8-1所示，菜單部分與Office中的其他

3、軟件相似，最大區(qū)別是工作區(qū)的左端有一個視圖欄，包含：網(wǎng)頁、文件夾、報表、導(dǎo)航、超鏈接、任務(wù)。圖8-1 FrontPage2003啟動后顯示頁面 二、視圖欄 1網(wǎng)頁。編輯網(wǎng)頁需在網(wǎng)頁。編輯網(wǎng)頁需在“網(wǎng)頁網(wǎng)頁”視圖中進(jìn)行。在視圖中進(jìn)行。在“網(wǎng)網(wǎng)頁頁”視圖中，有視圖中，有“設(shè)計設(shè)計”、“拆分拆分”、“代碼代碼”和和“預(yù)預(yù)覽覽”4張選項卡。張選項卡。 2遠(yuǎn)程網(wǎng)站視圖。同步此網(wǎng)站和遠(yuǎn)程網(wǎng)站之間的文件。遠(yuǎn)程網(wǎng)站視圖。同步此網(wǎng)站和遠(yuǎn)程網(wǎng)站之間的文件。3文件夾視圖。用于管理站點中的文件和文件夾。文件夾視圖。用于管理站點中的文件和文件夾。4報表視圖。分析網(wǎng)站并管理其內(nèi)容。報表視圖。分析網(wǎng)站并管理其內(nèi)容。5導(dǎo)航視

4、圖。顯示站點的導(dǎo)航結(jié)構(gòu)，用于對站點結(jié)構(gòu)的導(dǎo)航視圖。顯示站點的導(dǎo)航結(jié)構(gòu)，用于對站點結(jié)構(gòu)的管理。管理。6超鏈接視圖。用于顯示站點中每一頁的超鏈接。超鏈接視圖。用于顯示站點中每一頁的超鏈接。 7任務(wù)視圖。用于創(chuàng)建和管理站點中的任務(wù)。任務(wù)視圖。用于創(chuàng)建和管理站點中的任務(wù)。8.2案例學(xué)生個人就職網(wǎng)站 本章案例“個人就業(yè)網(wǎng)站”，該網(wǎng)站的主頁上有5個板塊，分別是：學(xué)習(xí)經(jīng)歷、求職簡歷、求職須知、課程成績、作品圖片。學(xué)生個人就職網(wǎng)站結(jié)構(gòu)圖如圖8-2所示。 圖8-2 學(xué)生個人就職網(wǎng)站結(jié)構(gòu)圖8.2.1案例綜述用FrontPage2003開發(fā)本案例，用到的知識點主要有：創(chuàng)建站點、文本的格式化，網(wǎng)頁屬性的設(shè)置(網(wǎng)頁背景

5、顏色、背景圖片、網(wǎng)頁標(biāo)題、背景音樂)，插入層，水平線與圖像的插入，表格的制作及用表格布局，超鏈接(文本超鏈接、圖像超鏈接、熱點超鏈接、書簽超鏈接)，表單的制作，框架網(wǎng)頁制作，幾種動態(tài)效果(字幕、交互式按鈕、動態(tài)DTML、站點計數(shù)器)，插入Flash影片等。如圖8-3是用這些知識點制作的個人就職網(wǎng)站主頁。圖8-3 個人就職網(wǎng)站主頁8.2.2站點的創(chuàng)建所謂站點，就是多個相關(guān)網(wǎng)頁通過各種鏈接關(guān)聯(lián)起來的集合。在使用FrontPage 2003設(shè)計網(wǎng)頁之前， 應(yīng)建立一個本地站點，用來管理創(chuàng)建的網(wǎng)頁。 用戶可以選擇以下三種方式創(chuàng)建一個新的站點：（1）站點向?qū)?。包括“?dǎo)入網(wǎng)站向?qū)А?、“公司展示向?qū)А?、“?shù)據(jù)

6、庫界面向?qū)А?、“討論網(wǎng)站向?qū)А?。?）站點模板。包括“個人網(wǎng)站” 、“客戶支持網(wǎng)站”、“項目網(wǎng)站”。（3）自定義站點。包括“只有一個網(wǎng)頁的站點” 、“空白網(wǎng)站”、“SharePoint工作組網(wǎng)站”。使用“只有一個網(wǎng)頁的站點”創(chuàng)建學(xué)生個人就職網(wǎng)站。在FrontPage2003的主窗口下，單擊菜單欄上的“文件”，在彈出的下拉菜單中選中“新建”，在窗口的右邊出現(xiàn)“新建”面板，在新建項中選擇“其他網(wǎng)站模板”。在“站點”列表框中，選中“只有一個網(wǎng)頁的網(wǎng)站”圖標(biāo)，并在右邊“指定新網(wǎng)站的位置”框中，輸入新站點的名稱。如圖8-4“網(wǎng)站模板”對話框。圖8-4 “網(wǎng)站模板”對話框 8.2.3網(wǎng)頁的基本編輯一、新建

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

8、名”下拉列表框中輸入網(wǎng)頁的文件名“index.htm”，再單擊“保存”按鈕即可。如果當(dāng)前網(wǎng)頁是從當(dāng)前網(wǎng)站打開的，則單擊“常用”工具欄中的“保存”按鈕即可。如果當(dāng)前網(wǎng)頁是從當(dāng)前網(wǎng)站之外的位置打開的，則單擊“文件”|“另存為”命令，在彈出的“另存為”對話框中找到并雙擊要保存網(wǎng)頁的文件夾，并在“文件名”下拉列表框中輸入網(wǎng)頁的文件名，最后單擊“保存”按鈕即可。三、網(wǎng)頁屬性設(shè)置 網(wǎng)頁的屬性包括網(wǎng)頁的背景顏色、圖片、網(wǎng)頁的標(biāo)題和網(wǎng)頁的頁邊距等。選擇菜單“文件”“屬性”命令或在頁面空白處右鍵單擊選擇“頁面屬性”命令則可以在彈出的對話框中進(jìn)行設(shè)置，如圖8-5所示，或者在沒有選中任何對象的情形下，選菜單“格式”

9、“背景”，直接進(jìn)行背景顏色圖片的設(shè)置。圖8-5網(wǎng)頁屬性對話框8.2.4表格一、插入表格一、插入表格在“表格”菜單“插入”級聯(lián)式菜單中選擇“表格”命令，出現(xiàn)如圖8-6所示。單擊“確定”就可以網(wǎng)頁中插入表格。圖8-6插入表格屬性對話框 二、設(shè)置表格屬性l表格屬性設(shè)置若想設(shè)置表格的邊框粗細(xì)、顏色以及表格的背景可指向表格，用鼠標(biāo)右鍵單擊表格，在彈出快捷菜單中選擇“表格屬性”命令，打開“表格屬性”對話框如圖8-6所示。大?。涸O(shè)置表格的行列數(shù)目。布局：設(shè)置表格的對齊方式、邊框粗細(xì)（無邊框為0）、單元格邊距（表格內(nèi)單元邊框線之間的距離）、單元格間距（單元格內(nèi)容與邊框線之間的距離）。指定寬度：指定寬度前，則在

10、復(fù)選框前打上“”，寬度單位有兩種分別為像素和百分比，百分比是相對瀏覽器而言，像素則為絕對值。三、編輯表格 1.選定表格對象 選定單元格，執(zhí)行“表格”“選定” “單元格”命令；選定行、列或整個表格，在“表格”“選定”中選擇相應(yīng)的命令即可。2.插入、刪除表格對象 插入行或列，可以使用“表格”“插入” “行或列”命令，也可以用鼠標(biāo)右擊表格后在快捷菜單中選擇相應(yīng)的命令。如果要刪除行或列，只要選定行或列后單擊“表格” “刪除單元格”命令即可刪除。3.合并、拆分單元格 合并、拆分單元格的操作可以通過“表格”菜單的“合并單元格”或“拆分單元格”命令來完成。也可以通過右擊鼠標(biāo)后在彈出的快捷菜單中選擇相應(yīng)的命令

11、進(jìn)行。 4.設(shè)置表格或單元格屬性 將打開“表格屬性”或“單元格屬性”對話框，或右擊鼠標(biāo)彈出快捷菜單。 8.2.5文本設(shè)置一、輸入文本一、輸入文本可選擇兩種方式：第一種是和在Word一樣，可以直接在FrontPage2003的普通視圖中輸入文字，文字的編輯修改和Word基本一樣；第二種是可以通過復(fù)制和粘貼從其他地方復(fù)制文字。二、設(shè)置文字及段落格式二、設(shè)置文字及段落格式文字格式，包括“字體”、“字型”、“大小”、“顏色”、“效果”以及字符間距的設(shè)置，以直接在格式工具欄中進(jìn)行，也可以選擇菜單“格式”“字體”命令，也可以選擇字符后右鍵單擊選擇“字體”命令。彈出如圖8-7所示對話框。圖8-7文字格式對話

12、框 8.2.6網(wǎng)頁元素的插入一、插入換行符一、插入換行符網(wǎng)頁中插入換行符可將網(wǎng)頁中的一段網(wǎng)頁內(nèi)容斷開。FrontPage中的換行分成“隔行換行“（兩行之間有空行）和“緊湊換行”（兩行間沒有空行）兩種，這兩種換行符的插入方法分別是：（1）插入“隔行換行”。直接在插入點按Enter鍵。（2）插入“緊湊換行”。先定位插入點，選擇“插入”菜單“換行符”命令，或按Shift+Enter組合鍵。二、插入水平線二、插入水平線方法：光標(biāo)定位于表格第二行，單擊“插入”菜單“水平線”命令，就可以在第二行中插入水平線。單擊剛插入的水平線，右鍵單擊在快捷菜單中選擇“水平線屬性”。如圖8-8水平線屬性對話框。圖8-8水

13、平線屬性對話框 三、插入圖片和背景圖片三、插入圖片和背景圖片1插入圖片插入圖片將插入點定位欲插入圖片位置，選擇“插入”菜單上的“圖片”命令。從“圖片”子菜單中選擇“來自文件”命令，在對話框?qū)ふ倚枰膱D片文件，單擊“確定”按鈕插入圖片。在圖片上右鍵單擊，在快捷菜單中選擇“圖片屬性”，在圖片屬性對話框中可以設(shè)置圖片屬性。如圖8-9插入圖片對話框。圖8-9 插入圖片對話框2設(shè)置背景設(shè)置背景背景可由“背景圖片”和“背景顏色”構(gòu)成，其設(shè)置在網(wǎng)頁屬性、表格屬性或單元格屬性中設(shè)置：（1）背影圖片的設(shè)置：在“背景”選項卡中，選中“背景圖片”復(fù)選框，然后在與之相關(guān)的文本框中指定圖片文件的位置。單擊“瀏覽”按鈕可

14、以快速定位圖像文件。（2）背景顏色的設(shè)置：在“背景”框中可以設(shè)置網(wǎng)頁的背景顏色。如果同時使用背景顏色和背景圖片，則背景圖片將覆蓋背景顏色。（3）文字和超鏈接的顏色：在“文本”、“超鏈接”等框架中可以設(shè)置普通文本、超鏈接文本的顏色。四、層操作四、層操作1插入層插入層方法是：“插入”菜單“層”命令。然后鼠標(biāo)在1行2列上拖動即可。2選擇層選擇層可以單擊層的選擇手柄、單擊層邊界等方法，選擇多層時候可以使用shift鍵來配合使用。3調(diào)整層大小調(diào)整層大小選中層，然后在屬性面板中輸入寬度和高度值。或直接用鼠標(biāo)的在層的八個控點上拖動調(diào)整大小。4移動層移動層無論是移動一個或多個層，先選中層，用鼠標(biāo)拖住最后一個選

15、中層的手柄隨意移動。 五、插入插件五、插入插件操作方法：移動鼠標(biāo)在層中單擊，選擇“插入”菜單上的“Web組件”，在“插入Web組件”對話框中“組件類型”選擇“高級控件”。選擇“一個控件”中選擇“插件”，彈出“插件屬性”對話框。 六、插入背景音樂六、插入背景音樂具體操作步驟為：在網(wǎng)頁視圖模式下，單擊“文件”菜單“屬性”命令或“格式”菜單“背景”命令或右鍵單擊網(wǎng)頁快捷菜單中選擇“頁面屬性命令”。選擇“常規(guī)”選項卡，在“背景音樂”欄下“位置”框中輸入播放的聲音文件的位置，若選中“不限次數(shù)”復(fù)選框，表示在瀏覽器中該音頻文件將持續(xù)地播放。 8.2.7超鏈接超鏈接概念：超鏈接是指站點內(nèi)不同網(wǎng)頁之間、站點與

16、站點之間的一種鏈接關(guān)系，它不僅使站點內(nèi)的每一個網(wǎng)頁有機地聯(lián)系在一起上，而且使不同的站點之間建立了聯(lián)系。使用超鏈接，瀏覽者可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，從一個站點轉(zhuǎn)到其他的站點。除了指向網(wǎng)頁和和站點，超鏈接還可以指向圖片、電子郵件地址、多媒體文件，甚至可以指向一個程序。一、為文本創(chuàng)建超鏈接一、為文本創(chuàng)建超鏈接1 1鏈接到網(wǎng)頁鏈接到網(wǎng)頁首先選定要建立超鏈接的文本，單擊“插入”“超鏈接”命令，或右鍵單擊選定的文本在快捷菜單中選擇“超鏈接”，打開如圖8-10所示的“插入超鏈接”對話框。根據(jù)超鏈接的目標(biāo)，用戶可以從列表框中選定某個網(wǎng)頁文件，也可以直接在“地址”文本框（URL）中輸入要鏈接的目標(biāo)地址，還可

17、以單擊圖標(biāo)，從彈出的“選擇文件”對話框中選定鏈接的目標(biāo)文件。選定的目標(biāo)文件地址均會出現(xiàn)在地址文本框（URL）中。圖8-10插入超鏈接對話框 2鏈接到其他網(wǎng)站的網(wǎng)頁鏈接到其他網(wǎng)站的網(wǎng)頁方法如下：（ 1 ）首 先 選 定 要 建 立 超 鏈 接 的 文 本 ， 單 擊 “ 插入”“超鏈接”命令，或右鍵單擊選定的文本在快捷菜單中選擇“超鏈接”，打開如圖8-10所示的“插入超鏈接”對話框。（2）在“編輯超鏈接”對話框中的地址文本框中輸入 所 需 要 鏈 接 的 其 他 網(wǎng) 站 的 網(wǎng) 頁 如“http:/ 1圖像的默認(rèn)超鏈接圖像的默認(rèn)超鏈接先選中圖片，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“超鏈接”菜單

18、項，會彈出一個“編輯超鏈接”對話框或者單擊“插入”菜單上的“超鏈接”。（1）如果要鏈接的是當(dāng)前站點中的文件或計算機中某個目錄下的文件，則從列表框中選擇網(wǎng)頁文件，查找該文件，單擊“確定”按鈕。（2）如果要鏈接的網(wǎng)頁或文件夾來自Web，在“插入超鏈接”對話框中的地址文本框中輸入所需要鏈接的網(wǎng)站,單擊“確定”按鈕。（3）如果要鏈接的是電子郵件，打開“插入超鏈接”對話框，單擊左邊的電子郵件地址，在“電子郵件地址”文本框中輸入郵件地址，單擊“確定”按鈕。2 2圖像的熱點鏈接圖像的熱點鏈接熱點是圖像上具有超鏈接的區(qū)域，一幅圖片上可以包含若干個熱點，單擊圖片中的這些熱點可以跳轉(zhuǎn)到不同的目標(biāo)。熱點形狀可以是矩

19、形、圓形或多邊形，熱點位置可自行確定。設(shè)置熱點的方法如下：（1）選定圖片后，在編輯區(qū)的底部會自動彈出如圖8-11所示的圖片工具欄。（2）單擊圖片工具欄的熱點形狀按鈕（例如長方形按鈕），這時鼠標(biāo)變成鉛筆形狀，將光標(biāo)定位到需創(chuàng)建熱點區(qū)域的左上角或右下角，然后拖動鼠標(biāo)形成一個熱點區(qū)域，松開鼠標(biāo)后會自動彈出“創(chuàng)建超鏈接”對話框。（3）在“創(chuàng)建超鏈接”對話框中設(shè)定鏈接目標(biāo)。圖8-11圖片工具欄三、書簽的設(shè)置和使用利用書簽實現(xiàn)網(wǎng)頁內(nèi)部跳轉(zhuǎn)。（1）選定要插入書簽的位置。（2）單擊“插入”“書簽”命令，彈出“書簽”對話框。在對話框內(nèi)輸入書簽名后單擊“確定”按鈕，即可創(chuàng)建一個書簽。（3）建立書簽后，就可以創(chuàng)建鏈

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

21、框復(fù)選框 4選項按鈕選項按鈕 5文本區(qū)文本區(qū)6按鈕按鈕8.2.9框架式網(wǎng)頁框架網(wǎng)頁是種特殊的網(wǎng)頁，它可將瀏覽器窗口分成不同的區(qū)域，每個區(qū)域都可以顯示不同的網(wǎng)頁。1創(chuàng)建框架單擊菜單欄上的“文件”，在彈出的下拉菜單中選中“新建”，在窗口的右邊出現(xiàn)“新建”面板，在新建項中選擇“其他網(wǎng)站模板”。然后在彈出的“網(wǎng)頁模板”對話框中選擇“框架網(wǎng)頁”選項卡，如圖8-14所示。 2設(shè)置框架屬性鼠標(biāo)右擊某個框架后，在彈出的快捷菜單中可以設(shè)置“框架屬性”。圖8-14新建框架網(wǎng)頁對話框 二、顯示或隱藏框架線在創(chuàng)建網(wǎng)頁時，有時為了達(dá)到特殊的顯示效果，可以將框架線去掉。選擇“文件”菜單上“屬性”命令，打開“網(wǎng)頁屬性”對話框，然后選擇“框架”選項卡。用戶還可以在設(shè)置每個框架的屬性時，單擊“框架屬性”對話框中的“框架網(wǎng)頁”按鈕，顯示邊框前“”去掉就可以隱藏框架線。三、框架網(wǎng)頁的保存在多框架網(wǎng)頁中，每個框架都將單獨形成一個文件，整個網(wǎng)頁也需要一個文件。在圖8-15中建立的框架網(wǎng)頁含有3個框架，將產(chǎn)生4個文件。保存時，單擊“文件”“保存”命令，會出現(xiàn)4次“另存為”對話框，“另存為”對話框預(yù)覽區(qū)將指示所保存的框架對象。保存一個框架的網(wǎng)頁后，F(xiàn)rontPage 2003會對