网页设计与制作第8章.ppt

* 网页的布局设计 第8章 本章要点： ◆ 版式设计 ◆ 布局的运用 ◆ 表格排版 ◆ 图层排版 ◆ 表格与图层的相互转换 ◆ 图文混合排版 8.1 网页的版式设计 教学进程 ● 使用表格 使用表格进行网页布局时不方便，例如不能对网页内容精确定位，如果想对网页的版块进行位置调整时，表格并不能随心所欲地进行任意移动。 ● 使用布局 在“布局”模式中，我们可以使用表格作为基础结构来设计页面，同时可以避免使用传统的方法创建基于表格的设计时，经常会出现的一些问题。 ● 常用版式 精美的网站都采用了优秀的版式设计。设计一个网页，先要规划好版式。常用的版式有分栏式结构，比如二分栏、三分栏、四分栏。 8.1 网页的版式设计 教学进程 ● 三分栏版式 8.2??布局的应用 8.2.1??绘制布局表格 教学进程 技巧：如果要绘制多个布局表格，不必重复选择【布局表格】按 钮，只要在绘制布局表格时按住Ctrl键，便可以连续绘制出多个 布局表格。 8.2??布局的应用 8.2.2??绘制布局单元格 教学进程 技巧：在布局表格中绘制布局单元格时会出现一条明亮的网格线， 这些线可以帮助你将新单元格和以前的单元格对齐。 8.2.3 嵌套布局表格 与布局单元格不同，布局表格能够嵌套使用，可以将一个布局表格绘制在另一个布局表格中，而且对外部表格所进行的更改不会影响嵌套表格中的单元格。还可以插入多级嵌套表格，但嵌套布局表格的大小不能超过包含它的表格。 教学进程 嵌套布局表格 8.2.3 嵌套布局表格 绘制顶部布局表格，用来放置Logo和Banner 教学进程 步骤一 8.2.3 嵌套布局表格 绘制导航栏目的布局表格和分隔表格 教学进程 步骤二 8.2.3 嵌套布局表格 绘制页面的主体部分：左侧导航和网页内容的布局表格 教学进程 步骤三 8.2.3 嵌套布局表格 绘制页面底部的友情链接和版权信息的布局表格 教学进程 步骤四 8.2.4 调整布局单元格和表格 教学进程 为了调整网页的布局，我们需要对布局单元格和嵌套布局表格进行移动并调整它们的大小，但是不能使它们重叠。 移动 调节大小 8.3 层的应用 教学进程 8.3.1 绘制层 ● 绘制层 8.3 层的应用 教学进程 8.3.2 选择、移动层 ● 选择层 ● 移动层 8.3.3 调整层的大小 教学进程 ● 直接调整 ● 精确调整 ● 调整多个层 8.3.4??层的对齐 教学进程 在用层进行布局时，往往手动绘制的层并不一定都能很好地对齐，使用对齐层命令就可按最后一个选定层的边框来对齐一个或多个层。 层的对齐 8.4 层和表格的相互转换 教学进程 绘制放置Logo和Banner的层 插入放置Logo的层 插入放置Banner的层 8.4 层和表格的相互转换 教学进程 2. 绘制导航栏目的层和分隔层 8.4 层和表格的相互转换 教学进程 3.绘制页面的主体部分：左侧导航和网页内容的层 8.4 层和表格的相互转换 教学进程 4.绘制页面底部友情链接和版权信息的层 这部分的制作非常简单，继续在下面绘制一个【宽】为750像素，【高】为80像素的层，用来放置友情链接，最后再绘制一个【宽】为750像素，【高】为26像素的层，用来放置版权信息。 *