利用APDiv布局页面.ppt

21世纪职业教育数字艺术规划教材,网页设计与制作技能案例教程,第四章,利用APDiv布局页面,:21世纪职业教育数字艺术规划教材:,学习目标,使学生熟悉APDiv的创建和选择。使学生熟悉APDiv的移动和改变大小。使学生熟悉AP元素面板的使用。,:21世纪职业教育数字艺术规划教材:,本章重点,掌握APDiv的属性设置。掌握APDiv的定位。,:21世纪职业教育数字艺术规划教材:,4.1创建APDiv,1创建普通APDiv一般有以下3种方法：（1）将插入点放置在页面中。选择【插入记录】【布局对象】【APDiv】，插入APDiv。（2）单击“布局”插入栏中的【绘制APDiv】按钮，在文档窗口中通过拖动鼠标即可绘制一个APDiv。（3）单击“布局”插入栏中的【绘制APDiv】按钮，按住【Ctrl】键并拖动鼠标即可连续绘制多个APDiv。,2选择APDiv一般都有一下4种方法。（1）将插入点放置在APDiv中，单击文档窗口左下角标签，即可选择APDiv。（2）在“AP元素”面板中单击APDiv的名称，即可选择APDiv。（3）按住【Shift+Ctrl】组合键并单击APDiv，即可选择APDiv。（4）按住【Shift】键，分别单击要选择的各APDiv的内部或边框线，可以选择多个APDiv。,:21世纪职业教育数字艺术规划教材:,APDiv的属性面板主要选项含义如下：（1）【CSS-P元素】：用来指定APDiv的名称，用于识别不同的APDiv。（2）【左】：用来指定APDiv的左边浏览器窗口左边界的距离。（3）【上】：用来指定APDiv的上边浏览器窗口上边界的距离。（4）【宽】：用来指定APDiv的宽。（5）【高】：用来指定APDiv的高。（6）【Z轴】：用来指定APDiv的Z轴顺序（即堆叠顺序）。,4.2APDiv属性面板,:21世纪职业教育数字艺术规划教材:,（7）【可见性】：用来指定APDiv的显示状态，其中主要选项含义如下。default：表示为默认值。inherit：表示继承其父APDiv的属性。visible：表示APDiv及其内容为可见方式，与父APDiv无关。hidden：表示APDiv及其内容为隐藏方式，与父APDiv无关。（8）【背景图像】：用来指定APDiv的背景图像。单击“浏览文件”按钮，在弹出的“选择图像源文件”对话框中选择图像，或者直接在文本框中输入图像的路径。（9）【背景颜色】：用来指定APDiv的背景颜色。,4.2APDiv属性面板,:21世纪职业教育数字艺术规划教材:,（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属性面板,:21世纪职业教育数字艺术规划教材:,在文档窗口中插入APDIV后，在操作过程中常常会根据需要，对APDIV的属性进行适当的调整，如移动APDIV、改变APDIV的大小和对齐APDIV等操作。,4.3调整APDiv,:21世纪职业教育数字艺术规划教材:,4.3调整APDiv,（1）移动APDIV移动APDIV有以下3种方法：选中APDIV，当光标靠近APDIV的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，APDIV将跟着光标的移动而发生改变。选中APDIV，按键盘上的方向键，一次可以将其移动一个像素。选中APDIV，按住【shift】键，然后按键盘上的方向键，一次可以将其移动10个像素。,:21世纪职业教育数字艺术规划教材:,4.3调整APDiv,（2）改变APDIV大小改变APDIV的大小有以下3种方法：将鼠标指针移动到APDIV边框上的小黑方框上，当它变为垂直双向箭头时，按住鼠标左键向下或向上拖动鼠标，则可以调整APDIV的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右拖动鼠标，则可以调整APDIV的宽度。当鼠标指针变为斜向双箭头时，按住鼠标左键斜上或斜下拖动鼠标，则可以调整APDIV的高度或宽度。在【属性】面板中输入宽度和高度值来改变APDIV的大小。,:21世纪职业教育数字艺术规划教材:,4.3