網(wǎng)頁(yè)設(shè)計(jì)與制作第1章

第1章

概述

機(jī)械工業(yè)出版社學(xué)習(xí)要求提前預(yù)習(xí)，上課認(rèn)真聽講課后及時(shí)復(fù)習(xí)，獨(dú)立認(rèn)真完成作業(yè)本章重點(diǎn)學(xué)習(xí)網(wǎng)站制作必備的網(wǎng)站和網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)網(wǎng)頁(yè)編輯工具和動(dòng)畫制作工具的特征網(wǎng)站制作的流程。主要內(nèi)容

1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)1.2網(wǎng)站制作的基礎(chǔ)知識(shí)

1.3網(wǎng)頁(yè)制作的常用工具1.4網(wǎng)站的制作流程1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)1.因特網(wǎng)Internet因特網(wǎng)Internet是目前全球最大的計(jì)算機(jī)通信網(wǎng)，它通過電話線、光纖傳輸材料，使用一定的通信規(guī)范，把位于世界各地具有獨(dú)立工作能力的計(jì)算機(jī)連接起來，使之能夠?qū)崿F(xiàn)網(wǎng)絡(luò)通信、資源共享。2.全球信息網(wǎng)WWW全球信息網(wǎng)WWW(WorldWideWeb)是一個(gè)大型的、分布式的、全球性的、交互的、動(dòng)態(tài)的、跨平臺(tái)的超媒體圖形信息系統(tǒng)，是Internet中最流行、最主要的信息服務(wù)方式，用戶通過Internet能夠?yàn)g覽、查詢和共享WWW服務(wù)器站點(diǎn)上所有的超媒體信息。3.網(wǎng)頁(yè)網(wǎng)頁(yè)是WWW的基本文檔，是在網(wǎng)絡(luò)上用來同其他用戶交流信息的最基本的組成部分。網(wǎng)頁(yè)界面的構(gòu)成元素主要有文字、超鏈接和圖像，另外還有聲音、視頻圖像和動(dòng)畫等多媒體元素，以及由JavaScript、ActiveX控件。制作的特殊效果和交互功能，以豐富網(wǎng)頁(yè)內(nèi)容，增強(qiáng)網(wǎng)頁(yè)功能。4.HTMLHTML是HyperTextMarkupLanguage的簡(jiǎn)寫，中文名稱是“超文本標(biāo)記語(yǔ)言”，它是因特網(wǎng)上非常流行的網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言。HTML能獨(dú)立地運(yùn)行于各種操作平臺(tái)之上，不受操作系統(tǒng)的影響。5.瀏覽器瀏覽器就是用于瀏覽網(wǎng)頁(yè)的應(yīng)用程序，它在接收HTML頁(yè)面時(shí)采用的是HTTP協(xié)議。目前使用較為廣泛的的瀏覽器有Microsoft公司的IE瀏覽器和Netscape公司的瀏覽器。盡管它們使用不同的HTML文件標(biāo)準(zhǔn)，但在使用的時(shí)間均1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)只需在地址欄中輸入相應(yīng)的URL地址即可。6.靜態(tài)網(wǎng)頁(yè)所謂靜態(tài)網(wǎng)頁(yè)是指網(wǎng)頁(yè)的內(nèi)容固定不變，當(dāng)瀏覽器通過Internet的HTTP協(xié)議，向網(wǎng)站服務(wù)器請(qǐng)求提供網(wǎng)頁(yè)的內(nèi)容時(shí)，網(wǎng)站服務(wù)器收到要求后，傳送事先準(zhǔn)備好的HTML。網(wǎng)頁(yè)內(nèi)容只包含標(biāo)準(zhǔn)的HTML代碼，要改變網(wǎng)頁(yè)內(nèi)容，只能重新進(jìn)行手工編輯。7.動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)中網(wǎng)頁(yè)的內(nèi)容具有交互性，它會(huì)依照不同的使用者、不同時(shí)間的改變而改變。

1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)主要內(nèi)容1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)1.2網(wǎng)站制作的基礎(chǔ)知識(shí)

1.3網(wǎng)頁(yè)制作的常用工具1.4網(wǎng)站的制作流程1.超文本超文本（HyperText）就是指文檔中設(shè)置了超鏈接的文本，它所鏈接對(duì)象也是純文本，使用了超鏈接的文字帶有下劃線，當(dāng)鼠標(biāo)移至其下方時(shí)，鼠標(biāo)指針會(huì)變成手形，單擊已定義好超鏈接的關(guān)鍵字，便可顯示與其相關(guān)的說明文字。2.超媒體超媒體（HyperMedia）是超文本的一種擴(kuò)展，它將所鏈接信息類型擴(kuò)展到了全新視角的多媒體，綜合了文字、影像、圖片、動(dòng)畫、聲音等文件。使得超鏈接可以顯示圖形，播放動(dòng)畫、音樂，也可以播放視頻信息。3.超鏈接超鏈接（hyperlink）用來實(shí)現(xiàn)不同網(wǎng)頁(yè)間的相互1.2網(wǎng)站制作的基本知識(shí)跳轉(zhuǎn)，它是WWW上使用最多的一種技術(shù)。它用以實(shí)現(xiàn)超文本、超媒體以及與其他媒體之間的鏈接。4．Web圖像較為常用的Web圖像有BMP、TIIF、GIF、PNG、JPG/JPEG、PSD、PDF等，因此目前網(wǎng)上流行的格式主要是JPG、GIF和PNG。BMP格式的圖像是DOS和Windows兼容計(jì)算機(jī)系統(tǒng)標(biāo)準(zhǔn)的Windows圖像格式，是微軟公司的專用格式，可以指定是否采用壓縮格式。它支持位圖顏色、RGB、索引顏色和灰度模式，但不支持Alpha通道。TIIF格式的圖像是一種支持壓縮格式的位圖圖像文件，可以被所有的圖像編輯軟件、繪圖軟件和排版軟件所支持。GIF格式的圖像是在各種圖形處理軟件上均能夠處理1.2網(wǎng)站制作的基本知識(shí)的、經(jīng)過無損壓縮的、支持動(dòng)畫的、常用于網(wǎng)絡(luò)傳輸?shù)囊环N圖形文件格式。它僅支持8位圖像色彩的索引顏色，適合于對(duì)色彩數(shù)目要求不高的卡通圖像等。在一些商業(yè)網(wǎng)站上它的顯示受到一定的限制。PNG格式的圖像，能存儲(chǔ)32位信息的位圖文件，其圖像質(zhì)量要比GIF格式圖像的質(zhì)量好，通過對(duì)像素行和列的掃描，獲得較好的壓縮效果。顯示速度很快，但不支持動(dòng)畫。它支持位圖顏色、RGB、索引顏色和灰度模式，但不支持帶Alpha通道的位圖顏色和索引顏色文件。JPG/JPEG格式的圖像又稱作聯(lián)合圖片專家，是24位的圖像文件格式，也是一種高效率的壓縮格式，可以將圖像體積減少至原大小的10％，從而減少下載時(shí)間。它支持CMYK、RGB和灰度顏色模式，但不支持Alpha通道。此格式的圖像在打開時(shí)會(huì)自動(dòng)解壓縮，它適合于存儲(chǔ)照片之類的色彩豐富的圖像。1.2網(wǎng)站制作的基本知識(shí)PSD格式的圖像是Photoshop軟件的專用格式文件。PDF格式的圖像是一種可移植的文檔格式，它可以包含位圖、矢量圖形和電子文檔。1.2網(wǎng)站制作的基本知識(shí)1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)1.2網(wǎng)站制作的基礎(chǔ)知識(shí)

1.3網(wǎng)頁(yè)制作的常用工具1.4網(wǎng)站的制作流程主要內(nèi)容1.3網(wǎng)頁(yè)制作的常用工具

網(wǎng)頁(yè)編輯工具

1.記事本編輯網(wǎng)頁(yè)作為文本文件的HTML文件，可以直接使用記事本方便地編寫HTML代碼，文件的擴(kuò)展名為.htm或.html2.FrontPage編輯網(wǎng)頁(yè)FrontPage是Microsoft推出的一個(gè)優(yōu)秀的專業(yè)化網(wǎng)頁(yè)設(shè)計(jì)軟件，它以設(shè)計(jì)開發(fā)基本的HTML文檔為基礎(chǔ)，設(shè)計(jì)特性豐富，能自動(dòng)地將輸入的數(shù)據(jù)及其格式轉(zhuǎn)換為HTML代碼，但所轉(zhuǎn)換的代碼有些復(fù)雜，不便閱讀。并且設(shè)計(jì)出來的網(wǎng)頁(yè)框架在預(yù)覽的時(shí)間容易出現(xiàn)錯(cuò)位的現(xiàn)象。3.Dreamweaver編輯網(wǎng)頁(yè)Dreamweaver是Macromedia公司推出的一款“所見即所得”的網(wǎng)頁(yè)編輯工具，它采用浮動(dòng)面版的設(shè)計(jì)風(fēng)格，具有直觀性與高效性。能將輸入的數(shù)據(jù)及其格式轉(zhuǎn)換為HTML代碼，且冗余代碼相對(duì)較少。Web圖像與動(dòng)畫制作工具1.PhotoshopPhotoshop是Adobe公司推出的功能強(qiáng)大的文本圖像處理軟件，采用專業(yè)的圖像編輯標(biāo)準(zhǔn)，采用層、通道、路徑、濾鏡和蒙板等圖像處理技術(shù)，得到讓廣大平面設(shè)計(jì)人員十分青睞的設(shè)計(jì)效果。它支持大部分的圖像格式，適用于打印、圖像修復(fù)、Web瀏覽或其它用途的較佳品質(zhì)的圖像。2.FlashFlash是Macromedia公司推出的一款動(dòng)畫設(shè)計(jì)與編輯軟件,利用它制作的動(dòng)畫文件只需幾K字節(jié)就可以實(shí)現(xiàn)許多令人心動(dòng)的效果，用在網(wǎng)頁(yè)設(shè)計(jì)上不僅可以使網(wǎng)頁(yè)更加生動(dòng)，而且體積小下載速度快。1.3網(wǎng)頁(yè)制作的常用工具

Flash不僅是一個(gè)圖形編輯、動(dòng)畫制作軟件，它還包括Flash動(dòng)畫播放插件它采用流的形式，可以一邊下載一邊播放，它還支持Alpha通道。3.FireworksFireworks是Macromedia公司推出的專業(yè)的網(wǎng)絡(luò)圖形設(shè)計(jì)和處理工具。它是編輯矢量和位圖的綜合工具。Fireworks有針對(duì)地提出了開發(fā)網(wǎng)頁(yè)的整套方案，通過它既可以編輯網(wǎng)頁(yè)圖像，又可以創(chuàng)建網(wǎng)頁(yè)動(dòng)畫，從而避免了同一作品的圖形制作與動(dòng)畫制作過程中在不同的軟件之間頻繁切換的繁瑣，提供了一個(gè)真正完美的Web解決方案。Fireworks和Dreamweaver結(jié)合緊密,可與Macromedia公司的其它圖形程序和HTML編輯器結(jié)合使用，為網(wǎng)站的制作提供了一套完整的方案。1.3網(wǎng)頁(yè)制作的常用工具

1.1網(wǎng)絡(luò)的基礎(chǔ)知識(shí)1.2網(wǎng)站制作的基礎(chǔ)知識(shí)

1.3網(wǎng)頁(yè)制作的常用工具1.4網(wǎng)站的制作流程主要內(nèi)容1.4網(wǎng)站制作的流程網(wǎng)站的制作流程主要分為三個(gè)階段，網(wǎng)站的分析與規(guī)劃，網(wǎng)站的制作和網(wǎng)站的維護(hù)。網(wǎng)站的分析與規(guī)劃這一階段的主要任務(wù)是先對(duì)網(wǎng)站的內(nèi)容、功能需求進(jìn)行分析總結(jié)，然后在此基礎(chǔ)上確定網(wǎng)站建設(shè)的主題、基本要求，明確網(wǎng)站建立的目的，最后給出一個(gè)網(wǎng)站的準(zhǔn)確定位。規(guī)劃的內(nèi)容主要是從兩個(gè)方面來考慮的：目錄層次結(jié)構(gòu)與網(wǎng)站架構(gòu)圖。網(wǎng)站目錄層次結(jié)構(gòu)是否合理，直接影響后期站點(diǎn)的管理維護(hù)，內(nèi)容的擴(kuò)充與刪除等工作，為了后續(xù)工作的方便，網(wǎng)站目錄結(jié)構(gòu)的規(guī)劃一定要考慮全面，仔細(xì)推敲，合理規(guī)劃。網(wǎng)站的架構(gòu)包括網(wǎng)站的風(fēng)格，用色，版式，布局，欄目劃分等。好的網(wǎng)站架構(gòu)不僅能使網(wǎng)站的界面友好漂亮、簡(jiǎn)潔明快，而且還能方便瀏覽，增強(qiáng)可讀性。網(wǎng)站架構(gòu)設(shè)計(jì)的結(jié)果要用草圖勾勒出來，并且要盡量具體，欄目劃分要合理，重點(diǎn)要突出。這一階段的最后一步工作是素材的準(zhǔn)備，主要包括圖標(biāo)、LOGO、廣告語(yǔ)和內(nèi)容介紹等的搜集工作。網(wǎng)站的制作站點(diǎn)規(guī)劃完成后，就進(jìn)入了具體的網(wǎng)站制作階段，在這一階段主要是對(duì)具體的網(wǎng)頁(yè)及其特效進(jìn)行設(shè)計(jì)與制作，主要任務(wù)有界面的設(shè)計(jì)與制作、界面的切割與導(dǎo)出、模板的建立和具體網(wǎng)頁(yè)的設(shè)計(jì)等。可以用Photoshop或Fireworks對(duì)網(wǎng)站界面進(jìn)行設(shè)計(jì)與制作，但Fireworks要比Photoshop更加靈活自由，更加專業(yè)。設(shè)計(jì)過程中要注意盡量使用不同的圖層進(jìn)行編1.4網(wǎng)站制作的流程輯，以方便分類和管理，力求簡(jiǎn)約和精致，不要忽略每個(gè)細(xì)節(jié)。為了方便下載，需要對(duì)所設(shè)計(jì)的界面進(jìn)行切割和導(dǎo)出，在切割時(shí)要遵循原則有：1）注意切割框架的完整性，一般的切割類型有國(guó)字型或T字型等。2）對(duì)于要輸入文字的區(qū)域、大面積色塊或單獨(dú)的圖片以及flash動(dòng)畫等要單獨(dú)切割成非圖片格式以備插入。3）若添加內(nèi)容不固定，需要變長(zhǎng)的區(qū)域要注意其伸縮性切割，若有圖案要保證可以重復(fù)排列。模板的使用既可以減少工作量提高效率,又是使站點(diǎn)保持風(fēng)格的一致重要手段。在Dreamweaver中對(duì)導(dǎo)出的HTML文件進(jìn)行編輯，并進(jìn)行背景顏色的設(shè)置，CSS樣式的添加，根據(jù)需要可設(shè)為不同的模板。有了模板再進(jìn)行具1.4網(wǎng)站制作的流程體網(wǎng)頁(yè)的設(shè)計(jì)就簡(jiǎn)單了，引用模板后，只需在不同的頁(yè)面添加其相應(yīng)的文字內(nèi)容，也可以添加不同的廣告與動(dòng)畫等以豐富網(wǎng)站內(nèi)容。網(wǎng)站的維護(hù)網(wǎng)站設(shè)計(jì)完成，經(jīng)測(cè)試正確無誤后，就可以將站點(diǎn)上傳到服務(wù)器，建立Web站供用戶瀏覽了，但這并不意為著網(wǎng)站的制作工作結(jié)束了，它還要由專業(yè)的人員進(jìn)行定期的更新與維護(hù)。網(wǎng)絡(luò)的最大優(yōu)勢(shì)是其信息的實(shí)時(shí)性，只有及時(shí)更新，快速反映才能吸引更多的用戶訪問站點(diǎn)并多次瀏覽。1.4網(wǎng)站制作的流程掌握因特網(wǎng)、全球信息網(wǎng)、網(wǎng)頁(yè)、HTML、瀏覽器、超文本、超媒體、超鏈接和Web圖像是進(jìn)行網(wǎng)站制作應(yīng)必備的網(wǎng)絡(luò)與網(wǎng)頁(yè)的基礎(chǔ)知識(shí)。目前網(wǎng)上流行的Web圖像格式有體積小支