《西安郵電學(xué)院網(wǎng)頁制作.ppt》由會員分享，可在線閱讀，更多相關(guān)《西安郵電學(xué)院網(wǎng)頁制作.ppt（77頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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