資源簡介

(共20張PPT)
網頁制作深入
學習任務
了解框架在網頁設計中的作用及框架網頁的幾種形式，掌握框架屬性的設置方法，能夠編輯、修改框架及制作多頁面顯示的網頁。
了解交互網頁功能的概念，掌握表單元件的功能，能夠利用表單元件制作具有多種交互功能的網頁。
深入了解網頁動態效果的多種形式，能夠制作一些常見的網頁動態效果，能識讀HTML語言，并能模仿和創作滾動的宣傳圖片。
學習內容
任務一：運用框架制作網頁
任務二：制作有交互功能的網頁
任務三：讓網頁更吸引瀏覽者
任務一：運用框架制作網頁
框架結構式網頁，它將Web瀏覽器窗口劃分成若干個區域，每個區域內的網頁既相互獨立，又保持著一定的聯系，使訪問者能同時看到多個網頁的內容。
任務一：運用框架制作網頁
建立框架結構：
打開站點。啟動FrontPage 2003，打開站點，如d:\dilitd。
新建網頁。執行“新建”新建命令，在彈出的“新建”對話框中，單擊“其他網頁模板”技鈕，彈出“網頁模板”對話框，單擊“框架網頁”選項卡，選擇一種框架結構。
選擇框架結構。單擊“橫幅和目錄”框架，則在新網頁中建立了一個具有橫幅、目錄和主框架結構的網頁。
查看框架屬性。用鼠標右鍵單擊每個框架，查看框架屬性中的“名稱”。該框架將窗口劃分為“banner”“contents”和“main”三個默認區域。每個區域分別有“新建網頁”和“設置初始網頁”按鈕。
保存網頁。單擊“保存”按鈕，彈出“另存為”對話框，在“文件名”文本框內輸入網頁名稱，如“kuangjia.htm”，單擊“保存”按鈕。
任務一：運用框架制作網頁
設置框架屬性：
查看剛建立的橫幅和目錄框架網頁三個部分的框架屬性和網頁屬性，比較它們有什么不同。
設置頂部框架（標題）和左側框架（目錄）不顯示滾動條，左側框架選擇“可在瀏覽器中調整大小”，主框架設置為“可在瀏覽器中調整大小”，滾動條設置為“需要時顯示”。
任務一：運用框架制作網頁
填充框架內容：
導人網頁：單擊框架中的“設置初始網頁”按鈕，彈出“插入超鏈接”對話框，選擇鏈接的文件，就可以導入一個已經制作好的網頁。
制作新網頁：單擊框架中的“新建網頁”按鈕，則建立一個空白頁面，制作新網頁。
任務一：運用框架制作網頁
保存框架結構網頁：
保存框架結構網頁與保存普通網頁相比，要復雜一些。框架中每個框內的網頁與框架本身網頁將同時保存。保存時，計算機一般先保存各個框內的新網頁然后再保存整個框架本身網頁。
思考
框架網頁與普通網頁在保存文件時的不同點是什么？相同點又是什么？
任務二：制作有交互功能的網頁
交互式網頁可以廣泛征求意見，方便信息的搜集和交流。表單是網頁交互式功能的集中體現。包含表單的網頁發布到網上后，當瀏覽者需要對網頁表達自己的看法、建議或填寫相關信息時，可以直接在表單內輸入信息。單擊表單內的“提交”按鈕之后，就可以將上述填寫的信息發給表單處理程序。處理程序根據信息的類型分類轉換，并將轉換的結果以文本文件的形式保存下來，從而實現交互功能。
任務二：制作有交互功能的網頁
認識表單元件：
表單元件及功能
元件功能
在網頁中建立一個表單區域，當瀏覽網頁時
看不到邊框虛線

供訪問者輸入單行文本
供訪問者輸入多行文本
可以選擇多個項目的按鈕
選擇單個項目的按鈕
列表中有多個項目但僅能選擇一項
提交信息或重新寫信息按鈕
在表單中將填寫的信息分組統計
任務二：制作有交互功能的網頁
制作交互式功能網頁：
了解表單元件及功能后，制作一個具有交互式功能的網頁十分容易。它的制作 與一般網頁制作方法基本相同，只要增加一個供用戶填寫信息的表單域就可以了。
任務二：制作有交互功能的網頁
設置信息的搜集方式：
瀏覽者輸人信息并提交表單后，這些信息會反饋給網站管理員，反饋的信息默認保存在網站“_private”文件夾中的“form_results.txt”文件里。實際應用時，還可以用指定的電子信箱、其他文本文件、網頁等形式搜集瀏覽者提交的信息。如需反饋到指定電子信箱，其主要操作過程為：
用鼠標右鍵單擊表單區域的空白處，在彈出的快捷菜單中單擊“表單屬性”命令，打開“表單屬性”對話框。
刪除“發送到”中的“文件名稱”框中原有的內容，在“電子郵件地址”框中輸入接收表單信息的電子信箱地址。
單擊“選項”按鈕，打開“保存表單結果”對話框，設置相關參數，如包含域名、主題行、答復行等值設置。
任務三：讓網頁更吸引瀏覽者
在因特網上，網頁所展示的信息形式多種多樣，除通常的文字、圖片、聲音等多媒體信息外，還有視頻信息、動畫信息以及網頁本身的動態效果信息，這些鮮活的畫面給訪問者視覺上的沖擊，使他們興趣盎然。
任務三：讓網頁更吸引瀏覽者
網頁過渡效果：
打開站點，單擊“文件列表框”井選定需要設置過渡效果的網頁。
執行“格式”→“網頁過渡”命令。彈出“網頁過渡”對話欄。
單擊“事件”框，打開下拉列表框，選擇一種方式，如“進入網頁”，“周期”“2”。
在右側“過渡效果”列表框中隨機一種效果，如“隨機水平線條”。
單擊“確定”按鈕，保存網頁。
任務三：讓網頁更吸引瀏覽者
動態DHTML效果：
選定需要加載動畫的對象，執行“視圖”→“工具欄”→“DHTML效果命令”，彈出“DHTML效果”對話框，單擊“選擇一種事件”和“選擇一種效果”就能完成效果設置。
任務三：讓網頁更吸引瀏覽者
給頁面添加滾動文字：
在網頁“代碼視圖”編輯方式下，只要將一段HTML代碼插入適當位置就可以了。
任務三：讓網頁更吸引瀏覽者
給頁面添加滾動宣傳片：
將如下的HTML語言代碼放在與內適當位置，并將語言代碼內的圖片文件替換成所要展示的圖片文件，就可以實現滾動宣傳片的效果。
課后拓展
制作一個能夠反映同學學習、生活和集體活動情況的網站。
謝 謝

展開更多......

收起↑