《第十讲 利用图层技术制作网页课件》由会员分享，可在线阅读，更多相关《第十讲 利用图层技术制作网页课件（38页珍藏版）》请在金锄头文库上搜索。
1、第十讲 应用图层技术制作网页,层是被分配了绝对位置的HTML页面元素，通常由标记说明。层可以包括文本、图像或其他任何可在HTML文档正文中放入的内容。层的主要功能包括排版布局和制作动态效果。 在Dreamweaver中，可以方便地在页面上创建层并精确地将层进行定位，还可以创建嵌套层。,层在网页的定位中使用非常广泛，也十分方便。 但用层设计的网页在不同分辨率的显示器上显示时会出现错位现象，不能准确定位。因此层常作为附属工具配合表格、框架等技术来对网页进行设计。,div标签 - 块标签,div标签是成对出现的,以开始,以结束 。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并
2、且不使用任何格式与其关联。 div表示一个块,并无实际的意义,可以通过CSS样式(style)为其赋予不同的表现。,层的基本操作 层的管理 在层中插入对象 层与表格的相互转换 综合实例,1 层的基本操作,层的创建 认识“层”面板 选择、移动和对齐层 层的显示和隐藏 删除层,1.1层的创建,层的首选参数设置 在新建层之前，通过“首选参数”对话框中的“层”选项来设置层的默认属性。,创建层 将插入点放置在“文档”编辑窗口中，然后选择插入布局对象层菜单命令将自动在插入点插入一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，拖动鼠标绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮
3、，在文档编辑窗口中单击鼠标可绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键并拖动即可连续绘制多个层。,创建嵌套层,图层嵌套指的是在一个图层的内部创建另一个图层。 创建嵌套层的方法： 光标定位在图层内，在菜单栏中选择“插入”/“布局对象”/“层” 单击插入面板上的图层按钮，按住Alt键，在图层内拖拽绘制出一个嵌套子图层。 使用图层面板，选择事先建立好的图层，按住Ctrl键，拖拽其到相应的图层中。,1.2 认识“层”面板,“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。,1.3 选择、移动和对齐
4、层,选择单个层 在文档编辑区中单击层边框。 在层中单击鼠标左键，再单击该层的选择柄。 在“层”面板中单击要选择的层的名称。 按住【Ctrl+Shift】键并在层中单击即可选择层。,选择多个层 按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。 按住【Shift】键，在“层”面板中单击要选择的多个层的名称。,移动层 在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。 选择图层，在属性面板中设置图层的精确位置。 选择图层，拖拽图层的选中手柄到目标位置，然后释放。 选择图层，按下键盘上的方向键，一次移动一个像素。,对齐层 在网页制作中常常需要将某些层
5、按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。,对齐多个图层：选择多个图层。在菜单栏中选择“修改”/“排列顺序”，选择相应的对齐方式。这里的对齐多是与最后选择的图层边框进行相应的对齐。,1.4 层的显示和隐藏,在层中可插入所有的网页元素，若想控制层内元素的显示与隐藏可通过改变层的可见性来实现。 在Dreamweaver 8中可通过“层”面板和属性面板对层的显示或隐藏进行控制,1.5 删除层,当不需要某层时，就应将该层删除 在“层”面板或文档编辑区中选择需删除的层，然后按【Delete】键或选择编辑清除菜
6、单命令，还可以在层上单击鼠标右键，在弹出的快捷菜单中选择“删除标签”命令，将层删除。 如果将嵌套层中的父层删除，则其下包含的所有子层也将同时被删除。,2 层的管理,层大小的设置 层属性的设置 层堆叠,2.1 层大小的设置,设置单个层的大小 在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标即可。 在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素的步幅来调整层大小。 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同时再按键盘上的方向键即可按一次10个像素的步幅来调整层大小。 在文档编辑区选择一个层，以像素为单
7、位在属性面板中输入宽度和高度的值。,设置多个层的大小,在文档编辑区选择两个或多个层，选择修改排列顺序设成宽度相同菜单命令或修改排列顺序设成高度相同菜单命令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。 在文档编辑区选择两个或多个层，再在属性面板中的“多个层”栏中输入宽度和高度值，这些值将应用于所有选择的层。,2.2 层的属性设置,层的属性面板,层的属性设置具体操作如下。 （1）选择要设置属性的层。 （2）在属性面板中单击右下角的扩展箭头 （如果它尚未展开），以查看所有属性。 （3）在“层编号”列表框中可为当前层设置名称。 （4）在“左”数值框中设置层左边相对于页面左边或父图层左边
8、的距离。,（5）在“上”数值框中设置层顶端相对于页面顶端或父图层顶端的距离。 （6）在“宽”和“高”数值框中分别设置层的宽度和高度。 （7）在“Z轴”数值框中设置层在Z方向上的值，即设置嵌套层在文档中的重叠顺序，较高值的子层位于较低值的子层上方。 （8）在“可见性”下拉列表中可设置层的可见性。,列表中各项的含义如下。 default：该选项为默认值，表示层的可见性由浏览器决定。大多数浏览器会继承该层父层的可见性。 inherit：该项表示继承其父层的可见性。 visible：该项表示显示层及其内容，而与父层无关。 hidden：该项表示隐藏层及其内容，而与父层无关。 （9）在“背景图像”文本框
9、中设置背景图像的路径。 （10）在“背景颜色”项中设置层的背景颜色。,（11）在“类”下拉列表框中选择层的样式（如在页面中对层进行了CSS样式设置）。 （12）在“溢出”下拉列表框中设置当层中的内容超出了层范围后显示内容的方式. “溢出”下拉列表框中各选项的含义如下。 visible：表示当层中的内容超出层范围时，层自动向右或向下扩展，使层能够容纳并显示其中的内容。 hidden：表示当层中的内容超出层范围时，层的大小保持不变，也不出现滚动条，超出层范围的内容将不显示。,scroll：表示无论层中的内容是否超出层范围，层的右端和下端都会出现滚动条。 auto：表示当层中的内容超出层范围时，层的
10、大小保持不变，但是在层的左端或下端会出现滚动条，以便层中超出范围的内容能够通过拖动滚动条来显示。 （13）在“剪辑”栏中设置层的可见区域。其右侧的“左”、“右”、“上”和“下”4个数值框分别设置层在各个方向上的可见区域与层边界的距离，单位为像素。 （14）在文本框中输入值后，按【Tab】键或【Enter】键来应用该值。,多个层的属性设置,（1）选取要设置相同属性的多个层。 （2）在多层属性面板上部设置所选层的文本和段落格式，设置方法可参考文本格式的设置，这里不再赘述。 （3）在“左”数值框中指定所选层的左侧相对于页或嵌套层左侧的位置。 （4）在“上”数值框中指定所选层的上方相对于页或嵌套层上方
11、的位置。,（5）在“宽”和“高”数值框中设置所有选取层的宽度或高度相同。 （6）在“显示”下拉列表框中各选项的含义与单层属性含义相同。 （7）在“标签”下拉列表框中指定用来定义所选层的HTML标签。 （8）在“背景图像”文本框中指定用于所选图层的背景图片的路径。 （9）在“背景颜色”文本框中输入所选图层要应用的颜色代码，或从色块中选取。 （10）在文本框中输入值后，按【Tab】键或【Enter】键来应用该值。,2.3 层的堆叠,用属性面板设置层的堆叠 在“层”面板或文档编辑区中选择一个层。 在“层”属性面板的“Z轴”文本框中输入一个较大的数字将该层在堆叠顺序中上移，输入一个较小的数字可将该层在
12、堆叠顺序中下移。,用“层”面板设置层的堆叠 选择窗口层菜单命令或按【F2】键打开“层”面板。 选择要改变堆叠顺序的层，将层向上或向下拖至所需的位置时释放鼠标即可。,使用菜单命令设置层的堆叠 在“层”面板或文档编辑区中选择一个层。 选择修改排列顺序子菜单中的“移到最上层”或“移到最下层”命令即可。,3 在层中插入对象,插入文本 插入图像,4 层与表格的相互转换,将层转换为表格 层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加方便，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。 选择菜单栏上的“修改” “转换”可进行表格与层间的转换。,位于模板文件和应用模板设计的文档中的层和表格不能转换。有嵌套的层也不能转换为表格。,将表格转换为层,在网页制作中，表格的灵活性没有层的灵活性强，为了方便调整一些元素的位置，可将表格转化为层。由于层能定位到网页中任何位置，所以将表格转换为层后可以方便定位网页元素的位置。,5 综合实例,用层布局“悠悠音乐”网站首页页面。 巩固层的创建、层的选择、层的移动以及层的属性设置等操作。,
