項(xiàng)目4-網(wǎng)頁處理-課件

《計(jì)算機(jī)應(yīng)用基礎(chǔ)》

項(xiàng)目4網(wǎng)頁處理

7/22/20231南京化工職業(yè)技術(shù)學(xué)院信息系回顧及作業(yè)點(diǎn)評

上次任務(wù)是利用所掌握的數(shù)據(jù)處理知識，制作學(xué)生會考成績匯總表點(diǎn)評學(xué)生提交的作業(yè)7/22/20232南京化工職業(yè)技術(shù)學(xué)院信息系任務(wù)的引入大家平時見到網(wǎng)上豐富多彩的網(wǎng)頁是否心動過，我可以做嗎？本項(xiàng)目就可以完成大家的心愿。7/22/20233南京化工職業(yè)技術(shù)學(xué)院信息系本單元任務(wù)引導(dǎo)訓(xùn)練——創(chuàng)建個人網(wǎng)站任務(wù)1：創(chuàng)建個人網(wǎng)站站點(diǎn)任務(wù)2：創(chuàng)建個人網(wǎng)站頁面回顧訓(xùn)練——班級網(wǎng)站的制作拓展訓(xùn)練——大學(xué)生生活網(wǎng)站的制作實(shí)訓(xùn)練習(xí)——公司網(wǎng)站的制作7/22/20234南京化工職業(yè)技術(shù)學(xué)院信息系能力目標(biāo)

通過MicrosoftFrontPage2019的學(xué)習(xí)，能夠根據(jù)需求進(jìn)行個人站點(diǎn)和個人網(wǎng)頁網(wǎng)頁的設(shè)計(jì)、制作、發(fā)布及管理。7/22/20235南京化工職業(yè)技術(shù)學(xué)院信息系知識目標(biāo)

1、掌握MicrosoftFrontPage2019基本操作；2、掌握FrontPage2019中表格操作、文本編輯、圖像操作；3、掌握文本、圖像、熱點(diǎn)超鏈接，書簽超鏈接；4、掌握框架網(wǎng)頁的操作；5、掌握表單及設(shè)置表單屬性。7/22/20236南京化工職業(yè)技術(shù)學(xué)院信息系

MicrosoftFrontPage2019是微軟公司推出的一款網(wǎng)頁設(shè)計(jì)、制作、發(fā)布、管理的軟件。由于其集成了編輯、代碼、預(yù)覽和所見即所得特性，既具備良好的表格控制能力，又能與MicrosoftOffice各軟件實(shí)現(xiàn)無縫連接，被認(rèn)為是網(wǎng)頁初學(xué)者的優(yōu)秀應(yīng)用工具之一。7/22/20237南京化工職業(yè)技術(shù)學(xué)院信息系引導(dǎo)訓(xùn)練4.1—創(chuàng)建個人網(wǎng)站站點(diǎn)7/22/20238南京化工職業(yè)技術(shù)學(xué)院信息系任務(wù)描述

個人網(wǎng)站是展示自己的一個很好的平臺，內(nèi)容包括個人基本情況、求學(xué)經(jīng)歷、工作實(shí)踐經(jīng)歷、所獲獎勵、簡介等。本任務(wù)主要利用FrontPage2019實(shí)現(xiàn)個人網(wǎng)站的建立與頁面內(nèi)容的編輯管理。本任務(wù)通過對個人網(wǎng)站站點(diǎn)的建立、首頁內(nèi)容的編輯，了解FrontPage2019的啟動與退出，熟悉FrontPage2019的操作界面，掌握新建站點(diǎn)、表格操作、文本編輯、圖像操作等。7/22/20239南京化工職業(yè)技術(shù)學(xué)院信息系技術(shù)要點(diǎn)1、FrontPage2019的操作；2、FrontPage2019站點(diǎn)的建立；3、文字與圖像的編輯處理4、組件的使用5、框架網(wǎng)頁6、頁面保存7/22/202310南京化工職業(yè)技術(shù)學(xué)院信息系分別按以下兩種方法啟動FrontPage

1）從“開始”菜單啟動。單擊“開始|程序|MicrosoftOffice/FrontPage2019”命令。

2）利用桌面快捷圖標(biāo)啟動。在桌面上創(chuàng)建FrontPage2019快捷圖標(biāo)，雙擊此快捷圖標(biāo)即可。操作演示1、啟動FrontPage

7/22/202311南京化工職業(yè)技術(shù)學(xué)院信息系

打開FrontPage時選右側(cè)欄的“新建網(wǎng)站”。也可在“常用”工具欄中“新建普通網(wǎng)頁”按鈕的下拉菜單中選擇“站點(diǎn)”。如圖4-1所示：2、新建站點(diǎn)

操作演示7/22/202312南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-1新建一個網(wǎng)頁的網(wǎng)站操作演示2、新建站點(diǎn)7/22/202313南京化工職業(yè)技術(shù)學(xué)院信息系示例：在D盤新建“個人網(wǎng)站”站點(diǎn)。1）打開D盤，新建“個人網(wǎng)站”文件夾。2）回到FrontPage2019的操作界面，單擊“文件|新建”菜單命令，在窗口的右方彈出“新建”任務(wù)窗格。3）在“新建”任務(wù)窗格中的“新建網(wǎng)站”選項(xiàng)內(nèi)選擇“由一個網(wǎng)頁組成的網(wǎng)站”，彈出“網(wǎng)站模板”對話框，如圖4-2所示。

操作演示2、新建站點(diǎn)7/22/202314南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-2網(wǎng)站模板

2、新建站點(diǎn)操作演示7/22/202315南京化工職業(yè)技術(shù)學(xué)院信息系4）在“常規(guī)”選項(xiàng)卡中選項(xiàng)“只有一個網(wǎng)頁的網(wǎng)站”，在“指定新網(wǎng)站的位置”文本框中輸入網(wǎng)站的地址：“D:\個人網(wǎng)站\web”。5）單擊“確定”按鈕，新建站點(diǎn)如圖4-3所示。

2、新建站點(diǎn)操作演示7/22/202316南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-3新建站點(diǎn)

2、新建站點(diǎn)操作演示7/22/202317南京化工職業(yè)技術(shù)學(xué)院信息系在新建站點(diǎn)文件夾列表中，有系統(tǒng)自動建立的“_private”和“images”兩個文件夾?！癷mages”文件夾中可以存放用戶編輯站點(diǎn)時用到的圖片“_private”文件夾對于瀏覽者來說是隱藏的，用戶可以把一些不想讓瀏覽者看到的網(wǎng)頁文件放在這個文件夾里。另外，“index.htm”是用戶在新建只包含一個網(wǎng)頁的站點(diǎn)時，frontPage2019自動為用戶創(chuàng)建的站點(diǎn)主頁。7/22/202318南京化工職業(yè)技術(shù)學(xué)院信息系打開網(wǎng)頁的方法：1）單擊“文件|打開”菜單命令，彈出“打開文件”對話框，index.htm,單擊“打開”按鈕。2）文件夾視圖下，雙擊index.htm3）文件夾視圖下，右擊index.htm，在快捷菜單中選擇“打開”命令。3、打開網(wǎng)頁

操作演示7/22/202319南京化工職業(yè)技術(shù)學(xué)院信息系1）網(wǎng)頁標(biāo)題的設(shè)置FrontPage中，網(wǎng)頁標(biāo)題不同于頁面的標(biāo)題，網(wǎng)頁標(biāo)題不在頁面內(nèi)顯示，在標(biāo)題欄顯示。設(shè)置網(wǎng)頁標(biāo)題是在網(wǎng)頁屬性中，如圖4-4所示，其中“個人介紹”就是網(wǎng)頁的標(biāo)題。4、頁面編輯和處理

操作演示7/22/202320南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-4網(wǎng)頁屬性

操作演示7/22/202321南京化工職業(yè)技術(shù)學(xué)院信息系2）表格操作示例：在主頁面插入一個五行一列的表格，具體要求：（1）插入表格（2）設(shè)置表格屬性（3）設(shè)置單元格屬性（4）嵌套一個1行2列的表格（5）嵌套一個2行9列的表格（6）合并單元格（7）單元格背景設(shè)置

操作演示4、頁面編輯和處理

7/22/202322南京化工職業(yè)技術(shù)學(xué)院信息系（1）插入表格

插入表格有3種方法可供選擇：單擊“常用”工具欄中的“插入表格”按鈕，在打開的表格示意框中拖動鼠標(biāo)選擇5行1列的表格。單擊“表格|插入|表格”菜單命令，彈出“插入表格”的對話框，在“大小”選區(qū)中選5行1列單擊“表格|繪制表格”菜單命令，打開“表格”工具欄；單擊“繪制表格”的按鈕，當(dāng)光標(biāo)變?yōu)楣P的形狀時，繪制5行1列的表格。操作演示7/22/202323南京化工職業(yè)技術(shù)學(xué)院信息系（2）設(shè)置表格屬性

要求：指定寬度為100%，邊框粗細(xì)為0，其他項(xiàng)為默認(rèn)值。方法如下：光標(biāo)定位在表格中任意位置；單擊鼠標(biāo)右鍵，在快捷菜單中選擇“表格屬性”命令，彈出“表格屬性”的對話框；指定寬度選擇“百分比”，文本框內(nèi)輸入100；邊框粗細(xì)選擇為0；單擊“確定”按鈕即可。操作演示7/22/202324南京化工職業(yè)技術(shù)學(xué)院信息系（3）設(shè)置單元格屬性

要求：第二行單元格背景設(shè)置為“紫紅色”；第三行單元格背景設(shè)置為“銀白色”。方法如下：選中第二行單元格；單擊鼠標(biāo)右鍵，在快捷菜單中選擇“單元格屬性”命令，在“背景”“顏色”選框內(nèi)選擇“紫紅色”；同樣方法設(shè)置第三行單元格背景。操作演示7/22/202325南京化工職業(yè)技術(shù)學(xué)院信息系（4）嵌套一個1行2列的表格

要求：在第一行嵌套一個1行2列的表格，表格屬性設(shè)置為：指定寬度60%，指定高度100%，邊框粗細(xì)為0。方法如下：光標(biāo)定位第1行；單擊“表格|插入|表格”菜單命令，彈出“插入表格”對話框；在“大小”選區(qū)中選擇1行2列；指定寬度選擇“百分比”，文本框內(nèi)輸入60；指定高度選擇“百分比”，文本框內(nèi)輸入100；邊框粗細(xì)選擇0；單擊“確定”按鈕即可。操作演示7/22/202326南京化工職業(yè)技術(shù)學(xué)院信息系（5）嵌套一個2行9列的表格

要求①：在第4行嵌套一個2行9列的表格，設(shè)置表格屬性為：指定寬度100%，指定高度100%，邊框粗細(xì)為0。（方法參照第（4）步）

要求②：合并單元格：分別合并2行9列表格中的2、4、6、8列的單元格。操作如下：選中2行9列表格中的第2列單元格，選擇以下三種方法之一進(jìn)行操作：單擊右鍵，在快捷菜單中選擇“合并單元格”命令。選擇“表格|合并單元格”菜單命令。單擊“表格”工具欄中的“合并單元格”按鈕。操作演示7/22/202327南京化工職業(yè)技術(shù)學(xué)院信息系對齊方式：在系統(tǒng)默認(rèn)的情況下，表格在網(wǎng)頁上是左對齊的，通過設(shè)置“對齊方式”改變這種對齊方式。浮動：在默認(rèn)情況下表格周圍是不能排列文字的，為了讓文本與表格融為一體，可以使用表格的浮動對齊。7/22/202328南京化工職業(yè)技術(shù)學(xué)院信息系3）設(shè)置單元格屬性表格的單元格可以放置文字、圖片、以及表格（表格嵌套）等內(nèi)容。通過設(shè)置單元格的格式，可以使表格中的某些單元格的對齊方式、邊框、背景色等屬性與表格中的其他單元格屬性不同。選中需要編輯的表格，選擇“表格”菜單中的“單元格”命令，出現(xiàn)“單元格屬性”對話框，如圖4-5所示。根據(jù)需要進(jìn)行相應(yīng)的修改即可。

4、頁面編輯和處理

操作演示7/22/202329南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-5設(shè)置單元格屬性操作演示4、頁面編輯和處理

7/22/202330南京化工職業(yè)技術(shù)學(xué)院信息系表格中文本的對齊方式一般通過設(shè)置“單元格屬性”中的對齊方式來實(shí)現(xiàn)。鼠標(biāo)定位在需要設(shè)置文本格式的單元格中，單擊鼠標(biāo)右鍵，在快捷菜單中選擇“單元格屬性”，在對話框“布局”一欄中，選擇合適的“水平對齊方式”與“垂直對齊方式”段落分段按“Enter”鍵，換行而不另起段落則需插入換行符，或按“Shift+Enter”組合鍵實(shí)現(xiàn)。7/22/202331南京化工職業(yè)技術(shù)學(xué)院信息系4）文本編輯輸入文本內(nèi)容，設(shè)置文本格式。在相應(yīng)的單元格中輸入文本內(nèi)容，并按文本框中的要求對文本進(jìn)行字體和段落格式設(shè)置。在FrontPage中，文本編輯的操作方法與Word基本相同。如圖4-6所示：

4、頁面編輯和處理

操作演示7/22/202332南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-6主頁表格

操作演示7/22/202333南京化工職業(yè)技術(shù)學(xué)院信息系5）水平線的設(shè)置。①插入：單擊“插入|水平線”菜單命令，在兩行文本之間出現(xiàn)一條系統(tǒng)默認(rèn)的水平線；②屬性設(shè)置：選中水平線，單擊鼠標(biāo)右鍵，在快捷才當(dāng)中選擇“水平線屬性”命令；或者雙擊水平線，彈出“水平線屬性”對話框。如圖4-7所示。

操作演示4、頁面編輯和處理

7/22/202334南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-7“水平線屬性”對話框

操作演示7/22/202335南京化工職業(yè)技術(shù)學(xué)院信息系5）網(wǎng)頁的超鏈接超鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間或者站點(diǎn)與站點(diǎn)之間的鏈接關(guān)系。鏈接的目標(biāo)可以是頁面、圖像、電子郵件地址和音頻文件等。“插入超鏈接”對話框，如圖4-8所示：

操作演示4、頁面編輯和處理

7/22/202336南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-8創(chuàng)建文本超鏈接操作演示7/22/202337南京化工職業(yè)技術(shù)學(xué)院信息系

當(dāng)瀏覽者訪問一個網(wǎng)頁的時候，會面對三種不同的超鏈接：第一種是未訪問的鏈接；第二種是當(dāng)前正在的鏈接；第三種是已經(jīng)訪問過的鏈接?？梢栽诰W(wǎng)頁屬性中為這三種不同的超鏈接文字設(shè)置不同的顏色。相關(guān)操作如圖4-9所示。7/22/202338南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-9設(shè)置超鏈接的顏色

操作演示7/22/202339南京化工職業(yè)技術(shù)學(xué)院信息系1）使用字幕在菜單【插入】中選擇【web組件】命令，在彈出的窗口中單擊“動態(tài)效果”—“字幕”選項(xiàng)，字幕屬性如圖4-11所示。

5、動態(tài)效果的使用

操作演示7/22/202340南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-11創(chuàng)建字幕

操作演示7/22/202341南京化工職業(yè)技術(shù)學(xué)院信息系對字幕的文字（字符串）外觀進(jìn)行設(shè)置和對普通文字（字符串）的設(shè)置是一樣的。只不過字幕文字（字符串）是一個整體罷了。

7/22/202342南京化工職業(yè)技術(shù)學(xué)院信息系2）站點(diǎn)計(jì)數(shù)器在菜單【插入】中選擇【web組件】命令，在彈出的窗口中單擊計(jì)數(shù)器”選項(xiàng)，字幕屬性如圖4-13所示。

5、動態(tài)效果的使用

操作演示7/22/202343南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-13插入計(jì)數(shù)器

操作演示7/22/202344南京化工職業(yè)技術(shù)學(xué)院信息系只有將站點(diǎn)內(nèi)容發(fā)布到Web服務(wù)器，并設(shè)置了網(wǎng)站的FrontPage服務(wù)器擴(kuò)展后，計(jì)數(shù)器才能正常顯示。7/22/202345南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-15組件效果

操作演示7/22/202346南京化工職業(yè)技術(shù)學(xué)院信息系3）網(wǎng)頁過渡效果在菜單【格式】中選擇【網(wǎng)頁過渡】命令，根據(jù)需要選擇合適的過渡效果，如圖4-16所示。

5、動態(tài)效果的使用

操作演示7/22/202347南京化工職業(yè)技術(shù)學(xué)院信息系

圖4-16網(wǎng)頁過渡

操作演示7/22/202348南京化工職業(yè)技術(shù)學(xué)院信息系3）網(wǎng)頁過渡效果示例：以設(shè)置觸發(fā)效果的事件為例，進(jìn)入和退出站點(diǎn)事件分別在瀏覽者通過設(shè)置效果的網(wǎng)頁進(jìn)入和退出用戶站點(diǎn)時發(fā)生。操作如下：在圖4-16中選擇“進(jìn)入網(wǎng)頁”事件，選擇“盒狀收縮”效果，再選擇“離開網(wǎng)頁”事件，選擇“原型放射”效果，單擊“確定”按鈕。選擇【文件】菜單中的選擇【在瀏覽器中預(yù)覽】命令，單擊“確定”按鈕，即可看到設(shè)置效果。5、動態(tài)效果的使用

操作演示7/22/202349南京化工職業(yè)技術(shù)學(xué)院信息系1）框架保存在菜單【文件】中選擇【另存為】按鈕，在對話框中整個框架示意圖的邊框?yàn)樗{(lán)色。2）關(guān)閉網(wǎng)頁單擊網(wǎng)頁窗口右上角的“關(guān)閉”按鈕，即可關(guān)閉網(wǎng)頁。3）退出單擊應(yīng)用程序窗口右上角的“關(guān)閉”按鈕，即可退出。

6、保存、關(guān)閉與退出

操作演示7/22/202350南京化工職業(yè)技術(shù)學(xué)院信息系1）打開FrontPage。單擊“開始”—“程序”—“MicrosoftOffice”—“MicrosoftOfficeFrontPage2019”2）認(rèn)識FrontPage窗口。如圖4-20所示：1、FrontPage2019啟動與界面

知識拓展7/22/202351南京化工職業(yè)技術(shù)學(xué)院信息系標(biāo)題欄菜單欄常用工具欄格式工具欄狀態(tài)欄視圖欄編輯窗口圖4-20FrontPage窗口7/22/202352南京化工職業(yè)技術(shù)學(xué)院信息系2）站點(diǎn)的打開、關(guān)閉與刪除①打開站點(diǎn)單擊“文件|打開網(wǎng)站”菜單命令，在彈出的“打開網(wǎng)站”對話框中選擇要打開的網(wǎng)站，單擊“打開”按鈕即可打開站點(diǎn)。單擊“常用”工具欄上的打開按鈕“”，在彈出的“打開”對話框中選擇要打開的網(wǎng)站，單擊“打開”按鈕即可打開站點(diǎn)。

知識拓展7/22/202353南京化工職業(yè)技術(shù)學(xué)院信息系2）站點(diǎn)的打開、關(guān)閉與刪除②關(guān)閉站點(diǎn)。單擊“文件|關(guān)閉網(wǎng)站”菜單命令即可關(guān)閉當(dāng)前站點(diǎn)。③刪除站點(diǎn)在“文件夾列表”中選中要刪除的站點(diǎn)，單擊“編輯|刪除”菜單，在彈出的“確認(rèn)刪除”對話框中按需要選擇，單擊“確定”按鈕即可。在“文件夾列表”中選中要刪除的站點(diǎn)，單擊鼠標(biāo)右鍵，選擇快捷菜單中的“刪除”命令，在彈出的“確認(rèn)刪除”對話框中按需要選擇，單擊“確定”按鈕即可。

知識拓展7/22/202354南京化工職業(yè)技術(shù)學(xué)院信息系3）認(rèn)識FrontPage的視圖方式①編輯模式切換按鈕FrontPage2019具備“設(shè)計(jì)”、“拆分”、“代碼”、“預(yù)覽”四種編輯模式，如圖4-21所示。②FrontPage2019的視圖

FrontPage共有7種視圖:網(wǎng)頁視圖，文件夾視圖，遠(yuǎn)程網(wǎng)站視圖，報(bào)表視圖，導(dǎo)航視圖，超鏈接視圖，任務(wù)視圖，如圖4-22所示。

知識拓展7/22/202355南京化工職業(yè)技術(shù)學(xué)院信息系圖4-21四種模式編輯模式7/22/202356南京化工職業(yè)技術(shù)學(xué)院信息系圖4-22七種視圖視圖模式7/22/202357南京化工職業(yè)技術(shù)學(xué)院信息系網(wǎng)頁視圖：人們最常用的視圖，在這里進(jìn)行網(wǎng)頁編輯文件夾視圖：對站點(diǎn)中的文件夾進(jìn)行各種操作遠(yuǎn)程網(wǎng)站視圖：幫助用戶將整個網(wǎng)站和單獨(dú)的文件、文件夾發(fā)布到任何位置。報(bào)表視圖：通過“報(bào)表”視圖，可以在運(yùn)行報(bào)表查詢后分析網(wǎng)站內(nèi)容

知識拓展7/22/202358南京化工職業(yè)技術(shù)學(xué)院信息系導(dǎo)航視圖：該視圖提供了網(wǎng)頁的分層視圖，通過此視圖，可以調(diào)整網(wǎng)頁在網(wǎng)站中的位置超鏈接視圖：“超鏈接”視圖可以將網(wǎng)站中超鏈接的狀態(tài)顯示在一個列表中任務(wù)視圖：“任務(wù)”視圖用以站內(nèi)制作工作的進(jìn)展?fàn)顩r的備忘

知識拓展7/22/202359南京化工職業(yè)技術(shù)學(xué)院信息系4）在網(wǎng)站中添加和刪除網(wǎng)頁①添加網(wǎng)頁選擇“文件”“打開站點(diǎn)”，打開已有的網(wǎng)頁文件夾。選擇“文件”“新建”

命令，出現(xiàn)“新建網(wǎng)頁”對話框，選中“其他網(wǎng)頁模式”，如圖4-23所示。

知識拓展7/22/202360南京化工職業(yè)技術(shù)學(xué)院信息系圖4-23新建網(wǎng)頁7/22/202361南京化工職業(yè)技術(shù)學(xué)院信息系②刪除網(wǎng)頁打開已有站點(diǎn)的網(wǎng)頁文件夾。單擊視圖工具欄的“文件夾視圖”按鈕，顯示文件夾列表，選中要刪除的網(wǎng)頁，按需要刪除相應(yīng)網(wǎng)頁。

知識拓展7/22/202362南京化工職業(yè)技術(shù)學(xué)院信息系5）文本格式的設(shè)置6）段落格式的設(shè)置7）項(xiàng)目符號和編號列表的設(shè)置8）表格的操作以上操作方法均與Word相同的。

知識拓展7/22/202363南京化工職業(yè)技術(shù)學(xué)院信息系9）插入與編輯圖像、對象網(wǎng)頁制作時常用GIF和JPEG這兩種圖像格式的文件。GIF格式的圖像顯示的顏色數(shù)目較少，僅支持256色，具有較高的下載速度且具有動態(tài)的效果。JPEG格式主要用于顯示需要有逼真圖形效果的圖像。

知識拓展7/22/202364南京化工職業(yè)技術(shù)學(xué)院信息系①網(wǎng)頁圖像背景的設(shè)置“格式”“背景”，打開“網(wǎng)頁屬性”對話框，在“格式”項(xiàng)目中選中“背景圖片”，為網(wǎng)頁選擇一幅圖片作為背景。

知識拓展7/22/202365南京化工職業(yè)技術(shù)學(xué)院信息系②插入圖片對象插入的圖片對象可以是圖片文件和剪貼畫。插入圖片后，可以對圖片屬性進(jìn)行設(shè)置。方法：選中插入的圖片，選擇“格式”菜單中的“屬性”命令，根據(jù)出現(xiàn)的對話框進(jìn)行相應(yīng)的操作。

知識拓展7/22/202366南京化工職業(yè)技術(shù)學(xué)院信息系③插入視頻圖像插入的視頻文件有3種格式：AVI視頻文件；MPEG視頻文件：以.mpg為擴(kuò)展名。QuickTime視頻文件：以.mov為擴(kuò)展名。

知識拓展7/22/202367南京化工職業(yè)技術(shù)學(xué)院信息系④插入音頻文件網(wǎng)頁中常用的音頻文件格式：.WAV、.MIDI、.RMI、.RA和.AU等。

知識拓展7/22/202368南京化工職業(yè)技術(shù)學(xué)院信息系⑤插入特殊對象插入符號

將光標(biāo)移動到插入點(diǎn)，選擇“插入”“符號”菜單，彈出“符號”對話框插入水平線把光標(biāo)移動到插入水平線的位置，選擇“插入”“水平線”菜單。

知識拓展7/22/202369南京化工職業(yè)技術(shù)學(xué)院信息系⑤插入特殊對象插入時間標(biāo)記在頁面末尾輸入：“更新時間”，選擇“插入”“日期與時間”命令，在“日期時間屬性”對話框中選擇“該網(wǎng)頁上次編輯日期”。插入注釋選擇“插入”“注釋”命令。

知識拓展7/22/202370南京化工職業(yè)技術(shù)學(xué)院信息系10）其他常用Web組件懸停按鈕橫幅廣告管理器鏈接欄以上操作均選擇“插入”“Web組建”命令。交互式按鈕選擇“插入”“交互式按鈕”命令。知識拓展7/22/202371南京化工職業(yè)技術(shù)學(xué)院信息系單擊插入的懸停按鈕，拖動它周圍的小黑點(diǎn)我們就改變了它的大小。。設(shè)置橫幅廣告的寬度和高度值因該要與要添加的圖片大小一致。如果設(shè)置值比圖片小，圖片會被截掉一部分；如果設(shè)置值大，圖片周圍會以灰色填充。7/22/202372南京化工職業(yè)技術(shù)學(xué)院信息系11）其他超鏈接①書簽超鏈接

添加書簽：選中要插入書簽的文字，選擇“插入”“書簽”命令，書簽名稱就是選擇的文本名稱。建立到書簽的鏈接知識拓展7/22/202373南京化工職業(yè)技術(shù)學(xué)院信息系11）其他超鏈接②框架網(wǎng)頁超鏈接③圖像超鏈接④電子郵件超鏈接知識拓展7/22/202374南京化工職業(yè)技術(shù)學(xué)院信息系引導(dǎo)訓(xùn)練4.2—制作個人網(wǎng)站頁面7/22/202375南京化工職業(yè)技術(shù)學(xué)院信息系任務(wù)描述

網(wǎng)站的首頁制作出來以后，要創(chuàng)建和編輯各個分頁，且各網(wǎng)頁間要實(shí)現(xiàn)跳轉(zhuǎn)。本任務(wù)通過個人網(wǎng)站中網(wǎng)頁的新建與編輯，學(xué)習(xí)FrontPage2019中新建網(wǎng)頁、表單、超級鏈接和框架網(wǎng)頁的操作。7/22/202376南京化工職業(yè)技術(shù)學(xué)院信息系技術(shù)要點(diǎn)1、新建網(wǎng)頁2、插入表單及設(shè)置表單屬性3、框架網(wǎng)頁的操作4、文本、圖像處理5、熱點(diǎn)超鏈接，書簽超鏈接。7/22/202377南京化工職業(yè)技術(shù)學(xué)院信息系示例：新建一個以“inform.htm”命名的空白網(wǎng)頁有3種創(chuàng)建方式：在文件夾視圖下創(chuàng)建。單擊“常用”工具欄的新建按鈕右邊的下拉列表框，選擇“空白網(wǎng)頁”命令，創(chuàng)建一個空白網(wǎng)頁，重命名為“inform.htm”。單擊“文件|新建”菜單命令，選擇“空白網(wǎng)頁”，創(chuàng)建一個空白網(wǎng)頁，重命名為“inform.htm”。操作演示1、空白網(wǎng)頁的新建及編輯

7/22/202378南京化工職業(yè)技術(shù)學(xué)院信息系示例：編輯“inform.htm”網(wǎng)頁插入表格、文本設(shè)置網(wǎng)頁的背景，網(wǎng)頁背景圖片為back.gif，設(shè)置為水印電子郵件超鏈接，鏈接的電子郵件地址為webmaster126網(wǎng)頁效果：文本格式設(shè)置為“宋體”、“14磅”、“左對齊”、顏色為“Hex={CC,99,00}”

操作演示7/22/202379南京化工職業(yè)技術(shù)學(xué)院信息系

示例：按照上述方法新建introduction.htm、study.htm、aword.htm、practise.htm4個空白網(wǎng)頁。按要求進(jìn)行相應(yīng)的編輯。

操作演示7/22/202380南京化工職業(yè)技術(shù)學(xué)院信息系1）新建框架網(wǎng)頁FrontPage2019提供了10個框架網(wǎng)頁向?qū)?。操作步驟如下：打開【文件】【新建】菜單項(xiàng)，在子菜單中選擇【網(wǎng)頁】菜單項(xiàng)，出現(xiàn)新建對話框。在對話框中單擊【框架網(wǎng)頁】選項(xiàng)卡按需求選擇相應(yīng)的框架網(wǎng)頁。操作演示2、框架網(wǎng)頁的新建、屬性設(shè)置、編輯與保存

7/22/202381南京化工職業(yè)技術(shù)學(xué)院信息系1）新建框架網(wǎng)頁“新建網(wǎng)頁”：在當(dāng)前框架網(wǎng)頁中輸入文字、圖片等內(nèi)容“設(shè)置初始網(wǎng)頁”：為所在的框架超鏈接到指定的網(wǎng)頁上去操作演示

7/22/202382南京化工職業(yè)技術(shù)學(xué)院信息系2）框架網(wǎng)頁的屬性設(shè)置框架有很多屬性，如框架的名稱、寬度、高度、邊距、滾動條、可調(diào)整性、間距等。

設(shè)置框架屬性：選擇要設(shè)置屬性的框架，單擊【框架】菜單，再單擊【框架屬性】菜單項(xiàng)，出現(xiàn)對話框?？梢栽诖藢υ捒蛑行薷目蚣艿膶傩浴？蚣芫W(wǎng)頁的屬性：在【框架屬性】對話框中，單擊【框架網(wǎng)頁】按鈕，會出現(xiàn)“網(wǎng)頁屬性”對話框。

操作演示7/22/202383南京化工職業(yè)技術(shù)學(xué)院信息系3）框架網(wǎng)頁的編輯示例：

“設(shè)置初始網(wǎng)頁”和“新建網(wǎng)頁”的編輯單擊“新建網(wǎng)頁”按鈕，在顯示的空白網(wǎng)頁中進(jìn)行編輯。在“header”框架中，“設(shè)置初始網(wǎng)頁”為“top.htm”網(wǎng)頁；在“main”框架中，“設(shè)置初始網(wǎng)頁”為“inform.htm”網(wǎng)頁。操作演示7/22/202384南京化工職業(yè)技術(shù)學(xué)院信息系4）保存網(wǎng)頁單擊“文件”“另存為”菜單命令；單擊“更改標(biāo)題”按鈕，在彈出的“輸入文字”對話框中輸入網(wǎng)頁標(biāo)題“個人介紹”；在“文件名”框中重命名框架文件為“index.htm”；單擊“保存”按鈕。操作演示7/22/202385南京化工職業(yè)技術(shù)學(xué)院信息系

保存框架網(wǎng)頁時，在“另存為”對話框中，右側(cè)框架網(wǎng)頁的預(yù)覽圖高亮顯示的框架，表示正在保存框架網(wǎng)頁。7/22/202386南京化工職業(yè)技術(shù)學(xué)院信息系1）設(shè)置框架網(wǎng)頁內(nèi)部的超鏈接

要求：當(dāng)鼠標(biāo)左鍵點(diǎn)擊超鏈接對象時，網(wǎng)頁中某一框架中的內(nèi)容也會隨之改變。示例：當(dāng)單擊文本“學(xué)習(xí)經(jīng)歷”時，下方框架中顯示網(wǎng)頁“study.htm”。

操作方法：①選中“學(xué)習(xí)經(jīng)歷”，單擊鼠標(biāo)右鍵，選擇“超鏈接”“插入超鏈接”“原有文件或網(wǎng)頁”“當(dāng)前文件夾”選中“study.htm”；②單擊對話框右側(cè)“目標(biāo)框架”按鈕，“目標(biāo)框架”“當(dāng)前框架”“下方框架”“目標(biāo)設(shè)置”“main”“確定”“確定”。操作演示3、插入超鏈接

7/22/202387南京化工職業(yè)技術(shù)學(xué)院信息系2）創(chuàng)建到電子郵箱的超鏈接

要求：在主頁中或其他網(wǎng)頁中，可以創(chuàng)建與網(wǎng)站電子郵箱的超鏈接。示例：在主頁下框架“與我聯(lián)系”文本能“超鏈接”到aster126”，郵箱地址；操作方法：①選中“與我聯(lián)系”單擊鼠標(biāo)右鍵選擇“超鏈接”“插入超鏈接”“電子郵件地址”文本欄輸入“webmaster126”操作演示7/22/202388南京化工職業(yè)技術(shù)學(xué)院信息系3）圖片超鏈接，鏈接到外部網(wǎng)頁

要求：單擊網(wǎng)頁中某一圖片，能鏈接到外部網(wǎng)頁。示例：單擊introduction.htm網(wǎng)頁內(nèi)的圖片能鏈接到南京化工職業(yè)技術(shù)學(xué)院主頁；操作方法：單擊鼠標(biāo)右鍵選擇“超鏈接”彈出“插入超鏈接”對話框選中左欄中的“原有文件或網(wǎng)頁”地址欄輸入“”操作演示7/22/202389南京化工職業(yè)技術(shù)學(xué)院信息系要求：將制作完的網(wǎng)站發(fā)布到因特網(wǎng)上。操作方法：①單擊“文件|發(fā)布網(wǎng)站”“遠(yuǎn)程網(wǎng)站屬性”對話框；②“遠(yuǎn)程Web服務(wù)器類型”“文件系統(tǒng)”。③在“遠(yuǎn)程網(wǎng)站位置”中輸入一個本地電腦中的文件夾“個人網(wǎng)站\web”網(wǎng)站。④單擊“確定”按鈕，系統(tǒng)提示“用戶是否希望在此位置創(chuàng)建網(wǎng)站”，單擊“是”按鈕。此時，系統(tǒng)自動切換到遠(yuǎn)程網(wǎng)站視圖中，單擊“