桂科版（2008）八年级信息技术下册 任务三布局网页结构 课件（21张PPT）

(共21张PPT)
任务三布局网页结构
学习目标
一、掌握网页结构的布局方法；
二、学会设计多种形式的网页结构：
网页版面布局结构规划
网站是由多个网页组成，每个网页围绕主题展示信息。在网页设
计中，每个页面的色调、版面结构、设计风格都体现着该网站的风
格，因为在网站规划过程中，除对主题、内容进行规划外，还要对网
页版面布局结构进行规划。
案例分析
为了提高同学们保护环境，保护珍稀动物的意识，学校科学技术
协会组织了一次网页作品比赛，比赛的主题是“保护珍稀动物，关爱
生命”。
案例分析
C.REOf SP03 AE EIlAS Le B3E POiQ0 CN0
OUR WORKFLOW
海·
SERVICES
水平行结构网页设计
0
垂直列结构网页设计
网页结构类别
般来说，网页的结构有上下结构、左右结构以及既有上下结构
又有左右结构的混合结构。
网页可分为三个部分：上部分是横幅标题，左边是登录等信息
框，右边是展示主要内容的表格区域，即上、左、右结构；而有些页
面分为五个部分：上部分是横幅标题，下部分为4列（从左到右依次为
常见信息框、动物图片、对应图片文字说明、导航链接图标)
网页结构类别
网页结构类别
在网页结构布局中，有的仅是简单的图文混排结构，在文字与图
片混排时，常用左、中、右对齐方式，或者用“图片”工具中的“绝
对定位”，将文字与图片混合排版。这样排列的网页，在浏览时并不
是很整齐，有时会发生与图片的移位现象。为此，人们常用表格和框
架来布局网页的结构。
运用表格布局网页结格
由于表格具有整齐统一、
直观明了的优点，在复杂的网页设计
中，人们不仅用表格显示数据，还通过表格对网页进行布局，这样可
以有效地控制文字、图片等对象位置，使网页的布局既紧凑又整齐美
观。
制作表格，可以利用表格的按钮工具、插入表格命令、绘制表格
的工具及布局表格与单元格命令来实现。
做中学
完成网页结构布局任务：
(1)、启动FrontPage2003,新建一个空白网页。
(2)、执行“表格”（A)“-》”“插入”命令，弹出“表格”属
性对话框，设置行数为1、列数为3，表格边框线的粗细为0，表格指
定宽度为100%。
(3)、在该行下方再插入一个1行6列的表格，设置表格边框线的粗
细为1，颜色为蓝色。
做中学
(4)、在该行下方单击“表格(A)”下布局表格和单元格命令，弹
出“布局表格和单元格”对话框，选择一种布局结构(2行2列)，合
并第二行单元格，用嵌入的方法在该单元格中再插入一个1行2列的表
格。
(5)、在网页最后插入1行1列的表格，设置表格边框线的粗细为0，
网页布局完成。
(6)、保存网页，设置文件名为"jiegou.htm”