使用表格布局网页教案

第4章 使用表格布局网页 表格基本操作 表格高级操作

4.1 表格基本操作表格(Table)是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行(在HTML语言中 以<tr>标签开始，</tr>标签结束),垂直的多个 单元格称为列(以<td>标签开始，</td>标签结 束),行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。此处表示未 明确设置单 元格宽度 此处显示了表格 的宽度。如果只 显示一个“▼” 符号，表示未明 确设置表格宽度

列

行 单元格

4.1.1 创建表格Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。

4.1.2 选择表格和单元格1.选择表格 将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键。

在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“

常见页面布局

页面布局常受到硬件条件（显示器的大小和分辨率）和技术的限制，所以归纳起来大致有六种类型： （1）“同”字型布局：特点，页面顶部水平放置主导航栏，其下分为左中右三栏，左边放置内容导航栏、二级导航栏热点内容等；右边放置站点图片链接、动画广告、搜索引擎、友情链接、注册登录信息；中间为主要内容板块。如韩国的“happybean.naver.com” 其优点是：结构清晰直观、平稳均匀’、次分明。缺点：过于呆板僵化、单点乏味。要注重合理色彩搭配。 （2）“匡”字型布局：特点，把同字型布局右边内容移到底部而成，它的结构特点和和优缺点也相同。 （3）“吕”字型布局：特点，把页面分成上下两大块，其中每一块都有同字型结构的特点。如网易新闻网。

（4）左右对称布局：顶部不设页眉和导航栏，左边设置导航，右边放主要内容。特点结构简单适合内容较少的页面。

（5）II字型布局：特点顶部设置站标和导航栏；下边分为左右两部分左窄右宽。左边放置二级导航栏、热点内容链接、登陆栏、友情链接等、右边分为主要内容区。

（6）自由式布局：打破常规的规矩，尽情的挥洒极具创意自由灵活。优点是：漂亮现代轻松明快极具美感给人以美的享受。缺点是；下载速度相对较慢，文字信息量少。 dr

常见页面布局

页面布局常受到硬件条件（显示器的大小和分辨率）和技术的限制，所以归纳起来大致有六种类型： （1）“同”字型布局：特点，页面顶部水平放置主导航栏，其下分为左中右三栏，左边放置内容导航栏、二级导航栏热点内容等；右边放置站点图片链接、动画广告、搜索引擎、友情链接、注册登录信息；中间为主要内容板块。如韩国的“happybean.naver.com” 其优点是：结构清晰直观、平稳均匀’、次分明。缺点：过于呆板僵化、单点乏味。要注重合理色彩搭配。 （2）“匡”字型布局：特点，把同字型布局右边内容移到底部而成，它的结构特点和和优缺点也相同。 （3）“吕”字型布局：特点，把页面分成上下两大块，其中每一块都有同字型结构的特点。如网易新闻网。

（4）左右对称布局：顶部不设页眉和导航栏，左边设置导航，右边放主要内容。特点结构简单适合内容较少的页面。

（5）II字型布局：特点顶部设置站标和导航栏；下边分为左右两部分左窄右宽。左边放置二级导航栏、热点内容链接、登陆栏、友情链接等、右边分为主要内容区。

（6）自由式布局：打破常规的规矩，尽情的挥洒极具创意自由灵活。优点是：漂亮现代轻松明快极具美感给人以美的享受。缺点是；下载速度相对较慢，文字信息量少。 dr

信息技术（八年级）

课 题 课 型 第十二课 用表格为网页布局 任务驱动型 总课时 教学课时 1 第1课时 知识目标：用表格排版主页使其达到页面整洁有序； 技能目标：在网页中插入表格并更改表格的属性； 教学目标 情感目标：用表格排版网页解决了网页版面杂乱的问题，提示同学们凡事要有计划，做事要遵守规则，促进其做事的信心。 教学重点 教学难点 插入表格和更改表格属性 让学生灵活掌握排列表格和设置表格属性的方法 所需的资源和环境 常规资源 1、教学环境的准备： （1）多媒体网络教室：学生计算机上安装IE6.0，能上因特网； （2）教师机上准备好学生上交作业的共享文件夹。 教学环境 2、 教学工具的准备： （1）电子教室； （2）学生任务单 教 学 设 计 新课导入： “凡事预则立，不预则废。”预：指事先的计划和准备；制作网页前也想要进行规划，引出本课主题——用表格为网页布局。 正式授课： 本课的主要任务，解决三个问题 为什么要规划页面布局？ 为什么要依靠表格？ 如何运用表格为网页布局？ （一）为什么要规划页面布局 介绍网页的版面布局：主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应

中学Dreamweaver教案：表格布局与设计

2009年5月20日

中学Dreamweaver教案：表格布局与设计

教学课题:表格布局及设计

教学目标：

1、知识与技能：

（1）能够掌握Dreamweaver中表格的基本操作方法；

（2）能够独立完成简单表格实例的实际应用；

（3）初步掌握使用表格进行网页布局的方法；

（4）掌握表格对调特殊的设置方法；

（5）熟悉掌握使用网络硬盘保存网页的方法；

（5）概括、总结表格使用中要注意的事项。

2、过程与方法

（1）能够插入指定行、列数的表格，并对表格格式按要求进行修改；

（2）能够在表格中插入如指定对象，并对其做相应调整；

（3）能够修改网页基本属性。

3、情感态度与价值观

（1）通过本课简单表格对象的操作，增强学生学习网页制作的信心；

（2）通过独立完成作品，培养学生应用信息技术展现个性空间的理念；

（4）独立绘制出有规则、组织合理的表格网页，使同学产生学生知识的渴求，，制作简

单的表格对象，使同学们在枯燥繁重的学习生活中体验到一些学习的乐趣，增加学生们对知识的渴求，培养良好的学习情趣；

教学策略与方法：

1、问题激发策略：使用多媒体网络教室全屏演示系统全屏控制，提出操作环节中遇到的问题中，让同学们在自主实践环节，自己运用已有的知识去处

网页布局设计精彩作品欣赏

在这篇文章中，我们可以欣赏到一些实用的Photoshop网页布局作品，感受视觉的美感，从中吸取灵感，提升技术水平。

1. 企业WordPress博客布局

创暗调，整洁和实用的企业wordpress博客布局 2. 旧纸张风格

旧纸张风格装饰的网页布局. 3. 制作 ‘Clean Grunge’ 博客布局

既要Clean, 又要Grunge。 4. 创建一个时尚，高端的Web设计

时尚、高端和经典的Web布局

5. Clean Website Layout

非常简单整洁的网页布局。

6. How to Create a Grunge Web Design in Photoshop

Grunge风格的网页布局

7. Photoshop Paper Texture Grunge Design

纸纹风格的布局

8. How a Simple Layout Can Be Mixed ‘n’ Matched

简单的网页布局

9. Five Looks, One Layout

10. Design a Cartoon Grunge Web site Layout

11. Professional Magazine Web Layout

杂志风格的网页布局

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。

因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。 首先观察Dreamweaver的“插入”面板中的“布局”页。

在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。

要切换回标准模式，只要单击按钮就可以了。

进入布局视图

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。

因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。 首先观察Dreamweaver的“插入”面板中的“布局”页。

在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。

要切换回标准模式，只要单击按钮就可以了。

进入布局视图

网页布局设计精彩作品欣赏

在这篇文章中，我们可以欣赏到一些实用的Photoshop网页布局作品，感受视觉的美感，从中吸取灵感，提升技术水平。

1. 企业WordPress博客布局

创暗调，整洁和实用的企业wordpress博客布局 2. 旧纸张风格

旧纸张风格装饰的网页布局. 3. 制作 ‘Clean Grunge’ 博客布局

既要Clean, 又要Grunge。 4. 创建一个时尚，高端的Web设计

时尚、高端和经典的Web布局

5. Clean Website Layout

非常简单整洁的网页布局。

6. How to Create a Grunge Web Design in Photoshop

Grunge风格的网页布局

7. Photoshop Paper Texture Grunge Design

纸纹风格的布局

8. How a Simple Layout Can Be Mixed ‘n’ Matched

简单的网页布局

9. Five Looks, One Layout

10. Design a Cartoon Grunge Web site Layout

11. Professional Magazine Web Layout

杂志风格的网页布局