西安邮电学院网页制作.ppt

網站規劃 網頁設計製作 主講人 沈宗南世新大學海外進修學院E mail jason mmc shu edu tw 世新大學 王秀芬 沈宗南 2 大綱 2 網頁編輯軟體 3 網站設計的步驟 4 HTML語法 重要觀念 1 認識一些基本名辭 5 Frontpage 6 網頁 網站上傳 認識一些基本名辭 世新大學 王秀芬 沈宗南 4 認識一些基本名詞 網路 BitNet NJE協定 其他 Internet TCP IP協定 世新大學 王秀芬 沈宗南 5 認識一些基本名詞 Internet 網際網路 一個由許多遵守TCP IP通訊協定之HOST及子網路所組成的全球性網路 TCP IP 傳輸控制協定 網際網路協定 TransmissionControlProtocol InternetProtocol 可參考 電腦 網路辭典 世新大學 王秀芬 沈宗南 6 認識一些基本名詞 Local 本機 LAN 區域網路 WAN 廣域網路 遠端 Remote 世新大學 王秀芬 沈宗南 7 認識一些基本名詞 Webpage 網頁 具有超連結功能的文件 主要是利用HTML語言所寫成 此種文件除了文字之外 還可以包含圖片 聲音 影片等多媒體元素 Homepage 首頁 烘焙雞 1 使用者一開啟瀏覽器時所連結的網頁 2 連結至某一網站時所出現的主畫面 世新大學 王秀芬 沈宗南 8 認識一些基本名詞 Website 網站 Internet上的某部電腦 供組織或個人放置網頁之用 WWW WorldWideWeb W3 全球資訊網 萬維網 汪汪汪 全世界所有網頁文件之集合體 世新大學 王秀芬 沈宗南 9 Browser 瀏覽器 能夠解讀html標籤 讓使用者觀看html文件之應用程式 例 MosaicNetscapeNavigatorMSIECello 認識一些基本名詞 世新大學 王秀芬 沈宗南 10 HTML HyperTextMarkupLanguage超文件標記語言 為設計超媒體文件 Hypermediadocument 之語言 網頁之呈現效果取決於 瀏覽器 對HTML標籤之解讀能力原因 不同廠牌or同一廠牌之不同版本 例 閃爍文字 跑馬燈 Flash 使用者 螢幕設定 例 解析度 瀏覽器設定 例 IE 檢視 字型工具 Internet選項 一般 認識一些基本名詞 Xmakeup 世新大學 王秀芬 沈宗南 11 網頁編輯軟體 HTML文件為純文字格式 ASCII碼 故可用任何文書編輯軟體來編寫唯存檔時附檔名須為htm或html等 簡單的文書軟體 例 記事本 文書軟體 例 Word 簡易網頁標籤編輯軟體 例 熱狗 瀏覽器所附之編輯器專業軟體 例 FrontPage DreamWeaver GoLive 世新大學 王秀芬 沈宗南 12 網頁編輯軟體 Microsoft公司Frontpage2002 他們MS家的Word和Powerpoint也可以很方便地存成網頁不過 世新大學 王秀芬 沈宗南 13 網頁編輯軟體 Macromedia公司DreamWeaverMX2004版FireworkMX2004版 網頁圖形FlashMX2004版 2D向量互動動畫 世新大學 王秀芬 沈宗南 14 網頁編輯軟體 Adobe公司GoLive CS版 ImageReady Photoshop 網頁圖形 tw 世新大學 王秀芬 沈宗南 15 設計語言 配合伺服器端作業系統的設計語言WinNT 2000 ASPActiveServerPagesUnix Linux PHPPersonalHomePageTools 註 Linux 使用人數超過Microsoft希望您知道的作業系統 ByJulieC Meloni 網站設計的步驟 1 設定網站的主題2 規劃網站內容與架構3 設計網頁版面配置 導覽介面4 進行實作5 測試與上傳6 登錄與定期維護 世新大學 王秀芬 沈宗南 17 網站設計的步驟 1 例 國科會數位博物館設定網站的主題 http www sinica edu tw pingpu 世新大學 王秀芬 沈宗南 18 網站設計的步驟 1 例 文建會兒童文化館設定網站的主題 http www cca gov tw children 世新大學 王秀芬 沈宗南 19 網站設計的步驟 2 規劃網站內容與架構 世新大學 王秀芬 沈宗南 20 網站設計的步驟 3 設計網頁版面配置 首頁頁面配置圖 一般頁面配置圖 世新大學 王秀芬 沈宗南 21 網站設計的步驟 3 設計網站 導覽 介面 WhereIam WhereIcango 世新大學 王秀芬 沈宗南 22 網站設計的步驟 3 設計網站 導覽 介面 世新大學 王秀芬 沈宗南 23 網站設計的步驟 3 設計網站 導覽 介面 世新大學 王秀芬 沈宗南 24 網站設計的步驟 3 設計網站 導覽 介面 91 下 世新大學 王秀芬 沈宗南 25 網站設計的步驟 進行實作 其他 世新大學 王秀芬 沈宗南 26 網站設計的步驟 4b 進行實作 美工 世新大學 王秀芬 沈宗南 27 網站設計的步驟 4b 進行實作 美工 選單 選單設計成太空梭造型 登月史 世新大學 王秀芬 沈宗南 28 網站設計的步驟 c 進行實作 程式 資料庫 世新大學 王秀芬 沈宗南 29 網站設計的步驟 c 透過後台上稿機制發行季刊 後台上稿頁面 例 工業局工業自動化及電子化小組 世新大學 王秀芬 沈宗南 30 網站設計的步驟 c 透過後台上稿機制發行季刊 前台呈現頁面 例 工業局工業自動化及電子化小組 世新大學 王秀芬 沈宗南 31 網站設計的步驟 c 進行實作 程式 資料庫 五年後 世界上將不會再有所謂的網際網路公司 因為所有的組織都將成為網際網路組織 AndyGrove Intel總裁 But 資料庫的興起 美工的專業化 有人說 世新大學 王秀芬 沈宗南 32 網站設計的步驟 5a 測試與上傳 頻寬 速度 連結 程式錯誤 來去goto影音教學虛擬教室 世新大學 王秀芬 沈宗南 33 網站設計的步驟 5b 測試與上傳 其實 製作前就應先考慮日後的上傳伺服器 首頁檔名 index htm index html default asp 主機功能 計數器 CGI 影音伺服器 頻寬 容量 世新大學 王秀芬 沈宗南 34 網站設計的步驟 5c 測試與上傳 編輯修改 存檔 上傳 重新整理 瀏覽器 網頁編輯軟體 世新大學 王秀芬 沈宗南 35 網站設計的步驟 6 登錄 定期維護 定期維護 登錄搜尋引擎 HTML語法 重要觀念 HTML標籤語法 網頁色彩 圖檔多媒體元件之使用超連結 世新大學 王秀芬 沈宗南 37 網頁基本架構 標題 主體文件區 頭 世新大學 王秀芬 沈宗南 38 HTML標籤語法 以標籤名稱開始同一標籤可以有許多屬性屬性順序先後無關不設屬性則呈現預設值尾標籤只需標籤名稱即可 我 又聰明又美麗又有知識又常看電視 世新大學 王秀芬 沈宗南 39 色彩的選擇 網頁整體色彩背景文字3種超連結表格色彩儲存格色彩 世新大學 王秀芬 沈宗南 40 色彩的選擇 色光為RGB模式全彩28x28x28 16 777 216 索引色盤Win系統色盤 256色 世新大學 王秀芬 沈宗南 41 色彩的選擇 網頁的色彩標示採 RRGGBB 16進位制表示法 0 F 000000 999999 cccccc FFFFFF 0000FF 00FF00 FF0000 世新大學 王秀芬 沈宗南 42 色彩的選擇 216種網頁安全色彩00 33 66 99 CC FF 世新大學 王秀芬 沈宗南 43 多媒體元件的使用 圖檔聲音檔Flash檔 所連結之檔案一定要一併上傳 世新大學 王秀芬 沈宗南 44 圖檔 GIForJPG GIF最多256色可透明 89a格式 可動畫 89a格式 JPG全彩失真式的壓縮 世新大學 王秀芬 沈宗南 45 圖檔 GIForJPG 替代性建議 以儲存格色彩搭配來取代圖檔 世新大學 王秀芬 沈宗南 46 多媒體元件的使用 GIF動畫檔gif聲音檔mid 要聽音樂 請一併下載birdsnbees mid 世新大學 王秀芬 沈宗南 47 多媒體元件的使用 Flash動畫檔首頁小動畫 orthodot orthodot au html網頁選單運用 兵馬俑獨立動畫 I llHaveNoDreamsTonight 2 146KB 本檔較大 需耐心等候 最後的14行詩 587KB 世新大學 王秀芬 沈宗南 48 超連結的使用 1 錨點Anchor 文字或圖形 世新大學 王秀芬 沈宗南 49 超連結的使用 2 URL UniformResourceLocator 取得資料或服務之方式 AccessMethod 與位置 白話文 用什麼方式 到哪裡取得資料 tw http www shu edu tw distance distance htm協定 主機 DomainName 目錄 檔案 註 主機常以其所提供之服務來命名 以利大眾識別 世新大學 王秀芬 沈宗南 50 超連結的使用 3 與同一網站的文件作連結 例 最新消息與其他HTTP網站做連結 例 世新大學與非HTTP網站做連結 例 世新FTP站E mail連結 例 建議與意見 世新大學 王秀芬 沈宗南 51 超連結的使用 4 書籤 與同一份文件中的其他章節作連結 例 這是起點這是目的地 世新大學 王秀芬 沈宗南 52 超連結的使用 5 非網頁的連結 例 這是Word檔這是簡報檔這是圖檔這是遊戲 只要寫好連結要連什麼就連什麼 世新大學 王秀芬 沈宗南 53 絕對 相對路徑 絕對路徑一律自網站或根目錄起 例 http www shu edu tw 相對路徑以該檔所在位置為基準點同一層 例 test htm上一層 例 下一層 例 images logo gif 要像螞蟻慢慢爬不能用飛的 世新大學 王秀芬 沈宗南 54 絕對 相對路徑 DearFlash 我有去找過你可是你不在那兒 你換了名字嗎 搬家了 還是根本就沒你這個人 世新大學 王秀芬 沈宗南 55 建議 善用表格 對齊 留白 注意 相對寬度絕對寬度 世新大學 王秀芬 沈宗南 56 建議 儘量減少日後維護困難 建立資料夾 將檔案分門別類存放依單元 導覽架構 網站地圖 依檔案格式 例 images資料夾依維護人員存取權限 一般資料更新 程式維護 依 一致的命名規則Unix作業系統區分檔名大小寫附檔名 htm和html不同 Frontpage 建置網站 編輯網頁 發送 更新維護 連結 網頁 世新大學 王秀芬 沈宗南 58 Frontpage的操作介面 世新大學 王秀芬 沈宗南 59 網頁的三種顯示模式 一般模式HTML模式預覽模式 世新大學 王秀芬 沈宗南 60 網頁的三種顯示模式 一般模式 所見即所得 用起來很方便不用記標籤喔 和Word長的好像 世新大學 王秀芬 沈宗南 61 網頁的三種顯示模式 HTML模式 原始碼 比 一般模式 還強喔 和 記事本 好像喔 世新大學 王秀芬 沈宗南 62 網頁的三種顯示模式 預覽模式 作不得準喔 最好用瀏覽器看但最後還是以上傳到伺服器後為準Ex 計數器 資料庫 世新大學 王秀芬 沈宗南 63 設計網頁 建立網站 設計網頁 建立網站須考慮整體導覽架構佈景主題共用邊框框架頁樣式表 世新大學 王秀芬 沈宗南 64 建立網站 指定位置 世新大學 王秀芬 沈宗南 65 是否要採 框架頁 設計 選擇適合的分割方式 世新大學 王秀芬 沈宗南 66 是否要採 框架頁 設計 目標框架 叮嚀 不宜將他人網站開啟在自己頁框中 世新大學 王秀芬 沈宗南 67 網站 導覽列 單選 可加選 網頁 網站上傳 直接在Frontpage發送 使用FTP軟體上傳發送 世新大學 王秀芬 沈宗南 69 網頁 網站上傳 為山九仞 最後一簣讓全世界都看得到 世新大學 王秀芬 沈宗南 70 本校注意事項 本校為Unix作業系統大小寫視為不同 例 abc htm Abc htm不同放置網頁的資料夾為public html 注意 是 不是 cc主機 首頁檔名為index html或index htmstudent主機 首頁檔名為index html每個子資料夾之首頁檔名亦同 世新大學 王秀芬 沈宗南 71 兩種將作品放上網站的方式 直接在Frontpage發送 使用FTP軟體上傳 我採用了Frontpage一些特有功能 我喜歡讓它自動幫我打點 我厲害 知道要傳哪些檔 這種較適合我 世新大學 王秀芬 沈宗南 72 直接在Frontpage發送 如果是在Frontpage中 以建置網站方式製作網頁 則建議直接以此方式發送理由 自動修復連結不會丟三落四 佈景主題 動態顯示按鈕 步驟 檔案 發送web 世新大學 王秀芬 沈宗南 73 Frontpage發送注意事項 請務必指定好資料夾 例 public