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

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 如果要移动层 必须选择层 如果需要在层中插