长沙学院课程设计说明书题目个人博客系统系(部) 计算机科学与技术系专业(班级) 软件3班姓名徐静学号B308指导教师张志宏起止日期课程设计任务书课程名称：软件工程基础实训Ⅰ设计题目：个人博客系统已知技术参数和设计要求：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.设计内容与要求 0设计内容 0设计要求 02. 系统的设计与实现 (1)需求分析 (1)需求内容 (1)功能结构图 (1)系统设计 (1)系统的实现 (2)个人博客主界面 (2)留言板 (6)友情链接 (6)3 总结 (7)系统的特点 (7)系统的不足 (7)心得体会 (7)4源代码 (8)1.设计内容与要求设计内容个人博客系统用来展示个人风采，其中模块主要包括：(1)个人主页(2)我的日志(3)留言板(4)好友博客(5)友情链接设计要求使用多种技术来实现●HTML●Div+CSS布局●JavaScript●PhotoShop通过项目实践(1)了解有关Web网站建设的基本概念与方法。
(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
(3)掌握网络信息发布与维护的方法。
性能需求：(1)界面友好，易于操作。
(2)简洁美观。
另外要求：手工编写HTML网页代码，在代码中需要有必要的注释，文档规范完整，项目分阶段需通过组讨论及评审。
2. 系统的设计与实现需求分析需求内容其主要设计模块如下：(1)个人主页(2)我的日志(3)留言板(4)好友博客(5)友情链接功能结构图图功能结构图系统设计本博客基本上采用了css+div布局分块，做出了五个主模块：个人主页、我的日志、留言板、好友博客、友情链接。
用javascript在主页做了自动更新的时间以及可以回到顶部的小火箭。
设计思路：博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用css与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。
对于网页其他的一些特殊功能，就需要用脚本来实现了。
系统功能模块：本系统分为五个模块：好友博客、个人主页、我的日志、留言板、友情链接。
图系统功能模块调试结果(测试数据)系统的实现个人博客主界面在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链接）进行浏览，并有js特效。
图我的博客首页代码实现如下：<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/bd547533a4[1].jpg" width="1200" height="600" alt=""/></div><div id="Layer5"><a href="留言.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/5[1].gif',1)"><img src="images/2[1].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/[1].gif',1)"><imgsrc="images/121935M51-3[1].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/94[1].gif',1)"><img src="images/225[1].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/" width="160" height="160" alt=""/>么么哒!</p></marquee>个人主页主页模块中主要包括我的相册、我的心情。