(css网页设计报告.docVIP

《CSS+DIV网页设计》 目录 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{ padd