原标题: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中的代码如下所示:
责任编辑: