第三章 网页的排版和布局(一)使用表格布局网页

3.2.3 表格基本操作 选择单元格：相邻、不相邻 ① 单击单元格，然后在“文档”窗口状态栏 的标签选择器中单击单元格标签<td>； ② 按住 Ctrl 键单击单元格； ③Shift键可选择多个单元格； ④直接拖曳
3.2.3 表格基本操作 2、添加表格的行或列： ①插入/表格对象 ②选择对象，单击右键 ③修改/表格 ④表格属性面板 3、删除表格的行或列：同上 4、拆分和合并单元格：同上 5、剪切与粘贴单元格：剪切的单元格必须与 选定单元格兼容；若在表格外粘贴，则另成 一个新表
实例7 利用表格布局网页
实例7 利用表格布局网页
操作设计要点： 1.在相应位置插入3行1列表格，宽度为669像素； 2.在第1行单元格中，插入图像banner.jpg；第2 行单元格插入图像button.jpg；第3行单元格中 插入2行1列的表格； 3.在第1行单元格中插入1行1列表格，宽度550 像素，居中对齐，填充0，间距0，输入文字， 设置大小13像素，颜色#3a7c7c,加粗 4.在第2行单元格中插入图像cor.jpg，水平方向 居中对齐。
3.2.3 表格基本操作
6、设置表格属性
填充：单元格边界与单元格内容之间的距离 间距：相邻单元格之间的距离 对齐：同一段落中的其他元素的位置
3.2.3 表格基本操作 7、设置单元格、行和列属性
水平：通常单元格采用左对齐，标题单元格采用居中 对齐 垂直：通常采用居中对齐 不换行：设置单元格内文本是否换行。 标题：将所选单元格的格式设置为表格标题单元格。 默认时，单元格为粗体，居中对齐。
实例9 利用表格布局网页2 4.光标定位于第2列第3行单元格中，插入图 像index_r5_c2.gif；光标定位于第2列第2行 单元格中，插入1行2列表格，宽度设为 100%，其他设置为0，并在第2列单元格中 插入图像index_r2_c4.gif，调整单元格宽度 ，同时设置图像右对齐。 5.在相应位置输入文字内容，编辑格式，完 成图文混排。 6.保存，预览。
3.2.2 新建表格
表格对话框参数含义： 行数、列数：新建表格的行列数； 表格宽度：设置表格的宽度(像素、百分比)； 边框粗细：边框为0即为无边框； 单元格边距：内容和边界的距离； 单元格间距：单元格之间的距离； 标题：表的标题； 对齐标题：标题相对于表格的显示位置。
3.2.2 新建表格
3.2 表格的应用
表格：由行、列、单元格构成。<table></table>， 由多个tr、th或td元素组成； 行：水平空间；<tr></tr>,一般包含多个th或td元素 列：垂直空间； 单元格：行和列相交获得的空间。分为th、td两类。 ----<th></th>：表头单元，包含头部信息； ----<td></td>：标准单元 ，包含数据，td 元素中 的文本一般正常字体且左对齐 ----更复杂的 HTML 表格也可能包括 caption、 thead、tfoot 以及 tbody 元素。
实例1 导入表格式数据 操作要求：导入 daoru.txt
3.2.3 表格基本操作 添加内容到单元格 ----输入文字：选中任意单元格，在表格中键 入文字。单元格在键入文本时会自动扩展。 ----插入图像：选中任意单元格，用插入图像 的方法，直接插入即可。
3.2.3 表格基本操作 表格结构的修改是指添加表格的行和列， 以及合并和拆分单元格。 1、选择表格元素 选择整个表格：单击表格的任一单元格， 然后在“文档”窗口状态栏的标签选择器 中点击HTML表格标签 <table>。 选择行或列：同Word、Excel中选择行或列 的方法。
实例8 参考步骤
6.下一行插入1行8列表格，设置其属性，宽750像素， 高25像素，居中对齐，边框为0，背景图像为 B_bg1.gif 7.输入相应文字，设置文字大小12像素，颜色 #FF0000，居中对齐 ※至此完成导航部分 8.下一行插入2行2列表格，设置其宽度750像素，边 框为0，背景颜色为#FFFFFF,居中对齐 9.选择表格第1行，合并单元格，输入“当前位置： 千卉花店>>首页>>”，大小12像素 10.在下一行左侧单元格中，插入6行1列表格，设置 其宽度150像素，边框为0
实例8 利用表格布局网页 根据提供素材，完成如下网页。
实例8 参考步骤
1.新建空白文档，设置页面属性，背景图像为bj.gif 2.插入1行3列，宽为750像素，居中对齐，边框为0， 背景颜色为#FFFFFF（白色） 3.选中左侧单元格，输入“千卉花店”，设置文本为 华文行楷，大小36像素，颜色为#FF0000，单元 格水平居中对齐，垂直居中对齐 4.在中间单元格插入图片banner.gif 5.在右侧单元格插入3行1列表格，宽度为100像素， 边框为0，输入相应文字，设置字体为隶书，颜色 为#FF0000，水平居中对齐。 ※至此完成头部
3.2.3 表格基本操作 9、对表格内容进行排序 选择需要进行排序的表格，命令/排序表格
实例 3 排序
实例4 制作细线ຫໍສະໝຸດ Baidu格 表格的美化使网页看起来更加简洁、清爽。
实例4 制作细线表格 操作涉及要点： 1.插入4行5列表格，设置宽度750像素 2.表格属性：填充2，间距1，边框0，居中对 齐，背景颜色#990000 3.选中所有单元格，设置背景颜色#ffffcc 4.输入相应内容，字体大小12像素
Marquee的各个参数
align：是设定活动字幕的位置，除了居左、居中、居右三种位置外，又增加 靠上（top）和靠下（bottom）两种位置。 Bgcolor：用于设定活动字幕的背景颜色，可以使用英文的单词也可以是十六 进制数的。 Direction：用于设定活动字幕的滚动方向是向左（left）、向右（right）、向 上（up）、向下（down）。 Behavior：用于设定滚动的方式，主要由三种方式： behavior="scroll"表示由一端滚动到另一端； behavior="slide":表示由一端快速滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动。 Height：用于设定滚动字幕的高度。 Width：则设定滚动字幕的宽度。 Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。 Scrollamount：用于设定活动字幕的滚动距离。数值越小，滚动的速度就越 快。 scrolldelay：用于设定滚动两次之间的延迟时间，数值越小，间隔就越小。 Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。 其中默认情况是向左滚动无限次，字幕高度是文本高度；滚动范围：水平滚 动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
实例8 参考步骤
11.在第一行单元格中，输入“最新消息”，设置文 本为12像素，单元格高25像素，水平为居中对齐， 背景图像为B_bg1.gif 12.在第二行单元格输入相应文字，设置大小12像素， 颜色为#FF0000。在代码视图下，添加如下代码： <marquee scrollamount="2" height="100" direction="up">为迎接情人节的到来，本店特推出 “爱你在心中”系列鲜花，数量有限，望广大新老 客户莫失良机。订购电话： 139****0544</marquee> 13.同步骤11设置“客户服务” 14.在下一行单元格中，插入6行1列表格，宽度为 150像素，边框为0，字体为12像素，颜色为 #FF0000，文本框高25，水平居中对齐。 15.同步骤11设置“友情链接” 16.同步骤14，插入表格，进行设置。
3.2.3 表格基本操作 8、格式化表格（CS5已取消） 选中需要进行格式化的表格，命令/格式化 表格
实例2 套用表格
实例 2 套用表格 步骤1： 新建文档，文档标题为旅游日程表。 步骤2：在文档窗口输入“旅游日程表”作为 表头。插入6行3列表格，宽度480像素。在 属性中设置，对齐方式为居中对齐，间距 设为0. 步骤3：选中表格，命令/格式化表格，套用 设计方案。交错颜色，第一行居中对齐， 粗体，最左列居中对齐。 步骤4：输入文字，设置单元格水平居中对齐。 步骤5：保存页面，预览效果。
3.2.1 三种表格视图模式 视图模式：标准模式、扩展模式、布局模式。
标准模式：按浏览器预览的结果来显示网页， 用虚线来显示表格，较不易选择。（移动改变 单元格可选用该模式）
扩展模式：其显示效果与预览效果不一致，表 格以双实线形式显示（布局完成后可使用该模 式添加各种网页元素）。
3.2.2 新建表格 1、插入表格 菜单栏：常用\表格 工具栏：布局\表格 快捷键：Ctrl+Alt+T
实例 5 制作双线表格
实例 5 制作双线表格 操作涉及要点 1.新建文档，文档标题为四月考勤表。 2.插入9行5列表格，宽度500像素 3.表格属性：间距2、边框1，对齐方式为居 中对齐。选中表格，设置边框颜色 3.输入文字，设置第一行单元格水平居中对 齐，加粗。第一列单元格水平方式为居中 对齐。 比较实例4、5，注意单线、双线中边框的 设计。
3.2.2 新建表格 2、创建嵌套表格 嵌套表格：在表格的某个单元格中再插入 一个表格，宽度受到所在单元格的宽度限 制。 嵌套表格常用于控制表格内部的文字或图 像的位置。
3.2.2 新建表格 3、导入表格式数据 表格式数据：以制表符、逗号、冒号、分 号或者其他分隔符隔开的数据。 导出表格式数据时，必须导出整个表格， 不能选择导出部分表格。 操作步骤：文件/导入/表格式数据 或 插入/表格对象/导入表格式数据
第三章 网页的排版和布局
（一）使用表格布局网页
www.themegallery.com
LOGO
3.1 页面布局概述 同报纸、杂志一样，网站也分为很多不同 的网页，比如主页、栏目首页、内容网页 等，不同的网页也需要不同的版面布局。 网页布局：给将要出现在网页中的所有元 素定位。 网站中的网页组成的是一个树型结构。 网页所处的层次越高，网页中的内容就越 丰富，网页的布局就越复杂。
实例6 制作圆角表格
实例6 制作圆角表格 操作涉及要点 1.新建空白文档，插入4行1列表格，宽度778 像素 2.第1行插入home_34.gif，第2、3行依次插入 相应图像996.gif,home_36_01.gif 3.第4行单元格中插入3行3列表格 4.根据图式插入相应图像，其中第2行第1、２、 ３列为背景图像home_01.gif、 home_02、 gif home_03.gif
3.1 页面布局概述 例如：可以把网站标志放在左上角的位置， 把导航栏放置在网站标志的右边或下方， 版权声明和联系信息通常出现在网页的底 部居中位置等。 网页的具体布局还与网页内容、网页风格、 网页大小等因素有关。 在Dreamweaver可以使用表格、布局表格 和布局单元格、框架、层等方法来实现网 页布局。
实例9 利用表格布局网页2
实例9 利用表格布局网页 参考步骤 1.设置index.html页面属性：字体为宋体，大 小14px，颜色#000，背景颜色#FFF“关于 我们” 2.插入3行2列表格，宽为974px，其他设置为 0。 3.合并第1行第1列第2列单元格，插入图像 index_r1_c1.gif；合并第1列第2行第3行单 元格，插入图像index_r2_c1.gif；
www.themegallery.com
LOGO