利用APDiv布局页面.ppt

21世纪职业教育数字艺术规划教材《网页设计与制作技能案例教程》第四章利用APDiv布局页面学习目标:::::21世纪职业教育数字艺术规划教材:::::010204使学生熟悉APDiv的移动和改变大小。使学生熟悉AP元素面板的使用。使学生熟悉APDiv的创建和选择。本章重点:::::21世纪职业教育数字艺术规划教材:::::掌握APDiv的属性设置。掌握APDiv的定位。4.1创建APDiv:::::21世纪职业教育数字艺术规划教材:::::将插入点放置在页面中。选择【插入记录】【布局对象】【APDiv】，插入APDiv。单击“布局”插入栏中的【绘制APDiv】按钮，在文档窗口中通过拖动鼠标即可绘制一个APDiv。单击“布局”插入栏中的【绘制APDiv】按钮，按住【Ctrl】键并拖动鼠标即可连续绘制多个APDiv。1．创建普通APDiv一般有以下3种方法：01将插入点放置在APDiv中，单击文档窗口左下角div标签，即可选择APDiv。在“AP元素”面板中单击APDiv的名称，即可选择APDiv。按住【Shift+Ctrl】组合键并单击APDiv，即可选择APDiv。按住【Shift】键，分别单击要选择的各APDiv的内部或边框线，可以选择多个APDiv。2．选择APDiv一般都有一下4种方法。02APDiv的属性面板主要选项含义如下：4.2APDiv属性面板:::::21世纪职业教育数字艺术规划教材:::::【CSS-P元素】：用来指定APDiv的名称，用于识别不同的APDiv。01【左】：用来指定APDiv的左边浏览器窗口左边界的距离。02【上】：用来指定APDiv的上边浏览器窗口上边界的距离。03【宽】：用来指定APDiv的宽。04【高】：用来指定APDiv的高。05【Z轴】：用来指定APDiv的Z轴顺序（即堆叠顺序）。064.2APDiv属性面板:::::21世纪职业教育数字艺术规划教材:::::（7）【可见性】：用来指定APDiv的显示状态，其中主要选项含义如下。? default：表示为默认值。? inherit：表示继承其父APDiv的属性。? visible：表示APDiv及其内容为可见方式，与父APDiv无关。? hidden：表示APDiv及其内容为隐藏方式，与父APDiv无关。（8）【背景图像】：用来指定APDiv的背景图像。单击“浏览文件”按钮，在弹出的“选择图像源文件”对话框中选择图像，或者直接在文本框中输入图像的路径。（9）【背景颜色】：用来指定APDiv的背景颜色。（10）【溢出】：如果APDiv里面的文字太多或图像太大，APDiv的大小不足以全部显示的时候，就需要设置该功能，其中主要选项的含义如下。? visible：当APDiv中的内容超出APDiv的范围时，APDiv自动向右，向下扩大以显示APDiv的全部内容。? hidden：当APDiv中的内容超出APDiv的范围时，APDiv的大小不变，只显示与APDiv大小相同的内容，其他的内容将不显示。? scrool：不论APDiv是否能完全显示的其中内容，都将会在APDiv中显示滚动条。? auto：当APDiv中的内容超出APDiv的范围时，APDiv的大小保持不变，但APDiv的左端或下端会出现滚动条，使APDiv中超出范围的内容能够通过拖动滚动条来查看。（11）【剪辑】：用来指定APDiv的哪一部分是可见的，输入的数值是距离APDiv的4个边界的长度。4.2APDiv属性面板4.3调整APDiv:::::21世纪职业教育数字艺术规划教材:::::在文档窗口中插入APDIV后，在操作过程中常常会根据需要，对APDIV的属性进行适当的调整，如移动APDIV、改变APDIV的大小和对齐APDIV等操作。（1）移动APDIV4.3调整APDiv:::::21世纪职业教育数字艺术规划教材:::::移动APDIV有以下3种方法：01选中APDIV，当光标靠近APDIV的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，APDIV将跟着光标的移动而发生改变。02选中APDIV，按键盘上的方向键，一次可以将其移动一个像素。03选中APDIV，按住【shift】键，然后按键盘上的方向键，一次可以将其移动10个像素。04*