第4章電子商務網站建設_第1頁
第4章電子商務網站建設_第2頁
第4章電子商務網站建設_第3頁
第4章電子商務網站建設_第4頁
第4章電子商務網站建設_第5頁
已閱讀5頁，還剩51頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

4.3網頁的設計與制作4.2電子商務網站的實施4.1電子商務網站的策劃第4章電子商務網站的建設4.1

電子商務網站的策劃1.確定網站的服務對象3.確定網站的內容4.確定網站的功能2.確定網站的目標5.確定網站的裝飾風格1.

確定網站的服務對象

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

確定網站的目標公司的任務或目標（Why）補充（輔助）、嘗試性、轉型（戰略調整）推廣企業的產品和服務樹立企業的形象，宣傳企業的產品開展電子商務業務，并為各種客戶提供服務和支持3.

確定網站的內容靜態內容：一般、常規的信息，包括公司的歷史、文化、所屬行業等。較長時間內不需修改，通常在建設初期編制。動態內容：公司產品和服務的有關信息。經常變動，保持網站的吸引力，通常用作促銷手段。4.

確定網站的功能網站的功能可分為主要功能和輔助功能：主要功能：信息發布、網上交易輔助功能：配合主要功能而設置的。如客戶注冊管理、客戶的互動等。5.

確定網站的裝飾風格裝飾風格要注意形式服從內容與功能的需要裝飾可分為如下三種類型：組織性裝飾：

按照小組、系統的結構安排站點功能，如子站點安排布局、顏色基調（整體）功能性裝飾：方便顧客利用，如功能、內容的布局安排（局部）可視性裝飾：起著美化界面，如用圖形等（部件）4.2

電子商務網站的實施1.電子商務網站的實施方式3.電子商務網站的開發4.電子商務網站的維護2.電子商務網站的實施準備1.

實施方式--外包？

--租借？

--自建？

外包指全權委托外部專業化公司提供一攬子解決方案，并且實施。

租借指向電子商務服務站點（ASP）租借存儲空間建設站點。企業只需要提供有關材料，維護、收款以及物流配送由門戶站點提供。自建指利用企業自身的技術力量，按照電子商務網站的計劃書，來設計、開發、維護、推廣網站。2.

實施準備(1)Web服務器建設(2)準備站點資料(3)選擇網站開發工具

虛擬主機托管整機托管租用網頁空間獨立服務器

資料內容根據站點內容和功能規劃選定材料網站形象策劃網站整體形象，統籌安排網頁的風格網頁內容公司簡介、產品資料（圖片、價格）其它資料增值服務信息資料（相關產品技術資料、市場行情信息等）材料類型文字、圖像、動畫、聲音、影視等網頁設計工具：FrontPage、DreamWeaver圖像處理工具：

Photoshop聲音、影視處理軟件交互式動態頁面設計工具：微軟ASP開發系統，Perl開發系統3.

網站開發企業電子商務站點的頁面組成主要包括：主頁、企業信息、新聞、產品服務、幫助、相關虛擬社區等頁面主頁風格：*導航型提供簡潔、清晰的網站結構，樹立企業的網上形象*內容展示型展示主要內容，提供直接、快捷的鏈接，一步到位*視覺效果文本型和圖片型文本型追求簡潔、快速，輔以圖片；圖片型美觀、下載速度較慢。3.

網站開發1）電子商務網站的主頁企業名稱、標志、銘牌、網站圖標（Logo）等要素企業站點的網址企業站點的導航系統企業產品和/或服務最新的信息、有關新聞企業的聯系方式如E-mail、電話、傳真等相關站點的鏈接2）電子商務網站的新聞頁面產品或服務的最新信息，如品種、價格、實現方式等新項目的進行情況企業的內部變動情況行業的最新動態相關行業的情況3.

網站開發3）產品/服務頁面

產品/服務介紹分為兩部分：欄目入口處和轉入具體頁面后的產品介紹提供相關信息，盡可能詳細，采用多媒體形式展示，虛擬現實

訪問者、客戶評價，BBS

在線訂購和支付

定制訂購，如提供購物籃（車）等形象訂購系統、選取系統、配送系統、支付系統（如貨款、運費、手續費計算）等，重點考慮方便、安全、自動。產品相關信息，產品使用小常識等

頁面設計組織時要盡量簡潔，按產品線/品牌分類。3.

網站開發4）企業信息頁面

功能與作用對公眾（客戶、投資者）發布企業公開信息發布信息包括

*發展歷程、企業大事記*組織架構、業務范圍*合作伙伴、發展計劃*財務信息（上市公司）頁面設計：最好圖文并茂，采用多媒體方式展示3.

網站開發5）幫助頁面功能和作用

方便瀏覽者在繁雜的Web頁面快速找到信息信息方面幫助*站點結構圖（SiteMap）：展示主要鏈接

*站點內容搜索電子商務活動方面幫助*在線訂購、定制規則*在線支付方式和具體方法*物流配送方式3.

網站開發6）虛擬社區虛擬社區的作用

培養訪問者的忠誠度；供消費者交流購物體驗，增加人氣，建立訪問者之間的群體關系提供功能*個人電子信箱*公告欄（BBS）*在線聊天室（Chat）*在線實時通信（ICQ）電子虛擬社區的建立選擇獨具特色的話題，一般與企業的產品、服務、經營方式相關。選擇合適的論壇主持人。4.

網站維護電子商務網站維護的任務：保持鏈接的有效性及時更換信息，根據信息性質不同確定更換頻率，保持信息的時效性，最好是規劃、落實到具體部門，與業務整合在一起保持頁面內容和拼寫正確維持與訪問者的良好關系，及時反饋4.3

網頁的設計與制作1.網頁制作的主要軟件工具3.HTML常用標記2.HTML概述1.

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

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

網頁制作的主要軟件工具網頁圖形處理軟件——FireworksFireworks是一款真正的網頁圖形圖像處理軟件，它與Dreamweaver結合很緊密。Fireworks可用于設計動態按鈕等網頁元素，甚至可直接設計精美的網站首頁。1.

網頁制作的主要軟件工具圖像處理軟件——PhotoshopPhotoshop是一款專業的圖像處理軟件，功能強大，為美工設計人員提供了廣闊的創意空間，Photoshop廣泛應用于網頁圖像編輯、桌面出版、廣告設計、婚紗攝影等各行各業，成為許多涉及圖像處理的行業的事實標準。2.

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

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

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

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

bgcolor就是<body>標記的屬性，用于設置背景色3.

HTML常用標記如果一個標記有多個屬性，屬性和屬性之間用空格隔開。標記在使用時，應注意以下幾點：HTML標記不區分大小寫使用“<!--”和“-->”標記將HTML文檔中注解內容括起來各標記可以嵌套，但不能交錯。如<head><title>……</head></title>是錯誤的對于HTML文檔中錯誤的標記及其屬性，瀏覽器通常會跳過它，不處理也不顯示。3.

HTML常用標記HTML文檔的基本架構HTML文檔的基本結構如下：<html>——文件開始標記<head>文件頭信息</head><body>文件體信息</body></html>

——文件結束標記3.

HTML常用標記另外，基本結構標記還有網頁標題標記。<title>……</title>：

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

3.

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

3.

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

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

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

HTML常用標記——文本格式[例2]文字修飾標記——制作如圖2-5所示的多格式網頁文本效果。代碼如下：<html><head><title>文字修飾標記</title></head><body><B>粗體字</B><p><I>斜體字</I><p><U>加下劃線</U><p><sub>下標字效果</sub><p><strike>帶刪除線字體</strike><p><Strong>字體強調效果</strong><p></body></html>

3.

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

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

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

3.

HTML常用標記——段落格式2.分段標記<p>……</p>：段落標記。它的作用是將其內的文字另起一段顯示。</p>通常可以省略。段與段之間有一個空行?？梢允褂胊lign屬性指定段落的對齊方式，使用方法同上。3．換行標記<br>：是換行標記。表示以后的內容移到下一行。它是單標記，沒有</br>。3.

HTML常用標記——段落格式4.水平線標記<hr>標記是一條水平線，是單標記?？梢允褂谩癮lign”屬性設置對齊方式；“color”屬性設置水平線顏色；“size”屬性設置水平線粗細，以像素為單位，默認值為2。使用“width”屬性可設置線段長度，可以是以像素為單位的絕對值，也可以一個百分比的相對值，如“width=50%”表示相對于當前窗口50%的寬度。3.

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

<palign=center>作者：李白

<hr><palign=center>

朝辭白帝彩云間，

<br>千里江陵一日還。

<br>兩岸猿聲啼不住，

<br>輕舟已過萬重山。

<hr></body></html>

代碼如下：4.

HTML常用標記——列表有序列表的結構如下所示：<ol><li>第一項</li><li>第二項</li><li>第三項</li>……</ol>3.

HTML常用標記——列表<ul>……</ul>是無序列表標記，其中的列表項用<li>……</li>標記引導文字，顯示網頁中的這些文字后，文字前會自動加上“·”序號。無序列表的結構如下所示：<ul><li>第一項</li><li>第二項</li><li>第三項</li>……</ul>有序列表和無序列表的</li>標記可省。有序列表和無序列表都允許自身嵌套或相互嵌套。3.

HTML常用標記——列表例：<html><head><title>有序列表</title></head><body>

以下是一個有序列表，有4個列表項。

<ol>

網頁多媒體的插入<p><li>文本的插入</li><li>圖片的插入</li><li>視頻及動畫的插入</li><li>音頻的插入

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

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

HTML常用標記——列表嵌套列表示例：實現代碼：<html><head><title>有序列表與無序列表</title></head>

<body>

以下是一個有序列表，有4個列表項，其中第3項嵌入一個無序列表，也有4個列表項。

<ol>

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

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

HTML常用標記——圖像<img>圖像標記格式為：

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

HTML常用標記——圖像align屬性有left、right、top、middle和bottom共5種。其中“top”設置圖像的頂部與文本頂部對齊；“middle”設置圖像在垂直方向的中部與文本中部對齊；

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

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

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

3.

HTML常用標記——表格1．<talbe>……</table>表格標記，一個<table>標記對定義設置一個表格。<table>標記有如下屬性：border：定義表格邊框的粗細，單位為像素，如果省略則不帶邊框；width：定義表格的寬度，屬性值為像素數或百分數（相對窗口百分比）；height：定義表格的高度，屬性值為像素數或百分數（相對窗口百分比）；cellspacing：定義表項間隙，單位為像素；cellpadding：定義表項內部空白，單位為像素。

3.

HTML常用標記——表格<tr>……</tr>表格行標記，一個<tr>標記對定義表格的一個行。

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

HTML常用標記——表格例：表格插入,在網頁中插入一3行2列的表格實現代碼：<html><head><title>表格的插入</title></head><body><tableborder=2cellspacing=5cellpadding=10><tr><td>表項1</td><td>表項2</td></tr><tr><td>表項3</td><td>表項4</td></tr><tr><td>表項5</td><td>表項6</td></tr><tr></tr></table></body></html>

3.

HTML常用標記——超級鏈接<a>……</a>——超鏈接標記格式為：

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

HTML常用標記——超級鏈接例：超級鏈接,點擊網頁中“這里”字樣實現對“al.html”的超級鏈接。實現代碼：<html><head><title>超級鏈接</title></head><body>

點擊<ahref=a1.html>這里</a>鏈接到一個圖片網頁

</body></html>

3.

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論