实训二 Div元素及布局应用.ppt

实训二 Div元素及布局应用 静态网页设计与实现 学习目标 能够规划网页布局。 能够使用Div+CSS布局网页的方法完成特定网站的制作。 6.3　使用Div+CSS布局网页 本节内容 1.什么是Div Div是一个容器，在HTML页面中的每一个标签几乎都可以称为一个容器，例如p标签。 p文本/p p标签作为一个容器，其中放入了文本。同样，Div也是一个容器，能够放置文本、图片等网页元素。例如： div文本/div Div是HTML中指定的专门用于布局设计的容器对象。传统表格的布局之所以能够进行网页的布局设计，完全依赖于表格对象table。在页面中绘制一个由多个单元格组成的表格，然后在相应的单元格放置内容，并通过对表格单元格的位置控制实现布局的目的，是表格式布局的核心。而Div+CSS布局是一种全新的布局方式，Div是这种布局的核心对象，使用CSS布局的页面不需要使用表格，仅从Div的使用上说，做一个简单的布局只需要使用Div与CSS。 6.3　使用Div+CSS布局网页 2.Div+CSS的优势 1）表现和内容相分离 2）提高搜索引擎对网页的索引效率 3）代码简洁，提高页面浏览速度 4）易于维护和改版 6.3　使用Div+CSS布局网页 3．插入Div 在Dreamweaver CS5中可以方便快捷地插入Div，以插入一个“header”Div标签为例。方法如下： 1）在“插入”面板中选择“布局”选项卡，点击“插入Div标签”，打开“插入Div标签”对话框，在ID中输入“header” 。可以通过类（class）或id设置样式。 2）点击“新建CSS规则”按钮，打开新建CSS规则对话框。可以看到“选择器类型”自动选择“ID”，“选择器名称”自动设置为“#header”，“规则定义”选择“新建样式表文件”。点击“确定”按钮，将样式表文件保存到站点文件夹下，名称为“cssfile.css”。点击“确定”按钮，打开CSS规则定义对话框。 3）在“类别”中选择“方框”项，宽为700px，高为60px，取消“边界”中的“全部相同”复选框的对勾，“左”、“右”设为“自动”，点击“确定”按钮，再在“插入Div标签”对话框中点击“确定”按钮。此时窗口中插入一个id为“header”Div标签。 6.3　使用Div+CSS布局网页 4．Div的嵌套 为了实现更为复杂的网页布局排版，Div可以进行多层嵌套，例如设置一个垂直布局的网页。Div代码如下： div id=top头部（top）/div div id=main主体部分（main）/div div id=bottom底部（bottom）/div 在代码中每个div标签通过id名称在CSS样式中定义宽度、高度等属性，top、main、bottom三个Div之间属于并列关系，垂直排列，如要在主体部分增加两列（侧面和主体内容），这就需要用到Div嵌套， sider、container与main形成一种嵌套关系，sider和container被控制左右显示。div id=top头部（top）/div div id=main div id=sider侧面（sider）/div div id=container主体内容（container）/div /div div id=bottom底部（bottom）/div 6.3　使用Div+CSS布局网页 6.3　使用Div+CSS布局网页 5．Div+CSS布局的定位 （1）浮动定位 浮动定位是CSS排版中非常重要的手段。Div可以左右移动，直到外边缘碰到包含它的父元素的边界或另一个Div的边缘。 浮动定位共有三种方式： 1）left：文本或图像会移到父元素的左侧。 2）right：文本或图像会移到父元素的右侧。 3）none：默认。文本或图像会显示于它在文档中出现的位置。 6.3　使用Div+CSS布局网页 （2）position定位 Position定位与浮动定位一样，也是CSS排版中非常重要的概念。 Position即块相对于其父块的位置和相对于它自身所在的位置。共有三种方式： 1）绝对：将对象从文档流中拖出，通过width、height、left、right、top和bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性来定义。 2）固定：使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动。 3）相对：对象不重叠，但依据left、right、top