DreamweaverCC2015中文版案例教程第2版全套配套课件教学资源第4章.pptVIP

第4章 CSS+Div布局方法 CSS+Div是网站标准中常用的术语之一，CSS和Div的结构被越来越多的人采用，很多人都摒弃了表格而使用CSS来布局页面，它的好处很多，可以使结构更加简洁，定位更加灵活， CSS布局的最终目的是搭建完善的页面架构。通常在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div的方式实现各种定位。 4.1 网页布局 网页布局的核心在于让众多Web标准中的各项技术来达到表现与内容的分离，即网站的结构、表现、行为三者的分离。只有真正实现了结构分离的网页设计，才是真正意议上符合Web标准的网页设计。Div元素体现了网页技术的一种延伸，是一种新的发展方向， 通过CSS来设置Div标签样式，我们将这二者的联合使用称为CSS+Div。 4.1 网页布局 4.1.1 关于表格布局 尽管DIV+CSS的布局形式大行其道，目前仍有很多的网站在使用表格布局，表格布局使用简单，制作者只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。 4.1 网页布局 4.1.2 关于DIV+CSS布局 复杂的表格使得设计极为困难，修改更加繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。而使用CSS布局则可以从根本上改变这种情况。CSS布局的重点不再放在表格元素的设计中，取而代之的是HTML中的另一个元素Div,Div可以理解为“图层”或是一个“块”,Div是一种比表格简单的元素，语法上只有从＜Div＞开始和/Div＞结束，Div的功能仅仅是将一段信息标记出来用于后期的样式定义。 4.1 网页布局 4.1.3 CSS+Div的问题 尽管CSS+Div具有一定的优势，不过现阶段CSS+Div网站建设存在的问题也比较明显，主要表现在以下几个方面。 ① 对于CSS的高度依赖使得网页设计变得较为复杂。相对于HTML4.0中的表格布局（table），CSS+Div尽管不是遥不可及，但至少要比表格定位复杂得多。 ② CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个外部文件中。这一个或几个文件有可能相当复杂，甚至比较庞大。 ③ 对于CSS设计的网站，浏览器兼容性问题比较突出。 ④ CSS+Div对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+Div本身。 4.1 网页布局 4.1.4 表格布局与CSS布局的区别 很多人也许会觉得，有时候使用HTML一样可以实现页面样式的设置，那为什么还要使用CSS呢？接下来，从两个网页的效果分析一下使用CSS的必要性。如图4-5所示为使用了CSS的效果，如图4-6所示为没有使用CSS的效果。 4.2 盒子模型 什么是CSS盒子模式呢？为什么叫它是盒子？首先说说在网页设计中常听到的属性名：内容（Content）、填充（Padding）、边框（Border）、边界（Margin）。CSS盒子模式具备这些属性， 盒子模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制页面中的各个元素的位置。 4.2.1 什么是盒子模型 4.2 盒子模型 margin（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念。margin属性包含4个子属性，分别是margin-top、margin-right、margin-bottom和margin-left，分别用于控制元素4周的边距。 4.2.2 margin（边界） 4.2 盒子模型 border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。Border属性有3个子属性，分别是边框样式（border-style）、边框宽度（border-width)和边框颜色（border-color）。 4.2.3 border（边框） 4.2 盒子模型 在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。padding 属性可以为盒子定义上、右、下、左各边填充的值，分别是padding-top（上填充）、Padding-right（右填充）、Padding-bottom（下填充）和Padding-left（左填充）。 4.2.4 padding（填充） 4.2 盒子模型 从盒模型中可以看出中间部分是content（内容）,它主要用来显示内容，这部分也是整个盒模型的主要部分，其他如margin、border、Pad