个人博客课程设计说明书

长 沙 学 院 课 程 设 计 说 明 书 题目 个人博客系统 系(部) 计算机科学与技术系 专业(班级) 软件 3 班 姓名 徐静 学号 B20140304308 指导教师 张志宏 起止日期 2014.6.192014.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 课时 II 工作计划： (1) 2014 级软件工程所有班级 2 课时：课程设计相关知识介绍，计算机系机房 18 课时： 设计，计算机系机房。 16 课时：上机、调试，计算机系机房 4 课时：答辩，计算机系机房。 （具体时间地点老师先申请，机动安排） 指导教师签名： 日期： 教研室主任签名： 日期： 系主任签名： 日期： 长沙学院课程设计鉴定表 姓名 徐静 学号 B20140304308 专业 软件工程 班级 3 班 设计题目 个人博客系统 指导教师 张志宏 指导教师意见： 评定等级： 教师签名： 日期： 答辩小组意见： 评定等级： 答辩小组长签名： 日期： 教研室意见： 教研室主任签名： 日期： 系（部）意见： 系主任签名： 日期： 说明 课程设计成绩分“优秀”、“良好”、“及格”、“不及格”四类； 摘要 博客就是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再 集丰富多彩的个性化展示于一体的综合性平台。 本课程设计是培养我们创建一个静态的个人博客网页的能力与自学能力，其主要采用 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 效果图设计 .3 2.4 系统的实现 .9 2.4.1 个人博客主界面 9 2.4.2 个人档案 .12 2.4.3 我的日志 .15 2.4.4 留言板 .16 2.4.5 友情链接 .17 3 总结 .18 3.1 系统的特点 .18 3.2 系统的不足 .18 3.3 心得体会 .18 参考文献 .19 附录 源代码 .20 0 1.设计内容与要求 1.1 设计内容 个人博客系统用来展示个人风采，其中模块主要包括： (1)个人主页 (2)我的日志 (3)留言板 (4)好友博客 (5)友情链接 1.2 设计要求 使用多种技术来实现 HTML Div+CSS 布局 JavaScript PhotoShop 通过项目实践 (1)了解有关 Web 网站建设的基本概念与方法。 (2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。 (3)掌握网络信息发布与维护的方法。 性能需求： (1)界面友好，易于操作。 (2)简洁美观。 另外要求：手工编写 HTML 网页代码，在代码中需要有必要的注释，文档规范完整，项目分阶段需 通过组讨论及评审。 1 2. 系统的设计与实现 2.1 需求分析 2.1.1.需求内容 其主要设计模块如下： (1)个人主页 (2)我的日志 (3)留言板 (4)好友博客 (5)友情链接 2.1.2.功能结构图 图 2.1 功能结构图 2.2 系统设计 本博客基本上采用了 css+div 布局分块，做出了五个主模块：个人主页、我的日志、留言板、好友博 客、友情链接。用 javascript 在主页做了自动更新的时间以及可以回到顶部的小火箭。 设计思路： 博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用 css 与 div 来设计网 2 页的版面，所以在网页分块这一点上，需要在 div 与 css 上花较多的心思。对于网页其他的一些特殊功 能，就需要用脚本来实现了。 系统功能模块： 本系统分为五个模块：好友博客、个人主页、我的日志、留言板、友情链接。 图 2.2 系统功能模块 调试结果(测试数据) 2.4 系统的实现 2.4.1 个人博客主界面 在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链 接）进行浏览，并有 js 特效。 图 2.41 我的博客首页 代码实现如下： 徐静的个人博客 个人主页 我的日志 3 好友博客 留言板 友情链接 欢迎来到我的首页! 来访要留痕迹哦!么么哒! 2.4.2 个人主页 主页模块中主要包括我的相册、我的心情。其中，我的资料界面是由 div+css 设计分块而成；我的 相册以此来实现图片的左移与右移；我的心情界面采用了表单的制作， 关键代码如下： 我的资料 姓名：徐静 性别：女 爱好：吃 家乡：益阳 专业：软件工程 星座：天秤座 4 座右铭：生如夏花之绚烂，死如秋叶之静美 (我的相册) 图 2.42 我的相册 关键代码如下： 我的相册 (我的心情) 5 图 2.43 心情 关键代码如下： 我的心情 日期： 心情 ： 确定 取消 2.4.3 我的日志 图 2.21 我的日志 关键代码如下： 山口 温柔 6 2.4.4 留言板 本模块页面标题处运用了图片滚动效果，留言部分则采用了表单的形式。 关键代码如下： 留言板 留言： 确定 取消 来访要留言哦!么么哒! 2.4.5 友情链接 本模块通过使用代码将个人博客首页链接到腾讯首页、新浪网、百度及酷狗，通过点击即可进入并进行 自己所需要的操作。 关键代码如下： 友情链接 百度首页 酷狗音乐 腾讯网 新浪 网 返回首页 2.4.6 好友博客 7 图 2.46 好友博客 关键代码： 好友博客 点击进入妍妍的博客 3 总结 3.1 系统的特点 本博客采用了 div 与 css 的方法对整个页面进行了设计与布局，运用了特殊代码、脚本与文件来实现 一些特殊的功能比如点击图标回到顶部、鼠标经过图像处理以及图文滚动效果、音乐插件等。 3.2 系统的不足 (1)javascript 与插件运用的太多 对于插件和 javascript 脚本部分代码我只能够看懂，但是并不能亲自写出脚本和插件的代码，这没有 起到训练写网页代码的能力。第一次用 js 做了下拉菜单，但要符合老师说的要在同一个页面显示所有我 就不会了，因此放弃了使用下拉菜单，而用 js 做了时间和小火箭。 (2)DIV 与 CSS 运用的不够多 本学期该课程设计的重点要求就是对 div 与 css 掌握度得到提高并且熟练运用，可是在设计过程当中， 我用到的相关知识并不是很多。 (3)页面设计过于简单 没有用 div 与 css 设计过于复杂的布局，所以页面略显得有些简单，没有达到课程设计的要求。 (4)站点设置时资料存储的过于杂乱 在以后的学习过程中，一定要将文件分类放好，便于查找与使用。这次制作网页时，图片、网页、 脚本文件都放在一起了，在打开文件的时候图片和链接什么的都出了差错，以后一定注意。 3.3 心得体会 自己感觉学这个有点麻烦有点难但是很好玩，虽然没有达到老师的要求，也没有达到自己内心的目 8 标样子，但是自己已经是很努力去学习和实践了。 对于一个网页制作初学者来说，一切都是那么陌生，从什么都不会，到现在能比较熟练的运用 Dreamweaver，对我来说也是一个极大的提高。当然这不算什么，毕竟现在看来我们接触的知识与技能还 是十分浅薄的。刚开始做主页时，我是复制的别人的实例，但是做到最后全部都乱了，自己又重新开始 做的。不过有些问题难以解决。并且博客也做得非常简单，没有什么用 javascript 做出了的特效。 在这一次的实训过程当中，遗憾还是大于成功的，因为没有达到老师的要求，没能用 div 和 css 设 计出很好的布局，还有就是使用太多相同的，有些还是现成的，没有什么技术含量，这个是我觉得非常 非常遗憾的地方，从此之后，我要在 div 和 css 上多花点功夫，希望我能够用 div+css 和 js 设计出很炫的 效果。 4 源代码 0 n=n.substring(0,p); if(!(x=dn) for (i=0;!x 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 11 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); 火箭回到顶部效果 _js 代码网 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; 12 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; 13 $(function() $(window).scroll(function() if($(window).scrollTop() = 100) /向下滚动像素大于这个值时，即出现小火箭 $(.actGotop).fadeIn(300); /火箭淡入的时间，越小出现的越快 else $(.actGotop).fadeOut(300); /火箭淡出的时间，越小消失的越快 ); $(.actGotop).click(function()$(html,body).animate(scrollTop: 0px, 800);); /火箭动画停留时间，越 小消失的越快 ); 徐静的个人博客 个人主页 我的日志 好友博客 留言板 友情链接 生命像东流的一江春水，他从生命最高处发源，冰雪是他的前身。他聚集 起许多细流，合成一股有力的洪涛，向下奔注，他曲折的穿过了悬崖削壁，冲倒了层沙积土，挟卷着滚 14 滚的沙石，快乐勇敢的流走，一路上他享受着他所遭遇的一切；有时候他遇到巉岩前阻，他愤激的奔腾 了起来，怒吼着，回旋着，前波后浪的起伏催逼，直到他过了，冲倒了这危崖他才心平气和的一泻千里。 有时候他经过了细细的平沙，斜阳芳草里，看见了夹岸的桃花，他快乐而又羞怯，静静的流着，低低的 吟唱着，轻轻的度过这一段浪漫的行程。有时候他遇到暴风雨，这激电，这迅雷，使他的心魂惊骇，疾 风吹卷起他，大雨击打着他，他暂时浑浊了，扰乱了，而雨过天晴，只加给他许多新生的力量。有时候 他遇到了晚霞和新月，向他照耀，向他投影，清冷中带些幽幽的温暖：这时他只想憩息，只想睡眠，而 那股前进的力量，仍催逼着他向前走终于有一天，他远远的望见了大海，呵！他已经到了行程的终 结，这大海，使他屏息，使他低头，她多么辽阔，多么伟大！多么光明，又多么黑暗！大海庄严的伸出 臂儿来接引他，他一声不响的流入她的怀里。他消融了归化了，说不上快乐，也没有悲哀！也许有一天， 他再从海上蓬蓬的雨点中升起，飞向西来，再形成一道江