《网页设计与制作（第二版）》09 使用 Div 标签和 AP Div

网页设计与制作（第二版）目录DIRECTORY01DreamweaverCS5入门05插入图像02创建站点06插入多媒体03设置首页07建立网页链接04DreamweaverCS5编辑文本08表格目录DIRECTORY09使用Div标签和APDiv10框架11表单12CSS样式13行为14资源15模板和库16站点上传和维护09使用Div标签和APDiv1.在Dreamweaver中能使用Div和APDiv。2.掌握在Dreamweaver中编辑Div和APDiv的方法。3.引导学生树立大局意识。任务目标1任务实施一、层综合案例项目利用层制作的页面，如图9-1所示。一、层综合案例项目【操作步骤】步骤1：新建一个HTML文档，保存为“index.html”。单击属性面板上的“页面属性”按钮，设置文字大小为12，文本颜色为“#FFFFFF”，背景图像为“images/bg.gif”，左、右、上、下边距为0。步骤2：按照设计的布局，在相应位置绘制出描绘层，结果如图9-2所示。步骤3：将已存储在网站文件下的图片插入到层中。步骤4：在页面下方绘制出两个描绘层，分别插入文本框与文本。（一）插入<div>标签（1）将鼠标放在要插入<div>标签的位置上，然后点击“插入”菜单，选择“布局对象”命令，在弹出的子菜单中选择“Div标签”项。或者在“插入”面板中选择“布局”项，点击“插入Div标签”图标，如图9-5所示。（2）点击图标后，打开“插入Div标签”对话框，如图9-6所示。二、插入<div>标签二、插入<div>标签02040103（二）在<div>标签内输入内容在该标签的框线内单击鼠标左键，将光标定位到框线内就可以输入内容了。（三）删除<div>标签在“设置”视图中选中<div>标签，按Delete键即可删除。（四）<div>标签嵌套单击鼠标左键，将光标定位到<div>标签内，可以继续插入<div>标签。（五）Div+CSSDiv+CSS是网站标准中的常用术语之一，是为了与HTML网页中的表格（table）定位方式加以区分。在XHTML网站设计标准中，主要采用Div+CSS的方式来实现网页内容的定位，而不再使用表格的定位方式。（六）激活APDiv（1）激活APDiv以后，才能在APDiv中插入内容或对象。移动鼠标把光标移到APDiv内任何位置后单击左键，即可激活APDiv。（2）此时，光标被放在APDiv内，就可以输入内容或对象了。如图9-10所示。（3）被激活的APDiv边框会突出显示，并且同时会显示出“选择手柄”，在“AP元素”面板中，此APDiv的ID名称apDiv1也会高亮度显示，表示此APDiv已被激活。这时在光标所在的位置就可以输入内容或对象了。二、插入<div>标签（七）选择APDiv1.选择一个APDiv的步骤（1）点击“编辑”菜单，选择“首选参数”项，弹出“首选参数”对话框，如图9-11所示。（2）点击“查看”菜单，选择“可视化助理”项，在弹出的子菜单中选择“不可见元素”项，给此项打上对号（√）。2.选择多个APDiv的步骤（1）在文档的“设计”视图中按住Shift键，然后在两个或多个AP元素的边框内或边框边界上单击。（2）在“AP元素”面板中，按住Shift键，然后单击两个或更多个AP元素名称。3.删除APDiv在文档的“设计”视图中，或者在“AP元素”的面板中，选择要删除的一个或者多个APDiv以后，按Delete键即可删除。二、插入<div>标签层中可以包含文本、图像、动画等所有可直接插入网页的对象及如表格、层等排版工具。“三、在层中插入对象（一）可插入层的对象类型文本、图像、动画、视频、表格等一切在网页中可以插入的对象，在层中都可以插入。插入的方法也基本相同。只要将鼠标定位于层内，再执行插入对象的操作就可以了。（二）层的嵌套创建嵌套层就是在一个层内插入另外的层。因为层是可以重叠的所以层的嵌套不像表格嵌套那么直接。只有当一个层的标记被放在另一个层内才是真正的嵌套层。我们用下面两图来比较一下非嵌套层与真正嵌套层的区别。21四、层的绝对定位与相对定位在Dreamweaver中，插入的层虽然都是使用的绝对（absolute）定位方式，但是插入的方式不同，带来的效果是不同的。使用菜单插入的层是没有定位的坐标的，而使用鼠标拖动该层改变其位置后，就会写入坐标值。而拖拽拉出来的层的初始位置坐标就是鼠标开始动作时的坐标。相对定位可以这样操作，先在页面内插入表格且设置居中，鼠标在某单元格内点一下，让光标在此定位，然后通过菜单插入一个层，这个层就相对与这个单元格定位了。插入一个层之后，不要修改它的位置，但是可以更改它的大小，比如把它的高与宽都改成“0”，让它不再影响对其他内容的编辑；如果修改位置这个层的left与top属性出现之后就成了绝对定位了，变成绝对定位后可以把它的left与top属性去掉，就恢复成相对定位了。变成“0”之后，有时子层会看不见，可以按F11键恢复编辑。五、使用“层”浮动面板管理层在层的浮动中可以进行如图9-16所示操作：●显示/隐藏层：更改层的可见性。●防止重叠：若勾选这个选项，则层之间将不能重叠，而只能并行排列。●名称：层的名称。●Z轴：单击Z轴列，输入想要改变的数值来调整层的位置。六、APDiv与表格的相互转换（二）将表格转换成APDiv点击“修改”菜单，选择“转换”命令，在弹出的子菜单中选择“将表格转换为APDiv”项，弹出“将表格转换为APDiv”对话框。（一）将APDiv转换成表格点击“修改”菜单，选择“转换”命令，在弹出的子菜单中选择“将APDiv转换为表格”项，弹出“将APDiv转换为表格”对话框。设置完成后单击“确定”按钮即可将选定的APDiv转换为一个表格。七、设置层的首选参数要设置层的首选参数，可以执行菜单栏中的“编辑/首选参数/层”命令，在弹出的对话框中选择左侧的“层”分类，此时对话框右侧显示的即为可以设置的一些新建层的选项，如图9-19所示。●显示：确定层在默认情况下是否可见。其选项为“默认”“继承”“可见”和“隐藏”。●宽和高：指定使用“插入层”创建的层的默认宽度和高度（以像素为单位）。●背景颜色：可以指定默认的层显示一种背景颜色。●背景图像：可以指定默认的层显示一种背景图像。●嵌套：如果在层中则使用嵌套：指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时，按住键盘上的Alt键可暂时更改此设置。2项目实训项目要求：利用图9-20及层制作网页yybd.html。效果如图9-21所示。操作提示：1.插入Div。2.创建内部和外部CSS。3.应用CSS样式于选中的文本、图像、表格等网页元素。