電子商務(wù)網(wǎng)站的設(shè)計(jì)課件_第1頁(yè)
電子商務(wù)網(wǎng)站的設(shè)計(jì)課件_第2頁(yè)
電子商務(wù)網(wǎng)站的設(shè)計(jì)課件_第3頁(yè)
電子商務(wù)網(wǎng)站的設(shè)計(jì)課件_第4頁(yè)
電子商務(wù)網(wǎng)站的設(shè)計(jì)課件_第5頁(yè)
已閱讀5頁(yè)，還剩36頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

電子商務(wù)網(wǎng)站的設(shè)計(jì)

3.1網(wǎng)站設(shè)計(jì)概述

網(wǎng)站是企業(yè)在互聯(lián)網(wǎng)上的門戶，其不僅是企業(yè)在Internet上宣傳和反映自身形象和文化的重要窗口，也是企業(yè)向客戶和網(wǎng)民提供信息（包括產(chǎn)品和服務(wù)）的一種方式，是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，離開網(wǎng)站去談電子商務(wù)是不可能的。

3.1.1網(wǎng)站設(shè)計(jì)的目標(biāo)

網(wǎng)站設(shè)計(jì)一般須達(dá)到以下目標(biāo)：（1）形象定位準(zhǔn)確。（2）系統(tǒng)功能完善。（3）操作人性化。（4）安全性強(qiáng)。（5）運(yùn)行效率高。（6）管理更新方式靈活。3.1.2網(wǎng)站設(shè)計(jì)的原則

（1）明確建站的目的和目標(biāo)群體。

（2）總體設(shè)計(jì)方案主題鮮明。

（3）網(wǎng)站的版式設(shè)計(jì)要表達(dá)出和諧與美。

（4）合理運(yùn)用色彩。

（5）網(wǎng)頁(yè)形式與內(nèi)容相統(tǒng)一。

（6）利用多媒體功能。

（7）注意網(wǎng)站的層次性和一致性。

（8）內(nèi)容經(jīng)常更新，溝通渠道暢通。

（9）努力提高網(wǎng)站的性能。

（10）合理運(yùn)用新技術(shù)。

3.1.3網(wǎng)站設(shè)計(jì)的特點(diǎn)

（1）結(jié)構(gòu)清晰并且便于使用。

（2）導(dǎo)向清晰。

（3）快速的下載時(shí)間。

（4）有價(jià)值的內(nèi)容。

（5）方便的反饋及訂購(gòu)程序。

3.1.4網(wǎng)站設(shè)計(jì)的過程

網(wǎng)站設(shè)計(jì)過程如下：（1）確定網(wǎng)站設(shè)計(jì)總體思想，明確如何實(shí)現(xiàn)網(wǎng)站規(guī)劃中提出的目標(biāo)。（2）確定網(wǎng)站的風(fēng)格和特點(diǎn)，網(wǎng)頁(yè)的外觀及使用方面的特點(diǎn)。（3）確定網(wǎng)站提供的內(nèi)容，對(duì)網(wǎng)站的內(nèi)容進(jìn)行分類。（4）編寫網(wǎng)站設(shè)計(jì)的計(jì)劃書，明確人員分配、協(xié)調(diào)及進(jìn)度。

3.1.4網(wǎng)站設(shè)計(jì)的過程

（5）制作網(wǎng)頁(yè)。網(wǎng)頁(yè)制作是一個(gè)較漫長(zhǎng)過程，必須分工合作。（6）在不同平臺(tái)的瀏覽器上測(cè)試網(wǎng)頁(yè)。（7）讓部分顧客或員工試用網(wǎng)站，并提出反饋意見，根據(jù)需要修改不合適的地方。（8）正式推出網(wǎng)站。3.2網(wǎng)站數(shù)據(jù)庫(kù)

隨著Internet技術(shù)與Web技術(shù)的發(fā)展，人們己不滿足于只在Web瀏覽器獲取靜態(tài)的信息，人們需要通過它發(fā)表意見、查詢數(shù)據(jù)或者進(jìn)行網(wǎng)上購(gòu)物，這些都需要實(shí)現(xiàn)Web與數(shù)據(jù)庫(kù)的互連。目前Web技術(shù)與數(shù)據(jù)庫(kù)管理系統(tǒng)（DBMS）相互融合領(lǐng)域的研究已成為熱點(diǎn)方向之一，很多公司紛紛推出各自的產(chǎn)品和中間件支持Web技術(shù)和DBMS的融合，將兩者取長(zhǎng)補(bǔ)短，發(fā)揮各自的優(yōu)勢(shì)，使用戶可以在Web瀏覽器上方便地檢索數(shù)據(jù)庫(kù)的內(nèi)容。

3.2.1常用的網(wǎng)站數(shù)據(jù)庫(kù)

對(duì)于電子商務(wù)網(wǎng)站來說，常用的數(shù)據(jù)庫(kù)主要是SQLServer和Access。其中SQLServer主要用于大中型電子商務(wù)網(wǎng)站（數(shù)據(jù)百萬規(guī)模級(jí)以上），Access主要用于小型電子商務(wù)網(wǎng)站。3.2.2網(wǎng)站數(shù)據(jù)庫(kù)訪問技術(shù)

1．ODBC數(shù)據(jù)庫(kù)訪問技術(shù)

圖3-1ODBC的工作原理

3.2.2網(wǎng)站數(shù)據(jù)庫(kù)訪問技術(shù)

2．OLEDB數(shù)據(jù)庫(kù)訪問技術(shù)

3．ADO數(shù)據(jù)庫(kù)訪問技術(shù)

圖3-2ADO技術(shù)的體系結(jié)構(gòu)

3.3網(wǎng)站開發(fā)技術(shù)簡(jiǎn)介

目前，網(wǎng)站的網(wǎng)頁(yè)主要有靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)之分，因此相應(yīng)的網(wǎng)站開發(fā)技術(shù)也分為靜態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)和動(dòng)態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)。 靜態(tài)網(wǎng)頁(yè)開發(fā)技術(shù)的核心是HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言） 動(dòng)態(tài)網(wǎng)頁(yè)的開發(fā)主要采用ASP(ActiveServerPages，活動(dòng)服務(wù)器頁(yè)面)，JSP(JavaServerPages，Java服務(wù)器頁(yè)面)和PHP(HypertextPreprocessor，超文本預(yù)處理器)等技術(shù)。

3.3.1HTML語(yǔ)言

1．HTML語(yǔ)言的基本結(jié)構(gòu) 主要的標(biāo)簽

<html>……</html> <head>……</head> <title>……</title> <body>……</body>3.3.1HTML語(yǔ)言

2．HTML語(yǔ)言的基本單位 （1）長(zhǎng)度單位 （2）顏色單位3.head部分的基本使用方法 （1）title

（2）meta (3)link (4)base (5)script (6)style

3.3.1HTML語(yǔ)言

4．body部分的的使用方法 （1）bgcolor

（2）background

（3）text

link

alink

vlinkleftmargintopmargin

5．段落格式 （1）Align屬性6．表格的使用

table元素

thead、tr、th、td元素3.3.1HTML語(yǔ)言

7．框架frame的使用 （1）frameset元素的cols及rows屬性 （2）frameset元素的border屬性 （3）frame元素的name屬性 （4）frameset元素的scrolling屬性及noresize屬性 （5）frameset元素的marginHeight屬性及marginWidth屬性 （6）frameset元素的frameborder屬性 （7）框架的綜合應(yīng)用3.3.2ASP簡(jiǎn)介

ASP的全稱是ActiveServerPages，即“活動(dòng)服務(wù)器頁(yè)面”。1．ASP的運(yùn)行環(huán)境2．ASP的的執(zhí)行過程

圖3-15ASP的的執(zhí)行過程

3.3.2ASP簡(jiǎn)介

3．ASP的語(yǔ)法簡(jiǎn)介

ASP并不是一個(gè)script語(yǔ)言，而是提供一個(gè)可以集成script語(yǔ)言(VBscript或Jscript)到HTML主頁(yè)的環(huán)境。4．ASP的內(nèi)置對(duì)象

ASP提供五個(gè)內(nèi)置的“對(duì)象”(object)，可以直接調(diào)用：

Request: 取得用戶信息。

Response: 傳送信息給用戶。

Server: 提供訪問服務(wù)器的方法(methods)和屬性(properties)的功能。3.3.2ASP簡(jiǎn)介

Applicatin:一個(gè)應(yīng)用程序，可以在多個(gè)主頁(yè)之間保留和使用一些共同的信息。Session: 一個(gè)用戶，可以在多個(gè)主頁(yè)之間保留和使用一些共同的信息。

3.4使用DreamWeaverMX編輯網(wǎng)頁(yè)

MacromediaDreamweaverMX是美國(guó)Macromedia公司出品的一款“所見即所得”的網(wǎng)頁(yè)編輯工具，是一款專業(yè)的HTML編輯器，用于對(duì)Web站點(diǎn)、Web頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。

DreamweaverMX也提供了功能全面的編碼環(huán)境，其對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)的支持特別好。Dreamweaver插件式的程序設(shè)計(jì)使得其功能可以無限的擴(kuò)展。

Dreamweaver與Flash、Fireworks并稱為Macromedia公司的網(wǎng)頁(yè)制作三劍客。3.4.1DreamweaverMX的工作環(huán)境

圖3-22DreamweaverMX工作區(qū)設(shè)置對(duì)話框

3.4.1DreamweaverMX的工作環(huán)境

圖3-24DreamweaverMX的集成工作區(qū)

3.4.2創(chuàng)建網(wǎng)站站點(diǎn)

具體操作步驟請(qǐng)參見書中圖3-25——圖3-29

。3.4.3創(chuàng)建網(wǎng)站網(wǎng)頁(yè)

網(wǎng)站站點(diǎn)建立完畢，接下來就要制作網(wǎng)頁(yè)了。作為一個(gè)網(wǎng)站，首先出現(xiàn)的是首頁(yè)，首頁(yè)文件的缺省名為“index.htm”。具體操作步驟請(qǐng)參見書中圖3-30——圖3-323.4.4網(wǎng)頁(yè)文本的編輯

1．輸入文本

2．保存文檔

3．編輯文本3.4.5網(wǎng)頁(yè)圖像

要掌握好網(wǎng)頁(yè)中圖像的應(yīng)用，首先我們來了解一下跟圖像有關(guān)的內(nèi)容：

網(wǎng)頁(yè)安全色

理論上根據(jù)紅綠藍(lán)三種基色，加上每種基色、飽和度和透明度的變化，排列組合之后，我們可以得到16777216種（RGB）顏色，但在這一千六百萬種顏色3.4.5網(wǎng)頁(yè)圖像

中只有216種顏色能被瀏覽器識(shí)別，超出這個(gè)范圍，瀏覽器就會(huì)忽略或者顯示出現(xiàn)偏差。盡管現(xiàn)在瀏覽器性能越來越好，支持的顏色范圍也越來越廣，但最安全的顏色還是這216種，因此它們被成為網(wǎng)頁(yè)安全色。DreamweaverMX2004的調(diào)色板就是網(wǎng)頁(yè)安全色范疇之內(nèi)的顏色，使得網(wǎng)頁(yè)顏色的選取控制在安全色之內(nèi)。3.4.5網(wǎng)頁(yè)圖像

GIF圖像

GIF圖像是網(wǎng)頁(yè)中使用的最廣泛，最普遍的一種圖像格式，它是英文“可交換圖像格式”的縮寫。GIF圖像最多只能支持256種顏色，因此一般來說文件體積較小，適合在網(wǎng)絡(luò)上使用。

3.4.5網(wǎng)頁(yè)圖像

GIF格式的圖像可以被交替下載，當(dāng)瀏覽器下載時(shí)，首先只下載其中某些行，使瀏覽器顯示圖像的大致輪廓，然后逐步下載其他行，使圖像逐漸清晰起來。網(wǎng)頁(yè)中使用交錯(cuò)的GIF圖像能夠減少訪問者的等待時(shí)間。3.4.5網(wǎng)頁(yè)圖像

JPEG圖像

JPEG圖像是網(wǎng)頁(yè)中另一種被廣泛使用的圖像格式，它是“聯(lián)合圖像專家組文件格式”的英文縮寫，最多可以支持16.8兆種顏色，適合在需要表現(xiàn)細(xì)膩顏色細(xì)節(jié)的圖像上使用，因?yàn)樗С值念伾珨?shù)目較多，所以生成的文件體積較大。但由于JPG格式圖像具有較高的壓縮率，提高了瀏覽器下載速度，也被廣泛應(yīng)用在網(wǎng)頁(yè)中。3.4.5網(wǎng)頁(yè)圖像

1.插入圖像

2．設(shè)置網(wǎng)頁(yè)背景

3．圖像熱區(qū)

3.4.6超級(jí)鏈接

網(wǎng)絡(luò)中的一個(gè)個(gè)網(wǎng)頁(yè)是通過超級(jí)鏈接的形式關(guān)聯(lián)在一起的。超級(jí)鏈接是網(wǎng)頁(yè)中最重要也是最根本的元素之一，沒有它的存在，網(wǎng)頁(yè)之間失去了關(guān)聯(lián)，也就不成為網(wǎng)了。

3.4.6超級(jí)鏈接

1．文本超級(jí)鏈接2．電子郵件鏈接

3．文件下載鏈接

4.鼠標(biāo)經(jīng)過圖像鏈接

3.4.7導(dǎo)航條

導(dǎo)航條由一組按鈕或者圖像組成，由它們鏈接到各個(gè)分支頁(yè)面，起到導(dǎo)航作用。導(dǎo)航按鈕或者圖像一般包括四種狀態(tài)： 狀態(tài)圖像 鼠標(biāo)經(jīng)過圖像 按下圖像 按下時(shí)鼠標(biāo)經(jīng)過圖像3.4.8Flash文本和Flash按鈕

在DreamweaverMX中直接插入Flash文本即可制作具有動(dòng)畫效果的文本，而不用在Flash軟件中制作。具體操作方法請(qǐng)參見書中圖3-56——圖3-57

3.4.9插入插件

在網(wǎng)頁(yè)中插入插件可以增加網(wǎng)頁(yè)的功能，使網(wǎng)頁(yè)更加生動(dòng)活潑有吸引力。具體操作方法請(qǐng)參見書中圖3-58——圖3-61

3.4.10表格的使用

表格分為3個(gè)基本部分： 行：表格中的水平間隔； 列：表格中的垂直間隔； 單元格：行列相交的區(qū)域。1．建立表格2．在表格內(nèi)添加元素3．編輯表格3.4.11層

DreamweaverMX的層可以用來精確定位網(wǎng)頁(yè)元素；層可以通過時(shí)間軸來移動(dòng)或者變換位置，實(shí)現(xiàn)動(dòng)畫效果；層還轉(zhuǎn)換為表格，為不支持層的瀏覽器提供解決方法。

3.4.12CSS

CSS是CascadingStyleSheets（層疊樣式表單）的簡(jiǎn)稱。它允許在HTML文檔中加入樣式（如字體類型、顏色、大小等等）。對(duì)于設(shè)計(jì)者來說它是一個(gè)非常靈活的工具，不必再把繁雜的樣式定義編寫在文檔結(jié)構(gòu)中，可以將所有有關(guān)于文檔的樣式指定內(nèi)容全部脫離出來，在行內(nèi)定義、在標(biāo)題中定義，甚至作為外部樣式文件供HTML調(diào)用。CSS在當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)中已經(jīng)成為不可缺少的技術(shù)，例如現(xiàn)在最常見的去除鏈接文字的下劃線就是CSS最簡(jiǎn)單的應(yīng)用。

3.4.12CSS

在網(wǎng)頁(yè)中使用CSS有3種方式：外部文件方式：即用任何一種文本編輯工具將編輯好的

溫馨提示

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

評(píng)論

0/150

提交評(píng)論