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

《实训二 Div元素及布局应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实训二Div元素及布局应用静态网页设计与实现学习目标能够规划网页布局。能够使用Div+CSS布局网页的方法完成特定网站的制作。6.3使用Div+CSS布局网页本节内容1.什么是DivDiv是一个容器，在HTML页面中的每一个标签几乎都可以称为一个容器，例如

标签。

文本

标签作为一个容器，其中放入了文本。同样，Div也是一个容器，能够放置文本、图片等网页元素。例如：

2、，然后在相应的单元格放置内容，并通过对表格单元格的位置控制实现布局的目的，是表格式布局的核心。而Div+CSS布局是一种全新的布局方式，Div是这种布局的核心对象，使用CSS布局的页面不需要使用表格，仅从Div的使用上说，做一个简单的布局只需要使用Div与CSS。6.3使用Div+CSS布局网页2.Div+CSS的优势1）表现和内容相分离2）提高搜索引擎对网页的索引效率3）代码简洁，提高页面浏览速度4）易于维护和改版6.3使用Div+CSS布局网页3．插入Div在DreamweaverCS5中可以方便快捷地插入Div，以插入一个“header”Div标签为例。方法如下：1

3、）在“插入”面板中选择“布局”选项卡，点击“插入Div标签”，打开“插入Div标签”对话框，在ID中输入“header”。可以通过类（class）或id设置样式。2）点击“新建CSS规则”按钮，打开新建CSS规则对话框。可以看到“选择器类型”自动选择“ID”，“选择器名称”自动设置为“#header”，“规则定义”选择“新建样式表文件”。点击“确定”按钮，将样式表文件保存到站点文件夹下，名称为“cssfile.css”。点击“确定”按钮，打开CSS规则定义对话框。3）在“类别”中选择“方框”项，宽为700px，高为60px，取消“边界”中的“全部相同”复选框的对勾，“左”

4、、“右”设为“自动”，点击“确定”按钮，再在“插入Div标签”对话框中点击“确定”按钮。此时窗口中插入一个id为“header”Div标签。6.3使用Div+CSS布局网页4．Div的嵌套为了实现更为复杂的网页布局排版，Div可以进行多层嵌套，例如设置一个垂直布局的网页。Div代码如下：头部（top）