电商网站设计实验报告

实验报告系别交通运输管理学院学生姓名余东阳专业信息管理与信息系统学号2220123771实验课程电子商务网站设计指导老师贺琳填制日期：2013年12月25日1实验一网站设计一、实验目的与要求设计并实施一个网站。1．网站主题自选，但风格、色彩、布局等需要统一。2．要求网站至少由5个页面构成。3．页面遵循HTML4.01或XHTML1.0strict标准。4．页面的表现由CSS文件描述。5．页面的布局要求用CSS文件描述。6．页面的行为由Javascript文件完成。二、实验内容与步骤及结果展示2.1实验内容2.1.1主页1绘制出网页的框架设计第一步就是页面功能结构分析，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是构思好的界面布局图。本次实验的基本页面构想图(图1)。图122页面结构设计构思页面整体布局，设计出总体框架，写出如图2.3写入整体层结构与CSS接下来我们在桌面新建一个文件夹，命名为“电子商务实验课”，在文件夹下新建两个空的文档。homepage.htmhomepage.css用Dreamweaver打开已经建立好的站点endpage。打开“homepage.html”，在head/head标签对中写入：linkhref=homepage.cssrel=stylesheettype=text/css/，在body/body标签对中写入设计好的DIV的基本结构(如图二)用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。4、填充基本结构HTMLHEADTITLE汽车世界/TITLEMETAHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=iso-8859-1!--ImageReadyPreloadScript(index.psd)--Body/*整体页面*/#Container{}/*页面层容器*/#Footer{}　/*页面底部*/#content{}/*本页导航*/#menulist{}/*页面导航*/#img1{}/*页面头部*/#pageneirong{}/*主体内容*/#img2{}/*导航置顶图片*/#dmelu{}/*本页导航*/#other{}/*补充内容*/图2div布局图3SCRIPTTYPE=text/javascript!--functionnewImage(arg){if(document.images){rslt=newImage();rslt.src=arg;returnrslt;}}functionchangeImages(){if(document.images&&(preloadFlag==true)){for(vari=0;ichangeImages.arguments.length;i+=2){document[changeImages.arguments[i]].src=changeImages.arguments[i+1];}}}varpreloadFlag=false;functionpreloadImages(){if(document.images){company_over=newImage(images/company-over.gif);products_over=newImage(images/products-over.gif);accessories_over=newImage(images/accessories-over.gif);support_over=newImage(images/support-over.gif);news___events_over=newImage(images/news-%26-events-over.gif);contacts_over=newImage(images/contacts-over.gif);preloadFlag=true;}}//--/SCRIPT2.1.2其他页面其他页面的设计方法，基本和主页相同只是形式与颜色还有部分布局的细节不同，在这里就不在赘述设计过程。资料页面（以表单为主）图像页面，（以浮动的DIV为主）文档页面（用frame结构完成）文字简介页面（以固定档案为主）42.1.3超链接所有页面设计完成后均有导航部分（位置与形式不同），用a标签进行相互连接2.2实验内容【具体内容见页面的源代码】1.HTMLHEADTITLE汽车世界/TITLEMETAHTTP-EQUIV=Content-TypeCONTENT=text/html;charset=iso-8859-1!--ImageReadyPreloadScript(index.psd)--SCRIPTTYPE=text/javascript!--functionnewImage(arg){if(document.images){rslt=newImage();rslt.src=arg;returnrslt;}}functionchangeImages(){if(document.images&&(preloadFlag==true)){for(vari=0;ichangeImages.arguments.length;i+=2){document[changeImages.arguments[i]].src=changeImages.arguments[i+1];}}}varpreloadFlag=false;functionpreloadImages(){if(document.images){company_over=newImage(images/company-over.gif);products_over=newImage(images/products-over.gif);accessories_over=newImage(images/accessories-over.gif);support_over=newImage(images/support-over.gif);news___events_over=newImage(images/news-%26-events-over.gif);contacts_over=newImage(images/contacts-over.gif);preloadFlag=true;}}//--5/SCRIPT!--EndPreloadScript--styletype=text/css!--.style4{font-size:12px}--/style/HEADlinkhref=css/styles.cssrel=stylesheettype=text/csscenterBODYBGCOLOR=#FFFFFFLEFTMARGIN=0TOPMARGIN=0MARGINWIDTH=0MARGINHEIGHT=0ONLOAD=preloadImages();!--ImageReadySlices(index.psd)--TABLEWIDTH=775BORDER=0CELLPADDING=0CELLSPACING=0TRTDCOLSPAN=12ROWSPAN=3IMGSRC=images/title.gifWIDTH=557HEIGHT=77ALT=/TDTDCOLSPAN=5IMGSRC=images/m1.gifWIDTH=218HEIGHT=23ALT=/TD/TRTRTDCOLSPAN=4AHREF=#ONMOUSEOVER=window.status='viewcatalog';returntrue;ONMOUSEOUT=window.status='';returntrue;IMGSRC=images/view-catalog.gifWIDTH=208HEIGHT=24BORDER=0ALT=viewcatalog/A/TDTDIMGSRC=images/m2.gifWIDTH=10HEIGHT=24ALT=/TD/TRTRTDCOLSPAN=5IMGSRC=images/m3.gifWIDTH=218HEIGHT=30ALT=/TD/TRTRTDCOLSPAN=2AHREF=index.htmlONMOUSEOVER=window.status='company';changeImages('company','images/company-over.gif');returntrue;ONMOUSEOUT=window.status='';changeImages('company','images/company.gif');returntrue;IMGNAME=companySRC=images/company.gifWIDTH=121HEIGHT=49BORDER=0ALT=index/A/TDTDCOLSPAN=36ahref=pic.htmlIMGNAME=productsSRC=images/products.gifWIDTH=101HEIGHT=49BORDER=0ALT=pic/a/TDTDAHREF=lishi.htmlONMOUSEOVER=window.status='accessories';changeImages('accessories','images/accessories-over.gif');returntrue;ONMOUSEOUT=window.status='';changeImages('accessories','images/accessories.gif');returntrue;IMGNAME=accessoriesSRC=images/accessories.gifWIDTH=108HEIGHT=49BORDER=0ALT=lishi/A/TDTDCOLSPAN=3IMGSRC=images/m4.gifWIDTH=70HEIGHT=49ALT=/TDTDAHREF=fll.htmlONMOUSEOVER=window.status='support';changeImages('support','images/support-over.gif');returntrue;ONMOUSEOUT=window.status='';changeImages('support','images/support.gif');returntrue;IMGNAME=supportSRC=images/support.gifWIDTH=88HEIGHT=49BORDER=0ALT=falali/A/TDTDCOLSPAN=3AHREF=bc.htmlONMOUSEOVER=window.status='news&events';changeImages('news___events','images/news-%26-events-over.gif');returntrue;ONMOUSEOUT=window.status='';changeImages('news___events','images/news-%26-events.gif');returntrue;IMGNAME=news___eventsSRC=images/news-%26-events.gifWIDTH=142HEIGHT=49BORDER=0A