第14章综合—博客网站课题.ppt

第14章 综合案例—博客网站 本章简介： 博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希望能制作出既美观又适合自己风格的页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定义的CSS文件。本章以一个博客首页为例，综合介绍整个页面的制作方法。 分析构架 14.1 模块拆分 14.2 整体调整 14.3 14.1　案 例 概 述 本例采用恬静、大方的淡蓝色为主基调，配上明灯等体现意境的图片。 我的博客 14.1.1　设计分析 博客是一种需要用户精心维护、整理日志的网站，各种各样的色调都有。本例主要表现博客的心情、意境，以及岁月的流失、延伸，因此采用淡蓝色作为主色调，而页面主体背景采用白色为底色，二者配合表现出明朗、清爽与洁净的感觉。 蓝色的海洋给人清新自然的感觉，而配合黄色的沙滩Banner图片，体现出整个博客的风采。左侧的图片，本例选用延伸的隧道，生活的气息很快便充满了整个博客，写日志的情调得到很好的体现。 页面设计为固定宽度且居中的版式，对于大显示器的用户，两边使用黑色将整个页面主体衬托出来，并使用灰色虚线将页面框住，更体现恬静和大气。 14.1.2　排版构架 网络上的博客站点很多，通常个人的首页包括体现自己风格的Banner、导航条、文章列表和评论列表，以及最新的几篇文章，考虑到实际的内容较多，一般都采用传统的文字排版模式。 页面框架 14.2　模 块 拆 分 页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合。这也是设计制作网站的通常步骤，养成良好的设计习惯便可熟能生巧。 14.2.1　导航与Banner 页面的整体模块中并没有将Banner单独分离出来，而仅仅只有导航的#globallink模块。可以将Banner图片作为该模块的背景，而导航菜单采用绝对定位的方法进行移动。 Banner与导航条 14.2.2　左侧列表 博客的#parameter块包含了该博客的各种信息，包括用户的自定义图片、链接、文章分类、最新文章列表和最新评论等，这些栏目都是整个博客所不可缺少的。 #author块 图片 14.2.3　内容部分 内容部分位于页面的主体位置，将其设置为向左浮动，并且适当地调整margin值，指定宽度（否则浏览器之间会有差别） 。 内容部分 14.2.4　脚注部分 #footer脚注主要用来放一些版权信息和联系方式，重在简单明了。其HTML框架代码也没有过多的内容，仅仅一个div块中包含一个p标记。 #footer脚注 14.3　整 体 调 整 至此整个页面已经基本成形。最后还需要对页面根据效果做一些细节上的调整。例如各个块之间的padding和margin值是否与整体页面协调，各个子块之间是否协调统一等。 另外对于固定宽度且居中的版式而言，需要考虑给页面添加背景，以适合大显示器的用户使用。这里给页面添加黑色背景，并且为整个块添加淡色的左、右、下虚线。 添加左、右、下虚线框 小结 本章制作了一个博客网站的页面，通过本章这个案例和上一章案例的比较，可以看到，尽管从最终的外观效果上看差别很大，但是其实它们的布局方法是一样的。因此无论页面布局的设计如何变化，经过分析后都可以总结为某种布局形式，应注意总结其规律。