侨光行政人员训课程

1、1僑光行政人員訓練課程frontpage 網頁維護鄭瓊芬鄭瓊芬 (.tw)oct. 20, 20042www簡介www(word wide web)全球資訊網是1989年歐洲高能粒子協會一個研究小組所開發的一種全新的internet服務，www能夠在網路上傳送圖片、文字、影像、聲音等多媒體資料，由tim berners lee領導的小組所開發的主從架構分散式網路服務系統。3www的基礎-名詞解說常常 見見 的的 名名 詞詞說 明首 頁英 文 名 稱 為h o m ep ag e， 指 的 為 連 接w e b 伺 服 器 後 下 載 的 第 一 頁 文件 、 網

2、頁 或 稱 為 w eb 畫 面 、 h t m l 文 件h t m l全 名h yp e rt ex t m ark u p l an g u ag e ， 屬 於 一 種 文 件 編 排 的 語 言 ， 在瀏 覽 程 式 看 到 的 網 頁 內 容 就 是 使 用 此 語 言 所 製 作u r l s全 名u n ifo rm r eso u rce l o catio n s ， 這 是w w w的 萬 用 資 源 定 位器 ， 可 以 用 來 連 結 網 站 和 其 它in tern et資 源 ， 其 格 式 為【 h ttp :/w w w .h in et.n et】 以 :/

3、 符 號 分 隔 ， 符 號 前 為 通 訊 協 定 ，後 為 伺 服 器 的 網 域 名 稱h t t p全 名 h yp e rtex t t ra n sp o rt p ro to co l 為 w w w 使 用 的 標 準 通 訊 協 定 ，w e b 伺 服 器 的 資 料 傳 送 都 是 透 過 這 個 通 訊 協 定 進 行 資 料 的 交 換超 文 件英 文 名 稱h yp erte x t為 一 種 文 件 閱 讀 方 式 ， 透 過 超 連 結 的 導 引 ， 可以 在 閱 讀 文 件 內 容 時 ， 隨 時 檢 視 相 關 連 的 資 料超 媒 體英 文 名 稱h y

4、p erm ed ia基 本 上 和 超 文 件 非 常 相 似 ， 只 是 原 來 文 字 的超 連 結 改 為 圖 片 、 聲 音 或 影 像 動 畫 等 多 媒 體 元 件4 www的架構-說明www全球資訊網屬於一種主從架構的系統。l主端是伺服端(server)：指的是web伺服器，在伺服器上儲存著html文件等網頁文件和圖片等多媒體資料。l從端是客戶端(client)：使用者執行瀏覽程式的電腦，負責和伺服器溝通和讀取伺服器的資料，也就是html文件。5 www的架構-圖例web伺服器儲存客戶端請求的資料，以微軟來說就是iis（internet information server），

5、從端是使用瀏覽程式顯示伺服端文件，微軟的internet explorer是目前巿場佔有率最高的瀏覽程式。6 www的架構-httpwww採用http（hypertext transfer protocol）通訊協定將伺服器的資料傳送到瀏覽程式，伺服器在架構上處於被動角色，等待使用者藉著瀏覽程式提出瀏覽的http請求，web伺服器針對請求進行檢查，如果沒有問題就開始傳輸資料，傳輸的資料為html文件和相關的多媒體檔案。7網站運作的概念8 網頁的製作流程9網頁與首頁何謂網頁？l透過瀏覽器在 www 上所看到的每一個畫面都是網頁網頁 (web page)何謂 home page (首頁)？l進入一

6、個網站時所看到的第一個網頁l功能：負責導覽及介紹最新消息10網站就是網頁的集合設計者先把整個網站架構規劃好, 然後再分別製作出不同的網頁, 讓網頁間彼此相連。這樣完整的架構就稱為網站網站11網站放在哪裡一般網站放置在稱為伺服器伺服器 (server) 的電腦中, 除了伺服器在維修或壞掉時關機, 其餘時間都可瀏覽除自行架設伺服器外, 一般個人與小企業、工作室, 可向 isp (internet service provider 網路服務提供者網路服務提供者) 申請, 在他們的伺服器上租一塊空間放置網站12 網站與伺服器13網頁技術靜態網頁靜態網頁網頁是由html所撰寫，無論在何時何地瀏覽，皆呈現

7、相同的畫面與內容，且使用者僅能瀏覽，無法提供訊息給網站，讓網站回應使用者的需求。動態網頁動態網頁網頁是由 javascript, vbscript, asp, php, jsp所撰寫，讓網頁能夠依照不同的情況做出動態回應網頁美工網頁美工在網頁中加入圖檔及動畫等，常用之軟體為photoimpact, photoshop, flash.14什麼是什麼是 html在瀏覽程式中所看到的內容原始的文件內容(執行檢視檢視/ /原始檔原始檔命令)15html 文件結構文件結構標籤 (tag)l由小於 “” 符號組成一般文字一般文字ex：旗標出版公司16基本的標籤html 文件最基本的標籤：1. 文件的開始與

8、結束2. 標示文件資訊3. 標示本文4. 文件標題17html 基本架構18網頁的組成元素文字圖片超連結其他元素19網頁文字網頁元素中最基本、最重要的內容優勢：檔案小、速度快l所佔的檔案空間非常小 (一個中文字 2 bytes)l進入一個純文字的網頁時, 大約只要 1、2 秒鐘就可以看到整篇網頁可利用 html 的語法以及新的 css 樣式表來改變色彩、格式與大小等屬性, 滿足不同的設計需求20變換網頁文字的限制瀏覽者的電腦裡若沒有網頁中使用的字體, 瀏覽到該網頁時, 就只能以系統預設的字型顯示解決方法可將把網頁文字做成圖形, 不過檔案大小會增大很多21關於網頁圖片常應用在 www 上的圖形有

9、 jpg、gif 和 png 幾種格式這些格式除了具有壓縮比例高的特性之外, 也具有跨平台的優點不管瀏覽者用的是什麼作業系統, 都能直接在瀏覽器上看到這幾種格式的圖片22網頁圖片的應用23關於超連結點選頁面上超連結可以：l像穿越任意門一般迅速到達要去的地方l下載檔案l寄 e-mail 給網站的主人.網頁中不論是文字或圖形都可以加上超連結標記24超連結的種類連往別的網站的外部超連結連結自己網站內部 web page 的內部超連結連結同一頁面中部分內容的書籤連至檔案以下載之的下載超連結可以寄 e-mail 的 e-mail 超連結按下或滑鼠移上時可以啟動程式產生特效的超連結25其他元素表格、表單聲

10、音、影像、多媒體程式特效其他各類多媒體 plug-in26表格、表單表格在網頁中的使用：l可以做為一般表格使用l無邊框的表格常被利用來做網頁整體排版表單在網頁中的使用：l表單是網頁與伺服端程式溝通的主要工具l討論區、留言版、會員登錄等均常使用表單功能27聲音、影像、多媒體在網頁的應用設定背景音樂利用 active x 控制項或其他方式將音樂和影像、多媒體 (如 flash 動畫等) 插入網頁中播放28程式特效利用 script 程式或是 java applet 之類的程式可以在網頁中製造各類效果常見的特效：跟著滑鼠移動的文字、水中倒影29網頁的設計考量不同瀏覽器的觀看效果螢幕解析度與色彩顯示字

11、型與語系的設定考量網路的傳輸速度30不同的瀏覽器netscape 和 internet explorer 所支援的 html 標籤就有些許不同, 因此在網頁中所製作的效果可能會因為瀏覽者所使用的瀏覽器不同而呈現不一樣的效果使用者使用的瀏覽器設定也會影響網頁的外觀31螢幕解析度在高螢幕解析度下設計的網頁, 在低解析度螢幕上觀看時, 會造成捲動好幾次頁面才能看到原設計的網頁目前來說, 800 x 600 解析度的設定值應該是符合最多人的需求可以在首頁中宣告一下最佳的瀏覽解析度, 讓瀏覽者有個依據32字型與語系網頁製作時要設定對應的語系編碼 例如, 做繁體中文網頁就要將網頁的語系設為 big-5 繁

12、體中文, 這樣才能避免網頁中的文字出現亂碼設計網頁時, 最好少用特殊字型, 如果一定要用, 那麼不妨把它作成圖片33網路的傳輸速率哪些網頁內容會影響網路的傳輸速率？l含有超大圖檔lvrml 虛擬實境l影音多媒體檔案.在設計網頁時, 除非必要, 不然別放入過於龐大的檔案34ftp 簡介 ftp(file transfer protocol)是一種檔案傳輸通訊協定。這項服務主要是讓使用者在網路上傳輸檔案。方法為登入有提供ftp服務的主機，然後將檔案從硬碟(近端機器)傳輸至該主機(遠端機器)，或是將該主機上的檔案傳輸至硬碟。 35ftp 簡介下載ftp軟體1. 開啟 ie, 輸入 ftp:/ftp.

13、.tw 2. 開啟 upload目錄 下載 ffftp.exe( 點兩下儲存)3. 安裝 ffftp.exe36ftp 簡介如何連上ftp： 單位網頁 個人網頁主機 .tw .tw帳號 單位帳號 僑光email帳號密碼 單位密碼 僑光email密碼37frontpage 簡介38frontpage 簡介39frontpage 簡介frontpage 可分成網站及網頁模式。網站模式的作用, 是方便我們進行網站內檔案的全盤掌控與管理, 按下網站鈕可切換至該模式。按下網頁標籤則可切換到網頁模式, 此模式會顯示網頁的內容, 也就是我們實際

14、編輯網頁的場所。40網站的 6 種檢視模式資料夾檢視模式遠端網站檢視模式報告檢視模式導覽檢視模式超連結檢視模式41網頁的 4 種檢視模式設計檢視模式分割檢視模式程式碼檢視模式預覽檢視模式42建立新的網站43建立新的網站44選擇網站範本對於初次接觸網頁設計的人, 可從個人網站這個範本下手, 只要套用佈景主題, 再打一些文字進去, 就能快速完成個人網站。若你想白手起家, 可選擇單頁網站或空白網站。前者會建立一個空白的首頁, 後者則無, 但同樣都可以讓你從頭開始規劃網站內容。45指定網站資料夾frontpage 會事先在c:my documents裡建立一個my webs資料夾, 做為網站的根目錄, 你可以將自己的網站指定為子資料夾, 例如c:my websmyweb；也可以將網站放在電腦中的其它位置, 如d：test, 只要方便自己管理就行了。46輸入文字請開啟一個 .htm 檔, 將網頁切換到設計檢視模式中：47網頁維護開啟下載之網頁利用frontpage功能編輯完成後存檔利用ftp上傳至主機48網站維護注意事項若為個人網頁，所有的網頁檔都必須放在這個www目錄內才能夠被瀏覽。 (w3 則無此限制)如果日後要維