资源简介

(共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”

展开更多......

收起↑