网页设计与制作教材课件

网页设计与制作老虎工作室

2012年12月网页设计与制作老虎工作室

2012年12月项目六表格──布局一翔网店主页任务一使用表格布局页眉任务二使用嵌套表格布局主体页面任务三使用表格布局页脚实训布局“电脑商城”网页项目六表格──布局一翔网店主页任务一使用表格布局页眉表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面。本项目以一翔网店主页为例，介绍使用表格进行网页布局的基本方法。在项目中，将使用表格分别对页眉、主体和页脚进行布局。表格是网页排版的灵魂，是页面布局的重要方法，

任务一使用表格布局页眉

需要掌握的内容主要有：1、表格的概念2、插入表格3、选择表格4、设置表格属性5、设置单元格属性任务一使用表格布局页眉需要掌握的内容主在网页制作中，表格的作用主要体现在两个方面，一个是组织数据，如各种数据表，另一个是布局网页，即把网页的各种元素通过表格进行有序布局。一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框。表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置。另外，表格的HTML标签是“<table>”，行的HTML标签是“<tr>”，单元格的HTML标签是“<td>”。一个包括n列表格的宽度＝2×表格边框＋（n＋1）×单元格间距＋2n×单元格边距＋n×单元格宽度+2n×单元格边框宽度（1个像素）。掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的。1、表格的概念在网页制作中，表格的作用主要体现在两个方面，在主菜单中选择【插入】／【表格】命令，或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行设置插入即可。2、插入表格在主菜单中选择【插入】／【表格】命令，或在【选择表格的方法如下：（1）单击表格左上角或者表格中任何一个单元格的边框线。（2）将光标移至欲选择的表格内，单击文档窗口左下角对应的“＜table＞”标签。（3）将光标置于表格的边框上，当光标呈上下箭头形状时单击鼠标。（4）将光标置于表格内，在主菜单中选择【修改】／【表格】／【选择表格】命令或在鼠标右键快捷菜单中选择【表格】／【选择表格】命令。3、选择表格选择表格的方法如下：3、选择表格选中表格，在【属性】面板中将显示表格的各项属性，同时也可以修改这些属性设置。4、设置表格属性选中表格，在【属性】面板中将显示表格的各项属将光标置于单元格内，在单元格【属性】面板设置其属性。5、设置单元格属性将光标置于单元格内，在单元格【属性】面板设置任务二使用嵌套表格布局主体页面（一）设置主体页面布局（二）设置左侧页面布局（三）设置右侧页面布局任务二使用嵌套表格布局主体页面（一）设置主体页面布局（一）设置主体页面布局

需要掌握的内容主要有：1、在表格外插入表格2、设置单元格属性3、使用表格制作细线的方法

（一）设置主体页面布局需要掌1、在表格外插入表格

用鼠标选中整个表格或者将光标置于表格的最右侧，然后选择【插入】／【表格】命令插入表格，即可在上一个表格的下面插入表格。1、在表格外插入表格用鼠标选2、设置单元格属性

将鼠标光标置于单元格内，然后根据需要在【属性】面板中设置单元格的水平、垂直对齐方式和单元格宽度等。2、设置单元格属性将鼠标光标置于单元格内，然3、使用表格制作细线的方法

将鼠标光标置于单元格内，然后设置单元格宽度或高度为较小的数值，如“2”，再设置背景颜色，如“#e4d9d9”，并将单元格源代码中的不换行空格符“ ”删除即可。3、使用表格制作细线的方法将鼠标光标置于单元（二）设置左侧页面布局

需要掌握的内容主要有：1、插入嵌套表格2、在表格中增加行或列3、删除表格的行或列

（二）设置左侧页面布局需要掌1、插入嵌套表格

所谓嵌套表格，就是在表格的单元格中再插入表格。将光标置于单元格内，在主菜单中选择【插入】/【表格】命令将在单元格中插入一个嵌套表格。嵌套表格嵌套的层数不宜过多，以3-4层为宜。在使用表格进行网页布局时，最好不要将所有内容放在一个表格中，因为在浏览器端只有整个表格的内容全部下载完后才显示，内容过多的表格必然导致用户等待的时间太长，而把内容分散到多个表格必然解决这个问题。1、插入嵌套表格所谓嵌套表2、在表格中增加行或列

在表格中增加行或列的方法如下：（1）在主菜单中选择【修改】／【表格】／【插入行】或【插入列】命令或在鼠标右键快捷菜单中选择【表格】／【插入行】或【插入列】命令将在光标所在行的上面插入一行或在列的左侧插入一列。（2）在主菜单中选择【修改】／【表格】／【插入行或列】命令或在鼠标右键快捷菜单中选择【表格】／【插入行或列】命令，可以通过【插入行或列】对话框设置是插入行还是列及其行数和位置。（3）在主菜单中选择【插入】／【表格对象】／【在上面插入行】、【在下面插入行】、【在左边插入列】、【在右边插入列】命令插入行或列。2、在表格中增加行或列在表格如果要删除表格的行或列，可以先将光标置于要删除的行或列中，或者将要删除的行或列选中，然后在主菜单中选择【修改】/【表格】/【删除行】或【删除列】命令或在鼠标右键快捷菜单选择【表格】/【删除行】或【删除列】命令即可。其实，最简便的方法是选定要删除的行或列，然后按下Delete键直接删除。如果要删除表格的内容而不想删除表格，可以选择一个或多个单元格，但不能选择整行、整列或者整个表格。只有这样，被选择的行、列或者单元格中的内容被删除后，表格的结构或属性才不会发生变化。3、删除表格的行或列如果要删除表格的行或列，可以先将光标置于要删

需要掌握的内容主要有：1、选择表格的行、列和单元格2、合并单元格3、拆分单元格

（三）设置右侧页面布局需要掌握的内容主要有：（三）设置右侧页面布局选择表格的行、列的方法如下：（1）当鼠标位于欲选择行首或者列顶时，鼠标变成黑色箭头，这时单击鼠标左键，便可选择行或者列。（2）按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列选择。（3）还有一种方法可以选择行，将光标移到欲选择的行中，然后单击文档窗口左下角的“<tr>”标签，这种方法只能用来选择行，而不能用来选择列。1、选择表格的行、列和单元格选择表格的行、列的方法如下：1、选择表格的行选择表格不相邻的行、列的方法如下：（1）按住Ctrl键，把鼠标置于欲选择的行首或者列顶，当鼠标变成黑色箭头时，依次单击鼠标左键。（2）按住Ctrl键，在已选择的连续行或列中单击想取消的行或列将其去除。选择表格不相邻的行、列的方法如下：

选择相邻单元格的方法如下。（1）在开始的单元格中按住鼠标左键并拖曳到最后的单元格。（2）将光标置于开始的单元格内，按住Shift键不放，单击最后的单元格。选择不相邻的单元格的方法如下。（1）按住Ctrl键，单击欲选择的单元格。（2）在已选择的连续单元格中按住Ctrl键，单击想取消选择的单元格将其去除。选择相邻单元格的方法如下。

选择单个单元格的方法如下。（1）先将光标置于单元格内，按住Ctrl键，并单击单元格。（2）将光标置于单元格内，然后单击文档窗口左下角的“<td>”标签。选择单个单元格的方法如下。合并单元格是针对多个单元格而言的，而且这些单元格必须是连续的一个矩形。合并单元格首先需要选中这些单元格，然后执行以下任一操作即可。（1）单击【属性】面板中的（合并单元格）按钮。（2）在主菜单中选择【修改】/【表格】/【合并单元格】命令。（3）在鼠标右键快捷菜单中选择【表格】/【合并单元格】命令。2、合并单元格合并单元格是针对多个单元格而言的，而且这些单拆分单元格是针对单个单元格而言的，可看成是合并单元格的逆向操作。拆分单元格首先需要将光标置于该单元格内，然后执行以下任一操作。（1）单击【属性】面板中的（拆分）按钮。（2）在主菜单中选择【修改】/【表格】/【拆分单元格】命令。（3）在鼠标右键快捷菜单中选择【表格】/【拆分单元格】命令。3、拆分单元格拆分单元格是针对单个单元格而言的，可看成是合无论使用哪种方法拆分单元格，最终都将弹出【拆分单元格】对话框。在【拆分单元格】对话框中，【把单元格拆分】选项后面有【行】和【列】两个选项，这表明可以将单元格纵向拆分或者横向拆分。无论使用哪种方法拆分单元格，最终都将弹出【拆任务三使用表格布局页脚需要掌握的内容主要有：1、表格排序2、表格式数据的导入或导出

任务三使用表格布局页脚需要掌握的内容主1、表格排序表格还可以根据表格列中的数据来进行排序，主要是针对具有数据的表格。方法是，首先选中表格，然后在主菜单中选择【命令】/【排序表格】命令，打开【排序表格】对话框，进行参数设置即可。1、表格排序表格还可以根据表格列中的数据来进2、表格式数据的导入或导出在Dreamweaver中，还可以将一些具有制表符、逗号、句号、分号或其他分隔符的已经格式化的表格数据导入到网页文档中，也可以将网页中的表格导出为文本文件保存，这对于需要在网页中放置大量格式化数据的情况提供了更加快捷、方便的方法。方法是，在主菜单中选择【文件】/【导入】/【Excel文档】命令或【表格式数据】命令导入表格，选择【文件】/【导出】/【表格】命令导出表格。2、表格式数据的导入或导出在Dreamwea实训布局“电脑商城”网页本项目主要介绍了使用表格布局网页的基本方法，本实训将让读者进一步巩固所学的基本知识。要求：把素材文件复制到站点根文件夹下，然后根据操作提示使用表格布局的网页。实训布局“电脑商城”网页本项目主要介绍了

制作“送孟浩然之广陵”网页

制作“送孟浩然之广陵”网页项目小结本项目介绍了使用表格对网页进行布局的基本方法，详细阐述了插入表格、编辑表格、表格属性设置、单元格属性设置等基本内容。熟练掌握表格的各种操作和属性设置会给网页制作带来极大的方便，是需要重点学习和掌握的内容之一。在本项目中，最外层表格的宽度是用“像素”来定制的，这样网页文档不会随着浏览器分辨率的改变而发生变化。插入嵌套表格可以区分不同的栏目内容，使各个栏目相互独立，但嵌套表格最好不要层次太多，否则会加长网页的打开时间。在没有设置CSS样式的情况下，在一个文档中表格不能在水平方向并排，而只能在垂直方向按顺序排列。项目小结本项目介绍了使用表格对网页进行布局网页设计与制作老虎工作室

2012年12月网页设计与制作老虎工作室

2012年12月项目六表格──布局一翔网店主页任务一使用表格布局页眉任务二使用嵌套表格布局主体页面任务三使用表格布局页脚实训布局“电脑商城”网页项目六表格──布局一翔网店主页任务一使用表格布局页眉表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面。本项目以一翔网店主页为例，介绍使用表格进行网页布局的基本方法。在项目中，将使用表格分别对页眉、主体和页脚进行布局。表格是网页排版的灵魂，是页面布局的重要方法，

任务一使用表格布局页眉

需要掌握的内容主要有：1、表格的概念2、插入表格3、选择表格4、设置表格属性5、设置单元格属性任务一使用表格布局页眉需要掌握的内容主在网页制作中，表格的作用主要体现在两个方面，一个是组织数据，如各种数据表，另一个是布局网页，即把网页的各种元素通过表格进行有序布局。一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框。表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置。另外，表格的HTML标签是“<table>”，行的HTML标签是“<tr>”，单元格的HTML标签是“<td>”。一个包括n列表格的宽度＝2×表格边框＋（n＋1）×单元格间距＋2n×单元格边距＋n×单元格宽度+2n×单元格边框宽度（1个像素）。掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的。1、表格的概念在网页制作中，表格的作用主要体现在两个方面，在主菜单中选择【插入】／【表格】命令，或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行设置插入即可。2、插入表格在主菜单中选择【插入】／【表格】命令，或在【选择表格的方法如下：（1）单击表格左上角或者表格中任何一个单元格的边框线。（2）将光标移至欲选择的表格内，单击文档窗口左下角对应的“＜table＞”标签。（3）将光标置于表格的边框上，当光标呈上下箭头形状时单击鼠标。（4）将光标置于表格内，在主菜单中选择【修改】／【表格】／【选择表格】命令或在鼠标右键快捷菜单中选择【表格】／【选择表格】命令。3、选择表格选择表格的方法如下：3、选择表格选中表格，在【属性】面板中将显示表格的各项属性，同时也可以修改这些属性设置。4、设置表格属性选中表格，在【属性】面板中将显示表格的各项属将光标置于单元格内，在单元格【属性】面板设置其属性。5、设置单元格属性将光标置于单元格内，在单元格【属性】面板设置任务二使用嵌套表格布局主体页面（一）设置主体页面布局（二）设置左侧页面布局（三）设置右侧页面布局任务二使用嵌套表格布局主体页面（一）设置主体页面布局（一）设置主体页面布局

需要掌握的内容主要有：1、在表格外插入表格2、设置单元格属性3、使用表格制作细线的方法

（一）设置主体页面布局需要掌1、在表格外插入表格

用鼠标选中整个表格或者将光标置于表格的最右侧，然后选择【插入】／【表格】命令插入表格，即可在上一个表格的下面插入表格。1、在表格外插入表格用鼠标选2、设置单元格属性

将鼠标光标置于单元格内，然后根据需要在【属性】面板中设置单元格的水平、垂直对齐方式和单元格宽度等。2、设置单元格属性将鼠标光标置于单元格内，然3、使用表格制作细线的方法

将鼠标光标置于单元格内，然后设置单元格宽度或高度为较小的数值，如“2”，再设置背景颜色，如“#e4d9d9”，并将单元格源代码中的不换行空格符“ ”删除即可。3、使用表格制作细线的方法将鼠标光标置于单元（二）设置左侧页面布局

需要掌握的内容主要有：1、插入嵌套表格2、在表格中增加行或列3、删除表格的行或列

（二）设置左侧页面布局需要掌1、插入嵌套表格

所谓嵌套表格，就是在表格的单元格中再插入表格。将光标置于单元格内，在主菜单中选择【插入】/【表格】命令将在单元格中插入一个嵌套表格。嵌套表格嵌套的层数不宜过多，以3-4层为宜。在使用表格进行网页布局时，最好不要将所有内容放在一个表格中，因为在浏览器端只有整个表格的内容全部下载完后才显示，内容过多的表格必然导致用户等待的时间太长，而把内容分散到多个表格必然解决这个问题。1、插入嵌套表格所谓嵌套表2、在表格中增加行或列

在表格中增加行或列的方法如下：（1）在主菜单中选择【修改】／【表格】／【插入行】或【插入列】命令或在鼠标右键快捷菜单中选择【表格】／【插入行】或【插入列】命令将在光标所在行的上面插入一行或在列的左侧插入一列。（2）在主菜单中选择【修改】／【表格】／【插入行或列】命令或在鼠标右键快捷菜单中选择【表格】／【插入行或列】命令，可以通过【插入行或列】对话框设置是插入行还是列及其行数和位置。（3）在主菜单中选择【插入】／【表格对象】／【在上面插入行】、【在下面插入行】、【在左边插入列】、【在右边插入列】命令插入行或列。2、在表格中增加行或列在表格如果要删除表格的行或列，可以先将光标置于要删除的行或列中，或者将要删除的行或列选中，然后在主菜单中选择【修改】/【表格】/【删除行】或【删除列】命令或在鼠标右键快捷菜单选择【表格】/【删除行】或【删除列】命令即可。其实，最简便的方法是选定要删除的行或列，然后按下Delete键直接删除。如果要删除表格的内容而不想删除表格，可以选择一个或多个单元格，但不能选择整行、整列或者整个表格。只有这样，被选择的行、列或者单元格中的内容被删除后，表格的结构或属性才不会发生变化。3、删除表格的行或列如果要删除表格的行或列，可以先将光标置于要删

需要掌握的内容主要有：1、选择表格的行、列和单元格2、合并单元格3、拆分单元格

（三）设置右侧页面布局需要掌握的内容主要有：（三）设置右侧页面布局选择表格的行、列的方法如下：（1）当鼠标位于欲选择行首或者列顶时，鼠标变成黑色箭头，这时单击鼠标左键，便可选择行或者列。（2）按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列选择。（3）还有一种方法可以选择行，将光标移到欲选择的行中，然后单击文档窗口左下角的“<tr>”标签，这种方法只能用来选择行，而不能用来选择列。1、选择表格的行、列和单元格选择表格的行、列的方法如下：1、选择表格的行选择表格不相邻的行、列的方法如下：（1）按住Ctrl键，把鼠标置于欲选择的行首或者列顶，当鼠标变成黑色箭头时，依次单击鼠标左键。（2）按住Ctrl键，在已选择的连续行或列中单击想取消的行或列将其去除。选择表格不相邻的行、列的方法如下：

选择相邻单元格的方法如下。（1）在开始的单元格中按住鼠标左键并拖曳到最后的单元格。（2）将光标置于开始的单元格内，按住Shift键不放，单击最后的单元格。选择不相邻的单元格的方法如下。（1）按住Ctrl键，单击欲选择的单元格。（2）在已选择的连续单元格中按住Ctrl键，单击想取消选择的单元格将其去除。选择相邻单元格的方法如下。

选择单个单元格的方法如下。（1）先将光标置于单元格内，按住Ctrl键，并单击单元格。（2）将光标置于单元格内，然后单击文档窗口左下角的“<td>”标签。选择单个单元格的方法如下。合并单元格是针对多个单元格而言的，而且这些单元格必须是连续的一个矩形。合并单元格首先需要选中这些单元格，然后执行以下任一操作即可。（1）单击【属性】面板中的（合并单元格）按钮。（2）在主菜单中选择【修改】/【表格】/【合并单元格】命令。（3）在鼠标右键快捷菜单中选择【表格】/【合并单元格】命令。2、合并单元格合并单元格是针对多个单元格而言的，而且这些单拆分单元格是针对单个单元格而言的，可看成是合并单元格的逆向操作。拆分单元格首先需要将光标置于该单元格内，然后执行以下任一操作。（1）单击【属性】面板中的（拆分）按钮。（2）在主菜单中选择【修改】/【表格】/【拆分单元格】命令。（3）在鼠标右键快捷菜单中选择【表格】/【拆分单元格】命令。3、拆分单元格拆分单元格是针对单个单元格而言的，可看成是合无论使用哪种方法拆分单元格，最终都将弹出【拆分单