FrontPage2003的教程詳細

1、第六章第六章 FrontPage 2003 第六章 FrontPage2003實例實例6-1 熟悉熟悉FrontPage2003FrontPage2003的操作界面的操作界面實例實例6-2 利用利用FrontPage2003FrontPage2003創(chuàng)建一個網(wǎng)頁創(chuàng)建一個網(wǎng)頁實例實例6-3 查看、編輯源文件以及預覽網(wǎng)頁查看、編輯源文件以及預覽網(wǎng)頁實例實例6-4 利用利用FrontPageFrontPage在網(wǎng)頁中插入圖像在網(wǎng)頁中插入圖像實例實例6-5 建立和編輯超鏈接建立和編輯超鏈接實例實例6-6 利用利用FrontPageFrontPage在網(wǎng)頁中插入表格在網(wǎng)頁中插入表格實例實例6-7 插入表

2、單實例實例6-8 創(chuàng)建站點思考與練習思考與練習第六章第六章 FrontPage 2003 第六章 FrontPage2003 FrontPage是常用的制作網(wǎng)頁和網(wǎng)站的工具軟件，F(xiàn)rontPage2003是FrontPage的最新版本，它集顯示、編輯網(wǎng)頁HTML源代碼，插入文本、圖片、聲音、動畫、表單、超鏈結(jié)和使用數(shù)據(jù)庫和腳本語言，管理和發(fā)布站點的工具為一體，可以在同一界面中完成設(shè)計、制作、發(fā)布、管理站點的工作。本章我們將主要通過9個案例來介紹FrontPage2003的常用功能。第六章第六章 FrontPage 2003 實例6-1 熟悉FrontPage2003的操作界面一、本例要求一、本

3、例要求 熟悉FrontPage2003的菜單欄、 工具欄、視圖欄和主編輯區(qū)。第六章第六章 FrontPage 2003 二、操作步驟 在windows中，使用開始菜單“程序”-“Microsoft FrontPage2003”，啟動FrontPage2003。則會看到FrontPage2003的操作界面，如圖6-1所示。圖6-1操作界面第六章第六章 FrontPage 2003 圖6-2顯示了FrontPage2003的菜單欄，瀏覽各個菜單包括的菜單項。圖6-2菜單項圖6-3顯示了FrontPage2003常用工具欄中的各種按鈕。如，等。圖6-3各種按鈕第六章第六章 FrontPage 200

4、3 圖6-4顯示了FrontPage2003格式工具欄中的各種工具。圖6-4各種工具 觀察主編輯區(qū)，注意編輯區(qū)的左下方有四個選項卡，如圖6-5所示，可以用于選擇網(wǎng)頁的顯示方式。圖6-5網(wǎng)頁的顯示方式第六章第六章 FrontPage 2003 6. 觀察在FrontPage主界面右邊有一“任務(wù)窗格”窗口，其中包括“開始工作”，“幫助”等多個任務(wù)窗格。可以方便快捷地來編輯網(wǎng)頁。如圖6-6所示。圖6-6任務(wù)窗格第六章第六章 FrontPage 2003 三、本案例知識點三、本案例知識點 FrontPage2003包括“文件”、“編輯”、“試圖”、“查看”、“插入”、“格式”、“工具”、“表格”、“框

5、架”、“窗口”、“幫助”共10個菜單，它們?yōu)橛脩籼峁┝司W(wǎng)頁編輯和管理網(wǎng)站的各種功能：文件：包括新建、打開、關(guān)閉、保存和預覽網(wǎng)頁和站點等功能。編輯：與Office系列相同具有撤銷、剪切復制、粘貼、刪除和查找等功能。視圖：控制網(wǎng)頁各種視圖之間的切換以及工具欄和任務(wù)窗格的顯示。查看：包括選擇視圖欄中的各種視圖方式以及顯示各種工具欄按鈕的功能。插入：既可以插入換行符、水平線、表單、圖片和超鏈接等網(wǎng)頁元素，也可 以插入各種Office組件和對象格式：可以設(shè)置字體、邊框、網(wǎng)頁樣式和背景圖片。工具：包括設(shè)置FrontPage工具欄、選項以及網(wǎng)頁選項和加載宏等功能。表格：主要包括在網(wǎng)頁中插入表格以及設(shè)置表格、

6、單元格屬性?？蚣埽褐饕▽蚣艿膭h除和拆分以及設(shè)置框架屬性等功能窗口：在各個網(wǎng)頁窗口之間切換。幫助：包括FrontPage2003的幫助文檔。第六章第六章 FrontPage 2003 FrontPage2003的工具欄與Word等Office系列大致相同主要包括新建、打開、保存、打印、預覽、剪切、復制、粘貼等常用工具按鈕。主編輯區(qū)左下方的四個選項卡用于在“設(shè)計”/“拆分”/“代碼”/“預覽”四種視圖之間互相切換。 設(shè)計設(shè)計：可以查看編輯狀態(tài)下的網(wǎng)頁。 拆分拆分：把編輯窗口分為兩部分上面顯示代碼，下面顯示編輯 狀態(tài)下的網(wǎng)頁。 代碼代碼：可以查看HTML源代碼。 預覽預覽：可以提前預覽網(wǎng)頁在發(fā)

7、布后的情況。第六章第六章 FrontPage 2003 實例6-2 利用FrontPage2003創(chuàng)建一個網(wǎng)頁一、本例要求 掌握利用FrontPage2003創(chuàng)建、 保存、打開網(wǎng)頁的步驟和方法。第六章第六章 FrontPage 2003 二、操作步驟二、操作步驟 使用菜單“文件”“新建”，在彈出的“新建”任務(wù)窗格中選擇“空白網(wǎng)頁”。任務(wù)窗格消失，這時就創(chuàng)建了一個空白網(wǎng)頁。在編輯區(qū)輸入一段文字：“Hello,world.”。如圖6-7所示圖6-7輸入文字第六章第六章 FrontPage 2003 使用菜單“文件”“，如圖6-8所示。圖6-8“保存”對話框第六章第六章 FrontPage 2003

8、 選擇網(wǎng)頁文件保存的位置，然后單擊“更改標題”按鈕，在彈出的“設(shè)置網(wǎng)頁標題”對話框中輸入新的網(wǎng)頁標題文字“案例6-2”，如圖6-9所示。單擊“確定”按鈕。圖6-9“設(shè)置網(wǎng)頁標題”對話框第六章第六章 FrontPage 2003 在“另存為”對話框中，輸入新的文件名（新建的文件默認名為“index”）example6-2。選擇保存類型，一般為“網(wǎng)頁”。單擊“保存”按鈕，即可完成文件保存。第六章第六章 FrontPage 2003 三、本案例知識點三、本案例知識點若要在FrontPage中打開已存在的網(wǎng)頁文件,則使用菜單“文件”“打開”，彈出如圖6-10所示在“打開文建”對話框中確定要打開網(wǎng)頁文件

9、，單擊“打開”按鈕或雙擊網(wǎng)頁文件名即可。新建空白網(wǎng)頁時也可以使用工具欄中的按鈕。第六章第六章 FrontPage 2003 打開、保存網(wǎng)頁時可以分別使用工具欄中的按鈕和按鈕。圖6-10“打開文件”對話框第六章第六章 FrontPage 2003 實例實例6-3 查看、編輯源文件以及預覽網(wǎng)頁查看、編輯源文件以及預覽網(wǎng)頁一、本例要求 掌握在FrontPage中查看、編輯源文件以及預覽網(wǎng)頁的方法第六章第六章 FrontPage 2003 二、操作步驟二、操作步驟單擊菜單“文件”“打開”命令，打開在案例6-2中創(chuàng)建的網(wǎng)頁example6-2。單擊編輯窗口左下方的“代碼。如圖6-11所示。圖6-11查看

10、文件源代碼第六章第六章 FrontPage 2003 將源文件第十一行改為：Welcome to LanZhou!單擊“設(shè)計”，“拆分”選項卡，觀察網(wǎng)頁主體部分文字及代碼的變化。單擊“預覽”選項卡，可以預覽網(wǎng)頁發(fā)布后的大致情況。單擊菜單“文件”“另存為”,更改網(wǎng)頁標題為“案例6-3”，保存文件名為example6-3。第六章第六章 FrontPage 2003 三、本案例知識點在查看網(wǎng)頁的代碼窗口時，可以看到不同的源代碼用不同的顏色顯示，HTML的標記符用紫色顯示，屬性名用紅色顯示，屬性值用藍色顯示正文標題和文字用黑色顯示。在查看網(wǎng)頁的代碼時，可以直接對HTML源代碼進行編輯和修改。單擊“預覽

11、”選項卡后看到的網(wǎng)頁是網(wǎng)頁發(fā)布后的大致情況，但不一定是網(wǎng)頁在瀏覽器中瀏覽時的真實情形。如果要在指定瀏覽器中預覽所編輯的網(wǎng)頁。其步驟如下：1）保存所編輯的網(wǎng)頁。第六章第六章 FrontPage 2003 2）使用菜單“文件”“在瀏覽器中預覽”，在彈出的如圖6-12所示的二級菜單中，選擇瀏覽器以及分辨率等參數(shù)，即可打開相應(yīng)瀏覽器預覽網(wǎng)頁。在此二級菜單中，選擇“編輯瀏覽器列表”，在如圖6-13所示的中可以根據(jù)需要添加、修改、刪除瀏覽器，這樣就可以利用不同的瀏覽器查看網(wǎng)頁在不同的用戶瀏覽器中的顯示效果。圖6-12二級菜單第六章第六章 FrontPage 2003 注意：如果文件未保存，此時如果預覽網(wǎng)頁

12、，將出現(xiàn)一個文件為保存的提示對話框，提醒保存當前網(wǎng)頁。如圖6-14所示。圖6-13編輯瀏覽器列表圖6-14提醒保存當前網(wǎng)頁第六章第六章 FrontPage 2003 實例實例6-4 利用利用FrontPageFrontPage在網(wǎng)頁中插入圖像在網(wǎng)頁中插入圖像一、本例要求 掌握在網(wǎng)頁中插入圖像的方法和步驟。 掌握編輯網(wǎng)頁中圖片的方法和步驟。 掌握改變圖片屬性的方法和步驟。第六章第六章 FrontPage 2003 二、操作步驟二、操作步驟運行FrontPage，新建一個空白網(wǎng)頁。使用菜單“插入”“圖片”“來自文件”，從打開的“圖片”對話框（如圖6-15所示）中選擇圖像文件cup1.jpg。圖6-

13、15“圖片”對話框第六章第六章 FrontPage 2003 單擊“確定”按鈕，則在網(wǎng)頁中插入了選定的圖片。如圖6-16所示。圖6-16網(wǎng)頁中插入了選定的圖片第六章第六章 FrontPage 2003 選中插入的圖片，單擊鼠標右健，選擇“編輯圖片”命令，出現(xiàn)“圖像屬性”對話框，如圖6-17所示。圖6-17“圖像屬性”對話框第六章第六章 FrontPage 2003 在“外觀”選項卡中，選擇對齊方式為“右對齊”，設(shè)定“編框粗細”為1。選中“指定大小”，設(shè)定寬度為“200”像素，選中“保持縱橫比”。如圖3-18所示。圖6-18設(shè)定圖像屬性第六章第六章 FrontPage 2003 單擊“確定”按鈕

14、，結(jié)果如圖6-19所示。圖6-19結(jié)果圖第六章第六章 FrontPage 2003 7. 單擊取文件名為example6-4，更改標題為“案例6-4”，單擊“確定”按鈕。 8. 在彈出的如圖6-20所示的“保存嵌入式文件”對話框中，單擊“確定”按鈕。圖6-20“保存嵌入式文件”對話框第六章第六章 FrontPage 2003 三、本案例知識點三、本案例知識點 圖片除了增加網(wǎng)頁的裝飾效果外，也可作為網(wǎng)頁的導航按鈕。 從本地文件系統(tǒng)中添加圖片，圖片可以為GIF、JPEG、BMP等文件格式。 保存網(wǎng)頁時，F(xiàn)rontPage會提示將圖片保存到您的站點中。若圖片不是GIF或JPEG 格式，使用256色或

15、更少顏色的圖片會自動地轉(zhuǎn)換成GIF，而所有其他的圖片會轉(zhuǎn)換成JPEG格式。第六章第六章 FrontPage 2003 利用FrontPage不僅可以插入來自文件的圖片，也可以插入Office剪貼畫庫中的剪貼畫。插入時步驟與插入文件圖片的步驟基本相同只需在上述步驟中，將2中的“插入”“圖片”“來自文件”改為“插入”“圖片”“剪貼畫”即可。選中插入的圖片，單擊菜單“視圖”“工具欄”“圖片”，在屏幕下方會彈出“圖片”工具欄。工具欄如圖6-21所示，利用這些工具可以對已插入網(wǎng)頁中的圖片進行編輯。圖6-21“圖片”工具欄第六章第六章 FrontPage 2003 圖片”工具欄中提供了更改圖片亮度、顏色對

16、比度、轉(zhuǎn)換為黑白圖片、裁剪圖片、試圖片中的顏色變成透明、在圖片上放置文本、設(shè)置圖片的對齊方式和間距，創(chuàng)建圖片的縮略等工具。 在“圖片屬性”對話框中，有“外觀”、“常規(guī)”和“視頻”3個選項卡，在“外觀”選項卡中可以進行圖像的布局和大小參數(shù)的設(shè)置。見本案例中的圖6-17。第六章第六章 FrontPage 2003 在“常規(guī)”選項卡中，可以選擇圖片源、確定圖片的類型、設(shè)置圖片在低分辨率下的替代表示以及圖片超鏈接等內(nèi)容，如圖6-22所示。圖6-22“常規(guī)”選項卡第六章第六章 FrontPage 2003 在“視頻”選項卡中，可以選擇視頻源和設(shè)置播放視頻的參數(shù)，如循環(huán)次數(shù)等。如圖6-23所示。圖6-23

17、“視頻”選項卡第六章第六章 FrontPage 2003 實例6-5 建立和編輯超鏈接一、本例要求 掌握建立文本超鏈接的方法和步驟。 掌握建立圖像超鏈接的方法和步驟。 掌握建立郵件超鏈接的方法和步驟。第六章第六章 FrontPage 2003 二、操作步驟二、操作步驟 運行FrontPage，在“設(shè)計”視圖模式下，輸入文本“蘭州石化職業(yè)技術(shù)學院”。 選中剛才輸入的文本，然后右擊鼠標彈出一個快捷鍵菜單，在快捷菜單中選擇“超鏈接”菜單項（也可以單擊常用工具欄的超級鏈接按鈕），可打開如圖6-24所示的“創(chuàng)建超鏈接”對話框。圖6-24“超鏈接”菜單項第六章第六章 FrontPage 2003 在“插入

18、超鏈接”對話框中的URL欄中輸入鏈接的目標地址http:/，然后單擊“確定”按鈕。參照案例6-4的方法和步驟，在剛才的網(wǎng)頁中插入圖像cup.jpg。設(shè)置邊框粗細為“1”，圖片寬度為“200”像素，選中“保持縱橫比”，其他圖片屬性不變。選中插入的圖像，單擊工具按鈕。在“插入超鏈接”對話框中，定位網(wǎng)頁文件example6-4.htm，單擊“確定”按鈕。保存網(wǎng)頁文件為“example6-5.htm”，標題為“案例6-5”，單擊“文件”“在瀏覽器中預覽”Microsoft Internet Explorer 6.0。查看鏈接的實際效果。第六章第六章 FrontPage 2003 三、本案例知識點三、本

19、案例知識點 超鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接，比如說指向另一個網(wǎng)頁或者相同網(wǎng)頁上的不同位置。這個目的端通常是另一個網(wǎng)頁，但它也可以是一幅圖片一個電子郵件地址、一個文件（如多媒體文件或者 Microsoft Office文檔）或者一個程序。超鏈接可以是文本或者圖片。 在案例網(wǎng)頁中我們給出了的兩個超鏈接分別為文本和圖片。它們的目的端都是一個網(wǎng)頁。如果要是將目的端指向文件一個本地文件，需在“插入超鏈接”對話框中，單擊瀏覽文件按鈕，在彈出的如圖6-25“鏈接到文件”對話框中，選擇一個本地文件作為超鏈接的目標文件。圖6-25“鏈接到文件”對話框第六章第六章 FrontPage 2003 實例6-

20、6 利用FrontPage在網(wǎng)頁中插入表格一、本例要求 掌握在網(wǎng)頁中插入表格的方法和步驟。第六章第六章 FrontPage 2003 如果要將目的端指向一個電子郵件地址，單擊電子郵件鏈接圖標在彈出的如圖6-26“插入超鏈接”對話框中，輸入一個E-mail地址，單擊“確定”按鈕后，在“編輯超鏈接”對話框URL欄中會出現(xiàn)“mailto：E-mail地址”。這樣就把輸入的E-mail地址作為超鏈接的目標。圖6-26設(shè)置電子郵件第六章第六章 FrontPage 2003 二、操作步驟二、操作步驟 運行FrontPage，新建一空白網(wǎng)頁。在“設(shè)計”視圖模式下，輸入文本“課程表”，選中所輸文本，在“格式工

21、具欄”中設(shè)置“文字格式”為“標題1”，字體為“華文新魏”，字號為“7（36磅）”對齊方式為“居中”，編輯后的格式工具欄如圖6-27所示。圖6-27“格式工具欄”第六章第六章 FrontPage 2003 單擊菜單“表格”“插入”“表格”，將出現(xiàn)一個“插入表格”對話框，在該對話框中，設(shè)置表格的行數(shù)和列數(shù)都為“6”，其他選項均選默認，如圖6-28所示，單擊“確定”按鈕。圖6-28“插入表格”對話框第六章第六章 FrontPage 2003 選中表格的第1行，單擊鼠標.右鍵，彈出快捷菜單。在快捷菜單中選擇“單元格屬性”命令，出現(xiàn)“單元格屬性”對話框。在“單元格屬性”對話框中，選中“標.題單元格”和“

22、指定高度”復選框，設(shè)置高度為“40”像素，如圖6-29所示，然后單擊“確定”按鈕。圖6-29“單元格屬性”對話框第六章第六章 FrontPage 2003 如步驟4、5所示方法，將表格第1列.設(shè)置為表格單元格。并選中“指.定寬度”，設(shè)定寬度為20，并選中“百分比”按鈕。如圖6-30所示，然后單擊“確定”按鈕。圖6-30設(shè)定寬度和百分比參數(shù)第六章第六章 FrontPage 2003 分別選中第2，3，4，5，6列，單擊鼠標右鍵，在快捷菜單中選擇“單元格屬性”命令，在“單元格屬性”對話框中選擇單元格的水平對齊方為“水平居中”。并選中“指.定寬度”復選框，指定寬度為“16”，并選中“百分比”按鈕，如

23、圖6-31所示。單擊“確定”按鈕。圖6-31 設(shè)置其它列參數(shù)第六章第六章 FrontPage 2003 在表格的各單元格中分別輸入課程表對應(yīng)的內(nèi)容。保存文件名為“example6-6”，標題為“案例6-6”。單擊預覽按鈕，結(jié)果如圖6-32所示。圖6-32案例6-6效果圖第六章第六章 FrontPage 2003 三、本案例知識點 在網(wǎng)頁中插入表格可以使用菜單命令,也可以使用“常用工具欄”中的插入表格按鈕和“表格”工具欄中的“手繪表格”命令。 表格的各種屬性的設(shè)置方法如下： 1）打開包含表格的網(wǎng)頁， 2）選中表格或在表格的任何區(qū)域， 3）點擊右鍵， 4）彈出快捷菜單， 5）單擊“表格屬性”， 6

24、）彈出如圖6-33的“表格屬性”對框 7）屬性設(shè)置：第六章第六章 FrontPage 2003 布局工具布局工具：當表格用于網(wǎng)頁布局時，可以選擇“使用布局工具”。一般情況下，選擇“自動啟用基于表格內(nèi)容的布局工具。大小屬性大小屬性：指定表格的寬度和大小。布局參數(shù)布局參數(shù)：設(shè)置表格的寬度、高度、對齊方式和單元格襯局和間距。背景屬性背景屬性：設(shè)置背景色和背景圖像。邊框參數(shù)邊框參數(shù)：設(shè)置邊框的大小和顏色。設(shè)置屬性設(shè)置屬性：若選中“設(shè)為新表格的默認值”，可把上述表格設(shè)置參數(shù)作為表格設(shè)置的默認參數(shù)。圖6-33“表格屬性”對話框第六章第六章 FrontPage 2003 實例6-7 插入表單一、本例要求 掌

25、握在網(wǎng)頁中插入表單的方法。二、操作步驟第六章第六章 FrontPage 2003 運行FrontPage，新建一空白網(wǎng)頁。使用菜單“插入”“表單”，并將光標移動到表單開始處。 根據(jù)案例6-6所示方法和步驟，在表單中插入一個54的表格。并將表格第1行的4個單元格合并為一個單元格，輸入“學生登記表”，第2、3、4行的第3列合并，輸入“簡歷”，第2、3、4行的第4列合并，第5行的第2、3、4列合并，輸入“體育 音樂 美術(shù) 上網(wǎng) 游戲”。分別在2、3、4、5行的第1列輸入“姓名”、“性別”、“專業(yè)”、“愛好”。結(jié)果如圖6-34所示第六章第六章 FrontPage 2003 圖6-34 插入表格第六章第

26、六章 FrontPage 2003 將光標移到第2行第2列，然后單擊菜單“插入”“表單”“單行文本框”。 將光標移到第3行第2列，然后單擊菜單“插入”“表單”“選項按鈕”。然后在單元按鈕右邊輸入文本“男”。在第一個單元按鈕右邊按上述方法再插入一個單選按鈕，并輸入文本“女”。 將光標移到第2行第4列，然后單擊菜單“插入”“表單”“文本區(qū)”。第六章第六章 FrontPage 2003 將光標移到第4行第2列，然后單擊菜單“插入”“表單”“下拉框”。然后選中剛插入的下拉框，右擊鼠標彈出一個快捷菜單，在菜單項中選擇“表單域?qū)傩浴?，彈出如圖6-35所示的“下拉框?qū)傩浴睂υ捒?，單擊“添加”按鈕，彈出如圖6

27、-36所示的“添加選項”對話框，依次添加“計算機應(yīng)用”、“電子商務(wù)”、“機械設(shè)計”和“石油加工與工藝”四個專業(yè)名.稱，可生成如圖6-37所示的下拉式菜單。第六章第六章 FrontPage 2003 圖6-35 “下拉框?qū)傩浴睂υ捒驁D6-37生成的下拉式菜單圖6-36“添加選項”對話框第六章第六章 FrontPage 2003 8.將光標移到第5行第2列文本“體育”前，單擊菜單“插入”“表單”“復選框”。然后依次在“音樂”、“美術(shù)”、“上網(wǎng)”、“游戲”前插入復選框。9.雙擊“重填”按鈕，彈出如圖6-38所示的“按鈕屬性”對話框，將“值/標簽”改為“重填”。圖6-39“按鈕屬性”對話框第六章第六章

28、 FrontPage 2003 保存文件名為“example6-7htm”，標題為“”，預覽網(wǎng)頁,結(jié)果如圖6-40 所示。圖6-40案例6-7效果圖第六章第六章 FrontPage 2003 三、本案例知識點三、本案例知識點在FrontPage中可插入表單元素有文本框、文本區(qū)、復選框、選項按鈕、分組框、下拉框、高級按鈕、圖片和標簽等。當插入某一個表單元素時便生成一個表單域。在網(wǎng)頁中為表單元素設(shè)置標g)簽的步驟如下： (1)在網(wǎng)頁中加入一表單域 (2)在表單中輸入要作為標簽的文本。 (3)在文本后插入表單元素。將作為的文本和表單元素選中，單擊菜單“插入”“表單”“標簽”。第六章第六章 FrontPage 2003 實例6-8 創(chuàng)建站點一、本例要求 掌握Fr