1 / 48

僑光行政人員訓練課程

僑光行政人員訓練課程. Frontpage 網頁維護. 鄭瓊芬 (cfcheng@ocit.edu.tw) Oct. 20, 2004. WWW 簡介. 「 WWW 」 (Word Wide Web) 全球資訊網是 1989 年歐洲高能粒子協會一個研究小組所開發的一種全新的 Internet 服務， WWW 能夠在網路上傳送圖片、文字、影像、聲音等多媒體資料，由 Tim Berners Lee 領導的小組所開發的主從架構分散式網路服務系統。. WWW 的基礎 - 名詞解說. WWW 的架構 - 說明. WWW 全球資訊網屬於一種主從架構的系統。

gazit
Download Presentation

僑光行政人員訓練課程

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 僑光行政人員訓練課程 Frontpage 網頁維護 鄭瓊芬 (cfcheng@ocit.edu.tw) Oct. 20, 2004

  2. WWW簡介 • 「WWW」(Word Wide Web)全球資訊網是1989年歐洲高能粒子協會一個研究小組所開發的一種全新的Internet服務，WWW能夠在網路上傳送圖片、文字、影像、聲音等多媒體資料，由Tim Berners Lee領導的小組所開發的主從架構分散式網路服務系統。

  3. WWW的基礎-名詞解說

  4. WWW的架構-說明 • WWW全球資訊網屬於一種主從架構的系統。 • 主端是「伺服端」(Server)：指的是Web伺服器，在伺服器上儲存著HTML文件等網頁文件和圖片等多媒體資料。 • 從端是「客戶端」(Client)：使用者執行瀏覽程式的電腦，負責和伺服器溝通和讀取伺服器的資料，也就是HTML文件。

  5. WWW的架構-圖例 • Web伺服器儲存客戶端請求的資料，以微軟來說就是「IIS」（Internet Information Server），從端是使用瀏覽程式顯示伺服端文件，微軟的Internet Explorer是目前巿場佔有率最高的瀏覽程式。

  6. WWW的架構-HTTP • WWW採用「HTTP」（Hypertext Transfer Protocol）通訊協定將伺服器的資料傳送到瀏覽程式，伺服器在架構上處於被動角色，等待使用者藉著瀏覽程式提出瀏覽的HTTP請求，Web伺服器針對請求進行檢查，如果沒有問題就開始傳輸資料，傳輸的資料為HTML文件和相關的多媒體檔案。

  7. 網站運作的概念

  8. 網頁的製作流程

  9. 網頁與首頁 • 何謂網頁？ • 透過瀏覽器在 WWW 上所看到的每一個畫面都是網頁 (Web Page) • 何謂 Home Page (首頁)？ • 進入一個網站時所看到的第一個網頁 • 功能：負責導覽及介紹最新消息

  10. 網站就是網頁的集合 • 設計者先把整個網站架構規劃好, 然後再分別製作出不同的網頁, 讓網頁間彼此相連。這樣完整的架構就稱為網站

  11. 網站放在哪裡 • 一般網站放置在稱為伺服器(Server)的電腦中, 除了伺服器在維修或壞掉時關機, 其餘時間都可瀏覽 • 除自行架設伺服器外, 一般個人與小企業、工作室, 可向 ISP (Internet Service Provider 網路服務提供者) 申請, 在他們的伺服器上租一塊空間放置網站

  12. 網站與伺服器

  13. 網頁技術 • 靜態網頁網頁是由HTML所撰寫，無論在何時何地瀏覽，皆呈現相同的畫面與內容，且使用者僅能瀏覽，無法提供訊息給網站，讓網站回應使用者的需求。 • 動態網頁網頁是由 JavaScript, VBScript, ASP, PHP, JSP所撰寫，讓網頁能夠依照不同的情況做出動態回應 • 網頁美工在網頁中加入圖檔及動畫等，常用之軟體為PhotoImpact, Photoshop, Flash.

  14. 原始的文件內容 (執行『檢視/原始檔』命令) 在瀏覽程式中所看到的內容 什麼是 HTML

  15. HTML 文件結構 • 標籤(tag) • 由小於 “< “及大於 “>”符號組成 • 一般文字 • Ex：<title>旗標出版公司</title>

  16. 基本的標籤 • HTML 文件最基本的標籤： 1.<HTML></HTML> 文件的開始與結束 2.<HEAD></HEAD> 標示文件資訊 3.<BODY></BODY> 標示本文 4.<TITLE></TITLE> 文件標題

  17. HTML 基本架構

  18. 網頁的組成元素 • 文字 • 圖片 • 超連結 • 其他元素

  19. 網頁文字 • 網頁元素中最基本、最重要的內容 • 優勢：檔案小、速度快 • 所佔的檔案空間非常小(一個中文字 2 Bytes) • 進入一個純文字的網頁時, 大約只要 1、2 秒鐘就可以看到整篇網頁 • 可利用 HTML 的語法以及新的 CSS 樣式表來改變色彩、格式與大小等屬性, 滿足不同的設計需求

  20. 變換網頁文字的限制 • 瀏覽者的電腦裡若沒有網頁中使用的字體, 瀏覽到該網頁時, 就只能以系統預設的字型顯示 • 解決方法可將把網頁文字做成圖形, 不過檔案大小會增大很多

  21. 關於網頁圖片 • 常應用在 WWW 上的圖形有 JPG、GIF 和 PNG幾種格式 • 這些格式除了具有壓縮比例高的特性之外, 也具有跨平台的優點 • 不管瀏覽者用的是什麼作業系統, 都能直接在瀏覽器上看到這幾種格式的圖片

  22. 網頁圖片的應用

  23. 關於超連結 • 點選頁面上超連結可以： • 像穿越任意門一般迅速到達要去的地方 • 下載檔案 • 寄 e-mail 給網站的主人... • 網頁中不論是文字或圖形都可以加上超連結標記

  24. 超連結的種類 • 連往別的網站的外部超連結 • 連結自己網站內部 Web Page 的內部超連結 • 連結同一頁面中部分內容的書籤 • 連至檔案以下載之的下載超連結 • 可以寄 E-mail 的 E-mail 超連結 • 按下或滑鼠移上時可以啟動程式產生特效的超連結

  25. 其他元素 • 表格、表單 • 聲音、影像、多媒體 • 程式特效 • 其他各類多媒體 Plug-in

  26. 表格、表單 • 表格在網頁中的使用： • 可以做為一般表格使用 • 無邊框的表格常被利用來做網頁整體排版 • 表單在網頁中的使用： • 表單是網頁與伺服端程式溝通的主要工具 • 討論區、留言版、會員登錄等均常使用表單功能

  27. 聲音、影像、多媒體在網頁的應用 • 設定背景音樂 • 利用 Active X 控制項或其他方式將音樂和影像、多媒體 (如 Flash 動畫…等) 插入網頁中播放

  28. 程式特效 • 利用 Script 程式或是 Java Applet之類的程式可以在網頁中製造各類效果 • 常見的特效：跟著滑鼠移動的文字、水中倒影…

  29. 網頁的設計考量 • 不同瀏覽器的觀看效果 • 螢幕解析度與色彩顯示 • 字型與語系的設定 • 考量網路的傳輸速度

  30. 不同的瀏覽器 • Netscape和 Internet Explorer所支援的 HTML標籤就有些許不同, 因此在網頁中所製作的效果可能會因為瀏覽者所使用的瀏覽器不同而呈現不一樣的效果 • 使用者使用的瀏覽器設定也會影響網頁的外觀

  31. 螢幕解析度 • 在高螢幕解析度下設計的網頁, 在低解析度螢幕上觀看時, 會造成捲動好幾次頁面才能看到原設計的網頁 • 目前來說, 800 X 600 解析度的設定值應該是符合最多人的需求 • 可以在首頁中宣告一下最佳的瀏覽解析度, 讓瀏覽者有個依據

  32. 字型與語系 • 網頁製作時要設定對應的語系編碼 例如, 做繁體中文網頁就要將網頁的語系設為 Big-5 繁體中文, 這樣才能避免網頁中的文字出現亂碼 • 設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片

  33. 網路的傳輸速率 • 哪些網頁內容會影響網路的傳輸速率？ • 含有超大圖檔 • VRML 虛擬實境 • 影音多媒體檔案... • 在設計網頁時, 除非必要, 不然別放入過於龐大的檔案

  34. FTP 簡介 • FTP(File Transfer Protocol)是一種檔案傳輸通訊協定。這項服務主要是讓使用者在網路上傳輸檔案。方法為登入有提供FTP服務的主機，然後將檔案從硬碟(近端機器)傳輸至該主機(遠端機器)，或是將該主機上的檔案傳輸至硬碟。

  35. FTP 簡介 下載FTP軟體 1.開啟 IE, 輸入ftp://ftp.ocit.edu.tw 2. 開啟 upload目錄下載 ffftp.exe( 點兩下儲存) 3. 安裝 ffftp.exe

  36. FTP 簡介 如何連上FTP： 單位網頁 個人網頁 • 主機w3.ocit.edu.tw rs2.ocit.edu.tw • 帳號 單位帳號 僑光email帳號 • 密碼 單位密碼 僑光email密碼

  37. FrontPage 簡介

  38. FrontPage 簡介

  39. FrontPage 簡介 • FrontPage 可分成網站及網頁模式。 • 網站模式的作用, 是方便我們進行網站內檔案的全盤掌控與管理, 按下網站鈕可切換至該模式。 • 按下網頁標籤則可切換到網頁模式, 此模式會顯示網頁的內容, 也就是我們實際編輯網頁的場所。

  40. 網站的 6 種檢視模式 • 『資料夾』檢視模式 • 『遠端網站』檢視模式 • 『報告』檢視模式 • 『導覽』檢視模式 • 『超連結』檢視模式

  41. 網頁的 4 種檢視模式 • 『設計』檢視模式 • 『分割』檢視模式 • 『程式碼』檢視模式 • 『預覽』檢視模式

  42. 建立新的網站

  43. 建立新的網站

  44. 選擇網站範本 • 對於初次接觸網頁設計的人, 可從個人網站這個範本下手, 只要套用佈景主題, 再打一些文字進去, 就能快速完成個人網站。 • 若你想白手起家, 可選擇單頁網站或空白網站。前者會建立一個空白的首頁, 後者則無, 但同樣都可以讓你從頭開始規劃網站內容。

  45. 指定網站資料夾 • FrontPage 會事先在「C:\My Documents\」裡建立一個「My Webs」資料夾, 做為網站的根目錄, 你可以將自己的網站指定為子資料夾, 例如「C:\My Webs\myweb」；也可以將網站放在電腦中的其它位置, 如「D：\Test」, 只要方便自己管理就行了。

  46. 輸入文字 請開啟一個 .htm 檔, 將網頁切換到設計檢視模式中：

  47. 網頁維護 • 開啟下載之網頁 • 利用Frontpage功能編輯 • 完成後存檔 • 利用FTP上傳至主機

  48. 網站維護注意事項 • 若為個人網頁，所有的網頁檔都「必須」放在這個www目錄內才能夠被瀏覽。 (w3 則無此限制) • 如果日後要維護您的網站，請覆寫已存在的舊檔案即可。如果看不到新網頁的內容，別忘了按下瀏覽器「重新整理」按鈕以讓瀏覽器重新取得新網頁的內容。 • 如果您的網頁還是無法瀏覽，請再次確認以下重點： • 是否將網頁全部放置在www目錄下。 • 首頁是否命名為index.htm或index.html。 • 個人網址是否正確，應為http://rs2.ocit.edu.tw/~帳號。 • 單位網址是否正確 ，應為http://w3.ocit.edu.tw/帳號 • 圖形或其它網頁路徑是否為「相對路徑」、路徑是否正確。

More Related