您好,欢迎访问三七文档
当前位置:首页 > 电子/通信 > 综合/其它 > 网页设计与制作案例教程-电子教案第11单元
7.3使用层布局网页层是制作网页时经常用到的对象,在控制页面布局方面,层要比表格更加的灵活,例如需要在文字上插入一幅图像时,可以用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸,也是一种新的发展方向。Dreamweaver8中,层和表格可以互相转换。课程引导(1)掌握如何描绘层和插入层、如何选择层和激活层。(2)掌握层的属性设置方法、如何调整层的大小和位置。(3)掌握在层中输入文本和插入图像的方法。(4)掌握嵌套层的创建。(5)了解层与表格之间的相互转换方法。知识技能目标网页浏览效果展示利用层布局的网页06.html浏览效果如图所示。图7-34利用层布局的网页浏览效果本章操作任务(1)在“长沙世界之窗”站点下创建文件夹“06层的布局”,在“06层的布局”文件夹中创建一个新的网页,该网页命名为“06.html”。(2)在网页06.html中绘制多个层,在层中输入文本、插入图像。(3)根据需要调整层的大小和位置,对层的属性进行设置。7.3.1认识层Dreamweaver8中的层(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)描绘层将鼠标光标置于需要插入层的位置。Dreamweaver8主窗口中,单击菜单【插入】→【布局对象】→【层】。在文档窗口中会自动插入一个预定大小的层。(2)插入层设置层的属性,对层进行操作时,应先应选择层,选择层可以对层进行对齐、定位、移动、调节大小等操作;向层中插入对象时,应先激活。激活层不等于选定层,两者有区别。3.选择层与激活层Dreamweaver8中可以选择一个或多个层来进行操作或更改它们的属性。选择一个层将鼠标指针指向层边框,边框线变成红色,鼠标指针变成形状,单击边框线,层的边框将出现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)通过“层”面板管理层在Dreamweaver8主窗口中,单击菜单【窗口】→【层】,可以打开“层”面板。通过“层”面板可以管理文档中层、选择多个层、控制层的叠放顺序、更改层的可见性。(1)调整层的大小在Dreamweaver8中,调整层的大小的方法有多种。方法之一:选定需要调整大小的层,将鼠标指针移动到控制柄上,拖动该层的边框即可在相应的方向上改变层的大小。水平方向的双向箭头可以改变层的宽度,垂直方向的双向箭头可以改变层的高度,斜向的双向箭头可以同时改变层的宽度和高度。5.调整层的大小和位置方法之二:选定单个层,按住“Ctrl”健的同时使用键盘上的方向键来调整层的大小。注意:此方法只能移动层的右边框和下边框。方法之三:选定单个层,按住“Ctrl+Shift”组合键的同时使用键盘上的方向键来调整层的大小,每按一次方向键可在相应的方向上调整一个网格单元的大小。方法之四:选定单个层,在层“属性”面板上“宽”和“高”文本框直接输入数值,可精确设置层的大小。(2)移动层层可以在页面上任意移动,移动层的方法有多种。方法之一:选定单个或多个层,单击选中层左上角的选择柄,按住鼠标左键并拖动鼠标,当移动到合适位置时释放鼠标即可。方法之二:将鼠标指针移动到层的边框位置,当鼠标指针形状变为四向箭头时,按住鼠标左键并拖动,也可以移动层。方法之三:选定单个或多个层,使用键盘上的方向键也能移动图层,每按下一次则移动一像素的距离。方法之四:在层“属性”面板中,通过设置“左”和“上”的坐标值能精确定位层的位置。如果需要将页面中的某个对象贴合在窗口的左边框或上边框,只需要将该对象放置在层中,然后在层的“属性”面板中设置“左”或“上”为0即可。(3)多个层的对齐按住“Shift”键选定需要对齐的多个层,在Dreamweaver8主窗口,单击【修改】→【排列顺序】,在弹出的级联菜单中选择一个对齐命令。在“Layer1”层中插入嵌套层“Layer3”,嵌套层“Layer3”的属性设置要求如下:(1)层“Layer3”的“宽”设置为“420px”,“高”设置为“340px”。(2)层“Layer3”的“左”设置为“60px”,“上”设置为“100px”。(3)层“Layer3”的可见性设置为“default”。6.层的嵌套插入嵌套层且设置其属性的操作过程如下:(1)选择层“Layer1”。(2)在Dreamweaver8主窗口中,单击菜单【插入】→【布局对象】→【层】。(3)在层“Layer1”中会自动插入一个的层,该层命名为“Layer3”。(4)选择层“Layer3”,利用层的“属性”面板设置层Layer3的属性。创建嵌套层的方法:方法之一:先创建父层,然后将光标置于父层中,在Dreamweaver8主窗口中,单击菜单【插入】→【布局对象】→【层】,即可创建嵌套层。方法之二:利用“层”面板创建嵌套层,在“层”面板选中作为子层的层,按住“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.利用“普通表格”和“层”相结合的方式布局网页。★本章小结★运用层技术来对网页进行排版,可以很方便地制作出精美的网页。
本文标题:网页设计与制作案例教程-电子教案第11单元
链接地址:https://www.777doc.com/doc-78890 .html