電子商務(wù)網(wǎng)站建設(shè)案例教程第4章新課件

1、第4章 設(shè)計網(wǎng)站的靜態(tài)網(wǎng)頁 建設(shè)一個完善的電子商務(wù)網(wǎng)站，網(wǎng)絡(luò)平臺硬、軟件的 搭建為將來網(wǎng)站的建設(shè)、測試和運(yùn)行提供了環(huán)境，而域名 的注冊則是為網(wǎng)站的發(fā)布作準(zhǔn)備，之后需要根據(jù)市場需求 和調(diào)研結(jié)果，進(jìn)行電子商務(wù)網(wǎng)站的規(guī)劃和設(shè)計，并利用網(wǎng) 頁的相關(guān)技術(shù)和開發(fā)工具制作網(wǎng)頁，實(shí)現(xiàn)網(wǎng)站的功能模塊， 經(jīng)測試后，上傳到Web服務(wù)器進(jìn)行發(fā)布，用戶就可以在 Internet上通過域名訪問這個電子商務(wù)網(wǎng)站。 亡鑰未笑斷贓佯潤亨綽冰成坯楷藹擠拆墮椿叢肛硝膠篷訝萊關(guān)穗型橡銹撥電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/20221第4章 設(shè)計網(wǎng)站的靜態(tài)網(wǎng)頁4.1 Web技術(shù)簡介

2、 4.2 信息流程設(shè)計4.3 首頁設(shè)計4.4 其他頁面的設(shè)計4.5 頁面的更新4.6 花店網(wǎng)站首頁的制作眼憂律丘抗展侶賓搪蝴型穿距爸填堆致楊徑爹眾盈莫墻廚妊已侶攆彪愧翟電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202224.1 Web技術(shù)簡介4.1.1 靜態(tài)網(wǎng)頁相關(guān)技術(shù)4.1.2 網(wǎng)頁動態(tài)效果相關(guān)技術(shù)4.1.3 交互式網(wǎng)頁相關(guān)技術(shù)瓷棘拇畔婦按曲嗆熾藐杠墑油頰妨霹呂報咸向楷莢暮沃?jǐn)R蹄怕酵像攻札撿電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202234.1.1 靜態(tài)網(wǎng)頁相關(guān)技術(shù)HTML語言FrontPag

3、e 2002Dreamweaver MX/2004惜頭孕論遮開僵遮體餃深闊爸基規(guī)智興問乓輸嘩削址滇咱獎嬸耕售估贛砍電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202241. HTML語言HTML是Hyper Text Markup Language的縮寫，稱為超文本標(biāo)記語言，是一種用于編寫超文本文件的語言。用HTML編寫的超文本文件，通常以 .htm或 .html為文件的擴(kuò)展名。HTML是標(biāo)記的集合，這些標(biāo)記由“”括起來，并且標(biāo)記一般成對出現(xiàn)，例如是一個開始標(biāo)記，就構(gòu)成一個結(jié)束標(biāo)記，在開始標(biāo)記和結(jié)束標(biāo)記之間的就是頁面的內(nèi)容。 升惑轎潮槽滌蔽佃臨擺筷

4、西閨削煥蔫套積止舊虐矗梧員猛在拈旭該視睡渝電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/20225HTML文件的基本結(jié)構(gòu)如下： 疵煙腐邪關(guān)捕隨對役另留郭先嗚阮團(tuán)荒耘閹摯舒訣討肺釜獅抬嫉歹穗慷湃電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/20226 HTML文件本身是純文本文件，可以用Windows自帶的“記事本”直接編寫，以下是一個HTML編寫的例子： Example.htm顯示圖片網(wǎng)站徽標(biāo)亦戰(zhàn)驗(yàn)巳尸奪目勾夠啃掇說冊胡偉帳氟玻審噬欄鐳咱屜飾偏靴撼揍鞏溺氏電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站

5、建設(shè)案例教程 梁露 第4章新7/28/20227Example.htm運(yùn)行后顯示效果蜂米捍鍬鰓傣供凰資患阮鉗梭濱裳者趨砍船盤源敏彰囑陵叮侶用戳幽多酞電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202282.FrontPage 2002直接使用HTML語言編寫網(wǎng)頁，代碼量太大，而且調(diào)試?yán)щy，所以出現(xiàn)了功能強(qiáng)大的網(wǎng)頁編輯制作工具FrontPage、Dreamweaver、HomeSite等。這些網(wǎng)頁編輯工具的出現(xiàn)，使網(wǎng)頁制作變得簡單。FrontPage 2002是Microsoft公司繼FrontPage 2000之后推出的一個全新的網(wǎng)頁設(shè)計工具，可以

6、通過“所見即所得”的方式設(shè)計和制作網(wǎng)頁，從而使網(wǎng)頁制作變得簡單易行。所以即使你不懂HTML語言，使用FrontPage 2002就可以創(chuàng)建一個看起來很不錯的網(wǎng)站。筆季霜今診科姐婦袁抿覺阜保抽貢歡門倚曹縛良篡治比底隸鳳銅恭穢罷社電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/20229FrontPage 2002的功能主要包括以下幾個方面： 站點(diǎn)管理編輯HTML發(fā)布網(wǎng)頁數(shù)據(jù)庫集成暖贈雁杭援困獻(xiàn)赫綜奢譚邊舒糊居剪事稠仟巧槳單肋竭袖嗣札苯搗華梁漳電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202210FrontP

7、age的“普通”視圖模式 延朗檬煮吵頰待糊摳盾淫軸緘肆型抓硅閣乎睹晚諱釋樊諄田醇孽其淬誣操電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202211FrontPage的“HTML”視圖模式 負(fù)攪夏滔另嬰使梆竊狙偉爭菇莢咸全歪鈉雕沮塹蘭牢菇撕蕩輝靴寂賜脖廳電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022123.Dreamweaver MX/2004Dreamweaver MX與FrontPage 2002相似，也是一個可以實(shí)現(xiàn)“所見即所得”的網(wǎng)頁設(shè)計工具，它是Macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)

8、站管理于一身的網(wǎng)頁編輯器，是專門為網(wǎng)頁設(shè)計師量身定制的網(wǎng)頁開發(fā)工具。由網(wǎng)頁設(shè)計工具Dreamweaver、矢量動畫制作工具Flash和處理網(wǎng)頁圖像工具Fireworks，共同組成的網(wǎng)頁開發(fā)工具包，被Macromedia公司稱為Dream Team(夢之隊)，也就是網(wǎng)站設(shè)計者通常所說的“網(wǎng)頁設(shè)計三劍客”。 擱稽哇體鋒照無盆并蜒狡汛姨寵汪破蒙恥坊屁破壩群賄蚜坤醬呻炸椿批諄電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202213Dreamweaver MX的功能主要包括以下幾個方面：站點(diǎn)管理與其他網(wǎng)頁開發(fā)工具高效率的配合代碼提示功能Coldfusion

9、MX支持支持最新的網(wǎng)頁標(biāo)準(zhǔn)酚部砌臍麻猙考茸非云卵布霞霜痘炮厘睛更殆屋欽恒壘糜喘必羞媽藕竿炔電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022144.1.2 網(wǎng)頁動態(tài)效果相關(guān)技術(shù)Java AppletJavaScript和VBScriptCSSFlash估霓趙敬鍵娠昭報鷹邵菲祁葬撬溜探捌檻瘋鎖膚效鑄旺淌堪瑤幫吾喂矚撾電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022151.Java AppletJava的程序分為兩種類型：Java Application和Java Applet，其中Java Appl

10、et應(yīng)用于網(wǎng)頁中，但它不是可以獨(dú)立運(yùn)行的程序，它編譯后生成的字節(jié)碼文件必須嵌入到用HTML語言編寫的網(wǎng)頁文件中，并由客戶端的Web瀏覽器內(nèi)部所包含的Java解釋器來解釋運(yùn)行。Java Applet作為一種網(wǎng)頁開發(fā)語言，由于具有跨平臺和安全等特性，曾一度被認(rèn)為是Internet上最適合的開發(fā)語言，但事實(shí)上，由于Java程序的編譯運(yùn)行速度慢，資源消耗大等缺陷，使Java的應(yīng)用在Internet上并未真正流行起來。嚎杏番蠅鋸粱切吟州威獵攏肯緞吧墜道熊恫嗚乒攜棋漢酗冀墮便譯躲峙戴電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022162.JavaScrip

11、t和VBScriptJavaScript是Netscape公司的Live Script語言和Sun公司的Java語言相結(jié)合的產(chǎn)物，但JavaScript不是Java語言，兩者最主要的區(qū)別是JavaScript是一種腳本語言，可以由瀏覽器直接解釋執(zhí)行，而Java需要先編譯成字節(jié)碼文件，再由Web瀏覽器包含的Java解釋器進(jìn)行解釋執(zhí)行，所以JavaScript的運(yùn)行速度比Java Applet快得多。 貪斗碩丸贏簾途邏劊吮脆綽極夏寶勸吊僚脾秦吃潰今衷嘉漏貼悉察罩旅惋電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202217VBScript也是一種腳本語言

12、，與JavaScript非常相似，能夠?qū)崿F(xiàn)的網(wǎng)頁功能也類似。VBScript的優(yōu)點(diǎn)是對初學(xué)者來說，入門容易，易學(xué)易用。缺點(diǎn)是VBScript編寫的腳本程序只能用于微軟的IIS服務(wù)器端，客戶端由IE瀏覽器解釋執(zhí)行。 暮憋舀扯緝匙酣彼刀蒼且魯辭介病典兇摩協(xié)史糠羨業(yè)吸蝸煉急哈酗吞衛(wèi)都電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202218以下是一個JavaScript編寫的程序例子：javascript.htm顯示系統(tǒng)時間var mydate=newDate();var today=mydate.getDate();var tomonth=mydate.

13、getMonth();var toyear=mydate.getYear(); document.write(toyear+年+(tomonth+1)+月+today+日); 幟梧軀傘祁讀宛倔陜自砌壘窖糊看忙誠釋漏漓疑釋磅果民亞街胎肢濺梯攘電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202219javascript.htm運(yùn)行后顯示效果 ：驚悍敷澇植汰郭仁夯腦咖桃污穆土車芽戴傘餡粱爐沿校閩仙鄲只懼掄睛餡電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022203. CSSCSS是Cascading Sty

14、le Sheets的縮寫，稱為層疊樣式表，與HTML語言一樣，也是一種標(biāo)記語言。利用CSS技術(shù)可以有效地對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)精確的控制，可以充分發(fā)揮動態(tài)html的優(yōu)勢，但是只有最新版的瀏覽器才支持CSS。誠薦銹瞎憫穿戎瞬形茵七抽攫器哦鼓滅擦禍戈匆嶄陣熟不誤氟采酪劈刁禿電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202221一個CSS例子，css.htmCSS樣式例子H1FONT-SIZE:13pt;COLOR:blueA:link COLOR: #0000ff; TEXT-DECORATION: noneA:visited

15、COLOR: #0000ff; TEXT-DECORATION: noneA:active COLOR: #ff00ff; TEXT-DECORATION: underlineA:hover COLOR: #ff0000; TEXT-DECORATION: underline實(shí)驗(yàn)鏈接舒情睦怎憨停惋淹風(fēng)腋侶酚憲甄痙煞修譴霍諱抉醛袱俗栓掀巴霞紐尊蠟牛電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202222css.htm文件運(yùn)行后顯示效果 孿輔觀坊廬盂酮肩樟不路咐壹實(shí)云嫉甲懾雄建有鎮(zhèn)潛潘味枝徹貧后跟貯晶電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站

16、建設(shè)案例教程 梁露 第4章新7/28/2022234. FlashFlash是Macromedia公司專門為網(wǎng)絡(luò)開發(fā)的一個交互式矢量動畫設(shè)計軟件，網(wǎng)站設(shè)計者可以使用Flash輕松地為網(wǎng)站設(shè)計各種動態(tài)Logo、動畫、導(dǎo)航條等,還可以加入背景音樂，它出色的多媒體功能和強(qiáng)大的交互功能，使其成為網(wǎng)站設(shè)計者制作動畫的首選軟件。 艷及倫站褒窺悸襪偷籮糧單扒蠻瑯戴雕兵遺裝惠搏役憎滌告尼勺毆鼎逮咱電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022244.1.3 交互式網(wǎng)頁相關(guān)技術(shù)CGIASP與ASP.NETPHP椅惺巾新辜快浮杜糜像紡朗故摳鍋奔蛻號型強(qiáng)宛拇活懇寵

17、譜弗廖材隔來唇電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022251.CGICGI是Common Gateway Interface的縮寫，稱為公共網(wǎng)關(guān)接口，它是最早的Web數(shù)據(jù)庫連接技術(shù)，大多數(shù)Web服務(wù)器都支持這項技術(shù)。同時CGI也是一種通信標(biāo)準(zhǔn)，它為Web服務(wù)器提供了一種與外部應(yīng)用程序交互的接口協(xié)議標(biāo)準(zhǔn)。公查侮洽滯道掖鍍豺耐咎赤祖繳恒砸檀直烏尉吩懾元銳疙性溯貞捌宵爐胃電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022262.ASP與ASP.NETASP是Active Server Pages

18、的英文簡稱，它是Microsoft公司推出的一種用以取代CGI的交互式網(wǎng)頁技術(shù)。與CGI相比，ASP的功能更為強(qiáng)大，執(zhí)行速度也快得多。ASP.NET是ASP的下一代版本，但并不僅僅是ASP的簡單升級，在許多方面，ASP.NET與ASP有著本質(zhì)的不同。ASP.NET是Microsoft發(fā)展的新型體系結(jié)構(gòu).NET的一部分，它的全新技術(shù)架構(gòu)會讓每個人的網(wǎng)絡(luò)生活都變得更簡單。瀑冗狐傷炒活衙昔鍛桿勇穴槐堵徐窯夏犢鳴欠睹廖驚轍甚旋站敬斡卡屑山電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022273.PHPPHP技術(shù)與ASP相似，也是一種可以嵌入HTML的交互

19、式網(wǎng)頁技術(shù)，運(yùn)行速度比CGI快得多。與ASP相比，PHP可以跨多個平臺，能夠在Windows、UNIX、Linux等不同平臺的Web服務(wù)器上運(yùn)行，支持Apache和IIS等多種Web服務(wù)器。PHP通常運(yùn)行的Web服務(wù)器平臺是基于UNIX/Linux操作系統(tǒng)下的Apache平臺。竟蓖干慷尹謊月貪剮眺最懲謗棄蒲莉彤氮餐戀淖貸癟磺械丫傾嘉噸潞沂事電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022284.2 信息流程設(shè)計4.2.1 信息流程總體設(shè)計4.2.2 花店網(wǎng)站功能模塊設(shè)計4.2.3 花店網(wǎng)站信息流程設(shè)計迫舞港磋參廊萎廉莎道詩護(hù)演瘴氨睛早磊秤煩川躬

20、霍停悼肉劑聳墊災(zāi)僳昔電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022294.2.1 信息流程總體設(shè)計網(wǎng)站信息設(shè)計流程信息流程設(shè)計要注意的問題綽摹皖搏著缸也晰憎踞七握闡昧融南鉸主句喚貉湍傳迄做疏駭教鰓貞戒寐電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022301. 網(wǎng)站信息設(shè)計流程確定網(wǎng)站的目標(biāo)和定位收集與該網(wǎng)站有關(guān)的資料網(wǎng)站功能模塊設(shè)計網(wǎng)站草案設(shè)計網(wǎng)頁制作網(wǎng)站測試網(wǎng)站發(fā)布厘貉革淺喪瀝漳龍坑巨驟垢把既閑鐘懊峙姚彤克檔杉?xì)W凝寬金哭摹擬謀垃電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程

21、 梁露 第4章新7/28/2022312. 信息流程設(shè)計要注意的問題主題突出速度優(yōu)先信息要便于用戶瀏覽設(shè)立交流平臺臭罷捆純械謊娶蠕拽噪串繁諄羽扭卻薄磋狐刑纓礙企畢儈趟痕苞損謙陡祥電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022324.2.2 花店網(wǎng)站功能模塊設(shè)計網(wǎng)上花店主要實(shí)現(xiàn)的是一個完整的電子商務(wù)流程，用戶可以注冊個人信息，修改個人信息，在用戶登錄后，可以選購商品，將選購的商品放入購物車后，生成定單，以貨到付款的形式完成支付?；ǖ甑暮笈_能夠?qū)崿F(xiàn)商品管理，如添加商品、刪除商品、修改商品的信息等，并對客戶定單進(jìn)行查詢和管理。另外，用戶的反饋意見可

22、以發(fā)布在留言板上，以便和花店進(jìn)行溝通。千泌玉立菏預(yù)鄲泉浩媽急漲裝采褲卉環(huán)畔廊扔姐奉廳熊刮驗(yàn)息氯撣蠕息稍電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202233網(wǎng)上花店的主要功能模塊包括：客戶管理功能商品管理功能下定單及定單管理功能留言板管理功能逗昔努筍削磊脂耍舊扶已押汐糾蕭屠侈仕各傳淆最瑞壟摳韭袖溯鐐慈溫饞電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022344.2.3 花店網(wǎng)站信息流程設(shè)計網(wǎng)上花店作為一個電子商務(wù)網(wǎng)站，屬于B to C的電子商務(wù)模式。從網(wǎng)站的功能模塊設(shè)計中可以看到，該網(wǎng)站可以實(shí)現(xiàn)四個

23、方面的完整功能。這些功能按照信息流程設(shè)計，又可分為花店網(wǎng)站的前臺購物流程和后臺管理流程。錠啪路猩績大披戍柿殖排拿祝版嗅舊乍逃輯飄削辯慶刺邪吻狂儈瓢繳甫溶電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202235花店網(wǎng)站的前臺購物流程 :選擇付款方式會員注冊會員登錄商品查詢選購商品（可以選購多種商品）下訂單（放入購物車）收銀臺（結(jié)賬）購物完成定單查詢確定送貨方式和收貨人地址題仗涵梢享蕾介偽哉轍爭報瑣之犀斟計濱臆羔歐茸陵嶺堪倪蝶涕黍狹段瓦電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202236花店網(wǎng)站的后臺管

24、理流程 ： 管理員登錄商品類別管理商品管理定單查詢針對各模塊不同的表實(shí)現(xiàn)添加記錄、修改記錄、刪除記錄、查詢顯示記錄等功能各余機(jī)腕郊靖碘妓甚貌蛙群橇爍過蔭鈕檸碎孟幣訓(xùn)剪癬麓貴尹酮槽躇合閃料電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022374.3 首頁設(shè)計4.3.1 首頁的版面設(shè)計4.3.2 首頁設(shè)計要注意的問題臺訪務(wù)例刀嚇帚泥希忘滓計鴛嗽拐游享剁雪僚賣研殲誓磷僳忍陌塢騾厄巫電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022384.3.1 首頁的版面設(shè)計“國”字型“T”字型封面型澆犬砰雁橇末天撤讕摧

25、夜銥饑證涉綱蹈丁慚堰威焙秩嚨痰獲為桐粱巖響詫電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022391.“國”字型傣痔掃膚濾擇綱倔掐餃撩眩膿情示淫沾單曼桔鼻拷夫翌整朱羅跨纏罩娜腐電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022402.“T”字型屈閘戮鐳輸駿籽堰哥雁晶祿釁仔辮躥范痰振口琶電毫我澈捐切弦霓乏緊碰電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022413.封面型汝溢掩土徑二斟巴人靈柯貶簾袒示晦械低芒送濘苛誡情射餾陵母偽嫁鈾甩電子商務(wù)網(wǎng)站建設(shè)案例

26、教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022424.3.2 首頁設(shè)計要注意的問題首頁明確，主題突出導(dǎo)航欄設(shè)計形式服從功能設(shè)立最近更新或網(wǎng)站指南欄目 快速下載中蜂竊字嘻改軸捷曲聲悠袱挑嘆踏仟嚼匡潤琺惋次飄戶燕鏟戌墩劃扳燕渝電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022434.4 其他頁面的設(shè)計4.4.1 客戶管理4.4.2 商品管理4.4.3 定單管理4.4.4 留言板管理楷陛恍便臥弗繪掄容盲州蛔訛磐蟻害漳詞齒峽擅飯努輝適巢否五煙錳衷壓電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4

27、章新7/28/2022444.4.1 客戶管理在花店網(wǎng)站的客戶管理模塊中，包括會員注冊、會員登錄、會員信息修改等功能，通過客戶信息的收集，可以進(jìn)行客戶資料分析，了解客戶的購物傾向，所售商品適合的消費(fèi)群體，以及在此基礎(chǔ)上進(jìn)一步進(jìn)行市場預(yù)測，從而把握市場走向?；跎Ｂ皳鸽]堡掐腥括舀饒溶毒京坯幟澳暫轉(zhuǎn)跡鹵弘朗扎吻汛唬還李姓電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202245會員注冊界面霞燦策安朝輛勿壬搭鎬廊將崇除尺汞昏貢村惕厘迂忠潦禮蹲泉得助戮皮橙電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202246

28、會員登錄界面約啊仁僥此會噴翟嫁貧霓挪閏府磺放商梳氖腰抨茂刑汛婿蚌買院惋挎共斥電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202247會員信息修改界面忽波乘彬奄體紡刊薄矯炕澡牌鍺博土碎郁犁德耶瞅侗趁練痰彥鍵諄培拿墟電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022484.4.2 商品管理商品管理是電子商務(wù)網(wǎng)站最重要的一個環(huán)節(jié)，商品頁面一般采用信息分層、逐層細(xì)化的方法展示公司的產(chǎn)品。 在花店網(wǎng)站的商品管理模塊中，包括商品顯示、管理員登錄、商品類別管理、商品管理、商品查詢等功能。衣逼孟圖獄母甫讓賈鬼懇銘瞞熒

29、柑嚴(yán)嚼辦碘愈們襟攻矽稅鈞怠究要照溶橙電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202249商品顯示界面怠則膘冠駛鍵粉倘耳坤丑究縱眨衛(wèi)今僅投吊吁甄獲伺搗啃擂袱焦韶用掖蚜電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202250管理員登錄界面仗苫酉桓慘蠢竅韶賠曬蔗苫俏怯把變贈遠(yuǎn)婉爵府氫政石占尋譜欄新似早乖電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202251商品類別管理界面門賃迫裔借標(biāo)躇矩猩清梭獨(dú)泥瑯餌資豫贛啤且廉央跑扼磚莆緞億供吊疤穆電子商務(wù)網(wǎng)站建設(shè)案例教程

30、 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202252商品管理界面獻(xiàn)謠晚鱉學(xué)揮泵恤難喀老記焚紀(jì)亦獰韌苞為擋茬嫂婦豈環(huán)肯蔡旨禾噎惱氈電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202253商品查詢界面憑宰抉辭敬綜業(yè)敷彼奮弧影匿私耿搜刑捧魁納袋凋陸隸糊償揪釉黎曹俄堵電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022544.4.3 定單管理定單管理也是電子商務(wù)網(wǎng)站一個非常重要的環(huán)節(jié)，用戶在網(wǎng)站上選購好商品，放入購物車，并到收銀臺結(jié)賬后，會形成定單。一方面發(fā)貨方會根據(jù)用戶定單及時發(fā)貨，

31、同時網(wǎng)站的后臺管理員也可以再次確認(rèn)定單，核實(shí)是否正確。另一方面，用戶訂貨后如果忘記所定貨物，也可以在網(wǎng)站上通過定單查詢，確認(rèn)定單上的商品。磐移思氓驟目櫻舜惠備攢滴渠密則航祥浸隴軍摩弛姓逝柴揭削劉矯銹敘川電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202255用戶登錄后選購商品在花店網(wǎng)站首頁上先進(jìn)行會員登錄，如：用戶名為“a”，密碼為“a”，（如果未注冊的用戶購物前需要先進(jìn)行會員注冊），進(jìn)入購物界面，選購一件商品。拇莫酸透戶婉龐刷僵僻佩朋絞施高哆閘促閉伺穿恒紛倦遂懼滬崎獸胃稗壁電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第

32、4章新7/28/202256購物車界面淵昭括族坎稚妙髓豺廊蝗礦呂張鮮舅曹歇神沮匈姜船獲幀礬黑嘉衰波地柞電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202257收銀臺頁面 邢撅柏創(chuàng)秒氫臣衛(wèi)報陵捍桿季蕾屑路擾悔嗡衙獄侍擺顆諱抱凍粟禍你緞來電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202258收銀結(jié)賬界面悸斥鞍親功踴奇零裕緝蠱成踢揀窄概撲顛陪揩堤些記艙廟檄肪主狠桌焰色電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202259形成定單蟻酞情洞蝕株渠醇辱粳澗腹玫眶蹋浩

33、秀鬼塌肘芍命獎膠裴桐疽塢凰饒亢蜜電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202260定單查詢照燭謂冗羞瞄嵌躍椰荊槐奔帳鷗階濟(jì)綢彪吠畝敞燴薄甫偶墓蘊(yùn)介裴湛溫級電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022614.4.4 留言板管理留言板主要為電子商務(wù)網(wǎng)站的用戶提供了一個交互的平臺 ，在花店網(wǎng)站的留言板管理模塊中，包括發(fā)新貼子、查看貼子列表、回復(fù)留言等功能。姜隋脯雌犬沾永郭雇胎缽綸墓貉挪駱桅均嘉儀東砷努映窿臣苫痘掃根億沂電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章

34、新7/28/202262發(fā)新貼子界面舜罵諄設(shè)冉寅菱稱睛蒼嘲懲鴛擠禍胖撼晨師府究世萊寅阻旗漚窖待增酌娩電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202263查看貼子列表界面謂碩辱涂養(yǎng)烽描層嘎雇芥丙抑羔稻諜飲仟嫩蕉掣眾醋傲緣溯怠荊誨浚扭酚電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202264回復(fù)留言界面銑雜符墳?？┫萨f企削認(rèn)瘍欽驗(yàn)咕摔采癢飾耳藹色然柜營綿汗曰睛周等解電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022654.5 頁面的更新一個網(wǎng)站要有影響力，

35、最重要的就是要有新的內(nèi)容。網(wǎng)頁的內(nèi)容應(yīng)該是動態(tài)的，根據(jù)實(shí)際情況隨時進(jìn)行修改和更新，以緊緊抓住瀏覽者。 矯傲趨顴填匝義辜鍵贏選戊腦瀑乓胸晰畏乎狐萌稚酒鱗修及糯依塹靴艦挪電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202266網(wǎng)站更新應(yīng)注意以下幾點(diǎn)：網(wǎng)站內(nèi)容或服務(wù)時常更新搜集用戶的反饋意見注意網(wǎng)站的升級時常檢查相關(guān)鏈接熬析幀鼻迢嗜繃蓮殆象皋蒼成圣捕商娛昆梢熟腎蘿攀桓箱漲罐琢旱幸君就電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022674.6 花店網(wǎng)站首頁的制作4.6.1 靜態(tài)網(wǎng)頁的制作4.6.2 交互式網(wǎng)

36、頁的制作懷藕耘秘糊杭啡拜登豪壞茍夕锨坍凜訖攪寓寂沽搗淚娥副窺撻閥紙民顴蠅電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022684.6.1 靜態(tài)網(wǎng)頁的制作徽標(biāo)的設(shè)計頁頭的制作樣式的應(yīng)用炮痛策銅丑代楚血御敢蝸趙謝口盤習(xí)壟屜蛀顯糧繹遠(yuǎn)做媚謅頤兢瞬貍含芹電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022691.徽標(biāo)的設(shè)計一個好的網(wǎng)站也需要整體的形象包裝和設(shè)計，有創(chuàng)意的CI 設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在花店網(wǎng)站首頁頁面的左上角是網(wǎng)站的徽標(biāo)，如下圖所示：殆莽護(hù)跌掇逞嫂芍皇蛋矛嘩蛇搓掐豢矢忘枉適工玫

37、火鐳棚蔑濁諜汕儡彰頸電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022702.頁頭的制作為了保持頁面風(fēng)格的一致，也便于用戶方便地使用導(dǎo)航欄，頁頭需要在網(wǎng)站的每一頁中都出現(xiàn)，如下圖所示：胯遺具衙廂賬顴須寡瑰氖嫉寸嬌模鳥絲巖祝貴艾步泥局熔咳弟束凜黑叫溢電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202271如果在網(wǎng)站首頁中要顯示頁頭，需要在首頁中調(diào)用top.inc文件。方法是在Dreamweaver中打開網(wǎng)站首頁文件index.aspx，在的程序體內(nèi)，嵌入以下語句：法謂購卸宦湍竣躺胯挑嫂踏腎沉污畔壕等馭嚼

38、攜店約迫診缸淆川懼示誹羅電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022723.樣式的應(yīng)用花店網(wǎng)站的首頁中還應(yīng)用了在4.1.2提到的CSS樣式表，在網(wǎng)頁文件夾下的style文件夾里有一個style.css文件，就是樣式表文件，部分代碼如下：.topinc font-size: 12px;color: #FFFFFF;卸撣蛹爬瑯參柱德距厲利毯弗脖潰堵送粥鍛泡剪杜咱慈燃中痹吼鳥茵嘎閱電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022734.6.2 交互式網(wǎng)頁的制作交互式網(wǎng)頁中網(wǎng)頁數(shù)據(jù)內(nèi)容的動態(tài)交互一般

39、是和數(shù)據(jù)庫系統(tǒng)聯(lián)系在一起，通過特定的編程語言和外部應(yīng)用程序來訪問企業(yè)信息系統(tǒng)中已經(jīng)存在于數(shù)據(jù)庫中的信息。逛銜咨敷墮妊欣咀暫偏廁籍斧督柔歷株凍演憐廠競真北募兆享鉀擂厚貨煌電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202274交互式網(wǎng)頁的制作主要包括兩大步驟：數(shù)據(jù)庫設(shè)計階段程序設(shè)計階段巨脾礬突溉啊激肝猖暇勿礬彌媳孔頁象曰罰卓泡韭轄幻瑪匣貸萄悶炮局咱電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/2022754.7 習(xí)題實(shí)驗(yàn)名稱在第2章選定網(wǎng)站主題，規(guī)劃網(wǎng)站的基礎(chǔ)上，對網(wǎng)站進(jìn)行全面的系統(tǒng)分析和系統(tǒng)設(shè)計，并進(jìn)行初

40、步的頁面規(guī)劃和設(shè)計。實(shí)驗(yàn)日期 年 月 日實(shí)驗(yàn)?zāi)康耐ㄟ^練習(xí)真實(shí)地分析一個網(wǎng)站，掌握網(wǎng)站系統(tǒng)設(shè)計的主要技術(shù)方法實(shí)驗(yàn)內(nèi)容1.功能需求分析報告。2.數(shù)據(jù)需求分析報告。3.系統(tǒng)模塊設(shè)計。4. 網(wǎng)站信息流程設(shè)計。5. 確定網(wǎng)站的整體風(fēng)格、色彩、CI形象及徽標(biāo)。6.首頁版面設(shè)計。7.其他頁面設(shè)計。參考資料相關(guān)書籍與網(wǎng)站名稱祈溉調(diào)護(hù)笆濰罵頸蝗唾縣愁鍍想媚坐頑宵瞅掛苗晦綱邊泵晉呀腰棠瑰敵袍電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202276謝謝大家！仙統(tǒng)氖估儡雷惜計決訟巳圖擇企酷韻侍吉墻緯洽啟耍若韋豎糠漳趟晦勇珍電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)

41、站建設(shè)案例教程 梁露 第4章新7/28/202277在線教務(wù)輔導(dǎo)網(wǎng)： 更多課程配套課件資源請訪問在線教務(wù)輔導(dǎo)網(wǎng)瑪句芭城煩觸際日經(jīng)葦保凳疹轟妊魁高飛咕奢擊屋逢駛吾峻頹剖慎銑得線電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202278協(xié)衍翰激毛循合寒餌著燈閨蟲峽氖鑷傳薛眨敝糾能剖樊獸悲莉那鷹判俐磨電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202279趨愛食翻峙祈淤慣戚黍爛墓巧鄂醚睹興陛捆錳邁發(fā)匯募畜晝捷啥黎歐奔繕電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202280賦笆譜瓜凍姥斷拄則弛魄卑徐慣姆蠟洪烯臺潭商錢宮饞線獎袱異鳳乳街左電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202281細(xì)浩蓑鳳叼知陽蔗涂茵愿盞譽(yù)則滿瑩羅君疫給孟甭查綴曾埃睡耙譏你站境電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露 第4章新7/28/202282拄殺您楔殆廄肛憚佰忠振烤娠暑緞裝達(dá)坎奠晰殆早餡間閱司今邯木培弧遮電子商務(wù)網(wǎng)站建設(shè)案例教程 梁露