第7章CSS+Div布局定位概论.pptVIP

第7章 CSS+Div布局定位 7.1 版面布局 网页设计的第一步就是设计版面布局，用最合适浏览的方式将图片、文字等对象放置在页面的不同位置。在设计时必须遵循突出重点、平衡和谐的原则，将网站标志、主菜单等重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。 7.2 CSS样式 7.2.1 创建布局CSS样式 1．在CSS样式浮动面板中单击新建样式按钮，在弹出的“新建CSS规则”对话框中选择“选择器类型”。 2．命名“选择器名称”。类名称以英文字母或“.”开头，如果没有输入“.”，Dreamweaver会自动添加。ID样式名称以英文字母或“#”开头，如果没有输入系统也会自动添加；标签样式和复合内容样式名称直接在列表框中选择即可。 3．确定“规则定义”的位置。“仅限该文档”则定义的CSS规则仅当前文档可用；“新建样式表文件”则会提示存储一个扩展名为“.CSS”的样式表文件，该样式表文件以后可以被移植到其他文档中重复使用。 4．单击“确定”按钮打开CSS规则定义对话框，进行具体属性的定义。 7.2 CSS样式 7.2.2 CSS布局常用属性 DreamweaverCS6将CSS属性分为类型、背景、区块、方框、边框、列表、定位、扩展和过渡9大类。本书前半部分已经介绍了CSS的一些常用属性，这里我们只介绍布局时常用的一些CSS属性。 7.3 Div标签 7.3.1 插入div标签 1．将光标定位在要插入div标签的位置。 2．执行“插入”菜单中的“布局对象”命令，选择“Div标签”；或者在常用选项卡中单击“插入Div标签”按钮。 3．在弹出的“插入Div标签”对话框中设置相应的选项。 4．单击“确定”按钮，div标签以一个虚线框的形式出现的文档中，并带有占位符文本。因为Div是一个块级元素，所以默认状态下占据一整行的宽度，其他对象在下一行显示。当鼠标移到边框时会高亮显示该框。 7.3 Div标签 7.3.2 选择、编辑Div标签 当鼠标移动到Div标签边框变为高亮显示时单击鼠标左键，或者在代码中将光标定位在“div”范围内，均可选中标签。选中标签后即可在“属性”面板中修改该标签的属性。 7.4 创建预设的CSS+Div页面 1．执行“文件”菜单中的“新建”命令，在弹出的“新建文档”对话框中选择“空白页”类别，“页面类型”中CSS布局只能创建HTML页面类型，如“HTML”、“ColdFusion组件”、“PHP”等等。 2．在“布局”项中选择预设好的CSS布局样式。如图7-9所示。“预览”窗口显示该布局，并给出所选布局的简短说明。 3．选择“文档类型”和“布局CSS位置”，单击“创建”按钮，创建一个由CSS+Div布局形成的空白文档。 7.5 实例制作 1．首先分析整个页面布局。该布局中有“header”标签，用于显示网页标题和导航栏；“container”标签用于存放网页主体内容，这个标签又包含“left”和“right”两个标签；“footer”标签用于放置版权信息等内容。 2．新建站点指向本章素材文件夹。 3．新建一个空白的HTML文档。单击“插入”菜单中“布局对象”的“Div标签”命令。 4．在弹出的“插入Div标签”对话框中设置插入位置为“在插入点”，ID号为“header”，单击“确定”按钮，插入一个ID号为“header”的Div标签。 7.5 实例制作 5．接下来插入“container”标签。单击“插入”菜单中“布局对象”的“Div标签”命令。设置该标签插入位置为“在标签之后”指定位置在“div id=”header””之后插入新的标签，ID号为“container”。 6．同理，向网页中插入“right”标签。设置“right”标签的位置为“在开始标签之后”选择指定位置在“div id=”container””之后插入，ID号为“right”。在代码视图或拆分视图的代码中可以看到“right”标签是嵌套在“container”标签内部的。重复前面的操作在网页中插入“left”标签。可以看到后插入的“left”标签是在“right”标签前方，同样是嵌套在“container”标签的内部。 7.5 实例制作 7．最后插入最底端的“footer”标签。单击“插入”菜单中“布局对象”的“Div标签”命令。设置“footer”标签的位置为“在结束标签之前”选择指定位置在“body”之后插入，ID号为“footer”。至此整个页面布局的Div标签全部插入完毕 8．下面为这些Div标签定义CSS规则。将光标定位在“header”标签中，单击CSS面板右下角的新建按钮，在弹出的“新建CSS规则”对话框中设置“选择器类型”为“ID（仅应用于一个HTML元素）”；选择器名称文本框中定义为“#header”