利用AP Div布局页面.ppt

:21,世纪职业教育数字艺术规划教材,:,21,世纪职业教育数字艺术规划教材,网页设计与制作技能案例教程,第 四 章,利用AP Div布局页面,学 习 目 标,使学生熟悉,AP Div,的创建和选择。,使学生熟悉,AP Div,的移动和改变大小。,使学生熟悉,AP,元素面板的使用。,:21,世纪职业教育数字艺术规划教材,:,本 章 重 点,掌握,AP Div,的属性设置。,掌握,AP Div,的定位。,:21,世纪职业教育数字艺术规划教材,:,4.1,创建,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,中，单击文档窗口左下角,标签，即可选择,AP Div,。,（,2,）在“,AP,元素”面板中单击,AP Div,的名称，即可选择,AP Div,。,（,3,）按住,【,Shift+Ctrl,】,组合键并单击,AP Div,，即可选择,AP Div,。,（,4,）按住,【Shift】,键，分别单击要选择的各,AP Div,的内部或边框线，可以选择多个,AP Div,。,:21,世纪职业教育数字艺术规划教材,:,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,轴顺序（即堆叠顺序）。,4.2,AP Div,属性面板,:21,世纪职业教育数字艺术规划教材,:,（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,属性面板,:21,世纪职业教育数字艺术规划教材,:,（,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,属性面板,:21,世纪职业教育数字艺术规划教材,:,在文档窗口中插入,AP DIV,后，在操作过程中常常会根据需要，对,AP DIV,的属性进行适当的调整，如移动,AP DIV,、改变,AP DIV,的大小和对齐,AP DIV,等操作。,4.3,调整,AP Div,:21,世纪职业教育数字艺术规划教材,:,4.3,调整,AP Div,（,1,）移动,AP DIV,移动,AP DIV,有以下,3,种方法：,选中,AP DIV,，当光标靠近,AP DIV,的缩放手柄时，鼠标指针就会变成十字箭头形状，按住鼠标左键拖动，,AP DIV,将跟着光标的移动而发生改变。,选中,AP DIV,，按键盘上的方向键，一次可以将其移动一个像素。,选中,AP DIV,，按住,【shift】,键，然后按键盘上的方向键，一次可以将其移动,10,个像素。,:21,世纪职业教育数字艺术规划教材,:,4.3,调整,AP Div,（2）改变AP DIV大小,改变AP DIV的大小有以下3种方法：,将鼠标指针移动到AP DIV边框上的小黑方框上，当它变为垂直双向箭头时，按住,鼠标左键向下或向上拖动鼠标，则可以调整AP DIV的高度；当鼠标指针变为水平双向箭头时，按住鼠标左键向左或向右拖动鼠标，则可以调整AP DIV的宽度。,当鼠标指针变为斜向双箭头时，按住鼠标左键斜上或斜下拖动鼠标，则可以调整AP DIV的高度或宽度。,在【属性】面板中输入宽度和高度值来改变AP DIV的大小。,:21,世纪职业教育数字艺术规划教材,:,4.3,调整,AP Div,（3）对齐AP DIV,使用AP DIV对齐命令，可利用最后一个选定AP DIV的边框来对其一个或多个AP DIV。选中AP DIV，之后单击菜单【修改】【排列顺序】，即可从弹出的子菜单中选择一种对齐方式。,:21,世纪职业教育数字艺术规划教材,:,