网页布局分类—“国”字型
网页布局分类——“国”字型
网页布局分类
2、拐角型：这种结构与上一种其实只是形式上 的区别，其实是很相近的，上面是标题及广告 横幅，接下来的左侧是一窄列链接等，右列是 很宽的正文，下面也是一些网站的辅助信息。 在这种类型中，一种很常见的类型是最上面是 标题及广告，左侧是导航链接 。
五、设置表格属性
◇在边距框中，指定单元格的内容与单元格边框 间的像素数。 ◇在间距框中，指定单元格之间的像素数。 ◇在边框框中指定以像素数表示的表格边框。大 多数浏览器显示表格边框都使用三维线条。如 果使用表格进行页面布局，指定边框值为 0。 当边框设为 0 时要查看单元格和表格的边框， 选择 查看→ 可视化助理→表格边框。 ◇使用边框颜色框为整个表格选择边框颜色。 ◇使用背景颜色选项为表格选择背景色。 ◇使用表格图象框来为表格选择背景图像。
二、选择表格
选取一个或多个单元格
二、选择表格
4）要选取不相邻单元格，执行下列操作之一： ◇按住 Control键点击表格内部来增加单元格、 行或列到选集中。 ◇选取表格内多个单元格，然后按住 Contrl键 并点击单元格，行或列取消对某些单元格的 选取。
三、修改表格
1）调整表格的大小，可采用以下方法之一： ◇选择表格，表格周围出现选择柄，拖动选择 柄。 ◇选择表格，在属性面板的宽或高框中输入修 改值。
◇标准模式：可进行“插入表格”、“合并 单元格”、“拆分单元格”等操作。 无边框的表格以虚线形式来显示，不容易选 择虚线表格中的单元格及其中的内容。
◇扩展模式：可进行“插入表格”、“合并 单元格”、“拆分单元格”等操作。 表格以双线形式显示，方便对表格的操作。
◇布局模式：无法进行“插入表格”、“合并 单元格”、“拆分单元格”等操作。 只能将内容插入到布局单元格中。
五、设置表格属性
当选取了整个表格后属性面板会显示表格的 属性。 “表格”属性面板中显示了插入表 格的所有特性，通过修改面板中的参数可快 速地编辑表格外观。 ◇在表格名框中输入表格名字 ◇在行和列框中指定表格行数和列数。 ◇在宽和高框中，指定表格宽度和高度，可 以以像素数表示，也可以用占浏览器窗口的 百分比表示。通常情况下不必设定表格高度。
一、创建表格
4）完成对话框后，单击“确定”按钮。 例：插入一个5行5列的表格，宽度为780像素， 边框为０。
二、选择表格
2、选取表格元素 1）选取整个表格，执行下列操作之一： ◇点击表格左上角，或点击顶边或底边任意位 臵。 ◇单击表格并选择修改→表格→选择表格。 ◇单击表格打开表格标题菜单→选择表格。 ◇将插入点放到表格内任意位臵，选取文档窗 口左下角标记选择器中的 <table> 标记。
六、套用表格模板
七、表格中插入对象
选择相应的单位格 和在网页上插入操作一致。 1、插入文字 2、插入图像 3、超链接
八、表格的HTML描述
1、定义表格的基本语法 在 HTML 中 ， 表 格 的 建 立 将 运 用 <table> 、 <tr>、<th>、<td>四个标记完成。
1）表格标记<table></table> <table>标记用于定义一个表格元素，一个表格 元 素 ， 是 由 数 个 横 行 （ <tr> ） 、 单 元 格 （ <td> ）与表头单元格（ <th> ）子元素所组 成。 2）表行标记<tr></tr> <tr> 标记用于定义表格的一行，在一组 <tr> 标 记内可建立一行表格，也可以包含数组由 <td>或<th>标记所定义的单元格。
3.2 表格的应用
在Dreamweaver中，存在3种表格视图模式： 标准模式、扩展模式和布局模式。 ◇标准模式：基本按浏览器预览结果来显示网页， 在该模式下可按“所见即所得”的方式编辑网 页。 ◇扩展模式：表格被强制以双线形式显示，方便 对表格的操作。 ◇布局模式：使用布局表格和布局单元格来对页 面进行布局。
二、选择表格
选取整个表格
选取整个表格
二、选择表格
选取整个表格
二、选择表格
2）选取行或列，执行下列操作之一： ◇将鼠标指针指向行的左边缘或者列的顶部。 当选取箭头出现时点击。 ◇点击一个单元格，横向或纵向拖动可以选取 多个行或列。 ◇将插入点放到表格内，选取文档窗口左下角 标记选择器中的 <tr> 标记。
网页布局分类
1、“国”字型： 也可以称为“同”字型，是一些大型网站 所喜欢的类型，即最上面是网站的标题以及横 幅广告条，接下来就是网站的主要内容，左右 分列一些两小条内容，中间是主要部分，与左 右一起罗列到底，最下面是网站的一些基本信 息、联系方式、版权声明等。这种结构是我们 在网上见到的差不多最多的一种结构类型。
三、修改表格
4）添加行或列 ◇单击一个单元格。 ◇选择“修改”→“表格”→“插入行”或 “插入列”。
添加行或列
三、修改表格
5）删除行或列 ◇选择一行或列 ◇选择“编辑”→“清除”或按 Delete 键。
三、修改表格
6） 拆分单元格 表格中每一行中的单元格列数可能不等，这时 就可根据需要使用拆分命令把一个单元格变 为几个单元格。 ◇单击单元格 ◇在属性面板上，单击“拆分单元格”按钮 ， 显示对话框 ◇指定将单元格拆分成行还是列；设臵拆分的 行数或列数 ◇单击“确定”。
网页布局分类——左右框架型
网页布局分类
5、上下框架型：与上面类似，区别仅仅在于是 一种上下分为两页的框架。
网页布局分类
6、综合框架型：上页两种结构的结合，相对复 杂的一种框架结构，较为常见的是类似于“拐 角型”结构的，只是采用了框架结构。
网页布局分类
7、封面型：这种类型基本上是出现在一些网站 的首页，大部分为一些精美的平面设计结合一 些小的动画，放上几个简单的链接或者仅是一 个“进入”的链接甚至直接在首页的图片上做 链接而没有任何提示。这种类型大部分出现在 企业网站和个人主页，如果说处理的好，会给 人带来赏心悦目的感觉。
表格属性面板
五、设置表格属性
◇使用对齐指定表格与同一段落中其它的元素的 排列方式，如文本或图像。左对齐，右对齐， 居中对齐。 ◇使用清除行高和清除列宽按钮将的表格行高和 列宽设定值删除。 ◇使用将表格宽度转化成象素按钮可以将表格宽 度从以占浏览器窗口百分比的表示转成用像素 表示。 ◇使用将表格宽度转化成百分比按钮可以将表 格宽度从用像素表示转换成用占浏览器窗口百 分比来表示 。
拐角型
网页布局分类
3、标题正文型：这种类型即最上面是标题或类 似的一些东西，下面是正文，比如一些文章页 面或注册页面等就是这种类。
标题正文型
网页布局分类
4、左右框架型：这是一种左右为分别两页的框 架结构，一般左面是导航链接，有时最上面会 有一个小的标题或标致，右面是正文。我们见 到的大部分的大型论坛都是这种结构的，有一 些企业网站也喜欢采用。这种类型结构非常清 晰，一目了然。
第三章
网页的排版和布局
4学时
教学要求
了解网页布局的概念及实现方式 掌握表格的在网页中的应用及表格属性的 设臵 掌握布局表格的应用 掌握框架的特点和制作方法 掌握层的操作方法 熟练运用表格、层及框架进行网页的布局

第三章
网页的排版和布局
3.1 页面布局概述 3.2 表格的应用 3.3 布局表格 3.4 层及层布局的应用 3.5 建立框架网页
常见的网页布局
页面构成
页面尺寸： 分辨率 尺寸 800*600 780*428 1024*768 1007*600 (水平方向一般不扩展， 垂直方向扩展一般不 超过3屏尺寸) 页头区： Logo和Banner 导航栏： 内容区： 页脚区：
3.2 表格的应用
表格通常用于组织数据，此外表格也是 进行网页布局时最常用的工具。表格为 网页设计者提供了在页面中增加垂直和 水平结构的简洁方法。使用表格可以在 页面上排列数据与图像，在页面上设计 栏目等。 表格由行、列和单元格构成，单元格是 用于放臵数据和图像的空 Flash 型：其实这与封面型结构是类似的， 只是这种类型采用了目前非常游戏行的 Flash ， 与封面型不同的是，由于 Flash 强大的功能， 页面所表达的信息更丰富，其视觉效果及听觉 效果如果处理得当，绝不差于传统的多媒体。
网页布局分类
9、变化型：即上面几种类型的结合与变化。
六、设置列、行和单元格属性
在编辑网页时除可以设臵整个表格的属性外， 还可以单独设臵表格中某行、列或单元格的 属性。 1）在表格中选取单元格。 2）打开属性面板，点击面板右下角的箭头扩 展按钮来查看全部的属性。
五、设置表格属性
3）从下列选项中选择： ◇使用水平下拉列表来对单元格、列或行的内 容设臵水平对齐方式。 ◇使用垂直下拉列表来对单元格、列或行的内 容设臵垂直对齐方式。 ◇在宽和高框中以像素为单位指定选取单元格 的宽度和高度。如果要使用百分比表示，设 定值后边要跟上百分比符号（%）。
3.2.1 表格操作
一、创建表格 1、插入表格 插入表格方法： 1）在“文档”窗口的“设计”视图中，将插入 点放在需要表格出现的位臵。 2）执行下列操作之一，出现“表格”对话框。 ◇选择“插入”菜单→“表格”。 ◇在“插入”工具栏的“常用”类别中，单击 “表格”按钮。
“表格”对话框
一、创建表格
教学案例
§3.1 网页布局概述
网页布局指的是对网页上所有元素进行定 位，通过文字、图形等元素的空间组合，表达出 和谐与美，使浏览者有一个流畅的视觉体验。 网页布局常使用的方式有表格、框架、层 和CSS。 网页布局大致可分为“国”字型、拐角型、 标题正文型、左右框架型、上下框架型、综合框 架型、封面型、Flash型、变化型等，下面分别 论述。