个人博客课程设计说明书(共22页).doc
精选优质文档-倾情为你奉上长 沙 学 院课程设计说明书题目个人博客系统系(部)计算机科学与技术系专业(班级)软件3班姓名徐静学号B20140304308指导教师张志宏起止日期2014.6.192014.7.04课程设计任务书课程名称：软件工程基础实训设计题目：个人博客系统已知技术参数和设计要求：1. 问题描述（功能要求）：个人博客系统用来展示个人风采，其中模块主要包括：(1) 个人档案(2) 博客日志(3) 技术文章(4) 友情链接等网站常用频道（模块不少于4个，具体可根据实际情况调整）2. 运行环境要求：（1）客户端：windows操作系统IE浏览器（2）服务器：windows server 版操作系统IIS组件安装3. 技术要求：需要用到的技术（以表现页面为主，技术不一定包括下列全部，可根据具体情况选用，一般HTML及PhotoShop技术必选，其余可选）：l HTMLl CSSl JavaScriptl DIVl PhotoShop(1)了解有关Web静态网站建设的基本概念与方法。(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。(3)掌握网络信息发布与维护的方法。设计工作量：40课时工作计划：(1) 2014级软件工程所有班级2课时：课程设计相关知识介绍，计算机系机房18课时： 设计，计算机系机房。 16课时：上机、调试，计算机系机房4课时：答辩，计算机系机房。（具体时间地点老师先申请，机动安排）指导教师签名： 日期：教研室主任签名： 日期：系主任签名： 日期：长沙学院课程设计鉴定表姓名徐静学号B20140304308专业软件工程班级3班设计题目个人博客系统指导教师张志宏指导教师意见：评定等级： 教师签名： 日期： 答辩小组意见：评定等级：答辩小组长签名：日期：教研室意见：教研室主任签名： 日期： 系（部）意见：系主任签名：日期：说明课程设计成绩分“优秀”、“良好”、“及格”、“不及格”四类；专心-专注-专业摘要就是以作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。本课程设计是培养我们创建一个静态的个人博客网页的能力与自学能力，其主要采用html语言编写(其中还包括css，div，以及javascript)，里面包括五个模块：个人档案、我的日志、留言板、好友博客、友情链接。其中个人档案与我的日志还含有对应的子页面(二级页面)。本博客内容较为全面，颜色丰富，能较好的展示个人风采与功能。关键词： html，div+css布局， javascript 目录1.设计内容与要求1.1 设计内容个人博客系统用来展示个人风采，其中模块主要包括：(1)个人主页(2)我的日志(3)留言板(4)好友博客(5)友情链接1.2 设计要求使用多种技术来实现l HTMLl Div+CSS布局l JavaScriptl PhotoShop通过项目实践(1)了解有关Web网站建设的基本概念与方法。(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。(3)掌握网络信息发布与维护的方法。性能需求：(1)界面友好，易于操作。(2)简洁美观。另外要求：手工编写HTML网页代码，在代码中需要有必要的注释，文档规范完整，项目分阶段需通过组讨论及评审。 2. 系统的设计与实现2.1 需求分析2.1.1.需求内容其主要设计模块如下：(1)个人主页(2)我的日志(3)留言板(4)好友博客(5)友情链接2.1.2.功能结构图图2.1 功能结构图2.2 系统设计本博客基本上采用了css+div布局分块，做出了五个主模块：个人主页、我的日志、留言板、好友博客、友情链接。用javascript在主页做了自动更新的时间以及可以回到顶部的小火箭。 设计思路：博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用css与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。对于网页其他的一些特殊功能，就需要用脚本来实现了。 系统功能模块：本系统分为五个模块：好友博客、个人主页、我的日志、留言板、友情链接。图2.2 系统功能模块调试结果(测试数据)2.4 系统的实现2.4.1个人博客主界面在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链接）进行浏览，并有js特效。 图2.41 我的博客首页代码实现如下： <div id="header"><h1 align="center" class="STYLE2">徐静的个人博客</h1> <ul><li class="STYLE1"><a href="相册.htm" >个人主页</a><a href="jQuery可爱火箭回到顶部效果代码/相册.htm"></a></li><li class="STYLE1"><a href="日志.htm" >我的日志</a><a href="jQuery可爱火箭回到顶部效果代码/日志.htm"></a></li><li class="STYLE1"><a href="好友.htm" >好友博客</a><a href="jQuery可爱火箭回到顶部效果代码/好友.htm"></a></li><li class="STYLE1"><a href="留言.htm" >留言板</a><a href="jQuery可爱火箭回到顶部效果代码/留言.htm"></a></li><li class="STYLE1"><a href="链接.htm" >友情链接</a><a href="jQuery可爱火箭回到顶部效果代码/链接.htm"></a></li><div class="STYLE3" id="Layer8"> <blockquote><p><br /> <br /></p></blockquote></div></ul></div><div id="menu"> <div id="content"><img src="images/bd547533a41.jpg" width="1200" height="600" alt=""/></div> <div id="Layer5"><a href="留言.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/51.gif',1)"><img src="images/21.gif" name="Image6" width="118" height="100" border="0" id="Image6" /></a></div> <div id="Layer4"><a href="日志.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/1219353462-121.gif',1)"><img src="images/121935M51-31.gif" name="Image5" width="100" height="100" border="0" id="Image5" /></a></div> <div id="Layer3"><a href="心情.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/1408754175189941.gif',1)"><img src="images/14087541754022251.gif" name="Image4" width="100" height="100" border="0" id="Image4" /></a></div></div><div id="footer"><strong><div id="txt"></div></strong><!-时间-><marquee direction="left"><p align="right">欢迎来到我的首页!</p></marquee><marquee direction="right"><p>来访要留痕迹哦!<img src="images/2.gif" width="160" height="160" alt=""/>么么哒!</p></marquee>2.4.2 个人主页主页模块中主要包括我的相册、我的心情。其中，我的资料界面是由div+css设计分块而成；我的相册以此来实现图片的左移与右移；我的心情界面采用了表单的制作，关键代码如下：<div id="menu"><h2 class="STYLE1">我的资料</h2><ul><li><img src="images/244c86b44446d453-b4b9a46aaf4ad161-dae9efbe73842d2ba6d1a8968d28657d1.jpg" width="80" height="80"></li><li> <p class="STYLE1">姓名：徐静</p> <p class="STYLE1">性别：女</p> <p class="STYLE1">爱好：吃</p> <p class="STYLE1">家乡：益阳</p> <p class="STYLE1">专业：软件工程</p> <p class="STYLE1">星座：天秤座</p> <p class="STYLE1">座右铭：生如夏花之绚烂，死如秋叶之静美</p></li><li></li></ul></div>(我的相册) 图2.42 我的相册关键代码如下： <h1>我的相册</h1> <marquee onMouseOver="this.stop()" onMouseOut="this.start()" direction="left"> <img src="images/244c86b44446d453-b4b9a46aaf4ad161-dae9efbe73842d2ba6d1a8968d28657d1.jpg" width="156" height="132" /> <img src="images/50dda45492ae11.jpg" width="197" height="134" /> <img src="images/8.jpg" width="182" height="133" /><img src="images/54096d66dbc3b.jpg" width="178" height="132" /><img src="images/7ed72ae17e30c9af79e79aa57c4cf4341.jpg" width="179" height="131" /><img src="images/11H883402347.jpg" width="172" height="131" /></marquee><br><marquee onMouseOver="this.stop()" onMouseOut="this.start()" direction="right"><img src="images/909JAIM3HI4J.jpg" width="172" height="129" /><img src="images/psbCATY4JWQ.jpg" width="107" height="130" /><img src="images/379b281ba1305efdfa10f67686c82b837d332bbd4f411-Vpun6b_fw658.jpg" width="182" eight="131" /><img src="images/54096d72d4702.jpg" width="203" height="130"> <img src="images/10204421_204448248127_2.jpg" width="205" height="131"><img src="images/54096d6e7bd69.jpg" width="191" height="131"> <img src="images/54096d72d4702.jpg" width="203" height="130"> <img src="images/10204421_204448248127_2.jpg" width="205" height="131"> <img src="images/54096d6e7bd69.jpg" width="191" height="131"> </marquee> (我的心情) 图2.43 心情 关键代码如下： <div class="STYLE3" id="Layer2"><p class="STYLE1"><strong>我的心情</strong></p> <p> <span class="STYLE1"></span> <span class="STYLE3"> <label for="content" class="ys01">日期：</label> <input name="content2" type="text" id="content2" value="" size="40"> </span></p><p><span class="STYLE3"><label for="content" class="ys01">心情</label></span><label for="content" class="ys01">：</label><textarea name="content" cols="40" rows="4" id="content"></textarea></p><p><a href="心情.htm" title="确定">确定 </a></p><p><a href="第四次.htm" title="取消">取消</a></p>2.4.3 我的日志 图2.21 我的日志 关键代码如下： <p><a href="./tw/山口.html" target="_blank">山口 </a> <a href="./tw/温柔.html" target="_blank">温柔</a><a href="第四次.htm"><img src="images/2e69a82e05466cfb-0acb851336139b46-a14c2dbbabe508037c8fc6543ba106741.jpg" width="64" height="63" border="0" class="STYLE1"></a></p><embed src="./QQ音乐/卡农 - 纯音乐 - 欢快版.mp3" width="32" height="32"></embed></blockquote></div>2.4.4 留言板本模块页面标题处运用了图片滚动效果，留言部分则采用了表单的形式。 关键代码如下：<div id="Layer2"><h1 align="center" class="STYLE3">留言板</h1> <p align="center" class="STYLE3"> </p> <p><span class="STYLE1"></span> <label for="content" class="ys01">留言：</label> <textarea name="content" cols="40" rows="5" id="content"></textarea></p><p><a href="第四次.htm" title="确定">确定</a> <a href="第四次.htm" title="取消">取消</a></p> <marquee direction="right"> <!marquee为文字图片滚动效果-> 来访要留言哦!<img src="images/21.gif" width="172" height="168" />么么哒!</marquee> 2.4.5 友情链接本模块通过使用代码将个人博客首页链接到腾讯首页、新浪网、百度及酷狗，通过点击即可进入并进行自己所需要的操作。 关键代码如下：<h1 class="STYLE4">友情链接</h1> <p class="STYLE3"><span class="STYLE3"><a href="" target="_blank">百度首页</a></span></p> <p class="STYLE3"><a href="" target="_blank">酷狗音乐</a></p> <p class="STYLE3"><a href="" target="_blank">腾讯网</a></p> <p class="STYLE3"><a href=" target="_blank">新浪网</a></p> <p class="STYLE3"><a href="第四次.htm">返回首页</a></p>2.4.6 好友博客 图2.46好友博客关键代码：<div id="content"> <div id="Layer1"><img src="images/13-403479.jpg" width="1199" height="599"> <div id="Layer2"> <h1 class="STYLE3">好友博客</h1> <p class="STYLE1">点击进入<a href="./tw/hc.html">妍妍的博客</a></p>3 总结3.1 系统的特点 本博客采用了div与css的方法对整个页面进行了设计与布局，运用了特殊代码、脚本与文件来实现一些特殊的功能比如点击图标回到顶部、鼠标经过图像处理以及图文滚动效果、音乐插件等。3.2 系统的不足(1)javascript与插件运用的太多对于插件和javascript脚本部分代码我只能够看懂，但是并不能亲自写出脚本和插件的代码，这没有起到训练写网页代码的能力。第一次用js做了下拉菜单，但要符合老师说的要在同一个页面显示所有我就不会了，因此放弃了使用下拉菜单，而用js做了时间和小火箭。(2)DIV与CSS运用的不够多本学期该课程设计的重点要求就是对div与css掌握度得到提高并且熟练运用，可是在设计过程当中，我用到的相关知识并不是很多。(3)页面设计过于简单 没有用div与css设计过于复杂的布局，所以页面略显得有些简单，没有达到课程设计的要求。(4)站点设置时资料存储的过于杂乱 在以后的学习过程中，一定要将文件分类放好，便于查找与使用。这次制作网页时，图片、网页、脚本文件都放在一起了，在打开文件的时候图片和链接什么的都出了差错，以后一定注意。3.3 心得体会 自己感觉学这个有点麻烦有点难但是很好玩，虽然没有达到老师的要求，也没有达到自己内心的目标样子，但是自己已经是很努力去学习和实践了。 对于一个网页制作初学者来说，一切都是那么陌生，从什么都不会，到现在能比较熟练的运用Dreamweaver，对我来说也是一个极大的提高。当然这不算什么，毕竟现在看来我们接触的知识与技能还是十分浅薄的。刚开始做主页时，我是复制的别人的实例，但是做到最后全部都乱了，自己又重新开始做的。不过有些问题难以解决。并且博客也做得非常简单，没有什么用javascript做出了的特效。 在这一次的实训过程当中，遗憾还是大于成功的，因为没有达到老师的要求，没能用div和css设计出很好的布局，还有就是使用太多相同的，有些还是现成的，没有什么技术含量，这个是我觉得非常非常遗憾的地方，从此之后，我要在div和css上多花点功夫，希望我能够用div+css和js设计出很炫的效果。4源代码<!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><script type="text/javascript"><!-function startTime()var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()/ add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)function checkTime(i)if (i<10) i="0" + i return ifunction MM_preloadImages() /v3.0 var d=document; if(d.images) if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i+) if (ai.indexOf("#")!=0) d.MM_pj=new Image; d.MM_pj+.src=ai;function MM_swapImgRestore() /v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=ai)&&x.oSrc;i+) x.src=x.oSrc;function MM_findObj(n, d) /v4.01 var p,i,x; if(!d) d=document; if(p=n.indexOf("?")>0&&parent.frames.length) d=parent.framesn.substring(p+1).document; n=n.substring(0,p); if(!(x=dn)&&d.all) x=d.alln; for (i=0;!x&&i<d.forms.length;i+) x=d.formsin; for(i=0;!x&&d.layers&&i<d.layers.length;i+) x=MM_findObj(n,d.layersi.document); if(!x && d.getElementById) x=d.getElementById(n); return x;function MM_swapImage() /v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if (x=MM_findObj(ai)!=null)document.MM_srj+=x; if(!x.oSrc) x.oSrc=x.src; x.src=ai+2;/-></script> <style type="text/css">div#containerwidth:1500pxdiv#header background-color:pink;div#menu background-color:pink;height:600px;width:300px;float:left;div#content background-color:#EEEEEE;height:600px;width:1200px;float:left;div#footer background-color:#99bbbb;clear:both;text-align:center;h1 margin-bottom:0;h2 margin-bottom:0;font-size:54px;ul margin:0;li list-style:none;.STYLE1 font-size: 24px.STYLE2 font-size: 36px#Layer1 position:absolute;width:1196px;height:604px;z-index:1;left: 309px;top: 120px;#Layer2 position:absolute;width:1124px;height:603px;z-index:1;left: -48px;top: 21px;</style><style>ullist-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;lidisplay:inline;a:link,a:visitedfont-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:6px;text-decoration:none;text-transform:uppercase;a:hover,a:activebackground-color: #7A991A;color: #F39394;body background-image: url(jQuery可爱火箭回到顶部效果代码/images/71.jpg);</style><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>火箭回到顶部效果_js代码网</title><meta name="keywords" content="回到顶部,返回顶部,火箭,jquery返回顶部,返回顶部代码,星空背景,可爱卡通,js返回顶部,返回顶部,JS返回顶部代码,jquery返回顶部代码,js置顶代码,回到顶部代码" /><meta name="description" content="jQuery可爱火箭回到顶部效果代码" /><link href="jQuery可爱火箭回到顶部效果代码/css/jsdaima.css" rel="stylesheet" type="text/css" /><style type="text/css">body background-image: url(images/71.jpg);body,td,th color: #000000;#Layer3 position:absolute;width:113px;height:102px;z-index:1;left: 315px;top: 294px;#Layer4 position:absolute;width:108px;height:101px;z-index:2;left: 430px;top: 295px;#Layer5 position:absolute;width:107px;height:100px;z-index:3;left: 544px;top: 296px;#Layer6 position:absolute;width:371px;height:91px;z-index:4;left: 320px;top: 118px;#Layer7 position:absolute;width:125px;height:36px;z-index:4;left: 553px;top: 106px;#Layer8 position:absolute;width:797px;height:311px;z-index:4;left: 317px;top: 400px;.STYLE3 font-family: "新宋体"font-size: 18px;#Layer9 position:absolute;width:200px;height:115px;z-index:5;</style></head><body onload="startTime();MM_preloadImages('jQuery可爱火箭回到顶部效果代码/images/14087541758779211.gif','jQuery可爱火箭回到顶部效果代码/images/1219353462-121.gif','jQuery可爱火箭回到顶部效果代码/images/1012101331321551.gif','jQuery可爱火箭回到顶部效果代码/images/20131203154121_rPHaH1 (2).jpg','jQuery可爱火箭回到顶部效果代码/images/51.gif','images/1408754175189941.gif','images/1219353462-121.gif','images/51.gif')"><!- 代码 开始 -><script type="text/javascript" src="jQuery可爱火箭回到顶部效果代码/js/jquery.min.js"></script><div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div><script type="text/javascript">$(function()$(window).scroll(function() if($(window).scrollTop() >= 100) /向下滚动像素大于这个值时，即出现小火箭$('.actGotop').fadeIn(300); /火箭淡入的时间，越小出现的越快else $('.actGotop').fadeOut(300); /火箭淡出的时间，越小消失的越快 );$('.actGotop').click(function()$('html,body').animate(scrollTop: '0px', 800);); /火箭动画停留时间，越小消失的越快);</script><!- 代码 结束 -> <div id="container"><div id="header"><h1 align="center" class="STYLE2">徐静的个人博客</h1> <ul><li class="STYLE1"><a href="相册.htm" >个人主页</a></li><li class="STYLE1"><a href=
