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

7.3使用层布局网页,层是制作网页时经常用到的对象，在控制页面布局方面，层要比表格更加的灵活，例如需要在文字上插入一幅图像时，可以用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸，也是一种新的发展方向。Dreamweaver 8中，层和表格可以互相转换。,课程引导,（1）掌握如何描绘层和插入层、如何选择层和激活层。（2）掌握层的属性设置方法、如何调整层的大小和位置。（3）掌握在层中输入文本和插入图像的方法。（4）掌握嵌套层的创建。（5）了解层与表格之间的相互转换方法。,知识技能目标,网页浏览效果展示,利用层布局的网页06.html浏览效果如图所示。,图7-34 利用层布局的网页浏览效果,本章操作任务,（1）在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。（2）在网页06.html中绘制多个层，在层中输入文本、插入图像。（3）根据需要调整层的大小和位置，对层的属性进行设置。,7.3.1认识层,Dreamweaver 8中的层（Layer）是一种页面元素，用于控制页面中对象的精确位置，可以将它放置于页面上的任意位置。层可以包含文本、图像、表单、插件或者其他任何可在HTML文档正文放入的内容。,1层的概念,层作为网页中的一个区域，可以显示、隐藏、重叠和嵌套。也可以使用行为来控制层的显示与隐藏，还可以使用时间轴移动层或改变层的内容，层为网页制作提供了更多的选择和更快捷的途径。,（1）定位精确（2）插入灵活（3）加速浏览（4）可以叠加,2应用层布局网页的特点,在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。具体操作过程如下：,7.3.2层的操作,（1）在“长沙世界之窗”站点下创建文件夹“06层的布局”，在“06层的布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。（2）在“06层的布局”文件夹中创建一个新的网页，该网页命名为“06.html”。,1新建网页,（3）设置网页标题，在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗内广场”即可。（4）保存该网页。,创建第一个层，层编号为“Layer1”；创建第二个层，层编号为“Layer2”。创建一个新层通常有以下两种方法：,2创建层,在“插入”工具栏上，单击按钮，在下拉菜单中单击菜单项【布局】，切换到“布局”插入工具栏，在标准模式下，【描绘层】按钮有效。单击“布局”插入工具栏上的【描绘层】按钮，当鼠标光标在编辑窗口中变成“+”字形状时，按住鼠标左键并拖动，绘制一个大小合适的区域。释放鼠标即可完成一个新层的绘制。,（1）描绘层,将鼠标光标置于需要插入层的位置。Dreamweaver 8主窗口中，单击菜单【插入】【布局对象】【层】。在文档窗口中会自动插入一个预定大小的层。,（2）插入层,设置层的属性，对层进行操作时，应先应选择层，选择层可以对层进行对齐、定位、移动、调节大小等操作；向层中插入对象时，应先激活。激活层不等于选定层，两者有区别。,3选择层与激活层,Dreamweaver 8中可以选择一个或多个层来进行操作或更改它们的属性。选择一个层 将鼠标指针指向层边框，边框线变成红色，鼠标指针变成形状，单击边框线，层的边框将出现8个蓝色实心正方形，表示该层已被选中。,（1）选择层,选择多个层 按住“Shift”键，然后依次选中所需选择的多个层，当选中多个层时，最后选定的层的控制柄将以蓝色实心突出显示，其他层的控制柄以蓝色空心显示。,（2）激活层 单击层中任意位置可以激活层，此时层的左上角将显示一个正方形的选择柄。激活一个层后，便可以向其中插入对象。,接下来设置层的属性，对层的设置要求如下：（1）层“Layer1”的“宽”设置为“550px”，“高”设置为“450px”。（2）层“Layer1”的“左”设置为“80px”，“上”设置为“9px”。,4设置层的属性,（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中，调整层的大小的方法有多种。方法之一：选定需要调整大小的层，将鼠标指针移动到控制柄上，拖动该层的边框即可在相应的方向上改变层的大小。水平方向的双向箭头可以改变层的宽度，垂直方向的双向箭头可以改变层的高度，斜向的双向箭头可以同时改变层的宽度和高度。,5调整层的大小和位置,方法之二：选定单个层，按住“Ctrl”健的同时使用键盘上的方向键来调整层的大小。注意：此方法只能移动层的右边框和下边框。,方法之三：选定单个层，按住“Ctrl+Shift”组合键的同时使用键盘上的方向键来调整层的大小，每按一次方向键可在相应的方向上调整一个网格单元的大小。,方法之四：选定单个层，在层“属性”面板上“宽”和“高”文本框直接输入数值，可精确设置层的大小。,（2）移动层 层可以在页面上任意移动，移动层的方法有多种。方法之一：选定单个或多个层，单击选中层左上角的选择柄，按住鼠标左键并拖动鼠标，当移动到合适位置时释放鼠标即可。,方法之二：将鼠标指针移动到层的边框位置，当鼠标指针形状变为四向箭头时，按住鼠标左键并拖动，也可以移动层。,方法之三：选定单个或多个层，使用键盘上的方向键也能移动图层，每按下一次则移动一像素的距离。,方法之四：在层“属性”面板中，通过设置“左”和“上”的坐标值能精确定位层的位置。如果需要将页面中的某个对象贴合在窗口的左边框或上边框，只需要将该对象放置在层中，然后在层的“属性”面板中设置“左”或“上”为0即可。,（3）多个层的对齐 按住“Shift”键选定需要对齐的多个层，在Dreamweaver 8主窗口，单击【修改】【排列顺序】，在弹出的级联菜单中选择一个对齐命令。,在“Layer1”层中插入嵌套层“Layer3”，嵌套层“Layer3”的属性设置要求如下：（1）层“Layer3”的“宽”设置为“420px”，“高”设置为“340px”。（2）层“Layer3”的“左”设置为“60px”，“上”设置为“100px”。（3）层“Layer3”的可见性设置为“default”。,6层的嵌套,插入嵌套层且设置其属性的操作过程如下：（1）选择层“Layer1”。（2）在Dreamweaver 8主窗口中，单击菜单【插入】【布局对象】【层】。（3）在层“Layer1”中会自动插入一个的层，该层命名为“Layer3”。（4）选择层“Layer3”，利用层的“属性”面板设置层Layer3的属性。,创建嵌套层的方法：方法之一：先创建父层，然后将光标置于父层中，在Dreamweaver 8主窗口中，单击菜单【插入】【布局对象】【层】，即可创建嵌套层。,方法之二：利用“层”面板创建嵌套层，在“层”面板选中作为子层的层，按住“Ctrl”键，将选中的子层拖动到要作为父层的层上，释放鼠标即可创建嵌套层。,先用鼠标指针在层内的任何地方单击，激活层，此时光标位于层内，然后在激活的层中输入文本或插入图像即可。,7在层中输入文本和插入对象,课堂实践,（1）打开“课堂实践”网站文件夹“06层的布局”中的网页文档“06.html”。（2）利用层布局网页06.html的页面。,1操作要求,（3）绘制一个较大的层Layer0，然后在层Layer0中再绘制5个子层Layer1、Layer2、Layer3、Layer4。（4）分别层Layer1、Layer2、Layer3、Layer4中输入文字或插入图像。,课堂实践网页06.html的浏览效果如图所示。,2效果展示,图7-46应用层布局的课堂实践网页的浏览效果,（1）如果要移动层，必须选择层；如果需要在层中插入图像或输入文字，则必须激活该层，层选择状态和激活状态外观上有一定的区别。（2）层既可设置背景图像，也可以在层中插入图像。,3制作要点提示,课外拓展实践,1在“湖铁职院学院网站”站点文件夹“06层的布局”中创建网页文档“06.html”。2利用“普通表格”和“层”相结合的方式布局网页。,本章小结,运用层技术来对网页进行排版，可以很方便地制作出精美的网页。,