【2017年整理】实训二Div元素及布局应用.pptVIP

实训二 Div元素及布局应用 静态网页设计与实现 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 学习目标 能够规划网页布局。 能够使用Div+CSS布局网页的方法完成特定网站的制作。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 6.3　使用Div+CSS布局网页 本节内容 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 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布局网页 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 2.Div+CSS的优势 1）表现和内容相分离 2）提高搜索引擎对网页的索引效率 3）代码简洁，提高页面浏览速度 4）易于维护和改版 6.3　使用Div+CSS布局网页 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 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布局网页 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 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