1、第1章 網頁設計與制作基礎,1.什么是網頁？,瀏覽Web時所看到的文件稱為Web頁，又稱為網頁。網頁可以將不同類型的多媒體信息（包括文字、圖像、動畫、聲音、視頻等）組合在一個文檔中。由于這些文檔是用超文本標記語言表示的，其文件名一般是以.html或.htm結尾，因此又稱為HTML文檔或超文本。,2.什么是主頁？,當我們?yōu)g覽網站時看到的第一個頁面。它是整個站點的入口和門面，通常這樣命名：index.html。,3.什么是超文本？,包含文字、圖像、視頻、聲音等媒體的文本，網頁就是一個超文本文件，并且可以實現鏈接操作。 超文本可以給瀏覽者帶來視覺和聽覺的享受，所以Web技術又稱為超媒體技術。,注意,

2、在網頁上點擊鼠標右鍵，選擇“查看源文件”，就能很清楚地看到網頁的代碼結構。用戶可以使用記事本對網頁中的文字、圖片、表格、多媒體等頁面內容進行編輯，并通過標記語言HTML對這些元素進行描述和控制，最后由瀏覽器對這些標記進行解釋并生成最終呈現在用戶眼前豐富多彩的網頁。,4.什么是網站？,根據提供服務的不同，通常把提供網頁服務的服務器稱為Web服務器，相關網站稱為Web站點。一個Web站點由一個或多個Web頁組成，這些Web頁相互連接在一起，存放在Web服務器上，以供瀏覽者訪問。 網站是提供各種信息和服務的基地，如用戶熟悉的搜狐、新浪、雅虎等。網站是由很多網頁鏈接在一起組成的。用戶瀏覽到一個網站時看

3、到的第一個頁面叫做主頁。從主頁出發(fā)，可以訪問到本網站的每一個頁面，也可以鏈接到其他網站，方便地共享網站資源。,注意,網站由若干網頁組合而成。實質上就是一個文件夾，用來存放站點相關信息資源的文件夾。,5.網頁基本元素有哪些？都有什么作用？設計的時候要注意什么？,網頁包括的主要元素有：文本、圖像、動畫、導航欄、超鏈接、表格、表單等。,文本是人類最重要的信息載體和交流工具，網頁的主體一般以文本為主。制作網頁時，可以根據需要設置文本的字體、字號、顏色、樣式等屬性，風格獨特的網頁文本設置會給瀏覽者賞心悅目的感覺。 提示：在網頁中應用了某種字體樣式后，如果瀏覽者的計算機中沒有安裝該種樣式的字體，字體就以計

4、算機系統默認的字體顯示出來，此時就無法顯示出網頁的效果了。,圖像在網頁中可以起到提供信息、展示作品、美化網頁以及體現風格等功效。圖像可以用作網頁的標題、網站Logo、網頁背景、鏈接按鈕、導航欄、網頁主圖等。圖像給人的視覺效果要比文字強烈得多，在網頁中靈活應用圖像可以起到點綴的效果。雖然圖像在網頁中不可或缺，但也不能太多，因為圖像的下載速度較慢，而且網頁上如果放置了過多的圖片，會顯得很亂，有喧賓奪主之勢。 網頁上的圖像文件大部分都是使用JPG和GIF格式，因為，它們除了具有壓縮比例高外，還具有跨平臺特性。,動畫是網頁上最活躍的元素，通常制作優(yōu)秀、創(chuàng)意出眾的動畫是吸引瀏覽者的最有效的方法。如果網頁

5、中存有太多的動畫，會使瀏覽者眼花繚亂，無心細看。所以，對動畫制作的要求越來越高。在網頁中加入的動畫一般是GIF格式的動畫和Flash（.swf）動畫等。,導航欄是網站設計者在規(guī)劃網站結構時必須考慮的一個問題，站點的每個網頁上均應設置導航欄，并且應將其放置在網頁中比較明顯的位置。設置導航欄的目的是使瀏覽者能夠順利地瀏覽網頁，方便地返回主頁或繼續(xù)下一頁的訪問。導航欄可以是文本、按鈕或圖像的樣式。,超鏈接是網頁中最為有用的功能之一。超鏈接是從一個網頁指向另一個網頁的鏈接，該鏈接既可以指向本地網站的另一個網頁，也可以指向世界各地的其他網頁。 無論是文本還是圖像都可以加上超鏈接標記，當鼠標指上超鏈接對象

6、時會變成小手形狀，單擊鼠標左鍵即可鏈接到相應地址（URL）的網頁。超鏈接包括站內鏈接和站外鏈接。 站內鏈接：若網站規(guī)劃了多個主題版塊，需要給網站的首頁加入超鏈接，讓瀏覽者可以快速地轉到感興趣的頁面。在各個子頁面也要有超級鏈接，并設有能夠回到主頁的鏈接。 站外鏈接：在個人網站上放置一些與網站主題有關的對外鏈接，不但可以把好的網站介紹給瀏覽者，而且能使瀏覽者樂意再度光臨該網站。(友情鏈接),表格是網頁中的一種用于控制網頁頁面布局的有效方法。為了達到理想的視覺效果，通常不顯示表格的邊框。使用表格輔助布局，可以實現網頁橫豎分明的風格。 表單是一種特殊的網頁元素，通常用于收集信息或實現一些交互式的效果。

7、表單的主要功能是接收瀏覽者在瀏覽器的輸入信息，然后將這些信息發(fā)送到服務器端。,6.動態(tài)網頁和靜態(tài)網頁的區(qū)別,在網站設計中，純粹HTML格式的網頁通常稱為“靜態(tài)網頁”，它運行于客戶端，以.htm、.html、.shtml和.xml等為擴展名。靜態(tài)網頁的內容僅僅是標準的HTML代碼，靜態(tài)網頁上也可以出現各種動態(tài)效果，如GIF格式的動畫、Flash動畫等，這些“動態(tài)效果”只是視覺上的，與下面將要介紹的動態(tài)網頁是不同的概念。,采用了動態(tài)網頁技術，在服務器端運行的網頁和程序屬于動態(tài)網頁，它們會根據編寫的程序訪問數據庫動態(tài)地生成頁面。動態(tài)網頁文件的后綴一般都是.asp、.aspx、.php、.jsp。動態(tài)

8、網頁的優(yōu)點是效率高、更新快、移植性強，可以根據先前所制定好的程序頁面，根據用戶的不同請求返回其相應的數據，從而達到資源的最大利用和節(jié)省服務器上的物理資源。,動態(tài)網頁和靜態(tài)網頁不是從視覺上區(qū)分的，比如動畫效果，網頁中包含可以動的元素并不意味著就是動態(tài)網頁，靜態(tài)網頁也可以有動畫。 請自行閱讀課本中它們各自的特點,7.常用的網頁設計軟件有哪些？,FrontPage Dreamweaver,8.網頁圖像與網頁動畫制作軟件,Photoshop Fireworks（.gif） Flash(.swf),9.HTML的基本結構,9.HTML的基本結構,：告訴瀏覽器HTML文檔開始和結束的位置，其中包括head

9、部分和body部分。HTML文檔中所有的內容都應該在這兩個標記之間，一個HTML文檔總是以開始，以結束。,：HTML文件的頭部標記，頭部主要提供文檔的描述信息，head部分的所有內容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內容,：用來指明文檔的主體區(qū)域，網頁所要顯示的內容都放在這個標記內，其結束標記指明主體區(qū)域的結束,9.HTML的基本結構,：告訴瀏覽器HTML文檔開始和結束的位置，其中包括head部分和body部分。HTML文檔中所有的內容都應該在這兩個標記之間，一個HTML文檔總是以開始，以結束。,：HTML文件的頭部標記，

10、頭部主要提供文檔的描述信息，head部分的所有內容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內容,：用來指明文檔的主體區(qū)域，網頁所要顯示的內容都放在這個標記內，其結束標記指明主體區(qū)域的結束,9.HTML的基本結構,：告訴瀏覽器HTML文檔開始和結束的位置，其中包括head部分和body部分。HTML文檔中所有的內容都應該在這兩個標記之間，一個HTML文檔總是以開始，以結束。,：HTML文件的頭部標記，頭部主要提供文檔的描述信息，head部分的所有內容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標題以及頁面的類型、使用的字符集、鏈

11、接的其它腳本或樣式文件等內容,：用來指明文檔的主體區(qū)域，網頁所要顯示的內容都放在這個標記內，其結束標記指明主體區(qū)域的結束,10.如何使用HTML編寫網頁文件？,使用記事本，代碼編好之后，保存時這樣命名：文件名.html，保存類型選擇：所有文件 使用Dreamweaver新建一個html文件 演示,11.標簽,標簽是HTML文檔中一些有特定意義的符號，這些符號指明內容的含義或結構。標簽總是放在三角括號中，大多數標簽都是成對出現的，表示開始和結束。,標簽的內容,標簽名稱,起始標簽,結束標簽,標簽可以有屬性，賦值的時候用“=”，多個屬性中間用空格隔開 屬性要寫在開始標簽里，并且標簽符號和中間不可以有空格，如是錯誤的 結束的標簽一定要加“/”,12.body標簽常見屬性介紹,bgcolor屬性：用于設置HTML網頁的背景顏色，例如，表示背景顏色設置為紅色。 background屬性：用于設置HTML網頁的背景圖片，例如，表示將圖片tu.jpg設置為HTML網頁的背景。,text屬性：用于設置HTML網頁的文本顏色。使用text定義的顏色將應用于整篇文檔。例如，表示文本顏色設置為紅色。 link、alink、vlink屬性：用于分別設置普通超鏈接、當前活動的超鏈接、已訪問的超鏈接文本的顏色。例如，,topmargin、leftmargin屬性：用于設置網頁主體內容與網頁頂端、