1、1、 實驗目的1、 使學生了解網(wǎng)上商店的主要作用及其與一般管理信息系統(tǒng)的差異， 要求學生明確網(wǎng)上商店設計、開發(fā)、建造過程中的主要技術(shù)熱點和前沿問題。2、要求學生掌握網(wǎng)上商店的生命周期的基本概念， 理解網(wǎng)上商店分析設計和開發(fā)的各個主要階段及其主要任務， 了解網(wǎng)上商店分析開發(fā)過程與一般管理信息系統(tǒng)的差異，了解網(wǎng)上商店開發(fā)過程中的人員組織及其職責。3、要求學生理解水平型網(wǎng)站、 垂直型網(wǎng)站、 綜合型網(wǎng)站的主要特征、 作用及其核心技術(shù)。4、 要求學生掌握網(wǎng)站設計的基本思路和過程。 5、 了解電子商務網(wǎng)站設計常用組件， 掌握首頁設計、 頁面可視化設計、 網(wǎng)站的風格和創(chuàng)意設計、 網(wǎng)站的欄目和版塊設計、網(wǎng)站的

2、目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)確定的要點。 2、 實驗原理電子商務系統(tǒng)的系統(tǒng)開發(fā)生命周期主要包括如下5個方面：（1）系統(tǒng)分析規(guī)劃：選定商業(yè)模式，確定商業(yè)目標、系統(tǒng)功能及信息需求（2）系統(tǒng)設計：邏輯設計與物理設計（3）系統(tǒng)開發(fā)：企業(yè)內(nèi)部開發(fā)與系統(tǒng)外包（4）系統(tǒng)實施：一項復雜的系統(tǒng)工程（5）系統(tǒng)運行/維護：保證系統(tǒng)正常運行一個一般的網(wǎng)站的設計思路與過程為：1、客戶需求分析2、網(wǎng)站表現(xiàn)形式分析：1） 網(wǎng)站整體風格：2) 網(wǎng)頁設計理念：3） 網(wǎng)站配色方案4) 網(wǎng)站構(gòu)架3、網(wǎng)站功能設計1） 前臺功能設計2） 后臺模塊功能設計3、 實驗內(nèi)容1、 主頁代碼無標題文檔 /圖片滾動列表 mengjia 070927 var

3、 Speed_1 = 10; /速度(毫秒) var Space_1 = 40; /每次移動(px) var PageWidth_1 = 116 * 3; /翻頁寬度 var interval_1 = 7000; /翻頁間隔 var fill_1 = 0; /整體移位 var MoveLock_1 = false; var MoveTimeObj_1; var MoveWay_1=right; var Comp_1 = 0; var AutoPlayObj_1=null; function GetObj(objName)if(document.getElementById)return eva

4、l(document.getElementById(+objName+)elsereturn eval(document.all.+objName) function AutoPlay_1()clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval(ISL_GoDown_1();ISL_StopDown_1();,interval_1) function ISL_GoUp_1()if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1=left;Mo

5、veTimeObj_1=setInterval(ISL_ScrUp_1();,Speed_1); function ISL_StopUp_1()if(MoveWay_1 = right)return;clearInterval(MoveTimeObj_1);if(GetObj(ISL_Cont_1).scrollLeft-fill_1)%PageWidth_1!=0)Comp_1=fill_1-(GetObj(ISL_Cont_1).scrollLeft%PageWidth_1);CompScr_1()elseMoveLock_1=false AutoPlay_1() function ISL

6、_ScrUp_1()if(GetObj(ISL_Cont_1).scrollLeft=0?fill_1:fill_1+1)!=0)Comp_1=PageWidth_1-GetObj(ISL_Cont_1).scrollLeft%PageWidth_1+fill_1;CompScr_1()elseMoveLock_1=false AutoPlay_1() function ISL_ScrDown_1()if(GetObj(ISL_Cont_1).scrollLeft=GetObj(List1_1).scrollWidth)GetObj(ISL_Cont_1).scrollLeft=GetObj(

7、ISL_Cont_1).scrollLeft-GetObj(List1_1).scrollWidth GetObj(ISL_Cont_1).scrollLeft+=Space_1 function CompScr_1()if(Comp_1=0)MoveLock_1=false;return var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)PageWidth_1/2)TempSpace=Math.round(Math.abs(Comp_1/Space_1);if(TempSpace1)TempSpace=1 if(Co

8、mp_10)if(Comp_1TempSpace)Comp_1-=TempSpace;num=TempSpaceelsenum=Comp_1;Comp_1=0 GetObj(ISL_Cont_1).scrollLeft+=num;setTimeout(CompScr_1(),TempSpeed) function picrun_ini() GetObj(List2_1).innerHTML=GetObj(List1_1).innerHTML; GetObj(ISL_Cont_1).scrollLeft=fill_1=0?fill_1:GetObj(List1_1).scrollWidth-Ma

9、th.abs(fill_1); GetObj(ISL_Cont_1).onmouseover=function()clearInterval(AutoPlayObj_1) GetObj(ISL_Cont_1).onmouseout=function()AutoPlay_1() AutoPlay_1(); /產(chǎn)品展示滾動圖片結(jié)束 /-     常大發(fā)飾官方旗艦店     甩賣包郵           首頁 新品 網(wǎng)絡精品 奧地利水鉆 奧地利水晶 野性豹紋 購物須知

10、盤發(fā)教程           搶購   搶購   搶購     2、 商品1網(wǎng)頁代碼無標題文檔     常大發(fā)飾官方旗艦店        首頁 新品 網(wǎng)絡精品 奧地利水鉆 奧地利水晶 野性豹紋 購物須知 盤發(fā)教程   .img_warp width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;

11、margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px; .img_warpposition:relative;top:0px; left:0px;/*cursor:crosshair*/ .img_warp .current width:318px;height:199px var $E = function(opts) function _(objId)return (typeof objId = string)?document.getElementById(objId):objId; var beImg,

12、expand,clip,cover,warp,expImg; var clipWidth,clipHeight; var closeTimeId = null; var mult = 1; /圖片放大倍數(shù),根據(jù)裁剪框和放大后圖片容器的大小自動調(diào)整 /init (function() beImg = _(opts.berviary); warp = beImg.parentNode; cover = document.createElement(div); warp.appendChild(cover); cover.style.position = absolute; cover.style.

13、top = 0px; cover.style.left = 0px; cover.style.backgroundColor = #ccc; var opac = parseFloat(opts.opacity) | 0.3; cover.style.opacity = opac; cover.style.filter = Alpha(Opacity= + opac * 100 + ); cover.style.width = 100%; cover.style.height = 100%; cover.style.zIndex = 2; cover.style.visibility = hi

14、dden; clip = document.createElement(img); warp.appendChild(clip); clipWidth = (opts.clip & opts.clip.width) | 60px; clipHeight = (opts.clip & opts.clip.height) | 60px; clip.src = beImg.src; clip.className = beImg.className; clip.style.position = absolute; clip.style.top = 0px; clip.style.left = 0px;

15、 clip.style.clip = rect(0px, + clipWidth + , + clipHeight + ,0px); clip.style.backgroundColor = #ccc; clip.style.zIndex = 3; /ie里面會變態(tài)的自動設置寬度和高度 clip.removeAttribute(width); clip.removeAttribute(height); )(); function layerPos(e) if(e.layerX & e.layerY) return x:e.layerX,y:e.layerY; else return x:e.x

16、,y:e.y; function absolutePos(e) if(e.pageX & e.pageY) return x:e.pageX,y:e.pageY; else var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft); var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop

17、: document.body.scrollTop); return x:x,y:y; var showExpand = function(x,y,e) if(!expand) initExpand(); expImg.style.left = (-1 * x) * mult + px; expImg.style.top = (-1 * y ) * mult + px; if(!opts.expand) | (!opts.expand.id) var aPos = absolutePos(e); expand.style.left = aPos.x + parseFloat(clipWidth

18、) / 2 + 20 + px; expand.style.top = aPos.y + px; /初始化放大的div function initExpand() if(opts.expand & opts.expand.id) expand = _(opts.expand.id); else expand = document.createElement(div); if(opts.expand & opts.expand.style) for(var p in opts.expand.style) expand.stylep = opts.expand.stylep; expand.sty

19、le.border = 1px solid #000; expand.style.position = absolute; expand.style.left =0; expand.style.right = 0; expand.style.display = block; document.body.appendChild(expand); if(clip.clientWidthclip.clientHeight) expand.style.width = clip.clientWidth + px; expand.style.height = clip.clientWidth * pars

20、eFloat(clipHeight) / parseFloat(clipWidth) + px; else expand.style.height = clip.clientHeight + px; expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + px; expand.style.zIndex = 4; expand.style.overflow = hidden; if(expand.style.position != relative) & (expand.s

21、tyle.position != absolute) /變態(tài)的ie6和ie7的img如果為relative,需要設置其父節(jié)點也為relative,否則overflow:hidden無效 expand.style.position = relative; expand.style.left = 0; expand.style.top = 0; expImg = document.createElement(img); expImg.src = beImg.src; expImg.style.position = relative; expImg.style.left = 0px; expImg.

22、style.top = 0px; expand.appendChild(expImg); expImg.removeAttribute(width); expImg.removeAttribute(height); /計算圖片放大的倍數(shù) var ew = expand.clientWidth; var eh = expand.clientHeight; var cw = parseFloat(clipWidth); var ch = parseFloat(clipHeight); mult = (ew/cw eh/ch) ? ew/cw : eh/ch; /調(diào)整放大圖片的大小 expImg.s

23、tyle.width = beImg.clientWidth * mult + px; expImg.style.height = beImg.clientHeight * mult + px; cover.onmousemove = clip.onmousemove = function(e) var e = e | event; var pos = layerPos(e); var x = pos.x; var y = pos.y; /判斷x和y坐標有沒有超出范圍 var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2; x = (x w)?w:x; y = (y warp.clientWidth - w) ? (warp.clientWidth - w) : x; y = (y warp.clientHeight - h) ? (warp.client