Dreamweaver教程.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Dreamweaver教程,层的建立,层面板,层与表格的相互转化,实现网页的动态效果。,学习目的与要求,4.1 层的创建,4.1.1 创建新层,【插入】|【层】,【插入工具栏】|【布局】上单击绘制层图标,4.1.2 创建嵌套层,（1）,把光标定位在已经建立好的层内，然后选择 菜单【插入】|【层】命令。,（2）,在插入工具栏上单击层按钮，当鼠标变以十 字形状后，在已经建好的层内拖动，或者把 第二个新建层的标记拖动到原来的层中。,4.1.3 层的属性面板,层编号：,输入层的名称。,左边距：,确定所选层左边框距编辑窗口左边缘的距离。,上边距：,确定所选层上边框距编辑窗口上边缘的距离。,Z轴：,设置层在Z轴上的层次。,显示：,设置该层是否具有可见性。,类：,选择层的样式。,溢出,：控制当层的内容超过层的范围时显示内容的方式。,剪辑,：设置层可见区域的大小。,4.1 层的创建,4.1.4 层面板,层面板：,更方便的编辑层的工具。,【防止重叠】复选框,：选中此项则两个层只允许并排 放置，不能有重叠。,显示/隐藏层列：,用于控制层的可见性。,层名称列：,用于显示层的名称及各层间的层次结构，这里按创建层的顺序自动为层命名为 layer1，layer2。,层的Z轴列：,该列用于显示层在Z轴上的顺序，Z值越 大，层越靠上。,4.1 层的创建,4.2.1 层的移动,选择一个层（或按住Shift键，用鼠标单击每个层选择多个图层），当鼠标变为四向箭头时，按下鼠标左键拖动鼠标即可。,选择一个层，通过键盘上的箭头键以一个像素为单位进行层位置的上下左右方向的微调。如果按住Shift键再按方向键，可以加快层的移动。,4.2 层的基本操作,4.2.2 调整层的大小,1单个层的调整,（1）,左键拖动选中层的上下（左右）边框的控制点可修改层的高度（宽度）；左键拖动四个顶角的控制点时，可保持纵横比对层进行缩放。,（2）,选中层，按住Ctrl键再按键盘上的箭头键，可以上下左右调整层的大小，每次调整1个像素。,（3）,打开属性面板，在属性面板上【高】与【宽】的后面输入值进行设置。,4.2 层的基本操作,4.2.2 调整层的大小,2多个层的调整,（1）,在属性面板中的【多个层】右侧输入【宽度】和【高度】的数值，输入的数值将会应用到所选择所有层上。,（2）,选择菜单中的【修改】|【对齐】|【设成高度相同】和【设成宽度相同】，也可以使多个层具有统一的尺寸。,4.2 层的基本操作,4.2.3 层的对齐,（,1,）,按住,Shift,键，将需要对齐的层全部选中，最后选中的层将以黑色的边缘表示，并且它是最后对齐的基准位置。,（,2,）,选择菜单【修改】,|,【对齐】。,4.2 层的基本操作,对齐上边缘：,以最后选中的层为基础，对齐 上边缘。,对齐下边缘：,以最后选中的层为基准，对齐 下边缘。,左对齐：,将开始选择层的左边缘与最后选择 层的左边缘对齐。,右对齐：,将开始选择层的右边缘与最后选择 层的右边缘对齐。,设成高度相同和设成宽度相同：,所有选择的层具有相同的宽度与高度。,4.2 层的基本操作,4.2.4 排列层,层是透明的，但是层中的内容却是不透明的，因此，改变层的排列顺序将会产生不同的排版效果,。,4.2.5 层与表格的相互转化,1层转换为表格,【修改】,|,【转换】,|,【将层转换为表格】,2表格转换为层,【修改】,|,【转换】,|,【将表格转换为层】,4.2 层的基本操作,4.3.1,拖动层,例：看图背单词,1,制作页面外观,主要操作：,插入表格、插入层、插入图像、调整 层的对齐方式,2,添加拖动层行为,主要操作：,设置“拖动层”对话框、选择事件的触 发行为,4.3,层的应用,4.3.2,显示隐藏层,例：动态下拉菜单,1,制作页面外观,主要操作：,利用插入表格、插入层等技术设置主 菜单及各子菜单，包括文字、颜色、对齐 方式等。,2,添加行为,主要操作：,在行为面板中为各主菜单项设置,【显示,-,隐 藏层】行为，注意当某一个层显示时，其 他的层都要设置隐藏。,并,将触发行为的动 作设置为“,onMouseOver,”。,4.3,层的应用,层技术是,DW,的优势所在，一方面应该熟练地使用层技术来完成页面元素的精确定位，另一方面通过设置与层有关的行为来制作具有动态效果的网页，不但能增加制作网页的兴趣，还会增加做好网页的自信心。,本章小结,