利用AP Div布局页面.ppt

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