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