Dreamweaver教程第4章.ppt

《Dreamweaver教程第4章.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver教程第4章.ppt（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Dreamweaver教程第4章 Four short words sum up what has lifted most successful Four short words sum up what has lifted most successful individuals above the crowd: a little bit more. individuals above the crowd: a little bit more. -author -author -date-date4.1 层的创建层的创建4.1.1 创建新层创建新层【插入】【插入】|【层】【层】【插入工具栏】【

2、插入工具栏】|【布局】上单击绘制层图标【布局】上单击绘制层图标4.1.2 创建嵌套层创建嵌套层（1）把光标定位在已经建立好的层内，然后选择把光标定位在已经建立好的层内，然后选择 菜单【插入】菜单【插入】|【层】命令。【层】命令。（2）在插入工具栏上单击层按钮，当鼠标变以十在插入工具栏上单击层按钮，当鼠标变以十 字形状后，在已经建好的层内拖动，或者把字形状后，在已经建好的层内拖动，或者把 第二个新建层的标记拖动到原来的层中。第二个新建层的标记拖动到原来的层中。4.1.3 层的属性面板层的属性面板层编号：层编号：输入层的名称。输入层的名称。左边距：左边距：确定所选层左边框距编辑窗口左边缘的距离。确

3、定所选层左边框距编辑窗口左边缘的距离。上边距：上边距：确定所选层上边框距编辑窗口上边缘的距离。确定所选层上边框距编辑窗口上边缘的距离。Z轴：轴：设置层在设置层在Z轴上的层次。轴上的层次。显示：显示：设置该层是否具有可见性。设置该层是否具有可见性。类：类：选择层的样式。选择层的样式。溢出溢出：控制当层的内容超过层的范围时显示内容的方式。：控制当层的内容超过层的范围时显示内容的方式。剪辑剪辑：设置层可见区域的大小。：设置层可见区域的大小。4.1 层的创建层的创建4.1.4 层面板层面板层面板：层面板：更方便的编辑层的工具。更方便的编辑层的工具。【防止重叠】复选框【防止重叠】复选框：选中此项则两个层

4、只允许并排：选中此项则两个层只允许并排 放置，不能有重叠。放置，不能有重叠。显示显示/隐藏层列：隐藏层列：用于控制层的可见性。用于控制层的可见性。层名称列：层名称列：用于显示层的名称及各层间的层次结构，用于显示层的名称及各层间的层次结构， 这里按创建层的顺序自动为层命名为这里按创建层的顺序自动为层命名为 layer1，layer2。层的层的Z轴列：轴列：该列用于显示层在该列用于显示层在Z轴上的顺序，轴上的顺序，Z值越值越 大，层越靠上。大，层越靠上。4.1 层的创建层的创建4.2.1 层的移动层的移动选择一个层（或按住选择一个层（或按住Shift键，用鼠标单击每个层键，用鼠标单击每个层选择多个

5、图层），当鼠标变为四向箭头时，按下选择多个图层），当鼠标变为四向箭头时，按下鼠标左键拖动鼠标即可。鼠标左键拖动鼠标即可。选择一个层，通过键盘上的箭头键以一个像素为选择一个层，通过键盘上的箭头键以一个像素为单位进行层位置的上下左右方向的微调。如果按单位进行层位置的上下左右方向的微调。如果按住住Shift键再按方向键，可以加快层的移动。键再按方向键，可以加快层的移动。4.2 层的基本操作层的基本操作4.2.2 调整层的大小调整层的大小1单个层的调整单个层的调整（1）左键拖动选中层的上下（左右）边框的控制点左键拖动选中层的上下（左右）边框的控制点可修改层的高度（宽度）；左键拖动四个顶可修改层的高度（

6、宽度）；左键拖动四个顶角的控制点时，可保持纵横比对层进行缩放。角的控制点时，可保持纵横比对层进行缩放。（2）选中层，按住选中层，按住Ctrl键再按键盘上的箭头键，可键再按键盘上的箭头键，可以上下左右调整层的大小，每次调整以上下左右调整层的大小，每次调整1个像素。个像素。（3）打开属性面板，在属性面板上【高】与【宽】打开属性面板，在属性面板上【高】与【宽】的后面输入值进行设置。的后面输入值进行设置。4.2 层的基本操作层的基本操作4.2.2 调整层的大小调整层的大小2多个层的调整多个层的调整（1）在属性面板中的【多个层】右侧输入【宽度】在属性面板中的【多个层】右侧输入【宽度】和【高度】的数值，输

7、入的数值将会应用到所和【高度】的数值，输入的数值将会应用到所选择所有层上。选择所有层上。（2）选择菜单中的【修改】选择菜单中的【修改】|【对齐】【对齐】|【设成高度相【设成高度相同】和【设成宽度相同】，也可以使多个层具同】和【设成宽度相同】，也可以使多个层具有统一的尺寸。有统一的尺寸。4.2 层的基本操作层的基本操作4.2.3 层的对齐层的对齐（1）按住按住Shift键，将需要对齐的层全部选中，键，将需要对齐的层全部选中，最后选中的层将以黑色的边缘表示，并最后选中的层将以黑色的边缘表示，并且它是最后对齐的基准位置。且它是最后对齐的基准位置。（2）选择菜单【修改】选择菜单【修改】|【对齐】。【对

8、齐】。4.2 层的基本操作层的基本操作对齐上边缘：对齐上边缘：以最后选中的层为基础，对齐以最后选中的层为基础，对齐 上边缘。上边缘。对齐下边缘：对齐下边缘：以最后选中的层为基准，对齐以最后选中的层为基准，对齐 下边缘。下边缘。左对齐：左对齐：将开始选择层的左边缘与最后选择将开始选择层的左边缘与最后选择 层的左边缘对齐。层的左边缘对齐。右对齐：右对齐：将开始选择层的右边缘与最后选择将开始选择层的右边缘与最后选择 层的右边缘对齐。层的右边缘对齐。设成高度相同和设成宽度相同：设成高度相同和设成宽度相同：所有选择的层具有相同的宽度与高度。所有选择的层具有相同的宽度与高度。 4.2 层的基本操作层的基本

9、操作4.2.4 排列层排列层层是透明的，但是层中的内容却是不透明的，因此，层是透明的，但是层中的内容却是不透明的，因此，改变层的排列顺序将会产生不同的排版效果改变层的排列顺序将会产生不同的排版效果。 4.2.5 层与表格的相互转化层与表格的相互转化 1层转换为表格层转换为表格【修改】【修改】|【转换】【转换】|【将层转换为表格】【将层转换为表格】 2表格转换为层表格转换为层【修改】【修改】|【转换】【转换】|【将表格转换为层】【将表格转换为层】4.2 层的基本操作层的基本操作4.3.1拖动层拖动层例：看图背单词例：看图背单词 1制作页面外观制作页面外观 主要操作：主要操作：插入表格、插入层、插

10、入图像、调整插入表格、插入层、插入图像、调整 层的对齐方式层的对齐方式2添加拖动层行为添加拖动层行为 主要操作：主要操作：设置设置“拖动层拖动层”对话框、选择事件的触对话框、选择事件的触 发行为发行为4.3 层的应用层的应用4.3.2显示隐藏层显示隐藏层 例：动态下拉菜单例：动态下拉菜单1制作页面外观制作页面外观 主要操作：主要操作：利用插入表格、插入层等技术设置主利用插入表格、插入层等技术设置主 菜单及各子菜单，包括文字、颜色、对齐菜单及各子菜单，包括文字、颜色、对齐 方式等。方式等。2添加行为添加行为 主要操作：主要操作：在行为面板中为各主菜单项设置在行为面板中为各主菜单项设置【显示【显示

11、-隐隐 藏层】行为，注意当某一个层显示时，其藏层】行为，注意当某一个层显示时，其 他的层都要设置隐藏。他的层都要设置隐藏。 并并将触发行为的动将触发行为的动 作设置为作设置为“onMouseOver”。4.3 层的应用层的应用层技术是层技术是DW的优势所在，一方面应该熟练的优势所在，一方面应该熟练地使用层技术来完成页面元素的精确定位，另一地使用层技术来完成页面元素的精确定位，另一方面通过设置与层有关的行为来制作具有动态效方面通过设置与层有关的行为来制作具有动态效果的网页，不但能增加制作网页的兴趣，还会增果的网页，不但能增加制作网页的兴趣，还会增加做好网页的自信心。加做好网页的自信心。 本章小结本章小结