页面布局设计分析.pptVIP

主要内容 8.1　表格网页布局 8.2　框架网页布局 8.3　 DIV+CSS网页布局 8.4　模板与库 8.5　本章小结　 第*页 8.5 本章小结 本章讲述了规划网页布局的几个基本方式。 首先，介绍了表格网页布局。 接下来，对框架网页布局方式进行了分析。 之后，分别讲述了DIV+CSS网页布局的方式和特点。 最后，对模板与库进行了详细讲述。 第*页 * 网页设计与制作教程 第1章 网页设计与制作基础 第8章 页面布局设计 第*页 本章概述 本章的学习目标 主要内容 本章概述 规划网页布局，表格是常用的工具之一，表格在网页中不仅可以排列数据，还可以对页面中的图像、文本、动画等元素进行准确的定位，使页面显得整齐有序、便于访问者浏览。框架也常用来对网页进行布局。CSS+Div则是一种有别于传统表格定位方式的网页布局新技术，可实现网页页面内容与表现相分离。本章主要介绍表格和框架在页面布局中的应用，利用CSS+Div技术进行网页布局以及模板与库的应用。 第*页 本章的学习目标 掌握使用表格规划网页布局 了解框架设置网页布局 掌握利用CSS+Div进行网页布局 了解模板与库的应用 第*页 主要内容 8.1　表格网页布局 8.2　框架网页布局 8.3　 DIV+CSS网页布局 8.4　模板与库 8.5　本章小结　 第*页 8.1 表格网页布局 网页向浏览者提供的信息是多样化的，如文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在着手设计网页之前必须考虑的事情。表格的作用就在于帮助设计者高效、准确地定位各种网页数据，直观、鲜明地表达设计者的思想。使用表格布局网页，在不同平台和不同分辨率的浏览器中都能保持原有的布局。 第*页 创建表格 创建表格 在菜单栏中，选择?“插入”|?“表格”菜单项，弹出?“表格”对话框。 编辑表格 创建表格后，如果不能满足要求，这时就需再对表格进行一些操作，如单元格的合并及拆分、行或列的删除等，设置单元格和表格属性等，并且可以导入和导出表格。 表格的选取是编辑表格的前提，要在表格中进行任何操作都离不开选取表格。 第*页 创建表格 例8-1 在文档中创建表格，并设置单元格格式。 第*页 用表格规划网页布局 Dreamweaver CC提供了多种方法来创建和控制网页布局，在表格的?“布局模式”中规划网页布局就是最常用、最实用的方式之一。 例8-2 利用表格规划网页布局。 第*页 表格+CSS布局 表格+CSS布局是从传统的网页设计技术到符合Web2.0标准的网页设计技术的一种过渡。 符合Web2.0标准的网页设计是将网页内容、结构与表现分开，做到“表现和结构相分离”。 第*页 表格+CSS布局 这里定义了4个CSS类选择符：.left_tdbgall、.left_top、.left_mid、.left_end，它们分别用来控制表格的样式和3个单元格的样式。 下面详细介绍这个网页布局实例的制作方法。 创建CSS文件 创建网页文档 第*页 主要内容 8.1　表格网页布局 8.2　框架网页布局 8.3　 DIV+CSS网页布局 8.4　模板与库 8.5　本章小结　 第*页 8.2 框架网页布局 框架是一项比较特殊的布局工具，使用其可以将浏览器窗口划分为多个独立的区域，每个区域显示不同的HTML文档，常用于固定网页中的某些部分。例如，页面底部的面板区域中的信息通常是固定的，就可以使用框架进行布局。 第*页 框架和框架集的概念 在网页中，一个网页可以包含多个页面，此时需要用到框架。 框架是独立的HTML文档。框架集是由多个框架组合而成的，一个框架网页中包含多个框架的布局、链接和属性信息。用框架构成的网页，实际包含各个框架中的网页及一个框架集表格。 框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。 第*页 设计框架页面 创建框架和框架集 编辑框架 创建好框架后，可以修改框架，主要包括选择框架、设置框架属性。框架并不是在所有浏览器中都可以显示的，这时就需要在标签中输入提示信息。 第*页 设计框架页面 例8-3 利用框架规划网页布局。 第*页 主要内容 8.1　表格网页布局 8.2　框架网页布局 8.3　 DIV+CSS网页布局 8.4　模板与库 8.5　本章小结　 第*页 8.3 DIV+CSS网页布局 Web标准 XHTML DIV+CSS设计 第*页 Web标准 基于Web标准的网站设计方法现在已经成为主流的网页设计方法。 Web标准，即网站标准，一般指网站建设采用基于XHTML语言的网站设计语言，Web标准中典型的应用模式是DIV+CSS。实际上，Web标