《基于WEB编程》
课程设计指导书
一、课程设计安排
1、设计目的：
Internet在短短的的十几年内，经历了飞速的发展，互联网几乎浪潮席卷了全球的每个角落。很多企业已经将互联网作为形象宣传、产品推销的主要手段。因此社会需要大量的网络和网站建设的人才，这给即将踏出校门的计算机专业的毕业生提供了巨大的就业机会。那么学生能不能把握这些机会，关键就要看学生有没有这样的能力。为此，信息工程系开设网站建设课程设计，目的就是要使学生在已经学习和掌握相关课程的基础上，将自己的专业知识综合运用，并将其运用于实践中，以努力提高学生在这方面的动手能力。
2、设计目标：
目标是衡量学生是否取得效果的重要标志，这次课程设计的目标就是培养学生具有专业网站初步的规划、设计、制作能力。具体表现在网站内容、功能、安全等方面合理策划和规划；培养具有主页和二级页面的创意、设计、美工等方面的技术处理能力和具有强大的动态效果制作能力。培养学生具有基于后台数据库的编程技术，实现客户—服务器端交互式动态网页的制作能力。
3、设计内容：
WEB站点服务器的创建、配置、调试；网页制作三剑客即Deamweaver、Flash、Firework软件的运用，HTML标记语言、JavaScript和VbScript编程；ASP内建对象和可安装组件；SQL-Server数据库的安装与配置；结构化数据库语言SQL等。
4、设计课题：
制作专业性网站，学生可以从以下课题中选择自己感兴趣的课题或者自选课题。
序号
课 题
要 求
1
企业网站
1、 Flash首页1个；2、静态页面制作5幅 ；3、 网站计数器1个；4、产品价格的录入与查询； 5、用户的信息反馈；6、管理页面
2
商业网站
1、 Flash首页1个；2、静态页面制作10幅 ；3、 网站计数器1个；4、商品价格的录入与查询；5、管理页面；
3
政府网站
1、 Flash首页1个；2、静态页面制作5幅 ；3、 网站计数器1个；4、会员注册系统1个；5、留言本一个；6、管理页面；
4
图书网站
1、 Flash首页1个；2、静态页面制作5幅 ；3、 网站计数器1个；4、会员注册系统1个；5、图书录入和借阅管理；6、读者意见箱一个；7、管理页面；
5
教育网站
1、 Flash首页1个；2、静态页面制作5幅 ；3、 网站计数器1个；4、会员注册系统1个；5、网上考试页面一个；6、管理页面；
6
娱乐网站
1、 Flash首页1个；2、静态页面制作10幅；3、 网站计数器1个；4、会员注册系统1个；5、影视欣赏页面一个；6、管理页面；
二、课程设计基本工作步骤
要想设计和制作出一个非常出色的网站，必须用心去把握网站建设步骤中每一个环节，基本上可分为以下几个步骤。
1、确定网站的主题、内容、功能；
在网站设计工作之前一定要明确网站的主题（如：学习、体育、娱乐、慈善、儿童、女性、军事、生活等等），要搞清
楚该网站应该包含哪些方面的具体内容，必须具备哪些功能等；否则就不能做到有的放矢，制作一个出色的网站也就无从谈起了。
如果是设计自己的个人主页，想要获得很高的点击访问率，确定主题一定要注意以下三点：1、主题要小而精，千万不要面面俱到，否则给人的感觉就是没有主题，没有特色，样样有却样样都很肤浅；2、题材最好是你自己擅长或者喜爱的内容。比如：您对足球感兴趣，可以报道最新的战况，球星动态等；3、主题需要创新，换句话说：也就是要有自己的特色，对于一些已经具有相当知名度的相同题材的网站，你要超过它是很非常困难的。
如果是为他人、企事业单位、社会团体等设计网页，在主题的确定方面同样需要注意以下几点：1、最好能全面的了解和掌握客户方的背景、文化、业务流程等方面的情况；2、网站主题、内容、功能方面的需求最好由客户方以书面的形式提供；3、对于客户提出的书面报告，每一项都要全面而深刻的理解，及时与客户进行沟通交流，切不可自以为是；这样日后可以少走弯路。
2、网站的整体设计
网站是各个单位、部门在互联网中的门面，一个好的网站能够通过非常出色的整体风格和版式设计将主题鲜明的表现出来；同时，页面看上去还要非常的美观。在完全了解客户的需求后，就可以进行网站的整体风格和版式设计阶段。在设计过程中，一定要周到考虑，耐心细致，绘制出相应的草图并附之以说明，从而形成详细而全面的设计文档资料。网站的整体风格和版式设计完成之后，将设计资料交由客户方审核；对客户提出的意见要做好记录并确定修改方案，经过多次的反复修订后，最终客户满意从而形成定稿，就可以开始下一阶段的工作。
网站的整体风格和版式设计分为以下几个部分：1、网站板式设计；2、网站的目录结构和导航栏的设计；3、数据库的设计；4、功能设计。
3、网页的详细设计
（1）功能设计：功能模块的划分
（2）界面设计：
1）整体效果：区域分配、风格的设计;
2）主界面（留言的显示）的设计：LOGO的设计标题、功能菜单、客户信息、版权信息显示区;
3）各个子页面的设计
4）后台管理的设计：如管理员的登录界面、系统资料的修改
（3）数据库设计：数据库管理系统采用、表结构的建立：
字段名
字段类型
宽度
字段属性
说明
（4）处理过程设计：第一种方案、第二种方案
4、网站的测试与发布
网站完成后在上传到服务器之前应该在安装不同浏览器的环境中进行测试，测试目的主要是察看：1、网站是否能够在不同的浏览器下能正常打开（如：Flash动画、JavaScript程序等）；2、测试所有的网页元素是否正常显示（如：字体、图片、色彩等）；3、测试网站中是否存在中断的链接等。如果以上测试都很正常就可以将整个网站上传到服务器中。
5、网站的更新与维护
网站运行一段时间后，通常会出现以下问题：1、网页的内容随着时间的推移会过时；2、先前没有发现的问题和不足逐步暴露出来。所以网站的更新与维护通常是不可少的；更新后的网站同样需要经过测试，然后再上传到服务器中覆盖旧的文件。
三、设计案例（某学院网站管理系统）
1、网站的整体与版式设计
（1）设计主页面（栏目的划分）
2、
（2）二级页面设计
新闻栏目
后台用户登录
后台管理界面
2、站点的目录结构设计
注释：kechengsheji(站点根目录)、admin（后台管理程序）、CSS（CSS样式表文件）、database（后台数据源与数据库）、images（网页中的插图与动画）、bottom.asp（页面的版权区域）、conn.asp（数据库的链结程序）、firstpage.asp(主页中的内容页面)、head.asp（页面中标题部分页面）、index.asp（网站主页）、show_news.asp（新闻栏目）。
（3）、数据库的设计
数据库中表的设计
注释：admin（管理员帐户表）、news（新闻内容表）、system（站点系统信息表）、type（导航栏标题表）
表结构的设计
news表
admin表
system表
type表
3、程序实现（部分代码）
index.asp //主页部分
<!--#include file="head.asp"-->
<!--#include file="firstpage.asp"-->
<!--#include file="bottom.asp"-->
head.asp //主页标题文件
<!--#include file="conn.asp"-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>安徽工业职业技术学院 </title>
<style type="text/css">
<!--
-->
</style>
<style type="text/css">
<!--
a:link {
color: #000000;
text-decoration: none;
font-size: 12px;
}
a:visited {
color: #000000;
text-decoration: none;
font-size: 12px;
}
a:hover {
color: #FF0000;
text-decoration: none;
font-size: 12px;
}
a:active {
color: #000000;
text-decoration: none;
font-size: 12px;
}
.unnamed2 {
font-size: 12px;
}
-->
</style>
<style type="text/css">
<!--
.button {
border: 1px solid #009999;
}
-->
</style>
</head>
<body>
<%sql="select * from system"
set rs=conn.execute(sql)%>
<table width="760" height="80" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="760" colspan="2" valign="middle" bgcolor="#CAC8CB">
<div align="center">
<%if trim(rs("banner_type"))="application/x-shockwave-flash" then%>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="88">
<param name="movie" value="admin/showpic.asp?action=banner">
<param name="quality" value="high">
<embed src="admin/showpic.asp?action=banner" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="88"></embed>
</object>
<%else%>
<img src="admin/showpic.asp?action=banner" width="760" height="88">
<%end if
rs.close%> </div></td>
</tr>
</table>
<table width="760" height="28" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#660000" background="admin/tupian/dh1.gif" class="unnamed1" style="border-collapse: collapse">
<tr>
<td> <div align="left" class="unnamed2"><a href="index.asp" target="_self">
</a><a href="index.asp">网站首页</a>
<%sql="select * from type"
set rs=conn.execute(sql)
do while not rs.eof%>
| <a href="<%=rs("url")%>"><%=rs("type")%></a>
<%rs.movenext
loop
rs.close
conn.close%>
</td>
</tr>
</table>
firstpage.asp //主页内容部分
<!--#include file="conn.asp"-->
<style type="text/css">
<!--
-->
</style>
<style type="text/css">
<!--
a:link {
color: #000000;
text-decoration: none;
font-size: 12px;
}
a:visited {
color: #000000;
text-decoration: none;
font-size: 12px;
}
a:hover {
color: #FF0000;
text-decoration: none;
font-size: 12px;
}
a:active {
color: #000000;
text-decoration: none;
font-size: 12px;
}
.unnamed2 {
font-size: 12px;
}
-->
</style>
<style type="text/css">
<!--
.button {
border: 1px solid #009999;
}
-->
</style>
<style type="text/css">
<!--
body {
font-size: 12px;
}
table {
font-size: 12px;
}
-->
</style>
<%
sql="select * from news order by id desc"
set rs=conn.execute(sql)%>
<table width="760" height="403" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#008080" id="AutoNumber1" style="border-collapse: collapse">
<tr>
<td width="242" height="16">[新闻图片]</td>
<td width="268">[学院新闻]</td>
<td width="235">[公告栏]</td>
</tr>
<tr>
<td height="203"><div align="center"><img src="admin/showpic1.asp?nid=<%=rs.fields("id")%>" width="242" height="200" title="点击看大图"></div></td>
<td valign="top"><table>
<% do while not rs.eof%>
<tr> <td>
<a href=show_news.asp?newsid=<%=rs(0)%> target="_blank" > <%=rs.fields("title").value & "[" & rs("updatetime") &"]" %></a>
</td></tr>
<%rs.movenext
loop
'rs.close
' conn.close%> </table></td>
<td> </td>
</tr>
<tr>
<td height="23">[部门链接]</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="101"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="58"> </td>
<td> </td>
<td> </td>
</tr>
</table>
bottom.asp //主页版权区域
<!--#include file="conn.asp"-->
<%
sqlStr="select * from system"
set rs=conn.execute(sqlStr)
%>
<style type="text/css">
<!--
.unnamed1 {
font-size: 12px;
}
-->
</style>
<table width="760" height="100" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#008080" id="AutoNumber1" style="border-collapse: collapse">
<tr>
<td bgcolor="#cee7e7">
<div align="center">校名:<%=rs("gsmc")%> <br>
地址：<%=rs("addr")%> 电话：<%=rs("phone")%><br>
网址：<%=rs("url")%> 电子邮件：<%=rs("email")%> <br>
<br>
</div></td>
</tr>
</table>
<br>
</body>
</html>
login.asp //用户登录界面程序
<%
dim s
randomize timer
s=Int((8999)*Rnd +1000)
%>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
function xxg()
{
if (document.form1.user.value==""){
alert("您的姓名？")
document.form1.user.focus();
return false
}
if (document.form1.password.value==""){
alert("您的密码？");
document.form1.password.focus();
return false
}
return true
}
function reset_form()
{
document.form1.user.value="";
document.form1.password.value="";
document.form1.s.value="";
document.form1.user.focus;
}
</script>
<style type="text/css">
<!--
.logintd1 {
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 16px;
}
.logintd2 {
font-family: "Arial", "Helvetica", "sans-serif";
font-size: 14px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="60" marginwidth="0" marginheight="0" oncontextmenu="return false;" onselectstart="return false;">
<table width="64%" height="54%" border="0" align="center" cellspacing="0">
<tr>
<td align="center"><form name="form1" method="post" action="loginchk.asp" onSubmit="return xxg()">
<table width="257" border="0" align="center" cellpadding="1" cellspacing="1" height="113" style="border: 1 solid #000000">
<tr>
<td height="23" colspan="2" background="../../../kechensheji/课程设计案例(kechengsheji)/pic/vip005bg.gif"><div align="center">
<p class="logintd1">后台管理登录</p>
</div></td>
</tr>
<tr>
<td width="71" align="center" class="logintd2">姓 名:</td>
<td width="179"> <input type="text" name="user"> </td>
</tr>
<tr>
<td width="71" align="center" class="logintd2">密 码:</td>
<td width="179"> <input type="password" name="password"> </td>
</tr>
<tr>
<td align="center" class="logintd2">认证码:</td>
<td><input name="s" type="text" size="14">
<b><%=s%></b>
<input maxlength=20 name="s2" size=12 type=hidden value="<%=s%>"></td>
</tr>
<tr>
<td align="center"> </td>
<td><input type="submit" name="Submit" value=" 登 陆 ">
<input type="reset" name="Submit2" value=" 取 消 " style="width: 64px" onClick="reset_form()"></td>
</tr>
</table>
</form></td>
</tr>
</table>
