第4章设计页面布局 本章主要介绍了几种不同的网页布局的方法：表格排版、层排版、框架排版，还介绍了 利用Dreamweaver内部行为制作网页特效。 【本章学习目的】 木意诵讨几个典型实例的介绍.面占讲解了网页版面布局的技术。诵过木意的学习，读 了解排版网页技术的异同性，同 一、网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页 面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现800*600像素， 1024*768像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主 要内容的排版等。经常用到的版面布局结构主要有以下几种： 1. “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为 菜单条的背景较深，整体效果类似英文字母“T”,这是网页设计中用的最广泛的一种布局 方式。这种布局的优点是页面结构洁晰，主次分明。是初学者最容易上手的布局方法。缺点 是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 2.“口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情 连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤， 不够灵活。 3.“三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分 割为四部分，色块中大多放广告条。 4.POP布局 POP引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择 多大？怎样放置网页的网页元素？在Dreamweaver中提供了四种主要的方法用于规划和设 计页面：表格、层、框架和CSS+DIV,本章只介绍前三种方式。 二、实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在 第4章 设计页面布局 本章主要介绍了几种不同的网页布局的方法：表格排版、层排版、框架排版，还介绍了 利用 Dreamweaver 内部行为制作网页特效。 【本章学习目的】 本章通过几个典型实例的介绍，重点讲解了网页版面布局的技术。通过本章的学习，读 者应掌握网页的排版技术：表格排版、层排版、框架排版，了解排版网页技术的异同性，同 时还要掌握利用 Dreamweaver 内部行为制作网页特效的技巧。 一、网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏览器看到的完整的一个页 面。因为每个人的显示器分辨率不同，所以同一个页面的分辨率可能出现 800*600 像素， 1024*768 像素等。布局，就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。 网页版面布局是指定网页内容在浏览器中的显示方式，例如徽标的位置、导航栏的显示、主 要内容的排版等。经常用到的版面布局结构主要有以下几种： 1. “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单，右面显示内容的布局，因为 菜单条的背景较深，整体效果类似英文字母“T”，这是网页设计中用的最广泛的一种布局 方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点 是规矩呆板，如果细节和色彩上不注意，很容易让人“看之无味”。 2. “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面是友情 连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤， 不够灵活。 3. “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分 割为四部分，色块中大多放广告条。 4. POP 布局 POP 引自广告术语，就是指页面布局像一张宣传海报，以一张精美图片作为页面的设 计中心。常用于时尚类站点，比如 ELLE.com。优点显而易见:漂亮吸引人。缺点就是速度慢。 在确定好版面布局结构后，继续要做的就是根据内容调整页面的结构。如页面尺寸选择 多大？怎样放置网页的网页元素？在 Dreamweaver 中提供了四种主要的方法用于规划和设 计页面：表格、层、框架和 CSS+DIV，本章只介绍前三种方式。 二、实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网页设计的各种元素有序地组织在