网页设计与制作课程设计图书在线系统
网页设计与制作题目：图书在线系统学生姓名学号班级成绩指导教师管理系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> </tr> </table> </form> </BODY> </HTML> 2. 点击修改，进入修改页面设计代码如下： <html><head><title>选择要修改的图书</title></head><body><br><form name="book" method="post" action="bupdate2.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="bupdate3.asp?id=1"> <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="16" 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"><input type="submit" value="更新" name="B2"></td> </tr> <tr> <td width="100%" bgcolor="#000080"></td> </tr> </table> </form> </BODY> </HTML> 3. 点击添加，进入添加图书页面4. 点击删除，进入删除图书页面1>.后台的Access共有四张表如下图：用户信息管理表：图书信息表：购买信息表：用户留言表：3.4网站的维护与使用 此网站是小型网站，维护起来方便简洁，主要有技术层面的和用户需求层面两个方面：1. 技术层面的维护即代码的实现。2. 用户需求层面的维护向用户调研，根据需求逐步完善网站，主要需调查以下几点：1）、 网站当前以及日后可能出现的功能需求。 2）、 客户对网站的性能（如访问速度）的要求和可靠性的要求。 3）、 确定网站维护的要求。 4）、 网站的实际运行环境。 5)、 网站页面总体风格以及美工效果（必要的时候用户可以提供参考站点或者由公司向用户提供）。 6)、 主页面和次级页面数量，是否需要多种语言版本等 四、成果以及心得通过对这门课的学习，外加此次课程考核，即这次的在线图书管理系统的建设，我对网页设计有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。在具体的制作一个网页时我了解到一个优秀的网页设计应该具备以下一些基本原则1 确定网页设计的内容一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么，所有页面都是围绕着这个内容来制作，有了明确的内容对排名有很重要的作用。2 了解你网站所在行业的客户用户是一个网站成败的关键,如果用户要花很多时间进入你网站很有可能用户会立即关掉你网站,或者你网站操作很不方便用户也会马上离开,这种网站是很失败的设计,只会让用户失望的离去.3、做一个典型用户不以用户身份亲身体验网站你才能发现问题，才知道那些需要改进，尽量不要让客户去发现问题，在前期设计时就应该把这些问题解决。4 优化内容 内容是整个网站的核心。在网站设计之前必须明确网站的内容安排。优秀网页设计是要建立在平凡的基础上的。然后在具体的规划一个网站时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站 (有很多页面) 的时候，特别需要把这个架构规划好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构
个人主页