Div标签信息技术.pptxVIP

Div标签网页设计与制作 　Div标签　　Div标签称为区隔标记，用来设定字、图像、表格等的摆放位置。可以通过手动插入Div标签并对它们应用CSS定位样式来创建页面布局。Div标签是用来定义 Web 页面的内容中的逻辑区域的标签。可以使用 div 标签将内容块居中，创建列效果以及创建不同的颜色区域等。 　Div标签插入Div标签 （1）创建网页文档“exam8-03.html”，选择菜单命令“插入”→“布局对象”→“Div标签”，或单击“插入”工具栏中“布局”选项卡下的“插入Div标签”按钮，弹出“插入Div标签”对话框，如图所示。 　Div标签插入Div标签 （2）设置Div标签的“ID”为“Div_1”后，单击“确定”按钮，插入Div标签，如图所示。Div标签以一个框的形式出现文档中，并带有占位符文本。当将指针移到该框边缘上时，Dreamweaver会高亮显示该框。如果Div标签已绝对定位，则它将变成AP元素。 　Div标签插入Div标签 在网页“exam8-03.html中插入一个AP Div后，切花到“代码”视图，查看Div标签和AP Div的源代码如图所示。 从AP Div和Div标签的源码可以看出，AP Div是带有绝对定位的Div标签。 　Div标签选择Div标签 在进行Div设置之前，首先要选中Div标签，选择Div标签的的方法有： 当鼠标光标指向Div边框后，Div边框变为红色时，单击Div标签的边框。 将鼠标光标定位到Div标签部后，单击鼠标左键，接着按两次Ctrl+A组合键。 将鼠标光标定位到Div标签部后，单击鼠标左键，然后在“文档”窗口底部的标签选择器中选择单击Div标签。 　Div标签选择Div标签 下面以Div标签“Div_1”为例，设置Div标签的高级CSS样式。 （1）选择菜单命令“窗口”→“CSS样式”，打开“CSS样式”面板。单击“新建CSS规则”按钮，弹出如图所示的“新建CSS规则”对话框。 　Div标签选择Div标签 （2）“选择器类型”下拉列表中选择“ID（仅应用于一个HTML元素）”选择器，在“选择器名称”对话框中输入ID选择器的名称“#Div_1”，在“规则定义”下拉列表中选择“仅限于该文档”，然后单击“确定”按钮，弹出“#Div_1的CSS规则定义”对话框，如图所示。 　Div标签选择Div标签 （3）选择“分类”列表中的“定位”项目，设置“Position”类型为“absolute”（绝对）后，单击“确定”按钮。 （4）切换到“设计”视图，此时原来的Div标签，已经转换成AP Div，如图所示。 　Div标签选择Div标签 （5）在“CSS样式”面板中，选定“apDiv1”，单击面板底部的“编辑样式”按钮，在弹出“#apDiv1的CSS规则定义”对话框中，选择“分类”列表中的“定位”项目，清除“absolute”（绝对）定位属性后，单击“确定”按钮。此时AP Div就变成了一个Div标签，如图所示。 　Div标签　　从上面的操作可以看出，AP Div和Div标签使用的是同一个标签，即“<div>”，不同的是AP Div被赋予了CSS样式，而且其中的定位属性使用了绝对定位，而Div标签只有一个“ID”属性。在创建AP Div的同时，Dreamweaver CS4赋予AP元素CSS样式，而在创建Div标签后，需要再手工单独为Div标签建立一个CSS样式，对其进行控制。实际上，AP Div和Div标签是同一网页元素的不同表现形式。 谢谢观看！网页设计与制作