《网页设计与制作》课程教学资源（PPT课件讲稿）第四章 设计页面布局

第四章设计页面布局 41网页版面布局概述 42实例导入:表格排版网页 使用表格排版 使用层排版 时间轴特效及行为 46)使用框架排版网页

第四章 设计页面布局 4.1 4.2 4.3 4.4 4.5 4.6 网页版面布局概述 实例导入：表格排版网页 使用表格排版 使用层排版 时间轴特效及行为 使用框架排版网页

4.1网页版面布局概述 的是奶中个的之牌疆 高交受面时含司峡 800*600像 024*768 最适合浏览的方式将片和文字摆放在 不同位 网贩面布信是指定防交内容在测中的 的 经背电到的殷雷局结构 星數着联旱神 主要内容的排版 “T”结构布局 网站 有内举的布局因单系 花[表单 集类似 这字智上是网页设计中用的量人影的二种布后 页面 次分明 着盼3方若之规矩板,如集组节和色彩工不意

4.1 网页版面布局概述 网页版面布局是网页设计中的一项重要内容。版面指的是浏 览器看到的完整的一个页面。因为每个人的显示器分辨率不同， 所以同一个页面的分辨率可能出现800*600像素，1024*768 像素等。布局，就是以最适合浏览的方式将图片和文字摆放在 页面的不同位置。网页版面布局是指定网页内容在浏览器中的 显示方式，例如徽标的位置、导航栏的显示、主要内容的排版 等。经常用到的版面布局结构主要有以下几种： ❖ “T”结构布局 页面顶部为横条的网站标志、广告条，下方左面为主菜单， 右面显示内容的布局，因为菜单条的背景较深，整体效果类似 英文字母“T”，这是网页设计中用的最广泛的一种布局方式。 这种布局的优点是页面结构清晰，主次分明。是初学者最容易 上手的布局方法。缺点是规矩呆板，如果细节和色彩上不注意， 很容易让人“看之无味”

4.1网页版面布局概述 ◆“口”型布局 这是一个象形的说法,就是页面一般上下各有一个广 条,左面 石面是友情连接等中间是主要内 拥挤,不够霑。兰型希·信量大试点是成念 这种布局 充分利成面 这种布局多用于国外站点,国内用的不多 是页面 横向两条色块, 面整体分割为四部分,色块中大多 告条

❖ “口”型布局 这是一个象形的说法，就是页面一般上下各有一个广告 条，左面是主菜单，右面是友情连接等，中间是主要内容。 这种布局的优点是充分利用版面，信息量大。缺点是页面 拥挤，不够灵活。 “三”型布局 这种布局多用于国外站点，国内用的不多。特点是页面 上横向两条色块，将页面整体分割为四部分，色块中大多 放广告条。 4.1 网页版面布局概述

4.1网页版面布局概述 POP布局 PoP引自广告术语,就是指页面布局像一张宣传海报 以一张精美图片作为页面的设计中心。常用于时尚类站点 匕如 ELLE. con。优点显而易见:漂亮吸引人。缺点就是速 度慢。 在确定好版面布局结构后,继续要做的就是梖据内容调 整页面的结构。如页面尺寸选择多大?怎样放置网页的网 页元素?在 Dreamweaver中提供了四种主要的方法用于 规划和设计页面:表格、层、框架和cSS+DI,本章只 介绍前三种方式

4.1 网页版面布局概述 ❖ POP布局 POP引自广告术语，就是指页面布局像一张宣传海报， 以一张精美图片作为页面的设计中心。常用于时尚类站点， 比如ELLE.com。优点显而易见:漂亮吸引人。缺点就是速 度慢。 在确定好版面布局结构后，继续要做的就是根据内容调 整页面的结构。如页面尺寸选择多大？怎样放置网页的网 页元素？在Dreamweaver中提供了四种主要的方法用于 规划和设计页面：表格、层、框架和CSS+DIV，本章只 介绍前三种方式

4.2实例导入:表格排版网页 XXXXX生物工程公司 乳酸管养品 A 专家的评价 实验报告 专家谈XX乳酸营养素与微量元素的补充 询购买 司简介 同是的三平面的件元是元能 代理中请 锌,钙,都是人体必须的元素,是人体 能必要组成部 多如钙元素,则其他元素如铁,锌的吸收就减少,另外,体内各元素的状态对这些元 类比的和合的,这样它们才可能有效的收和利用,子保持建地成长和 摘目《矿物质营养与斯强乳营养 中华儿童保健杂志将安会副主任主满 姚凯南高级射授 p③根 生物工程公司 地址:x 电话:029-8416557 网址http://rnw.abe.cos

4.2 实例导入：表格排版网页

4.2实例导入:表格排版网页 在网页设计中,表格以简洁明了和高效快捷的方式将网 页设计的各种元素有序地组织在一起,使整个网页井井有 条而不至于杂乱无章 【例41】某生物工程公司网站,在本实例中,主要涉及 以下知识点: 页面采用表格进行整体布局,表格划分为若干个单元格 在单元格内填充网页元素,实现网页的布局; 通过定义网页的背景图片达到美化网页的效果 该页的栏目导航采用“导航条”效果

4.2 实例导入：表格排版网页 在网页设计中，表格以简洁明了和高效快捷的方式将网 页设计的各种元素有序地组织在一起，使整个网页井井有 条而不至于杂乱无章。 【例4.1】某生物工程公司网站，在本实例中，主要涉及 以下知识点： ❖ 页面采用表格进行整体布局，表格划分为若干个单元格， 在单元格内填充网页元素，实现网页的布局； ❖ 通过定义网页的背景图片达到美化网页的效果； ❖ 该页的栏目导航采用 “导航条”效果

4.3使用表格排版 令表格是由一些被线条分开的单元格组成。线条即表格的边 框,被边框分开的区域被称为单元格,数据、文字、图像 等网页元素均可根据需要放置在相应的单元格中。如图所 刁。 ◆在网页中使用表格一般有两种情况:一种是在需要组织数 据显示时用;另一种是在布局网页时用。当表格被用作布 局时,需要对表格的属性进行设置

4.3 使用表格排版 ❖ 表格是由一些被线条分开的单元格组成。线条即表格的边 框，被边框分开的区域被称为单元格，数据、文字、图像 等网页元素均可根据需要放置在相应的单元格中。如图所 示。 ❖ 在网页中使用表格一般有两种情况：一种是在需要组织数 据显示时用；另一种是在布局网页时用。当表格被用作布 局时，需要对表格的属性进行设置

列 单元格边距 单元格 网页元素 边框粗细 单元格间距

4.3.1插入表格和编辑表格 表格在网页中通常存在两种形式:一种是独立的形式存 在,二是以嵌套的形式存在 1、插入独立表格 插入表格一般有两种方法 方法一:单击“插入”栏|“常用”选项|“表格”按 钮; 方法二:选择“插入”菜单「“表格”命令;弹出“表格 对话框

4.3.1 插入表格和编辑表格 表格在网页中通常存在两种形式：一种是独立的形式存 在，二是以嵌套的形式存在。 1、插入独立表格 ❖ 插入表格一般有两种方法 方法一：单击“插入”栏｜“常用”选项｜“表格”按 钮； 方法二：选择“插入”菜单|“表格”命令；弹出“表格” 对话框

4.3.1插入表格和编辑表格 表格 表格大小 行数:国 列数:3 表格宽度:200 pixels 边框粗细:4像素 单元格边距 单元格间距 页眉 无 左 顶部 两者 辅助功能 标题 对齐标题: default 摘要 匚帮助 匚确定匚取消

4.3.1 插入表格和编辑表格