《网页设计与制作（第2版）》第8章 使用CSS+Div布局

互联网上各种网站都要通过最基本的网页进行呈现，如何布局页面以便能够更好地表现内容和吸引读者，也就成为了网站设计开发人员关注的技术话题。CSS+Div是WEB设计标准，是一种网页布局方法。与传统的表格（table）布局方法不同，CSS+Div可以实现网页的页面内容与表现形式的分离。本章将介绍使用CSS+Div布局网页的基本方法。第8章使用CSS+Div布局学习目标了解CSS盒子模型的基本含义。掌握插入Div标签的方法。掌握使用CSS+Div技术布局网页的方法。8.1.1CSS盒子结构8.1.2CSS盒子属性8.1.3关于Div和Span8.1.4关于id和class8.1 CSS盒子模型8.1.1CSS盒子结构W3C组织建议把网页上的所有对象都放在一个盒子中，一个盒子通常是由盒子中的内容content（包括宽度width和高度height）、盒子的边框border、盒子边框与内容之间的距离padding（称为填充或内边距）、盒子与盒子之间的距离margin（称为边界或外边距）构成的。在定义盒子宽度和高度的时候，要考虑到填充、边框和边界的存在。这样，整个盒子模型在网页中所占的宽度（高度）是：content+padding+border+margin。盒子的实际宽度（高度）是content+padding+border。盒子模型有两种，分别是标准W3C盒子模型和IE盒子模型。在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的。标准W3C盒子模型如图所示。其范围包括margin、border、padding、content，并且content部分的宽度和高度不包含border和padding部分。在标准W3C盒子模型中，盒子宽度=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)，盒子高度=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)。8.1.1CSS盒子结构IE盒子模型如图所示，其范围也包括margin、border、padding、content，但与标准W3C盒子模型不同的是，IE盒子模型content部分的宽度和高度包含了border和pading部分。在IE盒子模型中，盒子宽宽=width+(margin-left)+(margin-right)，盒子高度=height+(margin-top)+(margin-bottom)。8.1.2CSS盒子属性CSS盒子属性包括margin、border、padding和content。border（边框），是内边距和外边距的分界线，可以分离不同的HTML元素，包括border-top（上边框）、border-bottom（下边框）、border-left（左边框）和border-right（右边框），有3个属性，分别是border-style（样式）、border-width（粗细）和border-color（颜色）。padding（填充），也称边距或空白、补白，用来定义内容与边框之间的距离，包括padding-top（上填充）、padding-bottom（下填充）、padding-left（左填充）和padding-right（右填充）。margin（边界），也称外边距，用来设置页面元素与元素之间的距离，定义元素周围的空间范围，包括margin-top（上边界）、margin-bottom（下边界）、margin-left（左边界）和margin-right（右边界）。content（内容），盒子模型中必需的部分，用以存放文字、图像等元素。在给元素设置background-color背景颜色时，IE作用的区域为content+padding，而Firefox作用的区域则是content+padding+border。body是一个特殊的盒子，它的背景颜色会延伸到margin部分。可以通过设置width和height来控制content的大小，对于同一个盒子，可以分别设置每个边的border、padding和margin。8.1.3 关于Div和SpanDiv标签实际上是一种区隔标记，用来为HTML文档内大块（block-level）的内容提供结构和背景。Div的起始标签和结束标签之间的所有内容都是用来构成这个块的。在Div标记之间可以放置其他一些HTML元素，然后使用CSS相关属性将Div容器标记中的元素作为一个独立对象进行修饰，不会影响其他HTML元素。大部分Div标记都可以使用Span标记代替，但Div标签是一个块级元素（block），它的内容会自动地开始一个新行，而Span标签是一个行内元素（inline），其前后不会发生换行。Div标记可以包含Span标记元素，但Span标记一般不包含Div标记。换行是Div固有的惟一格式表现，Span没有固定的格式表现。当对Span应用样式时，它才会产生视觉上的变化。如果不对Span应用样式，那么Span元素中的文本与其他文本不会任何视觉上的差异。可以为Span应用id或class属性，这样既可以增加适当的语义，又便于对Span应用样式。可以对Div通过class或id应用额外的样式，使其作用会变得更加有效。实际上，在网页设计中，对于较大的块可以使用Div完成，而对于具有独特样式的单独HTML元素，可以使用Span标记完成。8.1.4 关于id和class在使用CSS样式时，经常会用id和class来选择调用CSS样式属性。class在CSS中叫“类”，在同一个页面可以无数次调用相同的类样式。id表示标签的身份，是标签的惟一标识。在CSS里id在页面里只能出现一次，即使在同一个页面里调用相同的id多次仍然没有出现页面混乱错误，但为了W3C及各个标准，大家也要遵循id在一个页面里的惟一性，以免出现浏览器兼容问题。例如，在文件头定义了一个id名称样式“#tstyle”，在正文中通过id引用了一次，除了这一次，不能再继续引用了。因此，在页面中凡是需要多次引用的样式，需要定义成类样式，通过class进行多次调用，凡是只用一次的样式，可以定义成id名称样式，当然也可以定义为类样式。一个元素还可以应用多个类，如<divclass="sidebar1pstyle

fontstyle">，这个新的类命名结构带来了更高的灵活性。8.2使用简单的CSS+Div布局8.2.1

教学案例━━把握好你的生活8.2.2

插入Div标签8.2.3

关于CSS布局块8.2.4

关于CSS排版理念8.2.1

教学案例━━把握好你的生活将素材文档复制到站点文件夹下，然后使用CSS+Div设置页面，在浏览器中的显示效果如图8-3所示。8.2.2 插入Div标签插入Div标签的方法是，选择菜单命令【插入】/【布局对象】/【Div标签】，打开【插入Div标签】对话框，进行参数设置即可。8.2.3 关于CSS布局块CSS布局块是不带有属性设置“display:inline”的Div标签，或者是含有“display:block”、“position:absolute”或“position:relative”CSS声明的任何其他页面元素。在DreamweaverCS6中，Div标签、指定了绝对或相对位置的图像、指定了“display:block”样式的a标签、指定了绝对或相对位置的段落等都被视为CSS布局块。出于可视化呈现的目的，CSS布局块不包含内联元素（也就是代码位于一行文本中的元素）或段落之类的简单块元素。DreamweaverCS6为每个CSS布局块可视化助理呈现的可视化内容包括：CSS布局外框、CSS布局背景、CSS布局框模型。DreamweaverCS6提供了多个可视化助理供查看CSS布局块。例如，在设计时可以为CSS布局块启用布局外框、布局背景和布局框模型。将鼠标指针移动到布局块上时，也可以查看显示有选定CSS布局块属性的工具提示。8.2.3 关于CSS布局块查看CSS布局外框、布局背景和布局框模型的方法是，选择菜单命令【查看】/【可视化助理】/【CSS布局外框】或【CSS布局背景】、【CSS布局框模型】。也可通过单击【文档】工具栏上的（可视化助理）按钮，在弹出的下拉菜单中选择使用CSS布局块可视化助理选项。8.2.4 关于CSS排版理念CSS排版是一种很新的排版理念，完全有别于传统的排版习惯。它将页面首先在整体上进行Div标记的分块，然后设计各块的位置，并对各个块进行CSS定位，最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易，甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。首先可以将所有页面内容用一个的大Div容器包裹起来，指定该Div的id名称为container或类似的名称，这个id在整个页面中是惟一的。接着创建相应的CSS样式对该Div容器进行控制，包括设置容器的宽度、左右边界。通常可以把左右边界均设置为“auto”，来使Div居中显示。在这个Div大容器内，可以根据划块再插入相应的Div标签，并使用CSS样式进行位置控制。复杂一些的包括页眉、主体和页脚3个部分，主体部分又可以分为左右、左中右、上下、上中下，形式可以相互嵌套。8.3 使用复杂的CSS+Div布局8.3.1

教学案例━━人生哲理小故事8.3.2使用预设计的CSS+Div布局8.3.3

插入流体网格布局Div标签8.3.4

Div标签的居中、浮动和清除方式8.3.5

正确认识CSS+Div布局8.3.1教学案例━━人生哲理小故事将素材文档复制到站点文件夹下，然后使用CSS+Div设置页面，在浏览器中的显示效果如图8-21所示。7.3.1教学案例━━人生就像一条河7.3.2 创建CSS样式表文件在DreamweaverCS6中，创建外部样式表文件主要有两种方式。一种是在当前网页文档中创建CSS样式时，在打开的【新建CSS规则】对话框的【规则定义】下拉列表中选择【（新建样式表文件）】，打开【将样式表文件另存为】对话框来创建样式表文件。此时创建的样式表文件自动链接到当前打开的网页文档。8.3.2 使用预设计的CSS+Div布局使用预设计的CSS+Div布局创建网页的方法是，选择菜单命令【文件】/【新建】，打开【新建文档】对话框，然后依次选择【空白页】/【HTML】选项。8.3.2 使用预设计的CSS+Div布局8.3.3 插入流体网格布局Div标签创建流体网格布局的方法是，选择菜单命令【文件】/【新建流体网格布局】，打开【新建文档】对话框。媒体类型的中央显示的是网格中列数的默认值，要自定义设备的列数，可根据需要编辑该值。如果要相对于屏幕大小设置页面宽度，可以百分比形式设置屏幕宽度，还可更改栏间距宽度，栏间距是两列之间的空间。8.3.3 插入流体网格布局Div标签创建的页面效果。8.3.3 插入流体网格布局Div标签可以将Div标签中的文本删除，输入适合自己的内容，如果需要继续插入Div标签，可以将鼠标光标置于前一个Div标签的后面，或选中前一个Div标签，然后选择菜单命令【插入】/【布局对象】/【流体网格布局Div标签】。8.3.4

Div标签的居中、浮动和清除方式使用Div标签对页面进行布局，通常在【方框】分类中将左右边界均设置为“auto（自动）”来保证页面内容的居中显示。Div标签通常也是自动换行的，如果要使在一行显示多个Div块，必须对这几个Div标签设置浮动方式，在【方框】分类中主要使用“left（左对齐）”或“right（右对齐）”两个选项。可以设置它们在父容器内同时向左浮动或同时向右浮动。如果一行容纳不下，它们会自动到下一行。在设计时，一般是一行同时容纳固定数量的Div标签，它们的宽度都是提前计算好的。如果在父容器内的上一行中，浮动显示了几个Div标签，如果要在下一行中显示其他Div标签，而且让它们不再随着上一行的Div标签浮动，应在下一行第一个Div标签中设置【清除】选项，通常将其值设置为“both”，这样比较安全，可以保证能够达到目的。对于“left”或“right”选项，读者可以使用其来测试效果，以便可以更清楚地知道应该在哪种情况使用。为了让当前的Div标签不再随其上面的Div标签浮动，可在当前Div标签的样式中设置清除选项为“both”，这个技巧读者需要注意使用。8.3.4

Div标签的居中、浮动和清除方式8.3.5 正确认识CSS+Div布局CSS+Div是目前网页页面布局的主流技术，它具有诸多优点。(1) 页面载入速度快。由于将大部分页面代码写在了CSS中，使得页面体积变得更小。将页面独立成更多的区域，在打开页面的时候，逐层加载，使得加载速度加快。(2) 易于维护和改版。由于使用了CSS+Div方法，将页面内容和表现形式分离，结构清晰、精简，使得在修改页面的时候，直接到CSS里修改相应的样式即可，这样更有效率也更方便，同时也不会破坏页面其他部分的布局样式。(3) 保持视觉的一致性。CSS+Div最重要的优势之一就是保持视觉的一致性，它将所有页面或所有区域统一用CSS控制，避免了不同区域或不同页面体现出的效果偏差。(4) 提高搜索引擎对网页的索引效率。由于将大部分的内容样式写入了CSS中，这就使得网页中正文部分更为突出明显，页面代码精简，便于被搜索引擎采集收录。8.3.5 正确认识CSS+Div布局虽然使用CSS+Div进行页面布局有许多好处，但用户需要清楚以下几个问题：(1) CSS+Div的优点在于可以进行页面统一设计管理，使用一个样式表就可以统一全站风格。但如果仅仅为一个页面或一个Div标记就单独做一个样式表，而没有全局的设计观念，那么这个CSS+Div的设计方式就完全没有必要，甚至成了累赘。(2) 如果像使用表格Table一样来使用CSS+Div，进行无穷尽的嵌套，那么其效果与表格Table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担。(3) 推崇CSS+Div，却不考虑兼容性，是不合适宜的。表格Table设计由来已久，得到浏览器的广泛支持，不会出现错位情况，所以显示效果很好，但是CSS+Div却在部分浏览器中会发生页面错位情况，因此在进行设计的时候也要考虑到浏览器的兼容性。(4) CSS+Div结构清晰精简，不意味着可以全部使用CSS+Div结构，如通篇HTML标签全是<div>，就如同整个HTML是许多毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构，就如同这个页面所有元素全是列表。这就曲解了“CSS+Div”的真实含义，因为一个完整页面几乎不可能仅仅用CSS+Div就能完成。