高锐的课程设计.doc
长 沙 学 院课程设计说明书题目个人博客系统系(部)计算机科学与技术专业(班级)软件工程(服务外包)12级9班姓名高锐学号指导教师潘怡起止日期课程设计任务书课程名称：工程实训（一）设计题目：个人博客系统已知技术参数和设计要求：1. 问题描述（功能要求）：个人博客系统用来展示个人风采，其中模块主要包括：(1) 个人档案(2) 博客日志(3) 技术文章(4) 友情链接等网站常用频道2. 运行环境要求：（1）客户端：windows操作系统，IE浏览器（2）服务器：windows server 版操作系统，IIS组件安装3. 技术要求：要求分别使用三种不同的方式来实现。l HTMLl CSSl Dreameaverl PhotoShop(1)了解有关Web网站建设的基本概念与方法。(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。(3)掌握网络信息发布与维护的方法。设计工作量：40课时工作计划：(1) 2011级软件工程所有班级2课时：课程设计相关知识介绍。多媒体教室18课时： 设计，普通教室。16课时：上机、调试。计算机系机房4课时：答辩。计算机系机房。（具体时间地点老师先申请，机动安排）指导教师签名：日期：2012-9-1 教研室主任签名： 日期：系主任签名： 日期：长沙学院课程设计鉴定表姓名高锐学号专业软件工程(服务外包)班级 12软9设计题目个人博客系统指导教师潘怡指导教师意见：评定等级： 教师签名： 日期： 答辩小组意见：评定等级：答辩小组长签名：日期：教研室意见：教研室主任签名： 日期： 系（部）意见：系主任签名：日期：说明课程设计成绩分“优秀”、“良好”、“及格”、“不及格”四类；摘要课程的综合网页与网站的制作实践，是在教师的指导下对学生进行网页制作专业技能的训练,培养学生综合运用理论知识分析和解决实际问题的能力,实现由理论知识向操作技能的培养过程.因此设计对实现本课程的培养目标,提高学生的综合素质有着重要的作用.本课程设计是培养我们创建一个静态的个人博客网页，主要采用的是html语言编写（其中还包括css层叠样式表和js），里面包含六个模块，分别是首页、个人档案、心情日志、温馨相册、友情链接。是为个人设计的一个介绍与展示自我的数字平台。本次实训是培养学生自学能力，而且通过实训提高学生的个人学习素养以及团队精神，以后更适合就业。本次通过对博客的制作，让学生学习制作网页，了解网页制作。培养学生综合实力。 该网页编写内容用到html顶级代码、ps制图、图片运动和怎样创建链接、插入图片。 关键词：个人博客，html, photo shop，css，js 目录1 设计内容与要求12需求分析13系统设计24 效果展现35 总结.3参考文献3附录3附录A 程序源代码31 设计内容与要求个人博客系统用来展示个人风采，其中模块主要包括：1） 首页整个博客的主要部分，其中包括动态时间、下拉菜单和状态栏等难点问题。首页主要显示个人信息，最新的心情日志信息。2） 个人档案括基本资料（用户名，QQ，昵称，性别，移动电话，所在城市，生日）就读大学，个人说明，座右铭等信息。3）心情日志显示所有的心情日志，包括日志名称，发表时间。也可以考虑分页显示。4） 技术文章技术文章包括程序设计和网页制作。技术文章显示所有的文章，包括文章名称，发表日期。二级页面程序设计中包括所有关于C语言的文章，可在三级页面中打开。网页制作也一样。5） 温馨相册显示所有的相册，包括相册封页和相册名称。大图显示单张照片（三级页面）。6)友情链接显示友情信息，其中包括多个网站。2需求分析2.1需求描述设计的题目是个人博客系统，所需功能如下：1） 首页首页主要显示个人档案，最新的心情日志信息2） 个人档案个人档案主要包括几个大的分类：基本资料，教育背景等3） 心情日志显示所有的心情日志，包括日志名称，发表时间。4） 技术文章显示指定的文章信息，包括文章名称，发表时间。5） 友情链接显示友情信息6） 温馨相册显示所有的相册，大图显示单张照片。7） 其他频道信息。：3系统设计首页日志温馨相册心情日志4 实现效果1）个人档案效果：个人档案是对自己的介绍，其中包括姓名、移动电话、所在城市、生日、就读大学、个人说明。，主要代码如下：<div id="apDiv3"> <div id="apDiv5"> <table width="184" height="288" border="0"> <tr> <td><div align="center">姓名：高锐</div></td> </tr> <tr> <td><div align="center">性别：男</div></td> </tr> <tr> <td><div align="center">QQ：</div></td> </tr> <tr> <td><div align="center">电话：</div></td> </tr> <tr> <td><div align="center">家庭住址：湖南衡阳</div></td> </tr> <tr> <td><div align="center">现居地：长沙大学</div></td> </tr> </table> </div> </div> <div id="apDiv4"><img src="meitu_00002.jpg" width="183" height="222" /></div>2）链接:这是我做的链接，主要代码如下：<div id="apDiv7"> <table width="866" border="0"> <tr> <td><ahref=主页.html"><img src="u=,&fm=52&gp=01.jpg" width="27" height="27" />首页</a></td> <td><a href="日志.html"><img src="1-11.jpg" width="27" height="27" />日志</a></td> <td><a href="相册.html"><img src="1.jpg" width="27" height="27" />相册</a></td> <td><a href="心情日志.html"><img src="Mypsd_346_B1.jpg" width="27" height="27" />心情日志</a></td> </tr> </table> </div> </div>温馨相册效果：这是相册的一部分内容，主要代码如下：<div id="apDiv12"> <table width="699" height="293" border="0"> <tr> <td><img src="IMAG0112.jpg" width="300" height="300" /></td> <td> </td> <td><img src="IMG.jpg" width="300" height="300" /></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr>日志效果：这是日志的大致内容，主要代码如下：<div id="apDiv12"> <div align="center"> <table width="742" height="571" border="0"> <tr> <td><a href="1.html">转年关将至骗子横行，大家要注意了。</a><br /></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> <tr> <td><span id="blog-label-"><span rel="blog-detail-link" blogid=""><a href="2.html">转</a></span></span><a href="2.html"><span rel="blog-detail-link" blogid="">一场演讲，百年震撼</span></a></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> <tr> <td><span sizcache="14" sizset="10"><span id="blog-label-"><span rel="blog-detail-link" blogid=""><a href="3.html">转</a></span></span><a href="3.html">牵着我的手，闭着眼睛走你也不会迷路 <span id="blog-icon-" title="日志中包含图片" rel="blog-detail-link" blogid=""></span></a></span></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> <tr> <td><span id="blog-label-"><span rel="blog-detail-link" blogid=""><a href="4.html">转</a></span></span><a href="4.html">走进生命的色彩 </a></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> <tr> <td><span id="blog-label-"><span rel="blog-detail-link" blogid=""><a href="5.html">转</a></span></span><a href="5.html">我们90后招惹谁了 </a></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> <tr> <td><span id="blog-label-"><span rel="blog-detail-link" blogid=""><a href="6.html">转</a></span></span><a href="6.html">活在这个世界真的好累、我想逃离。</a></td> <td><div align="center">转发</div></td> <td><div align="center">分享</div></td> </tr> </table> <div id="apDiv13"> <div id="apDiv14"> </div></div>心情日志效果：这是心情日志的大致内容，主要代码如下：<div id="apDiv12">1.同样现在还是深夜，不想多说什么，累了，心里有说不出的难过，空间的动态一直关注着某个人，害怕他突然间消失在自己的世界里，如果就连虚拟的世界里都失去了你的消息，那么对我是解脱，=然而心却莫名的一阵酸痛，好像在告诉自己你说谎。<br /><br />2.这样的生活，这样的我，这样的你和他，这样的世界，要我该用什么去诠释，埋怨和憎恨真的不是我想要的。<br /><br />3.爱一个人，没爱到难道又能怎么样？失去了最爱的人，就应该学会先放手，以后就算麻木了，至少伤痛会少一些，别把执着当作你幻想的借口，因为现实的他，根本没有爱过你，一个人如果真心爱一个人，你最懂是什么感受，因为你狠爱他不是吗？<br /><br />4.真的不想再去写，这些伤感的一字一句，我希望你们能走出这个阴影，真的不值得，就算伤再深，那也是你自己的事，就算别人写的东西和你在像，你们爱的人，却不是同一个人，不一样的故事，一样的结果，一样的痛过，如果说，只是因为自己狠爱他，而一直折磨自己，活在过去的世界里，那么，你大可不必再去说爱他，因为你没有资格，一个人都不会爱自己，爱家人，你还有什么资格，去谈什么爱情，你能保证他跟你在一起，你以后会懂得真正爱一个人？在爱情里，也许都会失去了理智，但至少，每一个人都有一颗善良的心，如果你觉得你还爱他，那就对他微笑吧，说句好久不见，如果真的真的很爱很爱他，那就，每天照照镜子，对镜子中的镜子说，我爱你，给自己一个拥抱，给自己一个自由的蓝天，一个深呼吸，闭上双眼，去感受这个世界的美好，我们还有那些最可爱的人，趁着他们还在身边，我们应该要去懂得珍惜，去喜欢他们，趁着自己还年轻，不管你现在在做什么，哪怕你的心还在流浪，给自己一个信心，笑着去面对这个世界，去享受生活，去奋斗你每一个青春。<br /><br />5 总结这个博客主要用了css的技术,同时也用了少量的js技术和DM软件，实现了动态图以及超链接等功能。但有些性能不怎么样，有些效果都没有实现。通过这次博客制作系统的学习。我发现我设计的博客版面设计比较苍白，内容比较少，颜色搭配也不协调，版面设计也不合理。这些我希望我通过更多的练习来改变它。参考文献 1PHOTOSHOP.CS3完全自学2附录附录A 部分程序源代码<!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=utf-8" /><title>无标题文档</title><style type="text/css">#apDiv1 position:absolute;/*决定定位*/width:949px;/*层的宽度*/height:953px;/*层的高度*/z-index:1;/*显示元素的上下层的叠加顺序来表示z轴的区别*/left:761px;/*离左端的距离*/margin-left:-420px;/*离右端的距离*/background:url(xpic7629_s%5B1%5D.jpg);top: 228px;/*离顶端的距离*/font-size: 18px;/*字体大小*/#apDiv2 position:absolute;width:874px;height:135px;z-index:1;font-size: 36px;left: 19px;top: 7px;background:#apDiv3 position:absolute;width:187px;height:465px;z-index:2;left: 3px;top: 246px;#apDiv4 position:absolute;width:185px;height:223px;z-index:3;top: 148px;left: 2px;#apDiv5 position:absolute;width:183px;height:281px;z-index:1;left: -1px;top: 244px;text-align: center;#apDiv6 position:absolute;width:665px;height:83px;z-index:4;left: 201px;top: 150px;font-size: 24px;font-weight: bold;font-style: italic;color: #F0F;#apDiv7 position:absolute;width:865px;height:46px;z-index:2;left: -185px;top: -102px;#apDiv1 #apDiv6 #apDiv7 table tr td text-align: center;font-size: 36px;#apDiv8 position:absolute;width:659px;height:96px;z-index:5;left: 201px;top: 262px;font-size: 18px;#apDiv9 position:absolute;width:657px;height:521px;z-index:6;left: 203px;top: 441px;#apDiv10 position:absolute;width:644px;height:266px;z-index:2;left: 2px;top: 95px;body background:url(1.jpg.png);#apDiv11 position:absolute;width:647px;height:115px;z-index:2;left: -1px;top: 371px;#Layer1 position:absolute;width:100px;height:487px;z-index:2;left: 117px;top: 14px;.STYLE3 font-size: 36px;font-family: "华文隶书"color: #F00;#Layer2 position:absolute;width:176px;height:976px;z-index:3;left: 1356px;top: 22px;a:link color: #000;text-decoration: none;/*将所有未访问的链接变为红色*/a:visited text-decoration: none;color: #000;/*未访问过的链接是红色，而所有访问过的链接将变成淡灰色*/a:hover text-decoration: none;/*在鼠标放在链接上时将所有的文本变成深灰色，而不管是否已经访问过。*/a:active text-decoration: none;/*当用户点击链接时，只要当前页面一直保持浏览，文本将变成黑色，表示用户目前正在处理那个网页。*/</style></head><body><div id="apDiv1"> <div id="apDiv2"> <div align="center"> <p> </p> </div> </div> <div id="apDiv3"> <div id="apDiv5"> <table width="184" height="288" border="0"> <tr> <td><div align="center">姓名：高锐</div></td> </tr> <tr> <td><div align="center">性别：男</div></td> </tr> <tr> <td><div align="center">QQ：</div></td> </tr> <tr> <td><div align="center">电话：</div></td> </tr> <tr> <td><div align="center">家庭住址：湖南衡阳</div></td> </tr> <tr> <td><div align="center">现居地：长沙大学</div></td> </tr> </table> </div> </div> <div id="apDiv4"><img src="meitu_00002.jpg" width="183" height="222" /></div> <div id="apDiv6">人生格言：没有十全十美的东西，没有十全十美的人，关键是清楚到底想要什么。得到想要的，肯定会失去另外一部分。如果什么都想要，只会什么都得不到。 <div id="apDiv7"> <table width="866" border="0"> <tr> <td><a href="主页.html"><img src="u=,&fm=52&gp=01.jpg" width="27" height="27" />首页</a></td> <td><a href="日志.html"><img src="1-11.jpg" width="27" height="27" />日志</a></td> <td><a href="相册.html"><img src="1.jpg" width="27" height="27" />相册</a></td> <td><a href="心情日志.html"><img src="Mypsd_346_B1.jpg" width="27" height="27" />心情日志</a></td> </tr> </table> </div> </div> <div id="apDiv8"> <p><strong><em><a href="日志.html">日志：</a></em></strong></p> <p>年关将至骗子横行，大家要注意了若是有人在路上接近你，向你推销福建安溪铁观音， 又建议你闻下试试味儿的话一定要注意了！ 这不是铁观音！那是一种观音土！一种迷药类的东西！ 当你闻到它，你就会晕倒，然后他们就会拿走你身上所有之前的物品！ 现在在广东，河北，天津，武.<a href="1.html">查看全文</a></p> <p> </p> </div> <div id="apDiv9"> <p><strong><em><a href="相册.html">相册：</a></em></strong></p> <p>那些年我们一起走过的日子</p> <div id="apDiv10"> <marquee direction=right scrollamount=10> <table width="200" height="111" border="0"> <tr> <td><a href="相册.html"><img src="IMAG0012_副本.jpg" width="209" height="228 " /><img src="IMAG0112_副本.jpg" width="209" height="228" /></a></td> <td><a href="相册.html"><img src="IMG_副本.jpg" width="209" height="228" /></a></td> <td> </td> </tr> </table> </marquee> </div> <p> </p><div id="apDiv11"> <p><strong><a href="心情日志.html"><em>每日心情：</em></a></strong></p> <p>每个人每天多有不同的心情，但是有时候又不能对别人倾诉，所以写下每天你的心情，那样你就会好很多。</p></div> </div></div><div id="Layer1"> <table width="200" height="976" border="0" bordercolor="#F0F0F0"> <tr> <td><div align="center" class="STYLE3">宝</div></td> </tr> <tr> <td><div align="center" class="STYLE3">剑</div></td> </tr> <tr> <td><div align="center" class="STYLE3">锋</div></td> </tr> <tr> <td><div align="center" class="STYLE3">从</div></td> </tr> <tr> <td><div align="center" class="STYLE3">磨</div></td> </tr> <tr> <td><div align="center" class="STYLE3">砺</div></td> </tr> <tr> <td><div align="center" class="STYLE3">出</div></td> </tr> </table></div><div id="Layer2"> <table width="200" height="976" border="0"> <tr> <td><div align="center" class="STYLE3">梅</div></td> </tr> <tr> <td><div align="center" class="STYLE3">花</div></td> </tr> <tr> <td><div align="center" class="STYLE3">香</div></td> </tr> <tr> <td><div align="center" class="STYLE3">自</div></td> </tr> <tr> <td><div align="center" class="STYLE3">苦</div></td> </tr> <tr> <td><div align="center" class="STYLE3">寒</div></td> </tr> <tr> <td><div align="center" class="STYLE3">来</div></td> </tr> </table></div></body></html>
