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

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