僑光行政人員訓(xùn)練課程.ppt

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