網(wǎng)頁制作基礎(chǔ)——網(wǎng)頁設(shè)計(jì)第一講

1、網(wǎng)站開發(fā)基礎(chǔ)網(wǎng)站開發(fā)基礎(chǔ)網(wǎng)頁制作基礎(chǔ)網(wǎng)頁制作基礎(chǔ)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)l理解網(wǎng)頁的基本原理，區(qū)分靜態(tài)網(wǎng)頁理解網(wǎng)頁的基本原理，區(qū)分靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。和動(dòng)態(tài)網(wǎng)頁。l掌握掌握HTMLHTML語言的語法規(guī)則，掌握基本語言的語法規(guī)則，掌握基本的網(wǎng)頁標(biāo)記符和屬性。的網(wǎng)頁標(biāo)記符和屬性。l了解網(wǎng)頁制作的常用工具。了解網(wǎng)頁制作的常用工具。l理解網(wǎng)站開發(fā)的流程。理解網(wǎng)站開發(fā)的流程。Part 1網(wǎng)頁的基本概念網(wǎng)頁的基本概念I(lǐng)nternet 與與 WWWl通俗地講，通俗地講，Internet 就是許多功能不就是許多功能不同的計(jì)算機(jī)通過線路連接起來組成的同的計(jì)算機(jī)通過線路連接起來組成的一個(gè)世界范圍的網(wǎng)絡(luò)。一個(gè)世界范圍的網(wǎng)絡(luò)

2、。Internet 與與 WWWlInternet 提供的服務(wù)：提供的服務(wù)：WWW服務(wù)（網(wǎng)上沖浪）服務(wù)（網(wǎng)上沖浪）電子郵件服務(wù)（電子郵件服務(wù)（Email）文件傳輸（文件傳輸（FTP）網(wǎng)絡(luò)游戲網(wǎng)絡(luò)游戲即時(shí)信息傳遞（即時(shí)信息傳遞（OICQ）WWW 與瀏覽器與瀏覽器lWWW是由遍布在是由遍布在 Internet 上的稱為上的稱為 Web 服務(wù)器的計(jì)算機(jī)組成，它將不服務(wù)器的計(jì)算機(jī)組成，它將不同的信息資源有機(jī)地組織到一起，通同的信息資源有機(jī)地組織到一起，通過瀏覽器進(jìn)行瀏覽。過瀏覽器進(jìn)行瀏覽。WWW 與瀏覽器與瀏覽器網(wǎng)站與主頁網(wǎng)站與主頁 l在邏輯上可視為一個(gè)整體的一系列頁在邏輯上可視為一個(gè)整體的一系列頁面

3、的有機(jī)集合稱為網(wǎng)站（面的有機(jī)集合稱為網(wǎng)站（Web Site或或Site）。）。 l作為一個(gè)組織或個(gè)人在作為一個(gè)組織或個(gè)人在 WWW（或其（或其他他Web）上開始點(diǎn)的頁面稱為主頁）上開始點(diǎn)的頁面稱為主頁（Homepage）。）。HTML 的基本工作原理的基本工作原理lHTML(Hypertext Markup Language) 是一種規(guī)范，一種標(biāo)準(zhǔn)，是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符（它通過標(biāo)記符（tag）來標(biāo)記要顯示）來標(biāo)記要顯示的網(wǎng)頁的各個(gè)部分。的網(wǎng)頁的各個(gè)部分。HTML的基本工作原理的基本工作原理l通過在網(wǎng)頁中添加標(biāo)記符，可以告訴通過在網(wǎng)頁中添加標(biāo)記符，可以告訴瀏覽器如何顯示網(wǎng)頁，即確定

4、內(nèi)容的瀏覽器如何顯示網(wǎng)頁，即確定內(nèi)容的格式。瀏覽器按順序閱讀網(wǎng)頁文件格式。瀏覽器按順序閱讀網(wǎng)頁文件（HTML文件），然后根據(jù)內(nèi)容周圍文件），然后根據(jù)內(nèi)容周圍的的HTML標(biāo)記符解釋和顯示各種內(nèi)容。標(biāo)記符解釋和顯示各種內(nèi)容。HTML的基本工作原理的基本工作原理演示演示HTML的基本原理的基本原理靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁l一般網(wǎng)頁的每一行一般網(wǎng)頁的每一行 HTML 代碼都是在將頁代碼都是在將頁放置到服務(wù)器之前由設(shè)計(jì)人員編寫的。因放置到服務(wù)器之前由設(shè)計(jì)人員編寫的。因?yàn)闉?HTML 在放置到服務(wù)器后不發(fā)生更改，在放置到服務(wù)器后不發(fā)生更改，所以這種頁稱為靜態(tài)頁。所以這種頁稱為靜態(tài)頁。 例如，大

5、多數(shù)的例如，大多數(shù)的個(gè)人網(wǎng)站。個(gè)人網(wǎng)站。l當(dāng)當(dāng) Web 服務(wù)器接收到對(duì)靜態(tài)頁的請(qǐng)求時(shí)，服務(wù)器接收到對(duì)靜態(tài)頁的請(qǐng)求時(shí)，服務(wù)器將讀取該請(qǐng)求，查找該頁，然后將服務(wù)器將讀取該請(qǐng)求，查找該頁，然后將其發(fā)送到請(qǐng)求瀏覽器，如圖所示其發(fā)送到請(qǐng)求瀏覽器，如圖所示 。靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁l所謂動(dòng)態(tài)網(wǎng)頁，是指根據(jù)用戶的請(qǐng)求，由所謂動(dòng)態(tài)網(wǎng)頁，是指根據(jù)用戶的請(qǐng)求，由服務(wù)器動(dòng)態(tài)生成的網(wǎng)頁。例如，服務(wù)器動(dòng)態(tài)生成的網(wǎng)頁。例如，ASP網(wǎng)頁，網(wǎng)頁，PHP網(wǎng)頁，網(wǎng)頁，JSP網(wǎng)頁。網(wǎng)頁。l當(dāng)當(dāng) Web 服務(wù)器接收到對(duì)動(dòng)態(tài)頁的請(qǐng)求時(shí)，服務(wù)器接收到對(duì)動(dòng)態(tài)頁的請(qǐng)求時(shí)，它將該頁傳遞給應(yīng)用程序服務(wù)器，它將該頁傳遞給應(yīng)用程序服務(wù)

6、器，它讀取它讀取頁上的代碼，根據(jù)代碼中的指令完成頁，頁上的代碼，根據(jù)代碼中的指令完成頁，然后將代碼從頁上刪除。所得的結(jié)果將是然后將代碼從頁上刪除。所得的結(jié)果將是一個(gè)靜態(tài)頁，應(yīng)用程序服務(wù)器將該頁傳遞一個(gè)靜態(tài)頁，應(yīng)用程序服務(wù)器將該頁傳遞回回 Web 服務(wù)器，然后服務(wù)器，然后 Web 服務(wù)器將該頁服務(wù)器將該頁發(fā)送到請(qǐng)求瀏覽器。該過程如圖所示。發(fā)送到請(qǐng)求瀏覽器。該過程如圖所示。靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁l應(yīng)用程序服務(wù)器使用戶能夠使用服務(wù)應(yīng)用程序服務(wù)器使用戶能夠使用服務(wù)器端的資源（如數(shù)據(jù)庫）。器端的資源（如數(shù)據(jù)庫）。l動(dòng)態(tài)頁可以指示應(yīng)用程序服務(wù)器從數(shù)動(dòng)態(tài)頁可以指示應(yīng)用程序服務(wù)器從數(shù)據(jù)庫中提取數(shù)

7、據(jù)并將其插入頁的據(jù)庫中提取數(shù)據(jù)并將其插入頁的 HTML 中。中。 例如，搜索頁面，電子例如，搜索頁面，電子商務(wù)網(wǎng)站等。商務(wù)網(wǎng)站等。Part 2HTML基礎(chǔ)基礎(chǔ) 標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ)l在在 HTML 中，所有的標(biāo)記符都用尖括號(hào)括中，所有的標(biāo)記符都用尖括號(hào)括起來。例如，起來。例如，、。lHTML 標(biāo)記符是不區(qū)分大小寫的。標(biāo)記符是不區(qū)分大小寫的。、和和沒有區(qū)別。沒有區(qū)別。l注意：注意：XHTML要求標(biāo)記符區(qū)分大小寫！要求標(biāo)記符區(qū)分大小寫！養(yǎng)成習(xí)慣都用小寫。養(yǎng)成習(xí)慣都用小寫。標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ)l絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。某些標(biāo)記符，

8、例始標(biāo)記符和結(jié)束標(biāo)記符。某些標(biāo)記符，例如如，只要求單一標(biāo)記符號(hào)。，只要求單一標(biāo)記符號(hào)。l注意：對(duì)于注意：對(duì)于XHTML，這樣的標(biāo)記寫為，這樣的標(biāo)記寫為l開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié)開始標(biāo)記符與結(jié)束標(biāo)記符的區(qū)別在于：結(jié)束標(biāo)記符多一個(gè)斜杠束標(biāo)記符多一個(gè)斜杠“/”（不是反斜杠（不是反斜杠“”?。。?biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ)l屬性是用來描述對(duì)象特征的特性。屬性是用來描述對(duì)象特征的特性。例如，一個(gè)人的身高、體重就是人例如，一個(gè)人的身高、體重就是人這個(gè)對(duì)象的屬性。這個(gè)對(duì)象的屬性。l在在HTML中，所有的屬性都放置在開中，所有的屬性都放置在開始標(biāo)記符的尖括號(hào)里，多個(gè)屬性之始標(biāo)記符的尖括號(hào)里，多個(gè)屬性之間

9、用空格分開，通常也不區(qū)分大小間用空格分開，通常也不區(qū)分大小寫。寫。 標(biāo)記符基礎(chǔ)標(biāo)記符基礎(chǔ)l例如，可以用字體標(biāo)記符和字號(hào)屬例如，可以用字體標(biāo)記符和字號(hào)屬性指定文字的大小。性指定文字的大小。本行字將以較小字體顯示。本行字將以較小字體顯示。演示演示屬性的作用屬性的作用Web頁的基本結(jié)構(gòu)頁的基本結(jié)構(gòu)l一個(gè)一個(gè) Web 頁實(shí)際上對(duì)應(yīng)于一個(gè)頁實(shí)際上對(duì)應(yīng)于一個(gè) HTML 文件，文件，HTML 文件以文件以 .htm 或或 .html 為擴(kuò)展名。為擴(kuò)展名。l最基本的最基本的HTML文檔包括：文檔包括：HTML標(biāo)標(biāo)記記、首部標(biāo)記、首部標(biāo)記和和、以及正文、以及正文。HTML標(biāo)記符標(biāo)記符 l和和 是是WebWeb頁

10、的第一個(gè)頁的第一個(gè)和最后一個(gè)標(biāo)記符，和最后一個(gè)標(biāo)記符，Web Web 頁的其他所頁的其他所有內(nèi)容都位于這兩個(gè)標(biāo)記符之間。這有內(nèi)容都位于這兩個(gè)標(biāo)記符之間。這兩個(gè)標(biāo)記告訴瀏覽器或其他閱讀該頁兩個(gè)標(biāo)記告訴瀏覽器或其他閱讀該頁的程序，此文件為一個(gè)的程序，此文件為一個(gè)WebWeb頁。頁。HEAD標(biāo)記符標(biāo)記符 l首部標(biāo)記首部標(biāo)記和和位于位于 Web 頁的開頭，其中不包括頁的開頭，其中不包括 Web 頁頁的任何實(shí)際內(nèi)容，而是提供一些與的任何實(shí)際內(nèi)容，而是提供一些與 Web 頁有關(guān)的特定信息。頁有關(guān)的特定信息。HEAD標(biāo)記符標(biāo)記符 l首部標(biāo)記中的內(nèi)容也用相應(yīng)的標(biāo)記符首部標(biāo)記中的內(nèi)容也用相應(yīng)的標(biāo)記符括起來。例如

11、，樣式表（括起來。例如，樣式表（CSS）定義）定義位于位于和和之間；腳之間；腳本定義位于本定義位于之之間。間。TITLE 標(biāo)記符標(biāo)記符l在首部標(biāo)記符中，最基本、最常用的在首部標(biāo)記符中，最基本、最常用的標(biāo)記符是標(biāo)題標(biāo)記標(biāo)記符是標(biāo)題標(biāo)記和和，用于定義網(wǎng)頁的標(biāo)題。，用于定義網(wǎng)頁的標(biāo)題。l當(dāng)網(wǎng)頁在瀏覽器中顯示時(shí)，網(wǎng)頁標(biāo)題當(dāng)網(wǎng)頁在瀏覽器中顯示時(shí)，網(wǎng)頁標(biāo)題將在瀏覽器窗口的標(biāo)題欄中顯示。將在瀏覽器窗口的標(biāo)題欄中顯示。演示演示TITLE的作用的作用BODY標(biāo)記符標(biāo)記符 l正文標(biāo)記符正文標(biāo)記符和和包包含含Web 頁的內(nèi)容。文字、圖形、鏈頁的內(nèi)容。文字、圖形、鏈接以及其他接以及其他HTML元素都位于該標(biāo)記元素都位

12、于該標(biāo)記符內(nèi)。符內(nèi)。BODY標(biāo)記符標(biāo)記符 l正文標(biāo)記符中的文字，如果沒有其他正文標(biāo)記符中的文字，如果沒有其他標(biāo)記符修飾，則將以無格式的形式顯標(biāo)記符修飾，則將以無格式的形式顯示。示。l注意：空格、回車這些格式控制在顯注意：空格、回車這些格式控制在顯示時(shí)都不起作用，如要使它們起作用，示時(shí)都不起作用，如要使它們起作用，應(yīng)使用預(yù)格式化元素應(yīng)使用預(yù)格式化元素和和 小節(jié)小節(jié) l綜上所述，一個(gè)不包含任何內(nèi)容的基綜上所述，一個(gè)不包含任何內(nèi)容的基本本 Web 頁文件如下所示：頁文件如下所示：背景顏色背景顏色 l在在標(biāo)記符中使用標(biāo)記符中使用BGCOLOR屬性可以為網(wǎng)頁設(shè)置背景顏色，屬性可以為網(wǎng)頁設(shè)置背景顏色， T

13、EXT 屬性用于設(shè)置正文的顏色。屬性用于設(shè)置正文的顏色。l在在 HTML 中，除了使用顏色名稱以中，除了使用顏色名稱以外，還可以用格式外，還可以用格式 #RRGGBB 來表來表示顏色。示顏色。演示演示設(shè)置網(wǎng)頁背景顏色設(shè)置網(wǎng)頁背景顏色背景圖案背景圖案l使用使用 BODY 標(biāo)記符的標(biāo)記符的 BACKGROUND 屬性可以設(shè)置背景屬性可以設(shè)置背景圖案。圖案。HTML語句為：語句為：演示演示設(shè)置網(wǎng)頁背景圖案設(shè)置網(wǎng)頁背景圖案演示演示設(shè)置網(wǎng)頁背景聲音設(shè)置網(wǎng)頁背景聲音l在在HEAD中添加：中添加：添加注釋添加注釋l不論是編寫程序還是制作網(wǎng)頁，為所不論是編寫程序還是制作網(wǎng)頁，為所做的工作添加注釋都是一種良好的

14、工做的工作添加注釋都是一種良好的工作習(xí)慣。實(shí)際上，添加注釋是任何開作習(xí)慣。實(shí)際上，添加注釋是任何開發(fā)工作必須遵循的規(guī)范之一。發(fā)工作必須遵循的規(guī)范之一。添加注釋添加注釋lHTML 的注釋由開始標(biāo)記符的注釋由開始標(biāo)記符 構(gòu)成。這兩個(gè)標(biāo)記符之構(gòu)成。這兩個(gè)標(biāo)記符之間的任何內(nèi)容都將被瀏覽器解釋為注間的任何內(nèi)容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。釋，而不在瀏覽器中顯示。演示演示添加注釋添加注釋顯示特殊字符顯示特殊字符l如果用戶需要在網(wǎng)頁中顯示某些特殊如果用戶需要在網(wǎng)頁中顯示某些特殊字符，例如：字符，例如：（大于（大于號(hào)）、號(hào)）、”（引號(hào)）等，則需使用參考（引號(hào)）等，則需使用參考字符來表示，而不能直

15、接輸入。字符來表示，而不能直接輸入。l參考字符以參考字符以“&”號(hào)開始，以號(hào)開始，以“；”結(jié)結(jié)束，既可以使用數(shù)字代碼，也可以使束，既可以使用數(shù)字代碼，也可以使用代碼名稱。用代碼名稱。顯示特殊字符顯示特殊字符例如，要在例如，要在 Web 頁中顯示以下內(nèi)容，頁中顯示以下內(nèi)容，則需使用參考字符：則需使用參考字符：“12”1<2演示演示特殊字符的顯示特殊字符的顯示演示演示創(chuàng)建與測試網(wǎng)頁創(chuàng)建與測試網(wǎng)頁P(yáng)age5Part 3網(wǎng)頁制作工具網(wǎng)頁制作工具 網(wǎng)頁編輯工具網(wǎng)頁編輯工具lHTML 編輯器編輯器 HomeSiteBBEdit （Mac）CuteHTML網(wǎng)頁編輯工具網(wǎng)頁編輯工具lWY

16、SWYG 編輯器編輯器Macromedia DreamweaverMicrosoft FrontPageAdobe GoLive素材處理與創(chuàng)作工具素材處理與創(chuàng)作工具l圖像瀏覽與處理圖像瀏覽與處理ACDSeePhotoshopFireworksPhotoImpactl矢量圖創(chuàng)作工具矢量圖創(chuàng)作工具FreeHandCorelDrawIllustrator 素材處理與創(chuàng)作工具素材處理與創(chuàng)作工具l特效制作工具特效制作工具AnfyCool 3DGIF Animatorl多媒體制作工具多媒體制作工具FlashDirectorAuthorwareLiveMotionPart 4網(wǎng)站開發(fā)流程網(wǎng)站開發(fā)流程 概述概

17、述l首先定義開發(fā)網(wǎng)站的目的；接下來對(duì)首先定義開發(fā)網(wǎng)站的目的；接下來對(duì)網(wǎng)站的外觀進(jìn)行設(shè)計(jì)；然后進(jìn)行實(shí)際網(wǎng)站的外觀進(jìn)行設(shè)計(jì)；然后進(jìn)行實(shí)際頁面的制作；然后對(duì)所制作的網(wǎng)站進(jìn)頁面的制作；然后對(duì)所制作的網(wǎng)站進(jìn)行測試，以確保它符合最初設(shè)定的目行測試，以確保它符合最初設(shè)定的目標(biāo)；最后是將網(wǎng)站發(fā)布。在將網(wǎng)站發(fā)標(biāo)；最后是將網(wǎng)站發(fā)布。在將網(wǎng)站發(fā)布后還需要有維護(hù)工作，以便及時(shí)更布后還需要有維護(hù)工作，以便及時(shí)更新網(wǎng)站內(nèi)容。新網(wǎng)站內(nèi)容。 網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃l確定建設(shè)網(wǎng)站的目標(biāo)確定建設(shè)網(wǎng)站的目標(biāo) l分析目標(biāo)用戶對(duì)站點(diǎn)的需求分析目標(biāo)用戶對(duì)站點(diǎn)的需求 l確定網(wǎng)站風(fēng)格確定網(wǎng)站風(fēng)格 l考慮網(wǎng)絡(luò)技術(shù)因素考慮網(wǎng)絡(luò)技術(shù)因素網(wǎng)絡(luò)速度網(wǎng)絡(luò)速度

18、瀏覽器與分辨率瀏覽器與分辨率及時(shí)交互與插件及時(shí)交互與插件網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì) l設(shè)計(jì)頁面的布局設(shè)計(jì)頁面的布局 頁面設(shè)計(jì)草圖頁面設(shè)計(jì)草圖導(dǎo)航系統(tǒng)的設(shè)計(jì)導(dǎo)航系統(tǒng)的設(shè)計(jì)l設(shè)計(jì)原則：通過最少的點(diǎn)擊次數(shù)得到最多設(shè)計(jì)原則：通過最少的點(diǎn)擊次數(shù)得到最多的信息量。的信息量。l保持風(fēng)格一致，提供頁面的位置信息，提保持風(fēng)格一致，提供頁面的位置信息，提供返回上級(jí)頁面的鏈接供返回上級(jí)頁面的鏈接 網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì)l網(wǎng)頁中的顏色網(wǎng)頁中的顏色紅、綠、藍(lán)三原色的數(shù)值相同則稱為安紅、綠、藍(lán)三原色的數(shù)值相同則稱為安全色，由全色，由“0000、3333、6666、9999、CCCC、FF”FF”組成的顏色值稱為標(biāo)準(zhǔn)安全色。組成的顏色值稱

19、為標(biāo)準(zhǔn)安全色。設(shè)計(jì)顏色方案的原則設(shè)計(jì)顏色方案的原則l保持一致性保持一致性l注意可讀性注意可讀性 文字、圖像、動(dòng)畫和多媒體文字、圖像、動(dòng)畫和多媒體l中文網(wǎng)站中的字體最好使用默認(rèn)的中文網(wǎng)站中的字體最好使用默認(rèn)的“宋體宋體”，以及，以及“楷體楷體”、“黑體黑體”等基本字體。建議使用等基本字體。建議使用CSS CSS 樣式表對(duì)樣式表對(duì)站點(diǎn)的字體進(jìn)行統(tǒng)一管理。站點(diǎn)的字體進(jìn)行統(tǒng)一管理。l使用任何對(duì)象時(shí)要考慮的一點(diǎn)：是否使用任何對(duì)象時(shí)要考慮的一點(diǎn)：是否有利于達(dá)到站點(diǎn)目標(biāo)。有利于達(dá)到站點(diǎn)目標(biāo)。 網(wǎng)頁制作網(wǎng)頁制作 l根據(jù)設(shè)計(jì)階段制作出的示范網(wǎng)頁，通根據(jù)設(shè)計(jì)階段制作出的示范網(wǎng)頁，通過過 Dreamweaver Dreamweaver 等軟件在各個(gè)具體等軟件在各個(gè)具體網(wǎng)頁中添加實(shí)際內(nèi)容，包括：文本、網(wǎng)頁中添加實(shí)際內(nèi)容，包括：文本、圖像、聲音、圖像、聲音、Flash Flash 電影以及其他多電影以及其他多媒體信息。媒體信息。 網(wǎng)站測試網(wǎng)站測試l對(duì)所有影響頁面顯示的細(xì)節(jié)因素進(jìn)行對(duì)所有影響頁面顯示的細(xì)節(jié)因素進(jìn)行測試。測試。l測試頁面中的超鏈接是否能夠正常跳測試頁面中的超鏈接是否能夠正常跳轉(zhuǎn)。將本地站點(diǎn)文件夾在計(jì)算機(jī)硬盤轉(zhuǎn)。將本地站點(diǎn)文件夾在計(jì)算機(jī)硬盤中移動(dòng)位置，是測試超鏈接能否正確中移動(dòng)位置，是測試超鏈接能否正確工作的一種簡便方法。工作的一種