班级网站制作报告.docx

1、班级网站制作报告 目 录 第一章 前言 2第二章 站点规划 3第三章 总体设计 4第四章 数据库设计 4第五章 样式设计 5第六章 各功能的实现 10第七章 心得体会 15动态班级网站制作第一章 前言动态网站并不是指具有动画功能的网站，而是指网站内容可根据不同情况动态变更的网站，一般情况下动态网站通过数据库进行架构。 动态网站除了要设计网页外，还要通过数据库和编程序来使网站具有更多自动的和高级的功能。动态网站体现在网页一般是以asp，jsp，php，aspx等结束，而静态网页一般是HTML（标准通用标记语言的子集）结尾，动态网站服务器空间配置要比静态的网页要求高，费用也相应的高，不过动态网页利

2、于网站内容的更新，适合企业建站。动态是相对于静态网站而言。功能特点：1. 动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；2. 动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；3. 动态网页中包含有服务器端脚本，所以页面文件名常以asp、jsp、php等为后缀。但也可以使用URL静态化技术，使网页后缀显示为HTML。所以不能以页面文件的后缀作为判断网站的动态和静态的唯一标准。4. 动态网页由于需要数据库处理，所以动态网站的访问速度大大减慢；5. 动态网页由于存在特殊代码，所以相比较静态网页，其对搜索引擎的友好程度相对要弱一些。6. 但随着计算机

3、性能的提升以及网络带宽的提升，最后两条已经基本得到解决。本网站用的是Div+Css+A制作，数据库是SqlServer2005。第二章 站点规划本班级网站分为物理结构和逻辑结构，物理结构有主文件夹：“site 44”和子文件夹“App_Code”“App_Data”“css”“images”由4个文件夹组成。文件夹“App_Code”里是定义的DB类文件“DB.cs”；“App_Data”文件夹里放的是数据库文件“班级网站.mdf”和“班级网站_log.ldf”；“css”文件夹里面是网站用的css样式文件“index-style.css”；“images”文件夹里是若干本网站里面用的图片。如

4、图1所示。 图1逻辑结构由主页“Default.aspx”跳转到“register.aspx”页面，“Default.aspx”中有登录、新闻、班级展示、图片切换功能，“register.aspx”子页中有注册用户的功能，如图2所示。 点击注册按扭 图2第三章 总体设计此班级网站主要以Div+Css进行布局，DIV是以内容命名，布局方式是嵌套式布局方式，主页内容充实，内容一目了然。能让人方便的找到想浏览的信息，颜色主要以蓝色和白色为主，导航栏的设计简单明了，整体感比较强烈。字体主要以宋体为主，动态网页采用Label和Data_List控件，CSS的命名主要是以内容命名。第四章 数据库设计数据库

5、的名字是“班级网站”主要由4个表组成分别是“webnews”主要储存的是网页里的新闻绑定的是Data_List控件，“webregister”这个表里面存的是会员表，可以注册和登录，“webnav”这个表里面存的是导航栏的文字。“webnews”这里面存的是班级新闻。如图3所示。 图3第五章 样式设计1.这个层是主页的最外层，设置大框的高度和宽度左右居中。在这里面有分为四个大层。2.最上端层里面放置了网站logo和导航条，分别在 和 里面。其中，nav图层用一个Label控件实现从数据库读取来显示导航条内容。其在首页内的代码如图4所示。图43.第二部分层里面放置了一个图片切换功能，它是通过链外

6、部的一个header.js文件来实现图片切换的。如图5所示。图54.中间部分层里面放置的首页的主要内容。并分为、和三个部分。（1）其中层里面放置的是班级简介和班级公告部分。并分别用第二、三、四个Label控件实现从数据库读取来显示相关内容。其在首页内的代码如图6所示。图6（2）其次，层里面放置的是用户登录注册界面。它通过button按钮跳转到“register.aspx”页面。其在首页内的代码如图7所示。图7（3）然后在层里面放置的是班级新闻部分。它通过DataList控件实现从数据库读取相关内容。其在首页内的代码如图8所示。图85.最后一个部分层里面放置的是网站的版权信息。其代码如图9所示。

7、图96.本网站CSS样式名称和用途如下表（一）所示：表（一）CSS名称内容用途bodymargin: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;用来设置链接的格式 pcolor:#666; text-align: justify;

8、margin: 0 0 10px 0;用来设置首页内文字的相关样式 h1font-size: 18px; color: #999;margin: 0 0 10px 0;用来设置首页内所有标题的字体大小、颜色、外边缘距离#allwidth:1000px;margin:0px auto;总层，用来设置宽和边距#top width: 1000px; height: 300px;用来设置top层的宽、高#top_logo_area float: left; width: 1000px;height: 250px;设置 Logo_area图层的宽高。#top #navheight: 40px; widt

9、h: 930px;float:left;margin-top:5px;margin-left:35px;background-image: url(./images/07.jpg);设置nav层的宽、高，外边距，背景图片#headerwidth: 930px; height: 240px;margin-left:35px;设置header图片切换图层的宽、高，左外边距#mainmargin-top:20px; width:930px;margin-left:35px;设置main图层的宽、高，左外边距#main #leftwidth: 600px; float:left;设置left图层的宽、

10、对齐方式.left_postwidth: 600px; margin: 0 0 10px 0 ;设置left里面的lef_post层的宽、边距.left_post_titlewidth: 580px; height: 30px;background-image: url(./images/03.jpg);float:left; font-size: 18px;padding: 10px 0 0 20px; margin: 0;设置post标题层的宽、高，背景图片、对齐方式、字体大小、内外边距.left_post_textwidth: 558px;border-left: 1px #cccccc

11、 solid; border-right: 1px #cccccc solid;border-bottom: 1px #cccccc solid; padding: 20px 20px 10px 20px;设置此层的宽、外边款，以及内边距.left_post_text imgfloat:left; margin: 15px 20px 10px 0;border: 1px solid #ccc;padding: 5px;设置此层的图片内外边距、外边框、对齐方式#main #registerwidth:300px; height:180px; float:right;border-left: 1p

12、x #cccccc solid;border-right: 1px #cccccc solid;border-bottom: 1px #cccccc solid;设置此层的宽、高，对齐放室内，外边框.reg-titlewidth:278px; height:30px;font-size:18px;background-image: url(./images/05.jpg);float:left; color: #666;padding: 10px 0 0 20px;margin:0 0 20px 0;设置register层的标题样式、背景#main #rightwidth: 300px; ma

13、rgin-top:20px;float:right;设置right层的宽，上边距，对齐方式.right_sectionwidth: 300px; margin: 0 0 30px 0;设置新闻层的宽、外边距right_section_titlewidth: 278px;height: 30px;background-image: url(./images/05.jpg);float:left;border-left: 1px solid #ccc;border-right: 1px solid #ccc;font-size: 18px;color: #666;padding: 10px 0 0

14、 20px;设置新闻曾层标题的相关样式.right_section_bottomwidth: 258px;float:left;border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px #cccccc solid;padding: 5px 20px 10px 20px;设置此层的宽、对齐方式、外边框、内边距#footerwidth:930px; height:50px;text-align:center;color:#666;font-size:15px;margin-top:40px;margin-

15、left:35px;float:left;设置footer层的宽、高、外边距及其它样式第六章 各功能的实现1.导航从数据库里读出的代码如下： protected void Page_Load(object sender, EventArgs e) DB db = new DB(); DataSet ds = new DataSet(); String sqlstr = select webnav,weblink from webnav; ds = db.GetDataTableBySql(sqlstr); String temp = ; for (int i = 0; i ds.Tables0

16、.Rows.Count; i+) temp = temp + + ds.Tables0.Rowsi.ItemArray0 + + ; temp = temp + ; this.Label1.Text = temp; 运行效果如图10所示：图102.班级简介部分从数据库里读出的代码如下： if (Page.IsPostBack = false) String sqlstr2 = select clapic,clatext from claintro order by id; DataSet ds2 = new DataSet(); ds2 = db.GetDataTableBySql(sqlst

17、r2); try if (ds2.Tables0.Rows.Count != 0) var temppic = ds2.Tables0.Rows0.ItemArray2; var temptext = ds2.Tables0.Rows0.ItemArray3; this.Label2.Text = + + temptext + ; catch (Exception) Response.Write(alert (没有获得任何数据，请检查！); 运行效果如图11所示：图113.班级公告部分从数据库读取的代码如下： if (Page.IsPostBack = false) String sqlstr

18、3 = select top 1 * from clagg order by id; DataSet Ds3 = new DataSet(); DB db3 = new DB(); Ds3 = db3.GetDataTableBySql(sqlstr3); try if (Ds3.Tables0.Rows.Count != 0) var classpic = Ds3.Tables0.Rows0.ItemArray1; var classtext = Ds3.Tables0.Rows0.ItemArray2; this.Label3.Text = ; /this.Label3.Text = cl

19、asspic.ToString(); this.Label4.Text = classtext.ToString(); catch (Exception) Response.Write(alert (没有获得任何数据2，请检查！); 运行效果如图12所示： 图124.用户注册模块从数据库读取的代码如下： protected void btn_login_Click(object sender, EventArgs e) String Md5_user_pwd = FormsAuthentication.HashPasswordForStoringInConfigFile(this.tex_Us

20、er_Pwd.Text.ToString(), Md5); String SqlStr = select* from webregister where 会员名= + this.txt_User_Name.Text + and 密码= + Md5_user_pwd + ; DataSet Ds = new DataSet(); DB db = new DB(); /DataSet Ds = new DataSet(); Ds = db.GetDataTableBySql(SqlStr); try if (Ds.Tables0.Rows.Count = 0) this.Labinfo.Text

21、= 用户名或密码错误; this.txt_User_Name.Focus(); else this.Labinfo.Text = 用户 + this.txt_User_Name.Text + 登录成功; catch (Exception) protected void btn_Register_Click(object sender, EventArgs e) Response.Redirect(/register.aspx);运行效果如图13、图14所示：图13图145.班级新闻从数据库读取的代码如下： if (Page.IsPostBack = false) String sqlstr4

22、= select * from webnews; DataSet Ds4 = new DataSet(); DB db4 = new DB(); Ds4 = db4.GetDataTableBySql(sqlstr4); try if (Ds4.Tables0.Rows.Count != 0) this.DataList1.DataSource = Ds4.Tables0.DefaultView; this.DataList1.DataBind(); catch (Exception) Response.Write(alert(没有获得任何数据，请检查!); 运行效果如图15所示：图15第七章

23、 心得体会经过一个学期的动态网站开发的学习，学到了很多知识。在此，我总结一下制作一个动态网站的大体步骤。1.确定网站主题 网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。 2.搜集材料 明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让

24、自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。 3.规划网站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。4.制作网页 材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。 总之，掌握好网页制作，能独立完成一个网站的制作工作，对以后从事相关工作会有很大的帮助。