项目06制作名师工作室网页

1、主讲：主讲：网页设计与制作Dreamweaver CS3项目六 制作名师工作室网页任务一 制作页眉任务二 设置主体页面项目六：项目六： 制作名师工作室网页制作名师工作室网页网 页 设 计 与 制 作Dreamweaver CS3任务一任务二任务三 制作页脚小 结任务三实 训任务一 制作页眉 本任务主要是使用表格来布局网页页眉的内容，用到的基础知识主要包括插入表格、表格属性设置、插入嵌套表格的方法以及单元格属性设置等。Dreamweaver CS3网 页 设 计 与 制 作项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训操作一 设置网站标识Dreamweave

2、r CS3网 页 设 计 与 制 作 本操作主要介绍使用表格定位网站标识的方法。通过本操作本操作主要介绍使用表格定位网站标识的方法。通过本操作的学习，应该掌握的内容主要有：的学习，应该掌握的内容主要有： 1.关于表格的理解 一个完整的表格包括行、列、单元格、单元格间距、单元格一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框。表格边框可以设置粗细边距（填充）、表格边框和单元格边框。表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置。和颜色等属性，单元格边框粗细不可设置。 一个包括一个包括n列表格的宽度列表格的宽度2表格边框（表格边框（n1）单元格单元格

3、间距间距2n单元格边距单元格边距n单元格宽度单元格宽度+2n单元格边框宽度单元格边框宽度（1个像素）。个像素）。 掌握这个公式是非常有用的，在运用表格布局时，精确地定掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的。位网页就是通过设置单元格的宽度或者高度来实现的。 项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训操作一 设置网站标识Dreamweaver CS3网 页 设 计 与 制 作项目六：项目六： 制作名师工作室网页制作名师工作室网页表格的构成 任务一任务二小 结任务三实 训Dreamweaver CS

4、3网 页 设 计 与 制 作操作一 设置网站标识2.插入表格的方法 将光标置于页面中，然后在主菜单中选择将光标置于页面中，然后在主菜单中选择【插入记录插入记录】【表格表格】命令或在命令或在【插入插入】【常用常用】面板中单击面板中单击 （表格）（表格）按钮打开按钮打开【表格表格】对话框进行参数设置，最后单击对话框进行参数设置，最后单击【确定确定】按钮按钮插入表格。插入表格。 项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作一 设置网站标识3.选择表格的方法通过以下通过以下4种方法来选择整个表格。种方法

5、来选择整个表格。l单击表格左上角或者单击表格中任何一个单元格的边框线。单击表格左上角或者单击表格中任何一个单元格的边框线。l将光标置于表格内，选择主菜单中的将光标置于表格内，选择主菜单中的【修改修改】【表格表格】【选择表格选择表格】命令或单击鼠标右键，在快捷菜单中选择命令或单击鼠标右键，在快捷菜单中选择【表表格格】【选择表格选择表格】命令。命令。l按住鼠标左键由表格的左上角至右下角拖曳，选中其中所有按住鼠标左键由表格的左上角至右下角拖曳，选中其中所有的单元格，并选择主菜单中的的单元格，并选择主菜单中的【编辑编辑】【全选全选】命令。命令。l将光标移至欲选择的表格内，单击文档窗口左下角对应的将光标

6、移至欲选择的表格内，单击文档窗口左下角对应的“table”标签。标签。项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作一 设置网站标识4.设置表格【属性】的方法 首先选中表格，然后通过表格首先选中表格，然后通过表格【属性属性】面板设置表格的行数、面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。背景图像、边框颜色等属性。 项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结

7、任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作一 设置网站标识5.设置单元格【属性】的方法 通过单元格通过单元格【属性属性】面板可以设置单元格的宽度和高度、水面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。另外，平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。另外，如果需要将单元格高度或宽度设置为较小数值时，为了达到实际如果需要将单元格高度或宽度设置为较小数值时，为了达到实际效果，必须将该单元格源代码中的效果，必须将该单元格源代码中的“ ”（不换行空格符）（不换行空格符）删除，这是使用表格制作细线效果的一种技

8、巧。删除，这是使用表格制作细线效果的一种技巧。 项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训操作二 制作导航栏Dreamweaver CS3网 页 设 计 与 制 作 本操作主要介绍使用表格制作导航栏的方法。本操作主要介绍使用表格制作导航栏的方法。通过本操作的学习，通过本操作的学习，应该掌握的内容主要有：应该掌握的内容主要有： 1.拆分单元格的方法通过以下方法可以打开通过以下方法可以打开【拆分单元格拆分单元格】对话框拆分单元格。对话框拆分单元格。在主菜单中选择在主菜单中选择【修改修改】【表格表格】【拆分单元格拆分单元格】命令。命令。单击鼠标右键，在其快捷

9、菜单中选择单击鼠标右键，在其快捷菜单中选择【表格表格】【拆分单元格拆分单元格】命令。命令。单击单元格单击单元格【属性属性】面板左下方的面板左下方的 （拆分）按钮。（拆分）按钮。项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作导航栏项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作导航栏2.合并单元格的方法 通过以下方法可以将选择的单元格进行合并。通过以下方法可以将选择的单元格进行合并。在主菜

10、单中选择在主菜单中选择【修改修改】【表格表格】【合并单元格合并单元格】命令。命令。单击鼠标右键，在其快捷菜单中选择单击鼠标右键，在其快捷菜单中选择【表格表格】【合并单元格合并单元格】命令。命令。单击单元格单击单元格【属性属性】面板左下方的面板左下方的 （合并）按钮。（合并）按钮。项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作导航栏项目六：项目六： 制作名师工作室网页制作名师工作室网页3.选择表格的行或列的方法下面两种方法可用来选择表格的行或列。下面两种方法可用来选择表格的行或列。当鼠标位于

11、表格欲选择的行首或列顶时，鼠标变成黑色箭头，当鼠标位于表格欲选择的行首或列顶时，鼠标变成黑色箭头，这时单击鼠标左键，便可选择行或者列。这时单击鼠标左键，便可选择行或者列。按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列选中。选中。另外，单击文档窗口左下角相应的另外，单击文档窗口左下角相应的“”标签也可以选择相应标签也可以选择相应的行。的行。任务一任务二小 结任务三实 训 本任务主要是使用表格布局网页主体部分的内容，用到的基础知识主要包括表格的嵌套、利用表格制作细线边框等。Dreamweaver CS3网 页 设 计 与 制 作任务二

12、设置主体页面项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训操作一 制作左侧区域Dreamweaver CS3网 页 设 计 与 制 作通过本操作的学习，应该掌握的内容主要有：通过本操作的学习，应该掌握的内容主要有： 1.关于嵌套表格在表格单元格中继续插入表格，称为嵌套表格。嵌套表格的宽度在表格单元格中继续插入表格，称为嵌套表格。嵌套表格的宽度一定不要大于当前单元格的宽度，否则当前单元格的宽度就会发一定不要大于当前单元格的宽度，否则当前单元格的宽度就会发生变化。使用表格进行网页布局，嵌套表格是经常使用的。合理生变化。使用表格进行网页布局，嵌套表格是经常使用的

13、。合理使用嵌套表格是做好表格网页布局的关键因素。使用嵌套表格是做好表格网页布局的关键因素。项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训操作一 制作左侧区域Dreamweaver CS3网 页 设 计 与 制 作2.选择相邻单元格的方法（1）在开始的单元格中按住鼠标左键并拖曳到最后的单元格。）在开始的单元格中按住鼠标左键并拖曳到最后的单元格。 （2）将光标置于开始的单元格内，按住）将光标置于开始的单元格内，按住Shift键不放，单击最后键不放，单击最后的单元格。的单元格。 项目六：项目六： 制作名师工作室网页制作名师工作室网页3.选择不相邻的行、列或单元格

14、的方法（1）按住）按住Ctrl键，单击欲选择的行、列或单元格。键，单击欲选择的行、列或单元格。 （2）在已选择的连续单元格、行或列中按住）在已选择的连续单元格、行或列中按住Ctrl键，单击想取消键，单击想取消选择的单元格、行或列将其去除。选择的单元格、行或列将其去除。 4.选择单个单元格的方法（1）先将光标置于单元格内，按住）先将光标置于单元格内，按住Ctrl键，并单击单元格。键，并单击单元格。 （2）将光标置于单元格内，然后单击文档窗口左下角的）将光标置于单元格内，然后单击文档窗口左下角的“”标签。标签。 任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作

15、操作二 制作右侧区域本操作主要介绍使用嵌套表格对右侧区域的内容进行定位。本操作主要介绍使用嵌套表格对右侧区域的内容进行定位。通过通过本操作的学习，应该掌握的内容主要有：本操作的学习，应该掌握的内容主要有： 1.表格的复制和粘贴项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训 选择要复制的表格，然后在主菜单中选择选择要复制的表格，然后在主菜单中选择【编辑编辑】【拷贝拷贝】命令复制表格。将光标置于要粘贴表格的位置，在主菜单中选择命令复制表格。将光标置于要粘贴表格的位置，在主菜单中选择【编辑编辑】【粘贴粘贴】命令粘贴表格。命令粘贴表格。 2.删除表格中的内容 用鼠

16、标选择表格中的用鼠标选择表格中的1个或多个单元格，按个或多个单元格，按Delete键可以删除键可以删除其中的内容。但不能选择整行、整列或者整个表格，只有这样，其中的内容。但不能选择整行、整列或者整个表格，只有这样，被选择的行、列或者单元格内的内容被删除后，表格的结构或属被选择的行、列或者单元格内的内容被删除后，表格的结构或属性才不会发生变化。性才不会发生变化。 Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧区域项目六：项目六： 制作名师工作室网页制作名师工作室网页3.在表格中增加行或列的方法l在主菜单栏中选择在主菜单栏中选择【修改修改】【表格表格】【插入行插入行】或或

17、【插入列插入列】命命令。令。l在主菜单栏中选择在主菜单栏中选择【插入插入】【表格对象表格对象】【在上面插入行在上面插入行】、【在下面插入行在下面插入行】、【在左边插入列在左边插入列】、【在右边插入列在右边插入列】命令。命令。l在主菜单栏中选择在主菜单栏中选择【修改修改】【表格表格】【插入行或列插入行或列】命令。命令。4.删除表格的行或列的方法 如果要删除行或列，可以先将光标置于要删除的行或列中，如果要删除行或列，可以先将光标置于要删除的行或列中，或者将要删除的行或列选中，然后在主菜单栏中选择或者将要删除的行或列选中，然后在主菜单栏中选择【修改修改】【表格表格】【删除行删除行】或或【删除列删除列

18、】命令。最简捷的方法就是选命令。最简捷的方法就是选定要删除的行或列，然后在键盘上按下定要删除的行或列，然后在键盘上按下Delete 键将选定的行或列键将选定的行或列删除。也可使用鼠标右键快捷菜单进行以上操作。删除。也可使用鼠标右键快捷菜单进行以上操作。 任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作操作二 制作右侧区域项目六：项目六： 制作名师工作室网页制作名师工作室网页5.使用表格布局应该注意的问题（1）表格宽度要根据实际需要设置，目前常用的宽度有两种，一种是）表格宽度要根据实际需要设置，目前常用的宽度有两种，一种是760-780像素，另一种是像素，另

19、一种是960-1000像素，这主要是因为目前许多计算机使像素，这主要是因为目前许多计算机使用的屏幕分辨率绝大多数是用的屏幕分辨率绝大多数是800X600和和1024X768两种，这样在水平方向两种，这样在水平方向上就不会出现滚动条。上就不会出现滚动条。（2）表格的边框通常设置为）表格的边框通常设置为“0”，也就是让表格在网页中不可见，这样，也就是让表格在网页中不可见，这样才能实现表格布局的目的。才能实现表格布局的目的。（3）尽量使用多个表格进行布局，不要使用一个表格布局整个页面。）尽量使用多个表格进行布局，不要使用一个表格布局整个页面。（4）表格的嵌套层次尽量要少，最好嵌套表格不超过）表格的嵌

20、套层次尽量要少，最好嵌套表格不超过3层。层。（5）注意背景图像在表格布局中的特殊作用，尽量用小图像起到大图像）注意背景图像在表格布局中的特殊作用，尽量用小图像起到大图像的效果，如水平线，可以使用一幅很小的图像，使其在水平方向上平铺的效果，如水平线，可以使用一幅很小的图像，使其在水平方向上平铺即可。即可。（6）注意使用表格制作细边框线效果的方法，如巧用背景颜色和间距就）注意使用表格制作细边框线效果的方法，如巧用背景颜色和间距就可以制作细边线表格。可以制作细边线表格。任务一任务二小 结任务三实 训Dreamweaver CS3网 页 设 计 与 制 作任务三 制作页脚 页脚主要存放一些诸如版权信息

21、、联系方式等内容。网页的页脚主要存放一些诸如版权信息、联系方式等内容。网页的页脚部分占用的空间相对比较小，但它所显示的信息却不是可有页脚部分占用的空间相对比较小，但它所显示的信息却不是可有可无的，一般与页眉部分相呼应，有时候也是对网页的一种补充。可无的，一般与页眉部分相呼应，有时候也是对网页的一种补充。 通过本任务的学习，主要注意一点：当把行或列的宽度或高通过本任务的学习，主要注意一点：当把行或列的宽度或高度设置为较小的数值时，需要将源代码中的度设置为较小的数值时，需要将源代码中的“ ”删除。利删除。利用这种方法，也可以制作细线效果。如，将表格某一行单元格的用这种方法，也可以

22、制作细线效果。如，将表格某一行单元格的高度设置为高度设置为“1”，并设置单元格的背景颜色或背景图像，然后删，并设置单元格的背景颜色或背景图像，然后删除源代码中的除源代码中的“ ”就出现了细线效果。就出现了细线效果。 项目六：项目六： 制作名师工作室网页制作名师工作室网页任务一任务二小 结任务三实 训实训 制作参考咨询网页本项目着重介绍了表格在网页布局中的应用。实训将使用表格本项目着重介绍了表格在网页布局中的应用。实训将使用表格制制作参考咨询网页作参考咨询网页 ，以进一步巩固表格的基本操作。，以进一步巩固表格的基本操作。 Dreamweaver CS3网 页 设 计 与 制 作项目六：项目六： 制作名师工作室网页制作名师工作室网页【实训目的实训目的】l 进一步掌握插入表格的方法。进一步掌握插入表格的方法。l 进一步掌握表格属性设置的基本方法。进一步掌握表格属性设置的基本方法。l 进一步掌握单元格属性设置的基本方法。进一步掌握单元格属性设置的基本方法。l 进一步进一步掌握使用表格进行页面