FrontPage网页设计制作.ppt

FrontPage網頁設計製作網站規劃 大　綱 (1) 操作環境、功能表列 (2) 文字、圖片、表格製作與應用 (3) 網頁編輯軟體 (4) 網站設計的步驟 (5) HTML 語法 重要觀念 (6) Frontpage2002 (7) 網頁/網站上傳 網頁編輯軟體 HTML文件為純文字格式（ASCII碼） 故可用任何文書編輯軟體來編寫 唯存檔時附檔名須為 htm 或 html 等… 簡單的文書軟體（例：記事本） 文書軟體：（例：Word、、WordPad） 簡易網頁標籤編輯軟體（例：XML） 瀏覽器所附之編輯器 專業軟體：（例：FrontPage、DreamWeaver …） 網頁編輯軟體 Microsoft 公司 Frontpage 2002 Macromedia 公司 DreamWeaver MX 2004 版 Firework MX 2004 版：網頁圖形 Flash MX 2004 版 ： 2D 向量互動動畫 網頁編輯軟體 Adobe 公司 Photoshop：網頁圖形 配合伺服器端作業系統的設計語言 Win NT / 2000 ：ASP Active Server Pages 網站設計的步驟 設定網站的主題 規劃網站內容與架構 設計網頁版面配置 進行實作 測試與上傳/定期維護 設定網站的主題 例：駱思安老師的教學網站 規劃網站內容與架構 設計網頁版面配置 首頁頁面配置圖 進行實作 測試與上傳 測試與上傳/定期維護 測試與上傳 HTML 語法 重要觀念 ? HTML 標籤語法 ? 網頁色彩 ? 圖檔 多媒體元件之使用 超連結 HTML標籤語法 HTML標籤語法 HTML 標籤語法 HTML 標籤語法 HTML 標籤語法 範例: HTML 語法 重要觀念 色彩的選擇 網頁整體色彩 背景 文字 3 種超連結 表格色彩 儲存格色彩 HTML 語法 重要觀念 多媒體元件的使用 HTML 語法 重要觀念 圖檔 – GIF or JPG？ HTML 語法 重要觀念 多媒體元件的使用 GIF 動畫檔 gif 聲音檔 mid HTML 語法 重要觀念 超連結的使用 HTML 語法 重要觀念 超連結的使用 HTML 語法 重要觀念 超連結的使用 絕對 / 相對路徑 Frontpage 2002 ? 建置網站 ? 編輯網頁 ? 發送 ? 更新維護 (連結/網頁) Frontpage 的操作介面 Frontpage三種顯示模式 網頁的三種顯示模式 文字的處理 圖像編輯 圖像編輯 – 常用圖片格式 (1) BMP：BMP檔使用十分普遍, 但無法壓縮全彩圖片, 故存檔後檔案會變得很大。 (2) GIF： 是網頁上最常用的圖形格式，可以存成透明圖(把其中一種顏色變透明)、交錯圖(在瀏覽器中慢慢顯現)和動畫(把許多GIF圖片連續重疊成一個檔案), 而且提供「非破壞性壓縮」, 存檔後的體積比原來小很多, 圖片也不會失真。 但GIF檔最多只能儲存256色的色彩數目 , 故處理如照片等色彩數要求較多的圖片時便會失真。 (3) JPG：也是網頁常用的圖形格式, 壓縮率亦十分驚人。但屬於破壞性壓縮, 存檔時會捨棄一些不必要的像素色彩, 因此可能造成圖片失真。JPG支援全彩色彩, 故比GIF較適合處理照片的圖檔。 (4) TIF： 是影像處理界最普遍支援的圖檔格式，因為它可以跨平台。提供非破壞性壓縮，十分適用於印刷輸出（品質比較好）。 其他圖片格式：ＰＮＧ（與ＧＩＦ類似）、ＰＣＤ(柯達相片光碟格式)。 (5) UFO：PhotoImpact 軟體專用格式。 Thmu個人網頁建置 初始值只有一個mail的目錄... 自己新增一個public_html的目錄,如下圖... FTP使用說明 相關教學網站 /frontpage/ 麻辣學園 .tw/~stu90100/ FrontPage教學網站 http://uuu.to/awayschool 老師不在時 圖檔 img src=”logo.gif 聲音檔 bgsound src=“small.mid Flash 檔 embed src=movie.swf 所連結之檔案 一定要一併上傳!!! GIF 最多 256 色 可透明 (89a 格式) 可動畫 (89a 格式) JPG 全彩 失真式的壓縮 HTML HTML URL（Uniform Resource Locator） 取得資料或服務之方式 (Access Method) 與位置。（白話文：用什麼方式，到哪裡取得資料） .tw/ .tw/~distance/distance.htm 協定|主機 or Domain Na