个人博客系统.docx
《个人博客系统.docx》由会员分享，可在线阅读，更多相关《个人博客系统.docx（142页珍藏版）》请在冰豆网上搜索。
个人博客系统
长沙学院
课程设计说明书
题目
个人博客系统
系（部）
数学与计算机科学系
专业（班级）
软件工程
姓名
学号
指导教师
起止日期
2016.6.13－2016.6.24
课程设计任务书
课程名称：
软件工程基础实训Ⅰ
设计题目：
个人博客系统
已知技术参数和设计要求：
1.问题描述（功能要求）：
个人博客系统用来展示个人风采，其中模块主要包括：
（1）主页
（2）博客日志
（3）相册
（4）留言板
（5）友情链接
2.运行环境要求：
（1）客户端：
windows操作系统
IE浏览器
（2）服务器：
windowsserver版操作系统
IIS组件安装
3.技术要求：
需要用到的技术（以表现页面为主，技术不一定包括下列全部，可根据具体情况选用，一般HTML及PhotoShop技术必选，其余可选）：
●HTML
●CSS
●JavaScript
●DIV
●PhotoShop
（1）了解有关Web静态网站建设的基本概念与方法。
（2）掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
（3）掌握网络信息发布与维护的方法。
设计工作量：
40课时
工作计划：
（1）2013级软件工程所有班级
2课时：
课程设计相关知识介绍，计算机系机房
18课时：
设计，计算机系机房。
16课时：
上机、调试，计算机系机房
4课时：
答辩，计算机系机房。
（具体时间地点老师先申请，机动安排）
指导教师签名：
日期：
2016.6.12
教研室主任签名：
日期：
系主任签名：
日期：
长沙学院课程设计鉴定表
姓名
学号
专业
软件工程
班级
设计题目
个人博客系统
指导教师
指导教师意见：
评定等级：
教师签名：
日期：
答辩小组意见：
评定等级：
答辩小组长签名：
日期：
教研室意见：
教研室主任签名：
日期：
系（部）意见：
系主任签名：
日期：
说明
课程设计成绩分“优秀”、“良好”、“及格”、“不及格”四类；
摘要
博客就是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。
本课程设计是培养我们建立一个静态的博客网页的能力与自学能力，其主要采用html语言编写（其中还包括css，div，以及javascript），里面包括五个模块：
博客日志、留言板、相册、友情链接。
其中主页前面我还设计了一个引入页面。
本博客内容借鉴了不少牛人博客的巧妙之处.
关键词：
html，div布局
目录
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
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.2系统设计
本博客基本上采用了css+div布局分块，通过一个用javascript写的下拉菜单做出了五个主模块：
个人档案、我的日志、留言板、好友博客、友情链接，页面的颜色比较丰富，这是我的个人风格。
对于网页初学者来说，个人博客是个很好的开始，也是一个能充分展示自我的平台。
设计思路：
博客主页面的设计灵感主要来源于彩虹丰富的颜色，课程设计的重点要求是使用css与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。
对于网页其他的一些特殊功能，就需要用脚本来实现了。
其中，我在主页前设计了一个引入页面.
系统功能模块：
本系统分为五个模块：
好友博客、个人档案、我的日志、留言板、友情链接。
图2.2系统功能模块
调试结果（测试数据）：
详见效果图设计
2.3效果图设计
【个人博客主界面】
页面的上部分画出一个彩虹的样子，中间部分设计成菜单栏，下部分设计成九宫格的形式。
图2.4个人博客主界面
【个人资料】
使用div分块，在页面的中间部分分成三块，
【我的相册】
页面的上部分同样做成彩虹的效果，中下部分用来展示各种图片、相片。
图2.6我的相册
【我的主页】
【留言板】
好友进入此页面后可以自由留言
图
2.9留言板
【友情链接】
方便大家可以浏览多个网页，也可以促进对网页的学习。
2.4系统的实
现
2.4.1个人博客主界面
在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人档案、我的日志、留言板、友情链接）进行浏览，下拉菜单是用javascript所写。
下拉菜单的下部分是数字九宫格（是一个小小的恶作剧），功能为鼠标经过图像，采用表格的方式进行分块，关键页面截图如下。
下拉菜单效果图：
图2.14下拉菜单效果图
代码实现如下：
友情链接
语言：汉语
英语
法语
德语
2.4.2个人档案
个人档案模块中主要包括我的资料、我的相册、我的心情。
其中，我的资料界面是由div+css设计分块而成，关键页面如下。
图2.17div分块与文字图片滚定效果
关键代码如下：
每个作品都有自己的灵魂，只要灵魂发挥极致，那么成功就在眼前！