彰化縣教師電腦多媒體研習(xí)

彰化縣教師電腦多媒體研習(xí)FrontPage網(wǎng)頁製作教學(xué)員國資訊工作團隊

陳茂欽編輯第一頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●課程總覽1.常見網(wǎng)站類別2.網(wǎng)站的製作流程3.編寫前注意事項4.網(wǎng)頁構(gòu)成要素5.網(wǎng)頁基本入門6.網(wǎng)頁元件製作7.網(wǎng)頁進階技巧8.好用的工具第二頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●一、常見網(wǎng)站類別：A.搜尋引擎類-如奇摩、Google

主要功能是提供網(wǎng)頁搜尋服務(wù)B.部落格(網(wǎng)路個人日誌)-無名小站

提供個人撰寫日記類網(wǎng)誌及網(wǎng)路相本C.論壇-微風(fēng)論壇、史萊姆論壇提供網(wǎng)路資源分享、個人經(jīng)驗分享討論D.一般網(wǎng)站-不屬於前三類者

種類繁多，如班級網(wǎng)站、教學(xué)網(wǎng)站等第三頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●二、網(wǎng)站製作流程-以一般網(wǎng)站為例1.擬定網(wǎng)站主題2.蒐集相關(guān)資料3.建立網(wǎng)站架構(gòu)4.製作內(nèi)容5.申請網(wǎng)頁空間6.網(wǎng)站上傳7.網(wǎng)站的維護與更新不同類型的網(wǎng)站，架設(shè)方法也不相同第四頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●三、編寫前注意事項：動手前，先想清楚？1.主題--網(wǎng)站的類別是什麼？

專業(yè)網(wǎng)站、教學(xué)網(wǎng)站、下載網(wǎng)站書籤網(wǎng)站、地下網(wǎng)站…2.架構(gòu)--網(wǎng)站內(nèi)要有哪些東西？以班級網(wǎng)站為例，需要的包括公告、討論版、留言版、網(wǎng)路相簿3.一個成功網(wǎng)站必備的條件是什麼？

第五頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●成功的網(wǎng)頁或網(wǎng)站的條件：

1.有內(nèi)容-先決條件不外乎是內(nèi)容豐富2.速度快-擁有順暢的連線速度3.版面美-網(wǎng)頁的圖文美工排版4.常更新-常更新內(nèi)容或公告5.好連結(jié)-網(wǎng)址容易記，容易上

6.常用到-內(nèi)容富實用性

第六頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●四、網(wǎng)頁構(gòu)成的要素一般常見的網(wǎng)頁內(nèi)容，是由下列各項所組成，本單元將採用下列工具程式完成。1.文字2.表格word、Frontpage3.圖片4.照片Photoimpact5.音樂MediaEncoder、Tomidi6.動畫7.影片F(xiàn)lash、會聲會影

第七頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●五、網(wǎng)頁基本入門一個網(wǎng)站是由許多網(wǎng)頁組成的，進到網(wǎng)站第一個開啟的網(wǎng)頁叫首頁。首頁的名稱通常是index或default製作網(wǎng)頁的軟體很多，以Frontpage最容易上手，因為它和word操作很相近。另外如Namo、Dreamweaver、Flash也都是知名的網(wǎng)頁編輯軟體。第八頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-1認(rèn)識Frontpage啟動篇開始/程式集/MicrosoftOffice/MicrosoftOfficeFrontPage2003第九頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-2認(rèn)識Frontpage操作視窗介紹標(biāo)題列功能表工具列編輯區(qū)切換區(qū)工作窗格狀態(tài)欄第十頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-3認(rèn)識Frontpage您不可不知的程式碼

透過切換區(qū)的功能，探究網(wǎng)頁的程式碼切換到分割功能，可看到網(wǎng)頁程式碼和執(zhí)行後的畫面執(zhí)行後的畫面網(wǎng)頁程式碼第十一頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-1創(chuàng)建個人網(wǎng)站資料夾S1.開啟Frontpage2003程式S2.改選右邊工作窗格中的”快速入門”為

“開新檔案”S3.點選”其他網(wǎng)站範(fàn)本””個人網(wǎng)站”S4.並在選項中的”指定新網(wǎng)站位置”按”瀏覽”指定個人網(wǎng)站資料夾要設(shè)在哪個地方，並命名詳細(xì)操作步驟請點選錄影教學(xué)檔-F02快速建立網(wǎng)站第十二頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-2套用佈景主題S1.個人網(wǎng)站資料夾創(chuàng)建完成後，會出現(xiàn)下面畫面目前是在資料夾畫面點選導(dǎo)覽切換到下個畫面第十三頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-2套用佈景主題S2.點選格式佈景主題，擇其一直接套用即可詳細(xì)操作步驟請點選錄影教學(xué)檔-F03套用佈景主題第十四頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-3網(wǎng)站與頁面之間的切換S1.在”導(dǎo)覽”畫面下，點選要開啟的網(wǎng)頁2下，

網(wǎng)頁立即被開啟。S2.網(wǎng)站與網(wǎng)頁的切換只要點選左上方的書籤即可控制網(wǎng)頁與網(wǎng)站間切換的書籤詳細(xì)操作步驟請點選錄影教學(xué)檔-F04網(wǎng)站與網(wǎng)頁瀏覽切換第十五頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-4網(wǎng)站架構(gòu)及其它常見問題：頁面順序、新增頁面、更改頁面標(biāo)籤、網(wǎng)頁名稱…◎F05網(wǎng)頁的排列順序參見教學(xué)錄影檔◎F06更改頁面標(biāo)籤參見教學(xué)錄影檔◎F07新增頁面參見教學(xué)錄影檔◎F08更改網(wǎng)頁名稱參見教學(xué)錄影檔◎F09首頁的名稱參見教學(xué)錄影檔

◎F10關(guān)閉開啟網(wǎng)站參見教學(xué)錄影檔佈景主題如果多次選擇套用，很容易會出現(xiàn)錯誤！第十六頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-5Frontpage的文字編輯功能文字：常用的功能有新增文字、修改文字、刪除文字文字格式設(shè)定、段落格式設(shè)定、插入水平線..表格：新增表格、插入表格、手繪表格、增刪欄列表格格式設(shè)定、框線與網(wǎng)底功能設(shè)定以上功能在使用上均和word相同，部份教學(xué)詳見錄影檔◎套用word文字檔錄影教學(xué)◎插入文字藝術(shù)師錄影教學(xué)◎合併儲存格錄影教學(xué)第十七頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-6Frontpage的圖片插入功能單張圖片：可利用”插入””圖片””從檔案”或”美工圖案”的方法加入單張相片。相片藝?yán)龋嚎衫谩辈迦搿薄眻D片””新相片藝

廊”，配合”新增”與”版面配置”加入

多張相片?！蚴褂孟嗥?yán)冉虒W(xué)錄影教學(xué)第十八頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-7Frontpage的插入影片檔Flash影片：可利用”插入””圖片”” Flash

格式的影片”加入swf名稱的影片即可插入swf，可利用8個編輯點來控制它的影片大小畫面一般影片：可利用”插入””圖片””視訊”

加入mpg、mpeg、wmv、rm、asf格式影片◎插入Flash影片檔教學(xué)錄影教學(xué)第十九頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-8Frontpage的加入音樂檔s1.在網(wǎng)頁上點選滑鼠”右鍵”s2.選擇”網(wǎng)頁內(nèi)容”s3.在”一般”->”背景聲音””瀏覽”

選擇您要載入的聲音檔後按開啟、確定◎聲音檔支援wav.mid.ram.ra.aif.aifc.aiff.au.snd格式

並不支援直接插入mp3格式的音樂。第二十頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)§5-4認(rèn)識Frontpage跟我一起來建站

5-4-8Frontpage其它常用技巧與觀念

超連結(jié)：用來快速連到另一個檔案的功能可以連網(wǎng)頁或檔案。書籤：用來快速連到同一檔案的某個特定位置當(dāng)網(wǎng)頁資料畫面太長時，可以用此技巧。目標(biāo)框架：連結(jié)出去的檔案，其視窗開啟的方式有網(wǎng)頁預(yù)設(shè)、相同框架、整頁

開新視窗、父框架五種不同選項以上功能都與超連結(jié)按鈕有直接相關(guān)。跑馬燈：用來增加網(wǎng)頁美觀、強調(diào)重要訊息第二十一頁，共三十九頁。主題：超連結(jié)實作教學(xué)S1.先輸入要加入超連結(jié)的字元，然後反白S2.按下快速功能表上的超連結(jié)按鈕，選擇要連結(jié)的檔案

網(wǎng)址或書籤第二十二頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)S3.如有需要控制新連結(jié)視窗出現(xiàn)的方式，請點選目標(biāo)框架，依各人需要去做選擇?！蜃龀B結(jié)時，特別注意路徑的問題，錯誤時會連結(jié)失敗第二十三頁，共三十九頁。主題：書籤實作教學(xué)S1.先指定書籤所在的位置(以端午詩選為例)1.先反白第二十四頁，共三十九頁。主題：書籤實作教學(xué)S2.再指定其它書籤S3.由書籤視窗中看來，已設(shè)5個書籤第二十五頁，共三十九頁。主題：書籤實作教學(xué)S4.設(shè)定超連結(jié)到指定書籤即完成第二十六頁，共三十九頁。主題：跑馬燈實作教學(xué)S1.移動游標(biāo)到要插入跑馬燈的位置上S2.點選”插入””web元件””跑馬燈”第二十七頁，共三十九頁。主題：跑馬燈實作教學(xué)S3.在跑馬燈畫面中，填入文字並設(shè)定S4.點選左下角”樣式”，可做進階設(shè)定工作，按確定

即完成。第二十八頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●六、網(wǎng)頁元件製作透過佈景主題雖可快速製作出網(wǎng)頁，但是仍顯得不夠美觀、缺乏創(chuàng)意?？蓲裼肞hotoimpact的元件設(shè)計師，設(shè)計橫幅

、項目、按鈕、圖示、分格線等元件?！驒M幅製作教學(xué)觀看錄影檔◎按鈕製作教學(xué)觀看錄影檔◎Rollover按鈕製作教學(xué)觀看錄影檔◎分隔線製作教學(xué)觀看錄影檔第二十九頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●七、網(wǎng)頁進階技巧(網(wǎng)頁特效精靈v3.6)網(wǎng)站上有些特效是利用javascript或其它語法

編寫出令人稱羨的特效。利用相關(guān)工具中的”網(wǎng)頁特效精靈”玩看看要利用本軟體時，需懂得一些基本的語法第三十頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●八、其它好用工具音樂轉(zhuǎn)檔工具：音樂轉(zhuǎn)檔精靈、急速火龍、widip30in相片批次轉(zhuǎn)檔工具：EzThmb_Setup相片批次縮小Flash相簿製作工具：Flashbum軟體第三十一頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)●九、結(jié)語1.Frontpage功能當(dāng)然不只這些，今天的教學(xué)只是依個人使用經(jīng)驗來跟各位分享。2.網(wǎng)站重要的是其架構(gòu)與內(nèi)容，技巧依個人需求而異。3.檔案名稱盡量以英文或數(shù)字命名。4.開始製作一個新網(wǎng)站時，先開一個資料夾。把要加入的圖形、聲音、影片全部都放進去5.勿貪圖特效，導(dǎo)致檔案過大，超過上傳限制；或開啟該網(wǎng)頁時，速度過慢…6.注意版權(quán)，請盡量用合法的東西。不論是音樂或圖片還是文章都要注意…第三十二頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)自己練功的好站介紹

網(wǎng)站建置百寶箱()第三十三頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)第三十四頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)第三十五頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)第三十六頁，共三十九頁。主題：FrontPage網(wǎng)頁製作教學(xué)第三十七頁，共三十九頁。FrontPage網(wǎng)頁製作學(xué)習(xí)經(jīng)驗分享結(jié)束謝謝各位老師撥空參與員林國小資訊工作團隊95.07.暑假于員林/南郭國小