网页制作与实训 教学课件 ppt 作者 谭建辉 主编 宋爱林 副主编第9章

第章 使用层参与排版,本章要点内容: 层的基本概念和基本操作。 层与表格的互相转换。 层的使用技巧。,本章学习目标 了解层在网页页面排版中的作用。 能够对层进行基本操作并综合实例掌握基本排版技巧。 把握层在使用过程中的八大定律。 本章学前要求 对基本网页操作有所了解，已经学会了文本、图片、超链接以及表格的运用。,9.1 关于层的简介,9.1.1 层的概念 如果您会使用Adobe Photoshop软件的话，一定对层这个概念非常熟悉，Dreamweaver中的“层”和平面设计中的“层”概念比较相似，可以将“层”放置在页面的任何位置，层和层之间同样会出现重叠现象，即当多个层同时出现在一个位置上时，层次高的“层”会遮盖层次低的“层”。在一个“层”中可以继续创建“子层”，“子层”会继承“父层”的属性。 层是一个容器对象，在其中可以插入文本、图像、表格等各种网页元素对象，甚至是另外一个层对象。利用层的属性可以对这些对象精确定位。另外层和时间轴相配合可以产生动画效果，如现在网络上到处都有的浮动广告。利用层的重叠、层的显示以及层的隐藏可以制作出各种特效。,Dreamweaver中创建层的HTML标签可以是、和四种标签，在这里创建的标签中前两个是由W3C所认证的，可以被IE4.0以上版本和Netscape4.0以上版本正常显示，和两种标签只能被Netscape4.0识别，而且Netscape新版本已经不再支持它们。和的区别是：前者是文档块标记，可以将任意一块文档放置在该标记中；后者是文档行标记，可以将任意一行文档置于该标记中。大多数情况下，在不支持层的浏览器中，最好让层内容出现在自己的段落中，因此最好使用而不是，Dreamweaver默认情况下创建的“层”也正是标签。 Dreamweaver MX 2004中，层按钮在“布局”对象面板中，该 按钮称为“描绘层”按钮，其作用是在页面中绘制一个“层”，如图9.1所示。使用时先单击“标准”按钮切换到标准布局，接着单击“描绘层”按钮。,图9.1 “布局”对象面板。,9.1.2 层的分类,层可以分成“普通层”和“嵌套层”。 “普通层”是代码中不包含其它“层”的层，它的移动不会引起其它层的同步移动。 “嵌套层”是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 不管是“普通层”还是“嵌套层”都是可能发生重叠，重叠和嵌套不是一回事。重叠和嵌套的区别在于重叠时代码不会包含在其它层中，重叠仅仅是因为“层”在页面上的位置有交集而已，如图9.2所示。嵌套层中，“子层”和“父层”的位置可能并不重叠，如图9.3所示。,图9.2 两层重叠 图9.3 嵌套层,图9.2所示的两层重叠代码如下，代码没有出现包含关系。其中“id”是指“层”的名称。 重叠层1 重叠层2。 图9.3所示的嵌套层代码如下。“子层”（“Layer2”）代码包含在“父层”（“Layer1”）中。 子层 父层。,9.2 创 建 层,使用层对页面进行排版布局时，可以使用跟踪图像作为页面设计的向导。跟踪图像是放在“文档”窗口背景中的JPEG、GIF或PNG图像。根据跟踪图像，创建层，确定层的大小和位置，最后在层中添加内容，完成制作。本章准备的实例将带领读者一起走过这些步骤。图9.4是制作完成后的效果图。该页面是个人站点“同学录”的首页，整个页面相当简洁，仅存在右侧的“相册”、“留言本”和“通讯录”三个图像链接。本实例采用7个层来布局，有2个层发生重叠，还有2个层是“嵌套层”。 下面开始制作该实例。 步骤1：新建一个空白文档，保存为9.html。设置标题为“同学录”。选择“修改”菜单的“页面属性”命令，在“外观”分类中设置背景色为“#FFFFE1”，在“分类”中选择“跟踪图像”，单击“跟踪图像”文本框旁边的“浏览”按钮，选择图片，如图9.5所示，这个图像将作为本章实例参照对象。,图9.4 本章实例-同学录首页 图9.5 设置跟踪图像,步骤2：为了方便层的定位，选择“查看”菜单的“标尺/显示”命令，并且选择“查看”菜单的“标尺/像素”命令，接着选择“查看”菜单的“网格/网格设置”命令，在“网格设置”对话框中，选中“显示网格”和“靠齐到网格”，如下图9.6所示。 设置完成，此时设计视图效果如下图9.7所示。 在跟踪图像设置好以后，下面开始创建层。,图9.6 网格设置,图9.7 设计视图的效果,9.2.1 创建普通层,创建普通层有3种方法，在下面3个步骤中，我们分别加以介绍。 步骤1：选择“窗口”菜单的“层”命令，打开层面板。将光标定位于页面中，选择“插入”菜单的“布局对象/层”命令。文档窗口下插入层的效果如图9.8所示，此时层面板如图9.9所示。在层面板“名称”列中出现了“Layer1”。,图9.8 插入层Layer1 图9.9 插入Layer1后的层面板,步骤2：单击“布局”对象面板中的“描绘层”按钮，指针变成“十”字形。在页面中沿着“诗歌”拖动，绘制一个新层Layer2。再次单击“描绘会”按钮，按住Ctr键不松手，沿着跟踪图像上的“相册”，“留言本”，“同学录”连续绘制3个层。此时层面板如图9.10所示，文档窗口如图9.11所示。,图9.10 连续绘制4个层后的层面板,图9.11 连续绘制4个层后的文档窗口,步骤3：选择“窗口”菜单的“CSS样式”命令，将“CSS样式”面板打开。单击“新建CSS样式”按钮 ，弹出“新建CSS样式”对话框，在“名称”中输入“.ly3”。在“选择器类型”选项区域中选择“类”选项，在“定义在”选项区域中选择“仅对该文档”。单击“确定”。如图9.12所示。 在弹出的如图9.13所示“CSS样式定义”对话框中选择左侧“分类”列表中的“定位”选项，在“类型”下拉列表中选择“绝对”，并在“定位”选项区域中，给“上”“下”“左”“右”分别定义尺寸。单击下面的“确定”创建CSS样式。,图9.12 “新建CSS样式”对话框 图9.13 “CSS样式定义”对话框,步骤4：将光标置于页面空白处，插入图片pic.gif。单击该图片，在属性面板上“类”右侧的下拉列表中选择“ly3”。此时pic.gif将被放置于一个未命名的层中，如图9.14所示。,图9.14 应用创建的CSS样式的效果,9.2.2 创建嵌套层,嵌套层是其代码包含在另一个层中的层，嵌套层级不限。嵌套通常用于将层组织在一起。注意，子层可以大于父层，子层也可以在父层外。但是移动父层时，子层将保持相对位置一起移动。 下面介绍两种创建嵌套层的方法。 1. 利用“描绘层”按钮 步骤1：在“布局”对象面板上，单击“描绘层”按钮，在文档中绘制一个层。如图9.15。 步骤2：继续单击“描绘层”按钮，按下Alt键不松手，将十字光标置于“层”中继续拖动鼠标创建一个“子层”，如图9.16所示。,图9.15 创建“层” 图9.16 创建“子层”,2. 使用“层面板” 使用“层”面板可以使得创建“嵌套层”更方便，具体方法如下。 步骤1：在9.html中，单击“描绘层”按钮，沿着跟踪图像中“同学录”绘制一个层。此层在层面板中“名称”显示为“Layer6”，如图9.17所示。 步骤2：左键单击“Layer6”，按下Ctr键不松手，拖动“Layer6”到“Layer1”上面（如图9.18所示），松开左键，此时“Layer6”变成了“Layer1”子层，如图9.19所示。,图9.17 Layer6 图9.18 将子层拖动到父层上 图9.19 创建子层,9.3 层的基本操作,9.3.1 选择层 选择单个层的方法有如下两种。 方法1：将光标置于层中，单击该层左上角的标记，如图9.20所示。 方法2：在层面板（“窗口”“层”）中，单击想要选择的层，如图9.21所示。,图9.20 单击层标记选择层 图9.21 在层面板中选择层,若要选择多个层，可以执行下面的两种方法。 方法1：在“层”面板（“窗口”“层”）中，请按住Shift键并单击两个或更多的层名称，如图9.22所示。 方法2：在“文档”窗口中，在两个或更多个层的边框内（或边框上）按住Shift键并单击，如图9.23所示。 当选定多个层时，最后选定层的大小调整柄将以黑色突出显示。其它层的大小调整柄则以白色显示，如图9.23所示。,图9.22 在层面板中选择多个层 图9.23 单击层边框选择多个层,9.3.2 在层中添加内容 在层中可以添加文本、图片、表格等多种元素。在层中插入表格，并结合显示和隐藏层实现下拉菜单的效果，在后文中将以实例说明。 下面地步骤将为前面创建的层添加内容。具体如下。 步骤1：在层面板中选择“Layer1”，将光标置于层中，选择“插入”菜单的“图像”命令，在弹出的“选择图像源文件”对话框中选择“top.gif”，并且采用相对于“文档”。如图9.24所示。,图9.24 插入顶部图象,重复上面的步骤在层“Layer6”中插入“title.gif”，接着分别在“Layer3”、“Layer4”和“Layer5”中插入bottom1.gif、bottom2.gif和bottom3.gif，效果如图9.25所示。 步骤2：将光标置于“Layer2”中，插入1行1列表格，将表格拉伸至大小基本和层一致。 在表格中添加一段文本（第九章“本章实例”文件夹下的“诗歌.txt”存有此段文本）。设置这段文本，字体为“宋体”，大小为“16像素”，颜色为“#339999”，如图9.26所示。,图9.25 插入图像 图9.26 添加内容后的效果,9.3.3 调整层的大小 调整层的大小具体方法如下。 步骤1：在层面板中选择层。 步骤2：使用鼠标拖曳“层”边界上的控制点，从而编辑“层”的大小，如图9.27所示。,图9.27 调整层的大小,9.3.4 移动层 移动层的具体方法如下。 步骤1：在层面板中选择层。 步骤2：单击层左上角标记，即可移动层。或者使用键盘方向键来控制层的精确移动，如图9.28所示 提示： 1. 当移动“父层”的位置时，“子层”将保持和“父层”的相对位置一起移动。 2. 移动“子层”时，父层不动。,图9.28 移动层,9.3.5 设置层的属性 在前面的操作中，我们给9.html中的层添加了内容。下面我们将详细地设置这些层的属性。层的属性有两种情况，一种是设置单个层的属性，一种是同时设置多个层的属性。 1. 设置单个层的属性 步骤1：在层面板中选择“Layer6”层。选择“窗口”菜单的“属性”命令，打开该层的属性面板，如图9.29所示。 步骤2：在属性面板中进行属性调整，各个选项如未指定就采用默认值，具体设置如图9.30所示。,图9.29 单个层的属性面板,图9.30 “Layer6”层的属性面板设置,“层编号”：此处只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符，每个层都必须有它自己的唯一编号。在该文本框中输入当前“层”的名称为“tongxl”。 “左”和“上”（左侧和顶部）：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置，默认单位为像素（px）。 “宽”和“高”：指定层的宽度和高度。默认单位为像素（px）。分别设置为“145px”，“55px”。 “Z” 轴：确定层的“Z”轴（即堆叠顺序）。值可正可负，当层重叠时，Z轴数值大的显示在数值小的层上面。此处设置为“2” “可见性”：指定该层最初是否是可见。有4个选项可以选择：“default（默认）”不指定可见性属性；当未指定可见性时，大多数浏览器都会默认为“inherit（继承）”。“inherit（继承）”使用该层父级的可见性属性。“visible（可见）”显示该层的内容，而不管父级的值是什么。“hidden（隐藏）”隐藏层的内容，而不管父级的值是什么。 “背景图像”：指定层的背景图像。单击其文件夹图标可浏览到一个图像文件并将其选定即可。 “背景颜色”：指定层的背景颜色。单击该选项右侧的颜色按钮，在弹出的“颜色表