電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新_第1頁
電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新_第2頁
電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新_第3頁
電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新_第4頁
電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新_第5頁
已閱讀5頁，還剩94頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第4章設(shè)計網(wǎng)站的靜態(tài)網(wǎng)頁

1/6/20251第4章設(shè)計網(wǎng)站的靜態(tài)網(wǎng)頁1/6/202521/6/20253HTML語言FrontPage2002DreamweaverMX/20041/6/202541.HTML語言HTML是HyperTextMarkupLanguage的縮寫，稱為超文本標記語言，是一種用于編寫超文本文件的語言。用HTML編寫的超文本文件，通常以.htm或.html為文件的擴展名。HTML是標記的集合，這些標記由“<>”括起來，并且標記一般成對出現(xiàn)，例如<head>是一個開始標記，</head>就構(gòu)成一個結(jié)束標記，在開始標記和結(jié)束標記之間的就是頁面的內(nèi)容。

1/6/20255HTML文件的基本結(jié)構(gòu)如下：<html><head><!-HTML文件頭-!></head><body><!-HTML文件正文-!></body></html>1/6/20256

HTML文件本身是純文本文件，可以用Windows自帶的“記事本”直接編寫，以下是一個HTML編寫的例子：Example.htm<html><head><title>顯示圖片</title></head><body><fontsize=3color=blueface=宋體>網(wǎng)站徽標</font><p><imgsrc="logo.gif"alt="徽標"width=50height=50></body></html>1/6/20257Example.htm運行后顯示效果1/6/202582.FrontPage2002直接使用HTML語言編寫網(wǎng)頁，代碼量太大，而且調(diào)試困難，所以出現(xiàn)了功能強大的網(wǎng)頁編輯制作工具FrontPage、Dreamweaver、HomeSite等。這些網(wǎng)頁編輯工具的出現(xiàn)，使網(wǎng)頁制作變得簡單。FrontPage2002是Microsoft公司繼FrontPage2000之后推出的一個全新的網(wǎng)頁設(shè)計工具，可以通過“所見即所得”的方式設(shè)計和制作網(wǎng)頁，從而使網(wǎng)頁制作變得簡單易行。所以即使你不懂HTML語言，使用FrontPage2002就可以創(chuàng)建一個看起來很不錯的網(wǎng)站。1/6/20259FrontPage2002的功能主要包括以下幾個方面：

站點管理編輯HTML發(fā)布網(wǎng)頁數(shù)據(jù)庫集成1/6/202510FrontPage的“普通”視圖模式

1/6/202511FrontPage的“HTML”視圖模式

1/6/2025123.DreamweaverMX/2004DreamweaverMX與FrontPage2002相似，也是一個可以實現(xiàn)“所見即所得”的網(wǎng)頁設(shè)計工具，它是Macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的網(wǎng)頁編輯器，是專門為網(wǎng)頁設(shè)計師量身定制的網(wǎng)頁開發(fā)工具。由網(wǎng)頁設(shè)計工具Dreamweaver、矢量動畫制作工具Flash和處理網(wǎng)頁圖像工具Fireworks，共同組成的網(wǎng)頁開發(fā)工具包，被Macromedia公司稱為DreamTeam(夢之隊)，也就是網(wǎng)站設(shè)計者通常所說的“網(wǎng)頁設(shè)計三劍客”。

1/6/202513DreamweaverMX的功能主要包括以下幾個方面：站點管理與其他網(wǎng)頁開發(fā)工具高效率的配合代碼提示功能ColdfusionMX支持支持最新的網(wǎng)頁標準1/6/202514JavaAppletJavaScript和VBScriptCSSFlash1/6/2025151.JavaAppletJava的程序分為兩種類型：JavaApplication和JavaApplet，其中JavaApplet應(yīng)用于網(wǎng)頁中，但它不是可以獨立運行的程序，它編譯后生成的字節(jié)碼文件必須嵌入到用HTML語言編寫的網(wǎng)頁文件中，并由客戶端的Web瀏覽器內(nèi)部所包含的Java解釋器來解釋運行。JavaApplet作為一種網(wǎng)頁開發(fā)語言，由于具有跨平臺和安全等特性，曾一度被認為是Internet上最適合的開發(fā)語言，但事實上，由于Java程序的編譯運行速度慢，資源消耗大等缺陷，使Java的應(yīng)用在Internet上并未真正流行起來。1/6/2025162.JavaScript和VBScriptJavaScript是Netscape公司的LiveScript語言和Sun公司的Java語言相結(jié)合的產(chǎn)物，但JavaScript不是Java語言，兩者最主要的區(qū)別是JavaScript是一種腳本語言，可以由瀏覽器直接解釋執(zhí)行，而Java需要先編譯成字節(jié)碼文件，再由Web瀏覽器包含的Java解釋器進行解釋執(zhí)行，所以JavaScript的運行速度比JavaApplet快得多。1/6/202517VBScript也是一種腳本語言，與JavaScript非常相似，能夠?qū)崿F(xiàn)的網(wǎng)頁功能也類似。VBScript的優(yōu)點是對初學(xué)者來說，入門容易，易學(xué)易用。缺點是VBScript編寫的腳本程序只能用于微軟的IIS服務(wù)器端，客戶端由IE瀏覽器解釋執(zhí)行。1/6/202518以下是一個JavaScript編寫的程序例子：javascript.htm<html><head><title>顯示系統(tǒng)時間</title></head><SCRIPTlanguage=JavaScript>varmydate=new Date();vartoday=mydate.getDate();vartomonth=mydate.getMonth();vartoyear=mydate.getYear();</SCRIPT><body><SCRIPTlanguage=javascript>document.write(toyear+"年"+(tomonth+1)+"月"+today+"日");</SCRIPT></body></html>1/6/202519javascript.htm運行后顯示效果：1/6/2025203.CSS1/6/202521一個CSS例子，css.htm<HTML><HEAD><TITLE>CSS樣式例子</TITLE><STYLETYPE="text/css">H1{FONT-SIZE:13pt;COLOR:blue}A:link{COLOR:#0000ff;TEXT-DECORATION:none}A:visited{COLOR:#0000ff;TEXT-DECORATION:none}A:active{COLOR:#ff00ff;TEXT-DECORATION:underline}A:hover{COLOR:#ff0000;TEXT-DECORATION:underline}</STYLE></HEAD><BODY><H1>實驗</H1><Ahref="javascript.htm">鏈接</A></BODY></HTML>1/6/202522css.htm文件運行后顯示效果

1/6/2025234.FlashFlash是Macromedia公司專門為網(wǎng)絡(luò)開發(fā)的一個交互式矢量動畫設(shè)計軟件，網(wǎng)站設(shè)計者可以使用Flash輕松地為網(wǎng)站設(shè)計各種動態(tài)Logo、動畫、導(dǎo)航條等,還可以加入背景音樂，它出色的多媒體功能和強大的交互功能，使其成為網(wǎng)站設(shè)計者制作動畫的首選軟件。1/6/202524CGIASP與ASP.NETPHP1/6/2025251.CGI1/6/2025262.ASP與ASP.NET1/6/2025273.PHP1/6/2025284.2信息流程設(shè)計4.2.1信息流程總體設(shè)計4.2.2花店網(wǎng)站功能模塊設(shè)計4.2.3花店網(wǎng)站信息流程設(shè)計1/6/2025294.2.1信息流程總體設(shè)計網(wǎng)站信息設(shè)計流程信息流程設(shè)計要注意的問題1/6/2025301.網(wǎng)站信息設(shè)計流程確定網(wǎng)站的目標和定位收集與該網(wǎng)站有關(guān)的資料網(wǎng)站功能模塊設(shè)計網(wǎng)站草案設(shè)計網(wǎng)頁制作網(wǎng)站測試網(wǎng)站發(fā)布1/6/2025312.信息流程設(shè)計要注意的問題主題突出速度優(yōu)先信息要便于用戶瀏覽設(shè)立交流平臺1/6/2025324.2.2花店網(wǎng)站功能模塊設(shè)計1/6/202533網(wǎng)上花店的主要功能模塊包括：客戶管理功能商品管理功能下定單及定單管理功能留言板管理功能1/6/2025344.2.3花店網(wǎng)站信息流程設(shè)計網(wǎng)上花店作為一個電子商務(wù)網(wǎng)站，屬于BtoC的電子商務(wù)模式。從網(wǎng)站的功能模塊設(shè)計中可以看到，該網(wǎng)站可以實現(xiàn)四個方面的完整功能。這些功能按照信息流程設(shè)計，又可分為花店網(wǎng)站的前臺購物流程和后臺管理流程。1/6/202535花店網(wǎng)站的前臺購物流程:選擇付款方式會員注冊會員登錄商品查詢選購商品（可以選購多種商品）下訂單（放入購物車）收銀臺（結(jié)賬）購物完成定單查詢確定送貨方式和收貨人地址1/6/202536花店網(wǎng)站的后臺管理流程：

管理員登錄商品類別管理商品管理定單查詢針對各模塊不同的表實現(xiàn)添加記錄、修改記錄、刪除記錄、查詢顯示記錄等功能各1/6/2025374.3首頁設(shè)計4.3.1首頁的版面設(shè)計4.3.2首頁設(shè)計要注意的問題1/6/2025384.3.1首頁的版面設(shè)計“國”字型“T”字型封面型1/6/2025391.“國”字型1/6/2025402.“T”字型1/6/2025413.封面型1/6/2025424.3.2首頁設(shè)計要注意的問題首頁明確，主題突出導(dǎo)航欄設(shè)計形式服從功能設(shè)立最近更新或網(wǎng)站指南欄目快速下載1/6/2025434.4其他頁面的設(shè)計4.4.1客戶管理4.4.2商品管理4.4.3定單管理4.4.4留言板管理1/6/2025444.4.1客戶管理在花店網(wǎng)站的客戶管理模塊中，包括會員注冊、會員登錄、會員信息修改等功能，通過客戶信息的收集，可以進行客戶資料分析，了解客戶的購物傾向，所售商品適合的消費群體，以及在此基礎(chǔ)上進一步進行市場預(yù)測，從而把握市場走向。1/6/202545會員注冊界面1/6/202546會員登錄界面1/6/202547會員信息修改界面1/6/2025484.4.2商品管理商品管理是電子商務(wù)網(wǎng)站最重要的一個環(huán)節(jié)，商品頁面一般采用信息分層、逐層細化的方法展示公司的產(chǎn)品。在花店網(wǎng)站的商品管理模塊中，包括商品顯示、管理員登錄、商品類別管理、商品管理、商品查詢等功能。1/6/202549商品顯示界面1/6/202550管理員登錄界面1/6/202551商品類別管理界面1/6/202552商品管理界面1/6/202553商品查詢界面1/6/2025544.4.3定單管理定單管理也是電子商務(wù)網(wǎng)站一個非常重要的環(huán)節(jié)，用戶在網(wǎng)站上選購好商品，放入購物車，并到收銀臺結(jié)賬后，會形成定單。一方面發(fā)貨方會根據(jù)用戶定單及時發(fā)貨，同時網(wǎng)站的后臺管理員也可以再次確認定單，核實是否正確。另一方面，用戶訂貨后如果忘記所定貨物，也可以在網(wǎng)站上通過定單查詢，確認定單上的商品。1/6/202555用戶登錄后選購商品在花店網(wǎng)站首頁上先進行會員登錄，如：用戶名為“a”，密碼為“a”，（如果未注冊的用戶購物前需要先進行會員注冊），進入購物界面，選購一件商品。1/6/202556購物車界面1/6/202557收銀臺頁面

1/6/202558收銀結(jié)賬界面1/6/202559形成定單1/6/202560定單查詢1/6/2025614.4.4留言板管理留言板主要為電子商務(wù)網(wǎng)站的用戶提供了一個交互的平臺，在花店網(wǎng)站的留言板管理模塊中，包括發(fā)新貼子、查看貼子列表、回復(fù)留言等功能。1/6/202562發(fā)新貼子界面1/6/202563查看貼子列表界面1/6/202564回復(fù)留言界面1/6/2025654.5頁面的更新一個網(wǎng)站要有影響力，最重要的就是要有新的內(nèi)容。網(wǎng)頁的內(nèi)容應(yīng)該是動態(tài)的，根據(jù)實際情況隨時進行修改和更新，以緊緊抓住瀏覽者。1/6/202566網(wǎng)站更新應(yīng)注意以下幾點：網(wǎng)站內(nèi)容或服務(wù)時常更新搜集用戶的反饋意見注意網(wǎng)站的升級時常檢查相關(guān)鏈接1/6/2025674.6花店網(wǎng)站首頁的制作4.6.1靜態(tài)網(wǎng)頁的制作4.6.2交互式網(wǎng)頁的制作1/6/2025684.6.1靜態(tài)網(wǎng)頁的制作徽標的設(shè)計頁頭的制作樣式的應(yīng)用1/6/2025691.徽標的設(shè)計一個好的網(wǎng)站也需要整體的形象包裝和設(shè)計，有創(chuàng)意的CI設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在花店網(wǎng)站首頁頁面的左上角是網(wǎng)站的徽標，如下圖所示：1/6/2025702.頁頭的制作為了保持頁面風(fēng)格的一致，也便于用戶方便地使用導(dǎo)航欄，頁頭需要在網(wǎng)站的每一頁中都出現(xiàn)，如下圖所示：1/6/202571如果在網(wǎng)站首頁中要顯示頁頭，需要在首頁中調(diào)用top.inc文件。方法是在Dreamweaver中打開網(wǎng)站首頁文件index.aspx，在<BODY>的程序體內(nèi)，嵌入以下語句：<!--#includevirtual="./top.inc"-->1/6/2025723.樣式的應(yīng)用花店網(wǎng)站的首頁中還應(yīng)用了在提到的CSS樣式表，在網(wǎng)頁文件夾下的style文件夾里有一個style.css文件，就是樣式表文件，部分代碼如下：.topinc{ font-size:12px; color:#FFFFFF;}1/6/2025734.6.2交互式網(wǎng)頁的制作交互式網(wǎng)頁中網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)交互一般是和數(shù)據(jù)庫系統(tǒng)聯(lián)系在一起，通過特定的編程語言和外部應(yīng)用程序來訪問企業(yè)信息系統(tǒng)中已經(jīng)存在

溫馨提示

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

評論

0/150

提交評論