第1章 網(wǎng)頁設(shè)計入門

1、第第1章章 網(wǎng)頁設(shè)計入門網(wǎng)頁設(shè)計入門 l網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識 l網(wǎng)頁制作相關(guān)技術(shù)網(wǎng)頁制作相關(guān)技術(shù) lHTML入門入門 lHTML 基本語法基本語法 本章主要內(nèi)容：本章主要內(nèi)容： 網(wǎng)頁設(shè)計制作基礎(chǔ)與上機指導(dǎo)HTML+CSS+JavaScript 清華大學(xué)出版社 1.1 網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁設(shè)計基礎(chǔ)知識 網(wǎng)站是由若干網(wǎng)頁構(gòu)成的，這些網(wǎng)頁按照一定的邏輯關(guān)系 組織在一起。每個網(wǎng)頁都包含一定的組成元素，網(wǎng)頁的設(shè)計與制 作就是對這樣元素的規(guī)劃和構(gòu)建。 1.1.1 網(wǎng)站和網(wǎng)頁網(wǎng)站和網(wǎng)頁 網(wǎng)站（Website）是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用 HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集

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

3、1.1 網(wǎng)站和網(wǎng)頁網(wǎng)站和網(wǎng)頁 網(wǎng)站是一個整體，它是由網(wǎng)頁及為用戶提供的服務(wù)構(gòu)成的， 網(wǎng)站為瀏覽者提供的內(nèi)容是通過網(wǎng)頁展示出來的，使瀏覽者了解 該網(wǎng)站為用戶提供的服務(wù)及展示的信息，瀏覽者訪問網(wǎng)站實際上 就是瀏覽網(wǎng)頁。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別和存取，當在瀏覽 器中輸入網(wǎng)址后，瀏覽器可以從WWW上下載指定的網(wǎng)頁，傳送 到本地計算機，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展現(xiàn)到窗 口內(nèi)。 首頁（Home page）也可以稱之為主頁，它是一個單獨的 網(wǎng)頁，和一般網(wǎng)頁一樣，可以存放各種信息，同時又是一個特殊 的網(wǎng)頁，作為整個網(wǎng)站的起始點和匯總點，是瀏覽者訪問網(wǎng)站的 第一個網(wǎng)頁。 1.1.1 網(wǎng)站和網(wǎng)頁網(wǎng)站

4、和網(wǎng)頁 LogoBanner 導(dǎo)航欄 公告欄精彩圖書推薦 橫幅廣告位 新書快遞精品圖書 高校教材專家書評 友情鏈接 版權(quán)欄 網(wǎng)站首頁布局示意圖 1.1.2 網(wǎng)頁基本元素網(wǎng)頁基本元素 構(gòu)成網(wǎng)頁的基本元素主要包括文本、圖片、水平線、表格、 表單、超鏈接及各種動態(tài)元素。 1.1.2 網(wǎng)頁基本元素網(wǎng)頁基本元素 文本：文本是網(wǎng)頁中最主要的信息載體，瀏覽者主要通過 文字了解各種信息。 圖片：圖片可以使網(wǎng)頁看上到更加美觀。如果是新聞類或 說明類網(wǎng)頁，插入圖片后可以讓瀏覽者更加快捷的了解網(wǎng)頁所要 表達的內(nèi)容。 水平線：在網(wǎng)頁中主要起到分隔區(qū)域的功能，以使網(wǎng)頁的 結(jié)構(gòu)更加美觀合理。 表格：表格是網(wǎng)頁設(shè)計過程中使

5、用最多的基本元素。首先 表格可以顯示分類數(shù)據(jù)，其次使用表格進行網(wǎng)頁排版可以達到更 好的定位效果。 1.1.2 網(wǎng)頁基本元素網(wǎng)頁基本元素 表單：訪問者有時要查找一些信息或申請一些服務(wù)時需要 向網(wǎng)頁提交一些信息，這些信息就是通過表單的方式輸入到Web 服務(wù)器，并根據(jù)所設(shè)置的表單處理程序進行加工處理的。表單中 包括輸入文本、單選按鈕、復(fù)選框和下拉菜單等。 超鏈接：超鏈接是實現(xiàn)網(wǎng)頁按照一定邏輯關(guān)系進行跳轉(zhuǎn)的 元素。一般情況下在瀏覽網(wǎng)頁時將鼠標指針指向具有超鏈接的文 本或圖片的時候，鼠標指針就是變成小手的形狀。 動態(tài)元素：現(xiàn)在的網(wǎng)頁中的動態(tài)元素可以說是豐富多彩， 包括GIF動畫、Flash動畫、滾動字幕

6、、懸停按鈕、廣告橫幅、 網(wǎng)站計數(shù)器等。這些動態(tài)元素使網(wǎng)頁不再是一個靜止的畫面，可 以說動態(tài)元素賦予了網(wǎng)頁生命力，使網(wǎng)頁活了起來。 1.2 網(wǎng)頁制作相關(guān)技術(shù)網(wǎng)頁制作相關(guān)技術(shù) 網(wǎng)站是由若干網(wǎng)頁構(gòu)成的，這些網(wǎng)頁按照一定的邏輯關(guān)系 組織在一起。每個網(wǎng)頁都包含一定的組成元素，網(wǎng)頁的設(shè)計與制 作就是對這樣元素的規(guī)劃和構(gòu)建。 1.2.1 初識初識HTML HTML是英文Hypertext Marked Language的縮寫，中文意 思是超文本標記語言，是一種用來制作超文本文檔的簡單標記語 言。所謂超文本，是指用HTML創(chuàng)建的文檔可以加入圖片、聲音 、動畫、影視等內(nèi)容，并且可以實現(xiàn)從一個文件跳轉(zhuǎn)到另一個文

7、件，與世界各地主機的文件連接。 1.2.2 HTML編輯工具編輯工具 編寫HTML代碼的工具有很多，本節(jié)介紹兩種最常用的編輯 工具：記事本、EditPlus和Dreamweaver。記事本是一個簡單的 文本編輯器，EditPlus是一個比較專業(yè)的文本編輯器， Dreamweaver是一個所見即所得的網(wǎng)頁制作工具 1.2.2 HTML編輯工具編輯工具 記事本是Windows操作系統(tǒng)自帶的一個應(yīng)用程序，使用起 來十分方便和簡單。下面通過簡單網(wǎng)頁實例介紹用記事本編寫 HTML代碼的方法。 （1）選擇“開始”|“所有程序”|“附件”|“記事本”， 運行“記事本”程序。在“記事本”窗口中輸入以下代碼：

8、1 1記事本記事本 1.2.2 HTML編輯工具編輯工具 歡迎光臨圖書網(wǎng)站 這是第一個簡單網(wǎng)頁! 1.2.2 HTML編輯工具編輯工具 （2）選擇“文件”|“保存”命令，在彈出的“另存為”對話框 中選擇要保存的路徑，在“文件名”文本框中輸入文件名 myweb001.html （3）打開“資源管理器”窗口，根據(jù)剛才保存網(wǎng)頁的位置，找 到myweb001.html文件 （4）雙擊myweb001.html文件圖標，系統(tǒng)自動啟動IE瀏覽器并 打開這個網(wǎng)頁文件 1.2.2 HTML編輯工具編輯工具 2EditPlus EditPlus是一款功能全面的文本、HTML、程序源代碼編輯器。 它提供了更加便捷

9、的代碼編輯功能，默認支持HTML、CSS、 PHP、ASP、Perl、C/C+、Java、JavaScript和VBScript等 語法高亮顯示；提供了與Internet的無縫連接，可以在EditPlus 的工作區(qū)域中打開Internet瀏覽窗口；提供了多工作窗口，不 用切換到桌面，便可在工作區(qū)域中打開多個文檔。 總之，EditPlus功能強大，界面簡潔美觀，且啟動速度快；中 文支持比較好；支持語法高亮；支持代碼折疊；支持代碼自動 完成（但其功能比較弱），不支持代碼提示功能；配置功能強 大，很適合初學(xué)者使用。 1.2.2 HTML編輯工具編輯工具 3Dreamweaver Dreamweave

10、r是一個“所見即所得”的網(wǎng)頁制作和網(wǎng)站管理 開發(fā)工具，利用Dreamweaver可以設(shè)計、開發(fā)并維護符合 Web標準的網(wǎng)站和應(yīng)用程序。無論網(wǎng)站開發(fā)者是喜歡直接編 寫HTML代碼的駕馭感還是偏愛在可視化編輯環(huán)境中工作， Dreamweaver都會提供幫助良多的工具，豐富Web創(chuàng)作體 驗。 1.2.3 CSS和和JavaScript 在進行網(wǎng)頁設(shè)計與制作時，除了HTML外，還有CSS和 JavaScript等技術(shù)與網(wǎng)頁設(shè)計密切相關(guān)。 1 1CSS CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“ 級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的 外觀。通過使用CS

11、S樣式設(shè)置頁面的格式，可將頁面的內(nèi)容 與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中，而用于定 義表現(xiàn)形式的CSS規(guī)則存放在另一個文件中或HTML文檔的 某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不 僅可使維護站點的外觀更加容易，而且還可以使HTML文檔 代碼更加簡練，縮短瀏覽器的加載時間。 1.2.3 CSS和和JavaScript CSS是W3C（World Wide Web Consortium）定義和維護的 標準，是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用 ）添加樣式（字體、間距和顏色等）的計算機語言。 1.2.3 CSS和和JavaScript 2 2JavaScrip

12、t JavaScript是目前在網(wǎng)頁中廣泛使用的腳本語言，它是 Netscape公司利用Java的程序概念，將自己原有的 Livescript重新進行設(shè)計后而產(chǎn)生的腳本語言。 JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本 語言，有了JavaScript，可使網(wǎng)頁變得生動、活潑。使用它 的目的是與HTML、Java小程序（Java Applet）一起實現(xiàn)在 一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡(luò)客戶進行交互，從而可以 開發(fā)客戶端的應(yīng)用程序。 一個JavaScript程序其實是一個代碼文檔，它需要嵌入或者調(diào) 入到HTML文檔進行使用。任何可以編寫HTML代碼的軟件 都可以用來編寫Jav

13、aScript程序。 1.3 HTML入門入門 HTML是編寫Web應(yīng)用程序的基本語言。本節(jié)學(xué)習(xí)HTML的 基礎(chǔ)知識，包括HTML文檔的結(jié)構(gòu)、HTML的基本語法等。 1.3.1 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) HTML文件是標準的ASCII（American Standard Code for Information Interchange，美國信息互換標準代碼）文件，它 是添加了被稱為標記（Tag）的特殊字符串的普通文本文件。 一個完整的HTML文檔包含頭部和主體兩個部分的內(nèi)容。在頭 部內(nèi)容里，可以定義標題、樣式等，主體內(nèi)容就是網(wǎng)頁要顯 示的各種信息 。 1.3.1 HTML文檔的結(jié)構(gòu)文檔的結(jié)

14、構(gòu) HTML文檔的結(jié)構(gòu)如下所示 ： 頭部內(nèi)容，定義標題、樣式等 主體內(nèi)容，網(wǎng)頁要顯示的各種信息，包括文本、超鏈接、圖像、動 畫等 1.3.1 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) 其中標記在最外層，表示這對標記間的內(nèi)容是HTML文 檔。一些HTML文檔省略了標記，因為擴展名為.html 或.htm的文件被Web瀏覽器默認為是HTML文檔。與 之間包括文檔的頭部內(nèi)容，如文檔的標題、樣式等， 若不需頭部信息則可省略此標記。標記一般不省略， 表示主體內(nèi)容的開始。 1.3.1 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) 1 1頭部內(nèi)容頭部內(nèi)容 HTML頭部內(nèi)容里包含關(guān)于所在網(wǎng)頁的信息。頭部內(nèi)容里的信息， 主要是被瀏覽器所用

15、，不會顯示在網(wǎng)頁的正文內(nèi)容里 標題是最常用的頭部信息，它不是顯示在網(wǎng)頁的正文內(nèi)容中，而是 顯示在瀏覽器的標題欄中。用標記指定網(wǎng)頁標題，即在 之間寫上網(wǎng)頁標題 在頭部內(nèi)容中用標記描述網(wǎng)頁的有關(guān)信息，例如開發(fā)工具， 作者，網(wǎng)頁關(guān)鍵字，網(wǎng)頁描述等。這些信息并不在網(wǎng)頁正文內(nèi)容中 顯示，但是一些搜索引擎可以檢索這些信息，瀏覽者可以根據(jù)這些 關(guān)鍵字或描述查找到該網(wǎng)頁 1.3.1 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) 除了和標記外，網(wǎng)頁的頭部內(nèi)容還有 、等標記。標記用來設(shè)定頁 面中程序腳本的內(nèi)容；標記用來建立和外部文件的鏈 接，常用的是對CSS外部樣式表文件的鏈接；標記 用來設(shè)定CSS樣式表的內(nèi)容。 1.3.1 H

16、TML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu) 2 2主體內(nèi)容主體內(nèi)容 主體內(nèi)容是網(wǎng)頁呈現(xiàn)給瀏覽器者的信息，是網(wǎng)頁的中心和重 心所在。主體內(nèi)容放在標記之間，包括文 字、圖片、動畫、視頻、表格、表單、超級鏈接等元素 1.3.2 標記標記 XML是一種標記化語言，其中所有的東西都要被正確的標記，以 產(chǎn)生形式良好的文檔。 XHTML可以說是由HTML技術(shù)向XML技術(shù)轉(zhuǎn)變的過渡技術(shù)， XHTML和HTML并沒有太大的區(qū)別，只是在語法上更加嚴格。 DOCTYPE是Document Type（文檔類型）的簡寫，在頁面中， 用來指定頁面所使用的XHTML（或者HTML）的版本。要想制作 符合標準的頁面，一個必不可少的關(guān)鍵組成部

17、分就是DOCTYPE 聲明。只有確定了一個正確的DOCTYPE，XHTML里的標識和 CSS才能正常生效 1.3.2 標記標記 HTML 4或者XHTML 1.0 包含有三種DTD聲明可供選擇，分別 是：嚴格型、過渡型和框架型。嚴格型禁止在頁面中使用被 W3C廢棄的標記，而過渡型和框架型則認為廢棄的標記是有效 的。 1.4 HTML基本語法基本語法 HTML文檔是在普通文件中的文本上加上標記（或者叫標 簽），使其達到預(yù)期的顯示效果。當瀏覽器打開一個HTML文檔 時，會根據(jù)標記的含義顯示HTML文檔中的內(nèi)容 。 1.4.1 標記語法標記語法 HTML用于描述功能的符號稱為標記。前面介紹的、 、等

18、都是標記。標記通常分為雙標記和單 標記兩種類型。 1 1雙標記雙標記 雙標記由開始標記和結(jié)束標記兩部分構(gòu)成，它必須成對使用。 開始標記告訴瀏覽器從此處開始執(zhí)行該標記所表示的功能，結(jié) 束標記告訴瀏覽器在這里結(jié)束該標記。 雙標記的基本語法是： 內(nèi)容 1.4.1 標記語法標記語法 2 2單標記單標記 標記單獨出現(xiàn)，只有開始標記而沒有結(jié)束標記。這種標記單獨 使用就可以表達完整的意思。 單標記的基本語法是： 1.4.2 屬性語法屬性語法 HTML可以為某些標記附件一些信息，這些附件信息被稱為屬性（ attribute）。通過屬性可以設(shè)置HTML元素的更豐富的信息。屬性是 在開始標記中設(shè)定，它以“名稱/值”對的形式出現(xiàn)，比如： name=value。 屬性的基本語法是： 屬性應(yīng)該添加在開始標記內(nèi)，并且和標記名之間有一個空格分隔。一 個標記可以包含多個屬性，