师：同学们好，欢迎来到广州信息技术课堂，今天我们一起来学习九年级信息技术第二章第三节的内容——用表格布局网页。Dreamweaver 是一款网页制作软件，同时也是一款多媒体集成软件，它与我们使用过的演示文稿类多媒体集成软件有什么不同呢？演示文稿类软件在处理多媒体元素时，会将其看作一个个的层来处理，层与层之间可以重叠；而 Dreamweaver 在处理多媒体元素时采用平面占位法，所以使用 Dreamweaver 插入多媒体元素时，需要先规划好媒体元素的位置，再添加媒体元素。大家看广州市教育研究院的主页，就有明显的占位规划痕迹。你们是不是也想做出这样精美的网页？下面我们来看一下今天的学习目标。
当站点设定后，很多同学对网站内容已经有各种各样的设想，急着动手往网页里加图像、文字等素材。其实在着手制作网页时，我们更多要考虑网页总体风格和布局，这样做出来的网站才会风格统一而不单调，内容丰富而不凌乱。Dreamweaver 中的表格是一种特殊元素，不但可以用于放置各种数据，还可以作为页面布局元素使用。今天我们要学习的就是用 Dreamweaver 的表格布局网页。下面我们先来看看这一节的学习目标：一、了解目前常见的网页版式；二、学会设计个性化网页版式的基本方法；三、掌握添加各种网页元素的方法。
为了更好地设计网页，我们先来归纳一下常见网页都有哪些内容。一般网页的顶部有网站徽标、导航栏和横幅广告，有些网站会将导航菜单放置在网页左侧。通常网页的主要内容会放在中央显眼位置，我们称其为主体内容。几乎所有网页的底部都会有版权信息和联系方式。通过上面的归纳，我们知道网页的内容一般包含以下模块：一、网站徽标 + 导航栏 + 横幅广告；二、导航菜单 + 其他内容；三、主体内容；四、版权信息 + 联系方式 + 其他内容；五、广告和其他内容。常见的网页版式基本上都是由这些模块组合而成的。下面老师为大家逐个介绍。像中华人民共和国教育部的网页，有网站徽标、导航栏模块、主体内容模块和版权信息模块，由上而下排列，形似中文的“三”字，这种版式我们称为“三”字形版式。像海珠区人民政府的网页，由网站徽标模块、导航菜单模块和主体内容模块组成，形同“T”字型版式，也叫拐角型版式。中山大学校报的网页顶部为网站徽标模块，中部左侧为主体内容模块，中部中央为导航菜单模块，中部右侧为广告模块，形成了类似于中文“同”字的结构。还有一些网站的首页为了给浏览者带来强烈的视觉冲击，用一张大的精美设计的海报或照片作为页面背景，并且放置很少其他内容，我们称之为 POP 型版式。POP 本是指商业销售中的一种店头促销工具，这里引申为一种吸引浏览者来浏览的广告工具。有的网站首页甚至用动感视频来吸引浏览者，如清华大学网站的首页。当然，使用上述几个模块，通过不同组合还能变化出更多版式。同学们不妨在课后自己设计一下。网页的精彩与否，不仅在于网页的色彩搭配、文字变化、图像处理，还在于网页的布局。网页布局是制作网页的重要环节，它包括对页面中各版块的位置、大小、间距以及叠加关系等方面的规划。制作人员是如何规划网页结构的呢？下面我们一起来看一个例子。如图，制作人员根据客户要求，用不同的色块来代表徽标、图像、文字和浮动导航栏，并按比例绘制在平面图上，简洁明了地展示了网页的基本结构和图文比例，在用户满意后，再使用表格对网页进行规划，向表格内添加网页元素，完成网页制作。下面我们以广州骑楼为主题，来学习一下如何用表格设计网页，请同学们认真观看以下视频。
设计网页版式，广州骑楼网站的主页 index.html 效果图如图所示。如果去掉里面的内容、图像等信息，可以看到它的布局结构是由一个简单的两行两列表格构建的，如图所示。接下来我们就利用表格来设计它的布局。按以下步骤插入表格：单击菜单栏中的“插入”按钮，选择“表格”选项，进入表格属性窗口，在行数框内输入“2”，列数框内输入“2”，表格宽度框内输入“800 像素”，边框粗细框内输入“0”，按“确定”按钮，生成一个两行两列的表格。在表格的选定状态下，单击表格属性面板中的“对齐”按钮，选择“居中对齐”选项。
按以下步骤合并单元格：单击选中表格首列，单击表格属性面板中的“合并单元格”按钮，将两个单元格合并为一个大单元格。
Dreamweaver 中的表格是一种特殊元素，不但可以用于放置各种数据，还可以作为页面布局元素使用。表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使页面在形式上丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行网页布局的最大好处是，即使浏览者改变计算机的分辨率，也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。下面我们一起来学习如何在表格中添加网页元素。按以下步骤添加文字：在表格第一行第 2 列单元格内输入标题文字“广州骑楼”。拖黑标题文字，在属性面板中的“大小”一栏中输入“90”，然后回车。单击表格框，调整表格第一列和第二列成为相同宽度。拖黑标题文字，单击属性面板中的“背景颜色”按钮，设定颜色值为“#330000”。单击属性面板中的“字体格式加粗”按钮，让标题字体加粗。单击属性面板中的“水平”按钮，选择“居中对齐”选项。单击属性面板中的“垂直”按钮，选择“居中”选项。按以下步骤添加图片：单击表格第 2 行第 2 列单元格内，单击菜单栏中的“插入记录”按钮，选择“图像”选项。在“选择图像源文件”对话框中，选择“骑楼.jpg”文件，单击“确定”按钮，导入图片。选中网页中插入的图像，在图像属性面板的“宽”框中输入“550”，“高”框中输入“350”，“水平边距”框中输入“30”，“对齐”下拉列表框选择“居中”。表格作为页面布局元素，还可以在其中嵌套新表格，用于布局或放置各种数据，使整个页面显示整齐简便。按以下步骤添加嵌套表格：单击表格第一行第一列的合并单元格，单击属性面板中的“背景颜色”按钮，将颜色值设置为“#660000”，设定该合并单元格的背景色。单击菜单栏中的“插入记录”按钮，选择“表格”选项，进入表格属性窗口。在表格属性窗口中的“行数”框中输入“6”，“列数”框中输入“1”，“表格宽度”框中输入“1”，按“确定”键。在嵌套表格的选定状态下，单击属性面板中的“对齐”按钮，在下拉列表框中选择“居中对齐”选项。在属性面板中的“宽”框中输入“200”，“边框”中输入“1”。分别在嵌套表格每一行输入“目录”“首页”“发展历程”“风格样式”“辐射影响”“身边骑楼”等文本作为导航栏标题。依据上述关于文本修饰的方法，修改每个标题的字体、字号、对齐方式。通过拖动嵌套表格周边的控制点，使表格的高度配合标题文字。