网页设计与制作案例教程-电子教案第11单元.ppt
《网页设计与制作案例教程-电子教案第11单元.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作案例教程-电子教案第11单元.ppt(41页珍藏版)》请在三一办公上搜索。
1、7.3使用层布局网页,层是制作网页时经常用到的对象,在控制页面布局方面,层要比表格更加的灵活,例如需要在文字上插入一幅图像时,可以用层来实现。层体现了网页技术从二维空间向三维空间的一种延伸,也是一种新的发展方向。Dreamweaver 8中,层和表格可以互相转换。,课程引导,(1)掌握如何描绘层和插入层、如何选择层和激活层。(2)掌握层的属性设置方法、如何调整层的大小和位置。(3)掌握在层中输入文本和插入图像的方法。(4)掌握嵌套层的创建。(5)了解层与表格之间的相互转换方法。,知识技能目标,网页浏览效果展示,利用层布局的网页06.html浏览效果如图所示。,图7-34 利用层布局的网页浏览效
2、果,本章操作任务,(1)在“长沙世界之窗”站点下创建文件夹“06层的布局”,在“06层的布局”文件夹中创建一个新的网页,该网页命名为“06.html”。(2)在网页06.html中绘制多个层,在层中输入文本、插入图像。(3)根据需要调整层的大小和位置,对层的属性进行设置。,7.3.1认识层,Dreamweaver 8中的层(Layer)是一种页面元素,用于控制页面中对象的精确位置,可以将它放置于页面上的任意位置。层可以包含文本、图像、表单、插件或者其他任何可在HTML文档正文放入的内容。,1层的概念,层作为网页中的一个区域,可以显示、隐藏、重叠和嵌套。也可以使用行为来控制层的显示与隐藏,还可以
3、使用时间轴移动层或改变层的内容,层为网页制作提供了更多的选择和更快捷的途径。,(1)定位精确(2)插入灵活(3)加速浏览(4)可以叠加,2应用层布局网页的特点,在“长沙世界之窗”站点下创建文件夹“06层的布局”,在“06层的布局”文件夹中创建一个新的网页,该网页命名为“06.html”。具体操作过程如下:,7.3.2层的操作,(1)在“长沙世界之窗”站点下创建文件夹“06层的布局”,在“06层的布局”文件夹中创建子文件夹“image”,并将所需图像复制到该文件夹下。(2)在“06层的布局”文件夹中创建一个新的网页,该网页命名为“06.html”。,1新建网页,(3)设置网页标题,在文档工具栏的
4、“标题”文本框直接输入文档标题“长沙世界之窗内广场”即可。(4)保存该网页。,创建第一个层,层编号为“Layer1”;创建第二个层,层编号为“Layer2”。创建一个新层通常有以下两种方法:,2创建层,在“插入”工具栏上,单击按钮,在下拉菜单中单击菜单项【布局】,切换到“布局”插入工具栏,在标准模式下,【描绘层】按钮有效。单击“布局”插入工具栏上的【描绘层】按钮,当鼠标光标在编辑窗口中变成“+”字形状时,按住鼠标左键并拖动,绘制一个大小合适的区域。释放鼠标即可完成一个新层的绘制。,(1)描绘层,将鼠标光标置于需要插入层的位置。Dreamweaver 8主窗口中,单击菜单【插入】【布局对象】【层
5、】。在文档窗口中会自动插入一个预定大小的层。,(2)插入层,设置层的属性,对层进行操作时,应先应选择层,选择层可以对层进行对齐、定位、移动、调节大小等操作;向层中插入对象时,应先激活。激活层不等于选定层,两者有区别。,3选择层与激活层,Dreamweaver 8中可以选择一个或多个层来进行操作或更改它们的属性。选择一个层 将鼠标指针指向层边框,边框线变成红色,鼠标指针变成形状,单击边框线,层的边框将出现8个蓝色实心正方形,表示该层已被选中。,(1)选择层,选择多个层 按住“Shift”键,然后依次选中所需选择的多个层,当选中多个层时,最后选定的层的控制柄将以蓝色实心突出显示,其他层的控制柄以蓝
6、色空心显示。,(2)激活层 单击层中任意位置可以激活层,此时层的左上角将显示一个正方形的选择柄。激活一个层后,便可以向其中插入对象。,接下来设置层的属性,对层的设置要求如下:(1)层“Layer1”的“宽”设置为“550px”,“高”设置为“450px”。(2)层“Layer1”的“左”设置为“80px”,“上”设置为“9px”。,4设置层的属性,(3)层“Layer1”的“背景图像”设置为“image/bj06.jpg”。(4)层“Layer1”的可见性设置为“default”。(5)层“Layer2”的“宽”设置为“205px”,“高”设置为“450px”。,(6)层“Layer2”的“左



- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 案例 教程 电子 教案 11 单元

链接地址:https://www.31ppt.com/p-6600205.html