个人博客课程设计说明书Word文档格式.docx
《个人博客课程设计说明书Word文档格式.docx》由会员分享，可在线阅读，更多相关《个人博客课程设计说明书Word文档格式.docx（29页珍藏版）》请在冰豆网上搜索。
（2）掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
（3）掌握网络信息发布与维护的方法。
设计工作量：
40课时
工作计划：
（1）2014级软件工程所有班级
2课时：
课程设计相关知识介绍，计算机系机房
18课时：
设计，计算机系机房。
16课时：
上机、调试，计算机系机房
4课时：
答辩，计算机系机房。
（具体时间地点老师先申请，机动安排）
指导教师签名：
日期：
教研室主任签名：
日期：
系主任签名：
日期：
长沙学院课程设计鉴定表
专业
软件工程
班级
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设计要求
使用多种技术来实现
●Div+CSS布局
通过项目实践
（1）了解有关Web网站建设的基本概念与方法。
性能需求：
（1）界面友好，易于操作。
（2）简洁美观。
另外要求：
手工编写HTML网页代码，在代码中需要有必要的注释，文档规范完整，项目分阶段需通过组讨论及评审。
2.系统的设计与实现
2.1需求分析
2.1.1.需求内容
其主要设计模块如下：
2.1.2.功能结构图
图2.1功能结构图
2.2系统设计
本博客基本上采用了css+div布局分块，做出了五个主模块：
个人主页、我的日志、留言板、好友博客、友情链接。
用javascript在主页做了自动更新的时间以及可以回到顶部的小火箭。
设计思路：
博客主页面的设计主要来源于对各种图片的使用，课程设计的重点要求是使用css与div来设计网页的版面，所以在网页分块这一点上，需要在div与css上花较多的心思。
对于网页其他的一些特殊功能，就需要用脚本来实现了。
系统功能模块：
本系统分为五个模块：
好友博客、个人主页、我的日志、留言板、友情链接。
图2.2系统功能模块
调试结果（测试数据）
2.4系统的实现
2.4.1个人博客主界面
在首页用户可以通过一个下拉菜单对五个模块（好友博客、个人主页、我的日志、留言板、友情链接）进行浏览，并有js特效。
图2.41我的博客首页
代码实现如下：
<
divid="
header"
>
<
h1align="
center"
class="
STYLE2"
徐静的个人博客<
/h1>
ul>
liclass="
STYLE1"
ahref="
相册.htm"
>
@个人主页<
/a>
jQuery可爱火箭回到顶部效果代码/相册.htm"
/li>
日志.htm"
@我的日志<
jQuery可爱火箭回到顶部效果代码/日志.htm"
好友.htm"
@好友博客<
jQuery可爱火箭回到顶部效果代码/好友.htm"
留言.htm"
@留言板<
jQuery可爱火箭回到顶部效果代码/留言.htm"
链接.htm"
@友情链接<
jQuery可爱火箭回到顶部效果代码/链接.htm"
divclass="
STYLE3"
id="
Layer8"
blockquote>
p>
br/>
/p>
/blockquote>
/div>
/ul>
menu"
content"
imgsrc="
images/bd547533a4[1].jpg"
width="
1200"
height="
600"
alt="
"
/>
Layer5"
onmouseout="
MM_swapImgRestore（）"
onmouseover="
MM_swapImage（'
Image6'
'
'
images/5[1].gif'
1）"
images/2[1].gif"
name="
Image6"
118"
100"
border="
0"
/>
Layer4"
Image5'
images/1219353462-12[1].gif'
images/121935M51-3[1].gif"
Image5"
Layer3"
心情.htm"
Image4'
images/140875417518994[1].gif'
images/1408754175402225[1].gif"
Image4"
footer"
strong>
txt"
/strong>
!
--时间-->
marqueedirection="
left"
palign="
right"
欢迎来到我的首页!
/marquee>
来访要留痕迹哦!
images/2.gif"
160"
么么哒!
2.4.2个人主页
主页模块中主要包括我的相册、我的心情。
其中，我的资料界面是由div+css设计分块而成；
我的相册以此来实现图片的左移与右移；
我的心情界面采用了表单的制作，
关键代码如下：
h2class="
我的资料<
/h2>
li>
images/244c86b44446d453-b4b9a46aaf4ad161-dae9efbe73842d2ba6d1a8968d28657d[1].jpg"
80"
pclass="
姓名：
徐静<
性别：
女<
爱好：
吃<
家乡：
益阳<
专业：
软件工程<
星座：
天秤座<
座右铭：
生如夏花之绚烂，死如秋叶之静美<
（我的相册）
图2.42我的相册
h1>
我的相册<
marqueeonMouseOver="
this.stop（）"
onMouseOut="
this.start（）"
direction="
156"
132"
images/50dda45492ae1[1].jpg"
197"
134"
images/8.jpg"
182"
133"
images/54096d66dbc3b.jpg"
178"
images/7ed72ae17e30c9af79e79aa57c4cf434[1].jpg"
179"
131"
images/11H883402347.jpg"
172"
br>
images/909JAIM3HI4J.jpg"
129"
images/psbCATY4JWQ.jpg"
107"
130"
images/379b281ba1305efdfa10f67686c82b837d332bbd4f411-Vpun6b_fw658.jpg"
eight="
images/54096d72d4702.jpg"
203"
images/10204421_204448248127_2.jpg"
205"
images/54096d6e7bd69.jpg"
191"
（我的心情）
图2.43心情
关键代码如下：
Layer2"
我的心情<
spanclass="
/span>
labelfor="
ys01"
日期：
/label>
inputname="
content2"
type="
text"
value="
size="
40"
心情<
：
textareaname="
cols="
rows="
4"
/textarea>
title="
确定"
确定<
第四次.htm"
取消"
取消<
2.4.3我的日志
图2.21我的日志
../tw/山口.html"
target="
_blank"
山口<
../tw/温柔.html"
温柔<
images/2e69a82e05466cfb-0acb851336139b46-a14c2dbbabe508037c8fc6543ba10674[1].jpg"
64"
63"
embedsrc="
../QQ音乐/卡农-纯音乐-欢快版.mp3"
32"
/embed>
2.4.4留言板
本模块页面标题处运用了图片滚动效果，留言部分则采用了表单的形式。
留言板<
&
nbsp;
留言：
5"
确定<
—marquee为文字图片滚动效果-->
来访要留言哦!
168"
2.4.5友情链接
本模块通过使用代码将个人博客首页链接到腾讯首页、新浪网、XX及酷狗，通过点击即可进入并进行自己所需要的操作。
h1class="
STYLE4"
友情链接<
XX首页<
酷狗音乐<
腾讯网<
新浪网<
返回首页<
2.4.6好友博客
图2.46好友博客
关键代码：
Layer1"
images/13-403479.jpg"
1199"
599"
好友博客<
点击进入<
../tw/hc.html"
妍妍的博客<
3总结
3.1系统的特点
本博客采用了div与css的方法对整个页面进行了设计与布局，运用了特殊代码、脚本与文件来实现一些特殊的功能比如点击图标回到顶部、鼠标经过图像处理以及图文滚动效果、音乐插件等。
3.2系统的不足
（1）javascript与插件运用的太多
对于插件和javascript脚本部分代码我只能够看懂，但是并不能亲自写出脚本和插件的代码，这没有起到训练写网页代码的能力。
第一次用js做了下拉菜单，但要符合老师说的要在同一个页面显示所有我就不会了，因此放弃了使用下拉菜单，而用js做了时间和小火箭。
（2）DIV与CSS运用的不够多
本学期该课程设计的重点要求就是对div与css掌握度得到提高并且熟练运用，可是在设计过程当中，我用到的相关知识并不是很多。
（3）页面设计过于简单
没有用div与css设计过于复杂的布局，所以页面略显得有些简单，没有达到课程设计的要求。
（4）站点设置时资料存储的过于杂乱
在以后的学习过程中，一定要将文件分类放好，便于查找与使用。
这次制作网页时，图片、网页、脚本文件都放在一起了，在打开文件的时候图片和链接什么的都出了差错，以后一定注意。
3.3心得体会
自己感觉学这个有点麻烦有点难但是很好玩，虽然没有达到老师的要求，也没有达到自己内心的目标样子，但是自己已经是很努力去学习和实践了。
对于一个网页制作初学者来说，一切都是那么陌生，从什么都不会，到现在能比较熟练的运用Dreamweaver，对我来说也是一个极大的提高。
当然这不算什么，毕竟现在看来我们接触的知识与技能还是十分浅薄的。
刚开始做主页时，我是复制的别人的实例，但是做到最后全部都乱了，自己又重新开始做的。
不过有些问题难以解决。
并且博客也做得非常简单，没有什么用javascript做出了的特效。
在这一次的实训过程当中，遗憾还是大于成功的，因为没有达到老师的要求，没能用div和css设计出很好的布局，还有就是使用太多相同的，有些还是现成的，没有什么技术含量，这个是我觉得非常非常遗憾的地方，从此之后，我要在div和css上多花点功夫，希望我能够用div+css和js设计出很炫的效果。
4源代码
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
scripttype="
text/javascript"
--
functionstartTime（）
{
vartoday=newDate（）
varh=today.getHours（）
varm=today.getMinutes（）
vars=today.getSeconds（）
//addazeroinfrontofnumbers<
10
m=checkTime（m）
s=checkTime（s）
document.getElementById（'
txt'
）.innerHTML=h+"
:
+m+"
+s
t=setTimeout（'
startTime（）'
500）
}
functioncheckTime（i）
if（i<
10）
{i="
+i}
returni
functionMM_preloadImages（）{//v3.0
vard=document;
i
升级会员 