第14章综合案例—博客网站

1、第第1414章章 综合案例综合案例博客网站博客网站 本章简介：本章简介： 博客是目前网上很流行的日志形式，很多博客是目前网上很流行的日志形式，很多网友都拥有自己的博客，甚至不止一网友都拥有自己的博客，甚至不止一个。对于自己的博客，用户往往都希个。对于自己的博客，用户往往都希望能制作出既美观又适合自己风格的望能制作出既美观又适合自己风格的页面，很多博客网站也都提供自定义页面，很多博客网站也都提供自定义排版的功能，其实就是加载用户自定排版的功能，其实就是加载用户自定义的义的CSSCSS文件。本章以一个博客首页为文件。本章以一个博客首页为例，综合介绍整个页面的制作方法。例，综合介绍整个页面的制作方法

2、。 分析构架分析构架14.1模块拆分模块拆分14.2整体调整整体调整14.314.1案 例 概 述本例采用恬静、大方的淡蓝色为主基调，配上明灯等体现意境本例采用恬静、大方的淡蓝色为主基调，配上明灯等体现意境的图片。的图片。我的博客14.1.1设计分析博客是一种需要用户精心维护、整理日志的网站，各种各样的博客是一种需要用户精心维护、整理日志的网站，各种各样的色调都有。本例主要表现博客的心情、意境，以及岁月的流失、延色调都有。本例主要表现博客的心情、意境，以及岁月的流失、延伸，因此采用淡蓝色作为主色调，而页面主体背景采用白色为底色，伸，因此采用淡蓝色作为主色调，而页面主体背景采用白色为底色，二者配

3、合表现出明朗、清爽与洁净的感觉。二者配合表现出明朗、清爽与洁净的感觉。蓝色的海洋给人清新自然的感觉，而配合黄色的沙滩蓝色的海洋给人清新自然的感觉，而配合黄色的沙滩BannerBanner图图片，体现出整个博客的风采。左侧的图片，本例选用延伸的隧道，片，体现出整个博客的风采。左侧的图片，本例选用延伸的隧道，生活的气息很快便充满了整个博客，写日志的情调得到很好的体现。生活的气息很快便充满了整个博客，写日志的情调得到很好的体现。页面设计为固定宽度且居中的版式，对于大显示器的用户，两页面设计为固定宽度且居中的版式，对于大显示器的用户，两边使用黑色将整个页面主体衬托出来，并使用灰色虚线将页面框住，边使用

4、黑色将整个页面主体衬托出来，并使用灰色虚线将页面框住，更体现恬静和大气。更体现恬静和大气。14.1.2排版构架网络上的博客站点很多，通常个人的首页包括体现自己风格的网络上的博客站点很多，通常个人的首页包括体现自己风格的BannerBanner、导航条、文章列表和评论列表，以及最新的几篇文章，考、导航条、文章列表和评论列表，以及最新的几篇文章，考虑到实际的内容较多，一般都采用传统的文字排版模式。虑到实际的内容较多，一般都采用传统的文字排版模式。页面框架 #globallink #parameter #main #footer 14.2模 块 拆 分页面的整体框架有了大体设计之后，对各个模块进行分

5、别的处页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合。这也是设计制作网站的通常步骤，养成良好理，最后再统一整合。这也是设计制作网站的通常步骤，养成良好的设计习惯便可熟能生巧。的设计习惯便可熟能生巧。14.2.1导航与Banner页面的整体模块中并没有将页面的整体模块中并没有将BannerBanner单独分离出来，而仅仅只有单独分离出来，而仅仅只有导航的导航的#globallink#globallink模块。可以将模块。可以将BannerBanner图片作为该模块的背景，图片作为该模块的背景，而导航菜单采用绝对定位的方法进行移动。而导航菜单采用绝对定位的方法进行移动。B

6、anner与导航条14.2.2左侧列表博客的博客的#parameter#parameter块包含了该博客的各种信息，包括用户的自块包含了该博客的各种信息，包括用户的自定义图片、链接、文章分类、最新文章列表和最新评论等，这些栏定义图片、链接、文章分类、最新文章列表和最新评论等，这些栏目都是整个博客所不可缺少的。目都是整个博客所不可缺少的。#author块图片14.2.3内容部分内容部分位于页面的主体位置，将其设置为向左浮动，并且适内容部分位于页面的主体位置，将其设置为向左浮动，并且适当地调整当地调整marginmargin值，指定宽度（否则浏览器之间会有差别）值，指定宽度（否则浏览器之间会有差别

7、） 。内容部分14.2.4脚注部分#footer脚注主要用来放一些版权信息和联系方式，重在简单脚注主要用来放一些版权信息和联系方式，重在简单明了。其明了。其HTML框架代码也没有过多的内容，仅仅一个框架代码也没有过多的内容，仅仅一个块中包块中包含一个含一个标记。标记。#footer脚注14.3整 体 调 整至此整个页面已经基本成形。最后还需要对页面根据效果做一些至此整个页面已经基本成形。最后还需要对页面根据效果做一些细节上的调整。例如各个块之间的细节上的调整。例如各个块之间的padding和和margin值是否与整体页值是否与整体页面协调，各个子块之间是否协调统一等。面协调，各个子块之间是否协调统一等。另外对于固定宽度且居中的版式而言，需要考虑给页面添加背景，另外对于固定宽度且居中的版式而言，需要考虑给页面添加背景，以适合大显示器的用户使用。这里给页面添加黑色背景，并且为整个以适合大显示器的用户使用。这里给页面添加黑色背景，并且为整个块添加淡色的左、右、下虚线。块添加淡色的左、右、下虚线。添加左、右、下虚线框小结本章制作了一个博客网站的页面，通过本章这个案例和上一章案本章制作了一个博客网站的页面，通过本章这个案例和上一章案例的比较，可以看到，尽管从最终的外观效果上看差别很大，但是其例的比较，可以看到，尽管从最终的外观