个人博客课程设计说明书Word文档格式.docx

1、（2）掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。（3）掌握网络信息发布与维护的方法。设计工作量：40课时工作计划：（1） 2014级软件工程所有班级2课时：课程设计相关知识介绍，计算机系机房18课时： 设计，计算机系机房。 16课时：上机、调试，计算机系机房4课时：答辩，计算机系机房。（具体时间地点老师先申请，机动安排）指导教师签名： 日期：教研室主任签名： 日期：系主任签名： 日期：长沙学院课程设计鉴定表专业软件工程班级3班设计题目指导教师意见：评定等级： 教师签名： 日期：答辩小组意见：答辩小组长签名：日期：教研室意见： 系（部）意见：日期：说明课程设计成绩分“优秀”、“

2、良好”、“及格”、“不及格”四类；摘要博客就是以网络作为载体，简易迅速便捷地发布自己的心得，及时有效轻松地与他人进行交流，再集丰富多彩的个性化展示于一体的综合性平台。本课程设计是培养我们创建一个静态的个人博客网页的能力与自学能力，其主要采用html语言编写（其中还包括css，div，以及javascript），里面包括五个模块：个人档案、我的日志、留言板、好友博客、友情链接。其中个人档案与我的日志还含有对应的子页面（二级页面）。本博客内容较为全面，颜色丰富，能较好的展示个人风采与功能。关键词： html，div+css布局， javascript 目录1.设计内容与要求 11.1 设计内容 1

3、1.2 设计要求 12. 系统的设计与实现 22.1 需求分析 22.1.1.需求内容 22.1.2.功能结构图 22.2 系统设计 22.3 效果图设计 32.4 系统的实现 92.4.1个人博客主界面 92.4.2 个人档案 122.4.3 我的日志 152.4.4 留言板 162.4.5 友情链接 173 总结 183.1 系统的特点 183.2 系统的不足 183.3 心得体会 18参考文献 19附录 源代码 201.设计内容与要求1.1 设计内容（1）个人主页（2）我的日志（3）留言板（4）好友博客（5）友情链接1.2 设计要求使用多种技术来实现 Div+CSS布局通过项目实践（1）

4、了解有关Web网站建设的基本概念与方法。性能需求：（1）界面友好，易于操作。（2）简洁美观。另外要求：手工编写HTML网页代码，在代码中需要有必要的注释，文档规范完整，项目分阶段需通过组讨论及评审。2. 系统的设计与实现2.1 需求分析2.1.1.需求内容其主要设计模块如下：2.1.2.功能结构图图2.1 功能结构图2.2 系统设计本博客基本上采用了css+div布局分块，做出了五个主模块：个人主页、我的日志、留言板、好友博客、友情链接。用javascript在主页做了自动更新的时间以及可以回到顶部的小火箭。设计思路： 博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用css

5、与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。对于网页其他的一些特殊功能，就需要用脚本来实现了。系统功能模块：本系统分为五个模块：好友博客、个人主页、我的日志、留言板、友情链接。图2.2 系统功能模块调试结果（测试数据）2.4 系统的实现2.4.1个人博客主界面在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链接）进行浏览，并有js特效。 图2.41 我的博客首页代码实现如下： h1 align=center class=STYLE2徐静的个人博客ulli class=STYLE1a href=相册.htm 个人主页j

6、Query可爱火箭回到顶部效果代码/相册.htm/li日志.htm我的日志jQuery可爱火箭回到顶部效果代码/日志.htm好友.htm好友博客jQuery可爱火箭回到顶部效果代码/好友.htm留言.htm留言板jQuery可爱火箭回到顶部效果代码/留言.htm链接.htm友情链接pbr /p/blockquote/div/ulmenucontentimg src=images/bd547533a41.jpg width=1200 height=600 alt=/Layer5 onmouseout=MM_swapImgRestore（） onmouseover=MM_swapImage（Ima

7、ge6,images/51.gif,1）images/21.gif name=Image6118100 border=0 /Layer4Image5images/1219353462-121.gifimages/121935M51-31.gifImage5Layer3心情.htmImage4images/1408754175189941.gifimages/14087541754022251.gifImage4footerstrongtxt/strong!-时间-marquee direction=leftp align=right欢迎来到我的首页!/marquee来访要留痕迹哦!images

8、/2.gif160么么哒!2.4.2 个人主页主页模块中主要包括我的相册、我的心情。其中，我的资料界面是由div+css设计分块而成；我的相册以此来实现图片的左移与右移；我的心情界面采用了表单的制作，关键代码如下：h2 class=我的资料liimages/244c86b44446d453-b4b9a46aaf4ad161-dae9efbe73842d2ba6d1a8968d28657d1.jpg80p class=姓名：徐静性别：女爱好：吃家乡：益阳专业：软件工程星座：天秤座座右铭：生如夏花之绚烂，死如秋叶之静美我的相册images/909JAIM3HI4J.jpg129images/psb

9、CATY4JWQ.jpg107130images/379b281ba1305efdfa10f67686c82b837d332bbd4f411-Vpun6b_fw658.jpg eight=images/54096d72d4702.jpg203images/10204421_204448248127_2.jpg205images/54096d6e7bd69.jpg191（我的心情） 图2.43 心情 关键代码如下：Layer2我的心情label for=ys01日期：/labelinput name=content2 type=text value= size=40心情 title=确定确定 第

10、四次.htm取消取消2.4.3 我的日志图2.21 我的日志./tw/山口.html target=_blank山口 ./tw/温柔.html温柔2.4.4 留言板本模块页面标题处运用了图片滚动效果，留言部分则采用了表单的形式。留言板 留言：5确定 来访要留言哦!1682.4.5 友情链接本模块通过使用代码将个人博客首页链接到腾讯首页、新浪网、XX及酷狗，通过点击即可进入并进行自己所需要的操作。h1 class=STYLE4友情链接XX首页酷狗音乐腾讯网新浪网返回首页2.4.6 好友博客图2.46好友博客关键代码：Layer1images/13-403479.jpg1199599好友

11、博客点击进入./tw/hc.html妍妍的博客script type=text/javascript-function startTime（）var today=new Date（）var h=today.getHours（）var m=today.getMinutes（）var s=today.getSeconds（）/ add a zero in front of numbers10m=checkTime（m）s=checkTime（s）document.getElementById（txt）.innerHTML=h+:+m+st=setTimeout（startTime（）,500）function checkTime（i）if （i10） i= + i return ifunction MM_preloadImages（） /v3.0 var d=document; i