该【2023年电商网站设计实验报告 】是由【非学无以广才】上传分享，文档一共【60】页，该文档可以免费在线阅读，需要了解更多关于【2023年电商网站设计实验报告 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。实验报告
系别 交通运送管理学院
学生姓名余东阳
专 业信息管理与信息系统
学号 223771
实验课程 电子商务网站设计
指引教师 贺琳
填制日期:12月25日
实验一 网站设计
一、实验目的与规定
设计并实行一种网站。
网站主题自选,但风格、色彩、布局等需要统一。
规定网站至少由5个页面构成。
strict 原则。
页面的体现由CSS文献描述。
页面的布局规定用CSS文献描述。
页面的行为由Javascript文献完毕。
二、实验内容与环节及成果展示
绘制出网页的框架
设计第一步就是页面功能构造分析,构思好了,一般来说还需要用PhotoShop或FireWorks(如下简称PS或FW)等图片解决软件将需要制作的界面布局简朴的构画出来,如下是构思好的界面布局图。本次实验的基本页面设想图(图1)。
图Error!Bookmarknotdefined.
2 页面构造设计
构思页面整体布局,设计出总体框架,写出如图2.
3 写入整体层构造与CSS
接下来我们在桌面新建一种文献夹,命名为“电子商务实验课”,在文献夹下新建两个空的文档。
用Dreamweaver打开已经建立好的站点endpage。打开“”,在<head></head>标签对中写入:
<link href=""rel="stylesheet" type="text/css" />,
在<body></body>标签对中写入设计好的DIV的基本构造(如图二)
用浏览器打开,这时我们已经可以看到基本构造了,这个就是页面的框架了。
4、填充基本构造
<HTML>
<HEAD>
<TITLE>汽车世界</TITLE>
<META HTTP-EQUIV="Content-Type"CONTENT="text/html;charset=iso-8859-1">
<!--ImageReady PreloadScript () -->
<SCRIPTTYPE="text/javascript">
<!--
functionnewImage(arg){
ﻩif(){
ﻩ rslt=new Image();
=arg;
ﻩ return rslt;
ﻩ}
}
functionchangeImages() {
if( &&(preloadFlag==true)) {
for (var i=0;i<;i+=2){
ﻩﻩdocument[[i]].src =[i+1];
ﻩﻩ}
ﻩ}
}
varpreloadFlag=false;
functionpreloadImages() {
ﻩif() {
ﻩ company_over=newImage("images/company-");
ﻩﻩproducts_over= newImage("images/products-");
ﻩaccessories_over=newImage("images/accessories-");
support_over =newImage("images/support-");
ﻩ news___events_over =newImage("images/news-%26-events-");
ﻩ contacts_over=newImage("images/contacts-");
ﻩpreloadFlag=true;
}
}
//-->
</SCRIPT>
其她页面的设计措施,基本和主页相似只是形式与颜色尚有部分布局的细节不同,在这里就不在赘述设计过程。
资料页面(以表单为主)
图像页面,(以浮动的DIV为主)
文档页面(用frame构造完毕)
文字简介页面(以固定档案为主)
所有页面设计完毕后均有导航部分(位置与形式不同),用<a>标签进行互相连接
【具体内容见页面的源代码】
1.<HTML>
<HEAD>
<TITLE>汽车世界</TITLE>
<METAHTTP-EQUIV="Content-Type"CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReadyPreloadScript () -->
<SCRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
if(){
ﻩﻩrslt=newImage();
= arg;
returnrslt;
ﻩ}
}
functionchangeImages(){
if (&&(preloadFlag==true)){
ﻩfor (vari=0;i<;i+=2){
ﻩﻩﻩdocument[[i]].src=[i+1];
}
ﻩ}
}
varpreloadFlag =false;
functionpreloadImages(){
ﻩif (){
ﻩﻩcompany_over=newImage("images/company-");
products_over=newImage("images/products-");
ﻩﻩaccessories_over=newImage("images/accessories-");
ﻩﻩsupport_over=newImage("images/support-");
ﻩﻩnews___events_over=newImage("images/news-%26-events-");
contacts_over=newImage("images/contacts-");
ﻩﻩpreloadFlag= true;
ﻩ}
}
//-->
</SCRIPT>
<!--EndPreloadScript -->
<styletype="text/css">
<!--
.style4{font-size:12px}
-->
</style>
</HEAD>
<link href="css/"rel="stylesheet"type="text/css">
<center>
<BODYBGCOLOR=#FFFFFFLEFTMARGIN=0TOPMARGIN=0MARGINWIDTH=0 MARGINHEIGHT=0ONLOAD="preloadImages();">
<!--ImageReady Slices() -->
<TABLEWIDTH=775 BORDER=0CELLPADDING=0CELLSPACING=0>
ﻩ<TR>
ﻩﻩ<TDCOLSPAN=12ROWSPAN=3>
<IMGSRC="images/"WIDTH=557HEIGHT=77 ALT=""></TD>
ﻩ <TD COLSPAN=5>
ﻩﻩ<IMGSRC="images/"WIDTH=218 HEIGHT=23ALT=""></TD>
ﻩ</TR>
ﻩ<TR>
ﻩ <TDCOLSPAN=4>
ﻩ<AHREF="#"
ﻩﻩﻩONMOUSEOVER="='view catalog'; returntrue;"
ﻩﻩﻩONMOUSEOUT="='';returntrue;">
ﻩﻩﻩﻩ<IMGSRC="images/view-"WIDTH=208HEIGHT=24BORDER=0ALT="viewcatalog"></A></TD>
ﻩ<TD>
ﻩ <IMGSRC="images/"WIDTH=10HEIGHT=24ALT=""></TD>
ﻩ</TR>
<TR>
<TDCOLSPAN=5>
ﻩ <IMGSRC="images/"WIDTH=218HEIGHT=30ALT=""></TD>
ﻩ</TR>
<TR>
ﻩ<TDCOLSPAN=2>
ﻩﻩﻩ<AHREF=""
ﻩ ﻩONMOUSEOVER="='company'; changeImages('company', 'images/company-'); returntrue;"
ﻩ ﻩ ONMOUSEOUT="='';changeImages('company','images/');return true;">
<IMGNAME="company"SRC="images/"WIDTH=121HEIGHT=49BORDER=0ALT="index"></A></TD>
<TDCOLSPAN=3>
ﻩﻩ <ahref=""><IMG NAME="products"SRC="images/" WIDTH=101 HEIGHT=49BORDER=0 ALT="pic"></a></TD>
<TD>
ﻩﻩ<AHREF=""
ﻩ ﻩONMOUSEOVER="='accessories';changeImages('accessories', 'images/accessories-'); return true;"
ﻩ ﻩﻩONMOUSEOUT="='';changeImages('accessories','images/');return true;">
<IMGNAME="accessories" SRC="images/"WIDTH=108HEIGHT=49BORDER=0ALT="lishi"></A></TD>
ﻩﻩ<TDCOLSPAN=3>
ﻩ ﻩ<IMGSRC="images/" WIDTH=70HEIGHT=49ALT=""></TD>
ﻩ<TD>
ﻩﻩﻩ<A HREF=""
ﻩﻩﻩﻩONMOUSEOVER="='support';changeImages('support','images/support-');return true;"
ﻩ ONMOUSEOUT="=''; changeImages('support', 'images/');returntrue;">
ﻩﻩﻩ<IMGNAME="support" SRC="images/"WIDTH=88HEIGHT=49BORDER=0ALT="falali"></A></TD>
ﻩ<TDCOLSPAN=3>
ﻩ <A HREF=""
ﻩ ﻩﻩONMOUSEOVER="='news&events';changeImages('news___events','images/news-%26-events-');returntrue;"
ﻩﻩﻩ ONMOUSEOUT="=''; changeImages('news___events','images/news-%26-');returntrue;">
ﻩ ﻩ<IMGNAME="news___events"SRC="images/news-%26-"WIDTH=142HEIGHT=49BORDER=0ALT="benchi"></A></TD>
<TD>
ﻩ<A HREF=""
ﻩ ﻩ ONMOUSEOVER="='contacts';changeImages('contacts', 'images/contacts-');returntrue;"
ﻩ ﻩONMOUSEOUT="=''; changeImages('contacts','images/');returntrue;">
ﻩ <IMGNAME="contacts"SRC="images/"WIDTH=93HEIGHT=49BORDER=0ALT="baoma"></A></TD>
ﻩﻩ<TDCOLSPAN=3>
ﻩ<IMG SRC="images/" WIDTH=52 HEIGHT=49ALT=""></TD>
</TR>
<TR>
ﻩ <TDCOLSPAN=7>
ﻩ <IMGSRC="images/"WIDTH=342HEIGHT=139ALT=""></TD>
ﻩﻩ<TDCOLSPAN=10 ROWSPAN=2 background="images/"><p>
ﻩ</p>
ﻩ <p> </p>
ﻩ <p>
ﻩﻩ <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-"codebase=",0,29,0"width="416"height="212">
<paramname="movie"value="flash/">
<paramname="quality"value="high">
<embed src="flash/"quality="high"pluginspage=""type="application/x-shockwave-flash"width="416"height="212"></embed>
</object>
</p></TD>
ﻩ</TR>
ﻩ<TR>
ﻩ<TDCOLSPAN=3>
ﻩ<IMG SRC="images/" WIDTH=132HEIGHT=208ALT=""></TD>
2023年电商网站设计实验报告 来自淘豆网m.daumloan.com转载请标明出处.
