第9章Div标签剖析.ppt

第9章使用Div布局网页 本章学习内容 9.1 学习任务：Div标签 9.2 AP Div 9.3 案例1：使用AP Div布局简单网页 9.4 AP Div与表格的相互转换 9.5 学习任务：Div与网页布局 9.6 案例2：定位在网页布局中的应用 9.7 案例3:使用CSS+Div布局个人blog ?提示：对于margin、border 、padding属性，可以按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： 1）如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 2）如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 3）如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。 《网页设计与制作案例教程》（第2版） 《网页设计与制作案例教程》（第2版） 网页设计领域，新技术日新月异。HTML5+CSS3标准的正式提出，网页设计迈进崭新时代。目前网页布局中最流行的是CSS+Div技术。与前面章节中介绍的表格布局和框架布局相比，采用CSS+Div布局的网页更加规范，浏览器加载更快，受到业内人士的欢迎。Div标签是该布局模式的重要元素。AP Div是又称为绝对定位的Div标签，它能轻易的定位于页面的任意位置。 9.1 学习任务：Div标签 Div标签是重要的HTML标签，它好比是一个容器，装载了HTML文档中大块(block-level)内容，并定义其位置和样式，Div标签又称为区块标签。 对于一些资深的网页设计者来说，Div并不陌生。Dreamweaver的早期版本中，就有“层”的概念，其实“层”就是我们所说的Div标签。随着网页设计技术日新月异，软件的不断升级，层技术得到进一步的发展。在CSS2.0时代，CSS+Div网页布局技术，已经成为业界主流。 ?本节学习任务 了解网页前台的布局方式，掌握创建Div标签的方法，掌握Div标签与AP Div标签的关系。 9.1.1 Div标签与网页布局 网页前台界面设计通常有三种布局技术，每种布局方式都有其特点。 1．表格布局 表格布局是目前网页中使用比例最高的布局方式。表格布局的优势在于其出现最早，技术成熟，简单且容易上手，是初学者最容易接受的布局方式。表格在定位图片和文本方面有很大优势，且浏览器兼容性良好。表格布局唯一的缺点是，层层嵌套的表格会使网页结构混乱，其线性加载的特征使网页打开速度变慢。 9.1.1 Div标签与网页布局 2．框架布局 框架布局的原理是使用网页嵌套网页的布局技术。随着时间的发展，框架布局由于浏览器的支持性差，已经逐渐退出网页设计的历史舞台。 9.1.1 Div标签与网页布局 3．CSS+Div布局 在HTML4.0标准中，CSS和Div等标签配合使用，真正实现了网页内容和形式的分离。这种布局方式对初学者来说显得有点复杂，但其网页代码的规整和网页加载速度的优化是任何其他布局方式无法比拟的。 CSS+Div布局方式在业界受到越来越高的重视，熟练掌握Div标签及其使用技巧也成为网页设计必备的技能。在CSS+Div布局中，Div标签主要用来装载网页中的内容，其外观与形式完全由CSS进行控制，由此实现了网页内容与形式的分离，使网页代码更加规范、有序。 9.1.2 初识Div标签 … style type=text/css #apDiv1 { position:absolute; left:12px; top:44px; width:273px; height:100px; z-index:1; } /style … div id=apDiv1/div div此处显示新 Div 标签的内容/div 由此可见，创建AP Div之后，自动为其添加了CSS样式，AP Div标签的position属性为absolute，由此可见，它是绝对定位的 Div 标签，是Div标签的特殊形式。 ?提示：可以将任何 HTML元素（例如，一个图像）作为 AP 元素进行分类，方法是为其添加绝对定位属性，即设置其CSS样式中的position属性的值为absolute。 9.2 学习任务：AP Div基础 ?本节学习任务 认识AP Div，掌握使用菜单栏和工具栏创建AP Div元素的基本方法，掌握使用属性面板、“AP元素”面板设置AP Div属性的方法。 9.2.1 AP Div概述 在Dreamweaver CS5环境下，可以使用AP Div灵活方便的定位网页中的元素。把页面元素放在AP Div中，通过控制AP Div堆叠次序、显示或隐藏