一、 实习时间
20##年12月 —— 20##年1月
二、 实习地点
沈阳农业大学高等职业技术学院实训楼六楼
三、 指导教师
焦凤红
四、 实习目的
本次实习的目的是:通过实际整个网站的制作把以前所学的知识进行整合。
五、 实习内容
一、前台的制作
1.1、模板的制作
做网站每一步是先做好模板,做完一个好的模板对以后的工作就会轻松很多。
模板代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>模板</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-size: 12px;
}
.STYLE1 {
font-size: 16px;
font-weight: bold;
}
.STYLE4 {font-size: 16px}
a {
font-size: 14px;
color: #000066;
}
a:visited {
color: #000066;
text-decoration: none;
}
a:hover {
color: #6666FF;
text-decoration: underline;
}
a:link {
text-decoration: none;
}
a:active {
text-decoration: none;
}
body {
margin-top: 0px;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" valign="middle"><img src="images/logo.jpg" width="900" height="204" border="0" usemap="#Map9" /></td>
</tr>
<tr>
<td height="34" align="center" valign="middle" background="images/dh.jpg"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/dh.jpg">
<tr>
<td height="34" align="center" valign="middle"><a href="index.asp">首页</a></td>
<td align="center" valign="middle"><a href="hqgk.asp">后勤概况</a></td>
<td align="center" valign="middle"><a href="jgsz.asp">机构设置</a></td>
<td align="center" valign="middle"><a href="gzzd.asp">规章制度</a></td>
<td align="center" valign="middle"><a href="tzgg.asp">通知公告</a></td>
<td align="center" valign="middle"><a href="dqjs.asp">党群建设</a></td>
<td align="center" valign="middle"><a href="gczb.asp">工程招标</a></td>
<td align="center" valign="middle"><a href="wjxz.asp">文件下载</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="582" align="center" valign="top"><table width="100%" height="582" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="23%" height="582" align="center" valign="top"><table width="100%" height="599" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="99" align="center" valign="top">
<iframe src="http://m.weather.com.cn/n/pn10/weather.htm?id=101070101T " width="200" height="100" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" allowtransparency="ture">
</iframe>
</td>
</tr>
<tr>
<td align="center" valign="top"><table width="73%" height="372" border="1" align="center" cellpadding="1" cellspacing="4" bordercolor="#B3D648">
<tr>
<td width="42%" height="89" align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><img src="images/cl.jpg" width="70" height="70" border="0" usemap="#MapMap" />
</td>
</tr>
<tr>
<td align="center" valign="middle">运输服务
</td>
</tr>
</table></td>
<td width="58%" align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><img src="images/cy.jpg" width="70" height="70" border="0" usemap="#Map2Map" /></td>
</tr>
<tr>
<td height="15" align="center" valign="middle">餐饮服务</td>
</tr>
</table></td>
</tr>
<tr>
<td height="86" align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/dgb.jpg" width="70" height="70" border="0" usemap="#Map3Map" /></td>
</tr>
<tr>
<td align="center" valign="middle">电工班</td>
</tr>
</table></td>
<td align="center" valign="top">
<table width="79%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/lh.jpg" width="70" height="70" border="0" usemap="#Map4Map" /></td>
</tr>
<tr>
<td align="center" valign="middle">绿化服务</td>
</tr>
</table></td>
</tr>
<tr>
<td height="86" align="center" valign="top">
<table width="67%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/sf.jpg" width="70" height="70" border="0" usemap="#Map5Map" /></td>
</tr>
<tr>
<td align="center" valign="middle">收费服务</td>
</tr>
</table></td>
<td align="center" valign="top">
<table width="67%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/sn.jpg" width="70" height="70" border="0" usemap="#Map6Map" /></td>
</tr>
<tr>
<td align="center" valign="middle">水暖服务</td>
</tr>
</table></td>
</tr>
<tr>
<td height="89" align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/wss.jpg" width="70" height="70" border="0" usemap="#Map7Map" /></td>
</tr>
<tr>
<td height="12" align="center" valign="middle">卫生所</td>
</tr>
</table></td>
<td align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<img src="images/wx.jpg" width="70" height="70" border="0" usemap="#Map8Map" /></td>
</tr>
<tr>
<td height="12" align="center" valign="middle">维修服务</td>
</tr>
</table></td>
</tr>
</table>
<map name="MapMap" id="MapMap">
<area shape="rect" coords="2,3,65,65" href="detail.asp?id=153" />
</map>
<map name="Map2Map" id="Map2Map">
<area shape="rect" coords="4,4,63,65" href="detail.asp?id=163" />
</map>
<map name="Map3Map" id="Map3Map">
<area shape="rect" coords="2,2,67,67" href="detail.asp?id=164" />
</map>
<map name="Map4Map" id="Map4Map">
<area shape="rect" coords="3,3,67,66" href="detail.asp?id=165" />
</map>
<map name="Map5Map" id="Map5Map">
<area shape="rect" coords="2,3,67,64" href="detail.asp?id=166" />
</map>
<map name="Map6Map" id="Map6Map">
<area shape="rect" coords="4,2,67,65" href="detail.asp?id=167" />
</map>
<map name="Map7Map" id="Map7Map">
<area shape="rect" coords="3,1,67,67" href="detail.asp?id=168" />
</map>
<map name="Map8Map" id="Map8Map">
<area shape="rect" coords="3,2,68,66" href="detail.asp?id=169" />
</map>
</td>
</tr>
<tr>
<td height="128" align="center" valign="top"><table width="92%" height="125" border="0" cellpadding="0" cellspacing="0" bordercolor="#999999">
<tr>
<td height="29" align="center" valign="top"><span class="STYLE1">友情链接</span></td>
</tr>
<tr>
<td height="26" align="center" valign="middle"><span class="STYLE4"><a href="http://www.baidu.com">百度</a></span></td>
</tr>
<tr>
<td height="23" align="center" valign="middle"><span class="STYLE4"><a href="http://www.sohu.com">搜狐</a></span></td>
</tr>
<tr>
<td height="22" align="center" valign="middle"><span class="STYLE4"><a href="http://www.163.com">网易</a></span></td>
</tr>
<tr>
<td height="22" align="center" valign="middle"><span class="STYLE4"><a href="http://www.google.com">谷歌</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="77%" align="left" valign="top"><!-- TemplateBeginEditable name="EditRegion3" --><!-- TemplateEndEditable --></td>
</tr>
</table></td>
</tr>
<tr>
<td height="49" align="center" valign="middle" bgcolor="#5FB72D">版权所有:后勤部<br />
如有转载请注明出处
<br /></td>
</tr>
</table>
<div align="center"></div>
<div align="center"></div>
<map name="Map" id="Map"><area shape="rect" coords="2,3,65,65" href="detail.asp?flag=8" />
</map>
<map name="Map2" id="Map2"><area shape="rect" coords="4,4,63,65" href="detail.asp?flag=9" />
</map>
<map name="Map3" id="Map3"><area shape="rect" coords="2,2,67,67" href="detail.asp?flag=10" />
</map>
<map name="Map4" id="Map4"><area shape="rect" coords="3,3,67,66" href="detail.asp?flag=11" />
</map>
<map name="Map5" id="Map5"><area shape="rect" coords="2,3,67,64" href="detail.asp?flag=12" />
</map>
<map name="Map6" id="Map6"><area shape="rect" coords="4,2,67,65" href="detail.asp?flag=13" />
</map>
<map name="Map7" id="Map7"><area shape="rect" coords="3,1,67,67" href="detail.asp?flag=14" />
</map>
<map name="Map8" id="Map8"><area shape="rect" coords="2,2,67,66" href="detail.asp?flag=15" />
</map>
<map name="Map9" id="Map9">
<area shape="circle" coords="732,145,18" href="htwh/login.asp" />
</map></body>
</html>
对于完全相同部分的网页,直接用模板就行了。这样可以省去不少的麻烦。前台网站的制作基本上就用模板直接建就可以了。模板最大的好处不是他能让我们建网页时放便,而是在修改时,只要修改模板就可以把所有用模板建的网页同时进行修改。
二、后台的制作
对于建立网站来说,前台只是人们看到的部分,但随着INETNERT的飞速发展,网页需要不断的更新,这就需要做动态网页了,提到动态网页就不得不提数据库和数据库的链接问题了,这也关系着以后的网站能不能实现动态的更新,所以相对于前台注重美观,后台更加注重功能。
2.1、登录窗口
为了能让前台和后台链接起来,就需要有一个中转站,那就是登录窗口了
录窗口代码如下:
<html>
<head>
<title>后台登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../images/css.css" rel="stylesheet" type="text/css">
</head>
<script language="javascript">
function SubmitOk()
{
var uid = document.form1.uid.value ;
var upwd = document.form1.upwd.value ;
if (uid=='')
{
alert("请填写用户名!");
document.form1.uid.focus();
return false;
}
if (upwd=='')
{
alert("请填写密码!");
document.form1.upwd.focus();
return false;
}
form1.submit();
}
</script>
<body bgcolor="#FFFF99">
<form name="form1" method="post" action="pass.asp">
<table width="300" height="264" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="97"> </td>
</tr>
<tr>
<td height="100" align="center" bgcolor="#FFFFFF"><table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32%" height="30"><div align="center">用户名:</div></td>
<td width="68%"><input name="uid" type="text" class="input" id="uid2" size="15"></td>
</tr>
<tr>
<td height="30"><div align="center">密 码:</div></td>
<td height="30"><input name="upwd" type="password" class="input" id="upwd" size="15"></td>
</tr>
<tr>
<td height="44"><div align="center"> </div></td>
<td height="44"><input name="Submit" type="button" class="button" value="登录" onClick="SubmitOk()">
<input name="Submit2" type="button" class="button" value="退出"></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
这段代码主要实现的功能是对用户的一个验证,如果用户正确就能进入到后台,如果错误就会出现提示。
2.2、后台维护
当进入到后台后,效果图如下1-1:
图1-1
图1-1就是进入到后台的效果图,对后台进行维护。
代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!--#include file="../common/connection.asp"-->
<!--#include file="../common/check.txt"-->
<%
Call admincheck
%>
<html>
<head>
<title>后台管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../images/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.样式1 {color: #FF0000}
-->
</style>
</head>
<body bgcolor="#FFFFCC" topmargin="0">
<table width="600" height="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="135" height="103" valign="top" bgcolor="#336699"><!--#include file="left.asp"--></td>
<td width="465" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#99CC66">
<tr>
<td width="59%" height="30"> 您目前所出的位置>>后台管理</td>
<td width="41%"><p>恭喜<span class="样式1"><%=session("uname")%></span>登陆成功!</p> </td>
<td width="0%"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.3.1、打开数据库
在这里不得不提到两个变量,分别是<!--#include file="../common/connection.asp"-->和<!--#include file="../common/check.txt"--对网段代码的引用。
2.3.1
<!--#include file="../common/connection.asp"-->代码如下:
<%
' ============================================
' 数据库连接
' ============================================
set conn=Server.CreateObject("adodb.connection")
connString ="Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("../data/news.mdb")
conn.open connString
%>
主要实现对数据库的调用
2.3.2、验证是否正确
<!--#include file="../common/check.txt"—内部代码如下:<%
' ============================================
' ~{<l2bUK;'JG7qSPP'~}
' ============================================
Sub admincheck()
uname=session("uname")
Set rs=Server.CreateObject("ADODB.Recordset")
sql="SELECT * FROM NEWS_USERS where uname='"&uname&"'"
rs.open sql,conn,1,1
if rs.eof then
rs.close
response.redirect("../htwh/error.asp")
end if
rs.close
End sub
Session.Timeout = 20 ' ~{!.~}20~{7VVS:s~}Session~{1dA?WT6/O{J'~}
%>
主要是真对用户是否正确,如果正确就会打开数据库,如果错误就会有提示信息。
2.4实现修改功能的代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!--#include file="../common/connection.asp"-->
<!--#include file="../common/check.txt"-->
<!--#include file="../common/replace.asp"-->
<%
Call admincheck
%>
<%
dim id,title,content,flag
id = request.QueryString("id")
flag = request.QueryString("flag")
set rs = server.CreateObject("adodb.recordset")
sql = "select * from news_xxfb where lrr='"&session("id")&"' and id ="&id
rs.open sql,conn,1,1
if not rs.bof and not rs.eof then
title = replace_t(rs("title"))
content = replace_t(rs("content"))
end if
rs.close
set rs = nothing
%>
<html>
<head>
<title>后台管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../images/css.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
<style type="text/css">
<!--
.样式1 {color: #FF0000}
-->
</style>
</head>
<script language="javascript">
function SubmitOk()
{
var title = document.form1.title.value ;
if (title=='')
{
alert("请填写标题!");
document.form1.title.focus();
return false;
}
if (confirm("确定要修改吗?"))
{
form1.submit();
}
}
</script>
<body bgcolor="#FFFFCC" topmargin="0">
<table width="600" height="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="135" height="103" valign="top" bgcolor="#336699"><!--#include file="left.asp"--></td>
<td width="465" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#99CC66">
<tr>
<td width="49%" height="30"> 您目前所出的位置>>后台管理>><span class="style2"><font color="#FF0000"><%=lm%></font></span></td>
<td width="51%"><p>恭喜<span class="样式1"><%=session("uname")%></span>登陆成功!</p> </td>
</tr>
</table>
<form name="form1" method="post" action="new_sql.asp">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="15"> </td>
<td>标题:</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"><input name="title" type="text" class="input" id="title" value="<%=title%>" size="70"></td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">内容:</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"><textarea name="content" cols="70" rows="30" class="input" id="content"><%=content%></textarea></td>
</tr>
<tr align="center">
<td height="40" colspan="2"><input name="flag" type="hidden" id="flag" value="<%=flag%>">
<input name="id" type="hidden" id="id" value="<%=id%>">
<input name="action" type="hidden" id="action" value="update">
<input name="Submit" type="button" class="button" value="修改" onClick="SubmitOk()">
<input name="Submit2" type="button" class="button" onClick="MM_goToURL('parent','news.asp');return document.MM_returnValue" value="返回">
</td>
</tr>
</table>
</form> </td>
</tr>
</table>
</body>
</html>
2.5、添加记录功能
代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<!--#include file="../common/connection.asp"-->
<!--#include file="../common/check.txt"-->
<%
Call admincheck
%>
<html>
<head>
<title>后台管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../images/css.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>
<style type="text/css">
<!--
.样式1 {color: #FF0000}
-->
</style>
</head>
<script language="javascript">
function SubmitOk()
{
var title = document.form1.title.value ;
if (title=='')
{
alert("请填写标题!");
document.form1.title.focus();
return false;
}
if (document.form1.content.value=="")
{
window.alert ("内容不能为空!")
return false
}
if (confirm("确定要添加吗?"))
{
form1.submit();
}
}
</script>
<%
flag=Request.QueryString("flag")
%>
<body bgcolor="#FFFFCC" topmargin="0">
<table width="600" height="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="135" height="103" valign="top" bgcolor="#336699"><!--#include file="left.asp"--></td>
<td width="465" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#99CC66">
<tr>
<td width="49%" height="30"> 您目前所出的位置>>后台管理>><span class="style2"><font color="#FF0000"><%=lm%></font></span></td>
<td width="51%"><p>恭喜<span class="样式1"><%=session("uname")%></span>登陆成功!</p> </td>
</tr>
</table>
<form name="form1" method="post" action="new_sql.asp">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" height="15"> </td>
<td>标题:</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"><input name="title" type="text" class="input" id="title" size="70"></td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">内容:</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30"><textarea name="content" cols="70" rows="30" class="input" id="content"></textarea></td>
</tr>
<tr align="center">
<td height="40" colspan="2"><input name="flag" type="hidden" id="flag" value="<%=flag%>">
<input name="action" type="hidden" id="action" value="add">
<input name="Submit" type="button" class="button" value="添加" onClick="SubmitOk()">
<input name="Submit2" type="button" class="button" onClick="MM_goToURL('parent','news.asp');return document.MM_returnValue" value="返回">
</td>
</tr>
</table>
</form> </td>
</tr>
</table>
</body>
</html>
以上就是个网站的基本制作过程了,我在这里就不一一解释了。
五、实习心得
对于这一次的实习我深有体会,主要是其中的经历让我难忘,俗话说得好,万事开头难这句话我是真真正正的体会到了。
在实习过程中,无论是对旧知识的回忆还是对新知识的学习,都是一个循序渐进的过程,让我在其中懂得了很多,学习新的知识是一种能力的表现,刚开始做网站的时候不知从哪里下手,更不知道应该怎么做。做一点点时,就会出现一些问题,没有办法只有上网查询,结果网上也没有具体的答案只能一边参考网上的资料,一边上书上找,一边自己理解。有时候无论怎么改都是错的,找了一天才发现原来是一个代码打错了。真就是要心思细腻的人才能做好。
我会在以后的工作中,更加注重学习让自己不断学会更多的知识,为以后打基础。