第五章 DIV简介 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（机械工业出版社）

网页设计与制作 第五章 DIV简介 在网页设计中，Div和表格一样，主要应用在网页的布局设计中。利用本章所介绍的Div标签和AP Div，可以对文字和图像等进行精确定位，使页面保持一定的版式，页面风格更加丰富多彩。 5.1 div基本语法及用法 5.1.1关于DIV标签 Div的全称是 division (区分)，在HTML语言中，Div标签被称为区隔标记，用来在页面中设置文字、图像和表格等的摆放位置。 Div标签的使用方法和其他很多标签一样，需要成对出现，例如：<div>Div标签</div>。 如果单独使用Div标签而不为其设置CSS规则，那么它在网页中的效果和<p></p>标签是一样的，因此，我们通常需要为Div标签设置id属性，以便通过CSS规则和JavaScript语句来控制它，例如，<div id=”sidebar”>Div标签</div>。 5.1 div基本语法及用法 5.1.2插入DIV标签 在Dreamweaver CS5中有两种插入Div标签的方法： 执行【插入】→【布局对象】→【Div标签】菜单命令。 在【插入】面板的【布局】选项卡中单击【插入Div标签】 命令。 Div标签以一个框的形式出现在文档中，并带有占位符文本。将指针移到该框的边缘上时，Dreamweaver会将该框显示为红色。如果边框没有显示，可执行【查看】→【可视化助理】→【CSS布局外框】菜单命令。 5.1 div基本语法及用法 5.1.3编辑DIV标签 单击Div标签的边框，可以在其【属性】检查器中编辑Div标签的【ID】和【类】等属性。 Div标签的【属性】检查器 用户也可以向Div标签中添加内容，将插入点放在Div标签中，然后就像往页面中添加内容一样添加内容即可。 5.1 div基本语法及用法 5.1.4关于AP Div 使用了CSS样式表中的绝对定位属性的<div>标签就叫做AP Div。Dreamweaver CS5.5中的“AP Div”就是Dreamweaver旧版本中的“层”。AP Div可以理解为浮动在网页上的一个页面，可以放置在页面中的任何位置，可以随意移动这些位置，而且它们的位置可以相互重叠，也可以任意控制AP Div的前后位置、显示与隐藏，因此大大加强了网页设计的灵活性。 在网页设计中，将网页元素放到AP Div中，然后在页面中精确定位AP Div的位置，可以实现网页内容的精确定位，使网页内容在页面上排列得整齐、美观、井井有条。 5.1 div基本语法及用法 5.1.5插入AP Div 插入AP Div时，Dreamweaver默认情况下将在设计视图中显示AP Div的外框，并且，当指针移到块上面时还会高亮显示该块。 在Dreamweaver CS5中插入AP Div的方法有两种： 执行【插入】→【布局对象】→【AP Div】菜单命令。 在【插入】面板的【布局】选项卡中单击【绘制AP Div】命令。 在页面中插入一个AP Div后，在AP Div边框的左上角会显示它的标志图标。 5.1 div基本语法及用法 5.1.5插入AP Div 创建AP Div后，只需将插入点放置于该AP Div中，然后就可以像在页面中添加内容一样，将内容添加到AP Div中。 在绘制AP Div时，按住【Ctrl】键不放，可以绘制出多个AP Div。插入多个AP Div后，为了不使各个AP Div之间出现重叠，可以在【AP元素】面板中选中【防止重叠】复选框。 5.1 div基本语法及用法 5.1.6嵌套AP Div 嵌套AP Div是指AP Div本身被包含在另一个AP Div中。嵌套通常用于要将AP Div组合在一起的情况。嵌套AP Div随其父级AP Div一起移动，并且可以设置为继承父级的可见性。 创建嵌套AP Div的方法有以下2种： 1.直接插入 在【AP 元素】面板中取消选中【防止重叠】复选框，在文档窗口中将插入点放置在一个现有的AP Div的内部，然后执行【插入】→【布局对象】→【AP Div】菜单命令即可。 5.1 div基本语法及用法 5.1.6嵌套AP Div 2.直接绘制 在绘制嵌套AP Div之前，首先执行【编辑】→【首选参数】菜单命令，在打开的【首选参数】对话框的【分类】列表框中选择【AP元素】选项，在右侧选中【在AP Div中创建以后嵌套】复选框，然后在【AP元素】面板中取消选中【防止重叠】复选框，在【插