008网页布局
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• “三”型布局
“三”型布 局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• 对称对比布局
POP布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• POP布局
实训教程》讲义
三、用表格布局网页：
1. 布局模式
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
2. 绘制布局单元格和布局表格
• 绘制布局单元格 在布局模式中单击【插入】工具栏【布局】类别中的 【绘制布局单元格】按钮，然后将十字形指针移至工作 区的空白处或布局表格内，按住鼠标左键拖动，即可绘 制出一个布局单元格。按住Ctrl键可不必重复单击【绘 制布局单元格】按钮而连续绘制出多个布局单元格。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 插入预置框架样式 单击【插入】工具栏【布 局】类别中的【框架】按 钮，在弹出的下拉菜单中 选择所需的框架类型，即 可在页面上插入相应的框 架，并弹出【框架标签辅 助功能属性】对话框，可 为框架指定框架名称。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
2. 编辑层
• 设置层属性——使用层的属性检查器eaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
1. 框架与框架集
框架不是文件，它是浏览器窗口中的一个区域，是存放文 档的容器，可以显示与浏览器窗口的其余部分中所显示内 容无关的HTML文档。 框架集是HTML文件，它定义一组框架的布局和属性，包括 框架的数目、框架的大小和位置以及在每个框架中初始显 示的页面的URL。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 设置层参数 选择【编辑】|【首选参数】命令，弹出【首选参数】 对话框，在【分别】列表框中选择【层】选项，即可更 改层参数。
层参数
Dreamweaver 应用技术——《 Dreamweaver 8
四、用层布局网页：
2. 编辑层
• 更改层的名称 在【层】面板的【名称】栏中双击层的名称，该文本即 进入编辑状态，输入新的名称替换原来的文本。也可以 选择该层，然后在属性检查器左侧的【层编号】文本框 中输入层的名称。 • 层的显示与隐藏 如果一个层被隐藏，单击此图层名称前的睁着眼睛的图 标，此层即被显示，同时睁眼图标也会变为闭眼图标。
5. 更改布局表格和布局单元格的属性
• 设置布局单元格的属性——使用布局单元格的属性检 查器。
布局单元格的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 平铺式层——绘制层时须在【层】面板中选中【防止 重叠】复选框。 • 重叠式层——绘制层时须确保清除对【防止重叠】复 选框，然后移动层与其他层重叠。
水平线的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
3. 更改水平线的颜色
• 使用属性面板中的【快速标签编辑器】按钮。 • 使用【标签编辑器－hr】对话框中的【浏览器特定的】 选项。
Dreamweaver 应用技术——《 Dreamweaver 8
• 设置框架集的属性 单击框架的边框，选择框架集，然后在属性检查器中设 置此框架集的属性。
框架集的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
5. 保存框架和框架集文件
• 保存框架集文件——选择框架集，然后选择【文件】 |【保存框架页】命令。 • 保存框架中显示的文档——在框架中单击，然后选择 【文件】|【保存框架】命令。 • 保存所有文件——选择【文件】|【保存全部】命令。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
6. 解决浏览器无法显示框架的问题
在Dreamweaver中允许指定在不支持框架的浏览器中编辑内 容。选择【修改】|【框架页】|【编辑无框架内容】命令， 然后在文档窗口中像处理普通文档一样输入或插入提示内 容。
POP布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
2.布局原则
• 正常平衡 • 异常平衡 • 对比
• 凝视
• 空白 • 图像解说
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
1. 添加水平线
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
2. 绘制布局单元格和布局表格
• 绘制布局表格 在布局模式下单击【插入】工具栏【布局】类别中的 【布局表格】按钮 ，然后将十字形指针移至工作区， 按住鼠标左键拖动，即可绘制出一个布局表格。按住 Ctrl键可连续绘制出多个布局表格。
【框架】下拉菜单
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 自定义框架样式 先选择【查看】|【可视 化助理】|【框架边框】 命令，在页面中显示出框 架的边框，然后将光标放 置在框架的的边框线上， 当指针变为双指的箭头时， 按住鼠标左键拖动边框到 欲建框架的位置。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
3. 将内容添加到布局单元格
• 返回到标准视图下，即添加内容。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
4. 使用间隔图像
• 切换到布局视图，单击每栏底部的下拉按钮，从弹出 菜单中选择【添加间隔图像】命令。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
5. 更改布局表格和布局单元格的属性
• 设置布局表格的属性——使用布局表格的属性检查器。
布局表格的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 嵌入式层 （1）在已存在的层中单击，选择【插入】|【布局对象】 |【层】命令。
（2）将【插入】工具栏【布局】类别中的【绘制层】 按钮拖动到一个已存在的层中。
（3）将光标置于已存在的层中，按住Alt键绘制一个新 层。
（JavaScript）选择【插入】|【HTML】|【水平线】命 令，或者单击【插入】工具栏【HTML】类别中的【水平 线】按钮，得到默认水平线。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
2. 设置水平线的属性
• 选择水平线后，可以在其属性检查器中设置相应的属 性。
实训教程》讲义
五、用框架布局网页：
4. 设置框架及框架集的属性
• 设置框架的属性 在【框架】面板中单击某一框架区域，即可在页面中选 择此框架，然后可在属性检查器中设置其属性。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
4. 设置框架及框架集的属性
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
第8章 网页布局
重点内容：
• 网页的布局原则
• 用水平线布局网页 • 用表格布局网页 • 用层布局网页 • 用框架布局网页
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• “T”型布局
“T”型布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• “口”型布局
“口”型布 局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
实训教程》讲义
四、用层布局网页：
2. 编辑层
• 层的选择 （1）单击层的边框。 （2）单击层的标签。 （3）在【层】面板中单击层的名称。 • 层的移动 选择需要移动的层后，将光标移到层的边框上，当光标 变为十字形时进行拖动。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 创建嵌套框架 先在页面中创建一个框架，将插入点置于要创建嵌套的 框架区域，再次执行创建框架的操作。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
3. 编辑框架页面
• 对框架页面的编辑与对普通页面的编辑相同，包括输 入文本、插入图像、添加表格和表单的方法都是相同的。 此外，还有一种比较简便的编辑框架的方法，即先创建 好整个框架集中各部分框架页面，然后将其直接拖动至 框架集中对应的部分。
Dreamweaver 应用技术——《 Dreamweaver 8
“三”型布 局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• 对称对比布局
POP布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• POP布局
实训教程》讲义
三、用表格布局网页：
1. 布局模式
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
2. 绘制布局单元格和布局表格
• 绘制布局单元格 在布局模式中单击【插入】工具栏【布局】类别中的 【绘制布局单元格】按钮，然后将十字形指针移至工作 区的空白处或布局表格内，按住鼠标左键拖动，即可绘 制出一个布局单元格。按住Ctrl键可不必重复单击【绘 制布局单元格】按钮而连续绘制出多个布局单元格。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 插入预置框架样式 单击【插入】工具栏【布 局】类别中的【框架】按 钮，在弹出的下拉菜单中 选择所需的框架类型，即 可在页面上插入相应的框 架，并弹出【框架标签辅 助功能属性】对话框，可 为框架指定框架名称。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
2. 编辑层
• 设置层属性——使用层的属性检查器eaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
1. 框架与框架集
框架不是文件，它是浏览器窗口中的一个区域，是存放文 档的容器，可以显示与浏览器窗口的其余部分中所显示内 容无关的HTML文档。 框架集是HTML文件，它定义一组框架的布局和属性，包括 框架的数目、框架的大小和位置以及在每个框架中初始显 示的页面的URL。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 设置层参数 选择【编辑】|【首选参数】命令，弹出【首选参数】 对话框，在【分别】列表框中选择【层】选项，即可更 改层参数。
层参数
Dreamweaver 应用技术——《 Dreamweaver 8
四、用层布局网页：
2. 编辑层
• 更改层的名称 在【层】面板的【名称】栏中双击层的名称，该文本即 进入编辑状态，输入新的名称替换原来的文本。也可以 选择该层，然后在属性检查器左侧的【层编号】文本框 中输入层的名称。 • 层的显示与隐藏 如果一个层被隐藏，单击此图层名称前的睁着眼睛的图 标，此层即被显示，同时睁眼图标也会变为闭眼图标。
5. 更改布局表格和布局单元格的属性
• 设置布局单元格的属性——使用布局单元格的属性检 查器。
布局单元格的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 平铺式层——绘制层时须在【层】面板中选中【防止 重叠】复选框。 • 重叠式层——绘制层时须确保清除对【防止重叠】复 选框，然后移动层与其他层重叠。
水平线的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
3. 更改水平线的颜色
• 使用属性面板中的【快速标签编辑器】按钮。 • 使用【标签编辑器－hr】对话框中的【浏览器特定的】 选项。
Dreamweaver 应用技术——《 Dreamweaver 8
• 设置框架集的属性 单击框架的边框，选择框架集，然后在属性检查器中设 置此框架集的属性。
框架集的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
5. 保存框架和框架集文件
• 保存框架集文件——选择框架集，然后选择【文件】 |【保存框架页】命令。 • 保存框架中显示的文档——在框架中单击，然后选择 【文件】|【保存框架】命令。 • 保存所有文件——选择【文件】|【保存全部】命令。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
6. 解决浏览器无法显示框架的问题
在Dreamweaver中允许指定在不支持框架的浏览器中编辑内 容。选择【修改】|【框架页】|【编辑无框架内容】命令， 然后在文档窗口中像处理普通文档一样输入或插入提示内 容。
POP布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
2.布局原则
• 正常平衡 • 异常平衡 • 对比
• 凝视
• 空白 • 图像解说
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
1. 添加水平线
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
2. 绘制布局单元格和布局表格
• 绘制布局表格 在布局模式下单击【插入】工具栏【布局】类别中的 【布局表格】按钮 ，然后将十字形指针移至工作区， 按住鼠标左键拖动，即可绘制出一个布局表格。按住 Ctrl键可连续绘制出多个布局表格。
【框架】下拉菜单
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 自定义框架样式 先选择【查看】|【可视 化助理】|【框架边框】 命令，在页面中显示出框 架的边框，然后将光标放 置在框架的的边框线上， 当指针变为双指的箭头时， 按住鼠标左键拖动边框到 欲建框架的位置。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
3. 将内容添加到布局单元格
• 返回到标准视图下，即添加内容。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
4. 使用间隔图像
• 切换到布局视图，单击每栏底部的下拉按钮，从弹出 菜单中选择【添加间隔图像】命令。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
5. 更改布局表格和布局单元格的属性
• 设置布局表格的属性——使用布局表格的属性检查器。
布局表格的属性检查器
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
三、用表格布局网页：
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
四、用层布局网页：
1. 创建层
• 嵌入式层 （1）在已存在的层中单击，选择【插入】|【布局对象】 |【层】命令。
（2）将【插入】工具栏【布局】类别中的【绘制层】 按钮拖动到一个已存在的层中。
（3）将光标置于已存在的层中，按住Alt键绘制一个新 层。
（JavaScript）选择【插入】|【HTML】|【水平线】命 令，或者单击【插入】工具栏【HTML】类别中的【水平 线】按钮，得到默认水平线。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
二、用水平线布局网页：
2. 设置水平线的属性
• 选择水平线后，可以在其属性检查器中设置相应的属 性。
实训教程》讲义
五、用框架布局网页：
4. 设置框架及框架集的属性
• 设置框架的属性 在【框架】面板中单击某一框架区域，即可在页面中选 择此框架，然后可在属性检查器中设置其属性。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
4. 设置框架及框架集的属性
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
第8章 网页布局
重点内容：
• 网页的布局原则
• 用水平线布局网页 • 用表格布局网页 • 用层布局网页 • 用框架布局网页
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• “T”型布局
“T”型布局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
• “口”型布局
“口”型布 局
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
一、网页的布局原则：
1. 布局结构
实训教程》讲义
四、用层布局网页：
2. 编辑层
• 层的选择 （1）单击层的边框。 （2）单击层的标签。 （3）在【层】面板中单击层的名称。 • 层的移动 选择需要移动的层后，将光标移到层的边框上，当光标 变为十字形时进行拖动。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
2. 创建框架与框架集
• 创建嵌套框架 先在页面中创建一个框架，将插入点置于要创建嵌套的 框架区域，再次执行创建框架的操作。
Dreamweaver 应用技术——《 Dreamweaver 8
实训教程》讲义
五、用框架布局网页：
3. 编辑框架页面
• 对框架页面的编辑与对普通页面的编辑相同，包括输 入文本、插入图像、添加表格和表单的方法都是相同的。 此外，还有一种比较简便的编辑框架的方法，即先创建 好整个框架集中各部分框架页面，然后将其直接拖动至 框架集中对应的部分。
Dreamweaver 应用技术——《 Dreamweaver 8