1、4.3 4.2 電子商務網站的實施電子商務網站的實施4.1 電子商務網站的策劃電子商務網站的策劃第第4章章 電子商務網站的建設電子商務網站的建設4.1 電子商務網站的策劃電子商務網站的策劃1. 確定網站的服務對象確定網站的服務對象3. 確定網站的內容確定網站的內容4. 確定網站的功能確定網站的功能2. 確定網站的目標確定網站的目標5. 確定網站的裝飾風格確定網站的裝飾風格1. 確定網站的服務對象確定網站的服務對象 由于網站資源有限，因此必須整合聚焦服務識別訪問者范圍。由于網站資源有限，因此必須整合聚焦服務識別訪問者范圍。外部訪問者外部訪問者客戶：了解產品信息、訂購、反饋客戶：了解產品信息、訂購

2、、反饋供應商：了解公司產品計劃、分析庫存供應商：了解公司產品計劃、分析庫存競爭者：了解公司戰略和經營情況競爭者：了解公司戰略和經營情況過客：值得訪問信息（潛在客戶）過客：值得訪問信息（潛在客戶）政府、其它組織和個人、投資者、債權者政府、其它組織和個人、投資者、債權者。內部訪問者內部訪問者經常被忽略，僅限于企業的內部經常被忽略，僅限于企業的內部按照價值鏈和業務流程確定：按照價值鏈和業務流程確定：研究部：了解客戶的偏好研究部：了解客戶的偏好制造部：了解客戶對產品評價制造部：了解客戶對產品評價市場部：利用反饋信息制定特別促銷方案市場部：利用反饋信息制定特別促銷方案財務部：了解客戶定貨和回款情況財務部

3、：了解客戶定貨和回款情況采購部：了解客戶對產品（原料）評價采購部：了解客戶對產品（原料）評價2. 確定網站的目標確定網站的目標公司的任務或目標（公司的任務或目標（Why）補充（輔助）、嘗試性、轉型（戰略調整）補充（輔助）、嘗試性、轉型（戰略調整）推廣企業的產品和服務樹立企業的形象，宣傳企業的產品開展電子商務業務，并為各種客戶提供服務和支持3. 確定網站的內容確定網站的內容靜態內容：靜態內容：一般、常規的信息，包括公司的歷史、文化、所屬行業等。一般、常規的信息，包括公司的歷史、文化、所屬行業等。較長時間內不需修改，通常在建設初期編制較長時間內不需修改，通常在建設初期編制。動態內容：動態內容：公司

4、產品和服務的有關信息。公司產品和服務的有關信息。經常變動，保持網站的吸引力，通常用作促銷手段。經常變動，保持網站的吸引力，通常用作促銷手段。4. 確定網站的功能確定網站的功能網站的功能可分為主要功能和輔助功能：網站的功能可分為主要功能和輔助功能：主要功能：主要功能：信息發布、網上交易信息發布、網上交易輔助功能：輔助功能：配合主要功能而設置的。如客戶注冊管理、客戶的配合主要功能而設置的。如客戶注冊管理、客戶的互動等。互動等。5. 確定網站的裝飾風格確定網站的裝飾風格裝飾風格要注意形式服從內容與功能的需要裝飾風格要注意形式服從內容與功能的需要裝飾可分為如下三種類型：裝飾可分為如下三種類型：組織性裝

5、飾：組織性裝飾： 按照小組、系統的結構安排站點功能，如子站點按照小組、系統的結構安排站點功能，如子站點 安排布局、顏色基調（整體）安排布局、顏色基調（整體）功能性裝飾：功能性裝飾： 方便顧客利用，如功能、內容的布局安排（局部）方便顧客利用，如功能、內容的布局安排（局部）可視性裝飾：可視性裝飾： 起著美化界面，如用圖形等（部件）起著美化界面，如用圖形等（部件）4.2 電子商務網站的實施電子商務網站的實施1.電子商務網站的實施方式電子商務網站的實施方式3.電子商務網站的開發電子商務網站的開發4.電子商務網站的維護電子商務網站的維護2.電子商務網站的實施準備電子商務網站的實施準備1. 實施方式實施方

6、式 - - 外包？外包？ - - 租借？租借？ - - 自建？自建？ 外包外包指全權委托外部專業化公司提供一攬子解決方案指全權委托外部專業化公司提供一攬子解決方案，并且實施。，并且實施。 租借租借指向電子商務服務站點（指向電子商務服務站點（ASPASP）租借存儲空間建）租借存儲空間建設站點。企業只需要提供有關材料，維護、收款以及設站點。企業只需要提供有關材料，維護、收款以及物流配送由門戶站點提供。物流配送由門戶站點提供。 自建指自建指利用企業自身的技術力量，按照電子商務網站利用企業自身的技術力量，按照電子商務網站的計劃書，來設計、開發、維護、推廣網站。的計劃書，來設計、開發、維護、推廣網站。2

7、. 實施準備實施準備(1)Web服務器建設服務器建設(2)準備站點資料準備站點資料(3)選擇網站開發工具選擇網站開發工具 虛擬主機托管虛擬主機托管整機托管整機托管租用網頁空間租用網頁空間獨立服務器獨立服務器 資料內容資料內容根據站點內容和功能規劃選定材料根據站點內容和功能規劃選定材料網站形象網站形象策劃網站整體形象，統籌安排網頁的風格策劃網站整體形象，統籌安排網頁的風格網頁內容網頁內容公司簡介、產品資料（圖片、價格）公司簡介、產品資料（圖片、價格）其它資料其它資料增值服務信息資料（相關產品技術資料、增值服務信息資料（相關產品技術資料、市場行情信息等）市場行情信息等）材料類型材料類型文字、圖像、

8、動畫、聲音、影視等文字、圖像、動畫、聲音、影視等網頁設計工具：網頁設計工具：FrontPage、DreamWeaver圖像處理工具：圖像處理工具： Photoshop聲音、影視處理軟件聲音、影視處理軟件交互式動態頁面設計工具：交互式動態頁面設計工具：微軟微軟ASP開發系統，開發系統，Perl開開 發系統發系統3. 網站開發網站開發企業電子商務站點的頁面組成主要包括：企業電子商務站點的頁面組成主要包括：主頁、企業信息、新聞、產品服務、幫助、相關虛擬社區等頁面主頁、企業信息、新聞、產品服務、幫助、相關虛擬社區等頁面主頁風格：主頁風格： * * 導航型導航型 提供簡潔、清晰的網站結構，樹立企業的網上

9、形象提供簡潔、清晰的網站結構，樹立企業的網上形象 * * 內容展示型內容展示型 展示主要內容，提供直接、快捷的鏈接，一步到位展示主要內容，提供直接、快捷的鏈接，一步到位 * * 視覺效果視覺效果 文本型和圖片型文本型和圖片型 文本型追求簡潔、快速，輔以圖片；文本型追求簡潔、快速，輔以圖片； 圖片型美觀、下載速度較慢。圖片型美觀、下載速度較慢。3. 網站開發網站開發1 1）電子商務網站的主頁）電子商務網站的主頁企業名稱、標志、銘牌、網站圖標（企業名稱、標志、銘牌、網站圖標（LogoLogo）等要素）等要素企業站點的網址企業站點的網址企業站點的導航系統企業站點的導航系統企業產品和企業產品和/ /或

10、服務最新的信息、有關新聞或服務最新的信息、有關新聞企業的聯系方式如企業的聯系方式如E-mailE-mail、電話、傳真等、電話、傳真等相關站點的鏈接相關站點的鏈接2 2）電子商務網站的新聞頁面）電子商務網站的新聞頁面產品或服務的最新信息，如品種、價格、實現方式等產品或服務的最新信息，如品種、價格、實現方式等新項目的進行情況新項目的進行情況企業的內部變動情況企業的內部變動情況行業的最新動態行業的最新動態相關行業的情況相關行業的情況3. 網站開發網站開發3 3）產品）產品/ /服務頁面服務頁面 產品產品/ /服務介紹服務介紹 分為兩部分：分為兩部分： 欄目入口處和轉入具體頁面后的產品欄目入口處和轉

11、入具體頁面后的產品介紹介紹 提供相關信息，盡可能詳細，采用多媒體形式展示，提供相關信息，盡可能詳細，采用多媒體形式展示， 虛擬現實虛擬現實 訪問者、客戶評價，訪問者、客戶評價，BBSBBS 在線訂購和支付在線訂購和支付 定制訂購，定制訂購，如提供購物籃（車）等形象訂購系統、如提供購物籃（車）等形象訂購系統、 選取系統、配送系統、支付系統（如貨款、運費、選取系統、配送系統、支付系統（如貨款、運費、 手續手續費計算）等，重點考慮方便、安全、自動。費計算）等，重點考慮方便、安全、自動。 產品相關信息，產品使用小常識等產品相關信息，產品使用小常識等 頁面設計組織時要盡量簡潔，按產品線頁面設計組織時要盡

12、量簡潔，按產品線/ /品牌分類。品牌分類。3. 網站開發網站開發4 4）企業信息頁面）企業信息頁面 功能與作用功能與作用 對公眾（客戶、投資者）發布企業公開信息對公眾（客戶、投資者）發布企業公開信息 發布信息包括發布信息包括 * * 發展歷程、企業大事記發展歷程、企業大事記 * * 組織架構、業務范圍組織架構、業務范圍 * * 合作伙伴、發展計劃合作伙伴、發展計劃 * * 財務信息（上市公司）財務信息（上市公司） 頁面設計：最好圖文并茂，采用多媒體方式展示頁面設計：最好圖文并茂，采用多媒體方式展示3. 網站開發網站開發5 5）幫助頁面）幫助頁面功能和作用功能和作用 方便瀏覽者在繁雜的方便瀏覽者

13、在繁雜的Web頁面快速找到信息頁面快速找到信息信息方面幫助信息方面幫助 * 站點結構圖（站點結構圖（Site Map）：展示主要鏈接）：展示主要鏈接 * 站點內容搜索站點內容搜索電子商務活動方面幫助電子商務活動方面幫助 * 在線訂購、定制規則在線訂購、定制規則 * 在線支付方式和具體方法在線支付方式和具體方法 * 物流配送方式物流配送方式3. 網站開發網站開發6 6）虛擬社區）虛擬社區虛擬社區的作用虛擬社區的作用 培養訪問者的忠誠度；培養訪問者的忠誠度； 供消費者交流購物體驗，供消費者交流購物體驗， 增加人氣，建立訪問者之間的群體關系增加人氣，建立訪問者之間的群體關系提供功能提供功能 * 個人

14、電子信箱 * 公告欄（BBS） * 在線聊天室（Chat） * 在線實時通信（ICQ）電子虛擬社區的建立電子虛擬社區的建立選擇獨具特色的話題，一般與企業的產品、服務、經選擇獨具特色的話題，一般與企業的產品、服務、經營方式相關。營方式相關。 選擇合適的論壇主持人。選擇合適的論壇主持人。4. 網站維護網站維護電子商務網站維護的任務：電子商務網站維護的任務： 保持鏈接的有效性保持鏈接的有效性 及時更換信息，根據信息性質不同確定更換頻率，保及時更換信息，根據信息性質不同確定更換頻率，保 持信息的時效性，最好是規劃、持信息的時效性，最好是規劃、 落實到具體部門，與落實到具體部門，與業務整合在一起業務整合

15、在一起 保持頁面內容和拼寫正確保持頁面內容和拼寫正確 維持與訪問者的良好關系，及時反饋維持與訪問者的良好關系，及時反饋4.3 網頁的設計與制作網頁的設計與制作1. 網頁制作的主要軟件工具網頁制作的主要軟件工具3. HTML常用標記常用標記2. HTML概述概述1. 網頁制作的主要軟件工具網頁制作的主要軟件工具網頁設計軟件網頁設計軟件Dreamweaver Dreamweaver是一款是一款“所見即所得所見即所得”的網頁編輯工具的網頁編輯工具，其用戶界面非常友好易用，為網頁設計者帶來了，其用戶界面非常友好易用，為網頁設計者帶來了很大的便利。很大的便利。 Dreamweaver不僅提供了強大的網頁

16、編輯功能，而且不僅提供了強大的網頁編輯功能，而且提供了善的站點管理機制，是一個集網頁創作和站提供了善的站點管理機制，是一個集網頁創作和站點管理兩大利器于一身的創作工具。點管理兩大利器于一身的創作工具。1. 網頁制作的主要軟件工具網頁制作的主要軟件工具動畫設計軟件動畫設計軟件Flash Flash是一款優秀的網頁動畫制作軟件，主要應用是一款優秀的網頁動畫制作軟件，主要應用于網頁設計和多媒體創作等領域。于網頁設計和多媒體創作等領域。Flash可以很方便地可以很方便地將音樂、聲效、圖畫以及動畫隨心所欲地結合起來。將音樂、聲效、圖畫以及動畫隨心所欲地結合起來。Flash生成的生成的SWF作品文件作品文

17、件“體積體積”小得出奇，并小得出奇，并且可以以插件的形式直接插入到網頁中，是目前網絡且可以以插件的形式直接插入到網頁中，是目前網絡中最常用的動畫格式。中最常用的動畫格式。1. 網頁制作的主要軟件工具網頁制作的主要軟件工具網頁圖形處理軟件網頁圖形處理軟件Fireworks Fireworks是一款真正的網頁圖形圖像處理軟件，是一款真正的網頁圖形圖像處理軟件，它與它與Dreamweaver結合很緊密結合很緊密 。Fireworks可用于設計動態按鈕等網頁元素，甚至可用于設計動態按鈕等網頁元素，甚至可直接設計精美的網站首頁。可直接設計精美的網站首頁。1. 網頁制作的主要軟件工具網頁制作的主要軟件工具

18、圖像處理軟件圖像處理軟件Photoshop Photoshop是一款專業的圖像處理軟件，功能強大，是一款專業的圖像處理軟件，功能強大，為美工設計人員提供了廣闊的創意空間，為美工設計人員提供了廣闊的創意空間， Photoshop廣泛應用于網頁圖像編輯、桌面出版、廣廣泛應用于網頁圖像編輯、桌面出版、廣告設計、婚紗攝影等各行各業，成為許多涉及圖像處理告設計、婚紗攝影等各行各業，成為許多涉及圖像處理的行業的事實標準。的行業的事實標準。 2. HTML概述概述HTML是是Hyper Text Markup Language的縮寫，的縮寫，即即超文本標記語言。超文本標記語言。HTML語言是網頁制作的基礎語

19、言，因為無論使用語言是網頁制作的基礎語言，因為無論使用什么工具制作網頁，生成的網頁代碼都是以什么工具制作網頁，生成的網頁代碼都是以HTML語語言為基礎的。言為基礎的。HTML與操作系統平臺的選擇無關，只要有瀏覽器與操作系統平臺的選擇無關，只要有瀏覽器就可以運行就可以運行HTML文檔，顯示網頁內容。文檔，顯示網頁內容。 HTML使用了一些約定的標記，對網頁上的各種信使用了一些約定的標記，對網頁上的各種信息進行標記，瀏覽器會自動根據這些標記，在屏幕上息進行標記，瀏覽器會自動根據這些標記，在屏幕上顯示出相應的內容，而標記符號不會在屏幕上顯示出顯示出相應的內容，而標記符號不會在屏幕上顯示出來。來。3.

20、 HTML常用標記常用標記HTML文檔包含兩種類型的信息：文檔包含兩種類型的信息： 標記信息：標記信息：該部分信息用來控制文檔內部的顯示該部分信息用來控制文檔內部的顯示方式，并允許設計人員指定與其他文檔的鏈接。方式，并允許設計人員指定與其他文檔的鏈接。 內容信息：內容信息：該部分信息就是瀏覽器顯示的文本、圖該部分信息就是瀏覽器顯示的文本、圖形、音頻和視頻等。形、音頻和視頻等。3. HTML常用標記常用標記HTML文檔包含兩種類型的信息：文檔包含兩種類型的信息：標記信息：標記信息：該部分信息用來控制文檔內部的顯示方式，該部分信息用來控制文檔內部的顯示方式，并允許設計人員指定與其他文檔的鏈接。并允

21、許設計人員指定與其他文檔的鏈接。用兩個尖括號用兩個尖括號“”括起來，前一個標記是起始標記，后一個括起來，前一個標記是起始標記，后一個標記為結束標記，結束標記以符號標記為結束標記，結束標記以符號“/”開頭。開頭。 一般是雙標記。如粗體字標記一般是雙標記。如粗體字標記和和 。內容信息：內容信息：該部分信息就是瀏覽器顯示的文本、圖形、該部分信息就是瀏覽器顯示的文本、圖形、音頻和視頻等。音頻和視頻等。v某些標記為單標記，只需單獨使用就能完整地表達某些標記為單標記，只需單獨使用就能完整地表達意思。如意思。如換行標記換行標記。v一些標記有自己的一些標記有自己的屬性屬性，屬性細分了標記的功能，屬性細分了標記

22、的功能，屬性通常可以賦予具體的屬性通常可以賦予具體的屬性值屬性值 。如：如： 是正文標記是正文標記 屬性值，這里是顏色值屬性值，這里是顏色值(粉紅色粉紅色) bgcolor就是就是標記的屬性，用于設置背景色標記的屬性，用于設置背景色 3. HTML常用標記常用標記如果一個標記有多個屬性，屬性和屬性之間用空格隔開如果一個標記有多個屬性，屬性和屬性之間用空格隔開 。標記在使用時，應注意以下幾點：標記在使用時，應注意以下幾點： HTML標記不區分大小寫 使用“”標記將HTML文檔中注解內容括起來 各標記可以嵌套，但不能交錯。 如 是錯誤的 對于HTML文檔中錯誤的標記及其屬性，瀏覽器通常會跳過它，不

23、處理也不顯示。 3. HTML常用標記常用標記HTML文檔的基本架構文檔的基本架構 v HTML文檔的基本結構如下：文檔的基本結構如下： 文件開始標記 文件頭信息 文件體信息 文件結束標記3. HTML常用標記常用標記v 另外，基本結構標記還有另外，基本結構標記還有網頁標題標記網頁標題標記。 ： 該標記位于該標記位于標記中，標記內的文字顯示標記中，標記內的文字顯示在瀏覽器的標題欄上。在瀏覽器的標題欄上。v 有很多屬性，可以定義頁面的背景圖像、背景色有很多屬性，可以定義頁面的背景圖像、背景色彩、文字色彩、超文本鏈接的色彩等。這些屬性用于設定彩、文字色彩、超文本鏈接的色彩等。這些屬性用于設定網頁的

24、總體風格。網頁的總體風格。 3. HTML常用標記常用標記v 以下介紹以下介紹標記的常用屬性：標記的常用屬性： bgcolor：設置網頁的背景色； text：設置非鏈接的文本色彩； link：設置未被訪問過的超鏈接文本的色彩，默認為藍色； alink：設置超鏈接文本在被訪問瞬間的色彩，默認為藍色； vlink：設置已訪問過的超鏈接文本的色彩，默認為藍色； background：設置網頁的背景圖像； leftmargin：設置頁面左邊的空白邊距，單位是像素； topmargin：設置頁面上方的空白邊距，單位是像素。 3. HTML常用標記常用標記文本格式文本格式1. 字體標記字體標記v 和和：該

25、標記可用來設置文本的字體、字號和文本顏色該標記可用來設置文本的字體、字號和文本顏色等，是等，是HTML文檔中常用的標記。文檔中常用的標記。v 其設置格式為：其設置格式為： 文字文字 size: 用于設定字號，即文字的大小，“size”屬性的有效值范圍為17，默認值為3。在size屬性值之前可以加上“+”和“-”符號，用于指定相對于默認字號值的增量或減量。 face: 用于設定字體名稱，例如英文字體的“Times New Roman”、“Arial”；中文字體的“宋體”、“黑體”、“華文彩云”； color: 設定文字顏色，如前所述，各種顏色值可以使用英文顏色名稱表示，也可以使用十六進制值表示。

26、3. HTML常用標記常用標記文本格式文本格式例例1“字體字體”設置設置編寫代碼制作如下網頁文本效果。編寫代碼制作如下網頁文本效果。 代碼如下：代碼如下： 字體設置字體設置 1號字體號字體 2號字體號字體 3號字色紅體號字色紅體 4號藍色字體號藍色字體 5號橙色字體號橙色字體 6號黃色黑體字體號黃色黑體字體 7號綠色隸書字體號綠色隸書字體 +2號紫色宋體字體號紫色宋體字體 3. HTML常用標記常用標記文本格式文本格式2文字修飾標記文字修飾標記 v HTML文檔允許在要顯示的文字兩端添加各種文字修飾標記，這些標文檔允許在要顯示的文字兩端添加各種文字修飾標記，這些標記及其功能描述如下表記及其功能

27、描述如下表 ：3. HTML常用標記常用標記文本格式文本格式例例2文字修飾標記文字修飾標記制作如圖制作如圖2-5所示的多格式網頁文本所示的多格式網頁文本效果效果 。 代碼如下：代碼如下： 文字修飾標記文字修飾標記 粗體字粗體字 斜體字斜體字 加下劃線加下劃線 下標字效果下標字效果 帶刪除線字體帶刪除線字體 字體強調效果字體強調效果 3. HTML常用標記常用標記文本格式文本格式2特殊字符標記特殊字符標記 v 空格、字符空格、字符“”、“”、“&”等具有特殊意義，等具有特殊意義，要在網頁中顯示該些字符也同樣要用專門的字符串表示要在網頁中顯示該些字符也同樣要用專門的字符串表示 。v 該類字符串標記

28、都必須以該類字符串標記都必須以“&”開頭，以開頭，以“;”結束。結束。3. HTML常用標記常用標記段落格式段落格式1標題標記標題標記 ：正文的第一級標題標記。 第二、三、四、五、六級標題標記，分別為、和。 標題級別越高，文字越小。 設置為標題的文字將獨占一行。 可以使用align屬性指定標題文字的對齊方式，屬性值有“left”，“right”和“center”，分別表示左對齊、右對齊和居中對齊，默認值為“left”。 3. HTML常用標記常用標記段落格式段落格式例例3 “標題標題”設置示例設置示例將各級標題的文本加入到網頁將各級標題的文本加入到網頁中，并設置其中四、五、六級標題的對齊方式分

29、別為：左中，并設置其中四、五、六級標題的對齊方式分別為：左對齊、居中對齊和右對齊。對齊、居中對齊和右對齊。 標題設置標題設置 H1: 一級標題一級標題 H2: 二級標題二級標題 H3: 三級標題三級標題 H4: 四級標題四級標題,左對齊左對齊 H5: 五級標題五級標題,居中對齊居中對齊 H6: 六級標題六級標題,右對齊右對齊 3. HTML常用標記常用標記段落格式段落格式2. 分段標記分段標記v ：段落標記。它的作用是將其內的文字另：段落標記。它的作用是將其內的文字另起一段顯示。起一段顯示。通常可以省略。通常可以省略。v 段與段之間有一個空行。段與段之間有一個空行。v 可以使用可以使用alig

30、n屬性指定段落的對齊方式，使用方法同屬性指定段落的對齊方式，使用方法同上。上。 3換行標記換行標記 v ：是換行標記。表示以后的內容移到下一行。：是換行標記。表示以后的內容移到下一行。v 它是單標記，沒有它是單標記，沒有。 3. HTML常用標記常用標記段落格式段落格式4. 水平線標記水平線標記 v 標記是一條水平線，是單標記。標記是一條水平線，是單標記。v 可以使用可以使用“align”屬性設置對齊方式；屬性設置對齊方式；“color”屬性設屬性設置水平線顏色；置水平線顏色；“size”屬性設置水平線粗細，以像素為屬性設置水平線粗細，以像素為單位，默認值為單位，默認值為2。v 使用使用“wi

31、dth”屬性可設置線段長度，可以是以像素為單屬性可設置線段長度，可以是以像素為單位的絕對值，也可以一個百分比的相對值，如位的絕對值，也可以一個百分比的相對值，如“width=50%”表示相對于當前窗口表示相對于當前窗口50%的寬度。的寬度。 3. HTML常用標記常用標記段落格式段落格式例例4 分段、換行及水平線標記分段、換行及水平線標記 。 早發白帝城早發白帝城 早發白帝城早發白帝城 作者：李白作者：李白 朝辭白帝彩云間，朝辭白帝彩云間， 千里江陵一日還。千里江陵一日還。 兩岸猿聲啼不住，兩岸猿聲啼不住， 輕舟已過萬重山。輕舟已過萬重山。 代碼如下：代碼如下：4. HTML常用標記常用標記列

32、表列表有序列表的結構如下所示：有序列表的結構如下所示： 第一項 第二項 第三項 3. HTML常用標記常用標記列表列表v 是無序列表標記，其中的列表項用是無序列表標記，其中的列表項用標記引導文字，顯示網頁中的這些文字標記引導文字，顯示網頁中的這些文字后，文字前會自動加上后，文字前會自動加上“ ”序號。序號。 無序列表的結構如下所示： 第一項 第二項 第三項 v 有序列表和無序列表的有序列表和無序列表的標記可省。標記可省。v 有序列表和無序列表都允許自身嵌套或相互嵌套有序列表和無序列表都允許自身嵌套或相互嵌套 。3. HTML常用標記常用標記列表列表v 例：例： 將該例中的將該例中的“”改為改為

33、“”，則為無序列表則為無序列表 3. HTML常用標記常用標記列表列表v 嵌套列表示例嵌套列表示例 ：實現代碼：實現代碼： 有序列表與無序列表有序列表與無序列表   以下是一個有序列表，有以下是一個有序列表，有4個列表項，其中第個列表項，其中第3項嵌入一個無序列表，也有項嵌入一個無序列表，也有4個列表項。個列表項。 網頁多媒體的插入網頁多媒體的插入 文本的插入文本的插入 圖片的插入圖片的插入 視頻及動畫的插入視頻及動畫的插入 mp4視頻格式視頻格式 rm視頻格式視頻格式 gif動畫格式動畫格式 flash動畫格式動畫格式 音頻的插入音頻的插入 3. HTML常用標記常用標記

34、圖像圖像圖像標記圖像標記 格式為：格式為： src屬性是圖像標記的必需屬性，用來指定圖像源文件的路徑和文件名。網頁使用的圖片格式可以是GIF或JPEG。height和width的屬性值為整數數值時，單位為像素，屬性值以百分比表示（1%100%）時，圖片將以相對當前窗口大小的百分比來顯示。3. HTML常用標記常用標記圖像圖像align屬性有left、right、top、middle和bottom共5種。其中“top”設置圖像的頂部與文本頂部對齊； “middle”設置圖像在垂直方向的中部與文本中部對齊； “bottom”設置圖像的底部與文本的底部對齊。hspace屬性用來指定圖像與瀏覽器窗口左

35、邊界的水平距離；vspace屬性用來指定圖像與窗口上端邊界的垂直距離，單位是像素。alt屬性用來指定圖像的替換文字，當圖像正在下載或下屬性用來指定圖像的替換文字，當圖像正在下載或下載未成功時，圖像所處的位置即可出現指定的替換文載未成功時，圖像所處的位置即可出現指定的替換文字字。標記沒有對應的結束標記標記沒有對應的結束標記。3. HTML常用標記常用標記圖像圖像例：圖片的插入例：圖片的插入如左圖所示在網頁中插入一蒲公英花地的圖片，當在硬盤上刪除了該圖片文件“picture.JPG”后，網頁打開的效果如右圖所示。 3. HTML常用標記常用標記表格表格1表格標記表格標記，一個，一個標記對定義設置一

36、個表格。標記對定義設置一個表格。標記有如下屬性：標記有如下屬性：uborder：定義表格邊框的粗細，單位為像素，如果省略則：定義表格邊框的粗細，單位為像素，如果省略則不帶邊框；不帶邊框；uwidth：定義表格的寬度，屬性值為像素數或百分數（相：定義表格的寬度，屬性值為像素數或百分數（相對窗口百分比）；對窗口百分比）；uheight：定義表格的高度，屬性值為像素數或百分數（相：定義表格的高度，屬性值為像素數或百分數（相對窗口百分比）；對窗口百分比）；ucellspacing：定義表項間隙，單位為像素；：定義表項間隙，單位為像素；ucellpadding：定義表項內部空白，單位為像素。：定義表項內

37、部空白，單位為像素。 3. HTML常用標記常用標記表格表格表格行標記表格行標記，一個，一個標記對定義表格的一個行。標記對定義表格的一個行。 表項標記表項標記，一個，一個標記對定義一個單元格，單元格內標記對定義一個單元格，單元格內容寫在該標記對之間。容寫在該標記對之間。 在在、和和標記可使用以下屬性改變整個標記可使用以下屬性改變整個表格或個別行、個別單元格的背景和邊框的色彩。表格或個別行、個別單元格的背景和邊框的色彩。ubgcolor：設置背景色彩；設置背景色彩；ubackground：設置背景圖像；：設置背景圖像；ubordercolor：邊框的色彩。：邊框的色彩。 3. HTML常用標記常用標記表格表格例：表格插入例：表格插入,在網頁中插入一在網頁中插入一3行行2列的表格列的表格實現代碼：實現代碼： 表格的插入