网页设计与制作案例教程电子教案第11单元.pptx

; （1）掌握如何描绘层和插入层、如何选择层和激活层。 （2）掌握层的属性设置方法、如何调整层的大小和位置。 （3）掌握在层中输入文本和插入图像的方法。 （4）掌握嵌套层的创建。 （5）了解层与表格之间的相互转换方法。;网页浏览效果展示 ; 本章操作任务 ;7.3.1　认识层; 层作为网页中的一个区域，可以显示、隐藏、重叠和嵌套。也可以使用行为来控制层的显示与隐藏，还可以使用时间轴移动层或改变层的内容，层为网页制作提供了更多的选择和更快捷的途径。;（1）定位精确 （2）插入灵活 （3）加速浏览 （4）可以叠加; 在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。具体操作过程如下： ; （1）在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。 （2）在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。 ; （3）设置网页标题，在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗内广场”即可。 （4）保存该网页。; 创建第一个层，层编号为“Layer1”；创建第二个层，层编号为“Layer2”。 创建一个新层通常有以下两种方法：; 在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏，在标准模式下，【描绘层】按钮有效。 单击“布局”插入工具栏上的【描绘层】按钮，当鼠标光标在编辑窗口中变成“+”字形状时，按住鼠标左键并拖动，绘制一个大小合适的区域。释放鼠标即可完成一个新层的绘制。 ; 将鼠标光标置于需要插入层的位置。 Dreamweaver 8主窗口中，单击菜单【插入】→【布局对象】→【层】。 在文档窗口中会自动插入一个预定大小的层。; 设置层的属性，对层进行操作时，应先应选择层，选择层可以对层进行对齐、定位、移动、调节大小等操作；向层中插入对象时，应先激活。激活层不等于选定层，两者有区别。; Dreamweaver 8中可以选择一个或多个层来进行操作或更改它们的属性。 选择一个层 将鼠标指针指向层边框，边框线变成红色，鼠标指针变成形状，单击边框线，层的边框将出现8个蓝色实心正方形，表示该层已被选中。; 选择多个层 按住“Shift”键，然后依次选中所需选择的多个层，当选中多个层时，最后选定的层的控制柄将以蓝色实心突出显示，其他层的控制柄以蓝色空心显示。;（2）激活层 单击层中任意位置可以激活层，此时层的左上角将显示一个正方形的选择柄。激活一个层后，便可以向其中插入对象。 ; 接下来设置层的属性，对层的设置要求如下： （1）层“Layer1”的“宽”设置为“550px”，“高”设置为“450px”。 （2）层“Layer1”的“左”设置为“80px”，“上”设置为“9px”。; （3）层“Layer1”的“背景图像”设置为“image/bj06.jpg”。 （4）层“Layer1”的可见性设置为“default”。 （5）层“Layer2”的“宽”设置为“205px”，“高”设置为“450px”。; （6）层“Layer2”的“左”设置为“620px”，“上”设置为“9px”。 （7）层“Layer2”的可见性设置为“default”，背景颜色设置“#FFFFFF”。; 具体设置过程如下： （1）通过“属性”面板设置层的属性 （2）通过“层”面板管理层 在Dreamweaver 8主窗口中，单击菜单【窗口】→【层】，可以打开 “层”面板。通过“层”面板可以管理文档中层、选择多个层、控制层的叠放顺序、更改层的可见性。; （1）调整层的大小 在Dreamweaver 8中，调整层的大小的方法有多种。 方法之一：选定需要调整大小的层，将鼠标指针移动到控制柄上，拖动该层的边框即可在相应的方向上改变层的大小。水平方向的双向箭头可以改变层的宽度，垂直方向的双向箭头可以改变层的高度，斜向的双向箭头可以同时改变层的宽度和高度。 ; 方法之二：选定单个层，按住“Ctrl”健的同时使用键盘上的方向键来调整层的大小。注意：此方法只能移动层的右边框和下边框。; 方法之三：选定单个层，按住“Ctrl+Shift”组合键的同时使用键盘上的方向键来调整层的大小，每按一次方向键可在相应的方向上调整一个网格单元的大小。; 方法之四：选定单个层，在层“属性”面板上“宽”和“高”文本框直接输入数值，可精确设置层的大小。;（2）移动层 层可以在页面上任意移动