1、第第1章章 網頁設計入門網頁設計入門l網頁設計基礎知識網頁設計基礎知識 l網頁制作相關技術網頁制作相關技術lHTML入門入門lHTML 基本語法基本語法本章主要內容：本章主要內容：網頁設計制作基礎與上機指導HTML+CSS+JavaScript 清華大學出版社1.1 網頁設計基礎知識網頁設計基礎知識 網站是由若干網頁構成的，這些網頁按照一定的邏輯關系組織在一起。每個網頁都包含一定的組成元素，網頁的設計與制作就是對這樣元素的規劃和構建。1.1.1 網站和網頁網站和網頁網站（Website）是指在因特網上，根據一定的規則，使用HTML等工具制作的用于展示特定內容的相關網頁的集合。簡單地說，網站是一

2、種通訊工具，就像布告欄一樣，人們可以通過網站來發布自己想要公開的資訊，或者利用網站來提供相關的網絡服務。人們可以通過網頁瀏覽器來訪問網站，獲取自己需要的資訊或者享受網絡服務。 1.1.1 網站和網頁網站和網頁網站由域名（domain name），網頁和網站空間這三部分組成。網站域名就是在訪問網站時在瀏覽器地址欄中輸入的網址，比如：（課件吧網站的一級域名）、（課件吧網站的二級域名）。網頁用某種形式的HTML來編寫，多個網頁由超級鏈接聯系起來。網站空間由專門的獨立服務器或租用的虛擬主機承擔，網頁需要上傳到網站空間中，才能供瀏覽者訪問網站中的內容 。 1.1.1 網站和網頁網站和網頁網站是一個整體，

3、它是由網頁及為用戶提供的服務構成的，網站為瀏覽者提供的內容是通過網頁展示出來的，使瀏覽者了解該網站為用戶提供的服務及展示的信息，瀏覽者訪問網站實際上就是瀏覽網頁。網頁經由網址（URL）來識別和存取，當在瀏覽器中輸入網址后，瀏覽器可以從WWW上下載指定的網頁，傳送到本地計算機，然后再通過瀏覽器解釋網頁的內容，再展現到窗口內。首頁（Home page）也可以稱之為主頁，它是一個單獨的網頁，和一般網頁一樣，可以存放各種信息，同時又是一個特殊的網頁，作為整個網站的起始點和匯總點，是瀏覽者訪問網站的第一個網頁。 1.1.1 網站和網頁網站和網頁LogoBanner導航欄公告欄精彩圖書推薦橫幅廣告位新書快

4、遞精品圖書高校教材專家書評友情鏈接版權欄網站首頁布局示意圖1.1.2 網頁基本元素網頁基本元素 構成網頁的基本元素主要包括文本、圖片、水平線、表格、表單、超鏈接及各種動態元素。1.1.2 網頁基本元素網頁基本元素 文本：文本是網頁中最主要的信息載體，瀏覽者主要通過文字了解各種信息。圖片：圖片可以使網頁看上到更加美觀。如果是新聞類或說明類網頁，插入圖片后可以讓瀏覽者更加快捷的了解網頁所要表達的內容。水平線：在網頁中主要起到分隔區域的功能，以使網頁的結構更加美觀合理。表格：表格是網頁設計過程中使用最多的基本元素。首先表格可以顯示分類數據，其次使用表格進行網頁排版可以達到更好的定位效果。1.1.2

5、網頁基本元素網頁基本元素 表單：訪問者有時要查找一些信息或申請一些服務時需要向網頁提交一些信息，這些信息就是通過表單的方式輸入到Web服務器，并根據所設置的表單處理程序進行加工處理的。表單中包括輸入文本、單選按鈕、復選框和下拉菜單等。超鏈接：超鏈接是實現網頁按照一定邏輯關系進行跳轉的元素。一般情況下在瀏覽網頁時將鼠標指針指向具有超鏈接的文本或圖片的時候，鼠標指針就是變成小手的形狀。動態元素：現在的網頁中的動態元素可以說是豐富多彩，包括GIF動畫、Flash動畫、滾動字幕、懸停按鈕、廣告橫幅、網站計數器等。這些動態元素使網頁不再是一個靜止的畫面，可以說動態元素賦予了網頁生命力，使網頁活了起來。

6、1.2 網頁制作相關技術網頁制作相關技術 網站是由若干網頁構成的，這些網頁按照一定的邏輯關系組織在一起。每個網頁都包含一定的組成元素，網頁的設計與制作就是對這樣元素的規劃和構建。1.2.1 初識初識HTML HTML是英文Hypertext Marked Language的縮寫，中文意思是超文本標記語言，是一種用來制作超文本文檔的簡單標記語言。所謂超文本，是指用HTML創建的文檔可以加入圖片、聲音、動畫、影視等內容，并且可以實現從一個文件跳轉到另一個文件，與世界各地主機的文件連接。1.2.2 HTML編輯工具編輯工具 編寫HTML代碼的工具有很多，本節介紹兩種最常用的編輯工具：記事本、Edit

7、Plus和Dreamweaver。記事本是一個簡單的文本編輯器，EditPlus是一個比較專業的文本編輯器，Dreamweaver是一個所見即所得的網頁制作工具 1.2.2 HTML編輯工具編輯工具記事本是Windows操作系統自帶的一個應用程序，使用起來十分方便和簡單。下面通過簡單網頁實例介紹用記事本編寫HTML代碼的方法。（1）選擇“開始”|“所有程序”|“附件”|“記事本”，運行“記事本”程序。在“記事本”窗口中輸入以下代碼：1 1記事本記事本1.2.2 HTML編輯工具編輯工具歡迎光臨圖書網站這是第一個簡單網頁!1.2.2 HTML編輯工具編輯工具（2）選擇“文件”|“保存”命令，在彈

8、出的“另存為”對話框中選擇要保存的路徑，在“文件名”文本框中輸入文件名myweb001.html （3）打開“資源管理器”窗口，根據剛才保存網頁的位置，找到myweb001.html文件 （4）雙擊myweb001.html文件圖標，系統自動啟動IE瀏覽器并打開這個網頁文件 1.2.2 HTML編輯工具編輯工具2EditPlus EditPlus是一款功能全面的文本、HTML、程序源代碼編輯器。它提供了更加便捷的代碼編輯功能，默認支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript和VBScript等語法高亮顯示；提供了與Internet的無縫連接，可以在E

9、ditPlus的工作區域中打開Internet瀏覽窗口；提供了多工作窗口，不用切換到桌面，便可在工作區域中打開多個文檔。 總之，EditPlus功能強大，界面簡潔美觀，且啟動速度快；中文支持比較好；支持語法高亮；支持代碼折疊；支持代碼自動完成（但其功能比較弱），不支持代碼提示功能；配置功能強大，很適合初學者使用。1.2.2 HTML編輯工具編輯工具3Dreamweaver Dreamweaver是一個“所見即所得”的網頁制作和網站管理開發工具，利用Dreamweaver可以設計、開發并維護符合Web標準的網站和應用程序。無論網站開發者是喜歡直接編寫HTML代碼的駕馭感還是偏愛在可視化編輯環境中

10、工作，Dreamweaver都會提供幫助良多的工具，豐富Web創作體驗。 1.2.3 CSS和和JavaScript 在進行網頁設計與制作時，除了HTML外，還有CSS和JavaScript等技術與網頁設計密切相關。1 1CSS CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可將頁面的內容與表現形式分離。頁面內容存放在HTML文檔中，而用于定義表現形式的CSS規則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內容與表現形式分離，不僅可使維護站點的外觀更加

11、容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。1.2.3 CSS和和JavaScript CSS是W3C（World Wide Web Consortium）定義和維護的標準，是一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。 1.2.3 CSS和和JavaScript 2 2JavaScript JavaScript是目前在網頁中廣泛使用的腳本語言，它是Netscape公司利用Java的程序概念，將自己原有的Livescript重新進行設計后而產生的腳本語言。 JavaScript是一種基于對象和事件驅動并具有安全性能的腳本語

12、言，有了JavaScript，可使網頁變得生動、活潑。使用它的目的是與HTML、Java小程序（Java Applet）一起實現在一個網頁中鏈接多個對象，與網絡客戶進行交互，從而可以開發客戶端的應用程序。 一個JavaScript程序其實是一個代碼文檔，它需要嵌入或者調入到HTML文檔進行使用。任何可以編寫HTML代碼的軟件都可以用來編寫JavaScript程序。 1.3 HTML入門入門 HTML是編寫Web應用程序的基本語言。本節學習HTML的基礎知識，包括HTML文檔的結構、HTML的基本語法等。1.3.1 HTML文檔的結構文檔的結構 HTML文件是標準的ASCII（American

13、Standard Code for Information Interchange，美國信息互換標準代碼）文件，它是添加了被稱為標記（Tag）的特殊字符串的普通文本文件。一個完整的HTML文檔包含頭部和主體兩個部分的內容。在頭部內容里，可以定義標題、樣式等，主體內容就是網頁要顯示的各種信息 。 1.3.1 HTML文檔的結構文檔的結構 HTML文檔的結構如下所示 ：頭部內容，定義標題、樣式等 主體內容，網頁要顯示的各種信息，包括文本、超鏈接、圖像、動畫等 1.3.1 HTML文檔的結構文檔的結構 其中標記在最外層，表示這對標記間的內容是HTML文檔。一些HTML文檔省略了標記，因為擴展名為.h

14、tml或.htm的文件被Web瀏覽器默認為是HTML文檔。與之間包括文檔的頭部內容，如文檔的標題、樣式等，若不需頭部信息則可省略此標記。標記一般不省略，表示主體內容的開始。1.3.1 HTML文檔的結構文檔的結構 1 1頭部內容頭部內容 HTML頭部內容里包含關于所在網頁的信息。頭部內容里的信息，主要是被瀏覽器所用，不會顯示在網頁的正文內容里 標題是最常用的頭部信息，它不是顯示在網頁的正文內容中，而是顯示在瀏覽器的標題欄中。用標記指定網頁標題，即在之間寫上網頁標題 在頭部內容中用標記描述網頁的有關信息，例如開發工具，作者，網頁關鍵字，網頁描述等。這些信息并不在網頁正文內容中顯示，但是一些搜索引

15、擎可以檢索這些信息，瀏覽者可以根據這些關鍵字或描述查找到該網頁 1.3.1 HTML文檔的結構文檔的結構 除了和標記外，網頁的頭部內容還有、等標記。標記用來設定頁面中程序腳本的內容；標記用來建立和外部文件的鏈接，常用的是對CSS外部樣式表文件的鏈接；標記用來設定CSS樣式表的內容。1.3.1 HTML文檔的結構文檔的結構 2 2主體內容主體內容 主體內容是網頁呈現給瀏覽器者的信息，是網頁的中心和重心所在。主體內容放在標記之間，包括文字、圖片、動畫、視頻、表格、表單、超級鏈接等元素1.3.2 標記標記 XML是一種標記化語言，其中所有的東西都要被正確的標記，以產生形式良好的文檔。 XHTML可以

16、說是由HTML技術向XML技術轉變的過渡技術，XHTML和HTML并沒有太大的區別，只是在語法上更加嚴格。 DOCTYPE是Document Type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的XHTML（或者HTML）的版本。要想制作符合標準的頁面，一個必不可少的關鍵組成部分就是DOCTYPE聲明。只有確定了一個正確的DOCTYPE，XHTML里的標識和CSS才能正常生效 1.3.2 標記標記 HTML 4或者XHTML 1.0 包含有三種DTD聲明可供選擇，分別是：嚴格型、過渡型和框架型。嚴格型禁止在頁面中使用被W3C廢棄的標記，而過渡型和框架型則認為廢棄的標記是有效的。 1.4 H

17、TML基本語法基本語法 HTML文檔是在普通文件中的文本上加上標記（或者叫標簽），使其達到預期的顯示效果。當瀏覽器打開一個HTML文檔時，會根據標記的含義顯示HTML文檔中的內容 。1.4.1 標記語法標記語法 HTML用于描述功能的符號稱為標記。前面介紹的、等都是標記。標記通常分為雙標記和單標記兩種類型。1 1雙標記雙標記 雙標記由開始標記和結束標記兩部分構成，它必須成對使用。開始標記告訴瀏覽器從此處開始執行該標記所表示的功能，結束標記告訴瀏覽器在這里結束該標記。 雙標記的基本語法是： 內容1.4.1 標記語法標記語法 2 2單標記單標記 標記單獨出現，只有開始標記而沒有結束標記。這種標記單獨使用就可以表達完整的意思。 單標記的基本語法是： 1.4.2 屬性語法屬性語法 HTML可以為某些標記附件一些信息，這些附件信息被稱為屬性（attribute）。通過屬性可以設置HTML元素的更豐富的信息。屬性是在開始標記中設定，它以“名稱/值”對的形式出現，比如：name=value。 屬性的基本語法是： 屬性應該添加在開始標記內，并且和標記名之間有一個空格分隔。一個標記可以包含多個屬性，各屬性