班级网站制作报告.docx
- 文档编号：6610895
- 上传时间：2023-01-08
- 格式：DOCX
- 页数：17
- 大小：856.19KB
班级网站制作报告.docx
《班级网站制作报告.docx》由会员分享，可在线阅读，更多相关《班级网站制作报告.docx（17页珍藏版）》请在冰豆网上搜索。
班级网站制作报告
目录
第一章前言2
第二章站点规划3
第三章总体设计4
第四章数据库设计4
第五章样式设计5
第六章各功能的实现10
第七章心得体会15
动态班级网站制作
第一章前言
动态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站，一般情况下动态网站通过数据库进行架构。
动态网站除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。
动态网站体现在网页一般是以asp，jsp，php，aspx等结束，而静态网页一般是HTML（标准通用标记语言的子集）结尾，动态网站服务器空间配置要比静态的网页要求高，费用也相应的高，不过动态网页利于网站内容的更新，适合企业建站。
动态是相对于静态网站而言。
功能特点：
1.动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；
2.动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；
3.动态网页中包含有服务器端脚本，所以页面文件名常以asp、jsp、php等为后缀。
但也可以使用URL静态化技术，使网页后缀显示为HTML。
所以不能以页面文件的后缀作为判断网站的动态和静态的唯一标准。
4.动态网页由于需要数据库处理，所以动态网站的访问速度大大减慢；
5.动态网页由于存在特殊代码，所以相比较静态网页，其对搜索引擎的友好程度相对要弱一些。
6.但随着计算机性能的提升以及网络带宽的提升，最后两条已经基本得到解决。
本网站用的是Div+Css+A制作，数据库是SqlServer2005。
第二章站点规划
本班级网站分为物理结构和逻辑结构，物理结构有主文件夹：
“site44”和子文件夹“App_Code”“App_Data”“css”“images”由4个文件夹组成。
文件夹“App_Code”里是定义的DB类文件“DB.cs”；“App_Data”文件夹里放的是数据库文件“班级网站.mdf”和“班级网站_log.ldf”；“css”文件夹里面是网站用的css样式文件“index-style.css”；“images”文件夹里是若干本网站里面用的图片。
如图1所示。
图1
逻辑结构由主页“Default.aspx”跳转到“register.aspx”页面，“Default.aspx”中有登录、新闻、班级展示、图片切换功能，“register.aspx”子页中有注册用户的功能，如图2所示。
点击注册按扭
图2
第三章总体设计
此班级网站主要以Div+Css进行布局，DIV是以内容命名，布局方式是嵌套式布局方式，主页内容充实，内容一目了然。
能让人方便的找到想浏览的信息，颜色主要以蓝色和白色为主，导航栏的设计简单明了，整体感比较强烈。
字体主要以宋体为主，动态网页采用Label和Data_List控件，CSS的命名主要是以内容命名。
第四章数据库设计
数据库的名字是“班级网站”主要由4个表组成分别是“webnews”主要储存的是网页里的新闻绑定的是Data_List控件，“webregister”这个表里面存的是会员表，可以注册和登录，“webnav”这个表里面存的是导航栏的文字。
“webnews”这里面存的是班级新闻。
如图3所示。
图3
第五章样式设计
1.
这个层是主页的最外层，设置大框的高度和宽度左右居中。
在这里面有分为四个大层。
2.最上端
层里面放置了网站logo和导航条，分别在
和
里面。
其中，nav图层用一个Label控件实现从数据库读取来显示导航条内容。
其在首页内的代码如图4所示。
图4
3.第二部分
层里面放置了一个图片切换功能，它是通过链外部的一个header.js文件来实现图片切换的。
如图5所示。
图5
4.中间部分
层里面放置的首页的主要内容。
并分为、和三个部分。
（1）其中
层里面放置的是班级简介和班级公告部分。并
分别用第二、三、四个Label控件实现从数据库读取来显示相关内容。
其在首页内的代码如图6所示。
图6
（2）其次，层里面放置的是用户登录注册界面。
它通过button按钮跳转到“register.aspx”页面。
其在首页内的代码如图7所示。
图7
（3）然后在层里面放置的是班级新闻部分。
它通过DataList控件实现从数据库读取相关内容。
其在首页内的代码如图8所示。
图8
5.最后一个部分层里面放置的是网站的版权信息。
其代码如图9所示。
图9
6.本网站CSS样式名称和用途如下表
（一）所示：
表
（一）
CSS名称
内容
用途
body
margin:
0;padding:
0;
font-family:
Arial,Helvetica,sans-serif;
font-size:
12px;
line-height:
1.5em;
width:
100%;
display:
table;
用来清除上下左右边距,
设置字体格式，以及整个网页的主体显示。
a:
link,a:
visited
color:
#0066CC;text-decoration:
underline;
用来设置链接的格式
p
color:
#666;text-align:
justify;
margin:
0010px0;
用来设置首页内文字的相关样式
h1
font-size:
18px;color:
#999;
margin:
0010px0;
用来设置首页内所有标题的字体大小、颜色、外边缘距离
#all
width:
1000px;
margin:
0pxauto;
总层，用来设置宽和边距
#top
width:
1000px;height:
300px;
用来设置top层的宽、高
#top_logo_area
float:
left;width:
1000px;
height:
250px;
设置
Logo_area图层的宽高。
#top#nav
height:
40px;width:
930px;float:
left;
margin-top:
5px;margin-left:
35px;
background-image:
url（../images/07.jpg）;
设置nav层的宽、高，外边距，背景图片
#header
width:
930px;height:
240px;
margin-left:
35px;
设置header图片切换
图层的宽、高，左外边距
#main
margin-top:
20px;width:
930px;
margin-left:
35px;
设置main
图层的宽、高，左外边距
#main#left
width:
600px;float:
left;
设置left
图层的宽、对齐方式
.left_post
width:
600px;margin:
0010px0;
设置left里面的lef_post层的宽、边距
.left_post_title
width:
580px;height:
30px;
background-image:
url（../images/03.jpg）;
float:
left;font-size:
18px;
padding:
10px0020px;margin:
0;
设置post标题层的宽、高，背景图片、对齐方式、字体大小、内外边距
.left_post_text
width:
558px;
border-left:
1px#ccccccsolid;
border-right:
1px#ccccccsolid;
border-bottom:
1px#ccccccsolid;
padding:
20px20px10px20px;
设置此层的宽、外边款，以及内边距
.left_post_textimg
float:
left;margin:
15px20px10px0;
border:
1pxsolid#ccc;
padding:
5px;
设置此层的图片内外边距、外边框、对齐方式
#main#register
width:
300px;height:
180px;float:
right;
border-left:
1px#ccccccsolid;
border-right:
1px#ccccccsolid;
border-bottom:
1px#ccccccsolid;
设置此层的宽、高，对齐放室内，外边框
.reg-title
width:
278px;height:
30px;font-size:
18px;
background-image:
url（../images/05.jpg）;
float:
left;color:
#666;
padding:
10px0020px;
margin:
0020px0;
设置register
层的标题样式、背景
#main#right
width:
300px;margin-top:
20px;
float:
right;
设置right层的宽，上边距，对齐方式
.right_section
width:
300px;margin:
0030px0;
设置新闻层的宽、外边距
right_section_title
width:
278px;height:
30px;
background-image:
url（../images/05.jpg）;
float:
left;border-left:
1pxsolid#ccc;
border-right:
1pxsolid#ccc;
font-size:
18px;color:
#666;
padding:
10px0020px;
设置新闻曾层标题的相关样式
.right_section_bottom
width:
258px;float:
left;
border-left:
1pxsolid#ccc;
border-right:
1pxsolid#ccc;
border-bottom:
1px#ccccccsolid;
padding:
5px20px10px20px;
设置此层的宽、对齐方式、外边框、内边距
#footer
width:
930px;height:
50px;text-align:
center;
color:
#666;font-size:
15px;
margin-top:
40px;margin-left:
35px;
float:
left;
设置footer层的宽、高、外边距及其它样式
第六章各功能的实现
1.导航从数据库里读出的代码如下：
protectedvoidPage_Load（objectsender,EventArgse）
{
DBdb=newDB（）;
DataSetds=newDataSet（）;
Stringsqlstr="selectwebnav,weblinkfromwebnav";
ds=db.GetDataTableBySql（sqlstr）;
Stringtemp="
for（inti=0;i{
temp=temp+"
"+ds.Tables[0].Rows[i].ItemArray[0]+""+"";
}
temp=temp+"";
this.Label1.Text=temp;
}
运行效果如图10所示：
图10
2.班级简介部分从数据库里读出的代码如下：
if（Page.IsPostBack==false）
{
Stringsqlstr2="selectclapic,clatextfromclaintroorderbyid";
DataSetds2=newDataSet（）;
ds2=db.GetDataTableBySql（sqlstr2）;
try
{
if（ds2.Tables[0].Rows.Count!
=0）
{
vartemppic=ds2.Tables[0].Rows[0].ItemArray[2];
vartemptext=ds2.Tables[0].Rows[0].ItemArray[3];
this.Label2.Text=""+""+temptext+"";
}
}
catch（Exception）
{
Response.Write（"alert（'没有获得任何数据，请检查！
'）"）;
}
}
运行效果如图11所示：
图11
3.班级公告部分从数据库读取的代码如下：
if（Page.IsPostBack==false）
{
Stringsqlstr3="selecttop1*fromclaggorderbyid";
DataSetDs3=newDataSet（）;
DBdb3=newDB（）;
Ds3=db3.GetDataTableBySql（sqlstr3）;
try
{
if（Ds3.Tables[0].Rows.Count!
=0）
{
varclasspic=Ds3.Tables[0].Rows[0].ItemArray[1];
varclasstext=Ds3.Tables[0].Rows[0].ItemArray[2];
this.Label3.Text="";
//this.Label3.Text=classpic.ToString（）;
this.Label4.Text=classtext.ToString（）;
}
}
catch（Exception）
{
Response.Write（"alert（'没有获得任何数据2，请检查！
'）"）;
}
}
运行效果如图12所示：
图12
4.用户注册模块从数据库读取的代码如下：
protectedvoidbtn_login_Click（objectsender,EventArgse）
{
StringMd5_user_pwd=FormsAuthentication.HashPasswordForStoringInConfigFile（this.tex_User_Pwd.Text.ToString（）,"Md5"）;
StringSqlStr="select*fromwebregisterwhere会员名='"+this.txt_User_Name.Text+"'and密码='"+Md5_user_pwd+"'";
DataSetDs=newDataSet（）;
DBdb=newDB（）;
//DataSetDs=newDataSet（）;
Ds=db.GetDataTableBySql（SqlStr）;
try
{
if（Ds.Tables[0].Rows.Count==0）
{
this.Labinfo.Text="用户名或密码错误";
this.txt_User_Name.Focus（）;
}
else
{
this.Labinfo.Text="用户"+this.txt_User_Name.Text+"登录成功";
}
}
catch（Exception）{}
}
protectedvoidbtn_Register_Click（objectsender,EventArgse）
{
Response.Redirect（@"~/register.aspx"）;
}
运行效果如图13、图14所示：
图13
图14
5.班级新闻从数据库读取的代码如下：
if（Page.IsPostBack==false）
{
Stringsqlstr4="select*fromwebnews";
DataSetDs4=newDataSet（）;
DBdb4=newDB（）;
Ds4=db4.GetDataTableBySql（sqlstr4）;
try
{
if（Ds4.Tables[0].Rows.Count!
=0）
{
this.DataList1.DataSource=Ds4.Tables[0].DefaultView;
this.DataList1.DataBind（）;
}
}
catch（Exception）
{
Response.Write（""）;
}
}
运行效果如图15所示：
图15
第七章心得体会
经过一个学期的动态网站开发的学习，学到了很多知识。
在此，我总结一下制作一个动态网站的大体步骤。
1.确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。
特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。
你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。
网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。
2.搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。
常言道：
“巧妇难为无米之炊”。
要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。
材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
3.规划网站
一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。
网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。
也只有如此制作出来的网页才能有个性、有特色，具有吸引力。
4.制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。
所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。
所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。
在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
总之，掌握好网页制作，能独立完成一个网站的制作工作，对以后从事相关工作会有很大的帮助。
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
-
班级
网站
制作
报告
冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
对中国城市家庭的教育投资行为的理论和实证研究.docx
