网页制作：项目09使用Div布局搜索引擎页-ppt.ppt

主讲 网页设计与制作 Dreamweaver8 项目九使用Div布局搜索引擎页 任务一制作页眉 TopLayer 任务二制作主体 MainLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 任务三制作页脚 FootLayer 小结 任务三 实训 本任务主要介绍使用层布局索引擎页页眉的基本方法 通过本任务的学习 应该掌握的内容主要有 1 层的功能 层主要有以下几方面的功能 由于层是绝对定位的 可以游离在文档之上 可以利用层来浮动定位网页元素 它可以包含文本 图像甚至其他层 层的z轴属性可以使多个层发生堆叠 也就是多重叠加的效果 层在时间轴的作用下 可以按照时间有序地发生位移和变换 从而实现动画的效果 任务一制作页眉 TopLayer 项目九 使用Div布局搜索引擎页 制作页眉 TopLayer 操作动画 任务一 任务二 小结 任务三 实训 2 通过 首选参数 对话框设置 层 默认属性的方法 选择主菜单中的 编辑 首选参数 命令 打开 首选参数 对话框 在其中的 分类 列表框中选择 层 选项 根据需要对其中的参数进行设置 如果勾选 如果在层中则使用嵌套 复选框则指定从现有层边界内绘制的层是嵌套层 按住Alt键可在取消与选择该复选框之间转换 任务一制作页眉 TopLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 3 插入层的方法 1 将光标置于文档窗口顶部 然后选择主菜单中的 插入 布局对象 层 命令来创建一个层 2 将 插入 布局 面板上的 绘制层 按钮拖曳到文档窗口 松开鼠标后就在文档窗口中插入了一个层 3 在 插入 布局 面板中单击 绘制层 按钮 在文档窗口中按住鼠标左键并拖曳 也可绘出一个自定义大小的层 另外 在 插入 布局 面板中单击 绘制层 按钮 然后按住Ctrl键不放 按住鼠标左键并拖曳可在文档窗口中连续绘制多个层 任务一制作页眉 TopLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 4 认识 层 面板 选择主菜单中的 窗口 层 命令或者直接按F2键打开 层 面板 在 层 面板中可以实现以下操作 双击层的名称 可以对层进行重命名 单击层后面的数字可以修改层的z轴顺序 数字大的将位于上层 勾选 防止重叠 复选框可以禁止层重叠 在层的名称前面有一个眼睛图标 单击眼睛图标可显示或隐藏层 单击层的名称可以选定该层 按住Shift键不放 单击想选择的层可以将多个层选中 任务一制作页眉 TopLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务一制作页眉 TopLayer 5 选定层的方法 在 层 面板中单击层的名称来选定该层 单击文档中的图标来选定层 如果没有显示该图标 可以在 首选参数 对话框的 不可见元素 分类中勾选 层锚记 复选框 将光标置于层内 然后在文档窗口底边标签条中选择 标签 单击层的边框线 如果要选定两个以上的层 只要按住Shift键 然后逐个单击层手柄或在 层 面板中逐个单击层的名称即可 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 6 设置层属性的方法 选定层后在层的 属性 面板中设置层的大小和位置等参数 任务一制作页眉 TopLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务一制作页眉 TopLayer 7 层的嵌套 层也可以进行嵌套 在某个层内部创建的层称为嵌套层或子层 嵌套层外部的层称为父层 子层的大小和位置不受父层的限制 子层可以比父层大 位置也可以在父层之外 只是在移动父层时 子层会随着一起移动 同时父层的显示属性会影响子层的显示属性 8 移动层的方法 层最大的优点就是具有很强的灵活性 可以随意移动到页面中的任何位置 移动层的方法通常有 1 使用鼠标进行拖曳 2 先选中层然后按键盘上的方向键进行移动 每按1次方向键移动1个像素 如果按住Shift键1次移动10个像素 3 在 属性 面板的 左 和 上 文本框中输入数值进行精确定位 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务一制作页眉 TopLayer 9 调整层大小的方法 1 使用鼠标直接拖曳调整层的大小 2 在 属性 面板的 宽 和 高 文本框中输入数值 另外 还可以将所有选择的层的宽度和高度变为最后选择的层的宽度和高度 当选择多个层时 最后选择的层四周的控制点将以实心显示 其他的层四周的控制点将以空心显示 10 层的对齐方法 首先选择需要对齐的层 然后在主菜单的 修改 排列顺序 中选择 左对齐 右对齐 对齐上缘 或 对齐下缘 命令 即可将所有选择的层以最后选择的层为标准进行对齐操作 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 本任务主要介绍使用层和Div标签布局搜索引擎页主体内容的基本方法 通过本任务的学习 应该掌握的内容主要有 1 插入Div标签的方法 在主菜单中选择 插入 布局对象 Div标签 命令或在 插入 布局 面板中单击 插入Div标签 按钮打开 插入Div标签 对话框 在 插入 选项中选择插入位置 如 在插入点 在 ID 选项中输入名称 如 NavDiv 单击 新建CSS样式 按钮可以同时创建Div标签的CSS样式 也可以单击 确定 按钮直接插入Div标签 以后再创建CSS样式 任务二制作主体 MainLayer 项目九 使用Div布局搜索引擎页 制作主体 MainLayer 操作动画 任务一 任务二 小结 任务三 实训 2 在Div标签之后继续插入Div标签的方法 在 插入 布局 面板中单击 插入Div标签 按钮 打开 插入Div标签 对话框 在 插入 选项中选择 在标签之后 并选择对应的标签名称 如 在 ID 选项中输入ID名称 如 InputDiv 这样在上一个Div标签之后创建了一个新Div标签 任务二制作主体 MainLayer 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务二制作主体 MainLayer 3 层与Div标签的区别与相互转换 在 插入 布局 面板中有两个按钮 一个是 插入Div标签 按钮 另一个是 绘制层 按钮 在源代码中 它们使用的是同一个标签 在绘制层时 层同时被赋予了CSS样式 而插入Div标签时 需要再单独创建CSS样式对它进行控制 实际上 层与Div标签是同一个网页元素不同的表现形态 通过CSS样式可使两者间相互转换 如在 CSS规则定义 对话框的 定位 分类中 将 类型 选项设置为 绝对 即表示层 否则即为Div标签 这是层与Div标签转换的关键因素 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务二制作主体 MainLayer 4 Div标签居中显示的方法 使用Div标签布局网页 它的对齐方式只有 左对齐 和 右对齐 如果要使Div标签居中显示 可以将它的边界 特别是左边界和右边界设置为 自动 即可 Div标签 属性 面板比较简单 只有 DivID 和 类 两个下拉菜单项和一个 编辑CSS 按钮 使用Div标签布局网页必须和CSS相结合 它的大小 背景等内容需要通过CSS来控制 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务三制作页脚 FootLayer 本任务主要介绍使用层布局搜索引擎页页脚的基本方法 通过本任务的学习 应该掌握的内容主要有 1 层的重叠 层与表格相比 最大的优势在于层可以重叠 而表格只能嵌套 层的重叠是有次序的 这个次序通常用z轴顺序来表示 其值可正可负 也可以是 0 数值最大的在最顶层 层的重叠为制作一些特殊效果提供了非常方便的途径 2 改变层的z轴顺序的方法 改变层的z轴顺序方法很简单 可以在 属性 面板中设置z轴值 也可以在 层 面板中直接修改z轴值 还可以用鼠标指向需要改变序号的层 并按下鼠标左键向上或向下进行拖曳 当拖曳到希望插入的两层之间时会出现一条横线 释放鼠标左键 各个层的z轴顺序会做相应的改变 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 任务三制作页脚 FootLayer 3 层的嵌套 层的嵌套和重叠是不一样的 嵌套的子层与父层是有一定关系的 而重叠的层除视觉上会有一些联系外 其他根本没有什么关系 创建嵌套层的方法 首先必须有一个父层 然后将光标置于层当中 再插入一个层就是嵌套层 也可以按住Ctrl键 在 层 面板中将某一层拖曳到另一层上面 形成嵌套层 在 层 面板中可以看到 嵌套层是呈树状结构表示的 而且子层与父层的z轴顺序是一样的 层嵌套时并不意味着子层必须在父层里面 它不受父层的限制 当子层发生位移时 父层并不发生任何变化 但是当父层发生位移时 子层却会随着父层也发生位移 并且位移量都一样 也就是说两者的相对位置不发生变化 项目九 使用Div布局搜索引擎页 任务一 任务二 小结 任务三 实训 实训使用层和Div标签布局网页 本项目着重介绍了使用层和Div标签布局网页的基本方法 实训将使用层和Div标签对如图9 31所示网页进行布局 以进一步巩固层和Div标签的基本操作 项目九 使用Div布局搜索引擎页 实训结果文件见 项目结果 文件夹中的 shixun htm 实训目的 进一步巩固创建层的方法 进一步巩固设置层属性的方法 进一步巩固插入Div标签及创建CSS样式的方法 进一步巩固使用层和Div标签布局页面的方法 任务一 任务二