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

1、分析需求，設(shè)計和制作網(wǎng)站 目錄教學目標工作流程知識準備學習成果1.如何設(shè)計網(wǎng)站2.網(wǎng)站制作準備3.制作網(wǎng)站圖像4.用HTML制作網(wǎng)頁5.網(wǎng)站測試教學目標網(wǎng)站設(shè)計步驟及原則；網(wǎng)站CIS設(shè)計知識；網(wǎng)頁版面布局規(guī)則；網(wǎng)站色彩知識；圖像與多媒體知識；Fireworks操作方法；HTML技術(shù)；網(wǎng)站鏈接與外觀測試方法；工作流程知識準備參考網(wǎng)站：Firework視頻教程：/eschool/zhuanti/fireworks/Firework文字教程：/3/7/index.htmlHTML視頻教程：/xhtml/video/2008/0528/20080528017101.shtml圖像素材下載網(wǎng)站：模板王

2、/ 懶人圖庫 /字體下載網(wǎng)站：字體下載大寶庫/教材 其他參考素材學習成果根據(jù)工作任務(wù)1中描述的公司概況、完成的網(wǎng)站策劃書、網(wǎng)站建設(shè)合同、網(wǎng)站需求分析說明書、資料清單、資源與進度規(guī)劃表，進行網(wǎng)站設(shè)計，實現(xiàn)和測試網(wǎng)站 。獨立思考，真正理解所運用到的知識和所遵循的工作過程，能夠在反復的獨立操作過程中記住這些工作流程和技能知識。疑難處咨詢教師，讓教師給予適當?shù)闹笇А?上交作品時，包括XXXX公司網(wǎng)站設(shè)計說明書和三個文件夾：網(wǎng)站文件夾、源文件夾、素材文件夾。 1.如何設(shè)計網(wǎng)站企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：根據(jù)需求，進一步確定需要的、具體的功能效果和視覺效果？如何與對方溝通設(shè)計要求？對方完成設(shè)計后

3、仔細閱讀設(shè)計說明書，設(shè)計是否能達到自身的要求？目標：明確設(shè)計要求，協(xié)助網(wǎng)站公司完成設(shè)計1.如何設(shè)計網(wǎng)站網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：根據(jù)對方的需求和設(shè)計要求，對方到底具體需要什么樣的功能效果和視覺效果？網(wǎng)站設(shè)計師與業(yè)務(wù)顧問間如何銜接為企業(yè)方作好設(shè)計？網(wǎng)站的設(shè)計過程與原則？網(wǎng)站的設(shè)計要素？具體如何設(shè)計、如何創(chuàng)意？如何與對方溝通確認設(shè)計結(jié)果？誰與誰？什么時間地點？對方不滿意如何進行修改，滿意后如何簽字確認？目標：網(wǎng)站設(shè)計師與業(yè)務(wù)顧問進行良好溝通，網(wǎng)站設(shè)計師掌握網(wǎng)站設(shè)計的方法，設(shè)計出符合客戶要求，規(guī)范編寫網(wǎng)站設(shè)計說明書，業(yè)務(wù)顧問再與企業(yè)方溝通確認。1.如何設(shè)計網(wǎng)站設(shè)置工作情境接著工作任務(wù)1中情境模

4、擬的分組，繼續(xù)扮演企業(yè)方和網(wǎng)站建設(shè)公司，增加新的角色，商討確定網(wǎng)站的設(shè)計方案雙方溝通設(shè)計細節(jié)，網(wǎng)站公司研究方案進行詳細設(shè)計，形成網(wǎng)站設(shè)計說明書，最后確認簽字角色交叉，繼續(xù)完成目標：仿真模擬網(wǎng)站設(shè)計的過程，共同完成符合企業(yè)方要求的網(wǎng)站設(shè)計說明書。1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站設(shè)計步驟及原則 第1步：精心規(guī)劃網(wǎng)站框架第2步：網(wǎng)站內(nèi)容設(shè)計第3步：網(wǎng)站CIS設(shè)計第4步：網(wǎng)站版面設(shè)計學生練習：使用公司經(jīng)營的產(chǎn)品或服務(wù)的對象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應的企業(yè)網(wǎng)站，對比學習各網(wǎng)站框架、功能內(nèi)容、CIS、版面設(shè)計1.如何設(shè)計網(wǎng)站知識準備案例分析螞蟻集團網(wǎng)站：/ 螞蟻搬家網(wǎng)站：/螞蟻集團標準標志這是一只工作中的螞蟻

5、，隨時為您服務(wù)。搬家螞蟻，不知疲倦，肩負重任，大步向前。保潔螞蟻，粗中有細，熱情服務(wù)，手到塵去。汽修螞蟻，技能全面，排憂解難，馬不停蹄。1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站結(jié)構(gòu)設(shè)計規(guī)則1、網(wǎng)站鏈接結(jié)構(gòu)平鋪型結(jié)構(gòu)樹型結(jié)構(gòu)混合型結(jié)構(gòu)1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站結(jié)構(gòu)設(shè)計規(guī)則2、網(wǎng)站的目錄結(jié)構(gòu)和命名（1）不要將所有文件都放在根目錄下（2）按欄目內(nèi)容建立子目錄（3）在根目錄和主欄目下建立Images文件夾 （4）目錄的層次不要太深（5）不能使用過長的目錄名和文件名（6）不能使用中文目錄名和文件名（7）使用意義明確的目錄名和文件名 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站CIS設(shè)計知識在網(wǎng)站CIS設(shè)計中，通常以“四標”來確定

6、，即網(wǎng)站標識、網(wǎng)站標語、標準顏色、標準字體學生拓展任務(wù)：使用公司經(jīng)營的產(chǎn)品或服務(wù)的對象為關(guān)鍵詞在互聯(lián)網(wǎng)中搜索相應的企業(yè)網(wǎng)站，對比學習各網(wǎng)站使用的標識、標語、標準顏色、標準字體1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站標識（Logo）就如同商標一樣，是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。在網(wǎng)站形象設(shè)計中，網(wǎng)站標識同網(wǎng)站名稱一樣重要，看見Logo就能使訪問者聯(lián)想起你的站點。 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站Logo設(shè)計步驟與技巧如下：（1）經(jīng)過分析，提煉出核心詞匯作為Logo的主體。（2）選擇適宜的字體，多數(shù)時候人們都避免直接選用字庫中的字體，字庫中的字體是為了印刷、閱讀而設(shè)計的，需將其圖形化才符合Logo的要求。（3）如果

7、對字體的變形比較少，或者難于對字體進行變形，就需加上圖形來輔助。圖形創(chuàng)意是一項有難度的工作，在進行圖形創(chuàng)意的時候，需要多參考別人的標志和圖形設(shè)計。網(wǎng)站Logo多采用卡通化的自由風格，但也有的企業(yè)網(wǎng)站采用企業(yè)VI系統(tǒng)中的標志圖形，對于圖形的選擇需要與客戶充分溝通，真正了解客戶特點，理解企業(yè)文化。（4）如果企業(yè)VI系統(tǒng)中已經(jīng)指定了標準色，就按企業(yè)提供的標準色進行設(shè)計，如果沒有標準色作為參考，Logo色彩的選擇就要符合客戶的行業(yè)特征，如機械電子行業(yè)藍色為主，食品行業(yè)嫩黃、金黃、巧克力色等為主，女性行業(yè)粉色、紫、玫瑰等色為主，男性行業(yè)藍色、深綠、黑色等為主，時尚行業(yè)使用現(xiàn)階段的世界流行色等。1.如何設(shè)

8、計網(wǎng)站知識準備網(wǎng)站標語可以是網(wǎng)站的精神、網(wǎng)站的目標、網(wǎng)站的經(jīng)營理念，也可以是產(chǎn)品或活動等的宣傳廣告語，用一句話甚至一個詞來高度概括公司。 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)頁版面布局規(guī)則 網(wǎng)頁版面的基本元素 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)頁版面布局規(guī)則 網(wǎng)頁版面的基本元素 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)頁版面布局規(guī)則 頁面的尺寸 (1) 頁面的安全寬度。當顯示分辨率設(shè)置為1024768，即瀏覽器的屏幕最大寬度為1024像素(簡寫為px，像素是計算機屏幕上所能顯示的最小單位)，因瀏覽器的邊框和垂直方向的滾動條占去22像素，所以網(wǎng)頁的安全寬度為1002像素。所以頁面的設(shè)計寬度最好限制在1002像素以內(nèi)。不同計算機

9、屏幕由于分辨率設(shè)置的不同，顯示出像素的大小也不同。問：8006000、1280960的分辯率頁面的安全高度為多少？(2) 頁面的最佳長度。頁面長度定義很寬松，要考慮整個網(wǎng)頁的下載速度、瀏覽者的方便、信息含量、網(wǎng)站類型等因素，根據(jù)經(jīng)驗，中小型網(wǎng)站的頁面的最佳長度應在1-2屏之間，大型網(wǎng)站在3-4屏左右。問：8006000、 1024768 、1280960的分辯率頁面的最佳長度為多少？1.如何設(shè)計網(wǎng)站知識準備網(wǎng)頁版面布局規(guī)則 常見的網(wǎng)頁布局 對稱對比布局：采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型站點。優(yōu)點是視覺沖擊力強；缺點是將兩部分有機的結(jié)合比較困難。 1.如何設(shè)計網(wǎng)站知

10、識準備網(wǎng)頁版面布局規(guī)則 常見的網(wǎng)頁布局 同字型布局：頁面上面有廣告條+導航條，左面是鏈接，右面友情連接等，中間是主要內(nèi)容。優(yōu)點是充分利用版面，信息量大；缺點是頁面擁擠，不靈活。回字型布局：在同字型的下面增加一個橫向通欄，頁腳充分利用起來?？镒中筒季郑簩⒒刈中偷挠覀?cè)或左側(cè)欄目去掉，改善回字型的封閉型結(jié)構(gòu)。這三種結(jié)構(gòu)及其變形應用廣泛。 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)頁版面布局規(guī)則 常見的網(wǎng)頁布局 自由式布局：將圖像、Flash動畫或者視頻作為主體內(nèi)容，其他的文字說明及欄目條均被分布到不顯眼的位子，起裝飾作用，這種結(jié)構(gòu)在時尚類網(wǎng)站中使用的非常多。優(yōu)點：富于美感，可以吸引大量的瀏覽者欣賞；缺點：文字過少，

11、導航條的指引作用不明顯。 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站色彩知識色彩的魔力 你夏天喜歡買百事可樂還是可口可樂？為什么？除了味道的區(qū)別外它們的包裝對你有影響么？ 網(wǎng)站色彩知識色彩的魔力 你冬天喜歡家里是紅色橙色等顏色，還是深藍深紫的顏色，為什么？除了個人色彩習慣外它們分別給你什么感覺？ 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站色彩知識色彩的魔力 你不開心的時候看到天氣不好，灰蒙蒙的你怎么想，要是看到陽光明媚又會 怎么想？ 回憶你買過的女性用品比如化妝品和服飾商標和包裝、廣告的主要色彩特征？ 回憶你見過的男性用品比如剃須刀、打火機等的包裝、商標、廣告的主要色 彩特征？色彩的魔力就在于 它可以影響人的情緒！1.如

12、何設(shè)計網(wǎng)站知識準備隨著人的經(jīng)驗、記憶、知識、修養(yǎng)、性格、生活環(huán)境、 職業(yè)、時代、民族、年齡、性別等的不同，人對于色彩的聯(lián)想也不同。我們設(shè)計搭配顏色，一定要符合對象的聯(lián)想習慣，否則就會產(chǎn)生不良的聯(lián)想。 1.如何設(shè)計網(wǎng)站知識準備1.如何設(shè)計網(wǎng)站知識準備1.如何設(shè)計網(wǎng)站知識準備 光源色和物體色的三原色及其混合對比圖網(wǎng)站色彩知識色彩1.如何設(shè)計網(wǎng)站知識準備色調(diào)(色相)、飽和度、色相分別等分為240來表示不同的顏色。色調(diào)在一個色調(diào)環(huán)上度量，從0到240分別表示從紅、橙、黃、綠、青、藍、紫再到紅等色調(diào)，0和240都是紅色調(diào)。飽和度最高為240表示最純最艷麗，飽和度最低為0表示最暗。亮度最高為240得到純白

13、，亮度最低為0得到純黑。 1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站色彩知識色彩高純度、中明度、只有色調(diào)變化的方案 色調(diào)不變、純度不變、只有亮度變化的方案 色調(diào)和亮度不變、只有飽和度變化的方案 網(wǎng)站色彩知識色彩色彩調(diào)制練習1.如何設(shè)計網(wǎng)站知識準備1.如何設(shè)計網(wǎng)站知識準備網(wǎng)站色彩知識色彩色彩調(diào)制練習1 .如何設(shè)計網(wǎng)站學習成果XXX公司網(wǎng)站設(shè)計商談會議紀要 XXX公司網(wǎng)站構(gòu)圖設(shè)計XXX公司網(wǎng)站設(shè)計說明書說明書的規(guī)范化說明書的清晰性說明書的要素2.網(wǎng)站制作準備網(wǎng)站公司作為網(wǎng)站建設(shè)公司，考慮：讓網(wǎng)站制作人員開始進行準備網(wǎng)站制作的工作如何建立網(wǎng)站文件的目錄結(jié)構(gòu)？如何將素材、源文件、網(wǎng)站正確區(qū)分？如何收集整理資料？前面

14、已收集與整理過兩次了，為什么還需收集整理？收集整理的方法在什么地方不同？目標：作為網(wǎng)站設(shè)計師和網(wǎng)站的制作人員，與業(yè)務(wù)顧問和企業(yè)方在考慮網(wǎng)站制作問題時是不同的，需對素材和資料進行加工，對素材資料的要求也不同，為網(wǎng)站制作作為準備。2.網(wǎng)站制作準備企業(yè)方作為需要建設(shè)網(wǎng)站的企業(yè)方，關(guān)注：網(wǎng)站制作的進展情況在資料素材不滿足制作時，給予協(xié)助目標：為網(wǎng)站制作作為準備。2.網(wǎng)站制作準備設(shè)置工作環(huán)境作為網(wǎng)站建設(shè)公司，網(wǎng)站設(shè)計師及網(wǎng)站制作人員作好環(huán)境等準備，為網(wǎng)站制作作為準備按實踐操作步驟開始工作目標：作好充分的網(wǎng)站制作準備2.網(wǎng)站制作準備學習成果 3.制作網(wǎng)站圖像設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員開始網(wǎng)站制作工

15、作制作網(wǎng)頁圖像的軟件對比，使用什么軟件更合適？網(wǎng)頁圖像的設(shè)計和制作方法網(wǎng)頁圖像的設(shè)計和制作技巧按實踐操作步驟開始工作目標：網(wǎng)站設(shè)計師設(shè)計制作完成網(wǎng)站所需的圖像，能達到要求3.制作網(wǎng)站圖像知識準備網(wǎng)頁中圖像設(shè)計技巧（1）圖文相輔相承，網(wǎng)站整體設(shè)計簡潔、美觀。（2）選擇制作精致的圖像，能夠增強網(wǎng)頁的美觀程度。（3）必須控制好文件尺寸與大小，減小網(wǎng)絡(luò)流量，保證下載速度，增強用戶良好的瀏覽體驗。（4）在網(wǎng)頁中使用同一圖像，一旦含有這一圖像的網(wǎng)頁被用戶訪問后，其他頁面被訪問時，這個圖像就不會再次下載，從而提高網(wǎng)站的訪問速度。網(wǎng)站的頁面背景盡可能采用相同的背景圖，這不但可增加網(wǎng)頁的一致性，樹立統(tǒng)一風格，而

16、且可以避免頁面跳轉(zhuǎn)時延長等待時間。（5）必須為圖像加文字注解，在圖像沒有下載完之前，用戶能夠了解圖像上的內(nèi)容，避免長時間不明等待。（6）可以將大的圖像制作成尺寸、存儲容量小的縮略圖，鏈接到大的圖像上。縮略圖的下載速度快，用戶有興趣再打開大的圖像查看。網(wǎng)頁中多媒體設(shè)計的技巧（1）動態(tài)效果要為頁面的整體布局服務(wù)，不能脫離整體風格而成為獨立的個體，在網(wǎng)頁的設(shè)計中以靜為主，輔以動態(tài)效果調(diào)劑。網(wǎng)頁上的動態(tài)效果應該少而精，一個頁面中一般以12幅動畫為宜，動畫太多會使人眼花繚亂，影響文字內(nèi)容的閱讀，并難以形成和諧搭配。（2）動畫的位置一般在頁面的頁眉或廣告位處。（3）網(wǎng)頁中動態(tài)效果用于傳播特定信息的，動態(tài)效

17、果與網(wǎng)頁內(nèi)容有機結(jié)合，不能濫用。對于內(nèi)容嚴肅的頁面更要慎用動態(tài)效果。（4）聲音與視頻（流媒體）的文件較大，會影響下載速度，根據(jù)內(nèi)容需要選擇是否在網(wǎng)頁中加入視頻和聲音。此外，元素盡量不用非通用的多媒體。3.制作網(wǎng)站圖像知識準備3.制作網(wǎng)站圖像知識準備矢量圖與位圖矢量圖又叫向量圖，是由點、線、面等來描述和記錄的圖，記錄的是對象的幾何形狀、線條粗細、角度、圓弧、面積、填充、色彩等。生成的矢量圖的文件存儲量小，任意放大或縮小而不會出現(xiàn)圖像失真現(xiàn)象，特別適用于文字設(shè)計、圖案設(shè)計、版式設(shè)計、計算機輔助設(shè)計（CAD）等。但矢量圖不易制作色彩豐富的圖像，并且在不同的軟件之間交換數(shù)據(jù)也不太方便。位圖又叫點陣圖或

18、像素圖，由多個像素的色彩組合就形成了圖像，打印的圖片或照片由墨點構(gòu)成，計算機屏幕上的圖是由屏幕上的發(fā)光點（即像素）構(gòu)成的。在處理位圖圖像時，編輯的是像素，它的存儲容量和質(zhì)量取決于圖像中的像素點的多少，每單位尺寸中所含像素越多，圖像越清晰，顏色之間的過渡也越平滑。位圖圖像的主要優(yōu)點在于表現(xiàn)力強、真實感強、細膩、層次多。但在對圖像進行拉伸、放大等處理時，其清晰度和光滑度會因單位尺寸像素點的變化而受到影響。3.制作網(wǎng)站圖像知識準備常用的位圖圖像格式（1）GIF：圖像交換格式，該格式能夠支持少于或等于256色的圖像壓縮格式，一般用于主要包含純色的圖像，支持透明和動畫。 （2）JPG：又名JPEG，支持

19、32位顏色的圖像，能以很高壓縮比來保存圖像而圖像質(zhì)量損失并不多，這在網(wǎng)頁中的意義是顯著的，既保留了漂亮的圖像，又不太影響訪問者瀏覽網(wǎng)頁。（3）PNG：具備GIF和JPEG的優(yōu)點，在壓縮時不會影響圖像品質(zhì)，且在顯示全彩圖時可支持48位色彩，在IE 4.0版后才支持此圖像格式。（4）BMP：是Windows操作系統(tǒng)中的標準圖像文件格式，這種格式的特點是包含的圖像信息較豐富，幾乎不進行壓縮，但缺點是占用磁盤空間過大。（5）TIF:TIFF是一種比較靈活的圖像格式，支持256色、24位真彩色、32位色、48位色等，同時支持GRB、CMYK等多種色彩模式，支持多平臺等，文件體積較大，適用于印刷。（6）W

20、BMP：是移動計算機設(shè)備使用的標準圖像格式，這種格式特定使用于WAP網(wǎng)頁中，支持1位顏色，只包含黑色和白色像素，但版幅較小，多用于WAP網(wǎng)站中的網(wǎng)頁。通過軟件操作進行對比3.制作網(wǎng)站圖像知識準備網(wǎng)頁圖像格式的選擇當需要透明圖像、動畫圖像、顏色數(shù)少、空間很低的時候選擇GIF格式；當需要簡單的動畫時使用GIF動畫格式。當需要相片、有漸變色的圖像、顏色豐富的圖像、需要大量壓縮圖像存儲容量時選擇JPG格式。壓縮時在圖像處理軟件中可以設(shè)置壓縮品質(zhì)的值。在網(wǎng)頁中較少使用BMP和TIFF格式。PNG是Fireworks可編輯的源文件，也可以導出PNG格式的文件，PNG8、PNG24、PNG32表示圖像顏色數(shù)

21、多少,導出后的PNG不是Fireworks的源文件。不要在網(wǎng)頁中直接使用Fireworks的源文件，因其不具有隱私性。但如果是其他軟件（如PhotoShop）處理PNG格式是被當作與GIF和JPG類似的文件。另外，PNG源文件和導出文件都不具備GIF的動畫功能。3.制作網(wǎng)站圖像知識準備常用多媒體格式有3種。（1）聲音格式：有WAV、MP3、MIDI、WMA、RA、AU等格式，它們是以不同的方式模擬聲音，經(jīng)抽樣、量化和編碼后得到不同的格式，都由表示聲音強弱的數(shù)據(jù)序列組成。（2）視頻格式：可分為適合本地播放的本地影像視頻（如AVI、MOV、MPEG等）和適合在網(wǎng)絡(luò)中播放的網(wǎng)絡(luò)流媒體影像視頻（RM、

22、MOV、ASF、FLV等）兩大類。后者在播放的穩(wěn)定性和播放畫面質(zhì)量上可能沒有前者優(yōu)秀，但網(wǎng)絡(luò)流媒體（聲音、動畫、視頻等）的高速傳播使之被廣泛應用于視頻點播、網(wǎng)絡(luò)演示、遠程教育、網(wǎng)絡(luò)視頻廣告等互聯(lián)網(wǎng)信息服務(wù)領(lǐng)域。（3）動畫格式：制作動畫的軟件有很多，在網(wǎng)站中最常用的動畫是GIF動畫和Flash動畫，動畫格式和視頻格式之間可以進行轉(zhuǎn)換和壓縮。 3.制作網(wǎng)站圖像知識準備Fireworks簡介Fireworks是用來設(shè)計制作專業(yè)化網(wǎng)頁圖像的應用軟件，可以有效地幫助網(wǎng)頁設(shè)計和開發(fā)人員解決一些的特殊問題。 Fireworks與Adobe公司的其他產(chǎn)品（如Dreamweaver、Flash、Photosho

23、p、Illustator）一起提供了一個完備的Web集成解決方案。本教材主要以AdobeFireworks CS3版本為參照進行講解。 Fireworks的工作界面由四部分組成：視圖面板、功能面板、工具箱面板、屬性面板。首頁圖像分解圖3.制作網(wǎng)站圖像實踐指導次級頁面圖像分解圖3.制作網(wǎng)站圖像實踐指導3.制作網(wǎng)站圖像實踐指導詳細操作見“操作演示視頻”。重點提示：圖像上的特殊字體，需要在到網(wǎng)上下載字體（如：大寶庫http:/ /），下載后的字體解壓縮后（）復制到“控制面板”的“字體”窗口中，就能在各軟件中使用。對于不常用的字體，要能正常顯示只能用圖像的形式。顯示器分辯率的默認值為72像素/英寸，不

24、用更改，表示顯示器每英寸為72個像素點（px），而網(wǎng)頁的圖像是相對于顯示器屏幕進行顯示的，教程中所有圖像都是為網(wǎng)頁設(shè)計制作的，后續(xù)所有的分辨率都不進行修改，后續(xù)圖像制作過程不再詳述此步驟。而圖像打印機打印圖像時分辨率是不同的，打印尺寸固定，分辨率越高，打印的圖像清晰度越高，但在顯示器上看圖像，分辨率越高圖像就越大，但這并不表示打印尺寸會變大。 切片是將圖像分割成多個小區(qū)域，從而實現(xiàn)對大圖像的無損分割。當包含此圖像的網(wǎng)頁被訪問時，能實現(xiàn)邊下載邊呈現(xiàn)的顯示效果，而不會出現(xiàn)頁面長時間沒有變化的情形。GIF動畫是一種圖像格式，原理很簡單：把幾幅圖像不停地輪流播放。它的優(yōu)點是體積小，利于網(wǎng)絡(luò)快速傳輸。

25、3.制作網(wǎng)站圖像學習成果完成網(wǎng)站所需的所有圖像4、用HTML制作網(wǎng)頁設(shè)置工作情境網(wǎng)站建設(shè)公司的工作人員進行網(wǎng)頁制作工作HTML標記和語法是否熟記、清晰使用HTML制作網(wǎng)頁的方法使用HTML制作網(wǎng)頁技巧按實踐操作步驟開始工作目標：網(wǎng)站設(shè)計師（網(wǎng)頁制作人員）設(shè)計制作完成網(wǎng)站所需的網(wǎng)頁，能達到要求4、用HTML制作網(wǎng)頁知識準備認識HTML訪問WWW打開IE瀏覽器，在地址欄輸入：訪問WWW的過程：用戶通過瀏覽器將期望訪問的URL發(fā)向互聯(lián)網(wǎng)，由互聯(lián)網(wǎng)確定相應的服務(wù)器，并將訪問請求傳送到這一服務(wù)器，服務(wù)器找到到信息后以文件的形式通過互聯(lián)網(wǎng)傳回用戶的計算機，最后由瀏覽器將信息呈現(xiàn)出來。認識HTML查看HTM

26、L文檔 打開IE瀏覽器，打開百度網(wǎng)站的主頁后，點選IE瀏覽器的菜單命令“查看”/“源文件”，會彈出如下圖所示的窗口：4、用HTML制作網(wǎng)頁知識準備認識HTML什么是HTMLhtml文件的結(jié)構(gòu)： HTML文件開始 文件頭開始 網(wǎng)頁的標題 網(wǎng)頁的標題 文件頭結(jié)束 文件體開始 網(wǎng)頁的內(nèi)容 網(wǎng)頁的內(nèi)容區(qū) 文件體結(jié)束 HTML文件結(jié)束注意：網(wǎng)頁文件的擴展名為：*.HTML或*.HTM4、用HTML制作網(wǎng)頁知識準備操作演示簡單網(wǎng)頁的制作過程認識HTML什么是HTMLHTML（Hyper Text Markup Language，超文本標記語言）是一種用來制作超文本文檔的簡單標記語言，它通過標記式指令將影像

27、、聲音、圖片和文字等邊接起來。幾乎所有的網(wǎng)頁都是由HTML或以其他程序語言嵌套在HTML中編寫的。HTML不是程序語言，而是一種結(jié)構(gòu)語言，它具有平臺無關(guān)性的特點。無論用戶使用何種操作系統(tǒng)，只要有瀏覽器，就可以運行HTML文檔。瀏覽器是一種應用軟件，用于與WWW建立連接，并與之進行通信，在WWW中根據(jù)鏈接確定信息資源的位置，并把信息資源取回來，對網(wǎng)頁文件進行解釋，然后將文字、圖像、多媒體等信息還原出來。屏幕上看到的網(wǎng)頁是瀏覽器對網(wǎng)頁文件的翻譯。4、用HTML制作網(wǎng)頁知識準備URL如何表示什么是URLURL：即統(tǒng)一資源定位符(Uniform/Universal Resource Locator)，

28、也被稱為網(wǎng)頁地址，用來作為萬維網(wǎng)的地址。網(wǎng)頁文件的鏈接和圖像、動畫、視頻等的調(diào)用都使用URL表示，URL分為絕對地址和相對地址。網(wǎng)頁文件中的圖像不是網(wǎng)頁的一部分（圖像是獨立的），而是被網(wǎng)頁文件調(diào)用。瀏覽器從HTML代碼中讀取圖像的位置，然后把圖像放在網(wǎng)頁上。與此相似，音頻或視頻文件也被HTML文件調(diào)用，然后被瀏覽器組裝。訪問過程演示4、用HTML制作網(wǎng)頁知識準備URL如何表示絕對地址1）絕對地址（1） 外部站點：http:/主機名或IP地址:端口號/路徑名/文件名 如：/intl/zh-CN/adwords/reseller.html主機名或IP地址：表示Internet的服務(wù)器名。端口號：指

29、不同應用程序所對應的不同的端口協(xié)議，用來識別計算機主機申請的服務(wù)。一般在默認的情況下都是使用默認的端口號，可省略。路徑名/文件名是信息資源在服務(wù)器上存放的路徑和文件名。在使用默認路徑和默認文檔時可省略。（2） 局域網(wǎng)內(nèi)計算機：/計算機名/盤符/路徑名/文件名（3） 本地文件：盤符/路徑名/文件名4、用HTML制作網(wǎng)頁知識準備URL如何表示相對地址2）相對路徑，所要鏈接或嵌入到當前網(wǎng)頁文檔的文件與當前文件的相對位置所形成的路徑。 （1）鏈接到同一目錄內(nèi)的文件：文件名（2）鏈接到下一級目錄內(nèi)的文件：下一級目錄名/文件名（3）鏈接到上一級目錄內(nèi)的文件：./文件名操作演示舉例說明絕對址與相對地址的區(qū)別

30、4、用HTML制作網(wǎng)頁知識準備用記事本程序編寫、保存、修改網(wǎng)頁文檔 1）編寫網(wǎng)頁點選“開始”/“程序”/“附件”/“記事本”，輸入HTML語句，點選“文件”/“保存”或“另存為”，“文件名”中輸入文件名，擴展名一定要是“HTML”或“HTM”，點“保存”按鈕。2）瀏覽網(wǎng)頁（瀏覽本地文檔，非域名訪問方式）方法一：通過“我的電腦”或“資源管理器”找到要瀏覽的網(wǎng)頁文件，雙擊打開它即瀏覽網(wǎng)頁；方法二：打開IE瀏覽器，點選“文件”/“打開”，找到文件打開，即瀏覽網(wǎng)頁；方法三：打開IE瀏覽器，在“地址”欄上輸入文件的路徑及文件的名稱，回車確定。3）修改網(wǎng)頁方法一：打開記事本，點選“文件”/“打開”，找到文

31、件打開，即能修改，修改后必須重新保存（仍要注意保存文件的擴展名），回到瀏覽器窗口點選刷新按鈕（F5）。方法二：瀏覽要修改的網(wǎng)頁時，點選“IE瀏覽器”/“查看”/“源文件”，自動調(diào)出記事本及網(wǎng)頁文件，即能修改，修改后必須重新保存（仍要注意保存文件的擴展名），回到瀏覽器窗口點選刷新按鈕（F5），或再按上面（2）方法瀏覽。4、用HTML制作網(wǎng)頁知識準備操作演示舉例說明html的語法規(guī)則html的標記有下列四種表示方法： 文字或其它內(nèi)容 文字或其它內(nèi)容 4、用HTML制作網(wǎng)頁知識準備HTML語法規(guī)則 正常情況下，HTML文件以純文本形式存放，擴展名為“.HTM”或“.HTML”。若系統(tǒng)為UNIX，擴展

32、名必須為“.HTML”。在Windows系統(tǒng)中使用時請保持只使用其中一種，避免混淆。 html文件由標記或被標記的內(nèi)容組成；網(wǎng)頁中所有的顯示內(nèi)容都應該受限于一個或多個標記，盡量避免有游離于標記之外的文字或圖像等以免產(chǎn)生錯誤。 每個標記都用標識，以表示這是HTML代碼而非普通文本，需要注意的是和標記之間不能有空格或其它字符；標記分為單標記和雙標記，雙標記必須有結(jié)束標記，雙標識占大多數(shù)，單標記只有幾個；標記不分大小寫，但要區(qū)分全半角。 一個標記可以有多個屬性，屬性屬性值合起來構(gòu)成一個完整的屬性，各個屬性用空格分開，屬性及其屬性值不分大小寫，但也要區(qū)分全半角，根據(jù)需要可以用該標記的所有屬性，也可只用

33、需要的幾個或一個或不用屬性，在使用時屬性之間沒有順序。 對同一段要標記的內(nèi)容，可以用多個標記來共同作用，產(chǎn)生一定的效果，多數(shù)HTML標記可以嵌套，但不可以交叉。 HTML文件一行可以寫多個標記，一個標記可以分多行書寫，不用任何續(xù)行符號。HTML源文件中的換行、回車符和多個連續(xù)空格(半角空格)在顯示中是無效的，多個連續(xù)空格只顯示一個。換行、分段都有專有標記，空格有轉(zhuǎn)義符。 提供注釋語句，格式：。注釋語句可放在任何地方，注釋內(nèi)容不在瀏覽器中顯示。（有時客戶端腳本和CSS樣式等也加上“”，是為了避免瀏覽器不支持這些代碼時而在瀏覽器中把這些代碼顯示出來） HTML語言并不要求在書寫時縮進。若為了程序的

34、易讀性，可使標記的首尾對齊，內(nèi)部的內(nèi)容向右縮進幾格。HTML的語法并不像其它語言要求嚴格，語法或語句不正確一般只影響顯示效果。還要注意少量標記和屬性對不同的瀏覽器的支持能力是不同的，后面章節(jié)主要講述IE能支持的標記和屬性。4、用HTML制作網(wǎng)頁知識準備HTML規(guī)范與版本不同公司的瀏覽器或者同一瀏覽器的不同版本都存在著不兼容問題。因為不同公司的瀏覽器軟件開發(fā)人員為了實現(xiàn)一些特殊效果，瀏覽器可接受的網(wǎng)頁中引入一些特殊標簽和屬性，而另外版本及另外公司的瀏覽器并不知道特殊標簽和屬性的含義，因此就出現(xiàn)了不兼容問題。為了解決兼容性和互用性問題，需要一些組織和機構(gòu)來制定HTML規(guī)范和標準。早期的HTML是非

35、常簡單的，被稱為HTML 1.0，由IEFT（負責有關(guān)Internet的各種技術(shù)標準及接口規(guī)范的制定的國際民間組織）修改為HTML 2.0，再由W3C（WWW聯(lián)盟）發(fā)展為現(xiàn)在的HTML 4.01，這也是HTML規(guī)范的最終版本，HTML將被XHTML（可擴展超文本標識語言）取代。但這個取代還需要很長一段時間，HTML仍然要繼續(xù)使用，并且HTML是XHTML的基礎(chǔ)，學習HTML仍非常必要。在網(wǎng)頁文檔的開頭可添加一個文檔類型定義標簽，用于說明HTML的規(guī)范，即指定當前網(wǎng)頁文件所使用的HTML語言版本及定義該語言版本的規(guī)范文件的位置。例如使用HTML4.01的規(guī)范，代碼如下：4、用HTML制作網(wǎng)頁知識

36、準備4、用HTML制作網(wǎng)頁實踐指導首頁的表格排版次級頁面的表格排版4、用HTML制作網(wǎng)頁實踐指導4、用HTML制作網(wǎng)頁實踐指導詳細操作見“操作演示視頻”。重點提示：使用浮動框架與不使用浮動框架相比其優(yōu)點在于鏈接的頁面是從浮動框架區(qū)域打開，而不是從瀏覽器窗口重新打開一個網(wǎng)頁，節(jié)約編寫代碼的時間，運行時下載速度較快?？蚣芫W(wǎng)頁將瀏覽器拆分成若干個窗口，拆分方式由主框架網(wǎng)頁決寫，在每一個窗口各鏈接一個普通網(wǎng)頁；浮動框架是在普通網(wǎng)頁中作為一個網(wǎng)頁元素方式插入網(wǎng)頁的某一個區(qū)域。它們之間的共同點是大部分區(qū)域可固定，某一區(qū)域作為鏈接變化的區(qū)域，節(jié)約編寫代碼的時間，運行時下載速度較快。但是框架網(wǎng)頁在排版時存在一

37、定的缺陷和搜索引擎不識別框架的問題，現(xiàn)在框架網(wǎng)頁用得越來越少了。4、用HTML制作網(wǎng)頁學習成果完成網(wǎng)站中的所有網(wǎng)頁的制作。5.網(wǎng)站測試設(shè)置工作情境網(wǎng)站建設(shè)公司的相關(guān)工作人員開始網(wǎng)站的測試工作；必須明確測試的必要性和重要性；掌握測試的方法；掌握測試的技巧；注意很容易把測試看做一個沒有技術(shù)含量的體力活，但是很多網(wǎng)站在交付后仍出現(xiàn)各種各樣的問題，這就是在網(wǎng)站實現(xiàn)完成后沒有進行全面的測試。目標：網(wǎng)站設(shè)計師（及網(wǎng)站測試人員）細心、耐心、專心完成全面的測試，消除BUG，提高網(wǎng)站的質(zhì)量。5.網(wǎng)站測試知識準備一旦網(wǎng)站出現(xiàn)“訪問速度太慢”、“鏈接錯誤”、“查看的網(wǎng)頁不存在”等問題時，瀏覽者就可能離開轉(zhuǎn)向其他網(wǎng)站

38、。因此在網(wǎng)頁發(fā)布前后均應對網(wǎng)站及網(wǎng)頁進行全面的測試，盡可能多地發(fā)現(xiàn)問題，并及時處理，以保證發(fā)布的網(wǎng)站能正常訪問。1鏈接測試檢查網(wǎng)頁中否有超鏈接無效的情況，包括頁面、圖像和多媒體文件等，造成此類問題通常是文件名不正確、文件路徑不正確等原因造成的。2外觀測試檢查網(wǎng)頁在瀏覽時能否按預想的布局效果進行顯示，外觀測試包含整體界面、導航、圖像、文字、內(nèi)容等。3兼容性測試（1）分辨率測試：每個客戶在瀏覽網(wǎng)站時，其電腦顯示器會設(shè)置為不同的分辨率，不同的客戶會用不同的分辨率訪問網(wǎng)站，所以測試網(wǎng)站時要檢查不同分辨率下網(wǎng)頁是否正常顯示。（2）瀏覽器測試：雖然HTML有規(guī)范和標準，但不同的瀏覽器間、同一瀏覽器的不同版

39、本間存在著差異，可能部分導致兼容性問題，因此需要對不同的瀏覽器環(huán)境測試所有網(wǎng)頁是否正常顯示。5.網(wǎng)站測試實踐指導搭建測試環(huán)境下載下表中列出的訪問者最常用的瀏覽器并安裝。常用瀏覽器及使用人數(shù)比序號瀏覽器名稱和版本使用人數(shù)比（%）1IE瀏覽器322傲游瀏覽器143火狐瀏覽器134360安全瀏覽器16鏈接測試：測試所有鏈接是否按指示的那樣確實鏈接到了該鏈接的頁面；測試所鏈接的頁面是否存在；保證網(wǎng)站中沒有孤立頁面，所謂孤立頁面是指沒有鏈接指向的頁面。第1步：檢查網(wǎng)站各欄目文件夾中的網(wǎng)頁是否有無用的網(wǎng)頁，如果有，則將之剪切至刪除文件夾，最后統(tǒng)一刪除，避免誤刪除。第2步：檢查根圖像文件夾、各欄目文件夾中的圖像文件夾是否有無用的圖像，如果有，則將之剪切至刪除文件夾，最后統(tǒng)一刪除，避免誤刪除。第3步：分別運行每一個網(wǎng)頁，然后單擊每個網(wǎng)頁上的每一個超鏈接，檢查是否出現(xiàn)