个人博客课程设计说明书.docx

《个人博客课程设计说明书.docx》由会员分享，可在线阅读，更多相关《个人博客课程设计说明书.docx（29页珍藏版）》请在冰豆网上搜索。

个人博客课程设计说明书

长沙学院

课程设计说明书

题目

个人博客系统

系（部）

计算机科学与技术系

专业（班级）

软件3班

姓名

徐静

学号

B20140304308

指导教师

张志宏

起止日期

2014.6.19－2014.7.04

课程设计任务书

课程名称：

软件工程基础实训Ⅰ

设计题目：

个人博客系统

已知技术参数和设计要求：

1.问题描述（功能要求）：

个人博客系统用来展示个人风采，其中模块主要包括：

（1）个人档案

（2）博客日志

（3）技术文章

（4）友情链接

等网站常用频道

（模块不少于4个，具体可根据实际情况调整）

2.运行环境要求：

（1）客户端：

windows操作系统

IE浏览器

（2）服务器：

windowsserver版操作系统

IIS组件安装

3.技术要求：

需要用到的技术（以表现页面为主，技术不一定包括下列全部，可根据具体情况选用，一般HTML及PhotoShop技术必选，其余可选）：

●HTML

●CSS

●JavaScript

●DIV

●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设计内容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.1.2.功能结构图

图2.1功能结构图

2.2系统设计

本博客基本上采用了css+div布局分块，做出了五个主模块：

个人主页、我的日志、留言板、好友博客、友情链接。

用javascript在主页做了自动更新的时间以及可以回到顶部的小火箭。

设计思路：

博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用css与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。

对于网页其他的一些特殊功能，就需要用脚本来实现了。

系统功能模块：

本系统分为五个模块：

好友博客、个人主页、我的日志、留言板、友情链接。

图2.2系统功能模块

调试结果（测试数据）

2.4系统的实现

2.4.1个人博客主界面

在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链接）进行浏览，并有js特效。

图2.41我的博客首页

代码实现如下：

徐静的个人博客

@个人主页

@我的日志

@好友博客

@留言板

@友情链接