dreamweaver8网页制作教程08.ppt

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

1、l课堂讲解课堂讲解 l上机实战上机实战 第第8课课 在网页中应用层在网页中应用层 课堂讲解课堂讲解 l l创建层创建层 l l认识认识“层层”面板面板 l l选择、移动和对齐层选择、移动和对齐层 l l层大小和属性设置层大小和属性设置 l l层的显示和隐藏层的显示和隐藏 l l层名的变更层名的变更 l l层的堆叠和删除层的堆叠和删除 l l层与表格的相互转换层与表格的相互转换 创建层创建层 l l层的首选参数设置层的首选参数设置 l l层的建立层的建立 l l层的嵌套层的嵌套 层的首选参数设置层的首选参数设置 在新建层之前，通过在新建层之前，通过在新建层之前，通过在新建层之前，通过“首选参数首

2、选参数首选参数首选参数”对话框中的对话框中的对话框中的对话框中的“层层层层”选项来设置层的选项来设置层的选项来设置层的选项来设置层的默认属性。默认属性。默认属性。默认属性。层的建立层的建立 l l将插入点放置在将插入点放置在将插入点放置在将插入点放置在“文档文档文档文档”编辑窗口中，然后选择编辑窗口中，然后选择编辑窗口中，然后选择编辑窗口中，然后选择 插入插入插入插入 布局对象布局对象布局对象布局对象 层层层层 菜单命令将自动在插入菜单命令将自动在插入菜单命令将自动在插入菜单命令将自动在插入点插入一个层。点插入一个层。点插入一个层。点插入一个层。l l在在在在“插入栏插入栏插入栏插入栏”的的的

3、的“布局布局布局布局”插入栏中单击插入栏中单击插入栏中单击插入栏中单击“绘制层绘制层绘制层绘制层”按钮，拖动鼠标绘制一个层。按钮，拖动鼠标绘制一个层。按钮，拖动鼠标绘制一个层。按钮，拖动鼠标绘制一个层。l l在在在在“插入栏插入栏插入栏插入栏”的的的的“布局布局布局布局”插入栏中单击插入栏中单击插入栏中单击插入栏中单击“绘制层绘制层绘制层绘制层”按钮，在文档编辑窗口中单击鼠标可绘制一个按钮，在文档编辑窗口中单击鼠标可绘制一个按钮，在文档编辑窗口中单击鼠标可绘制一个按钮，在文档编辑窗口中单击鼠标可绘制一个层。层。层。层。l l在在在在“插入栏插入栏插入栏插入栏”的的的的“布局布局布局布局”插入栏

4、中单击插入栏中单击插入栏中单击插入栏中单击“绘制层绘制层绘制层绘制层”按钮，按住按钮，按住按钮，按住按钮，按住【CtrlCtrl】键并拖动即可连续绘制多键并拖动即可连续绘制多键并拖动即可连续绘制多键并拖动即可连续绘制多个层。个层。个层。个层。层的嵌套层的嵌套 层与表格相似，可进行嵌套。在某层内层与表格相似，可进行嵌套。在某层内层与表格相似，可进行嵌套。在某层内层与表格相似，可进行嵌套。在某层内新创建的层称为嵌套层或子层，嵌套层外部新创建的层称为嵌套层或子层，嵌套层外部新创建的层称为嵌套层或子层，嵌套层外部新创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层可浮动于文本编辑窗口的层称为父层。

5、子层可浮动于文本编辑窗口的层称为父层。子层可浮动于文本编辑窗口的层称为父层。子层可浮动于文本编辑窗口的任何位置，子层的大小也可以大于父层，的任何位置，子层的大小也可以大于父层，的任何位置，子层的大小也可以大于父层，的任何位置，子层的大小也可以大于父层，可根据实际需要嵌套多个层。可根据实际需要嵌套多个层。可根据实际需要嵌套多个层。可根据实际需要嵌套多个层。认识认识“层层”面板面板 “层层层层”面板是对层进行管理的场所，可面板是对层进行管理的场所，可面板是对层进行管理的场所，可面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏以方便地查看层的结构。要显示或隐藏以方便地查看层的结构。要显

6、示或隐藏以方便地查看层的结构。要显示或隐藏“层层层层”面板，可选择面板，可选择面板，可选择面板，可选择 窗口窗口窗口窗口 层层层层 菜单命令或按菜单命令或按菜单命令或按菜单命令或按【F2F2】键。键。键。键。选择、移动和对齐层选择、移动和对齐层 l选择层选择层 l选择单个层选择单个层 l选择多个层选择多个层 l移动层移动层 l对齐层对齐层 选择单个层选择单个层 l l在文档编辑区中单击层边框。在文档编辑区中单击层边框。在文档编辑区中单击层边框。在文档编辑区中单击层边框。l l在层中单击鼠标左键，再单击该层的选择柄。在层中单击鼠标左键，再单击该层的选择柄。在层中单击鼠标左键，再单击该层的选择柄。

7、在层中单击鼠标左键，再单击该层的选择柄。l l在在在在“层层层层”面板中单击要选择的层的名称。面板中单击要选择的层的名称。面板中单击要选择的层的名称。面板中单击要选择的层的名称。l l按住按住按住按住【Ctrl+ShiftCtrl+Shift】键并在层中单击即可选键并在层中单击即可选键并在层中单击即可选键并在层中单击即可选择层。择层。择层。择层。选择多个层选择多个层 l 按住按住【Shift】键，在需要选择的多个键，在需要选择的多个层中单击，同时层中单击，同时“层层”面板中选择的面板中选择的层以反白显示。层以反白显示。l按住按住【Shift】键，在键，在“层层”面板中单面板中单击要选择的多个层

8、的名称。击要选择的多个层的名称。移动层移动层 在网页制作中往往需要精确定位层在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。的位置，这就需要对创建的层进行移动。对齐层对齐层 在网页制作中常常需要将某些层按照一定的在网页制作中常常需要将某些层按照一定的在网页制作中常常需要将某些层按照一定的在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有规定对齐。在进行层的对齐操作时，嵌套层中所有规定对齐。在进行层的对齐操作时，嵌套层中所有规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动子层并不参与层的对齐操作，它们只随父

9、层的移动子层并不参与层的对齐操作，它们只随父层的移动子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。而移动，并始终与父层保持相对的固定位置。而移动，并始终与父层保持相对的固定位置。而移动，并始终与父层保持相对的固定位置。层大小和属性设置层大小和属性设置 l l层大小的设置层大小的设置 l l设置单个层的大小设置单个层的大小设置单个层的大小设置单个层的大小 l l设置多个层的大小设置多个层的大小设置多个层的大小设置多个层的大小 l l层属性的设置层属性的设置 l l设置单个层的属性设置单个层的属性设置单个层的属性设置单个层的属性 l l设置多个层的属性设置多个

10、层的属性设置多个层的属性设置多个层的属性 设置单个层的大小设置单个层的大小 l l在文档编辑区选择一个层，在出现的调整柄上按住鼠在文档编辑区选择一个层，在出现的调整柄上按住鼠在文档编辑区选择一个层，在出现的调整柄上按住鼠在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标标左键不放并拖动，当调整到适当的大小时释放鼠标标左键不放并拖动，当调整到适当的大小时释放鼠标标左键不放并拖动，当调整到适当的大小时释放鼠标即可。即可。即可。即可。l l在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【

11、CtrlCtrl】键的同时再键的同时再键的同时再键的同时再按键盘上的方向键即可按一次按键盘上的方向键即可按一次按键盘上的方向键即可按一次按键盘上的方向键即可按一次1 1个像素的步幅来调整个像素的步幅来调整个像素的步幅来调整个像素的步幅来调整层大小。层大小。层大小。层大小。l l在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【在文档编辑区选择一个层，按住【Shift+CtrlShift+Ctrl】键的键的键的键的同时再按键盘上的方向键即可按一次同时再按键盘上的方向键即可按一次同时再按键盘上的方向键即可按一次同时再按键盘上的方向键即可按一次1010个像素的

12、步幅个像素的步幅个像素的步幅个像素的步幅来调整层大小。来调整层大小。来调整层大小。来调整层大小。l l在文档编辑区选择一个层，以像素为单位在属性面板在文档编辑区选择一个层，以像素为单位在属性面板在文档编辑区选择一个层，以像素为单位在属性面板在文档编辑区选择一个层，以像素为单位在属性面板中输入宽度和高度的值。中输入宽度和高度的值。中输入宽度和高度的值。中输入宽度和高度的值。设置多个层的大小设置多个层的大小 l l 在文档编辑区选择两个或多个层，选择在文档编辑区选择两个或多个层，选择在文档编辑区选择两个或多个层，选择在文档编辑区选择两个或多个层，选择 修改修改修改修改 排列顺序排列顺序排列顺序排列

13、顺序 设成宽度相同设成宽度相同设成宽度相同设成宽度相同 菜单命令或菜单命令或菜单命令或菜单命令或 修改修改修改修改 排列顺序排列顺序排列顺序排列顺序 设成高度相同设成高度相同设成高度相同设成高度相同 菜单命菜单命菜单命菜单命令。首先选择的层将自动调整为最后一个选令。首先选择的层将自动调整为最后一个选令。首先选择的层将自动调整为最后一个选令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。择的层相同的宽度或高度。择的层相同的宽度或高度。择的层相同的宽度或高度。l l在文档编辑区选择两个或多个层，再在属性在文档编辑区选择两个或多个层，再在属性在文档编辑区选择两个或多个层，再在属性在文档编

14、辑区选择两个或多个层，再在属性面板中的面板中的面板中的面板中的“多个层多个层多个层多个层”栏中输入宽度和高度值，栏中输入宽度和高度值，栏中输入宽度和高度值，栏中输入宽度和高度值，这些值将应用于所有选择的层。这些值将应用于所有选择的层。这些值将应用于所有选择的层。这些值将应用于所有选择的层。设置单个层的属性设置单个层的属性 在在“属性属性”面板中进行设置。面板中进行设置。设置多个层的属性设置多个层的属性 在在“属性属性”面板中进行设置。面板中进行设置。层的显示和隐藏层的显示和隐藏 在层中可插入所有的网页元素，若在层中可插入所有的网页元素，若想控制层内元素的显示与隐藏可通过改想控制层内元素的显示与

15、隐藏可通过改变层的可见性来实现。变层的可见性来实现。l l单个层的显示和隐藏单个层的显示和隐藏 l l多个层的显示和隐藏多个层的显示和隐藏 单个层的显示和隐藏单个层的显示和隐藏 在在在在DreamweaverDreamweaver 8 8中中中中可可可可通通通通过过过过“层层层层”面面面面板和属性面板对层的显示或隐藏进行控制。板和属性面板对层的显示或隐藏进行控制。板和属性面板对层的显示或隐藏进行控制。板和属性面板对层的显示或隐藏进行控制。多个层的显示和隐藏多个层的显示和隐藏 更更改改多多个个层层的的可可见见性性可可在在“层层”面面板板中中设设置置，单单击击该该列列顶顶部部标标题题的的“眼眼睛睛

16、”图图标标，设设置置所所有有的的层层的的显显示示或或隐隐藏藏。要要将将子子层层设设置置为为“继继承承”父父层层的的属属性性则则需在属性面板中设置。需在属性面板中设置。层名的变更层名的变更 层的名称并非固定不便，为了制作网页时方便工层的名称并非固定不便，为了制作网页时方便工层的名称并非固定不便，为了制作网页时方便工层的名称并非固定不便，为了制作网页时方便工作，可以将层名更改为容易理解和记忆的名称，变更作，可以将层名更改为容易理解和记忆的名称，变更作，可以将层名更改为容易理解和记忆的名称，变更作，可以将层名更改为容易理解和记忆的名称，变更层的名称有以下两种方法。层的名称有以下两种方法。层的名称有以

17、下两种方法。层的名称有以下两种方法。l l在在在在“层层层层”属性面板的属性面板的属性面板的属性面板的“层编号层编号层编号层编号”文本框中输入层的名文本框中输入层的名文本框中输入层的名文本框中输入层的名称。称。称。称。l l在在在在“层层层层”面板中设置层的名称。面板中设置层的名称。面板中设置层的名称。面板中设置层的名称。层的堆叠和删除层的堆叠和删除 l层的堆叠设置层的堆叠设置 l用属性面板设置层的堆叠用属性面板设置层的堆叠 l用用“层层”面板设置面板设置层的堆叠层的堆叠 l l使用菜单命令使用菜单命令设置层的堆叠设置层的堆叠l层的删除层的删除 用属性面板设置层的堆叠用属性面板设置层的堆叠 l

18、 l在在“层层”面板或文档编辑区中选择一面板或文档编辑区中选择一个层。个层。l l在在“层层”属性面板的属性面板的“Z轴轴”文本框中文本框中输入一个较大的数字将该层在堆叠顺输入一个较大的数字将该层在堆叠顺序中上移，输入一个较小的数字可将序中上移，输入一个较小的数字可将该层在堆叠顺序中下移。该层在堆叠顺序中下移。用用“层层”面板设置面板设置层的堆叠层的堆叠 l l选择选择选择选择 窗口窗口窗口窗口 层层层层 菜单命令或按菜单命令或按菜单命令或按菜单命令或按【F2F2】键打开键打开键打开键打开“层层层层”面面面面板。板。板。板。l l选择要改变堆叠顺序的层，将层向上或向下拖至所需的选择要改变堆叠顺

19、序的层，将层向上或向下拖至所需的选择要改变堆叠顺序的层，将层向上或向下拖至所需的选择要改变堆叠顺序的层，将层向上或向下拖至所需的位置时释放鼠标即可。位置时释放鼠标即可。位置时释放鼠标即可。位置时释放鼠标即可。使用菜单命令使用菜单命令设置层的堆叠设置层的堆叠 l在在“层层”面板或文档编辑区中选面板或文档编辑区中选择一个层。择一个层。l选择选择修改修改 排列顺序排列顺序子菜单子菜单中的中的“移到最上层移到最上层”或或“移到最移到最下层下层”命令即可。命令即可。层的删除层的删除 当不需要某层时，就应将该层当不需要某层时，就应将该层删除。在删除。在“层层”面板或文档编辑区中面板或文档编辑区中选择需删除

20、的层，然后按选择需删除的层，然后按【Delete】键或选择键或选择编辑编辑 清除清除菜单命令，菜单命令，还可以在层上单击鼠标右键，在弹出还可以在层上单击鼠标右键，在弹出的快捷菜单中选择的快捷菜单中选择“删除标签删除标签”命令，命令，将层删除。如果将嵌套层中的父层删将层删除。如果将嵌套层中的父层删除，则其下包含的所有子层也将同时除，则其下包含的所有子层也将同时被删除。被删除。层与表格的相互转换层与表格的相互转换 l将层转换为表格将层转换为表格 l将表格转换为层将表格转换为层 将层转换为表格将层转换为表格 层和表格都是对网页进行精确定位的工层和表格都是对网页进行精确定位的工层和表格都是对网页进行精

21、确定位的工层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加方便，但具，用层定位比表格定位使用起来更加方便，但具，用层定位比表格定位使用起来更加方便，但具，用层定位比表格定位使用起来更加方便，但层只有在层只有在层只有在层只有在Internet Explorer 4.0Internet Explorer 4.0或或或或Netscape Netscape Navigator 4.0Navigator 4.0以上的版本中才能够正确显示。以上的版本中才能够正确显示。以上的版本中才能够正确显示。以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设表格对浏览器的版本高低

22、没有要求，如果要使设表格对浏览器的版本高低没有要求，如果要使设表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，计的网页在更低版本的浏览器中也能被正确显示，计的网页在更低版本的浏览器中也能被正确显示，计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。那么可将用层设计的网页转换为表格形式。那么可将用层设计的网页转换为表格形式。那么可将用层设计的网页转换为表格形式。将表格转换为层将表格转换为层 在在网网页页制制作作中中，表表格格的的灵灵活活性性没没有有层层的的灵灵活活性性强强，为为了了方方便便调调整整一一些些元元素素的的位位置置，

23、可可将将表表格格转转化化为为层层。由由于于层层能能定定位位到到网网页页中中任任何何位位置置，所所以以将将表表格格转转换换为为层层后后可可以以方方便便定定位位网网页页元素的位置。元素的位置。上机实战上机实战 本课上机本课上机本课上机本课上机实战将用层布局实战将用层布局实战将用层布局实战将用层布局“悠悠音乐悠悠音乐悠悠音乐悠悠音乐”网网网网站首页页面。通站首页页面。通站首页页面。通站首页页面。通过练习可使读者过练习可使读者过练习可使读者过练习可使读者巩固层的创建、巩固层的创建、巩固层的创建、巩固层的创建、层的选择、层的层的选择、层的层的选择、层的层的选择、层的移动以及层的属移动以及层的属移动以及层的属移动以及层的属性设置等操作。性设置等操作。性设置等操作。性设置等操作。