设计Web页面布局分析.ppt

网站规划与网页设计 第3版 9 1使用布局模式对页进行布局9 2AP元素9 3框架9 4样式表9 5模板 第9章设计Web页面布局 创建页布局的一种常用的方法是使用HTML表格对元素进行定位 但是 使用表格进行布局不太方便 因为最初创建表格是为了显示表格数据 而不是用于对Web页进行布局 为了简化使用表格进行页面布局的过程 Dreamweaver提供了 布局 模式 在 布局 模式中 用户可以使用表格作为基础结构来设计页 同时避免了使用传统的方法创建基于表格的设计时经常出现的一些问题 9 1使用布局模式对页进行布局 9 1 1 布局 模式的概念在 布局 模式中 用户可以在添加内容前使用布局单元格和表格来对页面进行布局 例如 用户可以沿页面的顶部绘制一个单元格用于放置标题图形 在页面的左边绘制另一个单元格用于放置导航条 在右边绘制第三个单元格用于放置内容 添加内容时 可以按需要在其四周移动单元格 以调整布局 页面上显示的布局表格外框为绿色 而布局单元格外框为蓝色 当用户将鼠标指针移到表格单元格上时 Dreamweaver会高亮显示该单元格 9 1使用布局模式对页进行布局 9 1 2 标准 模式与 布局 模式的切换在绘制布局表格或布局单元格之前 必须从 标准 模式切换到 布局 模式 1 标准 模式切换到 布局 模式要切换到 布局 模式 可以执行以下操作之一 如果用户正在代码视图中工作 则选择 查看 设计 菜单命令或 查看 代码和设计 菜单命令 选择 查看 表格模式 布局模式 菜单命令 在文档窗口的顶部会出现标有 布局模式 的横条 2 布局 模式切换到 标准 模式要切换出 布局 模式 可以执行以下操作之一 在文档窗口的顶部 单击 布局模式 后的 退出 项 如图9 3所示 选择 查看 表模式 标准模式 菜单命令 9 1使用布局模式对页进行布局 9 1 3在 布局 模式下绘制布局单元格和表格1 绘制布局单元格和表格 1 绘制布局单元格 确保设计处于 布局 模式下 在插入面板的 布局 分类中单击 绘制布局单元格 按钮 鼠标指针变为加号 形状 将鼠标指针移到要开始绘制单元格的位置单击 然后按住鼠标左键拖动以创建布局单元格 2 绘制布局表格 确保设计处于 布局 模式下 在插入面板的 布局 分类中单击 绘制布局表格 按钮 鼠标指针变为加号 形状 在页面上单击然后按住鼠标左键拖动以创建布局表格 在页面上显示的布局表格外框为绿色 9 1使用布局模式对页进行布局 9 1 3在 布局 模式下绘制布局单元格和表格2 绘制嵌套布局表格用户可以将一个布局表格绘制在另一个布局表格中 创建嵌套表格 对外部表格所进行的更改不会影响嵌套表格中的单元格 例如 当用户更改外部表格中行或列的大小时 内部表格中单元格的大小不发生变化 用户可以插入多级嵌套表格 但要注意嵌套布局表格的大小不能超过包含它的表格 绘制嵌套布局表格的操作步骤如下 确保设计处于 布局 模式下 在插入面板的 布局 分类中单击 绘制布局表格 按钮 鼠标指针变为加号 形状 在现有布局表格中的空白 灰色 区域中单击 然后按住鼠标左键拖动以创建嵌套布局表格 9 1使用布局模式对页进行布局 9 1 4调整布局单元格和表格的大小及位置1 调整布局单元格的大小及位置 1 调整布局单元格的大小 2 调整布局单元格的位置2 调整布局表格的大小及位置 1 调整布局表格的大小 2 移动布局表格9 1 5将内容添加到布局单元格中在 布局 模式下 用户可以将文本 图像和其他内容添加到布局单元格中 就像在 标准 模式下将内容添加到表格单元格中一样 案例9 1 制作世界名车展示网页 9 1使用布局模式对页进行布局 AP元素 绝对定位元素 是分配有绝对位置的HTML页面元素 具体地说 就是Div标签或其它任何标签 AP元素可以包含文本 图像或其它任何可放置到HTML文档正文中的内容 在设计网页时 必须对页面元素进行定位 使页面布局整齐 美观 AP元素可以放置在页面的任意位置 使用AP元素可以以像素为单位来精确定位页面元素 把页面元素置入AP元素中 可以控制某个AP元素显示在前面还是后面 显示还是隐藏 配合时间轴的使用 可同时移动一个或多个AP元素 从而轻松制作出动态效果 9 2AP元素 9 2 1AP元素的基本操作AP元素的基本操作包括 创建AP元素 激活AP元素 选择AP元素 移动AP元素 调整AP元素的大小 对齐AP元素和设置AP元素的背景等 案例9 2 使用AP元素和表格制作显示一副对联的网页 9 2AP元素 9 2 2将AP元素转换为表格许多网页设计人员更喜欢通过AP元素进行页面布局设计 而不是使用表格或布局模式创建页面布局 Dreamweaver支持用户使用AP元素创建页面布局 然后将它们转换为表格 如果用户需要一个使用表格的页面布局 最好使用Dreamweaver中的标准表格布局工具创建该页面布局 当然 用户可以在AP元素和表格之间相互转换 以调整布局并优化网页设计 但是 需要注意的是 当用户将表格转换回AP元素时 Dreamweaver会将此表格转换回APDiv 此操作与对表格进行转换之前页面上可能已有的AP元素的类型无关 另外 用户不能转换页面上特定的表格或AP元素 必须将页面上所有的AP元素转换为表格 9 2AP元素 框架的作用就是把浏览器窗口划分为若干个区域 每个区域可以分别显示不同的网页 框架由框架集 Frameset 和单个框架 Frame 组成 9 3 1框架类型和框架面板1 框架类型Dreamweaver预定义了多种类型的框架结构 在插入工具栏的 布局 分类中单击 框架 按钮 在弹出的菜单中 用户可以选择系统预定义的框架结构 2 框架面板在操作框架的过程中 框架面板是非常有用的 使用框架面板可以进行选取 观察 修改框架等基本操作 因此在对框架操作时 框架面板最好一直打开 9 3框架 9 3 2使用框架排版 案例9 3 制作一个使用框架排版的诗词欣赏网页 案例展示 页面分为三个区域 上边是网站主题区 左边是导航区 右边是内容区 在浏览网页时 单击左边的某个文本链接 则对应的链接内容在右边显示 而上边的网站主题和左边的导航栏目仍然保留在屏幕上 实例效果如图9 37所示 9 3框架 9 4 1Dreamweaver中CSS样式的类型1 创建自定义类样式创建自定义类样式的方法如下 执行 格式 CSS样式 新建 菜单命令 在 CSS样式 面板中 单击面板右下侧的 新建CSS规则 按钮 在文档窗口中选择文本 从 属性 面板的 目标规则 下拉列表中选择 新CSS规则 然后单击 编辑规则 按钮 如图9 48所示 9 4使用CSS对页进行布局 9 4 1Dreamweaver中CSS样式的类型2 创建仅应用于一个HTML元素的样式创建仅应用于一个HTML元素的样式的方法如下 打开 新建CSS规则 对话框 在 新建CSS规则 对话框中 指定要创建的CSS规则的 选择器类型 为 ID 仅应用于一个HTML元素 然后在 选择器名称 框中输入ID名称 如 myhead1 如图9 52所示 9 4使用CSS对页进行布局 9 4 1Dreamweaver中CSS样式的类型3 创建重定义HTML标签样式 打开 新建CSS规则 对话框 在 新建CSS规则 对话框中 指定要创建的CSS规则的 选择器类型 为 标签 重新定义HTML元素 然后在 选择器名称 框中输入 或选择 HTML元素的名称 如h1 如图9 53所示 9 4使用CSS对页进行布局 9 4 1Dreamweaver中CSS样式的类型4 创建链接样式 打开 新建CSS规则 对话框 在 新建CSS规则 对话框中 指定要创建的CSS规则的 选择器类型 为 复合内容 基于选择的内容 然后在 选择器名称 框中输入 或选择 超链接状态的名称 如a link 如图9 54所示 9 4使用CSS对页进行布局 9 4 2Dreamweaver中使用CSS样式表美化页面 案例9 4 使用CSS样式制作一个诗集精选的网页 9 4样式表 9 5 1模板的基本概念模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能 如果希望站点中的网页享有某种特性 例如 相同的布局结构 相似的导航栏等内容 模板是非常有用的 对于模板而言 新的页面可以从一个模板中创建 一旦被创建 这个新的文档将保持和原来模板的联系 除非被明确地隔离或分开 一旦把模板应用于一组网页 就可以通过编辑该模板来改变这一组网页中的共享信息 例如 将模板中的导航栏更改后 应用该模板页面中的导航栏将被自动更新 模板是由两类区域组成的 锁定区域和可编辑区域 当第一次创建模板时 所有的区域都是锁定的 定义模板过程的一部分就是指定和命名可编辑的区域 然后 当某个文档从某些模板中创建时 可编辑的区域则成为惟一可以被改变的地方 当然 模板可以进行修改 以便标记附加的编辑区域 或者重新锁定可编辑区域 9 5模板 9 5 2利用模板创建页面 案例9 5 利用模板技术制作古代诗词欣赏的系列页面 9 5 3用模板更新整个站点当创建了一个模板后 并且将该模板应用于文档时 就可以通过修改一个模板来控制所有应用此模板的文档 可以执行以下操作之一更新站点 在文档编辑窗口 执行 修改 模板 更新页面 命令 打开 更新页面 对话框 在文件面板中切换到 资源 选项卡 在左侧的分类中选择 模板 打开模板面板 在模板上单击鼠标右键 在弹出的菜单中选择 更新站点