WEB程序设计
实验报告
院系名称: 管理学院 专业班级: 电子商务0901班
学生姓名: 李 静 学 号: ###############
2012年 6月
一、 实验目的
1、通过本课程的实验教学,学生应能够做到:
(1)掌握企业网站前台和后台的设计;
(2)了解企业网站前台和后台的设计的基本思路;
(3)掌握企业网站前台和后台的实现。
(4)了解企业网站前台和后台的集成
2、熟悉企业网站开发的基本方法、思路,重点功能的实现算法;
3、学生应能够自己开发一个简单的企业网站。
二、 实验内容
独立完成企业网站的设计与开发
三、 实验环境
计算机(要求WIN2000以上操作系统,安装IIS和SQL Server)
四、 网站设计过程
1、 界面设计
福特汽车中国站首页设计看上去虽然不是那么吸引眼球,但配有FLASH动画,是我可望而不可即的,所以在此就不在展示我做的首页了。福特汽车中国站的列表页——汽车展厅如图(1)所示,看上去不是那么大气,在此我就做一些更改如图(2)所示。配有处理过的汽车大图片,来吸引用户眼球。是界面更美观,大方、简洁。
图(1)
图(2)
网页列表页规划如下
(1)、网站头部设计
福特汽车公司中国站的网站的logo放在网站的左上角,和一般网站logo的位置相同,符合用户观看习惯。导航条位于logo下面,主要包括汽车展示、新闻中心、福特品牌、客户服务、走进福特、科技创新、社会责任七部分,每部分都有相应的二级栏目。导航条的右上方是在线订购。首页和英语页面。在线订购方便客户随时跟福特公司联系汽车购买,方便、快捷;首页也比较醒目,方便用户随时回到首页。English主要针对在中国的外国人,方便他们购买。
(2)。中间部分设计
中间设计比较简单,主要分为两大块,左边部分和中间部分。左边主要是汽车展示一级栏目及其下的二级栏目,就是一个列表,中间部分是可以切换的汽车展示,点击做部分不同的列表栏目,会出现不同的图片。
(3)、尾部设计
尾部设计也很简单,就包括了一些常有的链接和一些维权声明。
(4)界面代码
<html>
<head>
<title>福特汽车中国站</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{color:#000;TEXT-ALIGN: center;FONT-SIZE: 26px}
A {TEXT-DECORATION: none;FONT-SIZE: 14px;background-color:999999}
A:hover{TEXT-DECORATION: none;color:#f00;}
.main {MARGIN: 0px auto; WIDTH: 959px; HEIGHT: auto}
.top{WIDTH: 959px; HEIGHT:80}
.top1{position:absolute;top:30px;left:210px}
.top2{position:absolute;top:65px;left:824px}
.top3{position:absolute;top:65px;left:924px}
.top4{position:absolute;top:65px;left:1024px,width:"auto"}
.content21{border:solid 1pt;width:765px;height:auto;margin:0px auto;position:absolute;top:140px;left:385px;z-index:3}
.bottom{WIDTH:959px;HEIGHT:547;BACKGROUND:#ebebeb}
.bottom1{position:absolute;top:140px;left:190px}
.bottom2{font-family:楷体_gb2312;font-size:16pt;color:#f00;position:absolute;top:255px;left:190px;height:auto;width:194px}
.bottom3{font-family:楷体_gb2312;font-size:12pt;color:#000;position:absolute;top:285px;left:190px;height:auto;width:194px}
.bottom4{position:absolute;top:140px;left:385px}
.bottom5{font-family:楷体_gb2312;font-size:12pt;color:#o8c;position:absolute;top:780px;left:210px;height:310px;width:959px}
.bottom6{font-family:楷体_gb2312;font-size:12pt;color:#o8c;position:absolute;top:840px;left:210px;height:310px;width:959px}
.topmain {MARGIN: 0px auto; WIDTH: 959px; BACKGROUND: #ebebeb; HEIGHT: 30px;PADDING: 0px}
.topmain UL {MARGIN: 0px;padding: 0px;list-style-type: none;}
.topmain UL LI {TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 110px; FLOAT: left; HEIGHT: 30px }
.topmain UL LI A {LINE-HEIGHT: 30px; WIDTH: 137px; HEIGHT: 28px; COLOR: #00f; FONT-WEIGHT: bold; PADDING-TOP: 2px}
</style>
</head>
<body>
<div class="top">
<div class="top1">
<a><img src="fut.png" alt="福特汽车" /></a>
</div>
<div class="top3">
English
</div>
<div class="top2">首页 </div>
<div class="top4">在线订购 </div>
</div>
<div class="menu">
<div class="menusel" style="width:95px;">
<h2><a href="index.html">首页</a></h2>
</div>
<div id="menu1" class="menusel">
<h2><a href="xiangqing.html">汽车展厅</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.865171.cn">福特锐界</a></li>
<li><a href="http://www.865171.cn">福特麦柯斯</a></li>
<li><a href="http://www.865171.cn">福特蒙迪欧-致胜</a></li>
<li><a href="http://www.865171.cn">福特福克斯三厢</a></li>
<li><a href="http://www.865171.cn">福特福克斯两厢 </a></li>
<li><a href="http://www.865171.cn">新福特嘉年华三厢</a></li>
<li><a href="http://www.865171.cn">新福特嘉年华两厢</a></li>
<li><a href="http://www.865171.cn">福特全顺</a></li>
<li class="lli"><a href="http://www.865171.cn">福特新世代全顺</a></li>
</ul>
</div>
</div>
<div id="menu2" class="menusel">
<h2><a href="xiangqing.html">新闻中心</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.865171.cn">福特新闻</a></li>
<li><a href="http://www.865171.cn">活动专题</a></li>
<li><a href="http://www.865171.cn">媒体报道</a></li>
<li><a href="http://www.865171.cn">精彩视频</a></li>
<li class="lli"><a href="http://www.865171.cn">行业新闻</a></li>
</ul>
</div>
</div>
<div id="menu3" class="menusel">
<h2><a href="xinwen.html">福特品牌</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.865171.cn">锐界</a></li>
<li><a href="http://www.865171.cn">爱虎</a></li>
<li class="lli"><a href="http://www.865171.cn">野马</a></li>
</ul>
</div>
</div>
<div id="menu4" class="menusel">
<h2><a href="http://www.865171.cn">客户服务</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li class="lli"><a href="http://www.865171.cn">客户留言</a></li>
</ul>
</div>
</div>
<div id="menu5" class="menusel">
<h2><a href="http://www.865171.cn">走进福特</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.865171.cn">公司简介</a></li>
<li><a href="http://www.865171.cn">福特文化</a></li>
<li><a href="http://www.865171.cn">业务范围</a></li>
<li><a href="http://www.865171.cn">核心优势</a></li>
<li class="lli"><a href="http://www.865171.cn">福特荣誉</a></li>
<li><a href="http://www.865171.cn">领导关怀</a></li>
</ul>
</div>
</div>
<div id="menu6" class="menusel">
<h2><a href="http://www.865171.cn">创新科技</a></h2>
<div class="position">
<ul class="clearfix typeul">
</ul>
</div>
</div>
<div id="menu7" class="menusel">
<h2><a href="http://www.865171.cn">社会责任</a></h2>
<div class="position">
<ul class="clearfix typeul">
<li><a href="http://www.865171.cn">安全</a></li>
<li><a href="http://www.865171.cn">志愿者</a></li>
<li><a href="http://www.865171.cn">环保承诺</a></li>
<li><a href="http://www.865171.cn">健康和教育</a></li>
</ul>
</div>
</div>
</div>
<div class="content21">
<ul>
<li class="t1"><a id=i1 href="tu20.jpg" target="layer3">1</a></li>
<li class="t1"><a id=i1 href="tu19.jpg" target="layer3">2</a></li>
<li class="t1"><a id=i1 href="tu14.jpg" target="layer3">3</a></li>
<li class="t1"><a id=i1 href="tu5.jpg" target="layer3">4</a></li>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1"><img src="kf_03.jpg" alt="联系我们" height:107px;width:194px></div>
<div class="bottom2">汽车展示</div>
<div class="bottom3">
<a href="#">
福特锐界
<hr align="center">
<a href="#">
福特麦柯斯
</a>
<hr align="center"><a href="#">
福特蒙迪欧-致胜</a>
<hr align="center"><a href="#">
福特福克斯三厢</a>
<hr align="center"><a href="#">
福特福克斯两厢</a>
<hr align="center"><a href="#">
新福特嘉年华三厢</a>
<hr align="center"><a href="#">
新福特嘉年华两厢</a>
<hr align="center"><a href="#">
福特全顺</a>
<hr align="center"><a href="#">
福特新世代全顺</a>
</div>
<div class="bottom4"><img src="tu20.jpg" alt="福特嘉年华2011" height:534px;width:"765px"></div>
<div class="bottom5">
<a href="#">1 </a>
<a href="#">2 </a>
<a href="#">3</a>
<a href="#"> 4</a>
<a href="#"> 5</a>
<a href="#"> 6</a>
<a href="#"> 7</a>
<a href="#"> 8</a>
<a href="#"> 9</a>
<a href="#"> 下一页 </a>
<a href="#">>></a>
<a href="#"> 首页</a>
<a href="#">末页</a>
</div>
<div class="bottom6">
<hr align="center">
<a href="#">隐私权保护</a>
<a href="#">声明版权保护 </a>
<a href="#">网站地图 </a>
<a href="#">联系我们</a>
<a href="#">福特全球24小时客服热线 </a>
<a href="#">2011福特汽车(中国)有限公司 </a>
<a href="#">版权所有</a>
<a href="#"> 沪ICP备05031283号</a>
</div>
</div>
</body>
</html>
2、 后台设计
<!--#include file="inc/conn.asp"-->
<!--#include file="inc/sqlin.asp"-->
<%
Keyword=Trim(request.QueryString("Key"))
CurrentSort=Trim(request.QueryString("SortID"))
Sql="select * from Idea_Product where IsShow="&GetState()
if CurrentSort<>"" then
if not IsNumeric(request.QueryString("SortID")) then
Response.Write "<script>alert('参数错误!');history.go(-1);</script>"
response.End()
else
SqlSort="select * from Idea_ProductSort where ID="&CurrentSort
set rs=idea.exec(SqlSort,1)
if not rs.eof then
Title=rs("SortName")
Sql=Sql+" and SortID="&Cint(CurrentSort)&""
else
Response.Write "<script>alert('参数不在接收范围!');history.go(-1);</script>"
response.End()
end if
rs.close
set rs=nothing
end if
else
Title="福特汽车中国站——汽车展示"
end if
if request.QueryString("Key")<>"" then
Sql=Sql&" and ProductName like '%"&Keyword&"%'"
end if
Page = Trim(Request.QueryString("Page"))
if Page = "" or Page < "1" then
Page = "1"
end if
set rspage=idea.exec(Sql,1)
if session("PageSize")="" or isnull(session("PageSize")) then
session("PageSize")="9"
end if
rspage.pagesize=cint(session("PageSize"))
Page = CInt(Page)
if rspage.pagecount > "0" then
rspage.absolutepage = Page
end If
IndexTemplateHtml=Replace(FSOFileRead("template/"&idea_3&"/html/productlist.html"),"{template_head}",FSOFileRead("template/"&idea_3&"/html/head.html"))
IndexTemplateHtml=Replace(IndexTemplateHtml,"{template_foot}",FSOFileRead("template/"&idea_3&"/html/foot.html"))
IndexTemplateHtml=replace(IndexTemplateHtml,"images/","template/"&idea_3&"/images/")
AllTemplateHtml=ReplaceGlobalLable(GetAllHtml_List(IndexTemplateHtml,Const_Rule,CurrentSort,Keyword,Page))
PageNumber_1=viewPage(rspage.recordcount,Page,4,session("PageLength"),rspage.pagecount,CurrentSort)
GetAllHtml2=replace(AllTemplateHtml,"{idea_pagenumber}",PageNumber_1)
GetAllHtml2=replace(GetAllHtml2,"{idea_title}",Title)
response.write GetAllHtml2
rspage.close
set rspage=nothing
'-----------------------------显示分页-----------------------------------
Function viewPage(AllRecordsCount,CurrentPage,BeforePages,ViewPageCount,AllPageNumber,CurrentSort)
Str_PageList1=MakePageNumber(CurrentPage,BeforePages,ViewPageCount,AllPageNumber,"asp",CurrentSort)
if CurrentPage=1 then
FirstPagelink="首页"
LastPagelink="上一页"
else
FirstPagelink="<a href=?SortID="&CurrentSort&">首页</a>"
if CurrentPage=2 then
LastPagelink="<a href=?SortID="&CurrentSort&">上一页</a>"
else
LastPagelink="<a href=?SortID="&CurrentSort&"&Page="&CurrentPage-1&">上一页</a>"
end if
end if
if CurrentPage=AllPageNumber then
NextPagelink="下一页"
FinalPagelink="尾页"
else
NextPagelink="<a href=?SortID="&CurrentSort&"&Page="&CurrentPage+1&">下一页</a>"
FinalPagelink="<a href=?SortID="&CurrentSort&"&Page="&AllPageNumber&">尾页</a>"
end if
Str_PageList2="页次:"&CurrentPage&"/"&AllPageNumber&"页 "&FirstPagelink&" "&LastPagelink&" "&Str_PageList1&" "&NextPagelink&" "&FinalPagelink&" 共"&AllRecordsCount&"条记录 "
viewPage=Str_PageList2
End Function
%>
3、 前后台集成
后台修改到数据库代码
<%
action=Request.QueryString ("Action")
Select Case Lcase(action)
Case "delall"
Call dell_colume()
Case "add"
Call add_colume()
Case "update"
Call update_colume()
End Select
Sub dell_colume
ID=trim(request("chk"))
If ID="" Then response.write"<script language=javascript>alert('没有选择数据');history.go(-1);</script>":response.End
sql="delete from Idea_News where ID in("&ID&")"
Call idea.exec("",-1)
set rs = server.createobject("adodb.recordset")
conn.execute(sql)
set rs=nothing
response.write "<script language=javascript>alert('数据删除成功');location.href='Admin_News.asp';</script>"
End Sub
Sub add_colume
NewsName=trim(request("NewsName"))
SortID=trim(request("Sort"))
SSource=trim(request("Source"))
Publisher=trim(request("Publisher"))
NewsPic=trim(request("pic"))
sNewsPic=trim(request("spic"))
Content=trim(request("Content"))
if(trim(request("IsShow"))<>"") then
IsShow=1
else
IsShow=0
end if
sql="insert into Idea_News([NewsName],[SortID],[Source],[NewsPic],[sNewsPic],[Content],[Publisher],[IsShow]) values('"&NewsName&"',"&SortID&",'"&SSource&"','"&NewsPic&"','"&sNewsPic&"','"&Content&"','"&Publisher&"','"&IsShow&"')"
Call idea.exec("",-1)
set rs = server.createobject("adodb.recordset")
conn.execute(sql)
set rs=nothing
response.write "<script language=javascript>alert('数据添加成功');location.href='Admin_News.asp';</script>"
End Sub
Sub update_colume
ID=trim(request("ID"))
NewsName=trim(request("NewsName"))
SortID=trim(request("Sort"))
SSource=trim(request("Source"))
Publisher=trim(request("Publisher"))
NewsPic=trim(request("pic"))
sNewsPic=trim(request("spic"))
Content=trim(request("Content"))
if(trim(request("IsShow"))<>"") then
IsShow=1
else
IsShow=0
end if
sql="update Idea_News set [NewsName]='"&NewsName&"',[SortID]="&SortID&",[Source]='"&SSource&"',[NewsPic]='"&NewsPic&"',[sNewsPic]='"&sNewsPic&"',[Content]='"&Content&"',[Publisher]='"&Publisher&"',[IsShow]='"&IsShow&"' where ID="&ID&""
Call idea.exec("",-1)
set rs = server.createobject("adodb.recordset")
conn.execute(sql)
set rs=nothing
response.write "<script language=javascript>alert('数据更新成功');location.href='Admin_News.asp';</script>"
End Sub
Function Inf_Count()
sql="select * from Idea_News"
set rs=idea.exec(sql,1)
Inf_Count=rs.recordcount
rs.close
set rs=nothing
End Function
%>
前台从数据库调用代码
<!--#include file="inc/conn.asp"-->
<!--#include file="inc/sqlin.asp"-->
<%
Keyword=Trim(request.QueryString("Key"))
CurrentSort=Trim(request.QueryString("SortID"))
Sql="select * from Idea_News where IsShow="&GetState()
if CurrentSort<>"" then
if not IsNumeric(request.QueryString("SortID")) then
Response.Write "<script>alert('参数错误!');history.go(-1);</script>"
response.End()
else
SqlSort="select * from Idea_NewsSort where ID="&CurrentSort
set rs=idea.exec(SqlSort,1)
if not rs.eof then
Title=rs("SortName")
Sql=Sql+" and SortID="&Cint(CurrentSort)&""
else
Response.Write "<script>alert('参数不在接收范围!');history.go(-1);</script>"
response.End()
end if
rs.close
set rs=nothing
end if
else
Title="福特汽车中国站——汽车展示 "
end if
if request.QueryString("Key")<>"" then
Sql=Sql&" and NewsName like '%"&Keyword&"%'"
end if
Page = Trim(Request.QueryString("Page"))
if Page = "" or Page < "1" then
Page = "1"
end if
set rspage=idea.exec(Sql,1)
if session("PageSize")="" or isnull(session("PageSize")) then
session("PageSize")="6"
end if
rspage.pagesize=cint(session("PageSize"))
Page = CInt(Page)
if rspage.pagecount > "0" then
rspage.absolutepage = Page
end If
IndexTemplateHtml=Replace(FSOFileRead("template/"&idea_3&"/html/newslist.html"),"{template_head}",FSOFileRead("template/"&idea_3&"/html/head.html"))
IndexTemplateHtml=Replace(IndexTemplateHtml,"{template_foot}",FSOFileRead("template/"&idea_3&"/html/foot.html"))
IndexTemplateHtml=replace(IndexTemplateHtml,"images/","template/"&idea_3&"/images/")
AllTemplateHtml=ReplaceGlobalLable(GetAllHtml_List(IndexTemplateHtml,Const_Rule,CurrentSort,Keyword,Page))
PageNumber_1=viewPage(rspage.recordcount,Page,4,session("PageLength"),rspage.pagecount,CurrentSort)
GetAllHtml2=replace(AllTemplateHtml,"{idea_pagenumber}",PageNumber_1)
GetAllHtml2=replace(GetAllHtml2,"{idea_title}",Title)
response.write GetAllHtml2
rspage.close
set rspage=nothing
Function viewPage(AllRecordsCount,CurrentPage,BeforePages,ViewPageCount,AllPageNumber,CurrentSort)
Str_PageList1=MakePageNumber(CurrentPage,BeforePages,ViewPageCount,AllPageNumber,"asp",CurrentSort)
if CurrentPage=1 then
FirstPagelink="首页"
LastPagelink="上一页"
else
FirstPagelink="<a href=?SortID="&CurrentSort&">首页</a>"
if CurrentPage=2 then
LastPagelink="<a href=?SortID="&CurrentSort&">上一页</a>"
else
LastPagelink="<a href=?SortID="&CurrentSort&"&Page="&CurrentPage-1&">上一页</a>"
end if
end if
if CurrentPage=AllPageNumber then
NextPagelink="下一页"
FinalPagelink="尾页"
else
NextPagelink="<a href=?SortID="&CurrentSort&"&Page="&CurrentPage+1&">下一页</a>"
FinalPagelink="<a href=?SortID="&CurrentSort&"&Page="&AllPageNumber&">尾页</a>"
end if
Str_PageList2="页次:"&CurrentPage&"/"&AllPageNumber&"页 "&FirstPagelink&" "&LastPagelink&" "&Str_PageList1&" "&NextPagelink&" "&FinalPagelink&" 共"&AllRecordsCount&"条记录 "
viewPage=Str_PageList2
End Function
五、 实验总结
通过这次试验,再一次让我温习了网站设计与制作的知识,以及上学期学的ASP。感觉这学期学的没有上学期好学,上学期学的没有网页设计与制作这门课好学,当然,课越简单越好学了,估计应该我下的功夫不多吧,对这门课的作业感到不知所措,不知道怎么下手做,asp这门课很有用,我也想好好学会它。可是我还是不够努力,学得不好,还请老师原谅。对于以后的课程争取尽自己最大的努力,学习更多的知识,不要像这门课程一样留下了太多的遗憾。
文章来自于:文章有 80后印象:http://www.80hyx.com/ 和点点网:http://www.diandian361.com/整理,欢迎大家下载!
C++程序设计实验报告学号:姓名:班级:指导老师:实验一、字符和格式的输出实验一,实验目的1、重点把握各种内部数据类型、数值和逻辑…
C语言程序设计实验报告1实验目的(1)掌握函数的定义方法、调用方法、参数说明以及返回值;(2)掌握实参与形参的对应关系,以及参数之…
学生实验报告册(理工类)课程名称:JAVA程序设计实验专业班级:M11计算机科学与技术II学生学号:学生姓名:所属院部:XX学院指…
西南交通大学程序设计综合实验实验地点实验学期学生班级学生学号学生姓名任课教师龚勋信息科学与技术学院20xx年4月实验一ATM机用户…
C语言程序设计实验报告学号不告诉你哦班级信管一班姓名你猜猜哈哈一实验题目一编程实验猜数问题输入两个整数并求这两个整数的和输入所猜的…
洛阳理工学院课程设计报告课程名称设计题目专业班级学号王路霞姓名B10050802B100508计算机科学与技术图书销售管理系统AS…
武汉工业学院网站开发工具实验指导书适用专业计算机科学与技术专业制定人蒋丽华教研室计算机科学与技术教研室数学与计算机学院20xx年1…
课程设计Javaweb开发课程设计论坛系统用户注册界面的设计目录设计目的设计内容及目标定义CSS样式也就是网页样式4利用HTML语…
洛阳理工学院课程设计报告课程名称Web程序设计课程设计设计题目学生成绩管理系统专业计算机科学与技术班级学号姓名完成日期20xx62…
Web程序设计实验指导书东北林业大学信息与计算机工程学院计算机科学与技术专业11实验目的与要求12实验环境23上机环境24实验一般…
Web程序设计课程设计目录1系统应用背景22系统需求分析33系统技术分析431技术分析4311ASPNET简介4312SQLSev…