1、YCF正版可修改PPT（中職）網(wǎng)頁設計與制作模塊1 初識網(wǎng)頁模塊1 初識網(wǎng)頁萬維網(wǎng)(World Wide Web, WWW)是Inter net上應用最廣泛的一種服務。為了與傳統(tǒng)的網(wǎng)絡相區(qū)別，人們將WWW簡稱為web或3 W . Web上具有共同主題、性質(zhì)相關的一組資源就是web站點。 web，直譯為“網(wǎng)”，其含義是指通過超鏈接將各種文檔組合在一起，形成一個大規(guī)模的信息集合。下一頁模塊1 初識網(wǎng)頁1.1 認識網(wǎng)站網(wǎng)頁1.2 結識網(wǎng)頁制作工具1.3 網(wǎng)站制作流程1.4 HTML基礎1.1 認識網(wǎng)站網(wǎng)頁1.1.1 Web的特點瀏覽Web時所看到的文件稱為Web頁，又稱為網(wǎng)頁。網(wǎng)頁可以將不同類型的多

2、媒體信息(例如文本、圖像、聲音和動畫等)組合在一個文檔中。由于這些文檔是用超文本標記語言(Hyper text Markup Language,HTML)表示的，其文件名一般以.htm或.html結尾，因此又稱為HTML文檔或超文本。超文本可以給瀏覽者帶來視覺和聽覺的享受，所以web技術又稱為超媒體技術。一個web站點由一個或多個web頁組成，這些web頁相互連接在一起，存放在web服務器上，以供瀏覽者訪問。瀏覽者通過web頁可以進行跳躍式的查詢與瀏覽，可以在世界各地的計算機之間自由、高效率地選擇和收集各種各樣的信息，而不必知道所瀏覽的信息來自于哪臺計算機。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁

3、web所包含的是雙向信息。一方面，瀏覽者可以通過瀏覽器瀏覽他人的信息；另一方面，瀏覽者也可以通過web服務器建立自己的網(wǎng)站并發(fā)布自己的信息。1.1.2 Web的結構由圖1-1可以看出，Web站點并不是孤立存在的，它包括了多個頁面與多種元素。一個真正的網(wǎng)站是由許多頁面和超鏈接組成的，并由服務器發(fā)布。瀏覽者可以通過瀏覽器對Web站點進行瀏覽。Web頁包括的主要元素有：文本、圖像、超鏈接、導航欄、表格、表單、多媒體及特殊效果等。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁1.文本文本是人類最重要的信息載體和交流工具，網(wǎng)頁的主體一般以文本為主。在制作網(wǎng)頁時，可以根據(jù)需要設置文本的字體、字號、顏色以及所需要的其

4、他格式。2.圖像圖像在網(wǎng)頁中可以起到提供信息、展示作品、美化網(wǎng)頁以及體現(xiàn)風格等功效。圖像可以用作標題、網(wǎng)站標志(Logo)、網(wǎng)頁背景、鏈接按鈕、導航欄、網(wǎng)頁主圖等。瀏覽者可以在網(wǎng)頁中使用多種圖像文件格式，使用最多的是JPEG和GIF格式。網(wǎng)頁中的圖像不宜太多，否則將影響網(wǎng)頁的傳輸速率。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁3.導航欄導航欄是網(wǎng)站設計者在規(guī)劃網(wǎng)站結構時必須考慮的一個問題。設置導航欄的目的是使瀏覽者能夠順利地瀏覽網(wǎng)頁，避免迷失方向。導航欄能使瀏覽者方便地返回主頁或繼續(xù)下一頁的訪問。導航欄可以是按鈕、文本或圖像的樣式。站點的每個網(wǎng)頁上均應設置導航欄，并且應將其放置在網(wǎng)頁中比較明顯的位置

5、。4.超鏈接超鏈接是網(wǎng)頁中最有用的功能之一。超鏈接是從一個網(wǎng)頁指向另一個網(wǎng)頁的鏈接，該鏈接既可以指向本地網(wǎng)站的另一個網(wǎng)頁，也可以指向世界各地的其他網(wǎng)頁。當瀏覽者單擊超鏈接時，其指向的網(wǎng)頁的內(nèi)容將顯示在瀏覽者的Web瀏覽器中。不論是文字還是圖像，都可以設置為超鏈接。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁超鏈接一般包括兩種類型:站內(nèi)鏈接和站外鏈接。5.表格網(wǎng)頁中的表格是一種用于控制網(wǎng)頁頁面布局的有效方法。為了達到理想的視覺效果，通常不顯示表格的邊框。使用表格輔助布局，可以體現(xiàn)網(wǎng)頁橫豎分明的風格。6.表單表單是一種特殊的網(wǎng)頁元素，通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。表單的主要功能是接收瀏覽者在瀏覽

6、器端的輸入信息，然后將這些信息發(fā)送到服務器端。例如，中請電子郵箱就需要填寫一系列的表單。在圖1-1所示的頁面中，用戶登錄的登錄名、密碼、搜索引擎等都是表單。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁7.多媒體及特殊效果為了吸引更多的瀏覽者，許多網(wǎng)頁還包含聲音、動畫、視頻等多媒體元素以及懸停按鈕、Java控件、ActiveX控件等特殊效果。1.1.3 URL統(tǒng)一資源定位符(Uniform Resource Locator, URL)是文件名的擴展，是互聯(lián)網(wǎng)上資源的地址。在單機系統(tǒng)中，定位一個文件需要路徑和文件名，對于遍布全球的Internet，顯然還需要知道文件的存放位置。在單機系統(tǒng)中，所有的文件都由

7、統(tǒng)一的操作系統(tǒng)管理，不必給出訪問該文件的方法;而在Internet上，各個網(wǎng)絡、各臺主機的操作系統(tǒng)都不盡相同，所以必須指定訪問該文件的方法。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁1.URL包含的內(nèi)容URL包含以下3個部分:(1)在Web上傳輸資源所使用協(xié)議的名稱。(2)數(shù)據(jù)所在的主機名稱。(3)資源本身的路徑。2.URL的格式URL的格式:protocol:/machine_name:port /directory/filename其中各部分的含意如下。1)ProtocolProtocol是訪問該資源所采用的協(xié)議，即訪問該資源的方法，它可以是以下幾種方法中的任意一種。 返回下一頁上一頁1.1 認

8、識網(wǎng)站網(wǎng)頁(1)HTTP(超文本傳輸協(xié)議):該資源是html文件。(2)FTP(文件傳輸協(xié)議):用ftp文件訪問該資源。(3)Gopher協(xié)議:該資源是gopher文件，表明該資源是網(wǎng)絡新聞。(4)News:該資源是網(wǎng)絡新聞。2)machine namemachine name是存放該資源服務器的域名系統(tǒng)(DNS主機名或IP地址），通常以字符形式出現(xiàn)，如.3)portport是在該主機所使用的服務器端口號，一般情況下端口號不需要指定，只有當服務器所使用的端口號不是默認端口時才需要指定。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁4)directory和filenamedirectory和filenam

9、e是該資源的路徑和文件名。例如，某網(wǎng)址(信息所在位置)的表示如下:http;/www. mm/xyz/filel. htm。與單機系統(tǒng)絕對路徑、相對路徑的概念類似，統(tǒng)一資源定位符也有絕對URL和相對URL之分。上文所述的是絕對URL，相對URL是相對于用戶最近訪問的URL。比如用戶正在訪問一個URL為http;/index.html的文件，如果想訪問同一個目錄下的另一個文件newfilml，可以直接使用newfilml，這時newfilml就是一個相對URL，它的絕對URL為http;/newfilml.html.返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁1.1.4網(wǎng)頁的分類根據(jù)網(wǎng)頁的交互性，又可將

10、網(wǎng)頁分為靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁。(1)靜態(tài)網(wǎng)頁:網(wǎng)站提供的最基本的內(nèi)容，使用HTML描述，它包括文本、表格、圖像以及其他內(nèi)容，不同用戶訪問時內(nèi)容均相同。靜態(tài)網(wǎng)頁只要將放在網(wǎng)站服務器上的文件授權用戶訪問即可。(2)動態(tài)網(wǎng)頁:網(wǎng)頁內(nèi)容隨不同用戶、不同訪問的需求而發(fā)生變化，網(wǎng)頁中不僅包含HTML代碼，同時也包含在Web服務器端執(zhí)行的腳本程序代碼。用戶可以訪問服務器端的資源，服務器將用戶請求的資源，通過瀏覽器呈現(xiàn)給用戶。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁1.1.5網(wǎng)頁、網(wǎng)站和主頁的關系上面講到Web, URL等概念，與網(wǎng)頁、網(wǎng)站、主頁又有什么關系呢?1.Web頁面Web頁面就是在瀏覽器里看到的網(wǎng)頁，是一

11、個單一的文件。2.網(wǎng)頁網(wǎng)頁是人們用HTML( Hyper text Markup Language,超文本標記語言)所編寫的內(nèi)容豐富的頁面。網(wǎng)頁里不僅有原來的文本內(nèi)容，也可以有超出文本以外的內(nèi)容，如圖像、鏈接、聲音以及視頻等。每一個網(wǎng)頁都是磁盤上的一個文件，可以單獨瀏覽。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁3.網(wǎng)站網(wǎng)站:由大量內(nèi)容相關的網(wǎng)頁通過超鏈接的形式組織成一個邏輯上的整體。網(wǎng)站的組成部分如下。(1)硬件:連接到網(wǎng)絡的計算機，包括各種服務器。(2)軟件:在服務器上運行的網(wǎng)絡操作系統(tǒng)、web服務器、應用程序服務器軟件等。(3)各種信息服務的文件資源，如網(wǎng)頁文件、圖像文件、聲音文件、數(shù)據(jù)庫等。

12、(4)對網(wǎng)站進行管理和維護的網(wǎng)站管理人員和開發(fā)人員等。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁4.主頁主頁(或首頁)是網(wǎng)站中的第一頁。與一般網(wǎng)頁不同之處在于，主頁是各個子網(wǎng)頁的集合，是網(wǎng)站的出發(fā)點。在主頁中有網(wǎng)站的導航欄、鏈接到網(wǎng)站內(nèi)各分頁的地址、圖片、動畫等。主頁總是與一個網(wǎng)址(URL)相對應，可以帶領用戶走進一個網(wǎng)站。圖1-1為網(wǎng)站http;/的主頁，主頁名稱為index.html,讀者可以在IE(Internet Explorer)瀏覽器地址欄輸入http;/index.html，依然會打開如圖1-1所示的結果。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁在主頁里，應該給出這個站點的基本信息和主要內(nèi)

13、容，使瀏覽的用戶看到后就可以知道該站點的基本內(nèi)容，知道這里的信息是否可用，是否繼續(xù)瀏覽下去。因此，主頁的作用比其他網(wǎng)頁更為重要，在設計和制作時必須仔細考慮。如果把WWW視為一個圖書館，那么網(wǎng)站就是圖書館中的書，網(wǎng)頁則相當于書的某一頁，首頁就是書的封面。返回下一頁上一頁1.1 認識網(wǎng)站網(wǎng)頁1.1.6 HTMLWWW上的文檔稱為頁(Web頁或網(wǎng)頁)，它用HTML編寫，并使用URL進行標識，在HTTP協(xié)議下將文件在節(jié)點間進行傳輸。用戶可通過瀏覽器來瀏覽網(wǎng)頁。超文本標記語言(HTML)是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它獨立于各種操作系統(tǒng)平臺(如UNI

14、X, Windows等)。超文本(Hypertext)是相對于文本而言的，之所以稱為超文本，是因為它的內(nèi)容不僅僅包括純文本，還可以加入圖片、聲音、動畫、視頻等內(nèi)容，并包含與其他文檔的鏈接，即實現(xiàn)從一個文檔跳轉(zhuǎn)到另一個文檔。網(wǎng)頁文件的擴展名一般為.html或.htm.超鏈接(Hyperlink)可以從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁，或是從網(wǎng)頁的某一部分引導到另一部分。超鏈接由特殊的文字或圖像來體現(xiàn)，點擊它就可以實現(xiàn)鏈接。返回上一頁1 .2結識網(wǎng)頁制作工具1.2.1網(wǎng)頁編輯工具1.DreamweaverDreamweaver是網(wǎng)頁制作工具，它使用所見即所得的界面，亦有HTML編輯的功能。Dreamwea

15、ver支持ActiveX, JavaScript, Java, Flash, ShockWave等，而且它還支持動態(tài)HTML (Dynamic HTML)的設計，使頁面在沒有安裝插件的情況下也可以在Netscape和IE瀏覽器中正確地顯示頁面的動畫，同時它還提供了自動更新頁面信息的功能。Dreamweaver的開放式設計是其最顯著的特點，它使任何人都可以輕易擴展它的功能。返回下一頁1 .2結識網(wǎng)頁制作工具2 .FrontPageFrontPage是微軟Office系列軟件之一，繼承了Office系列軟件的界面通用、操作簡單等特點，用戶可以像在Word中一樣直接進行編輯，編輯的內(nèi)容也將由Fron

16、tPage自動生成HTML網(wǎng)頁代碼。因此，F(xiàn)rontPage一個很大的好處就是與Office系列軟件的一致性，特別適合初學者。但是FrontPage也存在部分缺點，如兼容性差、生成的垃圾代碼多、對動態(tài)網(wǎng)頁支持差等。 要想成為一名優(yōu)秀的網(wǎng)頁設計師，建議最好在學習完Dreamweaver后，再研究一下FrontPage軟件，只要會用Dreamweaver，自然就會用FrontPage，利用兩種互補的功能，方可制作優(yōu)秀、復雜的網(wǎng)頁。返回下一頁上一頁1 .2結識網(wǎng)頁制作工具1.2.2網(wǎng)頁圖像與動畫制作工具現(xiàn)在的網(wǎng)頁通常具有豐富多彩的圖像和動畫。對于網(wǎng)頁中的圖像和動畫，既要求質(zhì)量高同時還要求文件所占存儲

17、空間小。1.FlashFlash是Macromedia公司專門為制作網(wǎng)頁而設計的一款交互性矢量動畫設計軟件。網(wǎng)頁設計者可以使用該軟件設計各種動態(tài)Logo(商標、圖案)、動畫、導航條，還可帶有動感音樂，以及其他多媒體的各項功能。由于矢量圖形不會因為縮放而導致影像失真，因此在Web上應用廣泛。2 .FireworksFireworks是Macromedia公司專門設計的web圖形工具軟件，它可以用較少的步驟生成較小但質(zhì)量很高的JPEG和GIF圖像，并且這些圖像可以直接用于網(wǎng)頁上。Fireworks是Web圖形工具的首選軟件。返回下一頁上一頁1 .2結識網(wǎng)頁制作工具3 .PhotoshopPhoto

18、shop是由Adobe公司開發(fā)的著名圖形圖像處理軟件。它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理，是專業(yè)圖像創(chuàng)作的首選軟件。以上軟件能相互無縫合作。通常網(wǎng)頁制作的順序，是先在Firework中繪制主頁圖片，然后進行切片，再將切片導出到Dreamweaver中，在Dreamweaver中編輯修改，添加鏈接，最后再導入用Flash制作的動畫。2005年，Adobe公司收購了Macromedia公司，并于2007年推出了Adobe Dreamweaver, Firework , Flash的C”版本。返回上一頁1. 3網(wǎng)站制作流程 網(wǎng)頁的功能強大，內(nèi)容豐富。做一個網(wǎng)頁是簡單的，但要做好一個網(wǎng)站則是非常復雜、困難

19、的工作。開發(fā)一個優(yōu)秀的網(wǎng)站并不能隨心所欲，必須遵循一定的工作流程，網(wǎng)站制作流程一般分為3個階段，如圖1-2所示。1.3.1網(wǎng)站規(guī)劃1.確定網(wǎng)站的主題與名稱網(wǎng)站主題是指建立的網(wǎng)站所要包含的主要內(nèi)容。例如，旅游、娛樂休閑、體育、新聞、教育、醫(yī)療、時尚等。其中每一大類又可進一步細化為若刊、類。一般來說，確定網(wǎng)站主題應遵循以下原則:(1)主題鮮明。一個網(wǎng)站必須有一個明確的主題，在主題范圍內(nèi)做到內(nèi)容全而精。(2)明確設立網(wǎng)站的目的。返回下一頁1. 3網(wǎng)站制作流程(3)體現(xiàn)個性。把自己的興趣、愛好盡情地發(fā)揮出來，突出自己的個性，創(chuàng)建出具有自己特色的網(wǎng)站。在個人主頁中，網(wǎng)站的名稱起著很重要的作用，它在很大程

20、度上決定了整個網(wǎng)站的定位。一個好的名稱必須有概括性、簡潔、有特色、容易記，還要符合自己主頁的主題和風格。2.搜集材料確定網(wǎng)站主題后，要圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。搜集的材料越多，制作網(wǎng)站越容易。材料既可以從圖書、報紙、光盤、多媒體上獲得，也可以從網(wǎng)上搜集。對搜集到的材料應去粗取精，去偽存真。返回下一頁上一頁1. 3網(wǎng)站制作流程3.規(guī)劃網(wǎng)站規(guī)劃網(wǎng)站就像設計師設計大樓一樣，只有圖紙設計好了，才能建成一座漂亮的樓房。規(guī)劃網(wǎng)站時，首先應把網(wǎng)站的內(nèi)容列舉出來，然后根據(jù)內(nèi)容列出一個結構化的藍圖，再根據(jù)實際情況設計各個頁面之間的鏈接。規(guī)劃網(wǎng)站的內(nèi)容應包括欄目的設置、目錄結構、網(wǎng)站的風格(即顏色

21、搭配、網(wǎng)站Logo、版面布局、圖像的運用)等。4.主題欄的設置在設計網(wǎng)站的主題欄與板塊時應注意以下幾個問題:(1)突出主題。把主題欄放在最明顯的地方，讓瀏覽者快速、明確地知道網(wǎng)站所表現(xiàn)的內(nèi)容。(2)設計一個“最近更新”欄目，讓瀏覽者能夠一目了然地知道更新內(nèi)容。返回下一頁上一頁1. 3網(wǎng)站制作流程(3)欄目不要設置太多，一般不超過10個。5.目錄結構設計目錄結構設計一般應注意以下問題:(1)按欄目內(nèi)容建立子目錄。(2)每個目錄下分別為圖像文件創(chuàng)建一個子目錄image(圖像較少時可不創(chuàng)建)。(3)目錄的層次不要太深，主要欄目最好能直接從首頁到達。(4)盡量使用意義明確的非中文目錄名稱。6.顏色搭配

22、合理地使用色彩是非常關鍵的，不同的色彩搭配會產(chǎn)生不同的效果，并能影響瀏覽者的情緒。網(wǎng)頁選用的背景應與頁面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點突出的原則。返回下一頁上一頁1. 3網(wǎng)站制作流程7.網(wǎng)站LogoLogo最重要的作用就是表達網(wǎng)站的理念、便于人們識別，它廣泛地應用于站點的鏈接和宣傳中。如同商標一樣，Logo是站點特色和內(nèi)涵的集中體現(xiàn)。如果是企業(yè)網(wǎng)站，最好在企業(yè)商標的基礎上設計，以保持企業(yè)形象的整體統(tǒng)一。設計Logo的原則是:以簡潔的、符號化的視覺藝術把網(wǎng)站的形象和理念展示出來。8.版面布局網(wǎng)頁頁面的整體布局是不可忽視的。要合理地運用空間，使網(wǎng)頁疏密有致，井井有條。版面布局一般應遵

23、循的原則是:突出重點、平衡和諧，將網(wǎng)站Logo、主菜單等較為重要的模塊放在突出的位置，然后再排放次要模塊(例如搜索、友情鏈接、計數(shù)器、版權信息、E-mail地址等)。返回下一頁上一頁1. 3網(wǎng)站制作流程此外，其他頁面的設計應與首頁保持相同的風格，并有返回首頁的鏈接。9.圖像的運用網(wǎng)頁上應適當?shù)靥砑右恍﹫D像，使用圖像一般應注意以下幾個問題:(1)圖像是為網(wǎng)頁內(nèi)容服務的，不能讓圖像喧賓奪主。(2)圖像要兼顧大小和美觀。圖像不僅要好看，還應在保證圖像質(zhì)量的情況下盡量縮小圖像的大小(即字節(jié)數(shù))。圖像過大將影響網(wǎng)頁的傳輸速率。(3)合理地采用JPEG和GIF圖像格式。顏色較少的(256色以內(nèi))圖像，可處

24、理為GIF格式;色彩比較豐富的圖像，最好處理為JPEG格式。返回下一頁上一頁1. 3網(wǎng)站制作流程1.3.2網(wǎng)站制作1.制作網(wǎng)站制作網(wǎng)站主要包括以下幾個步驟:(1)建立本地站點。建立站點根文件夾，用于存放首頁、相關網(wǎng)頁和網(wǎng)站中用到的其他文件。(2)在站點根文件夾下創(chuàng)建子文件夾。為了使文件安排比較清晰，應將頁面文件和圖像文件分開存放。(3)向站點添加所需要的空網(wǎng)頁。(4)設計網(wǎng)頁尺寸。(5)設置網(wǎng)頁屬性，包括頁面標題、背景圖像、背景顏色、鏈接顏色、文字顏色等。(6)向網(wǎng)頁中插入文本、圖形圖像、動畫等對象。返回下一頁上一頁1. 3網(wǎng)站制作流程(7)建立所需要的超級鏈接。(8)預覽和保存網(wǎng)頁。2.上傳

25、與測試測試與正式上傳是不可分割的兩項工作。制作完畢的網(wǎng)頁，必須進行測試。測試主要包括上傳前的兼容性測試、鏈接測試和上傳后的實地測試。完成上傳前所需要的測試后，利用FTP工具將網(wǎng)頁發(fā)布到所中請的主頁服務器上。網(wǎng)站上傳之后，繼續(xù)通過瀏覽器進行實地測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。1.3.3網(wǎng)站后期維護將所有的網(wǎng)頁制作完成后，就可以將網(wǎng)站發(fā)布到Internet上，并進入后期的更新維護。此項工作主要應考慮以下兩個方面。返回下一頁上一頁1. 3網(wǎng)站制作流程1.測試并發(fā)布網(wǎng)站檢查網(wǎng)頁的顯示細節(jié)(有無圖片顯示不出來現(xiàn)象)、頁面上的超級鏈接(有無鏈接錯誤或沒有鏈接現(xiàn)象)等。待測試沒有問題后，就可以將網(wǎng)

26、站中所有的文件及文件夾上傳到Internet的服務器上，以便讓全世界的瀏覽者都能夠瀏覽。2.更新維護隨著網(wǎng)站的發(fā)布，根據(jù)訪問者的建議，不斷修改或者更新網(wǎng)站中的信息，并從瀏覽者的角度出發(fā)，進一步完善網(wǎng)站。這時網(wǎng)站建設工作又返回到流程中的第一步，這樣周而復始就構成了網(wǎng)站的維護過程。返回上一頁1.4 HTML基礎1.4.1 HTML的基本概念HTML稱為超文本標記語言。使用HTML編寫的超文本文檔稱為HTML文檔。任何網(wǎng)頁頁面都是以HTML語言為核心和基礎的。例如，圖1-1所示的是一個標準的網(wǎng)站頁面，單擊瀏覽器窗口菜單欄中的“查看”菜單，選擇“源文件”選項，打開的即是網(wǎng)頁頁面的源代碼，如圖1-3所示

27、，該源代碼就是使用HTML語言編寫的。1.4.2 HTML網(wǎng)頁的編寫方法1.H下ML網(wǎng)頁文件的命名規(guī)則(1)允許使用漢字、英文字母、數(shù)字和下劃線，不能包含空格與特殊符號。(2)名稱區(qū)分大小寫。返回下一頁1.4 HTML基礎(3)網(wǎng)站主頁文件名一般為index. htm或index. html.2.使用HTML編寫網(wǎng)頁(1)手工編寫。這是最傳統(tǒng)的編寫方法。只要裝有Windows系統(tǒng)，使用“記事本”即可編寫出HTML網(wǎng)頁。(2)使用可視化的HTML編輯軟件，這是最方便的編寫方法。例如，F(xiàn)rontPage, Dreamweaver等。(3)通過編寫程序，由Ph服務器實時、動態(tài)地生成網(wǎng)頁。這屬于動態(tài)網(wǎng)

28、頁的制作方法。使用HTML編寫網(wǎng)頁的操作步驟如下:生成網(wǎng)頁頁面。打開“開始”菜單，選擇“程序”、“附件”、“記事本”命令，啟動windows系統(tǒng)中的“記事本”程序。返回下一頁上一頁1.4 HTML基礎也可以啟動Dreamweaver，單擊文檔工具欄中的“代碼視圖”按鈕，顯示“代碼視圖”窗口。在打開的記事本中輸入圖1-4所示的HTML源代碼。選擇“文件”I“保存”命令，在彈出的“另存為”對話框中選擇存放位置并輸入網(wǎng)頁文件名。例如，輸入“網(wǎng)頁.htm”。在“保存類型”下拉列表框中選擇“所有文件”選項，然后單擊“保存”按鈕。雙擊打開“網(wǎng)頁.htm”文件，顯示如圖1-5所示的網(wǎng)頁，瀏覽器標題欄顯示“學

29、習使用HTML編寫網(wǎng)頁”，瀏覽器窗口顯示“學習HTML網(wǎng)頁設計第一課”。返回下一頁上一頁1.4 HTML基礎3.HTML網(wǎng)頁的結構(1)網(wǎng)頁源代碼的基本結構如下:(2)元素是HTML語言的基本組成部分，一般成對出現(xiàn)，每一對元素都有一個開始標記與一個結束標記。例如，與。元素的標記應使用一對尖括號括起來，結束標記前應有一個斜杠。(3) 與標記分別表示HTML文檔的開始與結束。任何HTML文檔都被包含在一對與標記中。返回下一頁上一頁1.4 HTML基礎(4) 與標記之間是網(wǎng)頁的頭部信息，其中與標記之間指定了網(wǎng)頁的標題。(5) 與標記之間是網(wǎng)頁的主體，在網(wǎng)頁中看到的頁面標識一般都包含在與之間。(6)

30、HTML元素具有自己的相關屬性，每一個屬性可以賦予一定的值。元素屬性應放在元素的開始標記內(nèi)，并與元素名之間有一個空格分隔，文本屬性值應使用雙引號(“”)括起來。例如，與標記表示將所包含的文字存放在一個段落中;align表示排列屬性，center表示居中對齊。(7)書寫HTML源代碼時，標記字符不區(qū)分大小寫，標記之間空格的多少不影響網(wǎng)頁的顯示。返回下一頁上一頁1.4 HTML基礎1.4.3 HTML的頭部標記與主體標記HTML源代碼包括頭部和主體兩部分。分別對應標志和標志。圖1-4的代碼清單的第二行中，出現(xiàn)了這樣一個標志:而在第一七行中，出現(xiàn)了如下標志: .在HTML中，和是兩個非常重要的標志，

31、這是因為所有的HTML文檔都分為兩個部分，即文檔頭和文檔體。使用和標志將文檔頭包圍起來;使用和標志將文檔體包圍起來。這樣，瀏覽器才能正確地解釋HTML文檔。這里再次提醒讀者,HTML的標志是成對出現(xiàn)的，成對出現(xiàn)的標志間的唯一區(qū)別是后一個標志比前一個標志多了一個“/”符。返回下一頁上一頁1.4 HTML基礎1.4.4 標志在圖1-4的代碼清單的第三行中，有如下代碼:學習使用HTML編寫網(wǎng)頁。對照圖1-5,讀者可能已經(jīng)發(fā)現(xiàn)，用和包圍起來的內(nèi)容就是瀏覽器中顯示的文檔標題。至此，讀者已經(jīng)了解了HTML中最基本的標志，可以使用這幾個標志構成一個HTML文檔，盡管這個HTML文檔上什么內(nèi)容也沒有，但無論如

32、何，它畢竟是一個完整的HTML文檔。現(xiàn)在，請讀者回憶一下，通常情況下，一個HTML文檔應包括以下代碼:返回下一頁上一頁1.4 HTML基礎文檔標題將這段代碼保存為templet.htm,讀者在書寫HTML文檔時直接加載該模板，從而就可以省去每次都重復輸入這些必需的標志的操作了。使用瀏覽器打開該文件，如圖1-6所示。返回下一頁上一頁1.4 HTML基礎1.4.5 HTML的文本標記與鏈接標記文本標記分為文本的基本設置與文本的修飾設置。1.文本屬性的設置face屬性用于設置文本的字體，color屬性用于設置文本的顏色，Size屬性用于設置文本的字號。設置文本的字體、字號與顏色設置文本的字體為宋體

33、設置文本的字體為隸書 設置文本的字體為楷體_gb2312 設置文本的顏色1 設置文本的顏色1 返回下一頁上一頁1.4 HTML基礎設置文本的顏色1 設置文本的大小為1 設置文本的大小為2 設置文本的大小為3 設置文本的大小為4 設置文本的大小為5 設置文本的大小為6 設置文本的大小為7 顯示效果如圖1-7所示。返回下一頁上一頁1.4 HTML基礎2.文本的修飾設置適當?shù)貞梦谋拘揎椏梢允咕W(wǎng)頁更加美觀。1)標題設置屬性用于設置標題的字號大小。例:一級標題二級標題三級標題四級標題五級標題六級標題其中，表示字號最大的標題，表示字號最小的標題。顯示效果如圖1-8所示。返回下一頁上一頁1.4 HTML基

34、礎2)文本的修飾常規(guī)字加粗常規(guī)字斜體常規(guī)字下劃線常規(guī)字上標常規(guī)字下標常規(guī)字刪除線常規(guī)字 Strike實現(xiàn)的刪除線 常規(guī)字 em標記斜體常規(guī)字 strong標記加粗 常規(guī)字 code標記等寬常規(guī)字var標記變量或程序參數(shù)斜體返回下一頁上一頁1.4 HTML基礎常規(guī)字 small標記小字體顯示常規(guī)字 big標記大字體顯示顯示效果如圖1-9所示。3)代碼的注釋可以在HTML文檔中插入注釋，注釋內(nèi)容在瀏覽器窗口中不顯示。HTML注釋的格式如下:3.段落標記1)分段與分行HTML使用標記實現(xiàn)段落分段;使用標記實現(xiàn)換行，這種換行與瀏覽器的自動換行基本相同。標記不是成對出現(xiàn)的。下面是標記與標記的綜合應用。返

35、回下一頁上一頁1.4 HTML基礎河山只在我夢里祖國已多年未親近可是不管怎樣也改變不了我的中國心洋裝雖然穿在身我心依然是中國心我的祖先早已把我的一切烙上中國印長江長城黃山黃河在我胸中重千斤無論何時無論何地返回下一頁上一頁1.4 HTML基礎心中一樣親流在心里的血顯示效果如圖1-10所示。其中，的作用是實現(xiàn)段落的分段，段落之間的距離明顯比換行所產(chǎn)生的距離要寬。 2)文本的對齊HTML使用align屬性實現(xiàn)文本的對齊。標記作為文本的分區(qū)標記，使用方法與標記相似。此外，使用標記也可以完成文本的居中對齊。標記的功能是使所標記的字符居中，其作用與使用標記中的align = center”類似。實例如下:

36、 align在h標記中的左對齊 align在div標記中的居中對齊返回下一頁上一頁1.4 HTML基礎 align在p標記中的右對齊 center的居中對齊 顯示效果如圖1-11所示。4.水平線在網(wǎng)頁中，可以使用水平線分隔文本。水平線的設置方法如下。(1) :用于設定線寬。(2) :用于設定線長。(3) :用于設定對齊方式(#為left或right).(4) :用于設定線的顏色。返回下一頁上一頁1.4 HTML基礎操作實例如下:學習水平線學習HTML中的水平線顯示效果如圖1-12所示。返回下一頁上一頁1.4 HTML基礎5.列表標記列表是HTML網(wǎng)頁中重要的元素，列表的作用相當于文字處理軟件中

37、的“項目符號與編號”。HTML規(guī)定了多種列表元素。列表分為無序列表和有序列表。1)無序列表無序列表是由和元素定義的，它的默認符號是圓點。其中，元素包含type屬性，通過定義不同的type屬性可以改變列表的項目符號。type屬性包括:disc(圓點)、circle(圓圈),square(方塊)。無序列表的設置示例如下:說一切都是多余的 因為我到任何的地方 返回下一頁上一頁1.4 HTML基礎 都被回憶所困住 新的有什么可以把我從回憶的泥沼帶出來 我的世界里面沒有新的 世人都曉神仙好 連煩惱都是很舊的事情 你是新的? 還是舊的? 顯示效果如圖1-13所示。返回下一頁上一頁1.4 HTML基礎6.鏈

38、接標記超鏈接是整個WWW應用的核心和基礎。如果沒有超鏈接，那么所有的WWW應用將不復存在。所以，使用超鏈接具有重要的意義。1)基本鏈接超鏈接是由錨元素定義的。元素包含href屬性與target屬性。href屬性的值是一個URL地址或E-mail地址;target屬性控制鏈接的網(wǎng)頁在新的瀏覽器窗口打開。設置超鏈接的示例如下:鏈接新浪主頁返回下一頁上一頁1.4 HTML基礎鏈接指定的網(wǎng)頁文件鏈接指定的郵箱地址將鏈接的網(wǎng)頁文件在新窗口打開顯示效果如圖1-15所示。例如，單擊“鏈接新浪主頁”超鏈接，將打開新浪的主頁。返回下一頁上一頁1.4 HTML基礎2)錨點鏈接所謂錨點是指網(wǎng)頁中的某個位置，單擊該位

39、置可實現(xiàn)同一個網(wǎng)頁之內(nèi)的鏈接。例如，常用的“返回頁首”操作。在需要跳轉(zhuǎn)的位置輸入如下代碼:設置錨點a1在制作鏈接的位置輸入如下代碼:鏈接本頁錨點al 返回下一頁上一頁1.4 HTML基礎1.4.6 HTML的圖像標記1.圖像標記引用圖像必須使用標記，標記包含src屬性。src的屬性值是所引用圖像的URL地址，該地址既可以是絕對地址，也可以是相對地址。例如，輸入下列代碼，將在網(wǎng)頁中插人圖像文件X1. jpg.2.設置圖像標記的屬性通過圖像屬性的設置，可以調(diào)整或完善圖像在瀏覽器中的顯示。返回下一頁上一頁1.4 HTML基礎1)設置圖像的替代文本所謂圖像的替代文本是指當圖像不能正常顯示時，在圖像的所

40、在位置顯示一段提示文本，或當鼠標指針移至圖像所在位置時顯示替代文本。操作實例如圖1-16設置的圖像替代文本:在圖1-16所示頁面中，當鼠標指針移至圖像時，會出現(xiàn)替代文本“老師”。2)設置圖像的顯示大小可以指定一幅圖像在瀏覽器窗口中顯示的大小。例如，改變上例中圖像的顯示大小的代碼如下:返回下一頁上一頁1.4 HTML基礎其中，width指定圖像的寬度，height指定圖像的高度，屬性值的單位既可以是像素，也可以是百分比。在圖1-17所示頁面中，可看到圖像的大小發(fā)生了變化。3)設置圖像的邊框可以為一幅圖像加一個邊框以突出顯示。例如:其中，border屬性值的單位是像素。圖1-18所示頁面中，為圖像

41、設置了邊框。返回下一頁上一頁1.4 HTML基礎4)設置圖像的對齊方式圖片的對齊方式是相對于頁面或單元格的。(1)定義水平對齊方式(2)定義垂直對齊方式返回下一頁上一頁1.4 HTML基礎5)定義圖像的間距顯示圖像時，應與左右文本之間有一定的間距。定義圖像間距的方法如下:其中，hspace屬性定義水平間距，vspace屬性定義垂直間距，單位是像素。 3.圖像映射所謂圖像映射是指，一幅圖像上的不同位置被設置了不同的超鏈接，單擊圖像的不同位置時將打開不同的超鏈接目標。返回下一頁上一頁1.4 HTML基礎圖像映射是由標記定義的。標記包含name屬性，用于為圖像映射命名，該名稱將被標記的usemap屬

42、性所引用。因此，圖像映射實際上是對所定義映射的一個引用。標記可以定義3種形狀的映射，即circle(圓形),rect(方形)、poly(多邊形)。設置圖像映射的示例如下: 顯示效果如圖1-19所示。單擊“熱點區(qū)域”可顯示超鏈接的“我已經(jīng)做好的網(wǎng)頁”網(wǎng)頁。返回下一頁上一頁1.4 HTML基礎1.4.7 HTML的表格標記1.表格的編寫方法表格一般用于網(wǎng)頁排版，掌握表格的超文本編寫方法對于學好Dreamweaver很有幫助。設計一個完整的表格，至少需要以下3個標記。(1) 元素:用于定義一個表格。這是每一個表格必需的元素，每一個表格只有一對和標記，但一張網(wǎng)頁中可以包含多個表格。(2)元素:用于定義

43、表格的行。一個表格可以有多個行，因此，對于一個表格來說不是唯一的。(3) 元素:用于定義一個表格單元。表格的每行可以有不同數(shù)量的單元格，在和之間，將出現(xiàn)表格中每一個單元格的具體內(nèi)容。返回下一頁上一頁1.4 HTML基礎需要注意的是，上述3個元素必須配對使用，缺少任何一個元素，都無法定義出一個表格。示例如下:帶邊框的表格姓名性別成績返回下一頁上一頁1.4 HTML基礎徐元平男85顯示效果如圖1-20所示。2.表格的屬性1)表頭返回下一頁上一頁1.4 HTML基礎標記用于設置表頭。表頭的字體與一般字體不同，示例如下:姓名性別成績徐元平男85返回下一頁上一頁1.4 HTML基礎顯示效果如圖1-21所示。 2)表格的外觀表格的外觀包括下列屬性。(1) width屬性:指定表格或某一個單元格的寬度，單位可以是百分比或像素。(2) height屬性:指定表格或某一個單元格的高度，單位可以是百分比或像素。(3) border屬性:指定表格邊線的粗細。(4) bordercolor屬性:指定表格或某一個單元格的邊框顏色。(5) bordercolorlight屬性:指定亮邊框的顏色。返回下一頁上一頁1.4 HTML基礎(6) bordercolordark屬性:指定暗邊框的顏色。(7) bgcolor屬性:指定表格或