分析需求設(shè)計(jì)和制作網(wǎng)站課件

分析需求，設(shè)計(jì)和制作網(wǎng)站分析需求設(shè)計(jì)和制作網(wǎng)站課件目錄教學(xué)目標(biāo)工作流程知識(shí)準(zhǔn)備學(xué)習(xí)成果1.如何設(shè)計(jì)網(wǎng)站2.網(wǎng)站制作準(zhǔn)備3.制作網(wǎng)站圖像4.用HTML制作網(wǎng)頁(yè)5.網(wǎng)站測(cè)試目錄教學(xué)目標(biāo)教學(xué)目標(biāo)網(wǎng)站設(shè)計(jì)步驟及原則；網(wǎng)站CIS設(shè)計(jì)知識(shí)；網(wǎng)頁(yè)版面布局規(guī)則；網(wǎng)站色彩知識(shí)；圖像與多媒體知識(shí)；Fireworks操作方法；HTML技術(shù)；網(wǎng)站鏈接與外觀測(cè)試方法；教學(xué)目標(biāo)網(wǎng)站設(shè)計(jì)步驟及原則；工作流程工作流程知識(shí)準(zhǔn)備參考網(wǎng)站：Firework視頻教程：/eschool/zhuanti/fireworks/Firework文字教程：/3/7/index.htmlHTML視頻教程：/xhtml/video//2008/0528/20080528017101.shtml圖像素材下載網(wǎng)站：模板王/懶人圖庫(kù)/字體下載網(wǎng)站：字體下載大寶庫(kù)/教材其他參考素材知識(shí)準(zhǔn)備參考網(wǎng)站：學(xué)習(xí)成果根據(jù)工作任務(wù)1中描述的《公司概況》、完成的《網(wǎng)站策劃書》、《網(wǎng)站建設(shè)合同》、《網(wǎng)站需求分析說明書》、《資料清單》、《資源與進(jìn)度規(guī)劃表》，進(jìn)行網(wǎng)站設(shè)計(jì)，實(shí)現(xiàn)和測(cè)試網(wǎng)站。獨(dú)立思考，真正理解所運(yùn)用到的知識(shí)和所遵循的工作過程，能夠在反復(fù)的獨(dú)立操作過程中記住這些工作流程和技能知識(shí)。疑難處咨詢教師，讓教師給予適當(dāng)?shù)闹笇?dǎo)。上交作品時(shí)，包括《XXXX公司網(wǎng)站設(shè)計(jì)說明書》和三個(gè)文件夾：網(wǎng)站文件夾、源文件夾、素材文件夾。學(xué)習(xí)成果根據(jù)工作任務(wù)1中描述的《公司概況》、完成的《網(wǎng)站策劃1.如何設(shè)計(jì)網(wǎng)站—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：根據(jù)需求，進(jìn)一步確定需要的、具體的功能效果和視覺效果？如何與對(duì)方溝通設(shè)計(jì)要求？對(duì)方完成設(shè)計(jì)后仔細(xì)閱讀設(shè)計(jì)說明書，設(shè)計(jì)是否能達(dá)到自身的要求？目標(biāo)：明確設(shè)計(jì)要求，協(xié)助網(wǎng)站公司完成設(shè)計(jì)1.如何設(shè)計(jì)網(wǎng)站—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：1.如何設(shè)計(jì)網(wǎng)站—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：根據(jù)對(duì)方的需求和設(shè)計(jì)要求，對(duì)方到底具體需要什么樣的功能效果和視覺效果？網(wǎng)站設(shè)計(jì)師與業(yè)務(wù)顧問間如何銜接為企業(yè)方作好設(shè)計(jì)？網(wǎng)站的設(shè)計(jì)過程與原則？網(wǎng)站的設(shè)計(jì)要素？具體如何設(shè)計(jì)、如何創(chuàng)意？如何與對(duì)方溝通確認(rèn)設(shè)計(jì)結(jié)果？誰(shuí)與誰(shuí)？什么時(shí)間地點(diǎn)？對(duì)方不滿意如何進(jìn)行修改，滿意后如何簽字確認(rèn)？目標(biāo)：網(wǎng)站設(shè)計(jì)師與業(yè)務(wù)顧問進(jìn)行良好溝通，網(wǎng)站設(shè)計(jì)師掌握網(wǎng)站設(shè)計(jì)的方法，設(shè)計(jì)出符合客戶要求，規(guī)范編寫網(wǎng)站設(shè)計(jì)說明書，業(yè)務(wù)顧問再與企業(yè)方溝通確認(rèn)。1.如何設(shè)計(jì)網(wǎng)站—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：1.如何設(shè)計(jì)網(wǎng)站—設(shè)置工作情境接著工作任務(wù)1中情境模擬的分組，繼續(xù)扮演企業(yè)方和網(wǎng)站建設(shè)公司，增加新的角色，商討確定網(wǎng)站的設(shè)計(jì)方案雙方溝通設(shè)計(jì)細(xì)節(jié)，網(wǎng)站公司研究方案進(jìn)行詳細(xì)設(shè)計(jì)，形成網(wǎng)站設(shè)計(jì)說明書，最后確認(rèn)簽字角色交叉，繼續(xù)完成目標(biāo)：仿真模擬網(wǎng)站設(shè)計(jì)的過程，共同完成符合企業(yè)方要求的網(wǎng)站設(shè)計(jì)說明書。1.如何設(shè)計(jì)網(wǎng)站—設(shè)置工作情境接著工作任務(wù)1中情境模擬的分組1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站設(shè)計(jì)步驟及原則第1步：精心規(guī)劃網(wǎng)站框架第2步：網(wǎng)站內(nèi)容設(shè)計(jì)第3步：網(wǎng)站CIS設(shè)計(jì)第4步：網(wǎng)站版面設(shè)計(jì)學(xué)生練習(xí)：使用公司經(jīng)營(yíng)的產(chǎn)品或服務(wù)的對(duì)象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應(yīng)的企業(yè)網(wǎng)站，對(duì)比學(xué)習(xí)各網(wǎng)站框架、功能內(nèi)容、CIS、版面設(shè)計(jì)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站設(shè)計(jì)步驟及原則學(xué)生練習(xí)：使用1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備案例分析螞蟻集團(tuán)網(wǎng)站：/

螞蟻搬家網(wǎng)站：/螞蟻集團(tuán)標(biāo)準(zhǔn)標(biāo)志這是一只工作中的螞蟻，隨時(shí)為您服務(wù)。搬家螞蟻，不知疲倦，肩負(fù)重任，大步向前。保潔螞蟻，粗中有細(xì)，熱情服務(wù)，手到塵去。汽修螞蟻，技能全面，排憂解難，馬不停蹄。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備案例分析螞蟻集團(tuán)標(biāo)準(zhǔn)標(biāo)志這是一只工1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則1、網(wǎng)站鏈接結(jié)構(gòu)平鋪型結(jié)構(gòu)樹型結(jié)構(gòu)混合型結(jié)構(gòu)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則平鋪型結(jié)構(gòu)樹型結(jié)構(gòu)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則2、網(wǎng)站的目錄結(jié)構(gòu)和命名（1）不要將所有文件都放在根目錄下（2）按欄目?jī)?nèi)容建立子目錄（3）在根目錄和主欄目下建立Images文件夾（4）目錄的層次不要太深（5）不能使用過長(zhǎng)的目錄名和文件名（6）不能使用中文目錄名和文件名（7）使用意義明確的目錄名和文件名1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站CIS設(shè)計(jì)知識(shí)在網(wǎng)站CIS設(shè)計(jì)中，通常以“四標(biāo)”來確定，即網(wǎng)站標(biāo)識(shí)、網(wǎng)站標(biāo)語(yǔ)、標(biāo)準(zhǔn)顏色、標(biāo)準(zhǔn)字體學(xué)生拓展任務(wù)：使用公司經(jīng)營(yíng)的產(chǎn)品或服務(wù)的對(duì)象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應(yīng)的企業(yè)網(wǎng)站，對(duì)比學(xué)習(xí)各網(wǎng)站使用的標(biāo)識(shí)、標(biāo)語(yǔ)、標(biāo)準(zhǔn)顏色、標(biāo)準(zhǔn)字體1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站CIS設(shè)計(jì)知識(shí)學(xué)生拓展任務(wù)：使1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)識(shí)（Logo）就如同商標(biāo)一樣，是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。在網(wǎng)站形象設(shè)計(jì)中，網(wǎng)站標(biāo)識(shí)同網(wǎng)站名稱一樣重要，看見Logo就能使訪問者聯(lián)想起你的站點(diǎn)。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)識(shí)（Logo）就如同商標(biāo)一樣1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站Logo設(shè)計(jì)步驟與技巧如下：（1）經(jīng)過分析，提煉出核心詞匯作為L(zhǎng)ogo的主體。（2）選擇適宜的字體，多數(shù)時(shí)候人們都避免直接選用字庫(kù)中的字體，字庫(kù)中的字體是為了印刷、閱讀而設(shè)計(jì)的，需將其圖形化才符合Logo的要求。（3）如果對(duì)字體的變形比較少，或者難于對(duì)字體進(jìn)行變形，就需加上圖形來輔助。圖形創(chuàng)意是一項(xiàng)有難度的工作，在進(jìn)行圖形創(chuàng)意的時(shí)候，需要多參考別人的標(biāo)志和圖形設(shè)計(jì)。網(wǎng)站Logo多采用卡通化的自由風(fēng)格，但也有的企業(yè)網(wǎng)站采用企業(yè)VI系統(tǒng)中的標(biāo)志圖形，對(duì)于圖形的選擇需要與客戶充分溝通，真正了解客戶特點(diǎn)，理解企業(yè)文化。（4）如果企業(yè)VI系統(tǒng)中已經(jīng)指定了標(biāo)準(zhǔn)色，就按企業(yè)提供的標(biāo)準(zhǔn)色進(jìn)行設(shè)計(jì)，如果沒有標(biāo)準(zhǔn)色作為參考，Logo色彩的選擇就要符合客戶的行業(yè)特征，如機(jī)械電子行業(yè)藍(lán)色為主，食品行業(yè)嫩黃、金黃、巧克力色等為主，女性行業(yè)粉色、紫、玫瑰等色為主，男性行業(yè)藍(lán)色、深綠、黑色等為主，時(shí)尚行業(yè)使用現(xiàn)階段的世界流行色等。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站Logo設(shè)計(jì)步驟與技巧如下：1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)語(yǔ)可以是網(wǎng)站的精神、網(wǎng)站的目標(biāo)、網(wǎng)站的經(jīng)營(yíng)理念，也可以是產(chǎn)品或活動(dòng)等的宣傳廣告語(yǔ)，用一句話甚至一個(gè)詞來高度概括公司。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)語(yǔ)可以是網(wǎng)站的精神、網(wǎng)站的目1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基本元素1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基本元素1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——頁(yè)面的尺寸(1)頁(yè)面的安全寬度。當(dāng)顯示分辨率設(shè)置為1024×768，即瀏覽器的屏幕最大寬度為1024像素(簡(jiǎn)寫為px，像素是計(jì)算機(jī)屏幕上所能顯示的最小單位)，因?yàn)g覽器的邊框和垂直方向的滾動(dòng)條占去22像素，所以網(wǎng)頁(yè)的安全寬度為1002像素。所以頁(yè)面的設(shè)計(jì)寬度最好限制在1002像素以內(nèi)。不同計(jì)算機(jī)屏幕由于分辨率設(shè)置的不同，顯示出像素的大小也不同。問：800×6000、1280×960的分辯率頁(yè)面的安全高度為多少？(2)頁(yè)面的最佳長(zhǎng)度。頁(yè)面長(zhǎng)度定義很寬松，要考慮整個(gè)網(wǎng)頁(yè)的下載速度、瀏覽者的方便、信息含量、網(wǎng)站類型等因素，根據(jù)經(jīng)驗(yàn)，中小型網(wǎng)站的頁(yè)面的最佳長(zhǎng)度應(yīng)在1-2屏之間，大型網(wǎng)站在3-4屏左右。問：800×6000、1024×768、1280×960的分辯率頁(yè)面的最佳長(zhǎng)度為多少？1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——頁(yè)面的尺寸1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局對(duì)稱對(duì)比布局：采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)；缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局同字型布局：頁(yè)面上面有廣告條+導(dǎo)航條，左面是鏈接，右面友情連接等，中間是主要內(nèi)容。優(yōu)點(diǎn)是充分利用版面，信息量大；缺點(diǎn)是頁(yè)面擁擠，不靈活?；刈中筒季郑涸谕中偷南旅嬖黾右粋€(gè)橫向通欄，頁(yè)腳充分利用起來。匡字型布局：將回字型的右側(cè)或左側(cè)欄目去掉，改善回字型的封閉型結(jié)構(gòu)。這三種結(jié)構(gòu)及其變形應(yīng)用廣泛。

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局自由式布局：將圖像、Flash動(dòng)畫或者視頻作為主體內(nèi)容，其他的文字說明及欄目條均被分布到不顯眼的位子，起裝飾作用，這種結(jié)構(gòu)在時(shí)尚類網(wǎng)站中使用的非常多。優(yōu)點(diǎn)：富于美感，可以吸引大量的瀏覽者欣賞；缺點(diǎn)：文字過少，導(dǎo)航條的指引作用不明顯。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力①你夏天喜歡買百事可樂還是可口可樂？為什么？除了味道的區(qū)別外它們的包裝對(duì)你有影響么？

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力網(wǎng)站色彩知識(shí)——色彩的魔力②你冬天喜歡家里是紅色橙色等顏色，還是深藍(lán)深紫的顏色，為什么？除了個(gè)人色彩習(xí)慣外它們分別給你什么感覺？

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力③你不開心的時(shí)候看到天氣不好，灰蒙蒙的你怎么想，要是看到陽(yáng)光明媚又會(huì)怎么想？④回憶你買過的女性用品比如化妝品和服飾商標(biāo)和包裝、廣告的主要色彩特征？⑤回憶你見過的男性用品比如剃須刀、打火機(jī)等的包裝、商標(biāo)、廣告的主要色彩特征？色彩的魔力就在于——它可以影響人的情緒！！1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備隨著人的經(jīng)驗(yàn)、記憶、知識(shí)、修養(yǎng)、性格、生活環(huán)境、職業(yè)、時(shí)代、民族、年齡、性別等的不同，人對(duì)于色彩的聯(lián)想也不同。我們?cè)O(shè)計(jì)搭配顏色，一定要符合對(duì)象的聯(lián)想習(xí)慣，否則就會(huì)產(chǎn)生不良的聯(lián)想。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備隨著人的經(jīng)驗(yàn)、記憶、知識(shí)、修養(yǎng)、性格、生活環(huán)境、職業(yè)、時(shí)代1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備

光源色和物體色的三原色及其混合對(duì)比圖網(wǎng)站色彩知識(shí)——色彩1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備光源色和物體色的三原色及其混合對(duì)比圖網(wǎng)站色彩知識(shí)——色色調(diào)(色相)、飽和度、色相分別等分為240來表示不同的顏色。色調(diào)在一個(gè)色調(diào)環(huán)上度量，從0到240分別表示從紅、橙、黃、綠、青、藍(lán)、紫再到紅等色調(diào)，0和240都是紅色調(diào)。飽和度最高為240表示最純最艷麗，飽和度最低為0表示最暗。亮度最高為240得到純白，亮度最低為0得到純黑。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩色調(diào)(色相)、飽和度、色相分別等分為240來表示不同的顏色。高純度、中明度、只有色調(diào)變化的方案

色調(diào)不變、純度不變、只有亮度變化的方案

色調(diào)和亮度不變、只有飽和度變化的方案

網(wǎng)站色彩知識(shí)——色彩色彩調(diào)制練習(xí)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備高純度、中明度、只有色調(diào)不變、純度不變、只有色調(diào)和亮度不變、1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩色彩調(diào)制練習(xí)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩1.如何設(shè)計(jì)網(wǎng)站—學(xué)習(xí)成果《XXX公司網(wǎng)站設(shè)計(jì)商談會(huì)議紀(jì)要》《XXX公司網(wǎng)站構(gòu)圖設(shè)計(jì)》《XXX公司網(wǎng)站設(shè)計(jì)說明書》說明書的規(guī)范化說明書的清晰性說明書的要素1.如何設(shè)計(jì)網(wǎng)站—學(xué)習(xí)成果《XXX公司網(wǎng)站設(shè)計(jì)商談會(huì)議紀(jì)要2.網(wǎng)站制作準(zhǔn)備—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：讓網(wǎng)站制作人員開始進(jìn)行準(zhǔn)備網(wǎng)站制作的工作如何建立網(wǎng)站文件的目錄結(jié)構(gòu)？如何將素材、源文件、網(wǎng)站正確區(qū)分？如何收集整理資料？前面已收集與整理過兩次了，為什么還需收集整理？收集整理的方法在什么地方不同？目標(biāo)：作為網(wǎng)站設(shè)計(jì)師和網(wǎng)站的制作人員，與業(yè)務(wù)顧問和企業(yè)方在考慮網(wǎng)站制作問題時(shí)是不同的，需對(duì)素材和資料進(jìn)行加工，對(duì)素材資料的要求也不同，為網(wǎng)站制作作為準(zhǔn)備。2.網(wǎng)站制作準(zhǔn)備—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：2.網(wǎng)站制作準(zhǔn)備—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：網(wǎng)站制作的進(jìn)展情況在資料素材不滿足制作時(shí)，給予協(xié)助目標(biāo)：為網(wǎng)站制作作為準(zhǔn)備。2.網(wǎng)站制作準(zhǔn)備—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：2.網(wǎng)站制作準(zhǔn)備—設(shè)置工作環(huán)境作為網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計(jì)師及網(wǎng)站制作人員作好環(huán)境等準(zhǔn)備，為網(wǎng)站制作作為準(zhǔn)備按實(shí)踐操作步驟開始工作目標(biāo)：作好充分的網(wǎng)站制作準(zhǔn)備2.網(wǎng)站制作準(zhǔn)備—設(shè)置工作環(huán)境作為網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計(jì)師及2.網(wǎng)站制作準(zhǔn)備—學(xué)習(xí)成果

2.網(wǎng)站制作準(zhǔn)備—學(xué)習(xí)成果3.制作網(wǎng)站圖像—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員開始網(wǎng)站制作工作制作網(wǎng)頁(yè)圖像的軟件對(duì)比，使用什么軟件更合適？網(wǎng)頁(yè)圖像的設(shè)計(jì)和制作方法網(wǎng)頁(yè)圖像的設(shè)計(jì)和制作技巧按實(shí)踐操作步驟開始工作目標(biāo)：網(wǎng)站設(shè)計(jì)師設(shè)計(jì)制作完成網(wǎng)站所需的圖像，能達(dá)到要求3.制作網(wǎng)站圖像—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員開始網(wǎng)站3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中圖像設(shè)計(jì)技巧（1）圖文相輔相承，網(wǎng)站整體設(shè)計(jì)簡(jiǎn)潔、美觀。（2）選擇制作精致的圖像，能夠增強(qiáng)網(wǎng)頁(yè)的美觀程度。（3）必須控制好文件尺寸與大小，減小網(wǎng)絡(luò)流量，保證下載速度，增強(qiáng)用戶良好的瀏覽體驗(yàn)。（4）在網(wǎng)頁(yè)中使用同一圖像，一旦含有這一圖像的網(wǎng)頁(yè)被用戶訪問后，其他頁(yè)面被訪問時(shí)，這個(gè)圖像就不會(huì)再次下載，從而提高網(wǎng)站的訪問速度。網(wǎng)站的頁(yè)面背景盡可能采用相同的背景圖，這不但可增加網(wǎng)頁(yè)的一致性，樹立統(tǒng)一風(fēng)格，而且可以避免頁(yè)面跳轉(zhuǎn)時(shí)延長(zhǎng)等待時(shí)間。（5）必須為圖像加文字注解，在圖像沒有下載完之前，用戶能夠了解圖像上的內(nèi)容，避免長(zhǎng)時(shí)間不明等待。（6）可以將大的圖像制作成尺寸、存儲(chǔ)容量小的縮略圖，鏈接到大的圖像上?？s略圖的下載速度快，用戶有興趣再打開大的圖像查看。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中圖像設(shè)計(jì)技巧網(wǎng)頁(yè)中多媒體設(shè)計(jì)的技巧（1）動(dòng)態(tài)效果要為頁(yè)面的整體布局服務(wù)，不能脫離整體風(fēng)格而成為獨(dú)立的個(gè)體，在網(wǎng)頁(yè)的設(shè)計(jì)中以靜為主，輔以動(dòng)態(tài)效果調(diào)劑。網(wǎng)頁(yè)上的動(dòng)態(tài)效果應(yīng)該少而精，一個(gè)頁(yè)面中一般以1～2幅動(dòng)畫為宜，動(dòng)畫太多會(huì)使人眼花繚亂，影響文字內(nèi)容的閱讀，并難以形成和諧搭配。（2）動(dòng)畫的位置一般在頁(yè)面的頁(yè)眉或廣告位處。（3）網(wǎng)頁(yè)中動(dòng)態(tài)效果用于傳播特定信息的，動(dòng)態(tài)效果與網(wǎng)頁(yè)內(nèi)容有機(jī)結(jié)合，不能濫用。對(duì)于內(nèi)容嚴(yán)肅的頁(yè)面更要慎用動(dòng)態(tài)效果。（4）聲音與視頻（流媒體）的文件較大，會(huì)影響下載速度，根據(jù)內(nèi)容需要選擇是否在網(wǎng)頁(yè)中加入視頻和聲音。此外，元素盡量不用非通用的多媒體。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中多媒體設(shè)計(jì)的技巧3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備矢量圖與位圖矢量圖又叫向量圖，是由點(diǎn)、線、面等來描述和記錄的圖，記錄的是對(duì)象的幾何形狀、線條粗細(xì)、角度、圓弧、面積、填充、色彩等。生成的矢量圖的文件存儲(chǔ)量小，任意放大或縮小而不會(huì)出現(xiàn)圖像失真現(xiàn)象，特別適用于文字設(shè)計(jì)、圖案設(shè)計(jì)、版式設(shè)計(jì)、計(jì)算機(jī)輔助設(shè)計(jì)（CAD）等。但矢量圖不易制作色彩豐富的圖像，并且在不同的軟件之間交換數(shù)據(jù)也不太方便。位圖又叫點(diǎn)陣圖或像素圖，由多個(gè)像素的色彩組合就形成了圖像，打印的圖片或照片由墨點(diǎn)構(gòu)成，計(jì)算機(jī)屏幕上的圖是由屏幕上的發(fā)光點(diǎn)（即像素）構(gòu)成的。在處理位圖圖像時(shí)，編輯的是像素，它的存儲(chǔ)容量和質(zhì)量取決于圖像中的像素點(diǎn)的多少，每單位尺寸中所含像素越多，圖像越清晰，顏色之間的過渡也越平滑。位圖圖像的主要優(yōu)點(diǎn)在于表現(xiàn)力強(qiáng)、真實(shí)感強(qiáng)、細(xì)膩、層次多。但在對(duì)圖像進(jìn)行拉伸、放大等處理時(shí)，其清晰度和光滑度會(huì)因單位尺寸像素點(diǎn)的變化而受到影響。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備矢量圖與位圖3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用的位圖圖像格式（1）GIF：圖像交換格式，該格式能夠支持少于或等于256色的圖像壓縮格式，一般用于主要包含純色的圖像，支持透明和動(dòng)畫。（2）JPG：又名JPEG，支持32位顏色的圖像，能以很高壓縮比來保存圖像而圖像質(zhì)量損失并不多，這在網(wǎng)頁(yè)中的意義是顯著的，既保留了漂亮的圖像，又不太影響訪問者瀏覽網(wǎng)頁(yè)。（3）PNG：具備GIF和JPEG的優(yōu)點(diǎn)，在壓縮時(shí)不會(huì)影響圖像品質(zhì)，且在顯示全彩圖時(shí)可支持48位色彩，在IE4.0版后才支持此圖像格式。（4）BMP：是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式，這種格式的特點(diǎn)是包含的圖像信息較豐富，幾乎不進(jìn)行壓縮，但缺點(diǎn)是占用磁盤空間過大。（5）TIF:TIFF是一種比較靈活的圖像格式，支持256色、24位真彩色、32位色、48位色等，同時(shí)支持GRB、CMYK等多種色彩模式，支持多平臺(tái)等，文件體積較大，適用于印刷。（6）WBMP：是移動(dòng)計(jì)算機(jī)設(shè)備使用的標(biāo)準(zhǔn)圖像格式，這種格式特定使用于WAP網(wǎng)頁(yè)中，支持1位顏色，只包含黑色和白色像素，但版幅較小，多用于WAP網(wǎng)站中的網(wǎng)頁(yè)。通過軟件操作進(jìn)行對(duì)比3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用的位圖圖像格式3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)圖像格式的選擇當(dāng)需要透明圖像、動(dòng)畫圖像、顏色數(shù)少、空間很低的時(shí)候選擇GIF格式；當(dāng)需要簡(jiǎn)單的動(dòng)畫時(shí)使用GIF動(dòng)畫格式。當(dāng)需要相片、有漸變色的圖像、顏色豐富的圖像、需要大量壓縮圖像存儲(chǔ)容量時(shí)選擇JPG格式。壓縮時(shí)在圖像處理軟件中可以設(shè)置壓縮品質(zhì)的值。在網(wǎng)頁(yè)中較少使用BMP和TIFF格式。PNG是Fireworks可編輯的源文件，也可以導(dǎo)出PNG格式的文件，PNG8、PNG24、PNG32表示圖像顏色數(shù)多少,導(dǎo)出后的PNG不是Fireworks的源文件。不要在網(wǎng)頁(yè)中直接使用Fireworks的源文件，因其不具有隱私性。但如果是其他軟件（如PhotoShop）處理PNG格式是被當(dāng)作與GIF和JPG類似的文件。另外，PNG源文件和導(dǎo)出文件都不具備GIF的動(dòng)畫功能。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)圖像格式的選擇3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用多媒體格式有3種。（1）聲音格式：有WAV、MP3、MIDI、WMA、RA、AU等格式，它們是以不同的方式模擬聲音，經(jīng)抽樣、量化和編碼后得到不同的格式，都由表示聲音強(qiáng)弱的數(shù)據(jù)序列組成。（2）視頻格式：可分為適合本地播放的本地影像視頻（如AVI、MOV、MPEG等）和適合在網(wǎng)絡(luò)中播放的網(wǎng)絡(luò)流媒體影像視頻（RM、MOV、ASF、FLV等）兩大類。后者在播放的穩(wěn)定性和播放畫面質(zhì)量上可能沒有前者優(yōu)秀，但網(wǎng)絡(luò)流媒體（聲音、動(dòng)畫、視頻等）的高速傳播使之被廣泛應(yīng)用于視頻點(diǎn)播、網(wǎng)絡(luò)演示、遠(yuǎn)程教育、網(wǎng)絡(luò)視頻廣告等互聯(lián)網(wǎng)信息服務(wù)領(lǐng)域。（3）動(dòng)畫格式：制作動(dòng)畫的軟件有很多，在網(wǎng)站中最常用的動(dòng)畫是GIF動(dòng)畫和Flash動(dòng)畫，動(dòng)畫格式和視頻格式之間可以進(jìn)行轉(zhuǎn)換和壓縮。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用多媒體格式有3種。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備Fireworks簡(jiǎn)介Fireworks是用來設(shè)計(jì)制作專業(yè)化網(wǎng)頁(yè)圖像的應(yīng)用軟件，可以有效地幫助網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)人員解決一些的特殊問題。Fireworks與Adobe公司的其他產(chǎn)品（如Dreamweaver、Flash、Photoshop、Illustator）一起提供了一個(gè)完備的Web集成解決方案。本教材主要以Adobe

FireworksCS3版本為參照進(jìn)行講解。Fireworks的工作界面由四部分組成：視圖面板、功能面板、工具箱面板、屬性面板。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備Fireworks簡(jiǎn)介首頁(yè)圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)首頁(yè)圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)次級(jí)頁(yè)面圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)次級(jí)頁(yè)面圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。重點(diǎn)提示：圖像上的特殊字體，需要在到網(wǎng)上下載字體（如：大寶庫(kù)http:///），下載后的字體解壓縮后（）復(fù)制到“控制面板”的“字體”窗口中，就能在各軟件中使用。對(duì)于不常用的字體，要能正常顯示只能用圖像的形式。顯示器分辯率的默認(rèn)值為72像素/英寸，不用更改，表示顯示器每英寸為72個(gè)像素點(diǎn)（px），而網(wǎng)頁(yè)的圖像是相對(duì)于顯示器屏幕進(jìn)行顯示的，教程中所有圖像都是為網(wǎng)頁(yè)設(shè)計(jì)制作的，后續(xù)所有的分辨率都不進(jìn)行修改，后續(xù)圖像制作過程不再詳述此步驟。而圖像打印機(jī)打印圖像時(shí)分辨率是不同的，打印尺寸固定，分辨率越高，打印的圖像清晰度越高，但在顯示器上看圖像，分辨率越高圖像就越大，但這并不表示打印尺寸會(huì)變大。切片是將圖像分割成多個(gè)小區(qū)域，從而實(shí)現(xiàn)對(duì)大圖像的無(wú)損分割。當(dāng)包含此圖像的網(wǎng)頁(yè)被訪問時(shí)，能實(shí)現(xiàn)邊下載邊呈現(xiàn)的顯示效果，而不會(huì)出現(xiàn)頁(yè)面長(zhǎng)時(shí)間沒有變化的情形。GIF動(dòng)畫是一種圖像格式，原理很簡(jiǎn)單：把幾幅圖像不停地輪流播放。它的優(yōu)點(diǎn)是體積小，利于網(wǎng)絡(luò)快速傳輸。3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。3.制作網(wǎng)站圖像—學(xué)習(xí)成果完成網(wǎng)站所需的所有圖像3.制作網(wǎng)站圖像—學(xué)習(xí)成果完成網(wǎng)站所需的所有圖像4、用HTML制作網(wǎng)頁(yè)—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員進(jìn)行網(wǎng)頁(yè)制作工作HTML標(biāo)記和語(yǔ)法是否熟記、清晰使用HTML制作網(wǎng)頁(yè)的方法使用HTML制作網(wǎng)頁(yè)技巧按實(shí)踐操作步驟開始工作目標(biāo)：網(wǎng)站設(shè)計(jì)師（網(wǎng)頁(yè)制作人員）設(shè)計(jì)制作完成網(wǎng)站所需的網(wǎng)頁(yè)，能達(dá)到要求4、用HTML制作網(wǎng)頁(yè)—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員進(jìn)4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——訪問WWW打開IE瀏覽器，在地址欄輸入：訪問WWW的過程：用戶通過瀏覽器將期望訪問的URL發(fā)向互聯(lián)網(wǎng)，由互聯(lián)網(wǎng)確定相應(yīng)的服務(wù)器，并將訪問請(qǐng)求傳送到這一服務(wù)器，服務(wù)器找到到信息后以文件的形式通過互聯(lián)網(wǎng)傳回用戶的計(jì)算機(jī)，最后由瀏覽器將信息呈現(xiàn)出來。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——訪問WWW認(rèn)識(shí)HTML——查看HTML文檔打開IE瀏覽器，打開百度網(wǎng)站的主頁(yè)后，點(diǎn)選IE瀏覽器的菜單命令“查看”/“源文件”，會(huì)彈出如下圖所示的窗口：4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——查看HTML文檔4、用HTML制作網(wǎng)頁(yè)—知識(shí)認(rèn)識(shí)HTML——什么是HTMLhtml文件的結(jié)構(gòu)：

<html>HTML文件開始

<head>文件頭開始

<title>網(wǎng)頁(yè)的標(biāo)題</title>網(wǎng)頁(yè)的標(biāo)題

</head>文件頭結(jié)束

<body>文件體開始

網(wǎng)頁(yè)的內(nèi)容網(wǎng)頁(yè)的內(nèi)容區(qū)

</body>文件體結(jié)束

</html>HTML文件結(jié)束注意：網(wǎng)頁(yè)文件的擴(kuò)展名為：*.HTML或*.HTM4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備操作演示簡(jiǎn)單網(wǎng)頁(yè)的制作過程認(rèn)識(shí)HTML——什么是HTML注意：網(wǎng)頁(yè)文件的擴(kuò)展名為：*.認(rèn)識(shí)HTML——什么是HTMLHTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言，它通過標(biāo)記式指令將影像、聲音、圖片和文字等邊接起來。幾乎所有的網(wǎng)頁(yè)都是由HTML或以其他程序語(yǔ)言嵌套在HTML中編寫的。HTML不是程序語(yǔ)言，而是一種結(jié)構(gòu)語(yǔ)言，它具有平臺(tái)無(wú)關(guān)性的特點(diǎn)。無(wú)論用戶使用何種操作系統(tǒng)，只要有瀏覽器，就可以運(yùn)行HTML文檔。瀏覽器是一種應(yīng)用軟件，用于與WWW建立連接，并與之進(jìn)行通信，在WWW中根據(jù)鏈接確定信息資源的位置，并把信息資源取回來，對(duì)網(wǎng)頁(yè)文件進(jìn)行解釋，然后將文字、圖像、多媒體等信息還原出來。屏幕上看到的網(wǎng)頁(yè)是瀏覽器對(duì)網(wǎng)頁(yè)文件的翻譯。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——什么是HTML4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)URL如何表示——什么是URLURL：即統(tǒng)一資源定位符(Uniform/UniversalResourceLocator)，也被稱為網(wǎng)頁(yè)地址，用來作為萬(wàn)維網(wǎng)的地址。網(wǎng)頁(yè)文件的鏈接和圖像、動(dòng)畫、視頻等的調(diào)用都使用URL表示，URL分為絕對(duì)地址和相對(duì)地址。網(wǎng)頁(yè)文件中的圖像不是網(wǎng)頁(yè)的一部分（圖像是獨(dú)立的），而是被網(wǎng)頁(yè)文件調(diào)用。瀏覽器從HTML代碼中讀取圖像的位置，然后把圖像放在網(wǎng)頁(yè)上。與此相似，音頻或視頻文件也被HTML文件調(diào)用，然后被瀏覽器組裝。訪問過程演示4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備URL如何表示——什么是URL訪問過程演示4、用HTML制作URL如何表示——絕對(duì)地址1）絕對(duì)地址（1）外部站點(diǎn)：http://主機(jī)名或IP地址:端口號(hào)/路徑名/文件名如：/intl/zh-CN/adwords/reseller.html主機(jī)名或IP地址：表示Internet的服務(wù)器名。端口號(hào)：指不同應(yīng)用程序所對(duì)應(yīng)的不同的端口協(xié)議，用來識(shí)別計(jì)算機(jī)主機(jī)申請(qǐng)的服務(wù)。一般在默認(rèn)的情況下都是使用默認(rèn)的端口號(hào)，可省略。路徑名/文件名是信息資源在服務(wù)器上存放的路徑和文件名。在使用默認(rèn)路徑和默認(rèn)文檔時(shí)可省略。（2）局域網(wǎng)內(nèi)計(jì)算機(jī)：//計(jì)算機(jī)名/盤符/路徑名/文件名（3）本地文件：盤符/路徑名/文件名4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備URL如何表示——絕對(duì)地址4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備URL如何表示——相對(duì)地址2）相對(duì)路徑，所要鏈接或嵌入到當(dāng)前網(wǎng)頁(yè)文檔的文件與當(dāng)前文件的相對(duì)位置所形成的路徑。（1）鏈接到同一目錄內(nèi)的文件：文件名（2）鏈接到下一級(jí)目錄內(nèi)的文件：下一級(jí)目錄名/文件名（3）鏈接到上一級(jí)目錄內(nèi)的文件：../文件名操作演示舉例說明絕對(duì)址與相對(duì)地址的區(qū)別4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備URL如何表示——相對(duì)地址操作演示舉例說明絕對(duì)址與相對(duì)地址的用記事本程序編寫、保存、修改網(wǎng)頁(yè)文檔

1）編寫網(wǎng)頁(yè)點(diǎn)選“開始”/“程序”/“附件”/“記事本”，輸入HTML語(yǔ)句，點(diǎn)選“文件”/“保存”或“另存為”，“文件名”中輸入文件名，擴(kuò)展名一定要是“HTML”或“HTM”，點(diǎn)“保存”按鈕。2）瀏覽網(wǎng)頁(yè)（瀏覽本地文檔，非域名訪問方式）方法一：通過“我的電腦”或“資源管理器”找到要瀏覽的網(wǎng)頁(yè)文件，雙擊打開它即瀏覽網(wǎng)頁(yè)；方法二：打開IE瀏覽器，點(diǎn)選“文件”/“打開”，找到文件打開，即瀏覽網(wǎng)頁(yè)；方法三：打開IE瀏覽器，在“地址”欄上輸入文件的路徑及文件的名稱，回車確定。3）修改網(wǎng)頁(yè)方法一：打開記事本，點(diǎn)選“文件”/“打開”，找到文件打開，即能修改，修改后必須重新保存（仍要注意保存文件的擴(kuò)展名），回到瀏覽器窗口點(diǎn)選刷新按鈕（F5）。方法二：瀏覽要修改的網(wǎng)頁(yè)時(shí)，點(diǎn)選“IE瀏覽器”/“查看”/“源文件”，自動(dòng)調(diào)出記事本及網(wǎng)頁(yè)文件，即能修改，修改后必須重新保存（仍要注意保存文件的擴(kuò)展名），回到瀏覽器窗口點(diǎn)選刷新按鈕（F5），或再按上面（2）方法瀏覽。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備操作演示舉例說明用記事本程序編寫、保存、修改網(wǎng)頁(yè)文檔4、用HTML制作網(wǎng)頁(yè)html的語(yǔ)法規(guī)則html的標(biāo)記有下列四種表示方法：①<標(biāo)記>文字或其它內(nèi)容<／標(biāo)記>②<標(biāo)記屬性1＝屬性值屬性2＝屬性值……>文字或其它內(nèi)容<／標(biāo)記>③<標(biāo)記>④<標(biāo)記屬性1＝屬性值屬性2＝屬性值屬性3＝屬性值……>4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備html的語(yǔ)法規(guī)則4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備HTML語(yǔ)法規(guī)則①正常情況下，HTML文件以純文本形式存放，擴(kuò)展名為“.HTM”或“.HTML”。若系統(tǒng)為UNIX，擴(kuò)展名必須為“.HTML”。在Windows系統(tǒng)中使用時(shí)請(qǐng)保持只使用其中一種，避免混淆。②html文件由標(biāo)記或被標(biāo)記的內(nèi)容組成；網(wǎng)頁(yè)中所有的顯示內(nèi)容都應(yīng)該受限于一個(gè)或多個(gè)標(biāo)記，盡量避免有游離于標(biāo)記之外的文字或圖像等以免產(chǎn)生錯(cuò)誤。③每個(gè)標(biāo)記都用"<"和">"標(biāo)識(shí)，以表示這是HTML代碼而非普通文本，需要注意的是"<"和標(biāo)記之間不能有空格或其它字符；標(biāo)記分為單標(biāo)記和雙標(biāo)記，雙標(biāo)記必須有結(jié)束標(biāo)記<／標(biāo)記>，雙標(biāo)識(shí)占大多數(shù)，單標(biāo)記只有幾個(gè)；標(biāo)記不分大小寫，但要區(qū)分全半角。④一個(gè)標(biāo)記可以有多個(gè)屬性，"屬性＝屬性值"合起來構(gòu)成一個(gè)完整的屬性，各個(gè)屬性用空格分開，屬性及其屬性值不分大小寫，但也要區(qū)分全半角，根據(jù)需要可以用該標(biāo)記的所有屬性，也可只用需要的幾個(gè)或一個(gè)或不用屬性，在使用時(shí)屬性之間沒有順序。⑤對(duì)同一段要標(biāo)記的內(nèi)容，可以用多個(gè)標(biāo)記來共同作用，產(chǎn)生一定的效果，多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。⑥HTML文件一行可以寫多個(gè)標(biāo)記，一個(gè)標(biāo)記可以分多行書寫，不用任何續(xù)行符號(hào)。HTML源文件中的換行、回車符和多個(gè)連續(xù)空格(半角空格)在顯示中是無(wú)效的，多個(gè)連續(xù)空格只顯示一個(gè)。換行、分段都有專有標(biāo)記，空格有轉(zhuǎn)義符。⑦提供注釋語(yǔ)句，格式：<!--注釋文字-->。注釋語(yǔ)句可放在任何地方，注釋內(nèi)容不在瀏覽器中顯示。（有時(shí)客戶端腳本和CSS樣式等也加上“<!—-->”，是為了避免瀏覽器不支持這些代碼時(shí)而在瀏覽器中把這些代碼顯示出來）⑧HTML語(yǔ)言并不要求在書寫時(shí)縮進(jìn)。若為了程序的易讀性，可使標(biāo)記的首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。HTML的語(yǔ)法并不像其它語(yǔ)言要求嚴(yán)格，語(yǔ)法或語(yǔ)句不正確一般只影響顯示效果。還要注意少量標(biāo)記和屬性對(duì)不同的瀏覽器的支持能力是不同的，后面章節(jié)主要講述IE能支持的標(biāo)記和屬性。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備HTML語(yǔ)法規(guī)則4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備HTML規(guī)范與版本不同公司的瀏覽器或者同一瀏覽器的不同版本都存在著不兼容問題。因?yàn)椴煌镜臑g覽器軟件開發(fā)人員為了實(shí)現(xiàn)一些特殊效果，瀏覽器可接受的網(wǎng)頁(yè)中引入一些特殊標(biāo)簽和屬性，而另外版本及另外公司的瀏覽器并不知道特殊標(biāo)簽和屬性的含義，因此就出現(xiàn)了不兼容問題。為了解決兼容性和互用性問題，需要一些組織和機(jī)構(gòu)來制定HTML規(guī)范和標(biāo)準(zhǔn)。早期的HTML是非常簡(jiǎn)單的，被稱為HTML1.0，由IEFT（負(fù)責(zé)有關(guān)Internet的各種技術(shù)標(biāo)準(zhǔn)及接口規(guī)范的制定的國(guó)際民間組織）修改為HTML2.0，再由W3C（WWW聯(lián)盟）發(fā)展為現(xiàn)在的HTML4.01，這也是HTML規(guī)范的最終版本，HTML將被XHTML（可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言）取代。但這個(gè)取代還需要很長(zhǎng)一段時(shí)間，HTML仍然要繼續(xù)使用，并且HTML是XHTML的基礎(chǔ)，學(xué)習(xí)HTML仍非常必要。在網(wǎng)頁(yè)文檔的開頭可添加一個(gè)文檔類型定義標(biāo)簽，用于說明HTML的規(guī)范，即指定當(dāng)前網(wǎng)頁(yè)文件所使用的HTML語(yǔ)言版本及定義該語(yǔ)言版本的規(guī)范文件的位置。例如使用HTML4.01的規(guī)范，代碼如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN”"/TR/html4/loose.dtd">4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備HTML規(guī)范與版本4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)首頁(yè)的表格排版4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)首頁(yè)的表格排版次級(jí)頁(yè)面的表格排版4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)次級(jí)頁(yè)面的表格排版4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。重點(diǎn)提示：使用浮動(dòng)框架與不使用浮動(dòng)框架相比其優(yōu)點(diǎn)在于鏈接的頁(yè)面是從浮動(dòng)框架區(qū)域打開，而不是從瀏覽器窗口重新打開一個(gè)網(wǎng)頁(yè)，節(jié)約編寫代碼的時(shí)間，運(yùn)行時(shí)下載速度較快?？蚣芫W(wǎng)頁(yè)將瀏覽器拆分成若干個(gè)窗口，拆分方式由主框架網(wǎng)頁(yè)決寫，在每一個(gè)窗口各鏈接一個(gè)普通網(wǎng)頁(yè)；浮動(dòng)框架是在普通網(wǎng)頁(yè)中作為一個(gè)網(wǎng)頁(yè)元素方式插入網(wǎng)頁(yè)的某一個(gè)區(qū)域。它們之間的共同點(diǎn)是大部分區(qū)域可固定，某一區(qū)域作為鏈接變化的區(qū)域，節(jié)約編寫代碼的時(shí)間，運(yùn)行時(shí)下載速度較快。但是框架網(wǎng)頁(yè)在排版時(shí)存在一定的缺陷和搜索引擎不識(shí)別框架的問題，現(xiàn)在框架網(wǎng)頁(yè)用得越來越少了。4、用HTML制作網(wǎng)頁(yè)—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。4、用HTML制作網(wǎng)頁(yè)—學(xué)習(xí)成果完成網(wǎng)站中的所有網(wǎng)頁(yè)的制作。4、用HTML制作網(wǎng)頁(yè)—學(xué)習(xí)成果完成網(wǎng)站中的所有網(wǎng)頁(yè)的制作。5.網(wǎng)站測(cè)試—設(shè)置工作情境網(wǎng)站建設(shè)公司的相關(guān)工作人員開始網(wǎng)站的測(cè)試工作；必須明確測(cè)試的必要性和重要性；掌握測(cè)試的方法；掌握測(cè)試的技巧；注意很容易把測(cè)試看做一個(gè)沒有技術(shù)含量的體力活，但是很多網(wǎng)站在交付后仍出現(xiàn)各種各樣的問題，這就是在網(wǎng)站實(shí)現(xiàn)完成后沒有進(jìn)行全面的測(cè)試。目標(biāo)：網(wǎng)站設(shè)計(jì)師（及網(wǎng)站測(cè)試人員）細(xì)心、耐心、專心完成全面的測(cè)試，消除BUG，提高網(wǎng)站的質(zhì)量。5.網(wǎng)站測(cè)試—設(shè)置工作情境網(wǎng)站建設(shè)公司的相關(guān)工作人員開始網(wǎng)站5.網(wǎng)站測(cè)試—知識(shí)準(zhǔn)備一旦網(wǎng)站出現(xiàn)“訪問速度太慢”、“鏈接錯(cuò)誤”、“查看的網(wǎng)頁(yè)不存在”等問題時(shí)，瀏覽者就可能離開轉(zhuǎn)向其他網(wǎng)站。因此在網(wǎng)頁(yè)發(fā)布前后均應(yīng)對(duì)網(wǎng)站及網(wǎng)頁(yè)進(jìn)行全面的測(cè)試，盡可能多地發(fā)現(xiàn)問題，并及時(shí)處理，以保證發(fā)布的網(wǎng)站能正常訪問。1．鏈接測(cè)試檢查網(wǎng)頁(yè)中否有超鏈接無(wú)效的情況，包括頁(yè)面、圖像和多媒體文件等，造成此類問題通常是文件名不正確、文件路徑不正確等原因造成的。2．外觀測(cè)試檢查網(wǎng)頁(yè)在瀏覽時(shí)能否按預(yù)想的布局效果進(jìn)行顯示，外觀測(cè)試包含整體界面、導(dǎo)航、圖像、文字、內(nèi)容等。3．兼容性測(cè)試（1）分辨率測(cè)試：每個(gè)客戶在瀏覽網(wǎng)站時(shí)，其電腦顯示器會(huì)設(shè)置為不同的分辨率，不同的客戶會(huì)用不同的分辨率訪問網(wǎng)站，所以測(cè)試網(wǎng)站時(shí)要檢查不同分辨率下網(wǎng)頁(yè)是否正常顯示。（2）瀏覽器測(cè)試：雖然HTML有規(guī)范和標(biāo)準(zhǔn)，但不同的瀏覽器間、同一瀏覽器的不同版本間存在著差異，可能部分導(dǎo)致兼容性問題，因此需要對(duì)不同的瀏覽器環(huán)境測(cè)試所有網(wǎng)頁(yè)是否正常顯示。5.網(wǎng)站測(cè)試—知識(shí)準(zhǔn)備一旦網(wǎng)站出現(xiàn)“訪問速度太慢”、“鏈接錯(cuò)5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)搭建測(cè)試環(huán)境下載下表中列出的訪問者最常用的瀏覽器并安裝。常用瀏覽器及使用人數(shù)比序號(hào)瀏覽器名稱和版本使用人數(shù)比（%）1IE瀏覽器322傲游瀏覽器143火狐瀏覽器134360安全瀏覽器165.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)搭建測(cè)試環(huán)境序號(hào)瀏覽器名稱和版本使用人鏈接測(cè)試：測(cè)試所有鏈接是否按指示的那樣確實(shí)鏈接到了該鏈接的頁(yè)面；測(cè)試所鏈接的頁(yè)面是否存在；保證網(wǎng)站中沒有孤立頁(yè)面，所謂孤立頁(yè)面是指沒有鏈接指向的頁(yè)面。第1步：檢查網(wǎng)站各欄目文件夾中的網(wǎng)頁(yè)是否有無(wú)用的網(wǎng)頁(yè)，如果有，則將之剪切至刪除文件夾，最后統(tǒng)一刪除，避免誤刪除。第2步：檢查根圖像文件夾、各欄目文件夾中的圖像文件夾是否有無(wú)用的圖像，如果有，則將之剪切至刪除文件夾，最后統(tǒng)一刪除，避免誤刪除。第3步：分別運(yùn)行每一個(gè)網(wǎng)頁(yè)，然后單擊每個(gè)網(wǎng)頁(yè)上的每一個(gè)超鏈接，檢查是否出現(xiàn)無(wú)法顯示網(wǎng)頁(yè)、鏈接的內(nèi)容不正確等信息。檢查文件路徑和文件名是否正確，檢查頁(yè)面是否輸入內(nèi)容時(shí)錯(cuò)誤等，對(duì)存在的問題進(jìn)行修改。第4步：修改后再進(jìn)行鏈接測(cè)試確認(rèn)，檢查每個(gè)網(wǎng)頁(yè)的每一個(gè)超鏈接，直至完成。5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)鏈接測(cè)試：測(cè)試所有鏈接是否按指示的那樣確實(shí)鏈接到了該鏈接的頁(yè)5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)外觀測(cè)試：運(yùn)行網(wǎng)站檢查每個(gè)網(wǎng)頁(yè)的外觀，檢查整體界面效果、導(dǎo)航、圖像、表格、文字、內(nèi)容等。找到原因，將外觀修改正確。①整體界面測(cè)試：整體界面是指整個(gè)網(wǎng)站的風(fēng)格及頁(yè)面結(jié)構(gòu)，應(yīng)該是統(tǒng)一的風(fēng)格和模式。②導(dǎo)航測(cè)試：導(dǎo)航描述了用戶在一個(gè)頁(yè)面內(nèi)操作的方式，在不同的用戶接口控制之間，例如按鈕、對(duì)話框、列表和窗口等，保證不同的連接頁(yè)面之間具有正確的導(dǎo)航外觀。③圖像測(cè)試：要確保圖像有明確的用途，圖片或動(dòng)畫不要胡亂地堆在一起，以免浪費(fèi)傳輸時(shí)間。圖片存儲(chǔ)容量要盡量地小，一般采用JPG或GIF壓縮，最好能使圖片的大小減小到30KB以下，并且要能清楚地說明某件事情，或者能起到裝飾美化作用，或者能鏈接到某個(gè)具體的頁(yè)面。檢查背景圖像是否顯示或溢出。④表格測(cè)試：需要驗(yàn)證表格是否設(shè)置正確，如表格的行間距、寬、高等。⑤文字測(cè)試：驗(yàn)證所有頁(yè)面字體的風(fēng)格是否一致。驗(yàn)證文字回繞是否正確，不要因?yàn)槭褂脠D片而使窗口和段落排列錯(cuò)位或者出現(xiàn)孤行。背景顏色應(yīng)該與字體顏色和前景顏色相搭配，相同欄目和類型的文字效果是否一致。⑥瀏覽器標(biāo)題欄：是否顯示正確的標(biāo)題內(nèi)容。⑦內(nèi)容測(cè)試：檢驗(yàn)網(wǎng)站所提供信息的正確性、準(zhǔn)確性和相關(guān)性。5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)外觀測(cè)試：運(yùn)行網(wǎng)站檢查每個(gè)網(wǎng)頁(yè)的外觀，5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)兼容性測(cè)試第1步：分別用不同的顯示器的分辨率（1440×900、1280×1024、1280×800、1280×768、1024×768、800×600）運(yùn)行每個(gè)網(wǎng)頁(yè)，查看每一個(gè)頁(yè)面的外觀，發(fā)現(xiàn)外觀異常的網(wǎng)頁(yè)，修改正確。修改后的頁(yè)面需用之前運(yùn)行過的分辨率再檢查直到都顯示正確為止。第2步：分別用各種瀏覽器運(yùn)行每個(gè)網(wǎng)頁(yè)，查看每一個(gè)頁(yè)面的外觀，發(fā)現(xiàn)外觀異常的網(wǎng)頁(yè)，進(jìn)行修改。修改后的頁(yè)面需用之前運(yùn)行過的瀏覽器重新運(yùn)行查看是否出現(xiàn)異常，如果有異常繼續(xù)修改，直到以上四種瀏覽器都顯示正常為止。5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)兼容性測(cè)試

用火狐瀏覽器測(cè)試網(wǎng)頁(yè)時(shí)的界面會(huì)出問題，解決問題的方法是使用CSS（級(jí)聯(lián)樣式表）定義文字大小5.網(wǎng)站測(cè)試—實(shí)踐指導(dǎo)用火狐瀏覽器測(cè)試網(wǎng)頁(yè)時(shí)的界面會(huì)出問題，5.網(wǎng)站測(cè)試—實(shí)踐指5.網(wǎng)站測(cè)試—學(xué)習(xí)成果測(cè)試并修改后無(wú)BUG的網(wǎng)站。5.網(wǎng)站測(cè)試—學(xué)習(xí)成果測(cè)試并修改后無(wú)BUG的網(wǎng)站。技能拓展拓展1：搜索自己喜歡的網(wǎng)站，查看網(wǎng)站的Logo、宣傳標(biāo)語(yǔ)、布局、色彩、字體等設(shè)計(jì)，找出各網(wǎng)站的特點(diǎn)，總結(jié)網(wǎng)站設(shè)計(jì)方式。拓展3：分別用色彩塊組合表示出各種詞語(yǔ)：春、夏、秋、冬、酸、甜、苦、辣、歡樂+積極、憂傷+消沉、拉薩、江南、重慶、夏威夷、幼稚、成熟、古樸、現(xiàn)代、陽(yáng)剛、陰柔。拓展4：特殊文字格式的處理，如ax2+bx+c=0、a<b等。拓展5：如何在網(wǎng)頁(yè)加入Flash動(dòng)畫、音樂和視頻？拓展6：有一個(gè)很長(zhǎng)的網(wǎng)頁(yè)，是屏幕高度的3倍，如何在該網(wǎng)頁(yè)的底部加一個(gè)超鏈接能返回頂部？拓展7：地圖熱點(diǎn)如何使用？給歡迎頁(yè)面“進(jìn)入首頁(yè)”處和首頁(yè)的“產(chǎn)品鏈接”處設(shè)置地圖熱點(diǎn)。拓展8：如何給網(wǎng)站制作其他更美觀的GIF動(dòng)畫？ 拓展9：如何使用Fireworks批量處理照片（例如批量縮小照片，批量壓縮照片存儲(chǔ)容量）？拓展10：如何將數(shù)碼相機(jī)照得比較暗的圖像調(diào)得亮一些？技能拓展拓展1：搜索自己喜歡的網(wǎng)站，查看網(wǎng)站的Logo、宣傳分析需求，設(shè)計(jì)和制作網(wǎng)站分析需求設(shè)計(jì)和制作網(wǎng)站課件目錄教學(xué)目標(biāo)工作流程知識(shí)準(zhǔn)備學(xué)習(xí)成果1.如何設(shè)計(jì)網(wǎng)站2.網(wǎng)站制作準(zhǔn)備3.制作網(wǎng)站圖像4.用HTML制作網(wǎng)頁(yè)5.網(wǎng)站測(cè)試目錄教學(xué)目標(biāo)教學(xué)目標(biāo)網(wǎng)站設(shè)計(jì)步驟及原則；網(wǎng)站CIS設(shè)計(jì)知識(shí)；網(wǎng)頁(yè)版面布局規(guī)則；網(wǎng)站色彩知識(shí)；圖像與多媒體知識(shí)；Fireworks操作方法；HTML技術(shù)；網(wǎng)站鏈接與外觀測(cè)試方法；教學(xué)目標(biāo)網(wǎng)站設(shè)計(jì)步驟及原則；工作流程工作流程知識(shí)準(zhǔn)備參考網(wǎng)站：Firework視頻教程：/eschool/zhuanti/fireworks/Firework文字教程：/3/7/index.htmlHTML視頻教程：/xhtml/video//2008/0528/20080528017101.shtml圖像素材下載網(wǎng)站：模板王/懶人圖庫(kù)/字體下載網(wǎng)站：字體下載大寶庫(kù)/教材其他參考素材知識(shí)準(zhǔn)備參考網(wǎng)站：學(xué)習(xí)成果根據(jù)工作任務(wù)1中描述的《公司概況》、完成的《網(wǎng)站策劃書》、《網(wǎng)站建設(shè)合同》、《網(wǎng)站需求分析說明書》、《資料清單》、《資源與進(jìn)度規(guī)劃表》，進(jìn)行網(wǎng)站設(shè)計(jì)，實(shí)現(xiàn)和測(cè)試網(wǎng)站。獨(dú)立思考，真正理解所運(yùn)用到的知識(shí)和所遵循的工作過程，能夠在反復(fù)的獨(dú)立操作過程中記住這些工作流程和技能知識(shí)。疑難處咨詢教師，讓教師給予適當(dāng)?shù)闹笇?dǎo)。上交作品時(shí)，包括《XXXX公司網(wǎng)站設(shè)計(jì)說明書》和三個(gè)文件夾：網(wǎng)站文件夾、源文件夾、素材文件夾。學(xué)習(xí)成果根據(jù)工作任務(wù)1中描述的《公司概況》、完成的《網(wǎng)站策劃1.如何設(shè)計(jì)網(wǎng)站—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：根據(jù)需求，進(jìn)一步確定需要的、具體的功能效果和視覺效果？如何與對(duì)方溝通設(shè)計(jì)要求？對(duì)方完成設(shè)計(jì)后仔細(xì)閱讀設(shè)計(jì)說明書，設(shè)計(jì)是否能達(dá)到自身的要求？目標(biāo)：明確設(shè)計(jì)要求，協(xié)助網(wǎng)站公司完成設(shè)計(jì)1.如何設(shè)計(jì)網(wǎng)站—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：1.如何設(shè)計(jì)網(wǎng)站—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：根據(jù)對(duì)方的需求和設(shè)計(jì)要求，對(duì)方到底具體需要什么樣的功能效果和視覺效果？網(wǎng)站設(shè)計(jì)師與業(yè)務(wù)顧問間如何銜接為企業(yè)方作好設(shè)計(jì)？網(wǎng)站的設(shè)計(jì)過程與原則？網(wǎng)站的設(shè)計(jì)要素？具體如何設(shè)計(jì)、如何創(chuàng)意？如何與對(duì)方溝通確認(rèn)設(shè)計(jì)結(jié)果？誰(shuí)與誰(shuí)？什么時(shí)間地點(diǎn)？對(duì)方不滿意如何進(jìn)行修改，滿意后如何簽字確認(rèn)？目標(biāo)：網(wǎng)站設(shè)計(jì)師與業(yè)務(wù)顧問進(jìn)行良好溝通，網(wǎng)站設(shè)計(jì)師掌握網(wǎng)站設(shè)計(jì)的方法，設(shè)計(jì)出符合客戶要求，規(guī)范編寫網(wǎng)站設(shè)計(jì)說明書，業(yè)務(wù)顧問再與企業(yè)方溝通確認(rèn)。1.如何設(shè)計(jì)網(wǎng)站—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：1.如何設(shè)計(jì)網(wǎng)站—設(shè)置工作情境接著工作任務(wù)1中情境模擬的分組，繼續(xù)扮演企業(yè)方和網(wǎng)站建設(shè)公司，增加新的角色，商討確定網(wǎng)站的設(shè)計(jì)方案雙方溝通設(shè)計(jì)細(xì)節(jié)，網(wǎng)站公司研究方案進(jìn)行詳細(xì)設(shè)計(jì)，形成網(wǎng)站設(shè)計(jì)說明書，最后確認(rèn)簽字角色交叉，繼續(xù)完成目標(biāo)：仿真模擬網(wǎng)站設(shè)計(jì)的過程，共同完成符合企業(yè)方要求的網(wǎng)站設(shè)計(jì)說明書。1.如何設(shè)計(jì)網(wǎng)站—設(shè)置工作情境接著工作任務(wù)1中情境模擬的分組1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站設(shè)計(jì)步驟及原則第1步：精心規(guī)劃網(wǎng)站框架第2步：網(wǎng)站內(nèi)容設(shè)計(jì)第3步：網(wǎng)站CIS設(shè)計(jì)第4步：網(wǎng)站版面設(shè)計(jì)學(xué)生練習(xí)：使用公司經(jīng)營(yíng)的產(chǎn)品或服務(wù)的對(duì)象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應(yīng)的企業(yè)網(wǎng)站，對(duì)比學(xué)習(xí)各網(wǎng)站框架、功能內(nèi)容、CIS、版面設(shè)計(jì)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站設(shè)計(jì)步驟及原則學(xué)生練習(xí)：使用1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備案例分析螞蟻集團(tuán)網(wǎng)站：/

螞蟻搬家網(wǎng)站：/螞蟻集團(tuán)標(biāo)準(zhǔn)標(biāo)志這是一只工作中的螞蟻，隨時(shí)為您服務(wù)。搬家螞蟻，不知疲倦，肩負(fù)重任，大步向前。保潔螞蟻，粗中有細(xì)，熱情服務(wù)，手到塵去。汽修螞蟻，技能全面，排憂解難，馬不停蹄。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備案例分析螞蟻集團(tuán)標(biāo)準(zhǔn)標(biāo)志這是一只工1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則1、網(wǎng)站鏈接結(jié)構(gòu)平鋪型結(jié)構(gòu)樹型結(jié)構(gòu)混合型結(jié)構(gòu)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則平鋪型結(jié)構(gòu)樹型結(jié)構(gòu)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則2、網(wǎng)站的目錄結(jié)構(gòu)和命名（1）不要將所有文件都放在根目錄下（2）按欄目?jī)?nèi)容建立子目錄（3）在根目錄和主欄目下建立Images文件夾（4）目錄的層次不要太深（5）不能使用過長(zhǎng)的目錄名和文件名（6）不能使用中文目錄名和文件名（7）使用意義明確的目錄名和文件名1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站結(jié)構(gòu)設(shè)計(jì)規(guī)則1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站CIS設(shè)計(jì)知識(shí)在網(wǎng)站CIS設(shè)計(jì)中，通常以“四標(biāo)”來確定，即網(wǎng)站標(biāo)識(shí)、網(wǎng)站標(biāo)語(yǔ)、標(biāo)準(zhǔn)顏色、標(biāo)準(zhǔn)字體學(xué)生拓展任務(wù)：使用公司經(jīng)營(yíng)的產(chǎn)品或服務(wù)的對(duì)象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應(yīng)的企業(yè)網(wǎng)站，對(duì)比學(xué)習(xí)各網(wǎng)站使用的標(biāo)識(shí)、標(biāo)語(yǔ)、標(biāo)準(zhǔn)顏色、標(biāo)準(zhǔn)字體1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站CIS設(shè)計(jì)知識(shí)學(xué)生拓展任務(wù)：使1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)識(shí)（Logo）就如同商標(biāo)一樣，是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。在網(wǎng)站形象設(shè)計(jì)中，網(wǎng)站標(biāo)識(shí)同網(wǎng)站名稱一樣重要，看見Logo就能使訪問者聯(lián)想起你的站點(diǎn)。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)識(shí)（Logo）就如同商標(biāo)一樣1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站Logo設(shè)計(jì)步驟與技巧如下：（1）經(jīng)過分析，提煉出核心詞匯作為L(zhǎng)ogo的主體。（2）選擇適宜的字體，多數(shù)時(shí)候人們都避免直接選用字庫(kù)中的字體，字庫(kù)中的字體是為了印刷、閱讀而設(shè)計(jì)的，需將其圖形化才符合Logo的要求。（3）如果對(duì)字體的變形比較少，或者難于對(duì)字體進(jìn)行變形，就需加上圖形來輔助。圖形創(chuàng)意是一項(xiàng)有難度的工作，在進(jìn)行圖形創(chuàng)意的時(shí)候，需要多參考別人的標(biāo)志和圖形設(shè)計(jì)。網(wǎng)站Logo多采用卡通化的自由風(fēng)格，但也有的企業(yè)網(wǎng)站采用企業(yè)VI系統(tǒng)中的標(biāo)志圖形，對(duì)于圖形的選擇需要與客戶充分溝通，真正了解客戶特點(diǎn)，理解企業(yè)文化。（4）如果企業(yè)VI系統(tǒng)中已經(jīng)指定了標(biāo)準(zhǔn)色，就按企業(yè)提供的標(biāo)準(zhǔn)色進(jìn)行設(shè)計(jì)，如果沒有標(biāo)準(zhǔn)色作為參考，Logo色彩的選擇就要符合客戶的行業(yè)特征，如機(jī)械電子行業(yè)藍(lán)色為主，食品行業(yè)嫩黃、金黃、巧克力色等為主，女性行業(yè)粉色、紫、玫瑰等色為主，男性行業(yè)藍(lán)色、深綠、黑色等為主，時(shí)尚行業(yè)使用現(xiàn)階段的世界流行色等。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站Logo設(shè)計(jì)步驟與技巧如下：1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)語(yǔ)可以是網(wǎng)站的精神、網(wǎng)站的目標(biāo)、網(wǎng)站的經(jīng)營(yíng)理念，也可以是產(chǎn)品或活動(dòng)等的宣傳廣告語(yǔ)，用一句話甚至一個(gè)詞來高度概括公司。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站標(biāo)語(yǔ)可以是網(wǎng)站的精神、網(wǎng)站的目1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基本元素1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基本元素1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——網(wǎng)頁(yè)版面的基1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——頁(yè)面的尺寸(1)頁(yè)面的安全寬度。當(dāng)顯示分辨率設(shè)置為1024×768，即瀏覽器的屏幕最大寬度為1024像素(簡(jiǎn)寫為px，像素是計(jì)算機(jī)屏幕上所能顯示的最小單位)，因?yàn)g覽器的邊框和垂直方向的滾動(dòng)條占去22像素，所以網(wǎng)頁(yè)的安全寬度為1002像素。所以頁(yè)面的設(shè)計(jì)寬度最好限制在1002像素以內(nèi)。不同計(jì)算機(jī)屏幕由于分辨率設(shè)置的不同，顯示出像素的大小也不同。問：800×6000、1280×960的分辯率頁(yè)面的安全高度為多少？(2)頁(yè)面的最佳長(zhǎng)度。頁(yè)面長(zhǎng)度定義很寬松，要考慮整個(gè)網(wǎng)頁(yè)的下載速度、瀏覽者的方便、信息含量、網(wǎng)站類型等因素，根據(jù)經(jīng)驗(yàn)，中小型網(wǎng)站的頁(yè)面的最佳長(zhǎng)度應(yīng)在1-2屏之間，大型網(wǎng)站在3-4屏左右。問：800×6000、1024×768、1280×960的分辯率頁(yè)面的最佳長(zhǎng)度為多少？1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——頁(yè)面的尺寸1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局對(duì)稱對(duì)比布局：采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺沖擊力強(qiáng)；缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局同字型布局：頁(yè)面上面有廣告條+導(dǎo)航條，左面是鏈接，右面友情連接等，中間是主要內(nèi)容。優(yōu)點(diǎn)是充分利用版面，信息量大；缺點(diǎn)是頁(yè)面擁擠，不靈活?；刈中筒季郑涸谕中偷南旅嬖黾右粋€(gè)橫向通欄，頁(yè)腳充分利用起來。匡字型布局：將回字型的右側(cè)或左側(cè)欄目去掉，改善回字型的封閉型結(jié)構(gòu)。這三種結(jié)構(gòu)及其變形應(yīng)用廣泛。

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布局自由式布局：將圖像、Flash動(dòng)畫或者視頻作為主體內(nèi)容，其他的文字說明及欄目條均被分布到不顯眼的位子，起裝飾作用，這種結(jié)構(gòu)在時(shí)尚類網(wǎng)站中使用的非常多。優(yōu)點(diǎn)：富于美感，可以吸引大量的瀏覽者欣賞；缺點(diǎn)：文字過少，導(dǎo)航條的指引作用不明顯。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)頁(yè)版面布局規(guī)則——常見的網(wǎng)頁(yè)布1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力①你夏天喜歡買百事可樂還是可口可樂？為什么？除了味道的區(qū)別外它們的包裝對(duì)你有影響么？

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力網(wǎng)站色彩知識(shí)——色彩的魔力②你冬天喜歡家里是紅色橙色等顏色，還是深藍(lán)深紫的顏色，為什么？除了個(gè)人色彩習(xí)慣外它們分別給你什么感覺？

1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力③你不開心的時(shí)候看到天氣不好，灰蒙蒙的你怎么想，要是看到陽(yáng)光明媚又會(huì)怎么想？④回憶你買過的女性用品比如化妝品和服飾商標(biāo)和包裝、廣告的主要色彩特征？⑤回憶你見過的男性用品比如剃須刀、打火機(jī)等的包裝、商標(biāo)、廣告的主要色彩特征？色彩的魔力就在于——它可以影響人的情緒?。?.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩的魔力1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備隨著人的經(jīng)驗(yàn)、記憶、知識(shí)、修養(yǎng)、性格、生活環(huán)境、職業(yè)、時(shí)代、民族、年齡、性別等的不同，人對(duì)于色彩的聯(lián)想也不同。我們?cè)O(shè)計(jì)搭配顏色，一定要符合對(duì)象的聯(lián)想習(xí)慣，否則就會(huì)產(chǎn)生不良的聯(lián)想。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備隨著人的經(jīng)驗(yàn)、記憶、知識(shí)、修養(yǎng)、性格、生活環(huán)境、職業(yè)、時(shí)代1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備

光源色和物體色的三原色及其混合對(duì)比圖網(wǎng)站色彩知識(shí)——色彩1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備光源色和物體色的三原色及其混合對(duì)比圖網(wǎng)站色彩知識(shí)——色色調(diào)(色相)、飽和度、色相分別等分為240來表示不同的顏色。色調(diào)在一個(gè)色調(diào)環(huán)上度量，從0到240分別表示從紅、橙、黃、綠、青、藍(lán)、紫再到紅等色調(diào)，0和240都是紅色調(diào)。飽和度最高為240表示最純最艷麗，飽和度最低為0表示最暗。亮度最高為240得到純白，亮度最低為0得到純黑。1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩色調(diào)(色相)、飽和度、色相分別等分為240來表示不同的顏色。高純度、中明度、只有色調(diào)變化的方案

色調(diào)不變、純度不變、只有亮度變化的方案

色調(diào)和亮度不變、只有飽和度變化的方案

網(wǎng)站色彩知識(shí)——色彩色彩調(diào)制練習(xí)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備高純度、中明度、只有色調(diào)不變、純度不變、只有色調(diào)和亮度不變、1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩色彩調(diào)制練習(xí)1.如何設(shè)計(jì)網(wǎng)站—知識(shí)準(zhǔn)備網(wǎng)站色彩知識(shí)——色彩1.如何設(shè)計(jì)網(wǎng)站—學(xué)習(xí)成果《XXX公司網(wǎng)站設(shè)計(jì)商談會(huì)議紀(jì)要》《XXX公司網(wǎng)站構(gòu)圖設(shè)計(jì)》《XXX公司網(wǎng)站設(shè)計(jì)說明書》說明書的規(guī)范化說明書的清晰性說明書的要素1.如何設(shè)計(jì)網(wǎng)站—學(xué)習(xí)成果《XXX公司網(wǎng)站設(shè)計(jì)商談會(huì)議紀(jì)要2.網(wǎng)站制作準(zhǔn)備—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：讓網(wǎng)站制作人員開始進(jìn)行準(zhǔn)備網(wǎng)站制作的工作如何建立網(wǎng)站文件的目錄結(jié)構(gòu)？如何將素材、源文件、網(wǎng)站正確區(qū)分？如何收集整理資料？前面已收集與整理過兩次了，為什么還需收集整理？收集整理的方法在什么地方不同？目標(biāo)：作為網(wǎng)站設(shè)計(jì)師和網(wǎng)站的制作人員，與業(yè)務(wù)顧問和企業(yè)方在考慮網(wǎng)站制作問題時(shí)是不同的，需對(duì)素材和資料進(jìn)行加工，對(duì)素材資料的要求也不同，為網(wǎng)站制作作為準(zhǔn)備。2.網(wǎng)站制作準(zhǔn)備—網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：2.網(wǎng)站制作準(zhǔn)備—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：網(wǎng)站制作的進(jìn)展情況在資料素材不滿足制作時(shí)，給予協(xié)助目標(biāo)：為網(wǎng)站制作作為準(zhǔn)備。2.網(wǎng)站制作準(zhǔn)備—企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：2.網(wǎng)站制作準(zhǔn)備—設(shè)置工作環(huán)境作為網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計(jì)師及網(wǎng)站制作人員作好環(huán)境等準(zhǔn)備，為網(wǎng)站制作作為準(zhǔn)備按實(shí)踐操作步驟開始工作目標(biāo)：作好充分的網(wǎng)站制作準(zhǔn)備2.網(wǎng)站制作準(zhǔn)備—設(shè)置工作環(huán)境作為網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計(jì)師及2.網(wǎng)站制作準(zhǔn)備—學(xué)習(xí)成果

2.網(wǎng)站制作準(zhǔn)備—學(xué)習(xí)成果3.制作網(wǎng)站圖像—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員開始網(wǎng)站制作工作制作網(wǎng)頁(yè)圖像的軟件對(duì)比，使用什么軟件更合適？網(wǎng)頁(yè)圖像的設(shè)計(jì)和制作方法網(wǎng)頁(yè)圖像的設(shè)計(jì)和制作技巧按實(shí)踐操作步驟開始工作目標(biāo)：網(wǎng)站設(shè)計(jì)師設(shè)計(jì)制作完成網(wǎng)站所需的圖像，能達(dá)到要求3.制作網(wǎng)站圖像—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員開始網(wǎng)站3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中圖像設(shè)計(jì)技巧（1）圖文相輔相承，網(wǎng)站整體設(shè)計(jì)簡(jiǎn)潔、美觀。（2）選擇制作精致的圖像，能夠增強(qiáng)網(wǎng)頁(yè)的美觀程度。（3）必須控制好文件尺寸與大小，減小網(wǎng)絡(luò)流量，保證下載速度，增強(qiáng)用戶良好的瀏覽體驗(yàn)。（4）在網(wǎng)頁(yè)中使用同一圖像，一旦含有這一圖像的網(wǎng)頁(yè)被用戶訪問后，其他頁(yè)面被訪問時(shí)，這個(gè)圖像就不會(huì)再次下載，從而提高網(wǎng)站的訪問速度。網(wǎng)站的頁(yè)面背景盡可能采用相同的背景圖，這不但可增加網(wǎng)頁(yè)的一致性，樹立統(tǒng)一風(fēng)格，而且可以避免頁(yè)面跳轉(zhuǎn)時(shí)延長(zhǎng)等待時(shí)間。（5）必須為圖像加文字注解，在圖像沒有下載完之前，用戶能夠了解圖像上的內(nèi)容，避免長(zhǎng)時(shí)間不明等待。（6）可以將大的圖像制作成尺寸、存儲(chǔ)容量小的縮略圖，鏈接到大的圖像上?？s略圖的下載速度快，用戶有興趣再打開大的圖像查看。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中圖像設(shè)計(jì)技巧網(wǎng)頁(yè)中多媒體設(shè)計(jì)的技巧（1）動(dòng)態(tài)效果要為頁(yè)面的整體布局服務(wù)，不能脫離整體風(fēng)格而成為獨(dú)立的個(gè)體，在網(wǎng)頁(yè)的設(shè)計(jì)中以靜為主，輔以動(dòng)態(tài)效果調(diào)劑。網(wǎng)頁(yè)上的動(dòng)態(tài)效果應(yīng)該少而精，一個(gè)頁(yè)面中一般以1～2幅動(dòng)畫為宜，動(dòng)畫太多會(huì)使人眼花繚亂，影響文字內(nèi)容的閱讀，并難以形成和諧搭配。（2）動(dòng)畫的位置一般在頁(yè)面的頁(yè)眉或廣告位處。（3）網(wǎng)頁(yè)中動(dòng)態(tài)效果用于傳播特定信息的，動(dòng)態(tài)效果與網(wǎng)頁(yè)內(nèi)容有機(jī)結(jié)合，不能濫用。對(duì)于內(nèi)容嚴(yán)肅的頁(yè)面更要慎用動(dòng)態(tài)效果。（4）聲音與視頻（流媒體）的文件較大，會(huì)影響下載速度，根據(jù)內(nèi)容需要選擇是否在網(wǎng)頁(yè)中加入視頻和聲音。此外，元素盡量不用非通用的多媒體。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)中多媒體設(shè)計(jì)的技巧3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備矢量圖與位圖矢量圖又叫向量圖，是由點(diǎn)、線、面等來描述和記錄的圖，記錄的是對(duì)象的幾何形狀、線條粗細(xì)、角度、圓弧、面積、填充、色彩等。生成的矢量圖的文件存儲(chǔ)量小，任意放大或縮小而不會(huì)出現(xiàn)圖像失真現(xiàn)象，特別適用于文字設(shè)計(jì)、圖案設(shè)計(jì)、版式設(shè)計(jì)、計(jì)算機(jī)輔助設(shè)計(jì)（CAD）等。但矢量圖不易制作色彩豐富的圖像，并且在不同的軟件之間交換數(shù)據(jù)也不太方便。位圖又叫點(diǎn)陣圖或像素圖，由多個(gè)像素的色彩組合就形成了圖像，打印的圖片或照片由墨點(diǎn)構(gòu)成，計(jì)算機(jī)屏幕上的圖是由屏幕上的發(fā)光點(diǎn)（即像素）構(gòu)成的。在處理位圖圖像時(shí)，編輯的是像素，它的存儲(chǔ)容量和質(zhì)量取決于圖像中的像素點(diǎn)的多少，每單位尺寸中所含像素越多，圖像越清晰，顏色之間的過渡也越平滑。位圖圖像的主要優(yōu)點(diǎn)在于表現(xiàn)力強(qiáng)、真實(shí)感強(qiáng)、細(xì)膩、層次多。但在對(duì)圖像進(jìn)行拉伸、放大等處理時(shí)，其清晰度和光滑度會(huì)因單位尺寸像素點(diǎn)的變化而受到影響。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備矢量圖與位圖3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用的位圖圖像格式（1）GIF：圖像交換格式，該格式能夠支持少于或等于256色的圖像壓縮格式，一般用于主要包含純色的圖像，支持透明和動(dòng)畫。（2）JPG：又名JPEG，支持32位顏色的圖像，能以很高壓縮比來保存圖像而圖像質(zhì)量損失并不多，這在網(wǎng)頁(yè)中的意義是顯著的，既保留了漂亮的圖像，又不太影響訪問者瀏覽網(wǎng)頁(yè)。（3）PNG：具備GIF和JPEG的優(yōu)點(diǎn)，在壓縮時(shí)不會(huì)影響圖像品質(zhì)，且在顯示全彩圖時(shí)可支持48位色彩，在IE4.0版后才支持此圖像格式。（4）BMP：是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式，這種格式的特點(diǎn)是包含的圖像信息較豐富，幾乎不進(jìn)行壓縮，但缺點(diǎn)是占用磁盤空間過大。（5）TIF:TIFF是一種比較靈活的圖像格式，支持256色、24位真彩色、32位色、48位色等，同時(shí)支持GRB、CMYK等多種色彩模式，支持多平臺(tái)等，文件體積較大，適用于印刷。（6）WBMP：是移動(dòng)計(jì)算機(jī)設(shè)備使用的標(biāo)準(zhǔn)圖像格式，這種格式特定使用于WAP網(wǎng)頁(yè)中，支持1位顏色，只包含黑色和白色像素，但版幅較小，多用于WAP網(wǎng)站中的網(wǎng)頁(yè)。通過軟件操作進(jìn)行對(duì)比3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用的位圖圖像格式3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)圖像格式的選擇當(dāng)需要透明圖像、動(dòng)畫圖像、顏色數(shù)少、空間很低的時(shí)候選擇GIF格式；當(dāng)需要簡(jiǎn)單的動(dòng)畫時(shí)使用GIF動(dòng)畫格式。當(dāng)需要相片、有漸變色的圖像、顏色豐富的圖像、需要大量壓縮圖像存儲(chǔ)容量時(shí)選擇JPG格式。壓縮時(shí)在圖像處理軟件中可以設(shè)置壓縮品質(zhì)的值。在網(wǎng)頁(yè)中較少使用BMP和TIFF格式。PNG是Fireworks可編輯的源文件，也可以導(dǎo)出PNG格式的文件，PNG8、PNG24、PNG32表示圖像顏色數(shù)多少,導(dǎo)出后的PNG不是Fireworks的源文件。不要在網(wǎng)頁(yè)中直接使用Fireworks的源文件，因其不具有隱私性。但如果是其他軟件（如PhotoShop）處理PNG格式是被當(dāng)作與GIF和JPG類似的文件。另外，PNG源文件和導(dǎo)出文件都不具備GIF的動(dòng)畫功能。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備網(wǎng)頁(yè)圖像格式的選擇3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用多媒體格式有3種。（1）聲音格式：有WAV、MP3、MIDI、WMA、RA、AU等格式，它們是以不同的方式模擬聲音，經(jīng)抽樣、量化和編碼后得到不同的格式，都由表示聲音強(qiáng)弱的數(shù)據(jù)序列組成。（2）視頻格式：可分為適合本地播放的本地影像視頻（如AVI、MOV、MPEG等）和適合在網(wǎng)絡(luò)中播放的網(wǎng)絡(luò)流媒體影像視頻（RM、MOV、ASF、FLV等）兩大類。后者在播放的穩(wěn)定性和播放畫面質(zhì)量上可能沒有前者優(yōu)秀，但網(wǎng)絡(luò)流媒體（聲音、動(dòng)畫、視頻等）的高速傳播使之被廣泛應(yīng)用于視頻點(diǎn)播、網(wǎng)絡(luò)演示、遠(yuǎn)程教育、網(wǎng)絡(luò)視頻廣告等互聯(lián)網(wǎng)信息服務(wù)領(lǐng)域。（3）動(dòng)畫格式：制作動(dòng)畫的軟件有很多，在網(wǎng)站中最常用的動(dòng)畫是GIF動(dòng)畫和Flash動(dòng)畫，動(dòng)畫格式和視頻格式之間可以進(jìn)行轉(zhuǎn)換和壓縮。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備常用多媒體格式有3種。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備Fireworks簡(jiǎn)介Fireworks是用來設(shè)計(jì)制作專業(yè)化網(wǎng)頁(yè)圖像的應(yīng)用軟件，可以有效地幫助網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)人員解決一些的特殊問題。Fireworks與Adobe公司的其他產(chǎn)品（如Dreamweaver、Flash、Photoshop、Illustator）一起提供了一個(gè)完備的Web集成解決方案。本教材主要以Adobe

FireworksCS3版本為參照進(jìn)行講解。Fireworks的工作界面由四部分組成：視圖面板、功能面板、工具箱面板、屬性面板。3.制作網(wǎng)站圖像—知識(shí)準(zhǔn)備Fireworks簡(jiǎn)介首頁(yè)圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)首頁(yè)圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)次級(jí)頁(yè)面圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)次級(jí)頁(yè)面圖像分解圖3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。重點(diǎn)提示：圖像上的特殊字體，需要在到網(wǎng)上下載字體（如：大寶庫(kù)http:///），下載后的字體解壓縮后（）復(fù)制到“控制面板”的“字體”窗口中，就能在各軟件中使用。對(duì)于不常用的字體，要能正常顯示只能用圖像的形式。顯示器分辯率的默認(rèn)值為72像素/英寸，不用更改，表示顯示器每英寸為72個(gè)像素點(diǎn)（px），而網(wǎng)頁(yè)的圖像是相對(duì)于顯示器屏幕進(jìn)行顯示的，教程中所有圖像都是為網(wǎng)頁(yè)設(shè)計(jì)制作的，后續(xù)所有的分辨率都不進(jìn)行修改，后續(xù)圖像制作過程不再詳述此步驟。而圖像打印機(jī)打印圖像時(shí)分辨率是不同的，打印尺寸固定，分辨率越高，打印的圖像清晰度越高，但在顯示器上看圖像，分辨率越高圖像就越大，但這并不表示打印尺寸會(huì)變大。切片是將圖像分割成多個(gè)小區(qū)域，從而實(shí)現(xiàn)對(duì)大圖像的無(wú)損分割。當(dāng)包含此圖像的網(wǎng)頁(yè)被訪問時(shí)，能實(shí)現(xiàn)邊下載邊呈現(xiàn)的顯示效果，而不會(huì)出現(xiàn)頁(yè)面長(zhǎng)時(shí)間沒有變化的情形。GIF動(dòng)畫是一種圖像格式，原理很簡(jiǎn)單：把幾幅圖像不停地輪流播放。它的優(yōu)點(diǎn)是體積小，利于網(wǎng)絡(luò)快速傳輸。3.制作網(wǎng)站圖像—實(shí)踐指導(dǎo)詳細(xì)操作見“操作演示視頻”。3.制作網(wǎng)站圖像—學(xué)習(xí)成果完成網(wǎng)站所需的所有圖像3.制作網(wǎng)站圖像—學(xué)習(xí)成果完成網(wǎng)站所需的所有圖像4、用HTML制作網(wǎng)頁(yè)—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員進(jìn)行網(wǎng)頁(yè)制作工作HTML標(biāo)記和語(yǔ)法是否熟記、清晰使用HTML制作網(wǎng)頁(yè)的方法使用HTML制作網(wǎng)頁(yè)技巧按實(shí)踐操作步驟開始工作目標(biāo)：網(wǎng)站設(shè)計(jì)師（網(wǎng)頁(yè)制作人員）設(shè)計(jì)制作完成網(wǎng)站所需的網(wǎng)頁(yè)，能達(dá)到要求4、用HTML制作網(wǎng)頁(yè)—設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員進(jìn)4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——訪問WWW打開IE瀏覽器，在地址欄輸入：訪問WWW的過程：用戶通過瀏覽器將期望訪問的URL發(fā)向互聯(lián)網(wǎng)，由互聯(lián)網(wǎng)確定相應(yīng)的服務(wù)器，并將訪問請(qǐng)求傳送到這一服務(wù)器，服務(wù)器找到到信息后以文件的形式通過互聯(lián)網(wǎng)傳回用戶的計(jì)算機(jī)，最后由瀏覽器將信息呈現(xiàn)出來。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——訪問WWW認(rèn)識(shí)HTML——查看HTML文檔打開IE瀏覽器，打開百度網(wǎng)站的主頁(yè)后，點(diǎn)選IE瀏覽器的菜單命令“查看”/“源文件”，會(huì)彈出如下圖所示的窗口：4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——查看HTML文檔4、用HTML制作網(wǎng)頁(yè)—知識(shí)認(rèn)識(shí)HTML——什么是HTMLhtml文件的結(jié)構(gòu)：

<html>HTML文件開始

<head>文件頭開始

<title>網(wǎng)頁(yè)的標(biāo)題</title>網(wǎng)頁(yè)的標(biāo)題

</head>文件頭結(jié)束

<body>文件體開始

網(wǎng)頁(yè)的內(nèi)容網(wǎng)頁(yè)的內(nèi)容區(qū)

</body>文件體結(jié)束

</html>HTML文件結(jié)束注意：網(wǎng)頁(yè)文件的擴(kuò)展名為：*.HTML或*.HTM4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備操作演示簡(jiǎn)單網(wǎng)頁(yè)的制作過程認(rèn)識(shí)HTML——什么是HTML注意：網(wǎng)頁(yè)文件的擴(kuò)展名為：*.認(rèn)識(shí)HTML——什么是HTMLHTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言，它通過標(biāo)記式指令將影像、聲音、圖片和文字等邊接起來。幾乎所有的網(wǎng)頁(yè)都是由HTML或以其他程序語(yǔ)言嵌套在HTML中編寫的。HTML不是程序語(yǔ)言，而是一種結(jié)構(gòu)語(yǔ)言，它具有平臺(tái)無(wú)關(guān)性的特點(diǎn)。無(wú)論用戶使用何種操作系統(tǒng)，只要有瀏覽器，就可以運(yùn)行HTML文檔。瀏覽器是一種應(yīng)用軟件，用于與WWW建立連接，并與之進(jìn)行通信，在WWW中根據(jù)鏈接確定信息資源的位置，并把信息資源取回來，對(duì)網(wǎng)頁(yè)文件進(jìn)行解釋，然后將文字、圖像、多媒體等信息還原出來。屏幕上看到的網(wǎng)頁(yè)是瀏覽器對(duì)網(wǎng)頁(yè)文件的翻譯。4、用HTML制作網(wǎng)頁(yè)—知識(shí)準(zhǔn)備認(rèn)識(shí)HTML——什么是HTML4、用HTML制作