西安邮电学院 网页制作13课件.pptVIP

網站規劃 網頁設計製作 大　綱 認識一些基本名辭 認識一些基本名詞 網路 認識一些基本名詞 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 標籤之解讀能力　　　　原因：不同廠牌 or 同一廠牌之不同版本 　　　　　【例】閃爍文字、跑馬燈、 Flash… 使用者：螢幕設定　【例】解析度、…. 　　　　　瀏覽器設定【例】IE：檢視 → 字型 　　　　　　　　　　　　　　　工具 → Internet 選項 → 一般 網頁編輯軟體 HTML文件為純文字格式（ASCII碼） 故可用任何文書編輯軟體來編寫 唯存檔時附檔名須為 htm 或 html 等… 簡單的文書軟體（例：記事本） 文書軟體：（例：Word） 簡易網頁標籤編輯軟體（例：熱狗） 瀏覽器所附之編輯器 專業軟體：（例：FrontPage、DreamWeaver 、 GoLive 、 …） 網頁編輯軟體 Microsoft 公司 Frontpage 2002 網頁編輯軟體 Macromedia 公司 DreamWeaver MX 2004 版 Firework MX 2004 版：網頁圖形 Flash MX 2004 版 ： 2D 向量互動動畫 網頁編輯軟體 Adobe 公司 GoLive (CS 版) 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 設計網站 - 導覽 / 介面 網站設計的步驟 - 3 設計網站 - 導覽 / 介面 網站設計的步驟 - 3 設計網站 - 導覽 / 介面 網站設計的步驟 - 3 設計網站 - 導覽 / 介面 網站設計的步驟 -４ 進行實作 網站設計的步驟 - 4b 進行實作 – 美工 網站設計的步驟 – 4b 進行實作 – 美工：選單 網站設計的步驟 -４c 進行實作 – 程式 ／資料庫 網站設計的步驟 -４c 透過後台上稿機制發行季刊 – 後台上稿頁面 【例】工業局 工業自動化及電子化小組 網站設計的步驟 -４c 透過後台上稿機制發行季刊 – 前台呈現頁面 【例】工業局 工業自動化及電子化小組 網站設計的步驟 -４c 進行實作 – 程式 ／資料庫 網站設計的步驟 – 5a 測試與上傳 網站設計的步驟 – 5b 測試與上傳 網站設計的步驟 – 5c 測試與上傳 網站設計的步驟 - 6 登錄／定期維護 HTML 語法 重要觀念 ? HTML 標籤語法 ? 網頁色彩 ? 圖檔 多媒體元件之使用 超連結 網頁基本架構 html 　　head 　　　title標題/title 　　/head 　　body