Dreamweaver教程第4章

第4章层,层的建立层面板层与表格的相互转化实现网页的动态效果。,学习目的与要求,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的优势所在，一方面