css_网页设计报告

《C S S+D I V网页设计》
目录
1．前言................................................................ .... . (1)
2．设计要求...................................................... .... .... . (1)
3．开发工具的选用及介绍 (1)
4．个人博客设计 (2)
4.1 css+div布局 (2)
4.2 首页布局................................. .. (9)
4.3 日志布局 (12)
4.4 博友布局 (13)
4.5 相册布局 (15)
4.6 留言布局 (16)
4.7 收藏及好友布局 (16)
5．总结 (17)
1：前言
博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。

对于自己的博客，用户往往都希望能制作出美观又合适自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的css 文件。

个人博客是一个自我展现的平台，可以让大家更好的进行交流。

此次，我们的期末要求就是，自己完成一个个人博客的设计。

博客是一种需要每位用户精心维护，整理日志的网络，各种各样的色调都有。

我所制作的个人博客主要表现出一种青春，岁月的记录，因此采用灰白色作为主色调，而页面背景采用绿色，二者配合表现出明朗，清爽与洁净的感觉。

2：设计要求
要求：1除个人首页外，要求至少包含：自我介绍，图片收藏，网页布局技术，我的爱好，给我留言等栏目，亦可自行增加其他栏目。

2整个网站至少包含10个html页（网站素材自行搜集整理，内容积极向上）。

3个人首页中设定的每个超级链接，必须能够链接到相应页面。

4其中“给我留言”栏目只要采用表单实验html页面部分即可，不需实现对留言内容的后台数据库保存。

5要求综合应用CSS+DIV技术，对个人博客系统进行整体布局以及内容样式控制。

最后效果：1）界面美观、布局设计独到；
2）版面简洁，文本，图案整齐美观；
3）整体色彩和谐，符合美感，贴近主题；
4）网页内各个元素搭配合理；
5）人机交互方便，结构清晰。

3：开发工具的选用及介绍
本次个人博客的设计主要是在Macromedia Dreamweaver的环境下完成的。

Dreamweaver这款专业的网页设计软件在代码模式下对HTML,CSS,和JavaScript 等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对CSS 的学习很有帮助。

4：个人博客设计
4.1 css+div布局
Style层叠样式表:
body
{
background:url(images/bg.jpg) no-repeat center top #000000;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
margin:0px auto auto auto;
color:#696767;
}
p{
padding:0px 0 20px 0;
text-align:justify;
margin:0px;
line-height:17px;
}
p.tips{
padding:0px 0 7px 0;
text-align:justify;
margin:0px;
line-height:17px;
border-bottom:1px #cebf91 dashed; }
h1{
color:#7e5025;
padding:5px 0 10px 0;
margin:0px;
font-size:19px;
font-weight:normal;
}
h2{
color:#2d7513;
padding:0px 0 5px 0;
margin:0px;
font-size:12px;
font-weight:bold;
}
a.read_more{
display:block;
color:#855f35;
float:right;
font-style:italic;
margin:5px 0 0 0;
text-decoration:none;
font-size:12px;
}
a:hover.read_more{
text-decoration:underline;
}
img.left_icon{
float:left;
padding:0px 15px 0px 0px;
}
img.right_icon{
float:right;
padding:0px 0px 0px 15px;
}
.clear{
clear:both;
}
a{
text-decoration:underline;
}
#main_container{
width:960px;
height:auto;
margin:auto;
padding:0px;
position:relative;
}
.top_leafs{
position:absolute;
top:2px;
left:3px;
z-index:200;
}
#header{
width:960px;
height:196px;
margin:0px;
padding:0px;
background:url(images/header_bg.jpg) no-repeat top center; }
.logo{
width:290px;
text-align:center;
font-size:28px;
color:#7e5025;
float:left;
padding:110px 0 0 112px;
}
.logo a{
color:#7e5025;
text-decoration:none;
}
/*---------------- menu tab----------------------*/ .menu{
width:470px;
float:left;
padding:145px 0 0 40px;
}
.menu ul{
list-style:none;
padding:0px;
margin:0px;
}
.menu ul li{
display:inline;
}
.menu ul li a{
float:left;
border:none;
margin:0 10px 0 10px;
_margin:0 7px 0 7px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
}
.menu ul li a:hover{
color:#754928;
border-bottom:3px #bc8d46 solid;
}
.menu ul li.selected a{
float:left;
border:none;
margin:0 10px 0 10px;
text-decoration:none;
color:#754928;
font-size:14px;
font-weight:bold;
border-bottom:3px #bc8d46 solid;
}
/*-------------center_content-------------*/
#center_content{
width:819px;
margin:auto auto 20px auto;
height:auto;
background-color:#fef8e6;
}
.left_content{
width:410px;
float:left;
padding:15px 10px 10px 60px;
}
.right_content{
width:290px;
float:left;
padding:0 10px 10px 20px;
}
.bottom_content{
width:819px;
height:369px;
clear:both;
margin:auto;
background:url(images/bottom_bg.jpg) no-repeat top center; }
.photos_block{
padding:10px 0 10px 0;
}
.photo_box{
width:114px;
height:111px;
float:left;
display:block;
text-align:center;
margin:0 18px 0 0;
position:relative;
background:url(images/photo_bg.gif) no-repeat center;
}
img.photo{
padding:6px 0 0 0;
}
a.view{
float:right;
padding:4px 6px 0 0;
text-decoration:none;
color:#706443;
}
.tip_box{
clear:both;
float:left;
width:290px;
padding:0 0 15px 0;
}
.news_box{
clear:both;
float:left;
width:290px;
padding:5px 0 5px 0;
}
.date_box{
width:47px;
height:49px;
float:left;
text-align:center;
line-height:25px;
font-weight:bold;
background:url(images/date_bg.gif) no-repeat center; }
span.day{
color:#855f35;
}
span.month{
color:#fef8e5;
}
.news_content{
width:230px;
float:left;
padding:0 0 0 10px;
}
.about_text{
width:300px;
padding:195px 0 0 30px;
float:left;
}
.friends_list{
width:180px;
float:left;
padding:195px 0 0 30px;
}
/*----------------------list-------------------------*/
ul.list{
list-style:none;padding:0px;margin:0px;
}
ul.list li{
list-style:none;width: auto;height: auto;padding:0 0 8px 0; margin:0px; }
ul.list li a{
width: auto; padding:0 0 0 15px; margin:0;color:#696767;text-align:left; display:block;
text-decoration:none;background:url(images/footer_bullet.gif)
no-repeat left;
}
ul.list li a:hover{
text-decoration:underline;
}
.bottom_right{
width:240px;
float:left;
text-align:center;
padding:195px 0 0 15px;
}
.bottom_right a{
padding:10px 0 10px 0;
display:block;
}
.footer{
clear:both;
width:770px;
margin:auto;
text-align:center;
padding:5px 0 0 0;
font-size:11px;
border-top:1px #cebf91 dashed;
}
4.2 首页布局
<title>金珍的个人博客--主页</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="unitpngfix.js"></script>
<style type="text/css">
<!--
.STYLE1 {font-size: 14px}
-->
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div class="logo">
<a href="index.html">Welcome to my blog </a>
</div>
<div class="menu">
<ul> <li class="selected STYLE1"><a href="index.html">我的主
页</a></li>
<li class="STYLE1"> <a href="rizhi.html">我的日志
</a></li>
<li class="STYLE1"> <a href="wodequanzi.html">我的圈
子</a> </li>
<li class="STYLE1"><a href="woxingwoxiu.html">我型我
秀</a></li>
<li class="STYLE1"> <a href="liuyan1.html">给我留言
</a></li>
<li class="STYLE1"> <a href="shoucang.html">收藏</a></li>
</ul>
</div>
</div>
<div id="center_content">
<div class="left_content">
<h1><strong>欢迎欢迎，热烈欢迎~</strong></h1>
<p>
<img src="images/guzhang.gif" alt="" width="80"
height="80" class="left_icon" title="" />嘿嘿，欢迎大家来到我的博客，
各位请自便哈，多多留言给力哈！！</p>
<h1><strong>个性签名</strong></h1>
<p>
<img src="images/guzhang2.gif" alt=""
width="100" height="100" class="right_icon" title="" /></p>
<p align="center">︶ㄣ回忆里甜蜜的笑容、
筑成了我心中的梦、</p>
<h1>Photos</h1>
<div class="photos_block">
<div class="photo_box"><a
href="woxingwoxiu.html"><img src="images/37.jpg" alt="" width="106"
height="79" border="0" class="photo" title="" /></a><br />
评论 </div>
<div class="photo_box">
<a href="woxingwoxiu.html"><img src="images/stay.jpg" alt=""
width="100" height="82" border="0" class="photo" title="" /></a><br />
评论 </div> <div class="photo_box">
<a href="woxingwoxiu.html"><img src="images/29.jpg" alt=""
width="100" height="84" border="0" class="photo" title="" /></a><br />
评论 </div>
</div>
</div>
<div class="right_content">
<h1><strong>美文欣赏</strong></h1>
<div class="tip_box">
<h2>倚窗听雨</h2>
<p class="tips"> 淅沥的雨声搅扰了我的清梦，<br />
没有打过招呼，便自由洒脱的由天边飘下，<br />
我忙起身，拉开窗帘，如同欣赏一幅流动的水墨丹青
<br />
</p>
<a href="meiwen1.html">read more </a></div>
<div class="tip_box">
<h2>流年不再，我依然是我<br />
</h2>
<p class="tips">时间在不觉间，便已悄悄的走到了年
末，回首相望，在这即将过去的一年里，多少个浪漫的季节，就这样无声无息
的消逝于指缝间。

<br />
</p>
<a href="meiwen2.html">read more
</a></div>
<h1><strong>博客心情</strong></h1>
<div class="news_box">
<div class="date_box">
<span class="day">01</span><br /> <span class="month">1月</span>
</div>
<div class="news_content">
<h2>元旦一日</h2>
<p>
与以往不同，这次的新年是在学校过的，这是第一
次。

晚上还去打工了、俺在期待三倍工资，哈哈！
</p>
</div>
</div>
<div class="news_box">
<div class="date_box">
<span class="day">09</span><br /> <span class="month">1月</span>
</div>
<div class="news_content">
<h2>最后一次</h2>
<p>
就这么结束了、告别了打工之旅。

虽为期不长，但
是那些点滴还是被铭记了。

</p>
</div>
</div>
</div>
<div class="bottom_content">
<div class="about_text">
<h1><strong>关于我的点滴</strong></h1>
<p>
性格：爱笑爱哭爱闹的“大孩子”。

</p>
<p>爱好：躲被窝、上网、边听音乐边看小说。

</p>
</div>
<div class="friends_list">
<h1><strong>朋友们</strong></h1>
<ul class="list"> <li><a href="wodequanzi.html">土豆</a></li>
<li><a href="wodequanzi.html">木头人</a></li> <li><a href="wodequanzi.html">芋头</a></li>
<li><a href="wodequanzi.html">小丸子</a></li>
</ul>
</div>
<div class="bottom_right"> <img src="images/shan.gif" alt="" width="221" height="50" border="0" title="" /> <img src="images/welcome.gif" alt="" width="224" height="44" border="0" title="" /> </div> <div class="footer">
版权归常熟理工所有</div>
</div>
</div>
</div>
<!-- end of main_container -->8
4.3 日志布局
<title>我的日志</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="unitpngfix.js"></script>
<style type="text/css">
<!--
.STYLE1 {font-size: 14px}
.STYLE2 {
color: #7e5025;
font-size: 24px;
font-weight: bold;
font-style: italic;
}
-->
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div class="logo">
<a href="index.html">Welcome to my blog </a>
</div>
<div class="menu">
<ul>
<li class="selected STYLE1"><a href="index.html">我的主页</a></li>
<li class="STYLE1"> <a href="rizhi.html">我的日志</a></li>
<li class="STYLE1"> <a href="wodequanzi.html">我的圈子</a> </li>
<li class="STYLE1"><a href="woxingwoxiu.html">我型我秀</a></li>
<li class="STYLE1"> <a href="liuyan.html">给我留言</a> </li>
<li class="STYLE1"><a href="shoucang.html">收藏</a></li> </ul>
</div>
</div>
<div id="center_content">
<table width="796" cellpadding="0" cellspacing="0">
<tr>
<td><p class="STYLE2">减肥四件小事</p>
版权归常熟理工所有</div>
4.4 博友布局
<title>我的圈子</title>
<div id="center_content">
<table width="819" cellpadding="0" cellspacing="0">
<tr>
<td width="817" align="center" valign="top" background="images/chahua18.jpg"><p class="STYLE2">My friends</p>
<table width="668" height="97" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="668" align="left" valign="top"><p><img src="images/touxiang6.jpg" width="139" height="139" /><span class="STYLE4">姓名：小丸子----我爱樱桃小丸子如命，哼哼。

我在等属于我的“花轮”</span> </p>
</td>
</tr>
</table>
<table width="691" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="691" height="271" align="right" valign="baseline"><div align="justify">
<p align="center" class="STYLE3">&nbsp;</p>
<p align="center" class="STYLE3">我想，我们都会珍惜，都会幸福的！</p>
<p>&nbsp;</p>
<p><img src="images/youyi.gif" width="443" height="197" /></p>
</div></td>
</tr>
</table>
<table width="692" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="692" align="right" valign="middle"><span class="STYLE4">姓名：芋头--可爱，就是我的标志！</span><img src="images/touxiang7.jpg" width="100" height="100" /></td>
</tr>
</table>
<table width="667" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="794" height="174" align="left" valign="middle"> <img src="images/touxiang3.jpg" width="139" height="139" /><span class="STYLE4">姓名：土豆----咱在等地瓜给俺来电话，呼！</span></td>
</tr>
</table>
<table width="733" height="148" border="0">
<tr>
<td align="right"><span class="STYLE4">姓名：木头人----123木头人，不许说话不许动</span><img src="images/touxiang5.jpg" width="139" height="139" /></td>
</tr>
</table>
<p class="STYLE2">&nbsp;</p></td>
</tr>
</table>
<div class="bottom_content">
4.5 相册布局
<title>我型我秀</title></div>
<div id="center_content">
<table width="817" cellpadding="0" cellspacing="0">
<tr>
<td width="815" align="left" valign="top" background="images/chahua4.jpg"><p class="STYLE2">My photos----IT'S ONLY MINE! </p>
<p class="STYLE2"> 我的记忆尘封已久。

</p>
<p class="STYLE2">&nbsp;</p>
<p class="STYLE2"><span class="STYLE3">这些快乐的记忆</span></p>
<table width="635" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="343" align="center"><img src="images/29.jpg" width="308" height="387" /></td>
<td width="292" align="right"><img src="images/bubiandxin.gif" width="268" height="387" /></td>
</tr>
</table>
<p class="STYLE2">&nbsp;</p>
<p class="STYLE2"> <span class="STYLE3">。

仅留在了曾经</span></p>
<table width="616" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="616" align="right"><img src="images/37.jpg" width="608" height="358" /></td>
</tr>
</table>
<p class="STYLE2">&nbsp;</p>
<p class="STYLE4"> 如今，只是希望有人记得，我也在想念</p> <table width="645" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="342" align="center"><img src="images/ruguo.gif" width="315" height="228" /></td>
<td width="293" align="left"><img src="images/open love.gif" width="295" height="228" /></td>
</tr>
</table>
<p class="STYLE4">&nbsp;</p></td>
</tr>
</table>
<div class="bottom_content">
4.6 留言布局
<title>给我留言</title> <a href="#"></a>
<p class="STYLE5">主人寄语：</p>
<p><img src="images/shadoumikandao.gif" width="100" height="80" /><span class="STYLE8">- _ - 皒沒冇比誰［堅強］， -［隻卜過］,皒懂得偽娤°┈‐--﹥＞</span><img src="images/diaole.gif" width="70" height="70" /></p></td>
</tr>
<tr>
<td width="119"><p><img src="images/chahua2.jpg" width="122" height="110" /></p>
<p align="center" class="STYLE4 STYLE6"> 无敌小丸子</p></td>
<td width="664"><p>想要擁冇﹃個【尛冭陽】．</p>
<p> 兲兲圍繞在臫巳旳身邊溫暖著臫巳旳xin</p></td>
</tr>
<tr>
<td><p><img src="images/chahua5.jpg" width="123" height="110" /></p>
<p class="STYLE6"><strong>花落莫相离</strong></p></td> <td><p>华灯初上，</p>
<p>灯火斑斓，街头上的霓虹灯肆意摇摆。

</p>
<p> 原来这城市的夜景也可以这么暧昧，</p>
<p>这么魅惑人心。

</p></td>
</tr>
<tr>
<td><p><img src="images/chahua11.jpg" width="123" height="110" /></p>
4.7 收藏布局
<title>收藏</title>
<div id="center_content">
<table width="796" cellpadding="0" cellspacing="0">
<tr>
<td><table width="795" border="0">
<tr>
<td width="242" valign="top"
class="STYLE2"><p>&nbsp;</p>
<p>·美文欣赏·</p>
<p class="STYLE4">&nbsp;</p>
<p class="STYLE4"><a href="meiwen1.html">①倚窗听雨</a></p>
<p class="STYLE4"><a href="meiwen2.html">②流年不再，我依然是我</a></p></td>
<td width="258"><p class="STYLE2">&nbsp;</p>
<p class="STYLE2"> ·音乐欣赏·</p>
<p class="STYLE2">&nbsp;</p>
<p class="STYLE2"><a href="yinyuexinshang.html"><img src="images/haibao.jpg" width="270" height="290" border="0" /></a></p> <p class="STYLE2">&nbsp;</p></td>
<td width="281" class="STYLE2"><p>·电影欣赏·</p>
<p>&nbsp;</p>
<p><a href="dianyingxingshang.html"><img src="images/haibao2.jpg" width="270" height="290" border="0" /></a></p></td>
</tr>
</table> <p class="STYLE2">&nbsp;</p>
</td>
</tr>
</table>
<div class="bottom_content">
5：总结
通过此次个人博客的设计后，在网站设计、页面排版架构以及各个模块都有了更深一步的了解和认识。

动手后才知道，想要做一个漂亮的网页其实并不容易。

而在通过自己一步一步慢慢摸索得来的成果，当它慢慢接近完成时，所带来的成就感也是空前之大的。

在不断设计中，使用CSS+DIY技术，使制作过程更简便易行，让编写和排版结构更加清晰。

DIV的灵活性也比较大，产生的垃圾代码也较之比较少，这样更利于我们编写者的清晰、直观的添加处理代码。

有了此次的实践，我相信以后在处理类似问题的时候，也会比较从容的对待。