资源描述
網站規劃&網頁設計製作,主講人：沈宗南世新大學海外進修學院E-mail:jasonmmc.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,設計網站-導覽/介面,WhereIamWhereIcango,世新大學王秀芬沈宗南,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進位制表示法(0F),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網頁選單運用：兵馬俑獨立動畫：IllHaveNoDreamsTonight(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_html)伺服器不支援時，無法以預設之http方式發佈http:/cc.shu.edu.tw/hfwang/public_html,世新大學王秀芬沈宗南,74,直接在Frontpage發送,ftp:/cc.shu.edu.tw/hfwang/public_html,1,2,3,世新大學王秀芬沈宗南,75,以FTP軟體上傳,三項不能錯的登錄資料：主機(HostName/Address)帳號(UserID)密碼(Password)注意大小寫,世新大學王秀芬沈宗南,76,FTP軟體上傳,本機遠端務必上傳至public_html資料夾內,加油！繼續練習,
展开阅读全文