资源描述
网页设计与制作
题目：图书在线系统
学生姓名
学号
班级
成绩
指导教师
管理系
2011 年 6 月 14 日
目 录
一、目的和意义
二、题目和要求
三、内容
3.1图书在线系统的介绍
3.2网站功能的实现(图表)
3.3网站重要页面的代码
3.4网站的维护与使用
四、成果以及心得 19
一、目的和意义
检验学生对本课程的最终学习效果，加深对网页设计与制作的基本知识的理解，网页设计与制作技能综合运用和提高，通过真实工作任务，使学生能设计出有一定水平的网页并解决培养解决实际问题的能力，掌握实际网页设计与制作开发流程和开发方法。
具体应达到以下目的：
1．提高学生在实际操作中收集信息，对信息进行价值判断，进行信息整理、加工的能力。
2．在实际的项目任务中培养网页设计方面的素养。
3．在实际的项目任务中使学生网页编程和制作的能力得到提高。
4．培养学生团队协作和人际交往方面的能力。
5. 培养相关知识和技能的综合应用能力。
二、题目和要求
应从专业网站建设的实际出发。具体要求如下：
1. 网站的选题自选。
2. 站点设计合理、管理有序、无多余文件和文件夹、大小合适。首页命名要规范，存放位置要正确，不可以是zhuye.htm、main.htm、我的主页.htm等。主页文件名应该使用index或default等。其他文件或文件名命名也要规范，不使用汉字或带有空格的名称。最好是符合各种系统命名规则。
3. 站点至少要有三层结构，页面数不得少于8页；其中一页必须是留言板；
4. 自选主题，主题内容要合法、健康、实用。
5. 网页要有版权说明；
6. 要仔细考虑网站定位。分析面向的潜在访客群体的需求特点，选择内容和版式。
7. 网站主题突出、内容丰富；
8. 网站与网页风格应该协调一致，网站结构应层次分明，内容重点突出，页面设计要符合追求色彩的搭配、布局和合理性，以及要有一定的创意。
9.各页面设计合理、美观，有创意。图片动画选用要适合主题，不要在网页中插入不相干的图片。适用于各种显示器的分辨率和颜色。不要太宽，否则显示器分辨率小时会出现水平滚动条。
10.各个页面之间的链接要合理有效，路径要正确（相对路径）；
11.注意网站的大小，图片保存格式和图片大小要合适；
12. 代码结构清晰，无垃圾代码
三、内容
3.1图书在线系统的介绍
本在线系统，的主要作用就是用来管理的出售图书的，它的主页面有2个其中后台服务一个，前台服务一个，二级页面有4个，还有部分三级页面，主要能实现图书的在线购买，查询等功能。后台能实现图书数据库的管理，可以浏览、修改、添加、删除图书，还可实现会员的管理，与ACCESS数据库连接。
3.2网站功能的实现(图表)
3.3网站重要页面的代码
图一所示，是网页的主页面，前台。
（一）、网站的前台
可实现在线购买，用户登录，用户名申请，用户注册，管理员登陆，图书的分类查询，留言管理等功能。
设计代码如下：
<%@ language=vbscript %>
<% option explicit
session("salecomplete") = false
dim connstr,conn,rs,sql,mode,itemno
connstr="dbq="+server.MapPath("mdb/bookshop.mdb")+";defaultdir=;driver={microsoft access driver (*.mdb)};"
set conn=server.CreateObject("adodb.connection")
conn.Open connstr
set rs=server.CreateObject("adodb.recordset")
sql="select * from book"
rs.open sql,conn,1,1 %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>书籍一览</title>
<script>
function openwin(id) { window.open("shopcart.asp?mode=add&itemno="+id,"","height=250,width=450,resizable=yes,scrollbars=yes,status=no,toolbar=no,menubar=yes,location=no");}
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<td width="30%" valign="top">
<table border="0" width="87%" height="156">
<tr>
<td width="100%" height="106">
<form method="post" action="usercheck.asp">
<table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000080"><font color="#ffffff">用户登录</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#ffffcc">昵称<input name="user1" size="14" >
<p>密码<input type="password" name="user2" size="14"></p>
<input type="submit" value="提交" name="B1"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td width="100%" height="16">
<form method="post" action="newusercheck.asp">
<table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000080"><font color="#ffffff">新用户注册</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#ffffcc">昵称<input name="newusername" size="15" >
<p><input type="submit" value="提交" name="B1"></p>
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td width="100%" height="16">
<table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000080"><font color="#ffffff">图书分类查询</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#ffffcc">
<form method="post" action="search.asp">
<p>分类<select size="1" name="class2">
<option selected>教育类</option>
<option>烹饪类</option>
<option>企业类</option>
<option>法律类</option>
<option>其他</option>
</select><br>
<input type="submit" value="提交" name="B1"></p>
</form>
</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#000000">
<td bgcolor="#000080"><font color="#ffffff">管理员登录</font></td>
</tr>
<tr bordercolor="#000000">
<td bgcolor="#ffffcc"><form method="post" action="check.asp">
<p>身份
<input name="T3" size="14">
<br>
密码
<input type="password" name="T3" size="14">
<br>
<input type="submit" value="提交" name="B3">
<input type="reset" value="全部重写" name="B3">
</p>
</form></td>
</tr>
<tr>
<td width="100%" height="16">
<table border="1" width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#000080"><font color="#ffffff">留言管理</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#ffffcc">
<form method="post" action="check.asp">
<p>内容
<input name="T1" size="14"><br>
标题
<input type="password" name="T2" size="14">
</p>
<p>昵称
<input type="password" name="T4" size="14">
<br>
<input type="submit" value="提交" name="B1">
<input type="reset" value="全部重写" name="B2">
</p>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="70%" valign="top">
<table border="1" width="520" bordercolor="#008000">
<tr>
<td width="426" bgcolor="#008080" style="BACKGROUND-COLOR: #6699cc"><font color="white" style="BACKGROUND-COLOR: #6699cc">书籍一览</font></td>
<td width="78"></td>
</tr>
<% do while not (rs.EOF or err)%>
<tr>
<td width="426">
<% if rs("photo")<>"" then response.write "<img border='0' src='" & rs("photo") & "' align='left'>"%><br>
书名：<%=rs(1)%><br>
作者：<%=rs("author")%><br>
单价：<%=rs(3)%><br>
简介：<%=rs("memo")%>
</td>
<td width="78">
<% Response.Write "<a href='javascript:openwin("+cstr(rs(0))+")'>购买</a>"%>
</td>
</tr>
<% rs.MoveNext
loop %>
<tr>
<td width="510" colSpan="2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<% rs.Close
set rs=nothing
conn.Close
set conn=nothing%>
1>.点击购买到如下页面
可实现如下功能，继续购买，改变数量，和结账。
设计代码如下：
<html>
<head>
<title>购物车</title>
<script language="javascript">
</script>
<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY>
<br>
<font color="#008000" size="-1">
<form action="shopcart.asp" method="POST" id=form2 name="form2">
你的购物篮包括以下物品:
<br><br>
<table align="center" border="0">
<tr bgcolor="#ff0066">
<th><font color="#ffff33" size="-1">
数量</font>
<th><font color="#ffff33" size="-1">
编号</font><font face="Verdana,Arial" color="#ffff33" size="-1">.</font>
<th><font color="#ffff33" size="-1">
书名</font>
<th><font color="#ffff33" size="-1">
价格</font>
<th><font color="#ffff33" size="-1">
小计</font>
</tr>
<tr bgcolor="#99ccff">
<td align="middle">
<font color="#000000" size="-1">
<input type='Text' name='txtItemQty1' value='1' size='3'></font></td>
<td align="middle">
<font color="#000000" size="-1">
2</font></td>
<td><font color="#000000" size="-1">
《中国名厨技巧博览》</font></td>
<td align="middle">
<font color="#000000" size="-1">
198</font></td>
<td align="right">
<font color="#000000" size="-1">
198</font></td>
</tr>
<tr bgcolor="#c5c5c5">
<td align="middle" colspan="4">
<font size="-1">总计</font></td>
<td align="right"><font size="-1">
￥198.00</font></td>
</tr>
</table>
<br><div align="center">
<input type="button" name="close" value="继续购物" onclick="javascript:window.close">
<input type="submit" name="cmdSubmit" value="改变数量" >
<br><br>
<input type="submit" name="cmdSubmit" value="结帐" >
</div></FORM>
</BODY>
</html>
2>.用户登录，用户名申请，用户注册，管理员登陆，图书的分类查询，留言管理等。
用户登录页面：
可查看用户自身的信息和修改信息
用户注册页面:
可按照提示填写信息，注册新用户。
还有图书分类页面、管理员登陆页面、留言管理页面等。
（二）、网站的后台
1>.后台的主页面如下图：
可实现图书数据库的浏览、修改、添加、删除等功能。
设计代码如下：
<html>
<head>
<title>网上书店管理</title>
</head>
<body>
<table border="0" width="59%" align="center">
<tr>
<td width="100%" bgcolor="#004080" colspan="6" align=center><font color="#ffffff">网上书店管理</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#efeec2" colspan="6"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#efeec2" colspan="6">图书数据库</td>
</tr>
<tr>
<td width="17%" bgcolor="#efeec2"> </td>
<td width="17%" bgcolor="#efeec2"><a href="blist.asp">浏览</a></td>
<td width="17%" bgcolor="#efeec2"><a href="bupdate1.asp">修改</a></td>
<td width="17%" bgcolor="#efeec2"><a href="badd.asp">添加</a></td>
<td width="16%" bgcolor="#efeec2"><a href="bdel.asp">删除</a></td>
<td width="16%" bgcolor="#efeec2"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#efeec2" colspan="6">顾客数据库</td>
</tr>
<tr>
<td width="17%" bgcolor="#efeec2"> </td>
<td width="17%" bgcolor="#efeec2">浏览</td>
<td width="17%" bgcolor="#efeec2">修改</td>
<td width="17%" bgcolor="#efeec2">添加</td>
<td width="16%" bgcolor="#efeec2">删除</td>
<td width="16%" bgcolor="#efeec2"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#efeec2" colspan="6">定单数据库</td>
</tr>
<tr>
<td width="17%" bgcolor="#efeec2"> </td>
<td width="17%" bgcolor="#efeec2">浏览</td>
<td width="17%" bgcolor="#efeec2">修改</td>
<td width="17%" bgcolor="#efeec2">添加</td>
<td width="16%" bgcolor="#efeec2">删除</td>
<td width="16%" bgcolor="#efeec2"> </td>
</tr>
<tr>
<td width="100%" bgcolor="#efeec2" colspan="6">
<p align="center"> <a href="default.asp">返回</a></p>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#004080" colspan="6">
<p align="center"><font color="#ffffff">2002.10.22</font></p></td>
</tr>
</table>
</body>
</html>
1. 点击浏览，进入浏览页面
设计代码如下：
<html>
<head>
<title>浏览图书</title>
</head>
<body>
<br>
<form name="book" method="post" action="bview.asp">
<table border="0" width="100%">
<tr>
<td width="100%"
style="BACKGROUND-COLOR: darkblue"><FONT color=white
style="BACKGROUND-COLOR: #00008b">图书管理(浏览页面)</FONT></td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="11">《中小企业拓展方略》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="10">《教女成凤的艺术》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="9">《教子成龙的艺术》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="8">《金榜题名的艺术》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="7">《未来飓风》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="5">《百鸟荟萃》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="4">《著名律师精彩辩词》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="3">《中外调味大全》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="2">《中国名厨技巧博览》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="radio" name="bookchange" value="1">《高中英语超快突破手册》</td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: cornsilk"><input type="submit" value="提交" name="B1"><input type="button" value="返回" name="B2" onclick="javascript:top.document.location='manage.htm'"></td>
</tr>
<tr>
<td width="100%"
style="BACKGROUND-COLOR: darkblue"> </td>
</tr>
</table>
</form>
</body>
</html>
点击提交：
设计代码如下：
<HTML>
<HEAD>
<TITLE>图书详细信息浏览</TITLE>
</HEAD>
<BODY>
<br><br>
<form method="POST" action="bupdata.asp">
<table border="0" width="100%">
<tr>
<td width="100%" bgcolor="#000080"><font color="#FFFFFF">书籍浏览</font></td>
</tr>
<tr>
<td width="100%" bgcolor="#FCFDEE">书 名<input type="text" name="book" size="20" value="《高中英语超快突破手册》">作者<input type="text" name="author" size="20" value="廖加彬">单价<input type="text" name="price" size="12" value="20">类别<input type="text" name="class" size="14" value="教育类"></td>
</tr>
<tr>
<td width="100%" bgcolor="#FCFDEE">出版社<input type="text" name="publish" size="20" value="吉林教育出版社">照片<input type="text" name="photo" size="20" value="pic/book_gzyy.jpg">数量<input type="text" name="num" size="11" value="49"></td>
</tr>
<tr>
<td width="100%" bgcolor="#FCFDEE"><textarea rows="11" name="memo" cols="91">华夏文化艺术中心现向您推荐由廖加彬编著、吉林教育出版社出版的具有很强实用性的《高中英语超快突破手册》高一、高二、高三版。本书针对现代中学生的学习特点和现状进行了精心设计，以减少广大中学生的记忆压力为目的，做到用最少的时间和精力，取得最佳词汇记忆效果。</textarea></td>
</tr>
<tr>
<td width="100%" bgcolor="#FCFDEE"><input type="button" value="返回" name="B1" onclick="javascript:top.document.location='blist.asp'"></td>
</tr>
<tr>
<td width="100%" bgcolor="#000080"> </td
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
