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