采用xhtml+div+css构建网站示例

4、“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。（1）“国”字型网站网页布局也可以称为“同”、“口”字型，是一些大型网站常采用的布局——最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些条幅形式的内容，中间是主要的信息，与左右一起并列到页面底部，最下面是网站的一些基本信息、联系方式、版权声明等信息。下面的http://www.xunlei.com/网站就是采用这样的结构设计，请见下面的示图。（2）拐角型网页布局又称“T“字型布局，这种布

5、局结构与上一种的国”字型布局其实只是形式上的区别，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。下面为http://emd.jxbsu.com/的结构示图，它体现了拐角型网页布局的基本特性。（3）标题正文型网页布局　　这种类型的网页布局的最上面是标题，下面是正文信息和导航条等。http://bbs.hangzhou.com.cn/系统采用了该形式的布局。第5页（4）左右框架型网页布局　　这是一

6、种左右隔离的框架形式的布局结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。这在BBS论坛系统很普遍，因为这种类型的布局结构非常清晰，一目了然。某个论坛系统http://bbs.px1987.com/就采用了布局方案。（5）封面型网页布局这种类型的网页布局基本上是出现在一些网站的首页，大部分为一些精美的平面设计的动画，放上几个简单的超链接或者仅是一个“进入”的链接。请参考http://www.tongli.net网站设计方案。（6）Flash型网页布局　　其实该网页布局结构与上面的封面布

7、局型结构是类似的，只是它采用了Flash动画，因此能够表达更丰富的信息，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体的效果。http://www.pdpharm.com采用了该方案。第5页3、设计符合XHTML规范的页面结构（1）页面结构中的常见区块——其目的是达到“信息分类”显示、提高“页面的可读性”l在页面顶部一般放“网站标志”和“站点名称”l在其下放站点导航主菜单（导航条）l在导航条的下面一般为“页面内容”区l状态信息显示区l最下面为版权和有关法律声明区第5页（2）采用DIV元素来将这些结构定

8、义出来（相对长度单位）lem：元素的字体高度lex：字母x的高度lpx：象素Pixelsl%：百分比Percentage4、利用MacromediaDreamweaver工具创建XHTML页面（1）选中其中的“使文档与XHTML兼容”选项下面为在MacromediaDreamweaver工具中创建出一个XHTML页面（也可以在Eclipse工具中创建），但要注意选中其中的“使文档与XHTML兼容”选