【文章內(nèi)容簡介】 行大致的布局，然后開始設(shè)計(jì)； ?應(yīng)從外到內(nèi)開始工作，先創(chuàng)建外部最大的表格，然后根據(jù)需要合并單元格或在單元格中插入嵌套表格。 FRONTPAGE2022 42 表格邊框設(shè)為0，使看不到邊框。 圖 1437 以表格形式布局的山東大學(xué)主頁 FRONTPAGE2022 43 第 15章 網(wǎng)頁制作高級(jí)技巧 ? 應(yīng)用框架實(shí)現(xiàn)網(wǎng)頁布局設(shè)計(jì) ? 應(yīng)用表單制作交互式網(wǎng)頁 ? 制作動(dòng)態(tài)網(wǎng)頁 ? 插入 FrontPage組件 ? 在網(wǎng)頁中加入多媒體 ? 應(yīng)用 FrontPage主題設(shè)定網(wǎng)站整體風(fēng)格 FRONTPAGE2022 44 應(yīng)用框架實(shí)現(xiàn)網(wǎng)頁布局設(shè)計(jì) ? 框架網(wǎng)頁 : ?特殊的 HTML網(wǎng)頁，將瀏覽器窗口分成稱為框架的不同區(qū)域，每個(gè)區(qū)域都可以顯示不同的網(wǎng)頁。 ?常用于目錄、文章或信息列表、或任何其他的網(wǎng)頁上 ?框架網(wǎng)頁本身并不包含可見內(nèi)容，它只用來指定要顯示的其他網(wǎng)頁及其顯示方式。 ?在一個(gè)框架中單擊超鏈接會(huì)在另一個(gè)框架 (目標(biāo)框架 )中顯示相應(yīng)網(wǎng)頁。 FRONTPAGE2022 45 ?一個(gè)框架網(wǎng)頁的創(chuàng)建過程比較復(fù)雜，需經(jīng)過如下步驟： ? 選擇框架模板 ? 修改框架布局 ? 設(shè)置框架包含的網(wǎng)頁 ? 組織框架間的調(diào)用關(guān)系 ? 保存框架網(wǎng)頁 ? 保存框架中顯示的網(wǎng)頁 FRONTPAGE2022 46 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 1： 選擇框架模板 ?在 “網(wǎng)頁模板”對話框中選擇“框架網(wǎng)頁”選項(xiàng)卡，在列表框中選擇要使用的框架網(wǎng)頁模板 ?“說明”區(qū)域?yàn)樵撃０宓拿枋觯? “預(yù)覽”區(qū)域?yàn)榭蚣芫W(wǎng)頁布局的預(yù)覽圖。 FRONTPAGE2022 47 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 2： 修改框架布局 ?調(diào)整框架大小 ? 手動(dòng)調(diào)整，通過拖動(dòng)框架的邊框調(diào)整框架大小。 ? 通過修改框架屬性來精確設(shè)定框架的大小。選擇“框架 → 框架屬性”菜單命令，出現(xiàn)“框架屬性”對話框，在“框架大小”區(qū)域中，調(diào)整“列寬”和“高度”設(shè)置。 ?拆分框架（內(nèi)容保存在原始框架中，并創(chuàng)建一新框架） ? 拖動(dòng)框架邊框來拆分框架：打開要修改的框架網(wǎng)頁，同時(shí)按住Ctrl鍵，并拖動(dòng)框架的任一邊框，將一個(gè)框架平均拆分成兩個(gè)分開的行或列。 ? 通過菜單拆分框架：“框架 → 拆分框架”命令，出現(xiàn)“拆分框架”對話框中。 ?刪除框架 ? 選擇要?jiǎng)h除的框架，單擊“框架 → 刪除框架”命令。 FRONTPAGE2022 48 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 3： 設(shè)置框架包含的網(wǎng)頁 ?框架網(wǎng)頁是網(wǎng)頁的集合，需設(shè)置每個(gè)框架對應(yīng)的網(wǎng)頁內(nèi)容。 ?把現(xiàn)有網(wǎng)頁分配到框架中： ? 在其中某個(gè)框架中，單擊“設(shè)置初始網(wǎng)頁”按鈕，出現(xiàn)“插入超鏈接”對話框 ? 對話框中設(shè)置鏈接的網(wǎng)頁，單擊“確定”按鈕，該網(wǎng)頁出現(xiàn)在框架內(nèi)。 ?如初始網(wǎng)頁還沒建立： ? 單擊“新建網(wǎng)頁”按鈕開始建立。 ?改變框架中的初始網(wǎng)頁： ? 選擇要改變初始網(wǎng)頁的框架 ? “框架屬性”對話框中的“初始網(wǎng)頁”文本框中輸入新網(wǎng)頁的名稱和位置，或者單擊“瀏覽”按鈕，從文件列表中選擇。 FRONTPAGE2022 49 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 4： 組織框架間的調(diào)用關(guān)系 ? 在使用框架時(shí)一定會(huì)遇到如何處理框架間的調(diào)用關(guān)系的問題，即點(diǎn)擊一個(gè)框架中的超鏈接后，目的頁面將會(huì)出現(xiàn)在哪一個(gè)框架內(nèi)，或是新打開一個(gè)瀏覽器窗口。 ? 在“編輯超鏈接”窗口的右側(cè)單擊“目標(biāo)框架”按鈕，出現(xiàn)的“目標(biāo)框架”對話框，在這個(gè)對話框中，可以直接在“當(dāng)前框架網(wǎng)頁” 框中選擇一個(gè)框架作為目的框架，也可以選擇“公共目標(biāo)區(qū)框”中的選項(xiàng)來確定目標(biāo)頁面的出現(xiàn)形式： ? 網(wǎng)頁默認(rèn)值（ main）：目標(biāo)頁面將出現(xiàn)在默認(rèn)目的框架中，默認(rèn)目的框架可以在框架的頁面屬性設(shè)置窗口中設(shè)置。如果不加以說明，系統(tǒng)將按照默認(rèn)目的框架調(diào)用目標(biāo)頁面。 ? 相同框架：目標(biāo)頁面將出現(xiàn)在同一框架中，也就是覆蓋調(diào)用頁面。 ? 整頁：目標(biāo)頁面將覆蓋整個(gè)框架頁面，獨(dú)立地出現(xiàn)在瀏覽器窗口中。 ? 新建窗口：目標(biāo)頁面將出現(xiàn)在新打開的一個(gè)瀏覽器窗口中，而在原來的瀏覽器窗口中不發(fā)生任何變化。 FRONTPAGE2022 50 圖 156 “目標(biāo)框架”對話框 FRONTPAGE2022 51 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 5： 保存框架網(wǎng)頁 ?若要保存包含內(nèi)容的框架網(wǎng)頁，執(zhí)行下列操作： ?打開要保存的框架網(wǎng)頁，單擊“文件 → 另存為”菜單命 令 ?在“另存為”對話框中會(huì)顯示框架網(wǎng)頁布局的縮略圖，因?yàn)槟阏诒４婵蚣芫W(wǎng)頁，所以所有的區(qū)域都會(huì)用深藍(lán)色的框突出顯示，表明這是正在保存的內(nèi)容。 在“文件名”框中，鍵入突出顯示的框架網(wǎng)頁的名稱，選擇要保存網(wǎng)頁的位置，單擊“保存”按鈕。 FRONTPAGE2022 52 一個(gè)框架網(wǎng)頁的創(chuàng)建步驟 6： 保存框架中顯示的網(wǎng)頁 ?在框架網(wǎng)頁中選擇一個(gè)要保存的框架，再單擊“框架 → 另存為網(wǎng)頁”； ?在“另存為”對話框中會(huì)顯示框架網(wǎng)頁布局的縮略圖，深藍(lán)色的框指明了突出顯示框架中要保存的當(dāng)前網(wǎng)頁。鍵入文件名，選擇保存位置后，單擊“保存”按鈕。 ?若框架中所顯示的網(wǎng)頁已經(jīng)保存過，可單擊“框架 → 保存網(wǎng)頁”以原來的名字保存。 FRONTPAGE2022 53 應(yīng)用表單制作交互式網(wǎng)頁 ? 普通網(wǎng)頁只是讓訪問者去觀看，少了訪問者本身的參與。 ? 交互式網(wǎng)頁通過表單來向服務(wù)器傳送一些用戶的交流信息，服務(wù)器通過數(shù)據(jù)庫查詢等方法進(jìn)行處理，返回用戶感興趣的內(nèi)容，從而建立了一種與用戶的交流。論壇、留言板就是采用的這種形式，這將會(huì)更加吸引訪問者。 ? 表單的作用就是搜集用戶輸入的信息，如收集客戶的個(gè)人資料，并輸入到數(shù)據(jù)庫中，或設(shè)計(jì)一個(gè)訂貨單，讓用戶指定自己要購買的商品名稱、型號(hào)和數(shù)量等。 FRONTPAGE2022 54 應(yīng)用表單制作交互式網(wǎng)頁 表單域的類型 表單域指表單上用以收集信息的單個(gè)域。每一類型的域都有不同的操作方式，因此用戶必須根據(jù)站點(diǎn)訪問者輸入信息的方式選擇表單域。一個(gè)表單中可以具有如下表單域： ? 文本框：用于讓訪問者輸入一行文字。 ? 選項(xiàng)按鈕：也稱為單選按鈕，瀏覽者只能從一組選項(xiàng)中選擇一個(gè)選項(xiàng)。 ? 文本區(qū)：收集多行的文本，例如注釋。它可以滾動(dòng)以容納不同數(shù)量的文本。 ? 下拉框：為網(wǎng)頁瀏覽者提供一個(gè)選擇列表。它與使用一組選項(xiàng)按鈕類似，但其所占用的表單空間較小?？梢詫⑾吕蛟O(shè)置為允許一個(gè)或多個(gè)選項(xiàng)。 ? 復(fù)選框：網(wǎng)頁瀏覽者可以從一組選項(xiàng)中選擇一個(gè)、多個(gè)或全部選項(xiàng)，也可一個(gè)都不選。 FRONTPAGE2022 55 ? 按鈕：使用按鈕可以讓網(wǎng)頁瀏覽者在填好表單后提交該表單、重置表單或運(yùn)行自定義腳本。你也可以在表單中添加圖片，用作提交按鈕。填寫表單之后，網(wǎng)頁瀏覽者可以單擊圖片以提交該表單，然后表單上的數(shù)據(jù)，包括圖片域名稱，就會(huì)發(fā)送到表單處理程序。 ? 高級(jí)按鈕：通過在表單中插入高級(jí)按鈕，可以編寫腳本，讓表單完成所需的工作。高級(jí)按鈕可自定義的程度很高，按鈕上可以使用喜愛的字體、顏色甚至表格。 ? 分組框：希望將一組相關(guān)的控件或文本同網(wǎng)頁或當(dāng)前表單上的其他信息分開時(shí)，可以添加分組框。 ? 文件上載：可以給站點(diǎn)訪問者提供向 Web 站點(diǎn)發(fā)送文件的機(jī)會(huì)。 ? 密碼域：希望站點(diǎn)訪問者輸入密碼后才能訪問 Web站點(diǎn)時(shí)，請?jiān)谧员韱沃刑砑用艽a域。密碼域其實(shí)只是一個(gè)單行文本框。站點(diǎn)訪問者在這個(gè)域中鍵入數(shù)據(jù)時(shí)，大部分的 Web瀏覽器都會(huì)將密碼顯示為星號(hào)以保護(hù)這些機(jī)密信息。 FRONTPAGE2022 56 應(yīng)用表單制作交互式網(wǎng)頁 創(chuàng)建表單 (三種方法 ) 圖 158 意見反饋表單示例 FRONTPAGE2022 57 創(chuàng)建表單 (三種方法 ) ? 方法 1 ：自己創(chuàng)建表單 ?單擊“插入 → 表單”菜單命令，此時(shí)在網(wǎng)頁上將出現(xiàn)一個(gè)虛線框住的矩形區(qū)域，其中包含“提交”和“重置”按鈕，然后就可以向其中添加表單域了。 ?添加表單域操作方法是：單擊“插入 → 表單”菜單命令，然后從子菜單中選擇要添加到表單中的元素，這里我們需要添加一個(gè)用于選擇職業(yè)的下拉框， 5個(gè)用于對網(wǎng)站評價(jià)的選項(xiàng)按鈕，一個(gè)用于輸入建議的多行文本區(qū)，一個(gè)用于輸入電子郵件地址的單行文本框，其他文字可按照一般文本進(jìn)行輸入、編輯。 ?右擊某表單域，在快捷菜單中選擇“表單域?qū)傩浴泵?，可打開相應(yīng)的表單域?qū)傩詫υ捒蜻M(jìn)行設(shè)置。 FRONTPAGE2022 58 創(chuàng)建表單 (三種方法 ) ? 方法 2：使用向?qū)?chuàng)建表單 ?在“網(wǎng)頁模板”對話框中的“常規(guī)”選項(xiàng)卡中選擇“表單網(wǎng)頁向?qū)А?，單擊“確定”按鈕后出現(xiàn)“表單網(wǎng)頁向?qū)А睂υ捒颉? ?按照屏幕上的提示一步一步添加表單中需要的問題，最后得到問題列表，單擊“完成”就可以創(chuàng)建需要的表單。 FRONTPAGE2022 59 創(chuàng)建表單 (三種方法 ) ? 方法 3：用表單模板來創(chuàng)建類似表單 ?在“網(wǎng)頁模板”對話框中的“常規(guī)”選項(xiàng)卡中選擇“確認(rèn)表單”、“意見反饋表單”、“用戶注冊”或“意見薄”等表單模板，這里選擇“意見反饋表單”模板，單擊“確定”按鈕創(chuàng)建一個(gè)意見反饋表單。 ?做相應(yīng)的修改。 FRONTPAGE2022 60 應(yīng)用表單制作交互式網(wǎng)頁 收集表單信息 ? 表單的作用在于幫助用戶收集信息，當(dāng)訪問者填完表單信息，按“提交”按鈕提交了表單結(jié)果后， FrontPage會(huì)予以保存，并提供了多種保存表單結(jié)果的方法，可保存到文件、電子郵件、數(shù)據(jù)庫或其他指定的對象。另外，也可在用戶成功發(fā)送表單或發(fā)送無效表單后向用戶顯示確認(rèn)網(wǎng)頁。 ? 可通過右擊表單打開 “表單屬性”對話框，進(jìn)行設(shè)置，單擊“選項(xiàng)”按鈕可打開“保存表單結(jié)果”對話框進(jìn)行進(jìn)一步的設(shè)置。 ? 注意：若要測試表單的功能，必須首先將 Web站點(diǎn)發(fā)布到運(yùn)行有服務(wù)器擴(kuò)展（ FrontPage Server Extension）的 Web服務(wù)器上。該 Web站點(diǎn)一旦發(fā)布，即可單擊“用瀏覽器預(yù)覽”來測試該表單。 FRONTPAGE2022 61 制作動(dòng)態(tài)網(wǎng)頁 使用“動(dòng)態(tài) HTML效果”制作頁面元素的動(dòng)態(tài)效果 ? DHTML，即 Dynamic Hyper Text Markup Language（動(dòng)態(tài)超文本標(biāo)記語言）的出現(xiàn)改變了普通的 HTML只能提供靜態(tài)、單調(diào)的文字和超文本鏈接的局面，利用其提供的功能可以輕易地開發(fā)出五彩繽紛的動(dòng)態(tài)網(wǎng)頁。FrontPage提供了多種 DHTML效果，使用者無須了解 DHTML語法知識(shí)就可以輕松實(shí)現(xiàn)各種各樣的動(dòng)態(tài)網(wǎng)頁。 FRONTPAGE2022 62 制作動(dòng)態(tài)網(wǎng)頁 使用“動(dòng)態(tài) HTML效果”制作頁面元素的動(dòng)態(tài)效果 ? 在網(wǎng)頁中實(shí)現(xiàn)動(dòng)態(tài) HTML效果的方法： ?選中要實(shí)現(xiàn)動(dòng)態(tài) HTML效果的頁面元素，如頁面中的文字、圖片、表單中的按鈕等 ?單擊“視圖 → 工具欄 → DHTML效果”或“格式 → 動(dòng)態(tài)HTML效果”菜單命令，出現(xiàn) DHTML效果工具欄 ?單擊最左邊的下拉菜單，選擇一種事件，其中有單擊、鼠標(biāo)懸停、雙擊、網(wǎng)頁加載等事件 ?在“應(yīng)用”下拉菜單中選擇一種應(yīng)用效果 ?最后在“效果”下拉菜單中為該應(yīng)用選擇一種動(dòng)態(tài)效果。 ? 不同的事件包含的應(yīng)用效果和動(dòng)態(tài)效果是不同的，可以根據(jù)需要靈活選用。 FRONTPAGE2022 63 網(wǎng)頁過渡效果 ? 所謂網(wǎng)頁的過渡效果，是指我們從一個(gè)網(wǎng)頁切換到另一個(gè)網(wǎng)頁時(shí)，網(wǎng)頁將出現(xiàn)各種不同的轉(zhuǎn)換效果。