网页设计与制作教程 第8章 页面布局设计

网页设计与制作教程 第 1章 网页设计与制作基础 第 8章 页面布局设计 第 1页 本章概述 本章的学习目标 主要内容 网页设计与制作教程 第 1章 网页设计与制作基础 本章概述 规划网页布局，表格是常用的工具之一，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，使页面显得整齐有序、便于访问者浏览。框架也常用来对网页进行布局。 实现网页页面内容与表现相分离。本章主要介绍表格和框架在页面布局中的应用，利用 第 2页 网页设计与制作教程 第 1章 网页设计与制作基础 本章的学习目标 掌握使用表格规划网页布局 了解框架设置网页布局 掌握利用 了解模板与库的应用 第 3页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 格网页布局 架网页布局 板与库 章小结 第 4页 网页设计与制作教程 第 1章 网页设计与制作基础 表格网页布局 网页向浏览者提供的信息是多样化的，如文字、图像、 何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。 第 5页 网页设计与制作教程 第 1章 网页设计与制作基础 创建表格 创建表格 在菜单栏中，选择 “插入” |“表格”菜单项，弹出 “表格”对话框。 编辑表格 创建表格后，如果不能满足要求，这时就需再对表格进行一些操作，如单元格的合并及拆分、行或列的删除等，设置单元格和表格属性等，并且可以导入和导出表格。 表格的选取是编辑表格的前提，要在表格中进行任何操作都离不开选取表格。 第 6页 网页设计与制作教程 第 1章 网页设计与制作基础 创建表格 例 8在文档中创建表格，并设置单元格格式。 第 7页 网页设计与制作教程 第 1章 网页设计与制作基础 用表格规划网页布局 表格的 “布局模式”中规划网页布局就是最常用、最实用的方式之一。 例 8利用表格规划网页布局。 第 8页 网页设计与制作教程 第 1章 网页设计与制作基础 表格 + 表格 + 符合 构与表现分开，做到“表现和结构相分离”。 第 9页 网页设计与制作教程 第 1章 网页设计与制作基础 表格 + 这里定义了 4个 们分别用来控制表格的样式和 3个单元格的样式。 下面详细介绍这个网页布局实例的制作方法。 创建 创建网页文档 第 10页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 格网页布局 架网页布局 板与库 章小结 第 11页 网页设计与制作教程 第 1章 网页设计与制作基础 框架网页布局 框架是一项比较特殊的布局工具，使用其可以将浏览器窗口划分为多个独立的区域，每个区域显示不同的 用于固定网页中的某些部分。例如，页面底部的面板区域中的信息通常是固定的，就可以使用框架进行布局。 第 12页 网页设计与制作教程 第 1章 网页设计与制作基础 框架和框架集的概念 在网页中，一个网页可以包含多个页面，此时需要用到框架。 框架是独立的 架集是由多个框架组合而成的，一个框架网页中包含多个框架的布局、链接和属性信息。用框架构成的网页，实际包含各个框架中的网页及一个框架集表格。 框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。 第 13页 网页设计与制作教程 第 1章 网页设计与制作基础 设计框架页面 创建框架和框架集 编辑框架 创建好框架后，可以修改框架，主要包括选择框架、设置框架属性。框架并不是在所有浏览器中都可以显示的，这时就需要在标签中输入提示信息。 第 14页 网页设计与制作教程 第 1章 网页设计与制作基础 设计框架页面 例 8利用框架规划网页布局。 第 15页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 格网页布局 架网页布局 板与库 章小结 第 16页 网页设计与制作教程 第 1章 网页设计与制作基础 第 17页 网页设计与制作教程 第 1章 网页设计与制作基础 基于 网站标准，一般指网站建设采用基于 际上， 是一系列标准的集合。 第 18页 网页设计与制作教程 第 1章 网页设计与制作基础 扩展超文本标识语言）是目前推荐使用的网页标记语言，看起来与 象 ，语法上更加严格。本质上说， 合了部分 目前国际上在网站设计中推崇的 通常所说的 第 19页 网页设计与制作教程 第 1章 网页设计与制作基础 选择合适的 要建立符合标准的网页，必须声明 头文件 基于 需要进行研究些其他的设置，所有的这些设置都在头文件中或者头文件之前。 代码规范 也是 第 20页 网页设计与制作教程 第 1章 网页设计与制作基础 网页中的表格或者其他区块都具备内容（ 填充（ 边框（ 边界（ 基本属性，一个 利用 的是基于 的可扩展性和灵活性将适应未来网络应用更多的需求。 第 21页 网页设计与制作教程 第 1章 网页设计与制作基础 下面利用 第 22页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 格网页布局 架网页布局 板与库 章小结 第 23页 网页设计与制作教程 第 1章 网页设计与制作基础 模板与库 模板与库概念 模板的创建与管理 模板的应用 库的操作 第 24页 网页设计与制作教程 第 1章 网页设计与制作基础 模板与库概念 模板 模板是一种具有固定格式的 件扩展名为 户可按自己的要求创建有格式的模板文档，这样可以在运用模板时自动生成具有相同风格的页面。 库 库是一种特殊的 包含可放置到网页中的一组资源或资源副本。在多数网站中都会有这样的情况，在站点中的每个页面上都会有或多或少的内容是被重复使用的，如版权信息、公司地址、标题和页面页脚等。能够重复地被使用或者需要经常更新的页面元素被称为库项目。 第 25页 网页设计与制作教程 第 1章 网页设计与制作基础 模板的创建与管理 模板的制作与普通网页的制作相同，是用来制作网页的公共部分。将已有文档转换为模板，然后根据需要进行修改，或直接创建空白模板，在其中输入需要显示的文档内容。 创建模板 直接创建模板 将已有文档转换为模板 模板的编辑 模板的编辑主要包括创建可编辑区域、取消可编辑区域的标记和更改可编辑区域的名称等操作。 第 26页 网页设计与制作教程 第 1章 网页设计与制作基础 模板的创建与管理 例 8在 管理模板 对模板的管理主要包括重命名、删除、修改等操作。 第 27页 网页设计与制作教程 第 1章 网页设计与制作基础 模板的应用 前面已经 介绍 模板的创建和编辑，下面来 介绍 如何将创建好的模板应用到页面中。 用模板创建新文档 将模板应用于现有文档 从模板创建新文档 第 28页 网页设计与制作教程 第 1章 网页设计与制作基础 模板的应用 例 8在 第 29页 网页设计与制作教程 第 1章 网页设计与制作基础 库的操作 新建库项目 用户既可以新建一个空白库项目，也可以从页面中基于选定内容创建库项目。 应用库项目 库项目是可以在多个页面中重复使用的页面元素。当用户在页面中插入库项目时，实际内容将随该库项目的引用一起插入到文档中。 修改库项目 库项目创建后，根据需要适时地修改其内容是不可避免的。 第 30页 网页设计与制作教程 第 1章 网页设计与制作基础 库的操作 更新文档 库项目被修改且保存后，引用该库项目的网页会进行自动更新。 分离库项目 一旦在网页文档中应用了库项目，如果希望其成为网页文档的一部分，这就需要将库项目从源文件中分离出来。 删除库项目 第 31页 网页设计