1、網頁設計,2009 年 2月李筱瑜,2,大綱,2. 網頁編輯軟體,3. 網站設計的步驟,4. HTML 語法/重要觀念,1. 認識一些基本名辭,5. Frontpage,認識一些基本名辭,4,認識一些基本名詞,網路,其他.,Internet (TCP/IP 協定),5,認識一些基本名詞,Internet（網際網路）一個由許多遵守TCP/IP通訊協定之HOST及子網路所組成的全球性網路。 TCP/IP（傳輸控制協定網際網路協定）Transmission Control Protocol/Internet Protocol,可參考：電腦/網路辭典,6,認識一些基本名詞,Local（本機）LAN （
2、區域網路）WAN（廣域網路）,遠端(Remote),7,認識一些基本名詞,Web page（網頁）具有 超連結 功能的文件，主要是利用HTML語言所寫成。此種文件除了文字之外，還可以包含圖片、聲音、影片等 多媒體 元素。Home page（首頁、烘焙雞） (1) 使用者一開啟 瀏覽器 時所連結的網頁 (2) 連結至某一 網站 時所出現的主畫面,8,認識一些基本名詞,Web site（網站）Internet 上的某部電腦，供組織或個人放置網頁之用。 WWW（World Wide Web、W3）（全球資訊網、萬維網、汪汪汪）全世界所有網頁文件之集合體。,9,Browser（瀏覽器）能夠 解讀 ht
3、ml 標籤，讓使用者觀看 html 文件之應用程式【例】Mozilla FirefoxNetscape NavigatorMS IEkkman,認識一些基本名詞,10,HTML（HyperText Markup Language 超文件標記語言）為設計超媒體文件（Hypermedia document）之語言。網頁之呈現效果取決於：瀏覽器：對 HTML 標籤之解讀能力原因：不同廠牌 or 同一廠牌之不同版本【例】閃爍文字、跑馬燈、 Flash使用者：螢幕設定【例】解析度、.瀏覽器設定【例】IE：檢視 字型工具 Internet 選項 一般,認識一些基本名詞,X makeup,11,網頁編輯軟體
4、,HTML文件為純文字格式（ASCII碼）故可用任何文書編輯軟體來編寫唯存檔時附檔名須為 htm 或 html 等簡單的文書軟體（例：記事本）文書軟體：（例：Word）簡易網頁標籤編輯軟體（例：熱狗）瀏覽器所附之編輯器專業軟體：（例：FrontPage、DreamWeaver 、 GoLive 、 ）,12,網頁編輯軟體,Microsoft - Frontpage 2007Macromedia- Dreamwaver CS3,他們 MS 家的Word 和 Powerpoint也可以很方便地存成網頁不過,13,網頁編輯軟體,Macromedia 公司DreamWeaver CS3版 Firewo
5、rk CS3版：網頁圖形Flash CS3版 ： 2D 向量互動動畫,14,網頁編輯軟體,Adobe 公司GoLive (CS 版)ImageReady、hotoshop：網頁圖形,http:/.tw/,15,設計語言,配合伺服器端作業系統的設計語言Win NT / 2000 ：ASP.NETActive Server PagesUnix (Linux)：PHPPersonal Home Page Tools,【註】Linux：使用人數超過 Microsoft 希望您知道 的作業系統 (By Julie C. Meloni),網站設計的步驟,1. 設定網站的主題2. 規劃網站內容與架構3. 設
6、計網頁版面配置/導覽介面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,設計網站 - 導覽 / 介面,Where I amWhere I can go,22,網站設計的步驟 -
7、 3,設計網站 - 導覽 / 介面,23,網站設計的步驟 - 3,設計網站 - 導覽 / 介面,24,網站設計的步驟 - 3,設計網站 - 導覽 / 介面,25,網站設計的步驟 -,進行實作,其他,26,網站設計的步驟 - 4b,進行實作 美工,27,網站設計的步驟 4b,進行實作 美工：選單, 選單設計成太空梭造型 登月史,28,網站設計的步驟 -c,進行實作 程式 資料庫,29,網站設計的步驟 -c,透過後台機制上傳資料 後台資料管理頁面【例】遠東科技大學數位媒體設計與管理系,30,網站設計的步驟 -c,透過後台管理機制 前台呈現頁面【例】遠東科技大學數位媒體設計與管理系,31,網站設計的
8、步驟 -c,進行實作 程式 資料庫,五年後，世界上將不會再有所謂的網際網路公司，因為所有的組織都將成為網際網路組織！Andy Grove，Intel總裁,But,資料庫的興起.美工的專業化.,有人說,32,網站設計的步驟 5a,測試與上傳,頻寬/速度？,連結/程式錯誤？,來去 go to影音教學虛擬教室,33,網站設計的步驟 5b,測試與上傳,其實製作前就應先考慮日後的上傳伺服器首頁檔名：index.htm ？index.html ？default.asp？主機功能：計數器？CGI ？影音伺服器？頻寬？容量？.,34,網站設計的步驟 5c,測試與上傳,編輯修改,存 檔,上 傳,重新整理,瀏覽器
9、,網頁編輯軟體,35,網站設計的步驟 - 6,登錄定期維護,定期維護,登錄搜尋引擎,HTML 語法 & 重要觀念, HTML 標籤語法 網頁色彩 圖檔 多媒體元件之使用 超連結,37,網頁基本架構,標題 ,主體文件區,頭,38,HTML 標籤語法,以標籤名稱開始同一標籤可以有許多屬性屬性順序先後無關不設屬性則呈現預設值尾標籤只需標籤名稱即可,我又聰明又美麗又有知識又常看電視,.,39,色彩的選擇,網頁整體色彩背景文字3 種超連結表格色彩儲存格色彩,40,色彩的選擇,色光為 RGB 模式全彩28 x 28 x 28=16,777,216,索引色盤Win 系統色盤 (256色),41,色彩的選擇,
10、網頁的色彩標示採 “RRGGBB” 16進位制表示法 (0F),000000,999999,cccccc,FFFFFF,0000FF,00FF00,FF0000,42,色彩的選擇,216 種網頁安全色彩 00, 33, 66, 99, CC, FF,43,多媒體元件的使用,圖檔聲音檔Flash 檔,所連結之檔案一定要一併上傳!,44,圖檔 GIF or JPG？,GIF最多 256 色可透明 (89a 格式)可動畫 (89a 格式),JPG全彩失真式的壓縮,45,圖檔 GIF or JPG？,替代性建議：以儲存格色彩搭配來取代圖檔,46,多媒體元件的使用,GIF 動畫檔gif聲音檔mid,要聽
11、音樂，請一併下載 birdsnbees.mid,47,多媒體元件的使用,Flash 動畫檔首頁小動畫： orthodot/orthodot_au.html網頁選單運用：兵馬俑獨立動畫：最後的 14 行詩 ( 587 KB),48, 超連結的使用 -1,錨點 Anchor, 文字或圖形 ,49, 超連結的使用 -2,URL（Uniform Resource Locator） 取得資料或服務之方式 (Access Method) 與位置。（白話文：用什麼方式，到哪裡取得資料）,http:/.tw/http:/www.feu.edu.tw/distance/distance.htm 協定|主機|Do
12、main Name|目錄|檔案（註：主機常以其所提供之服務來命名，以利大眾識別。）,50, 超連結的使用 -3,與同一網站的文件作連結【例】 最新消息 與其他HTTP網站做連結【例】 遠東科技大學與非HTTP網站做連結【例】遠東FTP站E-mail連結【例】 建議與意見?,51, 超連結的使用 -4,書籤 (與同一份文件中的其他章節作連結)【例】 這是起點 這是目的地 ,52, 超連結的使用 -5,非網頁的連結【例】 這是 Word 檔 這是簡報檔 這是圖檔 這是遊戲 ,只要寫好連結要連什麼就連什麼,53,絕對 / 相對路徑,絕對路徑一律自網站或根目錄起【例】http:/www.shu.edu
13、.tw,相對路徑以該檔所在位置為基準點同一層【例】test.htm上一層【例】./下一層【例】images/logo.gif,要像螞蟻慢慢爬不能用飛的,54,絕對 / 相對路徑,Dear Flash,我有去找過你可是你不在那兒你換了名字嗎？搬家了？還是根本就沒你這個人？,55,建議：善用表格 - 對齊、留白,注意：相對寬度絕對寬度,56,建議：儘量減少日後維護困難,建立資料夾，將檔案分門別類存放依單元 (導覽架構、網站地圖)依檔案格式【例】images資料夾依維護人員存取權限 (一般資料更新 / 程式維護)依.一致的命名規則Unix 作業系統區分檔名大小寫附檔名 (htm 和 html 不同)
14、,Frontpage, 建置網站 編輯網頁 發送 更新維護 (連結/網頁),58,Frontpage 的操作介面,59,網頁的三種顯示模式,一般模式HTML模式預覽模式,60,網頁的三種顯示模式,一般模式 - - 所見即所得,用起來很方便不用記標籤喔,和 Word 長的好像,61,網頁的三種顯示模式,HTML模式 - - 原始碼,比一般模式還強喔！,和記事本好像喔！,62,網頁的三種顯示模式,預覽模式,作不得準喔！最好用瀏覽器看但最後還是以上傳到伺服器後為準Ex: 計數器、資料庫,63,設計網頁 / 建立網站,設計網頁,建立網站須考慮整體導覽架構佈景主題共用邊框框架頁樣式表.,64,建立網站,指定位置,65,是否要採框架頁設計？,選擇適合的分割方式,66,是否要採框架頁設計？,目標框架？,叮嚀：不宜將他人網站開啟在自己頁框中,67,網站 - 導覽列,單選,可加選,加油！繼續練習,
