第4章電子商務(wù)網(wǎng)站建設(shè)

4.3網(wǎng)頁的設(shè)計(jì)與制作4.2電子商務(wù)網(wǎng)站的實(shí)施4.1電子商務(wù)網(wǎng)站的策劃第4章電子商務(wù)網(wǎng)站的建設(shè)4.1

電子商務(wù)網(wǎng)站的策劃1.確定網(wǎng)站的服務(wù)對(duì)象3.確定網(wǎng)站的內(nèi)容4.確定網(wǎng)站的功能2.確定網(wǎng)站的目標(biāo)5.確定網(wǎng)站的裝飾風(fēng)格1.

確定網(wǎng)站的服務(wù)對(duì)象

由于網(wǎng)站資源有限，因此必須整合聚焦服務(wù)識(shí)別訪問者范圍。外部訪問者客戶：了解產(chǎn)品信息、訂購、反饋供應(yīng)商：了解公司產(chǎn)品計(jì)劃、分析庫存競(jìng)爭(zhēng)者：了解公司戰(zhàn)略和經(jīng)營(yíng)情況過客：值得訪問信息（潛在客戶）政府、其它組織和個(gè)人、投資者、債權(quán)者。內(nèi)部訪問者經(jīng)常被忽略，僅限于企業(yè)的內(nèi)部按照價(jià)值鏈和業(yè)務(wù)流程確定：研究部：了解客戶的偏好制造部：了解客戶對(duì)產(chǎn)品評(píng)價(jià)市場(chǎng)部：利用反饋信息制定特別促銷方案財(cái)務(wù)部：了解客戶定貨和回款情況采購部：了解客戶對(duì)產(chǎn)品（原料）評(píng)價(jià)2.

確定網(wǎng)站的目標(biāo)公司的任務(wù)或目標(biāo)（Why）補(bǔ)充（輔助）、嘗試性、轉(zhuǎn)型（戰(zhàn)略調(diào)整）推廣企業(yè)的產(chǎn)品和服務(wù)樹立企業(yè)的形象，宣傳企業(yè)的產(chǎn)品開展電子商務(wù)業(yè)務(wù)，并為各種客戶提供服務(wù)和支持3.

確定網(wǎng)站的內(nèi)容靜態(tài)內(nèi)容：一般、常規(guī)的信息，包括公司的歷史、文化、所屬行業(yè)等。較長(zhǎng)時(shí)間內(nèi)不需修改，通常在建設(shè)初期編制。動(dòng)態(tài)內(nèi)容：公司產(chǎn)品和服務(wù)的有關(guān)信息。經(jīng)常變動(dòng)，保持網(wǎng)站的吸引力，通常用作促銷手段。4.

確定網(wǎng)站的功能網(wǎng)站的功能可分為主要功能和輔助功能：主要功能：信息發(fā)布、網(wǎng)上交易輔助功能：配合主要功能而設(shè)置的。如客戶注冊(cè)管理、客戶的互動(dòng)等。5.

確定網(wǎng)站的裝飾風(fēng)格裝飾風(fēng)格要注意形式服從內(nèi)容與功能的需要裝飾可分為如下三種類型：組織性裝飾：

按照小組、系統(tǒng)的結(jié)構(gòu)安排站點(diǎn)功能，如子站點(diǎn)安排布局、顏色基調(diào)（整體）功能性裝飾：方便顧客利用，如功能、內(nèi)容的布局安排（局部）可視性裝飾：起著美化界面，如用圖形等（部件）4.2

電子商務(wù)網(wǎng)站的實(shí)施1.電子商務(wù)網(wǎng)站的實(shí)施方式3.電子商務(wù)網(wǎng)站的開發(fā)4.電子商務(wù)網(wǎng)站的維護(hù)2.電子商務(wù)網(wǎng)站的實(shí)施準(zhǔn)備1.

實(shí)施方式--外包？

--租借？

--自建？

外包指全權(quán)委托外部專業(yè)化公司提供一攬子解決方案，并且實(shí)施。

租借指向電子商務(wù)服務(wù)站點(diǎn)（ASP）租借存儲(chǔ)空間建設(shè)站點(diǎn)。企業(yè)只需要提供有關(guān)材料，維護(hù)、收款以及物流配送由門戶站點(diǎn)提供。自建指利用企業(yè)自身的技術(shù)力量，按照電子商務(wù)網(wǎng)站的計(jì)劃書，來設(shè)計(jì)、開發(fā)、維護(hù)、推廣網(wǎng)站。2.

實(shí)施準(zhǔn)備(1)Web服務(wù)器建設(shè)(2)準(zhǔn)備站點(diǎn)資料(3)選擇網(wǎng)站開發(fā)工具

虛擬主機(jī)托管整機(jī)托管租用網(wǎng)頁空間獨(dú)立服務(wù)器

資料內(nèi)容根據(jù)站點(diǎn)內(nèi)容和功能規(guī)劃選定材料網(wǎng)站形象策劃網(wǎng)站整體形象，統(tǒng)籌安排網(wǎng)頁的風(fēng)格網(wǎng)頁內(nèi)容公司簡(jiǎn)介、產(chǎn)品資料（圖片、價(jià)格）其它資料增值服務(wù)信息資料（相關(guān)產(chǎn)品技術(shù)資料、市場(chǎng)行情信息等）材料類型文字、圖像、動(dòng)畫、聲音、影視等網(wǎng)頁設(shè)計(jì)工具：FrontPage、DreamWeaver圖像處理工具：

Photoshop聲音、影視處理軟件交互式動(dòng)態(tài)頁面設(shè)計(jì)工具：微軟ASP開發(fā)系統(tǒng)，Perl開發(fā)系統(tǒng)3.

網(wǎng)站開發(fā)企業(yè)電子商務(wù)站點(diǎn)的頁面組成主要包括：主頁、企業(yè)信息、新聞、產(chǎn)品服務(wù)、幫助、相關(guān)虛擬社區(qū)等頁面主頁風(fēng)格：*導(dǎo)航型提供簡(jiǎn)潔、清晰的網(wǎng)站結(jié)構(gòu)，樹立企業(yè)的網(wǎng)上形象*內(nèi)容展示型展示主要內(nèi)容，提供直接、快捷的鏈接，一步到位*視覺效果文本型和圖片型文本型追求簡(jiǎn)潔、快速，輔以圖片；圖片型美觀、下載速度較慢。3.

網(wǎng)站開發(fā)1）電子商務(wù)網(wǎng)站的主頁企業(yè)名稱、標(biāo)志、銘牌、網(wǎng)站圖標(biāo)（Logo）等要素企業(yè)站點(diǎn)的網(wǎng)址企業(yè)站點(diǎn)的導(dǎo)航系統(tǒng)企業(yè)產(chǎn)品和/或服務(wù)最新的信息、有關(guān)新聞企業(yè)的聯(lián)系方式如E-mail、電話、傳真等相關(guān)站點(diǎn)的鏈接2）電子商務(wù)網(wǎng)站的新聞頁面產(chǎn)品或服務(wù)的最新信息，如品種、價(jià)格、實(shí)現(xiàn)方式等新項(xiàng)目的進(jìn)行情況企業(yè)的內(nèi)部變動(dòng)情況行業(yè)的最新動(dòng)態(tài)相關(guān)行業(yè)的情況3.

網(wǎng)站開發(fā)3）產(chǎn)品/服務(wù)頁面

產(chǎn)品/服務(wù)介紹分為兩部分：欄目入口處和轉(zhuǎn)入具體頁面后的產(chǎn)品介紹提供相關(guān)信息，盡可能詳細(xì)，采用多媒體形式展示，虛擬現(xiàn)實(shí)

訪問者、客戶評(píng)價(jià)，BBS

在線訂購和支付

定制訂購，如提供購物籃（車）等形象訂購系統(tǒng)、選取系統(tǒng)、配送系統(tǒng)、支付系統(tǒng)（如貨款、運(yùn)費(fèi)、手續(xù)費(fèi)計(jì)算）等，重點(diǎn)考慮方便、安全、自動(dòng)。產(chǎn)品相關(guān)信息，產(chǎn)品使用小常識(shí)等

頁面設(shè)計(jì)組織時(shí)要盡量簡(jiǎn)潔，按產(chǎn)品線/品牌分類。3.

網(wǎng)站開發(fā)4）企業(yè)信息頁面

功能與作用對(duì)公眾（客戶、投資者）發(fā)布企業(yè)公開信息發(fā)布信息包括

*發(fā)展歷程、企業(yè)大事記*組織架構(gòu)、業(yè)務(wù)范圍*合作伙伴、發(fā)展計(jì)劃*財(cái)務(wù)信息（上市公司）頁面設(shè)計(jì)：最好圖文并茂，采用多媒體方式展示3.

網(wǎng)站開發(fā)5）幫助頁面功能和作用

方便瀏覽者在繁雜的Web頁面快速找到信息信息方面幫助*站點(diǎn)結(jié)構(gòu)圖（SiteMap）：展示主要鏈接

*站點(diǎn)內(nèi)容搜索電子商務(wù)活動(dòng)方面幫助*在線訂購、定制規(guī)則*在線支付方式和具體方法*物流配送方式3.

網(wǎng)站開發(fā)6）虛擬社區(qū)虛擬社區(qū)的作用

培養(yǎng)訪問者的忠誠(chéng)度；供消費(fèi)者交流購物體驗(yàn)，增加人氣，建立訪問者之間的群體關(guān)系提供功能*個(gè)人電子信箱*公告欄（BBS）*在線聊天室（Chat）*在線實(shí)時(shí)通信（ICQ）電子虛擬社區(qū)的建立選擇獨(dú)具特色的話題，一般與企業(yè)的產(chǎn)品、服務(wù)、經(jīng)營(yíng)方式相關(guān)。選擇合適的論壇主持人。4.

網(wǎng)站維護(hù)電子商務(wù)網(wǎng)站維護(hù)的任務(wù)：保持鏈接的有效性及時(shí)更換信息，根據(jù)信息性質(zhì)不同確定更換頻率，保持信息的時(shí)效性，最好是規(guī)劃、落實(shí)到具體部門，與業(yè)務(wù)整合在一起保持頁面內(nèi)容和拼寫正確維持與訪問者的良好關(guān)系，及時(shí)反饋4.3

網(wǎng)頁的設(shè)計(jì)與制作1.網(wǎng)頁制作的主要軟件工具3.HTML常用標(biāo)記2.HTML概述1.

網(wǎng)頁制作的主要軟件工具網(wǎng)頁設(shè)計(jì)軟件——DreamweaverDreamweaver是一款“所見即所得”的網(wǎng)頁編輯工具，其用戶界面非常友好易用，為網(wǎng)頁設(shè)計(jì)者帶來了很大的便利。Dreamweaver不僅提供了強(qiáng)大的網(wǎng)頁編輯功能，而且提供了善的站點(diǎn)管理機(jī)制，是一個(gè)集網(wǎng)頁創(chuàng)作和站點(diǎn)管理兩大利器于一身的創(chuàng)作工具。1.

網(wǎng)頁制作的主要軟件工具動(dòng)畫設(shè)計(jì)軟件——FlashFlash是一款優(yōu)秀的網(wǎng)頁動(dòng)畫制作軟件，主要應(yīng)用于網(wǎng)頁設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域。Flash可以很方便地將音樂、聲效、圖畫以及動(dòng)畫隨心所欲地結(jié)合起來。Flash生成的SWF作品文件“體積”小得出奇，并且可以以插件的形式直接插入到網(wǎng)頁中，是目前網(wǎng)絡(luò)中最常用的動(dòng)畫格式。1.

網(wǎng)頁制作的主要軟件工具網(wǎng)頁圖形處理軟件——FireworksFireworks是一款真正的網(wǎng)頁圖形圖像處理軟件，它與Dreamweaver結(jié)合很緊密。Fireworks可用于設(shè)計(jì)動(dòng)態(tài)按鈕等網(wǎng)頁元素，甚至可直接設(shè)計(jì)精美的網(wǎng)站首頁。1.

網(wǎng)頁制作的主要軟件工具圖像處理軟件——PhotoshopPhotoshop是一款專業(yè)的圖像處理軟件，功能強(qiáng)大，為美工設(shè)計(jì)人員提供了廣闊的創(chuàng)意空間，Photoshop廣泛應(yīng)用于網(wǎng)頁圖像編輯、桌面出版、廣告設(shè)計(jì)、婚紗攝影等各行各業(yè)，成為許多涉及圖像處理的行業(yè)的事實(shí)標(biāo)準(zhǔn)。2.

HTML概述HTML是HyperTextMarkupLanguage的縮寫，即超文本標(biāo)記語言。HTML語言是網(wǎng)頁制作的基礎(chǔ)語言，因?yàn)闊o論使用什么工具制作網(wǎng)頁，生成的網(wǎng)頁代碼都是以HTML語言為基礎(chǔ)的。HTML與操作系統(tǒng)平臺(tái)的選擇無關(guān)，只要有瀏覽器就可以運(yùn)行HTML文檔，顯示網(wǎng)頁內(nèi)容。HTML使用了一些約定的標(biāo)記，對(duì)網(wǎng)頁上的各種信息進(jìn)行標(biāo)記，瀏覽器會(huì)自動(dòng)根據(jù)這些標(biāo)記，在屏幕上顯示出相應(yīng)的內(nèi)容，而標(biāo)記符號(hào)不會(huì)在屏幕上顯示出來。3.

HTML常用標(biāo)記HTML文檔包含兩種類型的信息：標(biāo)記信息：該部分信息用來控制文檔內(nèi)部的顯示方式，并允許設(shè)計(jì)人員指定與其他文檔的鏈接。

內(nèi)容信息：該部分信息就是瀏覽器顯示的文本、圖形、音頻和視頻等。3.

HTML常用標(biāo)記HTML文檔包含兩種類型的信息：標(biāo)記信息：該部分信息用來控制文檔內(nèi)部的顯示方式，并允許設(shè)計(jì)人員指定與其他文檔的鏈接。用兩個(gè)尖括號(hào)“<>”括起來，前一個(gè)標(biāo)記是起始標(biāo)記，后一個(gè)標(biāo)記為結(jié)束標(biāo)記，結(jié)束標(biāo)記以符號(hào)“/”開頭。一般是雙標(biāo)記。如粗體字標(biāo)記<B>和</B>。內(nèi)容信息：該部分信息就是瀏覽器顯示的文本、圖形、音頻和視頻等。某些標(biāo)記為單標(biāo)記，只需單獨(dú)使用就能完整地表達(dá)意思。如換行標(biāo)記<BR>。一些標(biāo)記有自己的屬性，屬性細(xì)分了標(biāo)記的功能，屬性通?？梢再x予具體的屬性值。如：<bodybgcolor="#FFC0CB">……</body><body>是正文標(biāo)記屬性值，這里是顏色值(粉紅色)

bgcolor就是<body>標(biāo)記的屬性，用于設(shè)置背景色3.

HTML常用標(biāo)記如果一個(gè)標(biāo)記有多個(gè)屬性，屬性和屬性之間用空格隔開。標(biāo)記在使用時(shí)，應(yīng)注意以下幾點(diǎn)：HTML標(biāo)記不區(qū)分大小寫使用“<!--”和“-->”標(biāo)記將HTML文檔中注解內(nèi)容括起來各標(biāo)記可以嵌套，但不能交錯(cuò)。如<head><title>……</head></title>是錯(cuò)誤的對(duì)于HTML文檔中錯(cuò)誤的標(biāo)記及其屬性，瀏覽器通常會(huì)跳過它，不處理也不顯示。3.

HTML常用標(biāo)記HTML文檔的基本架構(gòu)HTML文檔的基本結(jié)構(gòu)如下：<html>——文件開始標(biāo)記<head>文件頭信息</head><body>文件體信息</body></html>

——文件結(jié)束標(biāo)記3.

HTML常用標(biāo)記另外，基本結(jié)構(gòu)標(biāo)記還有網(wǎng)頁標(biāo)題標(biāo)記。<title>……</title>：

該標(biāo)記位于<head>……</head>標(biāo)記中，標(biāo)記內(nèi)的文字顯示在瀏覽器的標(biāo)題欄上。<body>有很多屬性，可以定義頁面的背景圖像、背景色彩、文字色彩、超文本鏈接的色彩等。這些屬性用于設(shè)定網(wǎng)頁的總體風(fēng)格。

3.

HTML常用標(biāo)記以下介紹<body>標(biāo)記的常用屬性：bgcolor：設(shè)置網(wǎng)頁的背景色；text：設(shè)置非鏈接的文本色彩；link：設(shè)置未被訪問過的超鏈接文本的色彩，默認(rèn)為藍(lán)色；alink：設(shè)置超鏈接文本在被訪問瞬間的色彩，默認(rèn)為藍(lán)色；vlink：設(shè)置已訪問過的超鏈接文本的色彩，默認(rèn)為藍(lán)色；background：設(shè)置網(wǎng)頁的背景圖像；leftmargin：設(shè)置頁面左邊的空白邊距，單位是像素；topmargin：設(shè)置頁面上方的空白邊距，單位是像素。

3.

HTML常用標(biāo)記——文本格式1.字體標(biāo)記<font>和</font>：該標(biāo)記可用來設(shè)置文本的字體、字號(hào)和文本顏色等，是HTML文檔中常用的標(biāo)記。其設(shè)置格式為：<fontsize=大小face=字體名稱color=顏色>文字</font>size:用于設(shè)定字號(hào)，即文字的大小，“size”屬性的有效值范圍為1~7，默認(rèn)值為3。在size屬性值之前可以加上“+”和“-”符號(hào)，用于指定相對(duì)于默認(rèn)字號(hào)值的增量或減量。face:用于設(shè)定字體名稱，例如英文字體的“TimesNewRoman”、“Arial”；中文字體的“宋體”、“黑體”、“華文彩云”；color:設(shè)定文字顏色，如前所述，各種顏色值可以使用英文顏色名稱表示，也可以使用十六進(jìn)制值表示。3.

HTML常用標(biāo)記——文本格式[例1]“字體”設(shè)置——編寫代碼制作如下網(wǎng)頁文本效果。代碼如下：<html><head><title>字體設(shè)置</title></head><body><fontsize=1>1號(hào)字體</font><p><fontsize=2>2號(hào)字體</font><p><fontsize=3color=red>3號(hào)字色紅體</font><p><fontsize=4color=blue>4號(hào)藍(lán)色字體</font><p><fontsize=5color=orange>5號(hào)橙色字體</font><p><fontsize=6color=yellowface="黑體">6號(hào)黃色黑體字體</font><p><fontsize=7color=greenface="隸書">7號(hào)綠色隸書字體</font><p><fontsize=+2color=purpleface="宋體">+2號(hào)紫色宋體字體</font><p></body></html>3.

HTML常用標(biāo)記——文本格式2．文字修飾標(biāo)記HTML文檔允許在要顯示的文字兩端添加各種文字修飾標(biāo)記，這些標(biāo)記及其功能描述如下表：3.

HTML常用標(biāo)記——文本格式[例2]文字修飾標(biāo)記——制作如圖2-5所示的多格式網(wǎng)頁文本效果。代碼如下：<html><head><title>文字修飾標(biāo)記</title></head><body><B>粗體字</B><p><I>斜體字</I><p><U>加下劃線</U><p>_{下標(biāo)字效果}<p><strike>帶刪除線字體</strike><p><Strong>字體強(qiáng)調(diào)效果</strong><p></body></html>

3.

HTML常用標(biāo)記——文本格式2．特殊字符標(biāo)記空格、字符“<”、“>”、“””、“&”等具有特殊意義，要在網(wǎng)頁中顯示該些字符也同樣要用專門的字符串表示。該類字符串標(biāo)記都必須以“&”開頭，以“;”結(jié)束。3.

HTML常用標(biāo)記——段落格式1．標(biāo)題標(biāo)記<h1>……</h1>：正文的第一級(jí)標(biāo)題標(biāo)記。第二、三、四、五、六級(jí)標(biāo)題標(biāo)記，分別為<h2>……</h2>、<h3>……</h3>、<h4>……</h4>、<h5>……</h5>和<h6>……</h6>。標(biāo)題級(jí)別越高，文字越小。設(shè)置為標(biāo)題的文字將獨(dú)占一行?？梢允褂胊lign屬性指定標(biāo)題文字的對(duì)齊方式，屬性值有“l(fā)eft”，“right”和“center”，分別表示左對(duì)齊、右對(duì)齊和居中對(duì)齊，默認(rèn)值為“l(fā)eft”。3.

HTML常用標(biāo)記——段落格式[例3]“標(biāo)題”設(shè)置示例——將各級(jí)標(biāo)題的文本加入到網(wǎng)頁中，并設(shè)置其中四、五、六級(jí)標(biāo)題的對(duì)齊方式分別為：左對(duì)齊、居中對(duì)齊和右對(duì)齊。<html><head><title>標(biāo)題設(shè)置</title></head><body><h1>H1:一級(jí)標(biāo)題</h1><h2>H2:二級(jí)標(biāo)題</h2><h3>H3:三級(jí)標(biāo)題</h3><h4align=left>H4:四級(jí)標(biāo)題,左對(duì)齊</h4><h5align=center>H5:五級(jí)標(biāo)題,居中對(duì)齊</h5><h6align=right>H6:六級(jí)標(biāo)題,右對(duì)齊</h6></body></html>

3.

HTML常用標(biāo)記——段落格式2.分段標(biāo)記<p>……</p>：段落標(biāo)記。它的作用是將其內(nèi)的文字另起一段顯示。</p>通?？梢允÷浴６闻c段之間有一個(gè)空行?？梢允褂胊lign屬性指定段落的對(duì)齊方式，使用方法同上。3．換行標(biāo)記<br>：是換行標(biāo)記。表示以后的內(nèi)容移到下一行。它是單標(biāo)記，沒有</br>。3.

HTML常用標(biāo)記——段落格式4.水平線標(biāo)記<hr>標(biāo)記是一條水平線，是單標(biāo)記。可以使用“align”屬性設(shè)置對(duì)齊方式；“color”屬性設(shè)置水平線顏色；“size”屬性設(shè)置水平線粗細(xì)，以像素為單位，默認(rèn)值為2。使用“width”屬性可設(shè)置線段長(zhǎng)度，可以是以像素為單位的絕對(duì)值，也可以一個(gè)百分比的相對(duì)值，如“width=50%”表示相對(duì)于當(dāng)前窗口50%的寬度。3.

HTML常用標(biāo)記——段落格式[例4]分段、換行及水平線標(biāo)記。<html><head><title>早發(fā)白帝城</title></head><body><palign=center>早發(fā)白帝城

<palign=center>作者：李白

<hr><palign=center>

朝辭白帝彩云間，

<br>千里江陵一日還。

<br>兩岸猿聲啼不住，

<br>輕舟已過萬重山。

<hr></body></html>

代碼如下：4.

HTML常用標(biāo)記——列表有序列表的結(jié)構(gòu)如下所示：<ol><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li>……</ol>3.

HTML常用標(biāo)記——列表<ul>……</ul>是無序列表標(biāo)記，其中的列表項(xiàng)用<li>……</li>標(biāo)記引導(dǎo)文字，顯示網(wǎng)頁中的這些文字后，文字前會(huì)自動(dòng)加上“·”序號(hào)。無序列表的結(jié)構(gòu)如下所示：<ul><li>第一項(xiàng)</li><li>第二項(xiàng)</li><li>第三項(xiàng)</li>……</ul>有序列表和無序列表的</li>標(biāo)記可省。有序列表和無序列表都允許自身嵌套或相互嵌套。3.

HTML常用標(biāo)記——列表例：<html><head><title>有序列表</title></head><body>

以下是一個(gè)有序列表，有4個(gè)列表項(xiàng)。

<ol>

網(wǎng)頁多媒體的插入<p><li>文本的插入</li><li>圖片的插入</li><li>視頻及動(dòng)畫的插入</li><li>音頻的插入

</ol></body></html>

將該例中的“<ol>……</ol>”改為“<ul>……</ul>”，則為無序列表3.

HTML常用標(biāo)記——列表嵌套列表示例：實(shí)現(xiàn)代碼：<html><head><title>有序列表與無序列表</title></head>

<body>

以下是一個(gè)有序列表，有4個(gè)列表項(xiàng)，其中第3項(xiàng)嵌入一個(gè)無序列表，也有4個(gè)列表項(xiàng)。

<ol>

網(wǎng)頁多媒體的插入<p><li>文本的插入</li><li>圖片的插入</li><li>視頻及動(dòng)畫的插入</li><ul><li>mp4視頻格式</li><li>rm視頻格式</li><li>gif動(dòng)畫格式</li><li>flash動(dòng)畫格式</li></ul><li>音頻的插入

</ol></body></html>3.

HTML常用標(biāo)記——圖像<img>圖像標(biāo)記格式為：

<imgsrc=圖片文件URL……>src屬性是<img>圖像標(biāo)記的必需屬性，用來指定圖像源文件的路徑和文件名。網(wǎng)頁使用的圖片格式可以是GIF或JPEG。height和width的屬性值為整數(shù)數(shù)值時(shí)，單位為像素，屬性值以百分比表示（1%~100%）時(shí)，圖片將以相對(duì)當(dāng)前窗口大小的百分比來顯示。3.

HTML常用標(biāo)記——圖像align屬性有l(wèi)eft、right、top、middle和bottom共5種。其中“top”設(shè)置圖像的頂部與文本頂部對(duì)齊；“middle”設(shè)置圖像在垂直方向的中部與文本中部對(duì)齊；

“bottom”設(shè)置圖像的底部與文本的底部對(duì)齊。hspace屬性用來指定圖像與瀏覽器窗口左邊界的水平距離；vspace屬性用來指定圖像與窗口上端邊界的垂直距離，單位是像素。alt屬性用來指定圖像的替換文字，當(dāng)圖像正在下載或下載未成功時(shí)，圖像所處的位置即可出現(xiàn)指定的替換文字。<img>標(biāo)記沒有對(duì)應(yīng)的結(jié)束標(biāo)記。3.

HTML常用標(biāo)記——圖像例：圖片的插入——如左圖所示在網(wǎng)頁中插入一蒲公英花地的圖片，當(dāng)在硬盤上刪除了該圖片文件“picture.JPG”后，網(wǎng)頁打開的效果如右圖所示。

實(shí)現(xiàn)代碼：<html><head><title>圖片的插入</title></head><body><imgsrc="picture.JPG"width=100height=80border=2alt="蒲公英花地"></body></html>

3.

HTML常用標(biāo)記——表格1．<talbe>……</table>表格標(biāo)記，一個(gè)<table>標(biāo)記對(duì)定義設(shè)置一個(gè)表格。<table>標(biāo)記有如下屬性：border：定義表格邊框的粗細(xì)，單位為像素，如果省略則不帶邊框；width：定義表格的寬度，屬性值為像素?cái)?shù)或百分?jǐn)?shù)（相對(duì)窗口百分比）；height：定義表格的高度，屬性值為像素?cái)?shù)或百分?jǐn)?shù)（相對(duì)窗口百分比）；cellspacing：定義表項(xiàng)間隙，單位為像素；cellpadding：定義表項(xiàng)內(nèi)部空白，單位為像素。

3.

HTML常用標(biāo)記——表格<tr>……</tr>表格行標(biāo)記，一個(gè)<tr>標(biāo)記對(duì)定義表格的一個(gè)行。

<td>……</td>表項(xiàng)標(biāo)記，一個(gè)<td>標(biāo)記對(duì)定義一個(gè)單元格，單元格內(nèi)容寫在該標(biāo)記對(duì)之間。在<table>、<tr>和<td>標(biāo)記可使用以下屬性改變整個(gè)表格或個(gè)別行、個(gè)別單元格的背景和邊框的色彩。bgcolor：設(shè)置背景色彩；background：設(shè)置背景圖像；bordercolor：邊框的色彩。3.

HTML常用標(biāo)記——表格例：表格插入,在網(wǎng)頁中插入一3行2列的表格實(shí)現(xiàn)代碼：<html><head><title>表格的插入</title></head><body><tableborder=2cellspacing=5cellpadding=10><tr><td>表項(xiàng)1</td><td>表項(xiàng)2</td></tr><tr><td>表項(xiàng)3</td><td>表項(xiàng)4</td></tr><tr><td>表項(xiàng)5</td><td>表項(xiàng)6</td></tr><tr></tr></table></body></html>

3.

HTML常用標(biāo)記——超級(jí)鏈接<a>……</a>——超鏈接標(biāo)記格式為：

<ahref=URL>用于超鏈接錨點(diǎn)的文字或圖像</a>href屬性用來指定錨點(diǎn)被觸發(fā)之后所鏈接到的URL。<a>標(biāo)記中還可以包含target屬性，用來指定在哪個(gè)窗口打開所鏈接的目標(biāo)網(wǎng)頁，target屬性的屬性值如下：_blank：在新窗口中打開；_parent：在上級(jí)窗口中打開；_self：在當(dāng)前窗口中打開（默認(rèn)）；_top：在整個(gè)瀏覽器窗口中打開，并刪除窗口的所有框架。3.

HTML常用標(biāo)記——超級(jí)鏈接例：超級(jí)鏈接,點(diǎn)擊網(wǎng)頁中“這里”字樣實(shí)現(xiàn)對(duì)“al.html”的超級(jí)鏈接。實(shí)現(xiàn)代碼：<html><head><title>超級(jí)鏈接</title></head><body>

點(diǎn)擊<ahref=a1.html>這里</a>鏈接到一個(gè)圖片網(wǎng)頁

</body></html>

3.

HTML常用標(biāo)記——音頻、視頻標(biāo)記音頻文件格式有：mp3、wma、wav、mid等，視頻、動(dòng)畫文件格式有：avi、、rm、swf、ram等1．添加背景音樂使用<bgsound>標(biāo)記可以在網(wǎng)頁中插入背景音樂<bgsound>標(biāo)記可以放在<html