IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

 

首页的设计直接影响网站的整体形象，虽然没有一个统一的规范，但最好将其设计为大众化的，只要信息内容能够合理地编排即可，使用户可以方便地找到需要的信息。另外，首页的高度最好不要超过三个屏幕，页面中使用的颜色最好也不要超过三种。通常一个网站首页包含页眉、Logo、Banner、主导航菜单、主内容栏目和次内容栏目区块、友情链接和页脚等区块框。本例将实现的效果如图1所示。

图1  DIV+CSS布局示例演示效果

 

1  HTML文件的设计

使用CSS布局的好处之一就是它能够控制页面布局，而不需要使用过多的HTML标签，只需要使用一些div、span、ul、li之类的标签。这样不仅使网站源代码更加简洁，而且能把网页中的主要内容放在前面，使网站的内容完全裸露在搜索引擎面前，便于搜索引擎抓取关键内容。本例设计完成一个简单的页面布局，创建一个名为divcss.html的网页文件，所需要的HTML代码如下所示：

 

在本例文件divcss.html中是一个比较简单的网站首页布局，只用到一些“无意义”的div标签来表现网页的内容，而页面的布局和外观都在外部CSS文件layout.css中定义。

 

2  CSS文件设计

在使用HTML和CSS配合编写网页时，如果希望在HTML文件中保持代码简洁，就需要加大CSS代码量，才能编写出完美的页面。比较常见的是使用外部样式表文件，而且如果样式代码比较多，最好将不同类型的样式分别定义在独立的样式文件中。常见的文件命名规范有全局样式（global.css）、框架布局（layout.css）、字体样式（font.css）、链接样式（link.css）和打印样式（print.css）等。并且常用类或ID选择器的命名规范，应尽量以常见的英文单词为准，做到通俗易懂，并在适当的地方加以注释。为本例布局所提供的样式文件layout.css中的代码如下所示：