采用XHTML+DIV+CSS构建网站
1、采用XHTML+DIV+CSS构建网站的一般原则
（1）首先对整个页面进行布局划分
——明确在网站页面的什么位置应该要放什么东西（内容），网页内容在页面上所处位置的设计即为布局。
● 遵守先“粗”再“细”的原则；
首先划分出大的区域（容器宽度为网站宽度的这类容器）——比如，先划分出网站顶部、栏目导航区、主体区、底部工具栏区、版权信息区几个大区；然后在各个大区中再划出各自的小容器，小容器包含于各自的上级大容器中。
● 再画一个体现设计结果的“草图”（可以在Word中或者Excel中画出）。
（2）明确布局的内容
主要是决定页面尺寸、整体造型、页眉、文本、页脚、图片、多媒体（如声音、动画、视频）等信息的摆放位置。
（3）命名每个容器（每个区域）标签的名称（都应该要有唯一的名称）
在具体进行网站实现时首先画出网站布局的示图——这可以采用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局简单的构画出来，然后把网站的各个区域划分成不同的容器，以一定的规律进行命名、并标记在示图上面。然后按这个图纸上的容器名在模板中用“div id="容器名”来布局，例如：
<div id="webLogoImage"></div>
根据这个容器要表现出的效果在CSS样式文件中用“#容器名{参数}”定义这个容器的样式参数，例如：
# webLogoImage{
}
当然，需要合理地划分出容器并给容器定义有意义和规律的名称。
（4）网站的总体风格要一致，以达到协调统一
● 网站结构的一致性：这包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等；
● 网站标志性元素的一致性：这包括网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等。
2、了解常见的网站布局结构设计
网站网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。
（1）“国”字型网站网页布局
也可以称为“同”、“口”字型，是一些大型网站常采用的布局——最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些条幅形式的内容，中间是主要的信息，与左右一起并列到页面底部，最下面是网站的一些基本信息、、版权声明等信息。
下面的www.xunlei/网站就是采用这样的结构设计，请见下面的示图。
（2）拐角型网页布局
又称“T“字型布局，这种布局结构与上一种的国”字型布局其实只是形式上的区别，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。下面为emd.jxbsu/的结构示图，它体现了拐角型网页布局的基本特性。
（3）标题正文型网页布局
  这种类型的网页布局的最上面是标题，下面是正文信息和导航条等。 bbs.hangzhou/系统采用了该形式的布局。
（4）左右框架型网页布局
  这是一种左右隔离的框架形式的布局结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。这在BBS论坛系统很普遍，因为这种类型的布局结构非常清晰，一目了然。某个论坛系统bbs.px1987/就采用了布局方案。
（5）封面型网页布局
这种类型的网页布局基本上是出现在一些网站的首页，大部分为一些精美的平面设计的动画，放上几个简单的超链接或者仅是一个“进入”的链接。请参考li网站设计方案。
（6）Flash型网页布局
  其实该网页布局结构与上面的封面布局型结构是类似的，只是它采用了Flash动画，因此能够表达更丰富的信息，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体的效果。 www.pdpharm采用了该方案。
3、设计符合XHTML规范的页面结构
（1）页面结构中的常见区块——其目的是达到“信息分类”显示、提高“页面的可读性”
● 在页面顶部一般放“网站标志”和“站点名称”
● 在其下放站点导航主菜单（导航条）
网页设计作业个人网站模板● 在导航条的下面一般为“页面内容”区
● 状态信息显示区
● 最下面为版权和有关法律声明区
（2）采用DIV元素来将这些结构定义出来（相对长度单位）
● em：元素的字体高度
● ex：字母x的高度
● px：象素Pixels
● %：百分比Percentage
4、利用Macromedia Dreamweaver 工具创建XHTML页面
（1）选中其中的“使文档与XHTML兼容”选项
下面为在Macromedia Dreamweaver 工具中创建出一个XHTML页面（也可以在Eclipse工具中创建），但要注意选中其中的“使文档与XHTML兼容”选项。
（2）页面的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title></head>
<body>
<div id="weblogo"></div>
<div id="webmenubar">
  <ul>
        <li><a href="#"> 返回首页 </a></li><li><a href="#"> 登陆系统 </a></li>
<li><a href="#"> 系统注册 </a></li><li><a href="#"> 回密码 </a></li>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。