web课程设计任务书及模板

课程设计（论文）任务书
学院专业班
一、课程设计(论文)题目
二、课程设计(论文)工作自2014年1月6日起至2014年1月10日止
三、课程设计(论文) 地点:创新大楼
四、课程设计(论文)内容要求：
1．本课程设计的目的
（1）巩固和加深对网页设计基本知识的理解，提高综合运用课程知识的能力。

（2）使学生掌握软件设计的基本内容和设计方法，并培养学生进行规X化网页设计的能力。

（3）使学生掌握使用各种计算机资料和有关参考资料，提高学生进行网页设计的基本能力。

2．课程设计的任务及要求
1）基本要求：
（1）对系统进行需求分析，网页中要包括哪些模块；
（2）对界面进行分析，；
（3）编程简练，可用，尽可能的使网页更具美观性，交互性和人性化；
（4）要求5到10X页面，表达所选的主题，通过按钮或超连接这些页面（5）提高学生的论文写作能力；
（6）特别要求自己独立完成；
2）创新要求：
在基本要求达到后，可进行创新设计，如完善的功能、友好的网页界面。

3）课程设计论文编写要求
（1）要按照书稿的规格打印与写课程设计论文；
（2）论文包括目录、绪论、正文、小结、参考文献、附录等；
（3）课程设计论文装订按学校的统一要求完成；
4）课程设计进度安排
内容天数地点
构思及收集资料1图书馆
编码与调试3实验室
撰写论文1图书馆、实验室
学生签名：
2013年12 月21日
课程设计(论文)评审意见
（1）完成基本功能（30分）：优（）、良（）、中（）、一般（）、差（）；（2）完成调试（10分）：优（）、良（）、中（）、一般（）、差（）；（3）创新设计（20分）：优（）、良（）、中（）、一般（）、差（）；（4）论文结构（30分）：优（）、良（）、中（）、一般（）、差（）；（5）回答问题（10分）：优（）、良（）、中（）、一般（）、差（）；（6）格式规X性及考勤是否降等级：是（✓）、否（）
评阅人：职称：
2009 年10月9日
目录
一绪论1
1.1 课题背景及现状1
1.2 开发工具介绍1
二需求分析2
三界面设计2
四编码9
五测试结果19
六小结20
参考文献20
一绪论
1.1课题背景及现状
(1)设计背景：Web开发与应用
(2)设计目的：巩固和掌握编写web网页的基本概念和基本技
能，提高实际动手能力，并通过实际编程和设计实现中c#.net 的运用，加深对软件的理解和掌握。

主要需要掌握的软件有: Microsoft
Visual Studio 2005、DIV+CSS样式排版、基础HTML语言的脚本编辑、Photoshop网页配色及排版等，本可以实现对公司情况的浏览、概述，其中包含该公司地址联系方式、新闻公告、帮助留言、公司产品的概述既浏览、公司员工的一栏表等功能。

(3)软件定义：计控科技XX官网
(4)开发环境：Microsoft Visual Studio 2005,SQL SERVER 2005和access2003
1.2开发工具介绍
一个公司的商品怎么样才能让不同地区的人，更多的人去了解呢？
答案是网页！厂商可以通过自己的官网把自己的产品信息发送到互联网去，让更多的人了解你的公司，了解你的公司生产的产品，了解产品的功能、用途、价格等，以便于扩大自己产品的销售X围和销售量，实现更好的增收目的。

二需求分析
前台：
（1）能展示公司的基本信息、概况等。

（2）能展示公司的产品及产品性能指标、用途、类型、图片等。

（3）公司内的新闻。

（4）能浏览公司职员的部门、职位、联系方式等。

帮助留言。

（5）公司的帮助栏，和留言板，以及公司的联系方式等
后台：
（1）能对公司的基本信息、概况进行更新。

（2）能添加和更新、删除公司的产品，以及产品的性能指标、用途、类型、上传产品的图片等。

（3）能发布公司新的新闻，能对公司以前的新闻进行更新、删除。

（4）能对公司职员的信息进行添加、更新和删除等。

（5）能管理网页留言板中的内容。

三界面设计
(1)数据表
(2)公司介绍表（公司的有关信息）
(3)产品图片表（存储有关图片的地址）
(4)新闻表（公司新闻及其内容）
(5)留言表（存储帮助留言内容）
(6)职员表（公司所以员工及其联系方式）
(7)图片预览查询
(8)E-R图
四编码
页面产品图片展示flash实现功能如下：
<div align=center>
<script type="text/javascript">
var focus_width=470 //设置图片区域宽度var focus_height=300 //设置图片区域高度var text_height=20 //设置底部文字高度
var swf_height = focus_height+text_height //设置总高度
var pics=<%=pics%>; //声明变量
var links=<%=links%>;
var texts=<%=texts%>;
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-0"
codebase="fpdownload.macromedia./pub/shockwave/cabs/flash/swflash.cab#version =6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptaccess" value="sameDomain"><param name="wmode" value="transparent"><param name="movie"
value="photos/pixviewer.swf"><param name="quality" value="high"><param
name="bgcolor" value=#ffffff>');
document.write('<param name="menu" value="false"><param name=wmode
value="opaque">');
document.write('<param name="FlashVars"
value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+' &borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="photos/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_widt h+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false"
bgcolor=#ffffff quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage=".macromedia./go/getflashplayer" />');
document.write('</object>');
</script>
</div>
主页产品图片flash展示面代码：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
publicpartialclass index : System.Web.UI.Page
{
publicstring pics = "''"; //声明变量
publicstring links = "''";
publicstring texts = "''";
publicstring biaoti1 = ""; 声明五X图片的标题变量publicstring biaoti2 = "";
publicstring biaoti3 = "";
publicstring biaoti4 = "";
publicstring biaoti5 = "";
publicstring lianjie1 = ""; 声明五X图片的超去向publicstring lianjie2 = "";
publicstring lianjie3 = "";
publicstring lianjie4 = "";
publicstring lianjie5 = "";
publicstring zhaopian1 = ""; 声明五X图片的路径变量publicstring zhaopian2 = "";
publicstring zhaopian3 = "";
publicstring zhaopian4 = "";
publicstring zhaopian5 = "";
protectedvoid Page_Load(object sender, EventArgs e)
{
AccessDataSource ads = new AccessDataSource();
ads.DataFile = "~/App_Data/我的公司.mdb";
ads.Selectmand = "select * from [公司介绍]";
DataView dv = (DataView)ads.Select(DataSourceSelectArguments.Empty);
gongsi.Text =Convert.ToString(dv[0]["公司名称"]); //初始化位于顶部的公司名称变量
jiazai(); //调用函数
pics = zhaopian1 + "+ '|' +" + zhaopian2 + " + '| '+" + zhaopian3 + "+ '| '+" + zhaopian4 + "+ '|'+" +zhaopian5;
links = lianjie1 + "+ '|' +" + lianjie2 + " + '| '+" + lianjie3 + "+ '| '+" + lianjie4 + "+ '|'+" + lianjie5;
texts = biaoti1 + "+ '|' +" + biaoti2 + " + '| '+" + biaoti3 + "+ '| '+" + biaoti4 + "+ '| '+" + biaoti5;
//对flash所用到的变量格式赋值}
protectedvoid jiazai() //对flash 展示图片所要用到的变量赋值{
AccessDataSource ads = new AccessDataSource();
ads.DataFile = "~/App_Data/我的公司.mdb";
ads.Selectmand = "select * from [产品预览] ORDER BY [产品日期] DESC";//按日期从新到旧排序
DataView dv = (DataView)ads.Select(DataSourceSelectArguments.Empty);
biaoti1 = "'" + Convert.ToString(dv[0]["产品名称"]) + "'";
biaoti2 = "'" + Convert.ToString(dv[1]["产品名称"]) + "'";
biaoti3 = "'" + Convert.ToString(dv[2]["产品名称"]) + "'";
biaoti4 = "'" + Convert.ToString(dv[3]["产品名称"]) + "'";
biaoti5 = "'" + Convert.ToString(dv[4]["产品名称"]) + "'";
lianjie1 = "'product1.aspx?nid="+Convert.ToString(dv[0]["album_id"]) + "'";
lianjie2 = "'product1.aspx?nid="+Convert.ToString(dv[1]["album_id"]) + "'";
lianjie3 = "'product1.aspx?nid="+Convert.ToString(dv[2]["album_id"]) + "'";
lianjie4 = "'product1.aspx?nid="+Convert.ToString(dv[3]["album_id"]) + "'";
lianjie5 = "'product1.aspx?nid=" + Convert.ToString(dv[4]["album_id"]) + "'";
zhaopian1 = "'" + "photos/" + Convert.ToString(dv[0]["FirstPic"]) + "'";
zhaopian2 = "'" + "photos/" + Convert.ToString(dv[1]["FirstPic"]) + "'";
zhaopian3 = "'" + "photos/" + Convert.ToString(dv[2]["FirstPic"]) + "'";
zhaopian4 = "'" + "photos/" + Convert.ToString(dv[3]["FirstPic"]) + "'";
zhaopian5 = "'" + "photos/" + Convert.ToString(dv[4]["FirstPic"]) + "'";
}
}
实现主页面flash的图片取决于数据库中最新更新的5件产品
主页面产品新产品展示动态滑行部分代码：
源中:
<div id="maq"style="overflow: hidden; height: 800px; width: 200px;">//设定高度与宽度
<div id="mtext">
<div style="width: 200px; padding: 0 0 0 10;">
<asp:DataList ID="DataList1"runat="server"DataSourceID="AccessDataSource1">
<ItemTemplate>
<table class="style4">
<tr>
<td>
<asp:ImageButton ID="ImageButton1"runat="server"Height="150px"
ImageUrl='<%# Eval("FirstPic", "photos/{0}") %>'
PostBackUrl='<%# Eval("album_id", "product1.aspx?nid={0}") %>'Width="200px"/> </td>
</tr>
<tr>
<td>
<asp:HyperLink ID="HyperLink5"runat="server"
NavigateUrl='<%# Eval("album_id", "product1.aspx?nid={0}") %>'
Text='<%# Eval("产品备注") %>'></asp:HyperLink>
</td>
</tr>
<tr>
<td style="border-bottom-style: groove; border-bottom-width: 2px;
border-bottom-color: #008000;">
&nbsp;</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</div>
<div id="m0">
</div>
</div>
脚本代码:
<script type="text/javascript">
var speed=40
m0.innerHTML=mtext.innerHTML
function Marquee(){
if(m0.offsetTop-maq.scrollTop<=0)
maq.scrollTop-=mtext.offsetHeight
else{
maq.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
maq.onmouseover=function() {clearInterval(MyMar)}
maq.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
实现产品的连续和动态的滑行。

登录界面预览:
登录页面采用.net自带的配置
步骤为: 配置----安全----使用安全设置向导按部就班地配置安全性。

---- 通过Internet----为此启用角色。

----下一步
本网页的后台登录用户名为:panjiewei 密码:&^%$#1
产品页面及其产品图片展示:
(1)产品页面目录:
(2)产品详细内容页面:
点击图片后:
实现功能代码如下:
网页源代码内加入
<link href="js/style.css"rel="stylesheet"type="text/css"/>
<link rel="stylesheet"href="js/lightbox.css"type="text/css"media="screen"/>
<script src="js/prototype.js"type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects"type="text/javascript"></script> <script src="js/lightbox.js"type="text/javascript"></script>//调用脚本
图片处:
<a href="<%# Eval("ap_picurl", "photos/{0}") %>"rel="lightbox[dwAlbum]">
<asp:Image ID="Image1"runat="server"Height="130px"ImageUrl='<%# Eval("ap_picurl",
"photos/{0}") %>'Width="135px"/>
</a>
产品更新页面:
可以实现产品信息的更新及上传和删除产品的相片的功能. 上传主要逻辑代码为:
HttpPostedFile upFile = Request.Files[i];
String[] Route = upFile.FileName.Split(Convert.ToChar("\\")); String FileName = Route[Route.Length - 1];
upFile.SaveAs(Server.MapPath("photos\\") + FileName);
u_FileNum += 1;
u_FileName = u_FileName + "[" + FileName + "] ";
删除产品逻辑代码为:
protectedvoid Deletebutton1_Click(object sender, EventArgs e) {
bool isDeleted;
DataList DL = (DataList)LoginView1.FindControl("DataList1"); foreach (DataListItem anItem in DL.Items)
{
CheckBox CB = (CheckBox)anItem.FindControl("CheckBox1");
isDeleted = CB.Checked;
if (isDeleted)
{
Label LB1 = (Label)anItem.FindControl("ap_picLabel");
Label LB2 = (Label)anItem.FindControl("ap_idLabel");
FileInfo Files = new FileInfo(Server.MapPath("photos\\") + LB1.Text);
Files.Delete();
ads.Deletemand = "delete from [产品图片] where bianhao=" + LB2.Text;
ads.Delete(); } }
Response.Redirect("ht_chanpin1.aspx?cid=" + Request.QueryString["cid"]);
}
五测试结果
六小结
通过对这个的设计对整个程序了解了，从整体上了解web动态的开发的步骤。

从页面的设计，布局，到数据库框架,到后台的管理设置登录管理，都有所体会。

起码对的基础已经牢牢掌握。

但是还缺乏深入研究，我过我相信我会做好只要给我足够的时间，我能把学得更好。

参考文献
[1]邵峰晶，于忠清．数据挖掘原理与算法．：中国水利水电．2003
[2]综合性大学的学科交叉融合与新跨越.谢和平.2004中外大学校长论坛上的演讲稿摘要.。