项目10 使用层布局页面.pptVIP

* * 项目十 使用层布局页面 情 境 设 置 前面我们学习过了利用表格布局页面，本项目中将用另一种布局技术层来布局设计一个页面。层是Dreamweaver提供的一种重要元素，也是Dreamweaver的一大特点。如何来理解层呢？我们可以把网页看作一块画布，在画布上可以直接写文本，画图片，我们也可以把这些内容先写在或画在纸上，然后再把纸贴在画布上，此时这张纸就相当于一个层，我们还可以继续在这张纸上再贴上其他的纸，也就是层上可以再有层。我们可以把纸贴在画布的任何地方，同样层也可以放在网页的任何位置。 项 目 展 示 本项目完成后的大体效果如下 项 目 目 标 能正确插入层 能对层进行编辑 能在层中插入个中网页元素 理解层的概念 知道层在布局中的特点 能够实现层和表格的互相转换 项 目 分 析 具体工作任务： 1.制作一个网页，主题为“幼儿天地” 2.插入层，利用层的属性面板设置层的属性 4.在层中插入表格和文字 5.在层中嵌套另一个层 3.在层中插入图片 6.实现层的重叠放置 实 施 步 骤 步骤一：新建一个站点，并在站点根文件夹中建立一个images子文件夹和index.html空白网页。 步骤二：改变插入工具组为布局 在页面上插入六个层，并根据样张图示，调整层的位置和大小，并在不同的层中插入相应的网页元素。 步骤三：保存文件，预览最终效果 知 识 链 接 一、层的概念 Dreamweaver提供了层来帮助我们实现页面的布局，这是Dreamweaver的一大特点，很多其他网页编辑软件都没有此项技术。层是一种可以精确定位的元素，我们在项目中可以看到，层可以被放置在页面上的任何位置，甚至于放在其他层上，形成层的重叠放置。层中可以插入任何内容，比如文本，表格，图片，甚至于可以插入子层形成嵌套。因此当用表格不好定位和布局元素时，可以考虑用层来试试 。 知 识 链 接 二、层的属性 用表格布局的网页， 若想把其改为用层来布局，以充分发挥层的特点，只需执行一个命令，方法是点击菜单栏中的【修改】→【转换】→【表格到层】命令，转换后，相应的单元格就变成了层。有时也会把用层来布局后的页面转换成表格式布局。方法是点击菜单栏中的【修改】→【转换】→【层到表格】命令。但转换前需要注意，要转换成表格的层不能重叠，不能嵌套，象本项目就无法实现转换。 三、层和表格的互相转换 利用层的属性可以对层作调整和控制，如层的位置，大小，层是否可以重叠放置等等。 知 识 拓 展 项目展示 知 识 拓 展 制作要点提示 建立页面文件为“index.html” 插入六个层 利用层的属性面板调整其位置和大小 在层中插入图片，表格和文字 小 结 本项目介绍了如何利用层来布局页面。通过本章的学习，大家应该掌握层的概念和特点，如何在页面中插入层，如何调整层的属性，如何嵌套层。要能知道层和表格在布局上的优缺点，能够在层和表格间互相转换。进而能合理使用层和表格来设计页面 。