搜索
彰化縣教師電腦多媒體研習FrontPage網頁製作教學員國資訊工作團隊陳茂欽編輯主題：FrontPage網頁製作教學●課程總覽1.常見網站類別2.網站的製作流程3.編寫前注意事項4.網頁構成要素5.網頁基本入門6.網頁元件製作7.網頁進階技巧8.好用的工具主題：FrontPage網頁製作教學●一、常見網站類別：A.搜尋引擎類-如奇摩、Google主要功能是提供網頁搜尋服務B.部落格(網路個人日誌)-無名小站提供個人撰寫日記類網誌及網路相本C.論壇-微風論壇、史萊姆論壇提供網路資源分享、個人經驗分享討論D.一般網站-不屬於前三類者種類繁多，如班級網站、教學網站等主題：FrontPage網頁製作教學●二、網站製作流程-以一般網站為例1.擬定網站主題2.蒐集相關資料3.建立網站架構4.製作內容5.申請網頁空間6.網站上傳7.網站的維護與更新不同類型的網站，架設方法也不相同主題：FrontPage網頁製作教學●三、編寫前注意事項：•動手前，先想清楚？1.主題--網站的類別是什麼？專業網站、教學網站、下載網站書籤網站、地下網站…2.架構--網站內要有哪些東西？以班級網站為例，需要的包括公告、討論版、留言版、網路相簿3.一個成功網站必備的條件是什麼？主題：FrontPage網頁製作教學●成功的網頁或網站的條件：1.有內容-先決條件不外乎是內容豐富2.速度快-擁有順暢的連線速度3.版面美-網頁的圖文美工排版4.常更新-常更新內容或公告5.好連結-網址容易記，容易上6.常用到-內容富實用性主題：FrontPage網頁製作教學●四、網頁構成的要素•一般常見的網頁內容，是由下列各項所組成，本單元將採用下列工具程式完成。1.文字2.表格word、Frontpage3.圖片4.照片Photoimpact5.音樂MediaEncoder、Tomidi6.動畫7.影片Flash、會聲會影主題：FrontPage網頁製作教學●五、網頁基本入門•一個網站是由許多網頁組成的，進到網站第一個開啟的網頁叫首頁。•首頁的名稱通常是index或default•製作網頁的軟體很多，以Frontpage最容易上手，因為它和word操作很相近。•另外如Namo、Dreamweaver、Flash也都是知名的網頁編輯軟體。主題：FrontPage網頁製作教學§5-1認識Frontpage啟動篇•開始/程式集/MicrosoftOffice/MicrosoftOfficeFrontPage2003主題：FrontPage網頁製作教學§5-2認識Frontpage操作視窗介紹標題列功能表工具列編輯區切換區工作窗格狀態欄主題：FrontPage網頁製作教學§5-3認識Frontpage您不可不知的程式碼透過切換區的功能，探究網頁的程式碼切換到分割功能，可看到網頁程式碼和執行後的畫面執行後的畫面網頁程式碼主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-1創建個人網站資料夾S1.開啟Frontpage2003程式S2.改選右邊工作窗格中的”快速入門”為“開新檔案”S3.點選”其他網站範本””個人網站”S4.並在選項中的”指定新網站位置”按”瀏覽”指定個人網站資料夾要設在哪個地方，並命名詳細操作步驟請點選錄影教學檔-F02快速建立網站主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-2套用佈景主題S1.個人網站資料夾創建完成後，會出現下面畫面目前是在資料夾畫面點選導覽切換到下個畫面主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-2套用佈景主題S2.點選格式佈景主題，擇其一直接套用即可詳細操作步驟請點選錄影教學檔-F03套用佈景主題主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-3網站與頁面之間的切換S1.在”導覽”畫面下，點選要開啟的網頁2下，網頁立即被開啟。S2.網站與網頁的切換只要點選左上方的書籤即可控制網頁與網站間切換的書籤詳細操作步驟請點選錄影教學檔-F04網站與網頁瀏覽切換主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-4網站架構及其它常見問題：頁面順序、新增頁面、更改頁面標籤、網頁名稱…◎F05網頁的排列順序參見教學錄影檔◎F06更改頁面標籤參見教學錄影檔◎F07新增頁面參見教學錄影檔◎F08更改網頁名稱參見教學錄影檔◎F09首頁的名稱參見教學錄影檔◎F10關閉開啟網站參見教學錄影檔佈景主題如果多次選擇套用，很容易會出現錯誤！主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-5Frontpage的文字編輯功能文字：常用的功能有新增文字、修改文字、刪除文字文字格式設定、段落格式設定、插入水平線..表格：新增表格、插入表格、手繪表格、增刪欄列表格格式設定、框線與網底功能設定以上功能在使用上均和word相同，部份教學詳見錄影檔◎套用word文字檔錄影教學◎插入文字藝術師錄影教學◎合併儲存格錄影教學主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-6Frontpage的圖片插入功能單張圖片：可利用”插入””圖片””從檔案”或”美工圖案”的方法加入單張相片。相片藝廊：可利用”插入””圖片””新相片藝廊”，配合”新增”與”版面配置”加入多張相片。◎使用相片藝廊教學錄影教學主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-7Frontpage的插入影片檔Flash影片：可利用”插入””圖片””Flash格式的影片”加入swf名稱的影片即可插入swf，可利用8個編輯點來控制它的影片大小畫面一般影片：可利用”插入””圖片””視訊”加入mpg、mpeg、wmv、rm、asf格式影片◎插入Flash影片檔教學錄影教學主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-8Frontpage的加入音樂檔s1.在網頁上點選滑鼠”右鍵”s2.選擇”網頁內容”s3.在”一般”-”背景聲音””瀏覽”選擇您要載入的聲音檔後按開啟、確定◎聲音檔支援wav.mid.ram.ra.aif.aifc.aiff.au.snd格式並不支援直接插入mp3格式的音樂。主題：FrontPage網頁製作教學§5-4認識Frontpage跟我一起來建站5-4-8Frontpage其它常用技巧與觀念超連結：用來快速連到另一個檔案的功能可以連網頁或檔案。書籤：用來快速連到同一檔案的某個特定位置當網頁資料畫面太長時，可以用此技巧。目標框架：連結出去的檔案，其視窗開啟的方式有網頁預設、相同框架、整頁開新視窗、父框架五種不同選項以上功能都與超連結按鈕有直接相關。跑馬燈：用來增加網頁美觀、強調重要訊息主題：超連結實作教學S1.先輸入要加入超連結的字元，然後反白S2.按下快速功能表上的超連結按鈕，選擇要連結的檔案網址或書籤主題：FrontPage網頁製作教學S3.如有需要控制新連結視窗出現的方式，請點選目標框架，依各人需要去做選擇。◎做超連結時，特別注意路徑的問題，錯誤時會連結失敗主題：書籤實作教學S1.先指定書籤所在的位置(以端午詩選為例)1.先反白主題：書籤實作教學S2.再指定其它書籤S3.由書籤視窗中看來，已設5個書籤主題：書籤實作教學S4.設定超連結到指定書籤即完成主題：跑馬燈實作教學S1.移動游標到要插入跑馬燈的位置上S2.點選”插入””web元件””跑馬燈”主題：跑馬燈實作教學S3.在跑馬燈畫面中，填入文字並設定S4.點選左下角”樣式”，可做進階設定工作，按確定即完成。主題：FrontPage網頁製作教學●六、網頁元件製作•透過佈景主題雖可快速製作出網頁，但是仍顯得不夠美觀、缺乏創意。•可採用Photoimpact的元件設計師，設計橫幅、項目、按鈕、圖示、分格線等元件。◎橫幅製作教學觀看錄影檔◎按鈕製作教學觀看錄影檔◎Rollover按鈕製作教學觀看錄影檔◎分隔線製作教學觀看錄影檔主題：FrontPage網頁製作教學●七、網頁進階技巧(網頁特效精靈v3.6)•網站上有些特效是利用javascript或其它語法編寫出令人稱羨的特效。•利用相關工具中的”網頁特效精靈”玩看看•要利用本軟體時，需懂得一些基本的語法主題：FrontPage網頁製作教學●八、其它好用工具•音樂轉檔工具：音樂轉檔精靈、急速火龍、widip30in•相片批次轉檔工具：EzThmb_Setup相片批次縮小•Flash相簿製作工具：Flashbum軟體主題：FrontPage網頁製作教學●九、結語1.Frontpage功能當然不只這些，今天的教學只是依個人使用經驗來跟各位分享。2.網站重要的是其架構與內容，技巧依個人需求而異。3.檔案名稱盡量以英文或數字命名。4.開始製作一個新網站時，先開一個資料夾。把要加入的圖形、聲音、影片全部都放進去5.勿貪圖特效，導致檔案過大，超過上傳限制；或開啟該網頁時，速度過慢…6.注意版權，請盡量用合法的東西。不論是音樂或圖片還是文章都要注意…主題：FrontPage網頁製作教學•自己練功的好站介紹網站建置百寶箱()主題：FrontPage網頁製作教學•自己練功的好站介紹藍色小舖()主題：FrontPage網頁製作教學•自己練功的好站介紹OecSpace()主題：FrontPage網頁製作教學•自己練功的好站介紹酷必網()主題：FrontPage網頁製作教學•自己練功的好站介紹創意眼()FrontPage網頁製作學習經驗分享結束謝謝各位老師撥空參與員林國小資訊工作團隊95.07.暑假于員林/南郭國小