第5章 网页制作软件 Dreamweaver CS5(实验教程).ppt

5.4.4 Div+CSS布局 5.4 网页布局 1. 创建CSS样式表 通过“新建文档”创建 前两种方式创建CSS样式表都必须依附一个网页文档，也可以直接创建CSS样式表文件。 5.4.4 Div+CSS布局 5.4 网页布局 2. 定义CSS样式表 为“新建CSS规则”对话框做好设置后，单击“确定”按钮，将打开“CSS规则定义”对话框。 选择对话框“分类”列表中的“类型”，定义CSS样式的基本字体和进行类型设置 选择对话框“分类”列表中的“背景”，可以定义CSS样式的背景属性 选择对话框“分类”列表中的“区块”，可以定义标签和属性的间距和对齐方式 选择对话框“分类”列表中的“方框”，可以控制元素在页面上的放置方式 选择对话框“分类”列表中的“边框”，可以定义元素周围的边框的设置 选择对话框“分类”列表中的“列表”，可以为列表标签定义列表设置，如项目符号大小和类型 选择对话框“分类”列表中的“定位”，可以用来确定与选定的CSS样式相关的内容在页面上的定位方式 选择对话框“分类”列表中的“扩展”，其属性包括过滤器、分页和指针选项，它们中的大部分不被任何浏览器支持，或仅被IE4.0或更高版本支持。 5.4.4 Div+CSS布局 5.4 网页布局 3. 应用CSS样式表 对于内联样式表，是完成定义后即刻生效 附加外部CSS样式表文件 打开准备使用CSS样式表文件的网页文档，单击“CSS样式”面板的“附加样式表”按钮 ，或在“属性”面板HTML属性检查器的“类”下拉列表中选择“附加样式表”，打开“链接外部样式表”对话框。 以外部样式表方式添加CSS样式，表现为在网页文档头部使用link标签链接到样式表文件。 可以使用@import声明将一个CSS样式表文件A.css输入到另一个CSS样式表文件B.css中，A中的样式将成为B中的一部分。也可以使用@import声明将一个CSS样式表文件A.css输入到一个网页文档中。定义语句将出现在style和/style之间。 CSS样式的应用 CSS样式中定义的HTML标签样式会自动应用于关联标签，定义的ID样式也会自动对应网页中的ID进行样式设置。只有类样式需要在“属性”面板的“目标规则”或“类”下拉列表中选择应用。 微视频5-6 演示 5.4.4 Div+CSS布局 5.4 网页布局 4. Div的使用 Div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 Div的起始标签div和结束标签/div相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素，甚至嵌套Div，这些内容构成了块。 块中所包含的元素特性由Div标签的属性来控制，或者是通过使用样式表格式化这个块来控制。 5.4.4 Div+CSS布局 5.4 网页布局 4. Div的使用 （1）插入Div标签 将光标置于要插入Div标签的位置，单击菜单栏“插入”|“布局对象”|“Div标签”命令，打开“插入Div标签”对话框 Div标签以一个框的形式出现在设计区，且带有占位符文本。将鼠标悬浮于该框边缘，Dreamweaver高亮显示边框，单击鼠标，选中该Div标签，可在“属性”面板对其进行设置。将光标置于框内，可以向Div标签中添加各种网页元素。 5.4.4 Div+CSS布局 5.4 网页布局 4. Div的使用 （2）插入AP Div AP元素通常是绝对定位的Div标签。单击菜单栏“插入”|“布局对象”|“AP Div”命令，设计区光标位置处出现一个AP Div。 5.4.4 Div+CSS布局 5.4 网页布局 4. Div的使用 （3）“AP元素”面板 单击菜单栏“窗口”|“AP元素”命令，打开“AP元素”面板。 5.4.4 Div+CSS布局 5.4 网页布局 4. Div的使用 （4）AP Div与表格互换 AP Div和表格结合也是网页布局经常用到的技术。 单击菜单栏“修改”|“转换”|“将AP Div转换为表格”命令，打开“将AP Div转换为表格”对话框 单击菜单栏“修改”|“转换”|“将表格转换为AP Div”命令，打开“将表格转换为AP Div”对话框 5.4.4 Div+CSS布局 5.4 网页布局 5. Div与CSS布局 盒子模型是CSS控制页面的一个重要概念。一组div/div、span/span等类似这种语法标签组叫1个盒子，通过设置Div的margin+border+padding控制整个盒子模型在页面所占宽度，通过width和height控制