![](images/bd547533a4[1].jpg)
个人博客课程设计说明书
![个人博客课程设计说明书](https://img.360docs.net/imgc4/05w39u2qvmvq38b93duf-41.webp)
![个人博客课程设计说明书](https://img.360docs.net/imgc4/05w39u2qvmvq38b93duf-52.webp)
长沙学院课程设计说明书
题目个人博客系统
系(部) 计算机科学与技术系专业(班级) 软件3班
姓名徐静
学号B20140304308
指导教师张志宏
起止日期2014.6.19-2014.7.04
课程设计任务书
课程名称:软件工程基础实训Ⅰ
设计题目:个人博客系统
已知技术参数和设计要求:
1.问题描述(功能要求):
个人博客系统用来展示个人风采,其中模块主要包括:
(1)个人档案
(2)博客日志
(3)技术文章
(4)友情链接
等网站常用频道
(模块不少于4个,具体可根据实际情况调整)
2. 运行环境要求:
(1)客户端:
windows操作系统
IE浏览器
(2)服务器:
windows server 版操作系统
IIS组件安装
3. 技术要求:
需要用到的技术(以表现页面为主,技术不一定包括下列全部,可根据具体情况选用,一般HTML 及PhotoShop技术必选,其余可选):
●HTML
●CSS
●JavaScript
●DIV
●PhotoShop
(1)了解有关Web静态网站建设的基本概念与方法。
(2)掌握网页设计制作的基本概念,有关美学基本知识与设计制作流程。
(3)掌握网络信息发布与维护的方法。
设计工作量:
40课时
工作计划:
(1) 2014级软件工程所有班级
2课时:课程设计相关知识介绍,计算机系机房
18课时:设计,计算机系机房。
16课时:上机、调试,计算机系机房
4课时:答辩,计算机系机房。
(具体时间地点老师先申请,机动安排)
指导教师签名:日期:
教研室主任签名:日期:
系主任签名:日期:
长沙学院课程设计鉴定表
摘要
博客就是以网络作为载体,简易迅速便捷地发布自己的心得,及时有效轻松地与他人进行交流,再集丰富多彩的个性化展示于一体的综合性平台。
本课程设计是培养我们创建一个静态的个人博客网页的能力与自学能力,其主要采用html语言编写(其中还包括css,div,以及javascript),里面包括五个模块:个人档案、我的日志、留言板、好友博客、友情链接。其中个人档案与我的日志还含有对应的子页面(二级页面)。
本博客内容较为全面,颜色丰富,能较好的展示个人风采与功能。
关键词:html,div+css布局,javascript
目录
1.设计内容与要求 (1)
1.1 设计内容 (1)
1.2 设计要求 (1)
2. 系统的设计与实现 (2)
2.1 需求分析 (2)
2.1.1.需求内容 (2)
2.1.2.功能结构图 (2)
2.2 系统设计 (2)
2.3 效果图设计 ............................................................................................................. 错误!未定义书签。
2.4 系统的实现 (3)
2.4.1个人博客主界面 (3)
2.4.2 个人档案 (4)
2.4.3 我的日志 (6)
2.4.4 留言板 (7)
2.4.5 友情链接 (7)
3 总结 (7)
3.1 系统的特点 (8)
3.2 系统的不足 (8)
3.3 心得体会 (8)
参考文献 ................................................................................................................................. 错误!未定义书签。附录源代码 ........................................................................................................................... 错误!未定义书签。
1.设计内容与要求
1.1 设计内容
个人博客系统用来展示个人风采,其中模块主要包括:
(1)个人主页
(2)我的日志
(3)留言板
(4)好友博客
(5)友情链接
1.2 设计要求
使用多种技术来实现
●HTML
●Div+CSS布局
●JavaScript
●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 我的博客首页
代码实现如下:
![](images/bd547533a4[1].jpg)
2.4.2个人主页
主页模块中主要包括我的相册、我的心情。其中,我的资料界面是由div+css设计分块而成;我的相册以此来实现图片的左移与右移;我的心情界面采用了表单的制作,
关键代码如下:
我的资料
src="images/244c86b44446d453-b4b9a46aaf4ad161-dae9efbe73842d2ba6d1a8968d28657d[1].jpg"
width="80" height="80">
姓名:徐静
性别:女
爱好:吃
家乡:益阳
星座:天秤座
座右铭:生如夏花之绚烂,死如秋叶之静美
(我的相册)
图2.42 我的相册
关键代码如下:
我的相册
(我的心情)
图2.43 心情
关键代码如下:
2.4.4 留言板
本模块页面标题处运用了图片滚动效果,留言部分则采用了表单的形式。
关键代码如下:
留言板
来访要留言哦!么么哒!
2.4.5 友情链接
本模块通过使用代码将个人博客首页链接到腾讯首页、新浪网、百度及酷狗,通过点击即可进入并进行自己所需要的操作。
关键代码如下:
友情链接
网
2.4.6 好友博客
图2.46好友博客
关键代码:
![](images/13-403479.jpg)
好友博客
点击进入妍妍的博客
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源代码
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
function 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 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i } 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.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i for(i=0;!x&&https://www.360docs.net/doc/ce5198517.html,yers&&i 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(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> div#container{width:1500px} div#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; } ul { list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; } li { display:inline; } a:link,a:visited font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:6px; text-decoration:none; text-transform:uppercase; } a:hover,a:active { background-color: #7A991A; color: #F39394; } body { background-image: url(jQuery可爱火箭回到顶部效果代码/images/71.jpg); } 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; 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; $(function(){ $(window).scroll(function() { if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时,即出现小火箭~ $('.actGotop').fadeIn(300); //火箭淡入的时间,越小出现的越快~ }else{ $('.actGotop').fadeOut(300); //火箭淡出的时间,越小消失的越快~ } }); $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //火箭动画停留时间,越小消失的越快~ }); 生命像东流的一江春水,他从生命最高处发源,冰雪是他的前身。他聚集起许多细流,合成一股有力的洪涛,向下奔注,他曲折的穿过了悬崖削壁,冲倒了层沙积土,挟卷着滚滚的 怒吼着,回旋着,前波后浪的起伏催逼,直到他过了,冲倒了这危崖他才心平气和的一泻千里。有时候他经过了细细的平沙,斜阳芳草里,看见了夹岸的桃花,他快乐而又羞怯,静静的流着,低低的吟唱着,轻轻的度过这一段浪漫的行程。有时候他遇到暴风雨,这激电,这迅雷,使他的心魂惊骇,疾风吹卷起他,大雨击打着他,他暂时浑浊了,扰乱了,而雨过天晴,只加给他许多新生的力量。有时候他遇到了晚霞和新月,向他照耀,向他投影,清冷中带些幽幽的温暖:这时他只想憩息,只想睡眠,而那股前进的力量,仍催逼着他向前走……终于有一天,他远远的望见了大海,呵!他已经到了行程的终结,这大海,使他屏息,使他低头,她多么辽阔,多么伟大!多么光明,又多么黑暗!大海庄严的伸出臂儿来接引他,他一声不响的流入她的怀里。他消融了归化了,说不上快乐,也没有悲哀!也许有一天,他再从海上蓬蓬的雨点中升起,飞向西来,再形成一道江流,再冲倒两旁的石壁,再来寻夹岸的桃花。 姓名:徐静 性别:女 爱好:吃 家乡:益阳 专业:软件工程 星座:天秤座 座右铭:生如夏花之绚烂,死如秋叶之静美徐静的个人博客
我的资料
相关主题
闽ICP备16038512号-3 侵权投诉 ©2013-2023 360文档中心,www.360docs.net | 站点地图
本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈
本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈