个人博客系统Word文件下载.docx
- 文档编号:3980435
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:142
- 大小:4.68MB
个人博客系统Word文件下载.docx
《个人博客系统Word文件下载.docx》由会员分享,可在线阅读,更多相关《个人博客系统Word文件下载.docx(142页珍藏版)》请在冰点文库上搜索。
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设计要求
使用多种技术来实现
●Div+CSS布局
通过项目实践
(1)了解有关Web网站建设的基本概念与方法。
性能需求:
(1)界面友好,易于操作。
(2)简洁美观。
另外要求:
手工编写HTML网页代码,在代码中需要有必要的注释,文档规范完整,项目分阶段需通过组讨论及评审。
2.系统的设计与实现
2.1需求分析
2.1.1.需求内容
其主要设计模块如下:
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下拉菜单效果图
代码实现如下:
<
liclass="
menu2"
onMouseOver="
this.className='
menu1'
"
onMouseOut="
menu2'
>
友情链接
<
div>
<
ahref="
个人博客课程设计说明书.doc"
C语言<
/a>
br/>
/>
<
/div>
<
/li>
menuDiv"
li>
a>
语言:
select>
<
optionvalue="
volvo"
汉语<
/option>
saab"
英语<
<
optionvalue="
opel"
法语<
audi"
德语<
<
/select>
2.4.2个人档案
个人档案模块中主要包括我的资料、我的相册、我的心情。
其中,我的资料界面是由div+css设计分块而成,关键页面如下。
图2.17div分块与文字图片滚定效果
关键代码如下:
divid="
Siderbar_1"
br>
&
nbsp;
每个作品都有自己的灵魂,只要灵魂发挥极致,那么成功就在眼前!
<
divclass="
vcard"
imgsrc="
img/234.jpg"
pclass="
fn"
真实姓名:
atarget="
_blank"
title="
迪伦"
迪伦<
/p>
nickname"
网名:
雨落无痕<
role"
职业:
学生一枚<
address"
现居:
湖南<
2.4.3博客日志
2.4.4留言板
本模块页留言部采用了表单的形式。
图2.24表单
MainBody_1"
formaction="
method="
post"
class="
STYLE-NAME"
h1align="
center"
ContactForm<
/h1>
B>
palign="
right"
span>
Pleasefillallthetextsinthefields.<
/span>
label>
spanalign="
YourName:
inputid="
name"
type="
text"
name="
placeholder="
YourFullName"
/label>
YourEmail:
email"
ValidEmailAddress"
Message:
textareaid="
message"
YourMessagetoUs"
/textarea>
Subject:
selectname="
selection"
JobInquiry"
JobInquiry<
GeneralQuestion"
GeneralQuestion<
/B>
inputtype="
button"
style="
background-color:
#CCFFFF"
value="
Send"
/form>
2.4.5底部注释
3总结
3.1系统的特点
本博客采用了div与css的方法对整个页面进行了设计与布局,运用了特殊代码、脚本与文件来实现一些特殊的功能比如:
下拉菜单、鼠标经过图像处理等。
3.2系统的不足
(1)DIV与CSS运用的不够多
本学期该课程设计的重点要求就是对div与css掌握度得到提高并且熟练运用,可是在设计过程当中,我用到的相关知识并不是很多。
(2)javascript与插件运用的太多
对于插件和javascript脚本部分代码我只能够部分看懂,但是并不能亲自写出脚本和插件的代码,这没有起到训练写网页代码的能力。
(3)页面设计过于简单
没有用div与css设计过于复杂的布局,所以页面略显得有些简单,没有达到课程设计的要求。
(4)站点设置时资料存储的过于杂乱
在以后的学习过程中,一定要将文件分类放好,便于查找与使用。
这次制作网页时,图片、网页、脚本文件都放在一起了,不便于查找,以后一定注意。
3.3心得体会
转眼间,两周的实训就快要结束了。
在此期间,我受益匪浅。
对于一个网页制作初学者来说,一切都是那么陌生,从什么都不会,到现在能比较熟练的运用Dreamweaver,对我来说也是一个极大的提高。
当然这不算什么,毕竟现在看来我们接触的知识与技能还是十分浅薄的。
俗话说:
“巧妇难为无米之炊”。
刚开始做主页时,我是通过在网上看教材,查阅资料自学的。
一开始觉得有点费劲,后来通过问老师问同学,有些问题才得以解决。
首先,做主页当然要收集、准备资料。
在网上多转转,看到什么漂亮的网页,把它保存下来,作为自己以后设计主页时的参考。
另外,还包括搜集一些小动画、logo之类的。
在制作过程中,图片的容量不能太大,否则影响了网页载入的时间与速度,还有图片的格式一般为gif或jpg格式的,这样一来图片就能很好的和背景融合,使页面看起来更加的融洽。
在使用图片时有一点值得注意的地方是,图片可以弥补文字的不足,但是并不能完全取代文字,所以在制作过程当中,一定要有必要的文字说明。
图片也不能过多,不能造成眼花缭乱的效果。
在这一次的实训过程当中,遗憾还是大于成功的,因为没有达到老师的要求,没能用div和css设计出很好的布局,还有就是脚本使用,大部分还是现成的,没有什么技术含量,这个是我觉得非常非常遗憾的地方,从此之后,我要在div和css上多花点功夫,希望我能够用div+css设计出很炫的效果,并且能够自己写脚本。
附录源代码
!
--个人博客主页代码-->
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
title>
首页<
/title>
linkhref="
css/shouye.css"
rel="
stylesheet"
text/css"
styletype="
--
.STYLE1{
font-size:
36px;
font-weight:
bold;
}
-->
/style>
/head>
body>
p>
STYLE1"
WelcomeToMyblog<
首页.html"
img/44-副本.jpg"
width="
106"
height="
113"
/body>
/html>
doctypehtml>
html>
metacharset="
gb2312"
--CSSforexample-->
linkrel="
href="
css/1.css"
style>
#slides{
display:
none;
}
#slides.slidesjs-navigation{
margin-top:
5px;
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop{
background-image:
url(img/btns-next-prev.png);
background-repeat:
no-repeat;
block;
width:
12px;
height:
18px;
overflow:
hidden;
text-indent:
-9999px;
float:
left;
margin-right:
a.slidesjs-next{
10px;
background-position:
-12px0;
a:
hover.slidesjs-next{
-12px-18px;
a.slidesjs-previous{
00;
hover.slidesjs-previous{
0-18px;
a.slidesjs-play{
15px;
-25px0;
hover.slidesjs-play{
-25px-18px;
-41px0;
hover.slidesjs-stop{
-41px-18px;
.slidesjs-pagination{
margin:
7px00;
right;
list-style:
.slidesjs-paginationli{
01px;
.slidesjs-paginationlia{
block;
13px;
0;
padding-top:
.slidesjs-paginationlia.active,
.slidesjs-paginationlia:
hover.active{
0-13px
hover{
0-26px
#slidesa:
link,
visited{
color:
#333
hover,
active{
#9e2020
.navbar{
hidden
--EndSlidesJSOptional-->
--SlidesJSRequired:
Thesestylesarerequiredifyou'
dlikearesponsiveslideshow-->
none
.container{
0auto
/*Fortablets&
smartphones*/
@media(max-width:
767px){
body{
padding-left:
20px;
padding-right:
auto
/*Forsmartphones*/
480px){
/*Forsmallerdisplayslikelaptops*/
@media(min-width:
768px)and(max-width:
979px){
724px
/*Forlargerdisplays*/
1200px){
1170px
-->
body>
StartSlides-->
--Thecontainerisusedtodefinethewidthoftheslideshow-->
container"
Header"
--页面头部-->
<
menu"
ul>
h1>
夏日之华<
objectheight="
20"
100"
data="
林俊杰-生生.mp3"
repeat;
/object>
第一页.html"
主页<
1.html"
博客<
图片.html"
相册<
留言板.html"
留言板<
o
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 博客 系统