上次实验分析

网站管理上的问题 利用站点管理文件 P151图4-2

插入菜单的显示模式 菜单模式

插入菜单的显示模式 制表符模式

站点的导出

站点的导出

站点的导出

站点的导出

站点的导出

站点的导出

站点的导出

站点的导出

站点的删除

站点的删除

站点的导入

站点的导入

项目与编号

项目与编号

项目与编号

项目与编号

项目与编号

在输入中的问题 导入WORD文本

在输入中的问题 导入WORD文本

在输入中的问题 导入的WORD文本中有图片

在输入中的问题 P160 导入的WORD文本中有图片

在输入中的问题 导入的WORD文本中有图片

表格中的问题

表格中的问题

本章重点：表格的基本操作、应用表格布局（标准视图下）、布局表格视图的使用，在表格及单元格中输入各种网页元素的方法，表格格式化等操作方法。 第三章　 3.1 表格布局页面 　　本章重点：表格的基本操作、应用表格布局（标准视图下）、布局表格视图的使用，在表格及单元格中输入各种网页元素的方法，表格格式化等操作方法。

3.1 表格布局页面 3.1.1 创建网站相册初识表格 3.1.2 表格的基本操作 3.1.3 网页的页面布局 3.1　表格布局页面 3.1.1  创建网站相册初识表格   3.1.2  表格的基本操作 3.1.3  网页的页面布局 3.1.4 使用表格的其他视图 3.1.5 应用表格布局页面 3.1.6 实战演练－－我的第一页 附：　制作流行表格

3.1.1   创建网站相册初识表格   3.1.1.1 案例综述 　　　使用Dreamweaver 8中提供的【创建网站相册】命令，自动生成足球明星页photo.htm。从中使读者初步认识表格的基本操作方法及其作用。

3.1.1   创建网站相册初识表格   3.1.1.2 案例分析 　　　使用【创建网站相册】命令创建的Photo.htm页是采用表格布局，将图片的缩略图排列在网页中的。 表格的修改和美化 表格的插入 添加或删除行列 拆分合并单元格等基本操作

3.1.1 创建网站相册初识表格 3.1.1.3 实现步骤 一、创建网站像册 方法： 3、在【创建网站相册】对话框中输入相应的参数，即可。 3.1.1   创建网站相册初识表格   3.1.1.3 实现步骤 一、创建网站像册 方法： 1、将需制作相册的图片放在源图像文件夹中，同时建立一个空目标文件夹，用来存放系统生成的图片和文件。 2、执行 “命令|创建网站相册”命令 3、在【创建网站相册】对话框中输入相应的参数，即可。

3.1.1 创建网站相册初识表格 3.1.1.3 实现步骤 方法： 选择“页面属性”，可以进行文字、背景、颜色，以及表格的一些修改。 3.1.1   创建网站相册初识表格   3.1.1.3 实现步骤 二、网站相册的修改 方法： 选择“页面属性”，可以进行文字、背景、颜色，以及表格的一些修改。 三、相册表格的美化 选择“命令|格式化表格”命令。

3.1.2  表格的基本操作 3.1.2.1 插入表格 　　　【插入】｜【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮

3.1.2  表格的基本操作 理解单元格，表格，间距，填充，边框。 居中｜插入一行一列表格，各项值如图：

3.1.2  表格的基本操作 　理解表格、单元格：

3.1.2  表格的基本操作 　理解表格边框、单元格边框、间距：

3.1.2  表格的基本操作 理解填充：单元格边框和内容之间的距离就是填充。 为了便于观看填充的效果，在属性面板中，填充输入为30。

3.1.2 表格的基本操作 3.1.2.2 选定表格和单元格 表格包括行、列、单元格3个组成部分 。 1、选定整个表格 2、选定行或列 3.1.2  表格的基本操作 3.1.2.2　选定表格和单元格 表格包括行、列、单元格3个组成部分 。 1、选定整个表格 2、选定行或列 3、选定单元格

3.1.2  表格的基本操作 3.1.2.3　调整表格的大小 1、选定表格→鼠标拖动 。

3.1.2  表格的基本操作 2、调整行和列的宽度 为列设置宽度和高度 鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。

3.1.2  表格的基本操作 3.1.2.4 设置表格和单元格的属性 设置表格属性 设置单元格属性

3.1.2 表格的基本操作 3.1.2.5 添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 3.1.2  表格的基本操作 3.1.2.5 添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 通过【修改】菜单完成增加与删除表格的行和列

3.1.2 表格的基本操作 3.1.2.6 单元格的合并和拆分 1、合并单元格 3.1.2  表格的基本操作 3.1.2.6　单元格的合并和拆分 1、合并单元格 　　　按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。

3.1.2  表格的基本操作 2、拆分单元格 　　　在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。

3.1.2  表格的基本操作 拆分后的效果

3.1.2 表格的基本操作 3.1.2.7 单元格的复制、粘贴、移动和清除 3.1.2  表格的基本操作 3.1.2.7　单元格的复制、粘贴、移动和清除 　　　在设计网页时，可以一次复制、粘贴、移动和清除一个或多个单元格。操作方法如下： 在网页编辑窗口中选中要复制的对象 复制－－按Ctrl+C，或【编辑】｜【复制】命令。 移动－－按Ctrl+X，或【编辑】｜【剪切】]命令。 粘贴－－按Ctrl+V，或【编辑】｜【粘贴】命令。 拖动－－按住Ctrl＋拖，则完成复制操作。直接拖曳可完成对象的操作。 清除－－按Delete，或【编辑】｜【清除】命令。

3.1.2 表格的基本操作 3.1.2.8 表格的嵌套 嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。 3.1.2  表格的基本操作 3.1.2.8 表格的嵌套 嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。 将光标插入当前表格的某个单元格中，然后可选择【插入】｜【表格】命令，或单击【插入】栏的【常用】类型中的【插入表格】按钮

3.1.3 网页的页面布局 3.1.3.1 网页布局类型 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 3.1.3  网页的页面布局 3.1.3.1 网页布局类型 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型

3.1.3  网页的页面布局 3.1.3.2 关于第一屏 一般来讲，在800×600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px×435px.

3.1.3  网页的页面布局 3.1.3.3 有关导航栏的位置 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑

3.1.3 网页的页面布局 3.1.3.4 什么样的布局是最好的 如果内容非常多，就要考虑用“国字型”或拐角型； 3.1.3  网页的页面布局 3.1.3.4 什么样的布局是最好的 如果内容非常多，就要考虑用“国字型”或拐角型； 如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型； 那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活； 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。

3.1.3  网页的页面布局 一、页面的主要内容： LOGO（标志） Banner（横幅） 导航栏 网页内容 版权声明

3.1.3 网页的页面布局 1、页眉区设计 2、导航栏形式 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 3.1.3  网页的页面布局 1、页眉区设计 几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。 LOGO: 167×71 2、导航栏形式 　　　导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 导航栏有： 横排的 竖排的 也有两种都有的。

3.1.3 网页的页面布局 二、网页结构分析 这是一个主页的简单结构，由三个表格组成。 3.1.3  网页的页面布局 二、网页结构分析 这是一个主页的简单结构，由三个表格组成。 第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 第二个表格，放网页内容。 第三个表格，放版权信息。 表格3 表格1 表格2

3.1.3  网页的页面布局 常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：

3.1.3  网页的页面布局 三、表格初始设置 做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。 用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。

3.1.3 网页的页面布局 四、表格布局要领 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 3.1.3  网页的页面布局 四、表格布局要领 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示

3.1.4  使用表格的其他视图 Dreamweaver 8提供了标准视图、扩展视图、布局视图3种视图模式。通常使用的是标准视图，可通过插入栏的“布局”类别，切换到布局视图或扩展视图。 点“布局” 切换到布局视图

3.1.4  使用表格的其他视图 3.1.4.1 扩展视图 　　　扩展视图的主要作用是临时向文档中的所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加容易 。

3.1.4  使用表格的其他视图 3.1.4.2 布局视图 　　　在“布局视图”方式下利用表格进行网页排版设计更为直观方便。通过鼠标自由拖拽就可绘制任意的表格布局，且可自由移动。

3.1.4  使用表格的其他视图 3.1.4.3 创建布局表格和布局单元格 　1、绘制布局表格 　2、绘制布局单元格 　3、移动布局表格和布局单元格

3.1.4 使用表格的其他视图 1、创建布局表格和布局单元格 3.1.4  使用表格的其他视图 1、创建布局表格和布局单元格 当不在布局表格中绘制布局单元格时，会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。 插入栏｜“布局”｜“绘制布局单元格” ，拖动指针以创建布局单元格。 插入栏｜“布局”｜“绘制布局表格”, 拖动指针以创建布局单元格。 绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。 Ctrl＋“绘制布局单元格（或表格）”连续创建布局单元格（或表格）。

3.1.4 使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 3.1.4  使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 调整布局单元格的大小： 选择一个单元格，按住 Ctrl 键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。

3.1.4 使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 3.1.4  使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 调整布局表格的大小：通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。

3.1.4 使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 3.1.4  使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 移动布局单元格: 按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键每次移动 1 个像素。Shift ＋箭头键每次移动10 个像素。

3.1.4 使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 3.1.4  使用表格的其他视图 2、移动布局单元格和表格及调整它们的大小 移动布局表格: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。 将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。

3.1.4  使用表格的其他视图 3.1.4.4　设置布局表格和单元格属性 　1、设置布局表格属性 　2、设置布局单元格的属性

3.1.5 应用表格布局页面―――布局案例 3.1.5.1 案例综述 本例使用表格进行页面布局，从中使读者掌握以下知识要点 3.1.5　应用表格布局页面―――布局案例 3.1.5.1 案例综述 　　本例使用表格进行页面布局，从中使读者掌握以下知识要点 1．  表格在用于页面布局时的属性设置。 2．  表格的嵌套。 3．  表格细线的制作。

3.1.5 应用表格布局页面―――布局案例 3.1.5.2 案例分析 信息区为三个嵌套的表格 其他区均为宽度一致的独立表格 页眉区 导航栏区 3.1.5　应用表格布局页面―――布局案例 3.1.5.2 案例分析 信息区为三个嵌套的表格 其他区均为宽度一致的独立表格 页眉区 导航栏区 左信息区 中信息区 右信息区 版权区

3.1.5 应用表格布局页面―――布局案例 3.1.5.3 实现步骤 一、设计页眉区 T1：3×3表 宽778 页面属性：左、上边距均为0 3.1.5　应用表格布局页面―――布局案例 3.1.5.3 实现步骤 一、设计页眉区 T1：3×3表　宽778 页面属性：左、上边距均为0 可插入固定大小占位符，以方便排版。 加入收藏 联系我们 设为首页 网页广告图像 网站Logo图标 167×71 499×71 默认

3.1.5 应用表格布局页面―――布局案例 二、设计导航栏区 T 2：2×17表 宽778 栏目间的分隔符用｜，也可用其他特殊符号。 3.1.5　应用表格布局页面―――布局案例 二、设计导航栏区 T 2：2×17表　宽778　 栏目间的分隔符用｜，也可用其他特殊符号。 第二行用于间隔。 | 主站首页 站长简介 音乐古堡 BEYOND 星爷专辑 友情链接 给我留言 疯狂下载

3.1.5 应用表格布局页面―――布局案例 三、设计信息区 T3：1×3表 宽778 1.设置左右内容区 3.1.5　应用表格布局页面―――布局案例 三、设计信息区 T3：1×3表　宽778　 1.设置左右内容区 T31：2×1表，宽100%，表格边框为1，白色。 第1格高15，第2格高163，单元格边框为1，绿色。 第1格：背景图像，输入栏目名 第2格：输入栏目的具体内容 复制T31表至左、右内容区。 181 411 156

3.1.5 应用表格布局页面―――布局案例 三、设计信息区 2.设计主内容区 T32：2×3表，宽100%，边框为0，边距为0，间距为0 3.1.5　应用表格布局页面―――布局案例 三、设计信息区 2.设计主内容区 T32：2×3表，宽100%，边框为0，边距为0，间距为0 第一行：设置各单元格背景图像，输入栏目名称 第二行：合并第二行 T321：在第二行插入1×1表，宽100%，边框为1，白色，单元格边框为1，绿色。 拆分T321为2列，第一列输入具体内容，第二列设置132×145的图像占位符。 复制和T32表，更名，并添加内容　 181 411 156

3.1.5 应用表格布局页面―――布局案例 四、设计版权区 T4：2×1表，宽778，边框为0，边距为0，间距为0 第一行：插入水平线 3.1.5　应用表格布局页面―――布局案例 四、设计版权区 T4：2×1表，宽778，边框为0，边距为0，间距为0 第一行：插入水平线 第二行：输入相关版本信息　　 版权所有：Copyright ? 2003-2005 All rights reserved 网页制作：青岛大学软件学院　E-mail:qdgzy@163.com 邮编：266061　建议使用800×600分辨率

3.1.6 实战演练 一、实战演练―――“我的第一页”

3.1.6 实战演练 二、实战要求 用表格布局 插入网页元素 初识CSS样式

附：制作流行表格 1、制作细线框表格： 　　　　实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。

附：制作流行表格 选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜色设置成了黑色。 单元格背景为白色

附：制作流行表格 将表格间距改为1后即做成细线表格

附：制作流行表格 2、制作间隔表格 所谓间隔表格，就是单元格之间存在一定的距离，看上去，每个单元格自成一体。此时要用到前面所讲的嵌套表格。 　　所谓间隔表格，就是单元格之间存在一定的距离，看上去，每个单元格自成一体。此时要用到前面所讲的嵌套表格。 操作方法如下： 插入2×2表格，边框粗细为0，单元格边距为1，单元格间距为4。 选择所有单元格，设置其背景色为“#0000ff”(此为间隔表格的边框色） 在每个单元格内插入1×1表格，宽高皆为100%，边框粗细为0，间距为0。 设置内嵌套表格背景色为白色“#FFFFFF”

实战演练　流行表格制作技巧

只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void>

本节重点：层的创建、选择、编辑、保存等操作方法，层的属性设置，层及嵌套层、层的叠放次序、层的可见性等内容。 第三章 3.2 层的使用 本节重点：层的创建、选择、编辑、保存等操作方法，层的属性设置，层及嵌套层、层的叠放次序、层的可见性等内容。

1 制作层布局页面―――“环游世界” 1.1 实例综述 通过本例的学习，读者可充分体会使用层布局页面的随意性。

插入层→在层中添加内容→精确定位层，控制大小→设置层之间的叠放次序。 1 制作层布局页面―――“环游世界” 1.2 实例分析 不论文字还是图片都是采用层来进行定位的 如何在页面插入层 如何通过控制层的Z轴参数来设置层之间的重叠关系 如何精确定位层等操作方法。 1.3　实现步骤 插入层→在层中添加内容→精确定位层，控制大小→设置层之间的叠放次序。

2 层的基本操作 2.1 创建层 方法： 1、插入法 插入｜布局对象｜层 2、拖放法 拖层图标到编辑区 3、绘制法 2 层的基本操作 2.1 创建层 方法： 1、插入法 插入｜布局对象｜层 2、拖放法 拖层图标到编辑区 3、绘制法 单击层图标后，到编辑区拖动鼠标绘制。

2 层的基本操作 2.2 激活和选中层 方法： 单击层的激活标志，或层内任何地方 将光标置于该层内，然后单击<div>标签。 2 层的基本操作 2.2 激活和选中层 方法： 单击层的激活标志，或层内任何地方 将光标置于该层内，然后单击<div>标签。 单击层边界。 在层面板中单击层。（＋shift可选择多个层）。

2 层的基本操作 2.3 删除层 方法： 当选中一个层后，按Delete键或单击【剪切】按钮，可删除该层。 也可在层面板中删除该层

2 层的基本操作 2.4 调整、移动和对齐层 1、调整层的大小 方法： 2 层的基本操作 2.4　调整、移动和对齐层 1、调整层的大小 方法： 选中需要调整的层，此时在层的边框四周出现8个黑色活动块，用鼠标拖曳某个活动块，即可调整层的大小。 选中需要调整的层，在层的【属性】面板的【宽】和【高】，两个文本框中，输入层的宽度和高度和高度尺寸，可精确调整该层的尺寸。

2 层的基本操作 2.4 调整、移动和对齐层 2、移动层 前提： “防止重叠”未被勾选。 方法： 2 层的基本操作 2.4　调整、移动和对齐层 2、移动层 前提： “防止重叠”未被勾选。 方法： 选定层，出现层激活标志，用鼠标左键拖该标志。 选定层，用键盘方向键移动层。

2 层的基本操作 3、 对齐层 选定多个层，对齐的标准是最后一个选择的层，该层控制点的实心点，而其他为空心点。 修改｜对齐｜对齐下缘。

3 层的属性设置 3.1 设置层的属性 层编号：层的名称。 左和上：距页面或父层的左上角相对位置 宽和高：层的宽度和高度。 3 层的属性设置 3.1 设置层的属性 层编号：层的名称。 左和上：距页面或父层的左上角相对位置 宽和高：层的宽度和高度。 Z轴：层的重叠顺序。 可见性：层的初始显示状况（可见或隐藏） 背景图像、背景颜色： 溢出：确定当层中内容超出设定大小时要采取的行动。 剪辑：定义层的可见区域，并用于将该范围外的内容裁剪掉。

3 层的属性设置 3.2 层面板的使用 选择【窗口】｜【其他】｜【层】命令，或按F2键，可打开【层】面板 。 选定某个层 更改层名 3 层的属性设置 3.2 层面板的使用 选择【窗口】｜【其他】｜【层】命令，或按F2键，可打开【层】面板 。 选定某个层 更改层名 显示、隐藏层 改变层的叠放次序 创建和取消嵌套层 禁止层重叠

4 层与表格互换 4.1 将层转换为表格 操作步骤如下: 选中要转换为层的表格。 4 层与表格互换 4.1 将层转换为表格 操作步骤如下: 选中要转换为层的表格。 选择“修改”|“转换表格到层”命令，系统将打开“转换表格为层”对话框 选中合适的布局工具复选框后，单击【确定】按钮，表格就可按要求转换为层。

4 层与表格互换 4.2 表格转换为层 问题：不是所有的浏览器都支持层。 解决方法：使用层创建网页布局，然后将层转换为表格。 4 层与表格互换 4.2 表格转换为层 问题：不是所有的浏览器都支持层。 解决方法：使用层创建网页布局，然后将层转换为表格。 打开要将层转换为表格的页面。 选择【修改】｜【转换】｜【层到表格】命令，系统将打开【转换层为表格】对话框. 选择好对话框中的选项后，单击【确定】按钮，层布局的页面就可转换成表格布局的页面