教師招考論壇

 找回密碼
 免費注冊

QQ登錄

只需一步,快速開始

無標題文檔 白小姐 影评
每日定期發布教師招牌資訊
總共7212條微博

2019年教師考友說

查看: 7672|回復: 2
打印 上一主題 下一主題

[軟件] FrontPage教程

[復制鏈接]
跳轉到指定樓層
1
發表于 2012-1-19 14:48:26 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式
2017年最新教師招聘考試內部教材
教師招考二維碼
第五章 FrontPage 實驗5.0 FrontPage的啟動與建立站點任務1FrontPage的啟動與關閉
⒈ 啟動FrontPage,查看網頁編輯的三種工作環境;
操作步驟
⑴ 【開始】→【程序】→【Microsoft FrontPage】,出現FrontPage窗口,窗口界面的主要功能見圖5.1。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image002.gif
說明
程序啟動后,自動進入“網頁管理器”工作視圖窗口,并建立名為new_page_1.hrm的網頁文件。
⑵ 分別單擊【普通】、【HTML】、【預覽】三個標簽,查看各窗口。
說明
⑴ 由于當前打開的是一個空白網頁,所以【普通】、【預覽】兩個窗口無內容,在以后的操作中我們會在【普通】窗口中進行網頁的編輯工作,經常會使用【預覽】窗口查看網頁制作的效果。
⑵ 【HTML】窗口中出現的是用HTML語言編寫的網頁的源代碼。可以直接編寫、修改源代碼,同樣可以達到編輯網頁的目的。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image004.gif⒉ 關閉FrontPage,返回WINDOWS。
操作步驟
選【文件】→【退出】;(或:單擊窗口右上方“×”按鈕),返回WINDOWS。
如果當前窗口中的內容在最近的一次保存后已經有所改變,這時會出現“確認”對話框(圖5.2),要求用戶選擇,可以根據自己的目的選相應的按鈕即可。
任務2 建立站點
⒈ 在A盤創建一個名為“FPLX”的站點,站點模板為“只有一個網頁的站點”;
操作步驟
⑴ 【文件】→【新建】→【站點】,出現“新建”對話框;
⑵ 在“站點”頁面中選“只有一個網頁的站點”,在“指定新站點的位置”文本框中輸入“A:\FPLX”,【確定】(圖5.3)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image006.gif
實驗與思考
在FrontPage中,用【打開】或【打開站點】命令觀察A盤根目錄,用“資源管理器”觀察A盤根目錄,在兩種方式下觀察到的剛建立的站點的顯示方式有何不同(圖5.4)?請分析FrontPage中創建站點FPLX與用“資源管理器”建立“FPLX”文件夾的不同。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image008.gif
說明
打開站點文件夾FPLX,在文件夾中包含了兩個文件夾_privata、images。_privata一般用來存放一些私人的文件,這些文件不希望別人使用。Images用來存放圖像文件。站點中還包含2個隱含文件夾,用來存放一些特殊的文件。
⒉ 將FP1文件夾中的全部素材文件導入“FPLX”站點中;
操作步驟
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選A盤、FPLX→【打開】(圖5.5);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image010.gif
⑵ 【文件】→【導入】,出現“導入”對話框,單擊“添加文件”按鈕,出現“將文件添加到文件列表”對話框(圖5.6);
⑶ 選A盤、FP1文件夾中全部文件,單擊【打開】按鈕,返回“導入”對話框。
⑷ 此時,“導入”對話框中出現fp1文件夾中的文件,并且【確定】按鈕不再灰化,單擊【確定】。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image012.gif
⒊ 查看站點結構。
操作步驟
⑴ 單擊視圖窗口中的【文件夾】圖標,在文件夾列表框內逐一查看各文件夾的內容,了解站點的整體結構(圖5.7)。
再回到【網頁】窗口,逐一查看各文件夾內容,體會各窗口的不同之處。
說明
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image014.gif
① 如果在【網頁】查看中沒有出現“文件夾列表”欄,可以在【查看】菜單中單擊【文件夾列表】命令,即可出現“文件夾列表”欄;
② 在站點中包含了自身的文件以及文件夾的管理,使用非常方便。
⑵ 分別單擊【報表】、【導航】、【超連接】、【任務】等圖標,查看各窗口信息。
說明
由于是一個新站點,許多地方都還沒有內容。

實驗5.1 網頁制作1任務1 新建、打開與保存網頁
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image016.gif

打開站點“FP1”,完成以下操作,并按照題目要求保存文件,樣文見圖5.8。
打開站點操作:
【文件】→【打開站點】,在“打開站點”對話框中選FP1文件夾,【打開】。
⒈ 新建一個模板名稱為“帶有兩個邊欄的一欄正文”的網頁。將網頁的標題設置為“我的網頁”并以文件名FP1RW1a.htm保存在“FP1”站點中。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image019.gif


操作步驟
⑴ 【文件】→【新建】→【網頁】,出現“新建”對話框(圖5.9),
⑵ 在【常規】頁面中選擇題目要求的一種網頁模板,【確定】。
⑶ 在“標題”框中輸入“我的網頁”(圖5.10)。
當完成了所有的編輯后,即可存盤保存。
⑷【文件】→【另存為】,出現“另存為”對話框(圖5.11),
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image021.gif
⑸ 設定:保存位置FP1、文件名類型WEB、文件名FP1RW1a后單擊【保存】按鈕保存。
注意:
① 由于是新建的網頁,故選【另存為】,即使選【保存】系統也會自動跳出【另存為】對話框!
② 由于我們在新建網頁前,已經打開站點FP1,所以【另存為】對話框中保存位置自動設為“FP1”站點(文件夾)。
⒉ 打開與保存已建網頁
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image023.gif打開站點“FP1”中名為FP1RW1a.htm的網頁,將網頁標題改為“我的網頁A”。將編輯后的網頁以原文件名保存在“FP1”站點中。
操作步驟
⑴ 當我們需要修改已經建立的網頁,就先要用“打開”命令將文件打開。
方法1:【文件】→【打開】,出現“打開”對話框(見圖5.12),選擇文件后,單擊【打開】按鈕,出現圖5.13(A)界面。
方法2:在“我的電腦”或“資源管理器”中選中該網頁文件,右擊,在快捷菜單中選【編輯】命令,出現圖5.13(A)界面。
注意:
選擇方法2時,選中網頁文件后,千萬不能象打開WORD或EXCEL文件那樣雙擊該文件名(FP1RW1.htm),因為雙擊網頁文件名是運行該網頁,而非編輯!
我們在編輯開始時,已經打開“FP1”站點,而FP1RW1a.htm是保存在FP1站點內的。因此使用方法1時,在“打開文件”對話框的“查找范圍”文本框已經定位在FP1,只需在文件窗口中選擇文件FP1RW1a.htm即可,非常方便!我們推薦使用方法1,而方法2在網頁設計中不推薦使用。
⑵ 編輯:光標定位在標題處,將其改為“我的網頁A”(圖5.13(B)界面)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image025.gif
⑶ 將編輯后的網頁以原文件名存盤保存:【文件】→【保存】。
注意:
【保存】操作并不關閉FrontPage窗口,可以繼續編輯。
實驗與思考
對打開的網頁進行編輯后的保存一般有兩種情況:
① 將編輯后的網頁以原文件名存盤保存(見上面⒉⑶);
② 原文件(FP1RW1a.htm)內容不變,將編輯修改后的網頁以新文件名(例如FP1RW1b.htm)保存,則應選【文件】→【另存為】命令,操作方法同圖5.11。
問題:
①【另存為】后當前編輯窗口中的文件是:FP1RW1a.htm還是FP1RW1b.htm?
② 觀察文件FP1RW1a.htm、FP1RW1b.htm,比較兩文件中的標題的區別并記下結果。此時再將文件FP1RW1b.htm的標題改為“我的網頁B”,并選【另存為】命令,以FP1RW1c.htm保存。再次比較FP1RW1a.htm、FP1RW1b.htm、FP1RW1c.htm中的標題,你可以總結出什么結論?
任務2 文本格式編輯
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image027.gif
打開站點“FP1”,新建一個模板為“普通網頁”的網頁。完成如下操作后以文件名FP1RW2.htm保存在“FP1”站點中,樣文見圖5.14。

打開站點操作:
【文件】→【打開站點】,在“打開站點”對話框中選FP1文件夾,【打開】。
⒈ 輸入標題:計算機的誕生與發展,楷體、6號(24磅)、加粗傾斜、藍色,居中對齊;
操作步驟
⑴ 新建網頁操作:【文件】→【新建】→【網頁】,在“新建”對話框的【常規】頁面中,選擇“普通網頁”模板,【確定】(參見圖5.9)。
⑵ 在網頁中輸入文字:計算機的誕生與發展;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image030.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image033.gif⑶選中文字,【格式】→【字體】,在“字體”對話框的“字體”頁面中,選擇楷體、6號(24磅)、加粗傾斜、藍色后【確定】(圖5.15);
⑷ 光標定位在標題行,選“居中”快捷按鈕(圖5.16)。
實驗與思考
字體、字型、字號以及顏色的設置是否可以通過快捷按鈕一一實現?
  
        
圖3.15 例2的結果
   
   
   
⒉ 復制文檔。另起一行,并將FPTEXT1.TXT文件中的第1~3行的文字復制到空白行的開始處(左對齊),并設置該3行文字為雙倍行間距;
操作步驟
⑴ 打開FPTest1.TXT文件,選中前三行文字,選【編輯】→【復制】(圖5.17);
⑵ 在FrontPage窗口中,將光標移入下一行(圖5.18),選【編輯】→【粘貼】;
由于粘貼后的文字是居中對齊,還需將其左對齊(圖5.19);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image036.gif
⑶ 光標定位在該三行文字中的任意位置,選【格式】→【段落】,出現“段落”對話框,在“行距大小”欄中選“雙倍行距”,【確定】(圖5.20)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image039.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image040.gif實驗與思考
① 粘貼的文字為何會自動居中對齊?
② 請實驗并體會“段落”對話框(圖5.20)中其它各項設置,如:對齊方式,縮進,段落間距等的效果。
⒊ 項目符號和編號:設置第⑵題中的3行文字為帶有“■”的項目符號列表。
操作步驟
⑴ 選中該三行文字,選【格式】→【項目符號和編號】,出現“列表屬性”對話框,選“無格式項目列表”頁面,選帶有“■”的項目符號列表,【確定】(圖5.21)。
問題:
從結果看,只有第一行滿足要求,而其余行沒有變化,這是為什么,你能找出原因嗎?
⑵ 第2行的解決方法見圖5.22,再用同樣的方法設置第3行。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image042.gif
實驗與思考
① 如果你找到了上述問題的原因的話,應該有更標準的設置方法,請試試。
② 如果要將帶有“■”的項目符號列表改為數字編號的列表,你能否在列表屬性中找到相應的設置?
保存網頁

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image044.gif

【文件】→【另存為】,選FP1文件夾,輸入FP1RW2.htm,【保存】。
任務3 插入對象
打開站點“FP1”中文件FP513.htm,進行如下的插入操作后以文件名FP1RW3.htm保存在“FP1”站點中,樣文見圖5.23。
打開站點與網頁操作:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP1文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP513.htm,【打開】。
⒈ 插入水平線:在文字下方插入一條水平線,并設置水平線的屬性為:寬度80%,高度4像素,左對齊,褐色;
操作步驟
⑴ 光標移到下一空行行首,選【插入】→【水平線】,出現水平線;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image047.gif
⑵ 選中水平線,【格式】→【屬性】(或右擊→【屬性】),出現“水平線屬性”對話框,按題目要求設置寬度80%,高度4像素,左對齊,褐色后【確定】(圖5.24)。
注意:
在FrontPage的許多設置中都有:百分比和像素的選項,本題“寬度80%”,即為百分比,如果改為“寬度80像素”,則要選像素,寬度框中仍為80。
實驗與思考
“寬度80%”與“寬度80像素”在效果上有何區別?
⒉ 插入日期和時間:在水平線的下方插入一行該網頁上次自動更新的日期和時間,日期格式為:××××年××月××日,時間格式為:××:××;
操作步驟
⑴ 光標移到水平線的下一行行首,選【插入】→【日期和時間】,出現“日期時間屬性”;
⑵ 按照要求選中“該網頁上次自動更新的日期和時間”,設置日期格式為:××××年××月××日,時間格式為:××:××,【確定】(圖5.25)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image049.gif
⒊ 插入計數器:在“日期和時間”的后面插入站點計數器,選第5行樣式,數字位數為6位,并右對齊;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image051.gif
操作步驟
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image054.gif
⑴ 光標定位在“日期和時間”的后面,選【插入】→【組件】→【站點計數器】,出現“站點計數器屬性”對話框,按題目要求設置第5行樣式,數字位數為6位,【確定】(圖5.26);
⑵ 選中“計數器”,單擊“右對齊”快捷按鈕(圖5.27)。
實驗與思考
當你將“計數器”右對齊時,為何之前插入的“日期和時間”也隨之右對齊?
⒋ 插入字幕:在“日期和時間”行的下方插入字幕:計算機的誕生與發展,方向向右,延遲速度為60,交替表現方式,寬度:60%,高度:30像素,背景顏色為淺藍色;
操作步驟
⑴ 光標移到“計數器”所在行的下一行,選【插入】→【組件】→【字幕】,出現“字幕屬性”對話框;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image056.gif
⑵ 按題目要求輸入文本為“計算機的誕生與發展”,設置方向向右,延遲速度為60,交替表現方式,寬度:60%,高度:30像素,背景顏色為淺藍色,【確定】(圖5.28)。
觀察字幕的效果
單擊FrontPage編輯窗口下方的【預覽】標簽進入預覽窗口(圖5.1),查看字幕的動態效果。再單擊【普通】標簽返回編輯窗口。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image059.gif
⒌ 在字幕的下一行插入名為“詳細內容”的懸停按鈕,按鈕顏色:淺藍色,凹進效果,高度為30,字體為:傾斜、18號、深藍色。(圖5.29)
操作步驟
⑴ 另起一行,選【插入】→【組件】→【懸停按鈕】,出現“懸停按鈕屬性”對話框;
⑵ 按題目要求輸入按鈕文本為“詳細內容”,設置按鈕顏色:淺藍色,凹進效果,高度為30,字體為:傾斜、18號、深藍色,【確定】。
說明:
字體的設置,需要單擊“字體”按鈕,在出現的“字體”對話框中實現(見右圖)。
實驗與思考
如果要將網頁中已有的一段文字(比如“計算機的發展趨勢”)設置為“字幕”,應如何操作?
⒍ 修改字幕的屬性,將重復次數設為3次。
操作步驟
選中字幕,選【格式】→【屬性】,出現“字幕屬性”對話框,按要求設置重復次數設為3次,【確定】(圖5.30)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image062.gif
實驗與思考
⑴水平線、日期和時間、組件(站點計數器、字幕、懸停按鈕)的屬性是否都可以按此方法修改?
⑵一般都喜歡使用“右擊→選相應插件的屬性”,出現對話框,再修改屬性。請對上述5種插件逐一試一試?
保存網頁:【文件】→【另存為】,選FP1文件夾,輸入FP1RW3.htm,【保存】。
作業5.1
⒈ 新建站點并導入文件。在A盤根目錄創建一個名為“FPLX1”的站點,站點模板為“只有一個網頁的站點”。將A盤LX1文件夾中的所有文件導入到“FPLX1”站點中。
⒉ 在站點中新建網頁。打開“FPLX1”站點,在站點中新建一個模板名稱為“普通網頁”的新網頁;
⒊ 保存網頁。將新建網頁以文件名:A.HTM保存在A盤FPLX1站點中;
繼續對該網頁進行編輯,并注意不斷保存更新的結果!
⒋ 插入文字與水平線。
⑴ 分三行輸入文字:第1行:詞二首、第2行:滿江紅、第3行:水調歌頭;
⑵ 另起一行,插入寬80像素、高3像素、紫色的水平線;
⑶ 將名為FPSC1.txt文件中的內容復制到水平線下方;
⒌ 編輯網頁。
⑴ 設置第1行:詞二首,為楷體、5號(18磅)加粗、褐色,居中對齊;第2、3行文字為4號、藍色、左對齊;
⑵ 設置第2、3行文字為帶有i、ii的項目符號列表;
⑶ 設置第2、3行段落間距為2倍行間距;
在水平線下方的“滿江紅”、“【宋】岳飛”、“水調歌頭”3行的行尾插入回車符,設置“滿江紅”、“水調歌頭”段落居中對齊,其余段落左對齊;
⒍ 插入對象。
⑴ 在水平線的上方插入站點計數器,選第2行樣式,數字位數為3位,并右對齊;
⑵ 在“站點計數器”后面插入日期和時間,格式為:該網頁上次自動更新的日期和時間,日期:××/××/××(日/月/年),時間:××:××:××;
⑶ 設置以下兩行文字為字幕:
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image064.gif“——【宋】岳飛”,字幕屬性為:方向向右,延遲速度為40,幻燈片表現方式,背景顏色為淺藍色,字體幼園、加粗14磅、紅色、加淺藍色凹線邊框;
——【宋】蘇軾”,字幕屬性為:方向向左,延遲速度為80,滾動條表現方式,背景顏色為藍綠色,字體隸書、12磅、深藍色,字符間距擴充5磅,藍綠色嵌入式邊框;
⑷ 在文字最后另起一行,插入名為“更多詩詞”的懸停按鈕,按鈕顏色:粉紅色,字型加粗傾斜。
結果參見樣文5.31:

實驗5.2 網頁制作2任務1 網頁屬性設置
打開站點“FP2”中文件FP521.htm,作如下操作,樣文見圖5.32。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image066.gif
打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP2文件夾,【打開】;
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP521.htm,【打開】。
⒈ 設置“進入網頁”的過渡效果為“圓形放射”,周期為2秒;
操作步驟

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image068.gif

⑴ 選【格式】→【網頁過渡】,出現“網頁過渡”對話框;
⑵ 按照題目要求設置事件為“進入網頁”,周期為2秒,過渡效果為“圓形放射”,【確定】。(圖5.33)
⒉ 設置網頁的標題為“計算機簡介”,為網頁設置背景音樂為FP2文件夾中的FPYL01.WAV,播放3次,
操作步驟
⑴ 選【格式】→【背景】,出現“網頁屬性”對話框;
⑵ 選“常規”頁面,按題目要求設置標題為“計算機簡介”,背景音樂為FP2文件夾中的FPYL01.WAV,播放3次,【確定】。(圖5.34)
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image071.gif
⒊ 將FP2文件夾中名為FP001.jpg的圖片作為網頁的背景,以文件名FP2RW1a.htm保存在“FP2”站點中;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image074.gif
操作步驟
⑴ 選【格式】→【背景】,出現“網頁屬性”對話框;
⑵ 選“背景”頁面,單擊【瀏覽】出現“選擇文件”對話框,選擇FP2文件夾中FP001.JPG,單擊“【確定】”返回“網頁屬性”對話框,再次單擊“【確定】”。(圖5.35)
預覽
單擊FrontPage編輯窗口下方的【預覽】標簽,出現預覽窗口(圖5.1),觀察設置的效果。再單擊【普通】標簽返回編輯窗口。
⑶ 保存:選【文件】→【另存為】,以文件名FP2RW1a.htm保存在“FP2”站點中。
⒋ 為網頁應用主題“藍圖”中的“鮮艷的顏色”和“背景圖片”,不應用“動態圖形”和“應用CSS”,并以文件名FP2RW1b.htm保存在FP2站點中。
操作步驟
⑴選【格式】→【主題】,出現“主題”對話框;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image076.gif
⑵選“藍圖”主題,在“鮮艷的顏色”前打“√”,取消“動態圖形”前的“√”,“背景圖片”前的“√”不變,“應用CSS”前本來無“√”仍然不變,【確定】;(圖5.36)
⑶保存:選【文件】→【另存為】,以文件名FP2RW1b.htm保存在“FP2”站點中。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image078.gif當我們以文件名FP2RW1b.htm保存時,會跳出“保存嵌入式文件”對話框(圖5.37),這是由于設置主題時產生了5幅圖片(文件),要求用戶指定其存放位置,一般可以按默認的路徑存放,即直接單擊“【確定】”按鈕即可。
實驗與思考
① 找一找“主題”設置中產生的5個圖片文件存放在何處了?在以后的其他操作中千萬不能將該5個文件搬家或刪除!
② 在FP2RW1b.htm文件中,查看前面第⒉、⒊題中設置的背景音樂與背景圖片是否還存在?請總結一下“主題”設置會影響哪些背景的設置。
任務2 圖片操作及動態HTML效果
打開“FP2”站點中名為FP522.htm的文件,作如下操作后以文件名FP2RW2.htm保存在“FP2”站點中,樣文見圖5.38。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image080.gif


打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP2文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP522.htm,【打開】。
⒈ 在第二段文字開始處插入圖片FP002.jpg;
操作步驟
⑴ 光標定位在第二段文字開始處,選【插入】→【圖片】→【來自文件】,出現“選擇文件”對話框;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image082.gif
⑵ 選FP2文件夾中圖片文件FP002.jpg,【確定】(圖5.39)。
⒉ 設置圖片右對齊,寬度按比例縮小到100像素,水平間距20(像素);
操作步驟
⑴ 選中圖片,【格式】→【屬性】(或右擊→【圖片屬性】),出現“圖片屬性”對話框;
⑵ 選【外觀】頁面,設置圖片右對齊,寬度按比例縮小到100像素,水平間距20(像素),【確定】(圖5.40)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image084.gif
實驗與思考
① 請分別設置并觀察圖片的其他對齊方式,如:左對齊,絕對、相對垂直對齊等;
② 改變FrontPage窗口大小,觀察圖片的變化。如果將圖片大小設置為寬度50%,高度40%,再改變FrontPage窗口大小并觀察圖片的變化,你能得出什么結論?
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image086.gif
③ 設置圖片的垂直間距為30像素,觀察之;
⒊ 為該圖片應用動態HTML效果:當鼠標懸停時圖片交換成FP003.jpg。
操作步驟
⑴ 選中圖片,選【格式】→【動態HTML效果】,出現“DHTML效果”對話框;
⑵ 按照題目要求設置:鼠標懸停、交換圖片、圖片為FP2文件夾中的FP003.jpg,關閉對話框(圖5.41)。
⒋ 給第一段文字(標題)加動態HTML效果:單擊鼠標時文字周圍出現粉紅色雙線邊框;
操作步驟
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image088.gif
光標定位在標題行,選【格式】→【動態HTML效果】,出現“DHTML效果”對話框設置:單擊、格式、選擇邊框操作后關閉對話框(圖5.42)。
保存網頁:
【文件】→【另存為】,選FP2文件夾,輸入FP2RW2.htm,【保存】。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image090.gif任務3 表格操作
打開“FP2”站點中名為FP523.htm的文件,完成以下操作后以文件名FP2RW3.htm保存在FP2站點中,樣文見圖5.43。

打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP2文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP523.htm,【打開】。
⒈ 在表格第2列右側插入一列,刪除編號為“2”的一行(即第3行);
操作步驟
⑴ 選中表格第2列,選【表格】→【插入】→【行或列】,出現“插入行或列”對話框;
⑵ 按要求設置后【確定】(圖5.44)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image092.gif
實驗與思考
① 同樣,可以用右擊方式選插入列(行)命令,它與選擇菜單命令的操作有和區別?
② 插入一列后,表格總寬度是否發生變化,變化的是什么?
⑶ 選中表格中編號為“2”的行,選【表格】→【刪除單元格】(圖5.45)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image094.gif
說明
表格操作中,無“刪除行(列)”操作命令!
⒉ 將表格中“名稱”所在列拆分為兩列,并將編號為“1”、“3”的2個單元格合并;
操作步驟
⑴ 選中“名稱”列,選【表格】→【拆分單元格】,出現“拆分單元格”對話框,按要求設置后【確定】(圖5.46);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image096.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image099.gif
⑵ 選擇編號為“1”、“3”的2個單元格(圖5.47a),右擊→【合并單元格】。
注意
合并后,會在“1”的后面自動插入一個換行符,使得2、3兩行高度發生變化,可以將換行符刪除(圖5.47b),恢復原來行的高度。
⒊ 設置表格第1行單元格的屬性為:文字水平居中,邊框深藍色,背景粉紅色;
操作步驟
⑴ 選中第1行,右擊→【單元格屬性】,出現 “單元格屬性”對話框;

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image101.gif

⑵ 按照題目要求設置屬性為:文字水平居中,邊框深藍色,背景粉紅色,【確定】(圖5.48)。

⒋ 設置表格屬性:表格右對齊,寬度為400象素,邊框粗細4像素,將圖片FP004.gif作為背景圖片;
操作步驟
⑴ 光標定位在表格中任何位置,右擊→【表格屬性】,出現 “表格屬性”對話框;
⑵ 按照題目要求設置(圖5.49)后【確定】。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image103.gif
注意
表格屬性與單元格屬性的區別!
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image106.gif
⒌ 在已有表格的上方插入一個寬度為300像素的2行4列的表格,表格左對齊,單元格間距為6;
操作步驟
⑴ 光標定位在表格的上方,選【表格】→【插入】→【表格】,出現 “插入表格”對話框;
⑵ 設置表格2行4列,左對齊,寬度300像素,單元格間距為6,【確定】(圖5.50)。
保存網頁:
【文件】→【另存為】,選FP2文件夾,輸入FP2RW3.htm,【保存】。
作業5.2
打開站點FPLX2,對B.htm網頁文件作如下編輯后保存(樣文參見圖5.51)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image108.gif
⒈ 表格操作。
⑴ 在表格下方插入3行;
⑵ 表格第2~5行以行為單位,將每一行3個單元格合并為1個單元格。將第1行第3單元格拆分為2列;
⑶ 表格屬性:表格水平居中,邊框粗細為0,單元格間距為1,表格寬度、高度均為100%,藍綠色背景;
⑷ 單元格屬性:第1行4個單元格均水平對齊,寬度25%,背景為淺綠色。第2~4行單元格為白色字體、寬度100%;
⒉ 文本編輯。
⑴ 在表格上方輸入文字“詩詞瀏覽”,楷體、6號(24磅)加粗傾斜、藍色,居中對齊;
⑵ 將文件“詞二首.doc”中的詞“滿江紅”復制到第2行單元格中,詞“水調歌頭”復制到第4行單元格中;
⑶ 段落設置:設置“滿江紅”段居中對齊、“怒發沖冠,……”段左對齊、“【宋】岳飛”段右對齊;以相同的格式設置第4行單元格中文字內容;
⒊ 網頁屬性。
設置網頁背景圖片為image001.jpg,背景音樂為fpyl03.wav;
⒋ 圖片與動態效果。
⑴ 將圖片“返回.gif”分別復制到第3、5行單元格中,右對齊。以正好容納單元格中內容為準調整表格的行高。
⑵ 設置第3、5行單元格中圖片的動態HTML效果為:鼠標懸停時圖片交換為“返回_down.gif”;
設置“詩詞瀏覽”所在行的動態HTML效果為:鼠標單擊時出現淺綠色凸線樣式方框;

實驗5.3 網頁制作3任務1 書簽超連接
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image110.giffile:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image111.gif
打開“FP3”站點中名為FP531.htm的文件,完成如下操作后以文件名FP3RW1.htm保存在“FP3”站點中,樣文見圖5.52。
打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP3文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP531.htm,【打開】。
⒈ 定義書簽:對標題文字“計算機”以及水平線下方的文字“計算機的誕生”、圖片分別建立書簽,書簽名稱依次為“計算機”、“誕生”、“CPU”;
作步驟
⑴ 選中文字“計算機的誕生”,選【插入】→【書簽】,出現“書簽”對話框,由于書簽名與文字內容正好一致,直接【確定】即可(圖5.53);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image113.gif

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image115.gif
⑵ 選中文字“計算機的誕生”,選【插入】→【書簽】,出現“書簽”對話框,修改書簽名為“誕生”后【確定】(圖5.54)。
  
        
圖5.49 設置圖片書簽
   
   
   
⑶ 選中圖片,選【插入】→【書簽】,出現“書簽”對話框,輸入書簽名“CPU”后【確定】(圖5.55)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image117.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image119.gif
⒉ 建立超級鏈接:將文字“計算機誕生”、名為“Pentium芯片”的懸停按鈕以及“箭頭”圖片字依次分別超級鏈接到名為“誕生”、“CPU”、“計算機”的書簽處。
操作步驟
⑴ 選中文字“計算機誕生”,選【插入】→【超連接】,出現“創建超連接”對話框, 設置級鏈接到名為“誕生”的書簽后【確定】(圖5.56);
⑵ 選中名為“Pentium芯片”的懸停按鈕,【右擊】→【懸停按鈕屬性】,在出現的“懸停按鈕屬性”對話框中單擊【瀏覽】按鈕,出現“選擇懸停按鈕超連接”對話框,鏈接到名為“CPU”的書簽后【確定】(圖5.57);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image121.gif
⑶選中圖片,選【插入】→【超連接】,出現“創建超連接”對話框,設置級鏈接到名為“計算機”的書簽后【確定】(圖5.58);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image123.gif
用同樣的方法設置另一個圖片的超連接。
預覽
切換到【預覽】窗口,分別單擊各超連接,體會書簽超鏈接的作用。
實驗與思考
是否可以在“URL”文本框中直接輸入“#書簽名”?比較兩種方法的優缺點。
保存網頁:【文件】→【另存為】,選FP3文件夾,輸入FP3RW1.htm,【保存】。
任務2 超連接
打開“FP3”站點中的文件FP532.htm,完成如下操作后以文件名FP3RW2.htm保存在“FP3”站點中,樣文參見圖5.59。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image125.gif
打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP3文件夾,【打開】。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image127.gif
⑵ 【文件】→【打開】,在“打開文件”對話框中選FP532.htm,【打開】。
⒈ 對文字“WWW鏈接”建立超連接,鏈接到域名為www.sju.js.cn的站點(圖5.60);
操作步驟
⑴ 選中文字“WWW鏈接”,選【插入】→【超連接】,出現“創建超連接”對話框;
⑵ 在“URL”文本框中字母“http://”的后面直接輸入域名www.sju.js.cn,【確定】;
⒉ 對文字file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image128.gif“鏈接Email”建立電子郵件地址為[email protected]的電子郵件超連接(圖5.61);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image130.gif
操作步驟
⑴ 選中文字“鏈接Email”,選【插入】→【超連接】,出現“創建超連接”對話框;
⑵ 單擊“制作發送電子郵件的超連接”按鈕,出現的“創建電子郵件超連接”對話框;
⑶ 在“創建電子郵件超連接”對話框中輸入郵件地址“[email protected]”,【確定】,返回“創建超連接”對話框;
⑷ 這時在“創建超連接”對話框的“URL”文本框中出現已經添加了“mailto:”的電子郵件的地址,【確定】。
說明
可以直接在“URL”文本框中輸入電子郵件地址,但必須在地址前加“mailto:”!正確的輸入地址應是mailto:[email protected]
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image132.gif
⒊ 對文字“鏈接網頁”建立超連接,鏈接到FP2文件夾中的名為FP2RW1a.HTM網頁(圖5.62);
操作步驟
⑴ 選中文字“鏈接網頁”,選【插入】→【超連接】,出現“創建超連接”對話框;
⑵ 單擊“制作一個指向您計算機上文件的超連接”按鈕,出現的“選擇文件”對話框;
⑶ 在“選擇文件”對話框中選擇FP2文件夾中FP2RW1a.htm文件,【確定】。
說明
當第⑶步操作結束時,系統不再回到“創建超連接”對話框,這與鏈接電子郵件超連接不同。
實驗與思考
選中已經建立鏈接的文字“鏈接網頁”,選【插入】→【超連接】或:右擊→【超連接屬性】,在出現的“編輯超連接”對話框中你將會在“URL”文本框中看到“../FP2/FP2RW1a.htm”你能解釋“../FP2”的含義嗎?
⒋ 對標有“鏈接圖片”名字的圖片建立超鏈接,鏈接到文件名為FP005.JPG的圖片(圖5.63)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image134.gif
操作步驟
⑴ 選中標有“鏈接圖片”名字的圖片,選【插入】→【超連接】,出現“創建超連接”對話框;
⑵ 單擊“制作一個指向您計算機上文件的超連接”按鈕,出現的“選擇文件”對話框;
⑶ 在“選擇文件”對話框中選擇FP2文件夾中FP2RW1a.htm文件,【確定】。
說明
在第⑶步操作結束時,系統不再回到“創建超連接”對話框,這與鏈接網頁操作相同。
實驗與思考
選中已經建立鏈接的圖片,選【插入】→【超連接】或:右擊→【超連接屬性】,在出現的“編輯超連接”對話框中你將會在“URL”文本框中看到“FP005.jpg”。你能解釋同樣是鏈接文件,為什么與鏈接網頁操作出現的“../FP2/FP2RW1a.htm”不同?
預覽
切換到【預覽】窗口,分別單擊各超連接,體會各種超鏈接。
保存網頁:【文件】→【另存為】,選FP3文件夾,輸入FP3RW2.htm,【保存】。
小結
⒈ 超連接可以使你當前的網頁跳轉到其它地方。超連接的目的地可以是其它的網站、網頁,也可以是電子郵件地址、一幅圖片、一個WORD文檔、一個EXCEL工作簿,甚至是一個應用程序。目的地也可以某網頁(或本網頁)中某一位置,這時需要使用書簽定位,即書簽式超連接。
⒉ 一般在“創建超連接”對話框中實現各種不同的超連接。通常可以使用對話框中提供的各種按鈕、下拉列表框等進行超連接操作,具體如下:
書簽鏈接:使用書簽下拉列表框;
電子郵件鏈接:使用“制作發送電子郵件的超連接”按鈕;
網頁、圖片等文件形式的鏈接:使用“制作一個指向您計算機上文件的超連接”按鈕;
指向某網站:可以直接輸入網站的域名。
作業5.3
打開站點FPLX2,對B.htm網頁文件作如下編輯后保存。
⒈ 書簽超鏈接。
⑴ 定義第2行單元格中“滿江紅”、第4行單元格中“水調歌頭”為書簽,書簽名即文字本身,表格上方的文字“詩詞瀏覽”以“TOP”為書簽名定義為書簽;
⑵ 將第1行單元格中“滿江紅”、“水調歌頭”分別超連接到定義的書簽,第3、5行圖片分別超連接到名為TOP的書簽;
⒉ 超連接。
⑴ 將第1行單元格中“唐詩二首”超連接到“唐詩二首.htm”;
⑵ 在第1行第4單元格中輸入文字“更多詩詞”,并超連接到:ccf.tsinghua.edu.cn;
⑶ 在表格第5行左側插入名為“聯系我們”的懸停按鈕,按鈕顏色為藍綠色,并超連接到電子信箱:[email protected]

實驗5.4 框架網頁任務1 創建與保存框架網頁
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image136.gif

打開“FP4”站點,完成如下操作后以題目要求的文件名保存在“FP4”站點中,樣文見圖5.64。
打開站點操作:
【文件】→【打開站點】,在“打開站點”對話框中選FP4,【打開】。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image138.gif
⒈ 新建一個模板為“橫幅和目錄框架網頁”的框架網頁(圖5.65);
操作步驟
⑴ 【文件】→【新建】→【網頁】,出現“新建”對話框;
⑵ 在“框架網頁”頁面中選“橫幅和目錄”模板,【確定】,出現一個新的框架網頁。
⒉ 設置每個框架中的內容:
A) 在橫幅框架中輸入文字“計算機信息技術”,隸書、加粗、6號字、粉紅色,并居中對齊;
操作步驟
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image140.gif
⑴ 單擊橫幅中“新建網頁”按鈕,出現空白網頁(圖5.66);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image142.gif
⑵ 在空白網頁中輸入文字“計算機信息技術”,并設置:隸書、加粗、6號、粉紅色以及居中對齊等(圖5.67左圖)。
B) 在左框架中分行鍵入“簡介”、“WORD文檔”、“Excel表格”、“PowerPoint”、“理論自學題目”;
操作步驟
⑴ 單擊左框架中“新建網頁”按鈕,出現空白網頁;
⑵ 在空白網頁中分行輸入文字“簡介”、“WORD文檔”、“Excel表格”、“PowerPoint”、“理論自學題目”等,參見圖5.67左圖。
C) 右框架超連接到FP4文件夾中名為hua.htm的網頁;
操作步驟
⑴ 單擊右框架中“設置初始網頁”按鈕,出現“創建超連接”對話框(圖5.67);
⑵ 在“創建超連接”對話框中選FP4文件夾、簡介.htm文件,【確定】,結果參見圖5.64。
⒊ 保存框架網頁。橫幅命名為top.htm、左框架命名為left.htm、整個網頁框架命名為index.htm,分別保存到FP4文件夾中。
操作步驟
⑴ 選【文件】→【另存為】,出現“另存為”對話框;
⑵ 本框架由“橫幅”、“左”、“右”框架三部分以及“主”框架組成,系統將會給每一個框架建立(鏈接)對應的網頁文件,因此需要保存的網頁文件原則上應該有四個。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image144.gif
首先出現的是主框架的保存界面(圖5.68左圖),選FP4文件夾,在文件名框中輸入index.htm,單擊“保存”按鈕;
接著出現橫幅框架的保存界面(圖5.68右圖),選FP4文件夾,在文件名框中輸入Top.htm,單擊“保存”按鈕;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image146.gif再次出現的是左框架的保存界面(圖5.69),選FP4文件夾,在文件名框中輸入left.htm,單擊“保存”按鈕。
實驗與思考
① 在保存時為什么沒有出現右框架的保存界面?保存一個框架網頁時,哪個網頁是一定要求用戶保存的,而其它網頁的保存遵循何種規則?
② 我們在為每個框架建立網頁時一般有幾種鏈接方式?“設置初始網頁”與“新建網頁”按鈕應如何正確使用?

任務2 框架屬性
打開站點“FP4”中名為index.htm的網頁,完成如下編輯操作后保存在“FP4”站點中,樣文見圖5.70。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image148.gif


打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP4文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選index.htm,【打開】。
⒈ 設置橫幅框架的高度為50像素,邊距的高度6,不顯示滾動條。設置框架間距為10,顯示邊框,見圖5.71;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image150.gif

操作步驟
⑴ 光標定位在橫幅框架內,選【框架】→【框架屬性】,出現“框架屬性”對話框;
⑵ 在“框架屬性”對話框中設置:“框架大小”欄中高度為50像素,“邊距”欄中高度6,“選項”欄的“顯示滾動條”文本框中選“從不”;
⑶ 單擊“框架網頁”按鈕,出現“網頁屬性”對話框;
⑷ 在“網頁屬性”對話框中選“框架”頁面,設置:框架間距為10,選中“顯示邊框”(打勾)。
說明
邊距的高度、寬度是指所選定的網頁內容與所在框架的上邊框、左邊框的距離,是某框架的屬性;在“網頁屬性”中的框架間距是指分割框架的框線的粗細程度,是整個框架的屬性,見圖5.72。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image152.gif
⒉ 將右框架的初始網頁更換為“簡介.htm”,見圖5.73。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image154.gif
操作步驟
⑴ 光標定位在右框架內,選【框架】→【框架屬性】,出現“框架屬性”對話框;
  
        
圖5.70 框架屬性說明
   
   
   
⑵ 在“框架屬性”對話框中,單擊“初始網頁”文本框右側的【瀏覽】按鈕,出現“編輯超連接”對話框;
⑶ 選中“hua.htm”文件,單擊【確定】,返回“框架屬性”對話框,單擊【確定】。
⒊ 拆分框架。將左框架拆分為上下兩個框架,并設定左上框架的高度為190像素,左下框架插入FP4文件夾中圖片FP002.JPG;
操作步驟
⑴ 光標定位在左框架內,選【框架】→【拆分框架】,出現“拆分框架”對話框。在“拆分框架”對話框中選“拆分成行”,【確定】(圖5.74),結果見圖5.75左圖;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image156.gif

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image158.gif


⑵ 單擊左下框架中【新建網頁】按鈕,出現空白網頁。再選【插入】→【圖片】→【來自文件】,出現“圖片”對話框(圖5.75)。在“圖片”對話框中選FP4文件夾中圖片FP002.JPG,【確定】(圖5.76左圖);
⑶ 光標定位在左上框架內,選【框架】→【框架屬性】,出現“框架屬性”對話框,在“框架屬性”對話框中設置“框架大小”中的高度為190像素,【確定】(圖5.76)。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image160.gif
⒋ 保存修改結果,左下框架網頁命名為left1.htm。
操作步驟
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image162.gif
⑴ 【文件】→【保存文件】,
出現“另存為”對話框,這是因為拆分框架后增加了一個左下框架,因此系統要求用戶輸入對應的網頁文件名(圖5.77);
⑵ 選FP4文件夾,在文件名框中輸入LEFT1.HTM,單擊【保存】。
注意
在【保存文件】操作會自動對主框架網頁文件“index.htm”以及其他已經鏈接的網頁進行保存!
任務3 編輯框架中的網頁
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image164.gif打開站點“FP4”中名為index.htm的網頁,完成如下編輯操作后保存在“FP4”站點中,樣文見圖5.78。
打開站點與網頁:
⑴ 【文件】→【打開站點】,在“打開站點”對話框中選FP4文件夾,【打開】。
⑵ 【文件】→【打開】,在“打開文件”對話框中選index.htm,【打開】。
⒈ 設置橫幅框架中的網頁背景音樂為FPYL02.WAV,背景為藍綠色,對文字“計算機信息技術”應用DHTML效果:當網頁加載時應用從左側到右側擦除效果;
操作步驟
⑴ 光標定位在橫幅框架內,右擊→【網頁屬性】。分別在“常規”頁面中設置背景音樂FPYL02.WAV,在“背景”頁面中設置藍綠色背景,【確定】(圖5.79);
⑵ 【格式】→【動態DHTML效果】,出現“DHTML效果”對話框,設置:開啟為“網頁加載”,應用為“擦除”、“從左側到右側”,關閉對話框(圖5.80);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image167.gif
⑶ 保存修改結果。由于橫幅框架鏈接的top.htm網頁文件進行了以上的修改,所以需要保存。具體操作是:在保證橫幅框架被選中(有深藍色粗邊框)的前提下,選【框架】→【保存網頁】(圖5.81)。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image169.gif


⒉ 對左(上、下)框架建立超連接的操作分別如下:
⑴“簡介”超連接到網頁“簡介.htm”,目標框架為“網頁默認值(main)”;
⑵“WORD文檔”超連接到文件名為“機器語言.doc”的WORD文檔,目標框架為“新建窗口”;
⑶“EXCLEL表格”超連接到文件名為“房產信息.xls”的電子表格,目標框架為“contents1”(左下框架);
⑷“理論自學題目”超連接到名為yl.exe的可執行文件,目標框架為“網頁默認值(main)”;
⑸ “POWERPOINT”超連接到文件名為“CPU外觀.htm”的網頁形式演示文稿(由“CPU外觀.PPT”文件生成),目標框架為“新建窗口”。
操作步驟
⑴ 選中文字“簡介”,選【插入】→【超連接】,出現“創建超連接”對話框,在對話框中選“簡介.htm”,由于“目標框架”中已是“網頁默認值(main)”不必改變,單擊【確定】即可(圖5.82);
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image172.gif
⑵ 選中文字“WORD文檔”,選【插入】→【超連接】,出現“創建超連接”對話框,在對話框中選“機器語言.doc”(圖5.82),單擊“目標框架”右側的【更改目標框架】按鈕,出現“目標框架”對話框,選“公用的目標區”中“新建窗口”(圖5.83(B)),單擊【確定】返回“創建超連接”對話框,再單擊“創建超連接”對話框的【確定】按鈕;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image174.gif
⑶ 選中文字“EXCLEL表格”,選【插入】→【超連接】,出現“創建超連接”對話框,在對話框中選“房產信息.xls”(圖5.82),單擊“目標框架”右側的【更改目標框架】按鈕,出現“目標框架”對話框,單擊“當前框架網頁”中的左下框架(圖5.83(A)),單擊【確定】返回“創建超連接”對話框,再單擊“創建超連接”對話框的【確定】按鈕;

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image176.gif


⑷ 選中文字“理論自學題目”,選【插入】→【超連接】,出現“創建超連接”對話框,在對話框中選“yl.exe”,由于“目標框架”中已是“網頁默認值(main)”不必改變,單擊【確定】即可(圖5.84);
⑸ 啟動PowerPoint,打開“CPU外觀.PPT”文件,【文件】→【另存為web頁】,在“文件名”框中系統會自動生成文件名相同、但擴展名為.htm的文件名“CPU外觀.htm”,可以直接單擊【保存】(圖5.84),關閉PowerPoint;
回到FrontPage界面,選中文字“POWERPOINT”,選【插入】→【超連接】,出現“創建超連接”對話框;
單擊【更改目標框架】按鈕,在“目標框架”中選“新建窗口”,【確定】,返回“創建超連接”對話框(圖5.83(B));
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image178.gif
在對話框中單擊URL框右側【制作一個指向您計算機上文件的超連接】按鈕,出現“選擇文件”對話框,選FP4文件夾、文件CPU外觀.htm,【確定】(圖5.85)。

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image180.gif


實驗與思考
假如先選擇文件CPU外觀.htm,再設置目標框架為“新建窗口”,一次可以完成操作嗎?是何原因造成,應如何操作。
保存左上框架的修改結果。由于左上框架鏈接的left.htm網頁文件進行了以上的修改(超連接),所以需要保存。具體操作是:在保證左上框架被選中(有深藍色粗邊框)的前提下,選【框架】→【保存網頁】(圖5.86A)。
⑹ 選中左下框架中的圖片,選【插入】→【超連接】,出現“創建超連接”對話框,在對話框中選“hua.htm”,單擊“目標框架”右側的【更改目標框架】按鈕,出現“目標框架”對話框,單擊“當前框架網頁”中右框架,單擊【確定】返回“創建超連接”對話框,再單擊“創建超連接”對話框的【確定】按鈕(圖5.87);

file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image182.gif


保存左下框架的修改結果:
由于左下框架鏈接的left1.htm網頁文件進行了圖片超連接,所以需要保存。具體操作是:在保證左下框架被選中(有深藍色粗邊框)的前提下,選【框架】→【保存網頁】(圖5.86B)。
⒊ 將修改后的各網頁均以原文件名保存。
操作步驟
分析以上操作,改變了TOP.HTM、LEFT.HTM、LEFT1.HTM三個網頁,因此需要再次保存。事實上,如果是嚴格按照上面介紹的步驟操作的,那么已經分別保存了,但涉及主框架文件index.htm修改沒有保存。選【文件】→【保存文件】,將index.htm以及鏈接的各網頁文件保存。
作業5.4
打開站點FPLX4,對INDEX.htm文件作如下編輯后保存(樣文參見圖5.88)。
⒈ 框架操作。
⑴ 上框架:框架高度80像素,從不顯示滾動條;
⑵ 左框架:框架寬度120像素,不可在瀏覽器中調整大小、在需要時顯示滾動條;
⑶ 右框架:拆分為上下2個框架,設置右上框架高度300像素,右下框架高度為相對30、從不顯示滾動條,保存右下框架網頁文件名為“d.htm”
⑷ 整個框架的間距設為0;
⒉ 各框架網頁設置。
⑴ 上框架:
① 將“知識花絮”設置為字幕,方向向右,延遲速度為150,交替表現方式,字體隸書、加粗14磅、綠色;
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image184.gif② 將BJS.JPG作為背景圖片
③ 超連接:
“五筆字型鍵位”超連接到文件“五筆鍵位.xls”、目標框架為“bootom1”(右上框架);
“電子商務”超連接到“電子商務.htm”(由“電子商務.ppt”演示文稿文件生成)、目標框架為“bootom1”;
“媒體的定義”超連接到“媒體.htm”、目標框架為“bootom1”;
⑵ 左框架:
① 在圖片下方插入日期和時間,格式為:該網頁上次自動更新的日期和時間,日期:××年××月、無時間;
② 在“日期和時間”下方插入站點計數器,選第3行樣式,數字位數為4位;
③ 設置圖片動態HTML效果為單擊鼠標時圖片交換為“tp0019.jpg”;
④ 為本網頁應用主題“羊皮紙”中的“鮮艷的顏色”、和“背景圖片”,不應用“動態圖形”和“應用CSS”;
⑶ 右上框架:
① 更改初始網頁為“媒體.htm”;
② 設置“進入網頁”的過渡效果為“盒狀收縮”、周期為3秒;
③ 將第二行表格中各單元格中文字分別對應超連接到標有⑴、⑵、⑶、⑷、⑸的數字序號開始的段落。在標有⑴、⑵、⑶、⑷、⑸的段落之后的空行處靠右插入圖片fh.gif,且設置單擊圖片時能夠回到文章開始處;
⑷ 右下框架:
① 為本網頁應用主題“粗條型”中的“動態圖形”和“背景圖片”,不應用“鮮艷的顏色”和“應用CSS”;
② 插入背景音樂為fpyl02.wav;
③ 插入一行名稱分別為“更多知識”、“請提建議”的2個懸停按鈕,按鈕的寬度為200像素。“更多知識”超連接到www.google.com、目標框架為“新建窗口”,“請提建議”超連接到電子信箱[email protected],目標框架為“新建窗口”;


教師招考論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發表,該帖子作者與教師招考論壇享有帖子相關版權
3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和教師招考論壇的同意
4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、教師招考論壇管理員和版主有權不事先通知發貼者而刪除本文

高通過率教師招考教材
2
發表于 2013-6-14 13:28:41 | 只看該作者
已閱,請樓下互相傳閱
高通過率教師招考教材
3
發表于 2015-5-6 11:28:03 | 只看該作者
2017年最新教師招聘考試內部教材
,看看,參考一下
您需要登錄后才可以回帖 登錄 | 免費注冊

本版積分規則

關注教師招考微信公眾號

教師招考論壇 ( 閩ICP備10029304號 )每日定期發布教師招牌資訊

GMT+8, 2019-11-13 15:03 , Processed in 0.234377 second(s), 24 queries .

Powered by 0590EDU管理團隊 X3.4

© 2001-2020 教師招考論壇

返回頂部