電子商務網站的設計課件_第1頁
電子商務網站的設計課件_第2頁
電子商務網站的設計課件_第3頁
電子商務網站的設計課件_第4頁
電子商務網站的設計課件_第5頁
已閱讀5頁，還剩36頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

電子商務網站的設計

3.1網站設計概述

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

3.1.1網站設計的目標

網站設計一般須達到以下目標：（1）形象定位準確。（2）系統功能完善。（3）操作人性化。（4）安全性強。（5）運行效率高。（6）管理更新方式靈活。3.1.2網站設計的原則

（1）明確建站的目的和目標群體。

（2）總體設計方案主題鮮明。

（3）網站的版式設計要表達出和諧與美。

（4）合理運用色彩。

（5）網頁形式與內容相統一。

（6）利用多媒體功能。

（7）注意網站的層次性和一致性。

（8）內容經常更新，溝通渠道暢通。

（9）努力提高網站的性能。

（10）合理運用新技術。

3.1.3網站設計的特點

（1）結構清晰并且便于使用。

（2）導向清晰。

（3）快速的下載時間。

（4）有價值的內容。

（5）方便的反饋及訂購程序。

3.1.4網站設計的過程

網站設計過程如下：（1）確定網站設計總體思想，明確如何實現網站規劃中提出的目標。（2）確定網站的風格和特點，網頁的外觀及使用方面的特點。（3）確定網站提供的內容，對網站的內容進行分類。（4）編寫網站設計的計劃書，明確人員分配、協調及進度。

3.1.4網站設計的過程

（5）制作網頁。網頁制作是一個較漫長過程，必須分工合作。（6）在不同平臺的瀏覽器上測試網頁。（7）讓部分顧客或員工試用網站，并提出反饋意見，根據需要修改不合適的地方。（8）正式推出網站。3.2網站數據庫

隨著Internet技術與Web技術的發展，人們己不滿足于只在Web瀏覽器獲取靜態的信息，人們需要通過它發表意見、查詢數據或者進行網上購物，這些都需要實現Web與數據庫的互連。目前Web技術與數據庫管理系統（DBMS）相互融合領域的研究已成為熱點方向之一，很多公司紛紛推出各自的產品和中間件支持Web技術和DBMS的融合，將兩者取長補短，發揮各自的優勢，使用戶可以在Web瀏覽器上方便地檢索數據庫的內容。

3.2.1常用的網站數據庫

對于電子商務網站來說，常用的數據庫主要是SQLServer和Access。其中SQLServer主要用于大中型電子商務網站（數據百萬規模級以上），Access主要用于小型電子商務網站。3.2.2網站數據庫訪問技術

1．ODBC數據庫訪問技術

圖3-1ODBC的工作原理

3.2.2網站數據庫訪問技術

2．OLEDB數據庫訪問技術

3．ADO數據庫訪問技術

圖3-2ADO技術的體系結構

3.3網站開發技術簡介

目前，網站的網頁主要有靜態網頁和動態網頁之分，因此相應的網站開發技術也分為靜態網頁開發技術和動態網頁開發技術。 靜態網頁開發技術的核心是HTML（HyperTextMarkupLanguage，超文本標記語言） 動態網頁的開發主要采用ASP(ActiveServerPages，活動服務器頁面)，JSP(JavaServerPages，Java服務器頁面)和PHP(HypertextPreprocessor，超文本預處理器)等技術。

3.3.1HTML語言

1．HTML語言的基本結構 主要的標簽

<html>……</html> <head>……</head> <title>……</title> <body>……</body>3.3.1HTML語言

2．HTML語言的基本單位 （1）長度單位 （2）顏色單位3.head部分的基本使用方法 （1）title

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

3.3.1HTML語言

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

（2）background

（3）text

link

alink

vlinkleftmargintopmargin

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

table元素

thead、tr、th、td元素3.3.1HTML語言

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

ASP的全稱是ActiveServerPages，即“活動服務器頁面”。1．ASP的運行環境2．ASP的的執行過程

圖3-15ASP的的執行過程

3.3.2ASP簡介

3．ASP的語法簡介

ASP并不是一個script語言，而是提供一個可以集成script語言(VBscript或Jscript)到HTML主頁的環境。4．ASP的內置對象

ASP提供五個內置的“對象”(object)，可以直接調用：

Request: 取得用戶信息。

Response: 傳送信息給用戶。

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

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

3.4使用DreamWeaverMX編輯網頁

MacromediaDreamweaverMX是美國Macromedia公司出品的一款“所見即所得”的網頁編輯工具，是一款專業的HTML編輯器，用于對Web站點、Web頁和Web應用程序進行設計、編碼和開發。

DreamweaverMX也提供了功能全面的編碼環境，其對于動態網頁的支持特別好。Dreamweaver插件式的程序設計使得其功能可以無限的擴展。

Dreamweaver與Flash、Fireworks并稱為Macromedia公司的網頁制作三劍客。3.4.1DreamweaverMX的工作環境

圖3-22DreamweaverMX工作區設置對話框

3.4.1DreamweaverMX的工作環境

圖3-24DreamweaverMX的集成工作區

3.4.2創建網站站點

具體操作步驟請參見書中圖3-25——圖3-29

。3.4.3創建網站網頁

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

1．輸入文本

2．保存文檔

3．編輯文本3.4.5網頁圖像

要掌握好網頁中圖像的應用，首先我們來了解一下跟圖像有關的內容：

網頁安全色

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

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

GIF圖像

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

3.4.5網頁圖像

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

JPEG圖像

JPEG圖像是網頁中另一種被廣泛使用的圖像格式，它是“聯合圖像專家組文件格式”的英文縮寫，最多可以支持16.8兆種顏色，適合在需要表現細膩顏色細節的圖像上使用，因為它支持的顏色數目較多，所以生成的文件體積較大。但由于JPG格式圖像具有較高的壓縮率，提高了瀏覽器下載速度，也被廣泛應用在網頁中。3.4.5網頁圖像

1.插入圖像

2．設置網頁背景

3．圖像熱區

3.4.6超級鏈接

網絡中的一個個網頁是通過超級鏈接的形式關聯在一起的。超級鏈接是網頁中最重要也是最根本的元素之一，沒有它的存在，網頁之間失去了關聯，也就不成為網了。

3.4.6超級鏈接

1．文本超級鏈接2．電子郵件鏈接

3．文件下載鏈接

4.鼠標經過圖像鏈接

3.4.7導航條

導航條由一組按鈕或者圖像組成，由它們鏈接到各個分支頁面，起到導航作用。導航按鈕或者圖像一般包括四種狀態： 狀態圖像 鼠標經過圖像 按下圖像 按下時鼠標經過圖像3.4.8Flash文本和Flash按鈕

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

3.4.9插入插件

在網頁中插入插件可以增加網頁的功能，使網頁更加生動活潑有吸引力。具體操作方法請參見書中圖3-58——圖3-61

3.4.10表格的使用

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

DreamweaverMX的層可以用來精確定位網頁元素；層可以通過時間軸來移動或者變換位置，實現動畫效果；層還轉換為表格，為不支持層的瀏覽器提供解決方法。

3.4.12CSS

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

3.4.12CSS

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

溫馨提示

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

評論

0/150

提交評論