《DIV+CSS的网站设计教程》是一份专注于教授如何使用HTML中的DIV元素和CSS进行网站布局的技术资料。在网站设计中，DIV+CSS是一种常用的方法，它能够实现内容与样式的分离，提高网页的可维护性和适应性。
理解CSS布局的关键在于理解CSS处理页面的方式。CSS（层叠样式表）的作用是描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。在开始布局之前，设计师应先关注内容的语义和结构，而不是直接考虑外观。内容的结构化是创建CSS友好页面的基础，这涉及到对页面内容进行逻辑划分，例如标志、主要内容、导航、子菜单、搜索框、功能区和页脚等。这些内容通常通过使用DIV元素并为其分配独特的ID来实现结构化，如`<div id="header"></div>`和`<div id="content"></div>`。
接下来，CSS用于定义这些结构的样式，包括位置、颜色、字体、边框和背景等。每个内容块都可以独立定位，并通过选择器进行精确的样式控制。例如，`#header`、`#content`和`#footer`的选择器可以分别定义头部、内容和页脚的样式。此外，还可以通过ID选择器如`#globalnav a:link`来定义特定区域内的链接样式，或者通过类选择器如`.highlight`来控制具有特定样式的元素。
CSS的一个显著优势是其设备适应性。结构良好的HTML页面可以适应各种屏幕尺寸和设备类型，如PDA、手机或电视。这是因为内容的结构与外观的呈现分离，可以通过不同的CSS定义在不同设备上展现相同的内容。例如，使用媒体查询（@media queries）可以为不同设备编写特定的样式规则。
在实践中，避免使用内联样式和表现层属性（如`cellpadding`、`hspace`、`align="left"`等），这些属性将样式直接绑定到HTML元素，违背了内容与样式的分离原则。理想的HTML代码应保持简洁，只包含结构化信息，而样式则由外部CSS文件控制。例如，不再使用`<table>`的宽度、边距等属性，而是通过CSS设置表格的样式。
学习和掌握DIV+CSS布局技术，需要理解内容的语义化、结构的构建、CSS选择器的运用以及设备适应性的重要性。通过这种方式，可以创建出既美观又灵活的网页，同时提高工作效率和网站的可访问性。
