静态网页制作261.pptVIP

任务1Div+CSS概述任务引入小明已经掌握了用表格布局网页的方法，但是表格布局有一个缺点，就是页面打开速度会比较慢，经过深入学习，小明了解到可以利用div+css布局，不仅可以简化代码，还可以加快显示速度，那么什么是div+css布局呢？知识准备在使用Dreamweaver学习网页制作时，初学者总是习惯先考虑网页外观的呈现样式，比如图片、字体、颜色等所有表现在页面上的内容，然后用Photoshop或者Fireworks绘制出来并切割成小图。最后通过编辑HTML或使用Dreamweaver的可视化编辑方法，将所有设计放置在表格或框架中组织成网页。随着移动和网络技术的发展，网页不仅呈现在电脑屏幕上供浏览，越来越多的用户会选择在PDA、移动电话或屏幕阅读机上查看网页，使用上述方法精心设计的页面在这些媒体上可能就不能显示了。本节将从传统的表格布局（table）跨入到div+css布局。div+css，简单地说，就是使用块级元素（或称为层）放置页面内容，然后使用CSS规则指定层的位置、大小和呈现方式。使用Div+CSS制作网页，最重要的是摈弃传统的表格布局观念，在考虑页面的整体表现效果之前，应当先考虑内容的语义，分析每块内容的目的，并根据这些目的建立相应的HTML结构，然后再针对语义、结构添加CSS。例如图所示的页面：仔细分析图所示的页面结构，可以得到如下几部分：?站点logo?导航菜单?主页面内容?页脚任务2CSS盒模型任务引入小明已经了解了div+css布局的基本概念，但是如何创建规则来排版网页，这就需要用到CSS盒模型，它是Web标准布局的核心所在，那么什么是CSS盒模型，常用的盒模型属性有哪些呢？知识准备早在1996年推出CSS1的时候，W3C组织就建议把所有网页上的对象都放在一个“盒”中，通过创建规则控制“盒”的属性。CSS盒模型是Web标准布局的核心所在，在详细介绍Div+CSS布局之前，读者很有必要先了解CSS盒模型的概念和组成。一、CSS盒模型简介所谓CSS盒模型，是指通过由CSS定义的大小不一的盒子和盒子嵌套排版网页。采用这种编排方式的网页代码简洁，表现和内容分离，后期维护方便，能兼容更多的浏览器。CSS盒模型的示意图如图所示。二、常用的盒模型属性盒模型主要定义四个区域：内容（content）、填充（padding）、边框（border）和边距（margin）。此外，还可以指定盒模型的定位（position）和浮动（float）等属性1．内容内容区域可以放置任何网页元素，本小节介绍常用的文本和背景属性。（1）font-family属性（2）font-style属性（3）font-size属性（4）font属性（5）color属性（6）background-color属性（7）background-image属性（8）background-repeat属性（9）background属性（10）line-height属性2．填充（Padding）Padding属性用于描述盒模型的内容与边框之间的距离，分为padding-top、padding-right、padding-bottom和padding-left四个属性，分别表示盒模型四个方向的内边距。属性值是数值，单位可以是长度、百分比或auto。3．边框（border）border属性用于描述盒模型的边框。Border属性包括border-width、border-color和border-style，这些属性下面又有分支4．边距（Margin）Margin属性分为margin-top、margin-right、margin-bottom、margin-left四个属性，分别表示盒模型四个方向的外边距。属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，实现容器与容器之间的重叠显示5．布局（Layout）使用以上四类属性可以指定CSS布局块的显示外观。在进行页面布局时，还需要一些属性对布局块进行定位，指定布局块在页面中的呈现方式。（1）position属性（2）float和clear属性（3）overflow属性（4）z-index属性任务3CSS层叠顺序任务引入了解了盒模型之后，小明就可以根据网页的需要来创建不同的CSS样式，但是CSS样式有很多种，CSS样式决定了网页的最终外观，那么具体有哪些样式呢？知识准备“层叠”是指浏览器最终为网页上的特定元素显示样式的方式。三种不同的源决定了网页在浏览器中显示的样式