網(wǎng)頁制作教程-教案-PPT學(xué)習(xí)課件.ppt

1、網(wǎng)頁制作實用教程,第1章 網(wǎng)頁制作基礎(chǔ),新世紀(jì)高職高專規(guī)劃教材,1,學(xué)習(xí)目標(biāo),隨著互聯(lián)網(wǎng)的迅猛發(fā)展，可以獲取、交換和存錯連接到網(wǎng)絡(luò)上的各計算機(jī)上的信息。一個成功的網(wǎng)站有多個精美絢麗的網(wǎng)頁組成，要制作出美觀的網(wǎng)頁，首先要學(xué)習(xí)網(wǎng)頁制作的相關(guān)知識，例如制作網(wǎng)頁的知識、制作網(wǎng)頁元素的知識以及設(shè)計網(wǎng)頁效果。,2,網(wǎng)頁與網(wǎng)站基礎(chǔ) 網(wǎng)頁的基本構(gòu)成元素 網(wǎng)頁制作常用語言 網(wǎng)頁的設(shè)計構(gòu)思,本章重點(diǎn),3,1.1 網(wǎng)頁的基礎(chǔ)知識,為了理解網(wǎng)頁的相關(guān)基礎(chǔ)知識，給出計算機(jī)軟件技術(shù)的定義，本節(jié)將研究以下幾個問題： 網(wǎng)頁與網(wǎng)站的概念， 網(wǎng)頁的基本元素， 網(wǎng)頁的類型。,4,1.1.1 網(wǎng)頁與網(wǎng)站的概述,網(wǎng)頁(web)是網(wǎng)站上

2、的某一個頁面，它是一個純文本文件，是向訪問者傳遞信息的載體，以超文本和超媒體為技術(shù)，采用HTML、CSS、XML等語言來描述組成頁面的各種元素，包括文字、圖像、音樂等，并通過客戶端瀏覽器進(jìn)行解析 。 網(wǎng)站(Website)是指在互聯(lián)網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁集合，它建立在網(wǎng)絡(luò)基礎(chǔ)之上，以計算機(jī)、網(wǎng)絡(luò)和通信技術(shù)為依托，通過一臺或多臺計算機(jī)向訪問者提供服務(wù)。平時所說的訪問某格站點(diǎn)，實際上訪問的是提供這種服務(wù)的一臺或多臺計算機(jī)。,5,1.1.2 網(wǎng)頁的基本元素,一個網(wǎng)頁的基本元素主要包括文本、圖像和超鏈接，其他元素包括聲音、動畫、視頻、表格、導(dǎo)航欄、表單

3、等 。,6,文本,文本是網(wǎng)頁上最重要的信息載體與交流工具，網(wǎng)頁中的主要信息一般都以文本形式為主。與圖像網(wǎng)頁元素相比，文字雖然并不如圖像那樣容易被瀏覽者注意，但卻能包含更多的信息并更準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。,7,圖像,圖像元素在網(wǎng)頁中具有提供信息并展示直觀形象的作用。用戶可以在網(wǎng)頁中使用GIF、JPEG和PNG等多種文件格式的圖像。目前應(yīng)用最廣泛的圖像文件格式是GIF和JPEG兩種。,8,FLASH動畫,動畫在網(wǎng)頁中的作用是有效地吸引訪問者更多的注意。用戶在設(shè)計制作網(wǎng)頁時可以通過在頁面中加入動畫使頁面更加活潑。,9,聲音,聲音是多媒體和視頻網(wǎng)頁重要的組成部分。用戶在為網(wǎng)頁添加聲音效果時應(yīng)充分

4、考慮其格式、文件大小、品質(zhì)和用途等因素。另外，不同的瀏覽器對聲音文件的處理方法也有所不同，彼此之間有可能并不兼容。,10,視頻,視頻文件的采用使網(wǎng)頁效果更加精彩且富有動感。常見的視頻文件格式包括RM、MPEG、AVI和DivX等。,11,超鏈接,超鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接，超鏈接的目的端可以是網(wǎng)頁，也可以是圖片、電子郵件地址、文件和程序等。當(dāng)網(wǎng)頁訪問者單擊頁面中某個超鏈接時，將根據(jù)自身的類型以不同的方式打開該目的端。例如，當(dāng)超鏈接的目的端是一個網(wǎng)頁時，將會自動彈出窗口以顯示網(wǎng)頁內(nèi)容。,12,表格,表格在網(wǎng)頁中用來控制頁面信息的布局方式。其作用主要有兩個方面：一方面是使用行和列的形

5、式布局文本和圖像以及其他列表化數(shù)據(jù)；另一方面是精確控制網(wǎng)頁中各種元素的顯示位置。,13,交互式表單,表單在網(wǎng)頁中通常用來聯(lián)系數(shù)據(jù)庫并接受訪問用戶在瀏覽器端輸入的數(shù)據(jù)。表單的作用是收集用戶在瀏覽器上輸入的聯(lián)系信息、接受請求、反饋意見、設(shè)置簽名以及登錄信息等。,14,導(dǎo)航欄,導(dǎo)航欄在網(wǎng)頁中是一組超鏈接，其鏈接的目的端是網(wǎng)站中重要的頁面。在網(wǎng)站中設(shè)置導(dǎo)航欄可以使訪問者既快又容易地瀏覽站點(diǎn)中的其他網(wǎng)頁。,15,交互式表單,表單在網(wǎng)頁中通常用來聯(lián)系數(shù)據(jù)庫并接受訪問用戶在瀏覽器端輸入的數(shù)據(jù)。表單的作用是收集用戶在瀏覽器上輸入的聯(lián)系信息、接受請求、反饋意見、設(shè)置簽名以及登錄信息等。,16,其它網(wǎng)頁元素,網(wǎng)頁

6、中除了上面介紹的網(wǎng)頁元素之外還包括懸停按鈕、Java特效、ActiveX等各種特效。用戶在制作網(wǎng)頁時可以使用它們來點(diǎn)綴網(wǎng)頁效果，使頁面更加活潑有趣。,17,1.1.3 網(wǎng)頁與網(wǎng)站的概述,目前，常見的網(wǎng)頁有靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種。靜態(tài)網(wǎng)頁通常以.htm、.html、.shtml、.xml等形式為后綴；動態(tài)網(wǎng)頁一般以.asp、.jsp、.php、.perl、.cgi等形式為后綴。,18,靜態(tài)網(wǎng)頁,網(wǎng)頁所基于的底層技術(shù)是HTML和HTTP，在過去，制作網(wǎng)頁都需要專門的技術(shù)人員來逐行編寫代碼，編寫的文檔稱為HTML文檔。然而這些HTML文檔類型的網(wǎng)頁僅僅是靜態(tài)的網(wǎng)頁 。,19,動態(tài)網(wǎng)頁,隨著網(wǎng)絡(luò)和電子

7、商務(wù)的快速發(fā)展，產(chǎn)生了許多網(wǎng)頁設(shè)計新技術(shù)，例如ASP技術(shù)、JSP技術(shù)等，采用這些技術(shù)編寫的網(wǎng)頁文檔稱為ASP文檔或JSP文檔，這種文檔類型的網(wǎng)頁由于采用了動態(tài)頁面技術(shù)，所以擁有更好的交互性、安全性和友好性 。,20,1.1.4 IP地址和域名,IP地址和域名是學(xué)習(xí)網(wǎng)頁制作必須了解的兩個專用名次。 IP是英文Internet Protocol(網(wǎng)絡(luò)之間互連的協(xié)議)的縮寫，中文簡稱為【網(wǎng)協(xié)】，也就是為計算機(jī)網(wǎng)絡(luò)相互連接進(jìn)行通信而設(shè)計的協(xié)議。在因特網(wǎng)中，它是能使連接到網(wǎng)上的所有計算機(jī)網(wǎng)絡(luò)實現(xiàn)相互通信的一套規(guī)則，規(guī)定了計算機(jī)在因特網(wǎng)上進(jìn)行通信時應(yīng)當(dāng)遵守的規(guī)則。任何廠家生產(chǎn)的計算機(jī)系統(tǒng)，只要遵守 IP協(xié)

8、議就可以與因特網(wǎng)互連互通。IP地址具有唯一性，根據(jù)用戶性質(zhì)的不同，可以分為5類。域名(Domain Name)，通俗的說就是網(wǎng)址，它是由一串用點(diǎn)分隔的名字組成的Internet上某一臺計算機(jī)或計算機(jī)組的名稱，用于在數(shù)據(jù)傳輸時標(biāo)識計算機(jī)的電子方位(有時也指地理位置)。,21,1.2 網(wǎng)頁的設(shè)計流程,在制作網(wǎng)頁之前，首先要進(jìn)行網(wǎng)頁的設(shè)計與構(gòu)思，主要包括網(wǎng)頁的布局、網(wǎng)頁的配色、網(wǎng)設(shè)計原則，了解這些知識，是制作有別于其他網(wǎng)頁的要點(diǎn)之一。,22,1.2.1 網(wǎng)頁的布局,網(wǎng)頁布局能決定網(wǎng)頁是否美觀。合理的布局，可以將頁面中的文字、圖像等內(nèi)容完美、直觀地展現(xiàn)給訪問者，同時合理安排網(wǎng)頁空間，優(yōu)化網(wǎng)頁的頁面效果

9、和下載速度。反之，如果頁面布局不合理，網(wǎng)頁在瀏覽器中的顯示將十分糟糕，頁面中的各個元素顯示效果可能會重疊或丟失。因此，在對網(wǎng)頁進(jìn)行布局設(shè)計時，應(yīng)遵循對稱平衡、異常平衡、對比、凝視和空白等原則。常見的網(wǎng)頁布局形式包括：型布局、T型布局、“三”型布局、對比布局和POP布局等。,23,型布局, 型結(jié)構(gòu)網(wǎng)頁頂部一般為網(wǎng)站標(biāo)志、主菜單和廣告條。下方分為3個部分，左、右側(cè)為鏈接、廣告或其他內(nèi)容，中間部分為主題內(nèi)容的布局，整體效果類似于符號。 型結(jié)構(gòu)布局網(wǎng)頁的優(yōu)點(diǎn)是充分利用了頁面的版面，可容納的信息量大；缺點(diǎn)是頁面可能因為大容量的信息而顯得擁擠，不夠生動。,24,T型布局,T型結(jié)構(gòu)布局的網(wǎng)頁頂部一般是網(wǎng)站標(biāo)

10、志和廣告條，頁面的左側(cè)是主菜單，右側(cè)為主要內(nèi)容。 T型結(jié)構(gòu)布局的網(wǎng)頁優(yōu)點(diǎn)是頁面結(jié)構(gòu)清晰，內(nèi)容主次分明，是初學(xué)者最容易上手的布局方法。T型布局網(wǎng)頁的缺點(diǎn)是布局規(guī)格死板，如果不注意細(xì)節(jié)上的色彩調(diào)整，很容易產(chǎn)生乏味感。,25,“三“型布局,“三”型結(jié)構(gòu)布局的網(wǎng)頁布局常見于國外的網(wǎng)站，這種網(wǎng)頁布局是在頁面上橫向的兩條色塊將整個網(wǎng)頁劃分為上、中和下3個區(qū)域，色塊中一般放置廣告更新和版權(quán)提示等信息。,26,框架布局,框架布局包括左右框架布局、上下框架布局和綜合框架布局幾種形態(tài)。采用框架布局布局的網(wǎng)頁可以通過某個框架內(nèi)的鏈接控制另一個框架內(nèi)的頁面內(nèi)容顯示。,27,POP布局,POP引自于廣告術(shù)語，指的是頁面

11、布局像一張宣傳海報，以一張精美的圖片作為頁面設(shè)計的中心 。,28,Flash布局,Flash布局網(wǎng)頁的整體就是一個Flash動畫，畫面一般制作得比較絢麗活潑。是一種能迅速吸引訪問者注意的新潮布局方式 。,29,1.2.2 網(wǎng)頁的設(shè)計原則,網(wǎng)頁的設(shè)計不僅涉及各種軟件的操作技術(shù)，還關(guān)聯(lián)到設(shè)計者對生活的理解和體驗。網(wǎng)頁設(shè)計就是要把適合的信息傳達(dá)給適合的觀眾，遵循一些必要的原則。,30,頁面的統(tǒng)一、連貫、和諧,一個精美的網(wǎng)頁必須擁有良好的整體統(tǒng)一效果，在設(shè)計過程中一定要將頁面的各個組成部分進(jìn)行合理的布局，以避免出現(xiàn)紛雜的凌亂情況。 網(wǎng)頁的連貫是指頁面中各部分的相互關(guān)系。在網(wǎng)頁設(shè)計過程中，應(yīng)充分利用各組

12、成部分在內(nèi)容上的內(nèi)在聯(lián)系和表現(xiàn)形式上的相互呼應(yīng)，并使整個頁面設(shè)計保持一致，實現(xiàn)視覺上和心理上的連貫，使整個頁面的各個部分融洽。 網(wǎng)頁的和諧是指整個頁面符合美的法則，和諧不僅要看頁面的結(jié)構(gòu)形式，而且要看作品所形成的視覺效果(顏色搭配、形式等)能否與人的視覺感受形成一種有效溝通，產(chǎn)生心靈的共鳴，這是網(wǎng)頁能夠設(shè)計成功的關(guān)鍵因素之一。,31,較快的下載速度,良好的下載速度是一個優(yōu)秀網(wǎng)頁所必備的條件，在網(wǎng)絡(luò)速度相當(dāng)緩慢的情況下，設(shè)計者應(yīng)該為節(jié)約訪問者的時間而精心設(shè)計。即使不能讓每個頁面都保持比較快的下載速度，至少應(yīng)該確保首頁和主要內(nèi)容頁面的下載要盡可能地快。 在目前的技術(shù)條件下，保持網(wǎng)頁的優(yōu)質(zhì)下載速度的

13、主要方法是盡量讓頁面簡潔，避免使用大量的圖片，以及取消自動下載的音樂和媒體素材。,32,網(wǎng)頁鏈接無誤,網(wǎng)頁的主要功能就是向訪問者提供信息，如果網(wǎng)頁的鏈接出現(xiàn)錯誤，訪問者就無法獲取自己所需的資料，因此網(wǎng)頁鏈接無誤，是網(wǎng)頁設(shè)計的最基本原則。,33,兼容性,不同的瀏覽器和分辨率，對網(wǎng)頁的顯示效果會由比較大的區(qū)別。目前廣泛應(yīng)用的瀏覽器由微軟的IE、網(wǎng)景的Navigator和Mozilla的Firefox3種。在設(shè)計網(wǎng)頁時，要充分考慮不同瀏覽器的顯示要求，始終從用戶的實際情況出發(fā)，完成網(wǎng)頁設(shè)計后，可以使用不同的瀏覽器先測試一下，沒有問題后再進(jìn)行發(fā)布。,34,1.2.3 網(wǎng)頁的設(shè)計構(gòu)思,在制作網(wǎng)頁之前，首

14、先要進(jìn)行網(wǎng)頁的設(shè)計與構(gòu)思，主要包括網(wǎng)頁的主題、網(wǎng)頁的命名、網(wǎng)站標(biāo)志、色彩搭配和字體等要素。,35,網(wǎng)頁的主題,網(wǎng)頁的主題也就速是網(wǎng)頁的題材。在構(gòu)思網(wǎng)頁主題時，盡量精準(zhǔn)，范圍不宜過大，內(nèi)容要盡量提煉精要。最好選擇自己了解的主題內(nèi)容，這樣在制作過程中更容易收集到更多的網(wǎng)頁素材與內(nèi)容。,36,網(wǎng)頁的命名,網(wǎng)頁的名稱應(yīng)該是網(wǎng)頁內(nèi)容的概括，訪問者通過網(wǎng)頁的名稱就能夠了解網(wǎng)頁包含的內(nèi)容題材。在設(shè)計網(wǎng)頁名稱的時候，可以結(jié)合網(wǎng)頁的主題，盡量簡短精要。網(wǎng)頁名稱字?jǐn)?shù)不宜過多，以便于其他站點(diǎn)的鏈接。,37,網(wǎng)頁色彩的搭配,一個網(wǎng)頁給訪問者的第一印象往往是網(wǎng)頁顏色的視覺沖擊，因此，網(wǎng)頁色彩選取得當(dāng)與否是網(wǎng)站能否成功的

15、重要因素，不同顏色的搭配不僅會產(chǎn)生不同的視覺效果，還會影響瀏覽者的情緒。通常適合網(wǎng)頁標(biāo)準(zhǔn)的顏色有黃/橙色、藍(lán)色、黑/灰色三大系。另外，網(wǎng)頁中的標(biāo)準(zhǔn)色彩不宜過多，太多的顏色會使人眼花繚亂。標(biāo)準(zhǔn)色彩主要應(yīng)用于網(wǎng)站的標(biāo)志與字體顏色。,38,字體,網(wǎng)頁中標(biāo)準(zhǔn)字體指的是用于網(wǎng)站標(biāo)志、主菜單和標(biāo)題的特有字體。默認(rèn)的字體為宋體。用戶在制作網(wǎng)頁的過程中為了體現(xiàn)網(wǎng)頁的特有風(fēng)格，也可以根據(jù)需要選擇一些特殊字體，如華文行楷、方正楷體、隸書和華文新魏等。,39,1.2.4 網(wǎng)頁的制作流程,在制作網(wǎng)頁的過程中，要遵循一定的順序才能協(xié)調(diào)分配整個制作過程的資源與進(jìn)度。網(wǎng)頁的制作流程主要如下。 建立目標(biāo)規(guī)劃。 設(shè)計頁面版式。

16、 收集與加工網(wǎng)頁制作素材。 編輯網(wǎng)頁內(nèi)容。 測試并發(fā)布網(wǎng)頁。,40,1.3 網(wǎng)頁設(shè)計的常用語言,隨時網(wǎng)絡(luò)技術(shù)的發(fā)展，對網(wǎng)絡(luò)安全意識的提高，網(wǎng)頁設(shè)計語言發(fā)展迅猛。目前在網(wǎng)頁設(shè)計過程中，常用的語言有ASP、ASP.NET、JSP和PHP等。,41,1.3.1 ASP,是Active Server Page的縮寫，意為“動態(tài)服務(wù)器頁面”。ASP是微軟公司開發(fā)的代替CGI腳本程序的一種應(yīng)用,它可以與數(shù)據(jù)庫和其它程序進(jìn)行交互，是一種簡單、方便的編程工具。ASP的網(wǎng)頁文件的格式是.asp，現(xiàn)在常用于各種動態(tài)網(wǎng)站中。 ASP安全性低，開發(fā)門檻低，源代碼是暴露的，越來越多的人會用ASP寫網(wǎng)站后臺程序，同時網(wǎng)上

17、也有大量的ASP的源碼提供下載。,42,1.3.2 ASP.NET,是微軟公司為了抗衡jsp和php而推出的新的程序語言系統(tǒng)，安全方面可以達(dá)到一個新的高度。網(wǎng)站開發(fā)好了以后可以通過編譯，使網(wǎng)站的源碼編譯成中間代碼il發(fā)布到虛擬空間或自己服務(wù)器里面，這樣看不到了源碼，自然安全方面也就更高一點(diǎn)了，同時也保障了開發(fā)人員的版權(quán)問題。,43,1.3.3 JSP,JSP(Java Server Pages)是由Sun Microsystems公司倡導(dǎo)、許多公司參與一起建立的一種動態(tài)網(wǎng)頁技術(shù)標(biāo)準(zhǔn)。JSP技術(shù)有點(diǎn)類似ASP技術(shù)，它是在傳統(tǒng)的網(wǎng)頁HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JS