《Dreamweaver CC网页设计与制作教程》课件——第8章 DIV+CSS网页布局.pptVIP

第8章DIV+CSS网页布局8.1基本知识介绍8.1.1Web标准的构成Web标准也称为网站标准，但它不是某一个标准，而是一系列标准的集合。目前通常所说的Web标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。通常网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。因此，对应的标准也分为三方面：结构化标准语言，表现标准语言，行为标准。在一系列Web标准中，典型的应用模式是DIV+CSS。当使用DIV+CSS的结构进行页面设计时，浏览器对网页的解析速度大大提高，而且代码量也大幅降低。因此，遵循web标准，可以使网页设计开发更为简便快捷。8.1基本知识介绍8.1.2表格布局和DIV+CSS布局DIV+CSS布局又称CSS布局，其中，DIV负责布局，即将网页进行“分块”或者“分层”；CSS负责控制，即使用CSS来定义网页中各块及元素的样式，例如背景效果、元素的边框位置、文字的大小和颜色等。正所谓，先用DIV大处布局，然后再用CSS细节点缀。这种布局方式不仅可以大大地减少网页代码，并且将页面的结构与表现形式分离开来，从而比表格布局更加简单、更加灵活的定义和控制页面版式和样式。8.1基本知识介绍8.1.3可视化盒模型盒模型（BoxModel）是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。在CSS中，页面上的每个元素都被描绘成一个矩形盒子，这些矩形盒子由标准盒模型描述和定义。根据W3School上对于盒模型的规定，每个盒子由元素的内容、内边距、边框和外边距组成。如图8-1所示。8.2案例：用DIV+CSS布局设计网页【案例目的】学习使用DIV+CSS布局和设计个人博客网页，效果如图8-4所示。【核心知识】掌握使用div标签对页面进行“分块”，并结合CSS样式控制编辑网页。8.2案例：用DIV+CSS布局设计网页8.2.1页面布局分析在开始创建网页之前，首先需要根据构思来规划一下页面的整体布局。通过仔细分析，图8-4中的页面大致可以分解成以下几个部分：顶部部分，包含标题和导航栏。主体内容部分，包含一张图片、侧边栏和主栏内容。底部部分，包含一些版权信息。8.2案例：用DIV+CSS布局设计网页8.2.2插入和编辑div标签在DIV+CSS网页布局中，通常使用div标签对页面进行分层和分块。插入div标签可以有如下两种方法。1.使用主菜单插入div标签2.使用“插入”面板插入div标签8.2案例：用DIV+CSS布局设计网页8.2.3网页布局之div“分分块”对网页布局进行分析和对div标签知识学习后，现在来对网页中的Div进行分块。在实际设计过程中，一般遵循的分块原则是：从上到下，从左到右。8.2案例：用DIV+CSS布局设计网页8.2.4网页布局之“填填空”通过使用div标签对页面进行“分块”之后，向这些“块”中填充内容，如图片、文字、链接等等。8.2案例：用DIV+CSS布局设计网页8.2.5网页布局之CSS“美美容”完成网页的雏形后，使用CSS样式来装饰美化网页，使页面布局更加和谐，看起来更加漂亮时尚。8.2案例：用DIV+CSS布局设计网页8.2.6利用CSS创建导航栏本小节将介绍如何使用CSS样式中的浮动特性来设计横向导航栏，也包括设置链接的访问，激活，定位和鼠标悬停等属性。8.2.7绝对位置（AbsolutePositioning）利用绝对位置的特性来整合文字和图片，可以使得文字浮于图片之上。8.3上机实训项目：使用DIV+CSS进行简单的页面布局效果如图8-40所示。**图8-1盒模型其中，元素框内是实际的内容，内边距出现在内容区域的周围。若给元素添加背景，那么背景应用在由元素的内容和内边距组成的区域。一般，通过定义元素的内边距来区分元素内容和背景。内边距的边缘是边框。添加边框会在内边距区域外边增加一条线，在CSS中可以定义这些线可的样式和宽度，如实线、虚线等。边框以外是外边距，外边距默认是透明的，因此通常使用它控制元素之间的间隔。图8-4个人博客效果图图8-40利用Div+CSS制作页面布局效果**