网页制作软体简介.PPT

網站規劃 網頁設計製作 2001年9月 大　綱 認識一些基本名詞 網路 認識一些基本名詞 Internet（網際網路） 一個由許多遵守TCP/IP通訊協定之HOST及子網路所組成的全球性網路。 TCP/IP（傳輸控制協定／網際網路協定） Transmission Control Protocol/Internet Protocol 認識一些基本名詞 Local（本機） LAN （區域網路） WAN（廣域網路） 認識一些基本名詞 Web page（網頁） 具有 超連結 功能的文件，主要是利用HTML語言所寫成。 此種文件除了文字之外，還可以包含圖片、聲音、影片等 多媒體 元素。 Home page（首頁、烘焙雞） (1) 使用者一開啟 瀏覽器 時所連結的網頁 (2) 連結至某一 網站 時所出現的主畫面 認識一些基本名詞 Web site（網站） Internet 上的某部電腦，供組織或個人放置網頁之用。 WWW（World Wide Web、W3） （全球資訊網、萬維網、汪汪汪） 全世界所有網頁文件之集合體。 認識一些基本名詞 Browser（瀏覽器） 能夠 解讀 html 標籤，讓使用者觀看 html 文件之應用程式 　【例】Mosaic　　　Netscape Navigator 　　　　MS IE 　　　　cello 　　　　…… 認識一些基本名詞 HTML（HyperText Markup Language 　　　 超文件標記語言） 為設計超媒體文件（Hypermedia document）之語言。 網頁之呈現效果取決於： 瀏覽器：對 HTML 標籤之解讀能力 　　　　　【例】閃爍文字、跑馬燈… 使用者：螢幕設定　【例】解析度、…. 　　　　　瀏覽器設定【例】IE：檢視 → 字型 　　　　　　　　　　　　　　　工具 → Internet 選項 → 一般 網頁編輯軟體 HTML文件為純文字格式（ASCII碼） 故可用任何文書編輯軟體來編寫 唯存檔時附檔名須為 htm 或 html 等 簡單的文書軟體（例：記事本） 文書軟體：（例：Word） 簡易網頁標籤編輯軟體（例：熱狗） 瀏覽器所附之編輯器 專業軟體：（例：FrontPage、DreamWeaver 、 GoLive） 網頁編輯軟體 Microsoft 公司 Frontpage 2000 網頁編輯軟體 Macromedia 公司 Dreamweaver 4 Firework 4：網頁圖形 Flash 5 ： 2D 向量動畫 網頁編輯軟體 Adobe 公司 GoLive 5.0 ImageReady、Photoshop：網頁圖形 設計語言 配合伺服器端作業系統的設計語言 Win NT / 2000 ：ASP Active Server Pages Unix (Linux)：PHP Personal Home Page Tools 網站設計的步驟 1. 設定網站的主題 2.規劃網站內容與架構 3.設計網頁版面配置/導覽介面 4.進行實作 5.測試與上傳 6.登錄與定期維護 網站設計的步驟 - 1 【例】國科會 數位博物館 設定網站的主題 網站設計的步驟 - 1 【例】文建會 兒童文化館 設定網站的主題 網站設計的步驟 - 2 規劃網站內容與架構 網站設計的步驟 - 3 設計網頁版面配置 網站設計的步驟 - 3 設計網站 - 導覽 / 介面 網站設計的步驟 -４ 進行實作 網站設計的步驟 - 4b 進行實作 – 美工 網站設計的步驟 – 4b 進行實作 – 美工：選單 網站設計的步驟 -４c 進行實作 – 程式 ／資料庫 網站設計的步驟 -４c 進行實作 – 程式 ／資料庫 網站設計的步驟 – 5a 測試與上傳 網站設計的步驟 – 5b 測試與上傳 網站設計的步驟 – 5c 測試與上傳 網站設計的步驟 - 6 登錄／定期維護 HTML 語法 重要觀念 ? HTML 標籤語法 ? 網頁色彩 ? 圖檔 多媒體元件之使用 超連結 網頁基本架構 html 　　head 　　　title標題/title 　　/head 　　body 　　/body /html HTML 標籤語法 以標籤名稱開始 同一標籤可以有許多屬性 屬性順序先後無關 不設屬性則呈現預設值 尾標籤只需標籤名稱即可 色彩的選擇 網頁整體色彩 背景 文字 3 種超連結 表格色彩 儲存格色彩 色彩的選擇 色光為 RGB 模式 全彩 28 x 28 x 28=16,777,216 索引色盤 Win 系統色盤 (256色) 色彩的選擇 網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0~F) 色彩的選擇 216 種網頁安全色彩 00, 33, 66, 99,