网站设计实训报告.docx
《网站设计实训报告.docx》由会员分享，可在线阅读，更多相关《网站设计实训报告.docx（13页珍藏版）》请在冰豆网上搜索。
网站设计实训报告
网
站
设
计
实
训
报
告
题目:
个人网站实训报告
学号:
姓名:
指导老师:
院、系:
专业:
实训时间：
一、实训意义
网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求,在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的转化,是对理论与实践教学效果的检验,也是对学生综合分析能力与独立工作能力的培养过程.因此加强实践教学环节,搞好实训教学,对实现本专业的培养目标,提高学生的综合素质有着重要的作用。
二、实训目的
1．通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能。
（1）掌握规划网站的内容结构，目录结构,链接结构的方法。
（2）熟练掌握网页制作软件DreamweaverCS3、MicsoftVisualStudio2005及数据库的简单连接和设置的基本操作和使用技能。
（3）掌握页面的整体控制和头部内容设置的方法。
（4）熟练掌握网页页面布局的各种方法。
（5）熟练掌握在网页中输入,设置标题和正文文字的方法。
（6）熟练掌握在网页中插入图象的方法。
（7）熟练建立各种形式的超级链接的方法。
（8）掌握表单网页制作方法。
（9）掌握网页特效制作方法。
（10）掌握网站测试的方法。
2.训练和培养学生获取信息和处理信息的能力,充分培养和提高学生的动手能力,学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、flash动画和网页特效等。
3.培养学生运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。
4.培养学生理论联系实际的工作作风,严肃认真的科学态度以及独立工作的能力,树立自信心。
三．实验步骤：
1、网站主题
我的网站的主旨在于从各个方面全面的介绍我自己，展示自己，包括我的个人资料、个人相片和个人日志。
同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都是浅黄色，用以展示自己性格的效果。
最重要的是做出自己的风格，给浏览者好的欣赏感受。
2、网站材料
主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。
同时，查询相关的书籍、XX和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。
要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。
精选自己收集的材料，作为自己制作网页的素材，在经过ps的在次没化达到良好的效果，这样就可以做好一个好的网站。
3、网站规划
我的网站共有4个主页面：
首页、相册、简历、日志以及对应的后台管理页面。
每一个页面用统一的背景图片，以保证网站统一的页面风格。
如下图：
我是用简单拼音命名网站名，用以方便存储和转发。
网站整体色调为浅黄色，然后用两个笔刷点缀页面，突出主题，颜色没有过多，过杂，用以避免给人一种杂乱的感觉。
版面设计十分灵活，根据各部分内容的不同适当的自由设计。
网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体定位。
位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css和javascript设计一个样式，以保证随时、准确的调用。
另外，为了网页布局的协调，我用以前学习过的dreamweaver来修饰页面，是页面更加美观、大气。
4、网站的制作工具
做网页时主要使用的是MicsoftVisualStudio2005，但我还使用了Deamweaver。
另外，为了处理网页中的其他元素，还使用了Photoshop、GifAnimator等软件。
5、制作网站的网页
素材、风格、模板都设计好以后，下一步就是具体的制作网页。
制作网站时，首先要做的就是站点的规划，建立一个本地站点“mysite”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件，我在制作时建立了“image”文件夹和“photo”文件夹来存放图片。
同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放相册信息，网页中的css样式文件也应统一管理，做到有条不紊，我设计的网站的首页如图１所示。
图1个人网站主页界面
以导航栏为界，用以给浏览者好的视觉享受。
左下方有我的、相片和相关链接，右下方有自己的日志和相关链接。
插入相关链接的菜单栏，一方面为了布局合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航，点击其中任意一个都会连接到其他网页。
个人日志是添加gridview控件来实现与后台的链接，个人相册是添加datalist控件来实现的。
根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过900像素，以保证左右不出现滚动条。
右下边插入的是表格，表格中添加了浅红色的背景图片。
用以体现网站的主题色彩，表格还定位了网页特效、系统时间和flash动画。
网页特效为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚动。
特效代码如下：
--Begin
//scrollerwidth
varswidth=300
//scrollerheight
varsheight=100
//scroller'sspeed;
varsspeed=2
varwholemessage=''
//text:
changetoyourown
wholemessage='欢迎光临我的个人网站
取系统时间代码如下：
今天是：
--webbotbot="Timestamp"S-Type="REGENERATED"S-Format="%Y年%m月%d日"-->
第二个主页面是相册，如下图：
图2：
个人相册主页界面
相册页面布局是通过添加datalist控件并设置相应的参数。
为了使页面连接清晰，个人相片当点击任一按钮都会弹出对应浏览图片版块。
交互式按钮的制做：
在设计窗口中插入一个五行一列的表格，表格的间距为0，颜色为黑色，居中对齐，然后插入背景图片，就做成了表格的背景。
代码如下：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassxiangce:
System.Web.UI.Page
{
SqlConnectionconn=newSqlConnection（"server=.;database=personDB;uid=sa;pwd=ruanqunsheng"）;
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
Page.IsPostBack）
{
dataBindDataList（）;
}
}
privatevoiddataBindDataList（）
{
SqlCommandcmd=newSqlCommand（"selecttop12picNo,picUrl,picDescriptionfrommyAlbumorderbyupLoadTimedesc",conn）;
DataSetdataset=newDataSet（）;
SqlDataAdapteradapter=newSqlDataAdapter（cmd）;
adapter.Fill（dataset,"table1"）;
this.DataList1.DataSource=dataset.Tables["table1"];
this.DataList1.DataBind（）;
}
}
第三个主页面是简历，如下图：
简历中包含我的姓名、年龄、理想和兴趣爱好等。
页面背景也主页风格相同，插入一张7行两列的表格，是页面简约又美观。
页面为静态的不能通过后台修改，只有更改网页上的内容。
第四个主页面是日志，如下图：
此页面比较简单，在dreamweaver中利用表格来进行初步的布局图片的添加及做好相应的链接，转到C#中添加一个gridview控件，并设置相应的参数，如背景等这些也是上课的一些内容，日志页面中的写日志、批量管理等都是对数据的操作，所以需要到后台修改，也就是需要管理员权限。
点击写日志或批量管理，都会转到后台登陆页面，点击日志标题则会转到日志详细页。
日志页面的后台代码如下
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassrizhi:
System.Web.UI.Page
{
SqlConnectionconn=newSqlConnection（"server=.;database=personDB;uid=sa;pwd=ruanqunsheng"）;
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
Page.IsPostBack）
{
dataBindGridview（）;
}
}
privatevoiddataBindGridview（）
{
SqlCommandcmd=newSqlCommand（"selecttop5logNo,logtitle,（casewhenlen（logTitle）>6thensubstring（logtitle,0,5）+'....'elselogtitleend）aslogTitle1,logContent,logTimefrommyLog_tborderbylogTimedesc",conn）;
DataSetdataset=newDataSet（）;
SqlDataAdapteradapter=newSqlDataAdapter（cmd）;
adapter.Fill（dataset,"table1"）;
this.GridView1.DataSource=dataset.Tables["table1"];
this.GridView1.DataBind（）;
}
protectedvoidGridView1_PageIndexChanging（objectsender,GridViewPageEventArgse）
{
this.GridView1.PageIndex=e.NewPageIndex;
dataBindGridview（）;
}
}
日志详细页的代码如下：
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Data.SqlClient;
publicpartialclassrizhideal:
System.Web.UI.Page
{
SqlConnectionconn=newSqlConnection（"server=.;database=personDB;uid=sa;pwd=ruanqunsheng"）;
publicDataSetdataset=newDataSet（）;
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
Page.IsPostBack）
{
//Response.Write（Request.QueryString["logNo"]）;
showLogDetail（Request.QueryString["logNo"]）;
}
}
privatevoidshowLogDetail（stringlogNo）
{
stringstr="select*frommyLog_tbwherelogNo='"+logNo+"'"+"orderbylogTimedesc";
SqlCommandcmd=newSqlCommand（str,conn）;
SqlDataAdapteradapter=newSqlDataAdapter（cmd）;
adapter.Fill（dataset,"table1"）;
//Response.Write（dataset.Tables["table1"].Rows[0][2].ToString（））;
}
}
最下面是版权信息，尽量用简洁的语言和稳重的色彩，给人留下清新，简练的感觉。
版权信息标名了作者和版权用以提高内容的可读性和使内容充实，既突出网站的主色调，又给人以凝重的感觉。
以上就是前台网站，本次构建的网站还有后台管理网站如下图为7后台登陆页面和管理页面图8：
后台登陆管理页代码：
publicpartialclassadmin_login:
System.Web.UI.Page
{
SqlConnectionconn=newSqlConnection（"server=.;database=personDB;uid=sa;pwd=ruanqunsheng"）;
protectedvoidPage_Load（objectsender,EventArgse）
{
if（!
Page.IsPostBack）
{
generateCheckCode（）;
}
}
privatevoidgenerateCheckCode（）
{
Randomrandom=newRandom（）;
this.label_checkCode.Text=random.Next（1000,9999）.ToString（）;
}
privatevoidcheckUser（stringadminID,stringadminPwd）
{
stringstr="select*fromadmin_tbwhereadminID='"+adminID+"'"+"andadminPwd="+"'"+adminPwd+"'";
SqlCommandcmd=newSqlCommand（str,conn）;
conn.Open（）;
SqlDataReaderreader=cmd.ExecuteReader（）;
if（reader.Read（））
{
Session["loginName"]=adminID;
Response.Redirect（"mainFrame.aspx"）;
}
else
{
Response.Write（"登录失败"）;
}
reader.Close（）;
conn.Close（）;
//SqlCommandcmd=newSqlCommand（str,conn）;
//SqlDataAdapteradapter=newSqlDataAdapter（cmd）;
//adapter.Fill（dataset,"table1"）;
//Response.Write（dataset.Tables["table1"].Rows[0][2].ToString（））;
}
protectedvoidbtn_enter_Click（objectsender,EventArgse）
{
if（this.txt_userName.Text==""||this.txt_userPwd.Text==""）
{
Response.Write（""）;
}
elseif（this.txt_checkCode.Text==this.label_checkCode.Text）
{
checkUser（this.txt_userName.Text,this.txt_userPwd.Text）;
}
else
{
Response.Write（""）;
}
}
}
后台管理框架代码
publicpartialclassadmin_mainFrame:
System.Web.UI.Page
{
publicstaticstringdt;
publicstaticstringweek;
protectedvoidPage_Load（objectsender,EventArgse）
{
if（Session["loginName"]!
=null）
{
}
else
{
Response.Redirect（"login.aspx"）;
}
this.Label2.Text="当前时间为：
"+DateTime.Now.ToString（）;
dt=DateTime.Today.DayOfWeek.ToString（）;
switch（dt）
{
case"Monday":
week="星期一";
break;
case"Tuesday":
week="星期二";
break;
case"Wednesday":
week="星期三";
break;
case"Thursday":
week="星期四";
break;
case"Friday":
week="星期五";
break;
case"Saturday":
week="星期六";
break;
case"Sunday":
week="星期日";
break;
}
this.Label1.Text=week;
}
6、上传测试网站
网页制作完毕以后，要进行反复的测试，保存后在IE浏览器上反复运行自己的网站，用以发现设计中的缺陷并及时改正。
四．设计特色
我觉得我的网页设计的最大特点就是色彩淡雅，布局协调，结构清晰。
观之，给人以清丽，纯朴的感觉。
五．心得体会
第一：
我非常感谢学校给了我这次制作网页的机会，通过这次实训，我学到了很多有价值的东西。
我独立的完成了网站设计的全过程，把设计中散乱的网页链接成框架体系，使平时学到的知识点有了很高的提高，并且合理的在试验中进行了实践。
第二：
在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出好的网页打下了基础。
第三：
我现在已经掌握文档排版标记的使用熟练使用及其属性设置、特殊符号；第四：
我现在已经熟练使用超级链接，合理使用列表；第五：
我现在已经掌握图片标记及相关属性的使用、了解表格标记制作表格的方法。
最后，我感受最深的是：
要想做好一个网站，素材和技能都十分重要。
好的素材需要多方查找资料，可以从图书、网站和新闻上查找。
好的技能需要不断的实践，经常锻炼做网页。
如果拥有好的素材和精湛的技能就可以做出精湛的网页。
在网络实训课刚刚开始上的时候，自己是什么都不懂，从零开始。
通过阮老师的细心教导，使我慢慢懂得了网站的建设，渐渐充实了自己网站建设的信心与能力。
升级会员 