侨光行政人员训练课程市公开课获奖课件省名师优质课赛课一等奖课件.ppt

按一下以編輯母片標題樣式,按一下以編輯母片,第二層,第三層,第四層,第五層,*,*,*,本资料仅供参考，不能作为科学依据。谢谢。本资料仅供参考，不能作为科学依据。本资料仅供参考，不能作为科学依据。谢谢。本资料仅供参考，不能作为科学依据。,僑光行政人員訓練課程,Frontpage 網頁維護,鄭瓊芬(cfchengocit.edu.tw),Oct.20,1/48,1,WWW簡介,WWW(Word Wide Web)全球資訊網是1989年歐洲高能粒子協會一個研究小組所開發一種全新Internet服務，WWW能夠在網路上傳送圖片、文字、影像、聲音等多媒體資料，由Tim Berners Lee領導小組所開發主從架構分散式網路服務系統。,2/48,2,WWW基礎-名詞解說,3/48,3,WWW架構-說明,WWW全球資訊網屬於一種主從架構系統。,主端是伺服端(Server)：指是Web伺服器，在伺服器上儲存著HTML文件等網頁文件和圖片等多媒體資料。,從端是客戶端(Client)：使用者執行瀏覽程式電腦，負責和伺服器溝通和讀取伺服器資料，也就是HTML文件。,4/48,4,WWW架構-圖例,Web伺服器儲存客戶端請求資料，以微軟來說就是IIS（Internet Information Server），從端是使用瀏覽程式顯示伺服端文件，微軟Internet Explorer是当前巿場佔有率最高瀏覽程式。,5/48,5,WWW架構-HTTP,WWW採用HTTP（Hypertext Transfer Protocol）通訊協定將伺服器資料傳送到瀏覽程式，伺服器在架構上處於被動角色，等候使用者藉著瀏覽程式提出瀏覽HTTP請求，Web伺服器針對請求進行檢查，假如沒有問題就開始傳輸資料，傳輸資料為HTML文件和相關多媒體檔案。,6/48,6,網站運作概念,7/48,7,網頁製作流程,8/48,8,網頁與首頁,何謂網頁？,透過瀏覽器在 WWW 上所看到每一個畫面都是,網頁,(Web Page),何謂,Home Page(首頁),？,進入一個網站時所看到第一個網頁,功效：負責導覽及介紹最新消息,9/48,9,網站就是網頁集合,設計者先把整個網站架構規劃好,然後再分別製作出不一样網頁,讓網頁間彼此相連。這樣完整架構就稱為,網站,10/48,10,網站放在哪裡,普通網站放置在稱為,伺服器,(Server),電腦中,除了伺服器在維修或壞掉時關機,其餘時間都可瀏覽,除自行架設伺服器外,普通個人與小企業、工作室,可向,ISP(Internet Service Provider 網路服務提供者),申請,在他們伺服器上租一塊空間放置網站,11/48,11,網站與伺服器,12/48,12,網頁技術,靜態網頁,網頁是由HTML所撰寫，無論在何時何地瀏覽，皆呈現相同畫面與內容，且使用者僅能瀏覽，無法提供訊息給網站，讓網站回應使用者需求。,動態網頁,網頁是由 JavaScript,VBScript,ASP,PHP,JSP所撰寫，讓網頁能夠依照不一样情況做出動態回應,網頁美工,在網頁中加入圖檔及動畫等，惯用之軟體為PhotoImpact,Photoshop,Flash.,13/48,13,什麼是 HTML,在瀏覽程式中所看到內容,原始文件內容,(執行,檢視/原始檔,命令),14/48,14,HTML 文件結構,標籤,(tag),由小於“”符號組成,普通文字,Ex：,旗標出版企业,15/48,15,基本標籤,HTML 文件最基本標籤：,1.文件開始與結束,2.標示文件資訊,3.標示本文,4.文件標題16/48,16,HTML 基本架構,17/48,17,網頁組成元素,文字,圖片,超連結,其它元素,18/48,18,網頁文字,網頁元素中最基本、最主要內容,優勢：檔案小、速度快,所佔,檔案空間非常小,(一個汉字字 2 Bytes),進入一個純文字網頁時,大約,只要 1、2 秒鐘,就能够看到整篇網頁,可利用,HTML 語法,以及新,CSS 樣式表,來改變,色彩、格式,與,大小,等屬性,滿足不一样設計需求,19/48,19,變換網頁文字限制,瀏覽者電腦裡若沒有網頁中使用字體,瀏覽到該網頁時,就只能以,系統預設字型,顯示,解決方法可將把網頁文字做成,圖形,不過檔案大小會增大很多,20/48,20關於網頁圖片,常應用在 WWW 上圖形有,JPG、GIF 和 PNG,幾種格式,這些格式除了含有,壓縮百分比高,特征之外,也含有,跨平台,優點,不论瀏覽者用是什麼作業系統,都能直接在瀏覽器上看到這幾種格式圖片,21/48,21,網頁圖片應用,22/48,22,關於超連結,點選頁面上超連結能够：,像穿越任意門普通快速到達要去地方,下載檔案,寄 e-mail 給網站主人.,網頁中不論是文字或圖形都能够加上超連結標記,23/48,23,超連結種類,連往別網站,外部超連結,連結自己網站內部 Web Page,內部超連結,連結同一頁面中部分內容,書籤,連至檔案以下載之,下載超連結,能够寄 E-mailE-mail 超連結,按下或滑鼠移上時能够啟動程式產生特效超連結,24/48,24,其它元素,表格、表單,聲音、影像、多媒體,程式特效,其它各類多媒體 Plug-in,25/48,25,表格、表單,表格在網頁中使用：,能够做為普通表格使用,無邊框表格常被利用來做網頁整體排版,表單在網頁中使用：,表單是網頁與伺服端程式溝通主要工具,討論區、留言版、會員登錄等均常使用表單功效,26/48,26,聲音、影像、多媒體在網頁應用,設定,背景音樂,利用,Active X 控制項,或其它方式將音樂和影像、多媒體(如 Flash 動畫等)插入網頁中播放,27/48,27,程式特效,利用,Script 程式,或是,Java Applet,之類程式能够在網頁中製造各類效果,常見特效：跟著滑鼠移動文字、水中倒影,28/48,28,網頁設計考量,不一样瀏覽器觀看效果,螢幕解析度與色彩顯示,字型與語系設定,考量網路傳輸速度,29/48,29,不一样瀏覽器,Netscape,和,Internet Explorer,所支援,HTML,標籤就有些許不一样,所以在網頁中所製作效果可能會因為瀏覽者所使用瀏覽器不一样而呈現不一樣效果,使用者使用瀏覽器設定也會影響網頁外觀,30/48,30,螢幕解析度,在高螢幕解析度下設計網頁,在低解析度螢幕上觀看時,會造成捲動好幾次頁面才能看到原設計網頁,当前來說,800 X 600 解析度設定值應該是符合最多人需求,能够在首頁中宣告一下最正确瀏覽解析度,讓瀏覽者有個依據,31/48,31,字型與語系,網頁製作時要設定對應語系編碼,比如,做繁體汉字網頁就要將網頁語系設為 Big-5 繁體汉字,這樣才能防止網頁中文字出現亂碼,設計網頁時,最好少用特殊字型,假如一定要用,那麼不妨把它作成圖片,32/48,32,網路傳輸速率,哪些網頁內容會影響網路傳輸速率？,含有超大圖檔,VRML 虛擬實境,影音多媒體檔案.,在設計網頁時,除非必要,不然別放入過於龐大檔案,33/48,33,FTP 簡介,FTP(File Transfer Protocol)是一種檔案傳輸通訊協定。這項服務主要是讓使用者在網路上傳輸檔案。方法為登入有提供FTP服務主機，然後將檔案從硬碟(近端機器)傳輸至該主機(遠端機器)，或是將該主機上檔案傳輸至硬碟。,34/48,34,FTP 簡介,下,載FTP軟體,1.開啟 IE,輸入,ftp:/ftp.ocit.edu.tw,2.開啟 upload目錄下載 ffftp.exe(點兩下儲存),3.安裝 ffftp.exe,35/48,35,FTP 簡介,怎样連上FTP：,單位網頁,個人網頁,主機 w3.ocit.edu.tw,sun2.ocit.edu.tw,帳號 單位帳號,僑光email帳號,密碼 單位密碼,僑光email密碼,36/48,36,FrontPage 簡介,37/48,37,FrontPage 簡介,38/48,38,FrontPage 簡介,FrontPage 可分成,網站,及,網頁,模式。,網站模式,作用,是方便我們進行網站內檔案全盤掌控與管理,按下網站鈕可切換至該模式。,按下網頁標籤則可切換到,網頁模式,此模式會顯示網頁內容,也就是我們實際編輯網頁場所。,39/48,39,網站 6 種檢視模式,資料夾檢視模式,遠端網站檢視模式,報告檢視模式,導覽檢視模式,超連結檢視模式,40/48,40,網頁 4 種檢視模式,設計檢視模式,分割檢視模式,程式碼檢視模式,預覽檢視模式,41/48,41,建立新網站,42/48,42,建立新網站,43/48,43,選擇網站範本,對於首次接觸網頁設計人,可從,個人網站,這個範本下手,只要套用佈景主題,再打一些文字進去,就能快速完成個人網站。,若你想白手起家,可選擇,單頁網站,或,空白網站,。前者會建立一個空白首頁,後者則無,但同樣都能够讓你從頭開始規劃網站內容。,44/48,44,指定網站資料夾,FrontPage 會事先在C:My Documents裡建立一個My Webs資料夾,做為網站根目錄,你能够將自己網站指定為子資料夾,比如C:My Websmyweb；也能够將網站放在電腦中其它位置,如D：Test,只要方便自己管理就行了。,45/48,45,輸入文字,請開啟一個.htm 檔,將網頁切換到,設計,檢視模式中：,46/48,46,網頁維護,開啟下載之網頁,利用Frontpage功效編輯,完成後存檔,利用FTP上傳至主機,47/48,47,網站維護注意事項,若為個人網頁，全部網頁檔都必須放在這個www目錄內才能夠被瀏覽。(w3 則無此限制),假如日後要維護您網站，請覆寫已存在舊檔案即可。假如看不到新網頁內容，別忘了按下瀏覽器重新整理按鈕以讓瀏覽器重新取得新網頁內容。,假如您網頁還是無法瀏覽，請再次確認以下重點：,是否將網頁全部放置在www目錄下。,首頁是否命名為index.htm或index.html。,個人網址是否正確，應為www.ocit.edu.tw/帳號。,單位網址是否正確,，應為w3.ocit.edu.tw/帳號,圖形或其它網頁路徑是否為相對路徑、路徑是否正確。,48/48,48,