第3章 网页的布局.ppt

本章学习要求 利用表格排版 1 表格的嵌套P542 在表格中使用不同的背景色P573 首字符下沉 3 1网页布局实例 3 1 1网页的风格 在对网页插入各种对象 修饰效果前 一定要确定要确定网页的总体风格 3 1 1网页的风格1 搜狐 的主页的内容很丰富 色彩鲜艳并有许多大幅广告和浮动广告栏 3 1 1网页的风格2 微软中国的主页 内容比较专一 内容非常有条理 栏目突出 没有凌乱的感觉 3 1 1网页的风格3 这是一个个人主页 它看起来更简单 感觉非常清新 3 1 2网页布局实例 所谓网页的布局 通俗地说 就是确定网页上的网站标志 导航栏 菜单等元素的位置 重要的元素都放在突出的位置 3 1 2网页布局实例1 厂 字型结构的特点是内容清晰 一目了然 3 1 2网页布局实例2 同 字型结构的特点是超链接多 信息量大 3 1 2网页布局实例3 标题正文型结构的顶端是网站标识和标题 下面是网页正文 内容非常简单 3 1 2网页布局实例4 分栏型结构 这种结构一般分为左右 或上下 两栏 也有的分为多栏 一般将导航链接与正文放在不同的栏中 这样打开新的网页 导航链接栏的内容不会发生变化 第5章内容 3 1 2网页布局实例5 Flash型结构采用Flash技术来完成 3 1 2网页布局实例6 封面型结构 3 1 3网页布局注意事项 1 平衡性2 对称性3 对比性4 疏密度5 反复性6 韵律感 网页的排版布局是决定网站美观与否的一个重要方面 通过合理的 有创意的布局 才可以把文字 图像等内容完美地展现在浏览者面前 3 1 4画出网页布局草图 3 2使用表格 实现网页的布局有两种方法 一种是采用表格 一种是使用布局视图 3 2 1表格概述 在网页中 表格的作用主要有两种 一是存放数据和显示信息 二是组织网页的内容对于图文混排的网页 利用表格可以大大提高网页制作的效率 而隐藏表格框线后 可以使浏览者感受不到表格的存在 3 2 2插入表格 单击菜单栏上的 表格 打开 表格 菜单 移动鼠标指针到 插入 上 在下一级菜单中单击 表格 出现 插入表格 对话框 在 插入表格 对话框中 输入欲插入表格的行数 列数和边框线宽度 单击 确定 3 2 3插入 删除表格的行 列和单元格 使光标出现在表格中 然后单击菜单栏上的 表格 打开 表格 菜单 再单击 表格 菜单中的 插入 在下一级菜单中单击 行或列 打开 插入行或列 对话框 在 插入行或列 对话框选中 行 在 行数 右端的栏位中输入1 然后选中 所选区域之上 单击 确定 在第二行的上面将插入一行 3 2 3插入 删除表格的行 列和单元格 下面 我们一起将插入的一行再删除 学习一下删除行的步骤 首先 单击鼠标使光标出现在该行中 然后单击 表格 菜单 将鼠标指针移动到 选定 上 自动弹出下一级菜单 最后单击 行 选定该行 单击 表格 菜单 在下拉菜单中选择 删除行 该行被删除 3 2 4合并与拆分单元格 拖动鼠标选中表格中右端的两个单元格 单击菜单栏上的 确定 打开 表格 菜单 再单击 表格 菜单中的 合并单元格 两个单元格将被合并成一个单元格 3 2 4合并与拆分单元格 首先 单击鼠标 使光标出现在该单元格中 然后打开 表格 菜单 再单击 表格 菜单中的 拆分单元格 在 拆分单元格 对话框中选中 拆分为行 在 列数 右端的栏位中输入 单击 确定 该单元格被分为两个单元格 3 2 5表格的嵌套 表格的嵌套就是在表格中插入另外一个表格 这样除了可以使网页内容更整齐以外 还可以为选取内容进行编辑提供方便 将光标移动到该单元格中 单击 表格 菜单 在 插入 的下一级菜单中选择 表格 命令 打开 插入表格 对话框 输入6行1列 单击 确定 3 3利用表格规划网页的布局 由于采用了隐藏表格框线的方法 所以在浏览器中丝毫看不到表格影子 3 3 1 表格属性 对话框 其中 对齐方式 指表格相对于网页的对齐方式 单元格衬距指单元格中文字与框线的距离 单元格间距指单元格之间的距离 3 3 2框线的设置 框线宽度为1 即存在细框线 0时表格框线变成