網(wǎng)頁制作基礎——網(wǎng)頁設計第一講

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

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

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

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

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

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

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

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

9、用空格分開，通常也不區(qū)分大小間用空格分開，通常也不區(qū)分大小寫。寫。 標記符基礎標記符基礎l例如，可以用字體標記符和字號屬例如，可以用字體標記符和字號屬性指定文字的大小。性指定文字的大小。本行字將以較小字體顯示。本行字將以較小字體顯示。演示演示屬性的作用屬性的作用Web頁的基本結構頁的基本結構l一個一個 Web 頁實際上對應于一個頁實際上對應于一個 HTML 文件，文件，HTML 文件以文件以 .htm 或或 .html 為擴展名。為擴展名。l最基本的最基本的HTML文檔包括：文檔包括：HTML標標記記、首部標記、首部標記和和、以及正文、以及正文。HTML標記符標記符 l和和 是是WebWeb頁

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

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

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

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

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

15、接輸入。字符來表示，而不能直接輸入。l參考字符以參考字符以“&”號開始，以號開始，以“；”結結束，既可以使用數(shù)字代碼，也可以使束，既可以使用數(shù)字代碼，也可以使用代碼名稱。用代碼名稱。顯示特殊字符顯示特殊字符例如，要在例如，要在 Web 頁中顯示以下內容，頁中顯示以下內容，則需使用參考字符：則需使用參考字符：“12”1<2演示演示特殊字符的顯示特殊字符的顯示演示演示創(chuàng)建與測試網(wǎng)頁創(chuàng)建與測試網(wǎng)頁Page5Part 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)站的目的；接下來對首先定義開發(fā)網(wǎng)站的目的；接下來對網(wǎng)站的外觀進行設計；然后進行實際網(wǎng)站的外觀進行設計；然后進行實際頁面的制作；然后對所制作的網(wǎng)站進頁面的制作；然后對所制作的網(wǎng)站進行測試，以確保它符合最初設定的目行測試，以確保它符合最初設定的目標；最后是將網(wǎng)站發(fā)布。在將網(wǎng)站發(fā)標；最后是將網(wǎng)站發(fā)布。在將網(wǎng)站發(fā)布后還需要有維護工作，以便及時更布后還需要有維護工作，以便及時更新網(wǎng)站內容。新網(wǎng)站內容。 網(wǎng)站規(guī)劃網(wǎng)站規(guī)劃l確定建設網(wǎng)站的目標確定建設網(wǎng)站的目標 l分析目標用戶對站點的需求分析目標用戶對站點的需求 l確定網(wǎng)站風格確定網(wǎng)站風格 l考慮網(wǎng)絡技術因素考慮網(wǎng)絡技術因素網(wǎng)絡速度網(wǎng)絡速度

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

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