1、第第1篇第篇第1章章 網頁制作基礎知識網頁制作基礎知識第第1 1篇篇 第第1 1章章 網頁設計與制作根底網頁設計與制作根底1.1 網絡根底網絡根底1.1.1 網絡與網頁網絡與網頁1.1.2 HTML語言與語言與XHTML語言語言1.2 網站建立流程網站建立流程1.2.1 分析階段分析階段1.2.2 設計階段設計階段1.2.3 制作階段制作階段1.2.4 測試階段測試階段1.2.5 發布與維護階段發布與維護階段思考題思考題1.1 網絡根底網絡根底1.1.1 網絡與網頁網絡與網頁Internet效勞：效勞：www效勞網頁瀏覽效勞、電子郵件效勞網頁瀏覽效勞、電子郵件效勞、網上傳呼效勞、網上傳呼ICQ

2、傳呼、文件傳輸、在線聊天、傳呼、文件傳輸、在線聊天、網上購物、網絡炒股、聯網游戲、虛擬空間等網上購物、網絡炒股、聯網游戲、虛擬空間等圖圖1-11.1.1 網絡與網頁網絡與網頁瀏覽器：是獲取瀏覽器：是獲取www效勞的根底，它的根本功能就效勞的根底，它的根本功能就是顯示網頁。是顯示網頁。統一資源定位符統一資源定位符URLUniform Resource Locator圖圖1-21.1.2 HTML語言與語言與XHTML語言語言主頁主頁Home Page首頁：是整個網站的起始點和首頁：是整個網站的起始點和匯總點，是用戶開場瀏覽網站的入口。匯總點，是用戶開場瀏覽網站的入口。 HTMLHyper Tex

3、t Markup Language 即超文即超文本標記語言，是用于在網絡上發布信息的符號語言。本標記語言，是用于在網絡上發布信息的符號語言。XHTMLExtensible Hyper Text Markup Language為可擴展超文本標記語言為可擴展超文本標記語言 。 HTML是純文本文件是純文本文件(ASCII碼文件碼文件)，可以用任何文，可以用任何文本編輯器編輯，如記事本。擴展名為本編輯器編輯，如記事本。擴展名為htm或或html。1.1.2 HTML語言與語言與XHTML語言語言HTML的根本格式：的根本格式：雙標簽雙標簽 受影響的內容受影響的內容 單標簽不需要成對標記單標簽不需要成

4、對標記 表示換行，表示換行，1.1.2 HTML語言與語言與XHTML語言語言【例【例1-2】在】在Dreamweaver 8環境下制作例環境下制作例1-1的界面，分析系統生成的的界面，分析系統生成的XHTML代碼代碼 。 歡送歡送1.1.2 HTML語言與語言與XHTML語言語言熱烈歡送新同學熱烈歡送新同學 2007年年9月月1日日HTML與與XHTML區別區別XHTML的主體的主體局部比局部比HTML簡潔得多簡潔得多 頁面的首部有不同的文檔類型說明頁面的首部有不同的文檔類型說明。XHTML的標記和屬性名稱只能用小寫，而的標記和屬性名稱只能用小寫，而HTML代碼不區分大小寫。代碼不區分大小寫

5、。XHTML代碼所有的屬性值都要用引號引起來，而代碼所有的屬性值都要用引號引起來，而HTML代碼不要求。代碼不要求。XHTML代碼的單標簽，如代碼的單標簽，如: 、等都要在后面加等都要在后面加 /斜杠前加空格斜杠前加空格來完畢，如來完畢，如，而，而HTML代碼只需寫單標簽本身代碼只需寫單標簽本身。1. 2 網站建立流程網站建立流程1.2.1 分析階段分析階段這一階段的主要任務是收集、研究用戶需求，這一階段的主要任務是收集、研究用戶需求，討論討論Web內容，制定方案。內容，制定方案。 任務任務 主題主題 內容內容 1.2.2 設計階段設計階段1站點風格：信息式、畫廊式。站點風格：信息式、畫廊式。

6、2網絡技術：網絡技術：網絡上的運行速度。網絡上的運行速度。 瀏覽器腳本兼容性。會影響某些網頁效果不能正常顯瀏覽器腳本兼容性。會影響某些網頁效果不能正常顯示。示。頁面對屏幕分辨率的適應。網頁頁面的大小應盡量適頁面對屏幕分辨率的適應。網頁頁面的大小應盡量適應流行屏幕的分辨率。隨著顯示器分辨率的提高，應流行屏幕的分辨率。隨著顯示器分辨率的提高，網頁設計標準也會提高。網頁設計標準也會提高。網頁是否需要交互操作。在網頁中參加網頁是否需要交互操作。在網頁中參加JavaScript腳腳本，或在效勞器端提供本，或在效勞器端提供CGI、ASP或或PHP支持。支持。安裝插件。如果網頁中使用了安裝插件。如果網頁中使

7、用了flash動畫、動畫、Shockwave媒體對象、媒體對象、Real視頻等，需要相應的插視頻等，需要相應的插件，應考慮用戶獲取插件的途徑件，應考慮用戶獲取插件的途徑 。1.2.2 設計階段設計階段3規劃站點構造與導航方式規劃站點構造與導航方式規劃網站目錄構造規劃網站目錄構造目錄名與文件名不能過長，也不能用中文。目錄名與文件名不能過長，也不能用中文。文件名中可以包含數字或下劃線，但不能含文件名中可以包含數字或下劃線，但不能含“減減號號。例如可以寫但不能寫。例如可以寫但不能寫。主頁的文件名應為或系統默認的主頁名稱。主頁的文件名應為或系統默認的主頁名稱。主頁文件放在站點根目錄下，其余文件均應主頁

8、文件放在站點根目錄下，其余文件均應歸類到相應的子目錄下。歸類到相應的子目錄下。1.2.2 設計階段設計階段【例【例1-3】 規劃規劃?家畜生家畜生產學產學?教學網站教學網站的目錄構造。的目錄構造。養豬生產、養養豬生產、養禽生產、養牛禽生產、養牛生產、養羊生生產、養羊生產產4個模塊，可個模塊，可以建立目錄構以建立目錄構造如右圖。造如右圖。 1.2.2 設計階段設計階段設計站點導航設計站點導航 導航設計的原那么是：導航設計的原那么是：通過最少的點擊次數到達目的地。通過最少的點擊次數到達目的地。整個網絡的導航風格應該一致，否那么瀏覽整個網絡的導航風格應該一致，否那么瀏覽者會誤解為已離開本網站。者會誤

9、解為已離開本網站。導航系統應一目了然，又必須盡量少占用頁導航系統應一目了然，又必須盡量少占用頁面空間。面空間。1.2.2 設計階段設計階段【例【例1-4】?家畜生產學家畜生產學?教學網站的導航系統教學網站的導航系統1.2.2 設計階段設計階段設計各級頁面的版式：設計各級頁面的版式：原那么一：原那么一：統一：設計作品的整體性，一致性。同一統一：設計作品的整體性，一致性。同一級頁面的版式應該一樣，不同級頁面的版級頁面的版式應該一樣，不同級頁面的版式應有所區別。式應有所區別。連貫：頁面相互有關系。連貫：頁面相互有關系。分割：將頁面分成假設干小塊，小塊之間分割：將頁面分成假設干小塊，小塊之間有視覺上的

10、不同，可以使用戶一目了然。有視覺上的不同，可以使用戶一目了然。比照：通過矛盾和沖突，使設計更加富有比照：通過矛盾和沖突，使設計更加富有生氣。生氣。和諧：整個頁面符合美的法那么，渾然一和諧：整個頁面符合美的法那么，渾然一體。體。 1.2.2 設計階段設計階段原那么二原那么二3C原那么：原那么：Content內容：主頁簡明，內容明確。內容：主頁簡明，內容明確。Clarify清晰性：文字不能太多，字體大小一致，統一設計風格。清晰性：文字不能太多，字體大小一致，統一設計風格。Color色彩：具有一致性和可讀性。一致性指色調一致，色彩不宜太多；可讀性指色彩搭配恰當，色彩：具有一致性和可讀性。一致性指色調

11、一致，色彩不宜太多；可讀性指色彩搭配恰當，文字與底圖比照鮮明。文字與底圖比照鮮明。1.2.2 設計階段設計階段1.2.3 制作階段制作階段 網站建立的第三階段是具體實施設計網站建立的第三階段是具體實施設計的方案，將站點中的網頁按照設計方案制的方案，將站點中的網頁按照設計方案制作出來。本篇以下各章節將教授這方面的作出來。本篇以下各章節將教授這方面的知識。知識。 Dreamweaver允許用面向對象的方允許用面向對象的方法法“搭建搭建頁面，也允許直接編程制作頁面，也允許直接編程制作Web頁面。頁面。1.2.4 測試階段測試階段 在所有影響頁面顯示的各種環境下進展在所有影響頁面顯示的各種環境下進展測試，然后對網頁進展修改測試，然后對網頁進展修改不同系統平臺不同系統平臺不同連接速度不同連接速度不同訪問方法局域網、調制解調器、不同訪問方法局域網、調制解調器、ISDN等等不同瀏覽器種類或版本不同瀏覽器種類或版本不同