电子商务网页设计(第二版)第三章.doc

第3章 网页布局 【知识学习目标】 通过本单元的学习，学生应能够熟练掌握三种常用的网页布局方法，即表格布局，框架布局和层布局。 【能力学习目标】 网页的布局对初学网页的学生很重要，好比是城市规划，决定哪一块地建筑什么才会达到最优，通过教师讲解，学生上机操作，学生应能够使用任意一种布局方法进行网页的布局，学习从整体布局上把握网页。 【重点难点】 本单元的重点难点不多，每种布局各有优点和使用的价值，每种布局又有多个方法，主要掌握各种使用方法，在应用中注意避重就轻，在各布局方法中，熟练掌握一种就可以。 【案例引导】 【案例3-1】使用了框架布局、表格布局的某电子商务网页页面。 §3.1 表格布局 表格是组成网页的基本元素之一，在网页制作中有着举足轻重的地位很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。 在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。（图）单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。 或使用快捷键CTRLtALT+T，系统弹出表格对话框如下图这些参数我们都已经认识了。行：2列：2其余的参数都保留其默认值。 图3-2 行数：在该文本框中指定表格的行数。 列数：在该文本框中指定表格的列数 表格宽度：在该文本框中以像素为单位或以浏览器窗口百分比为单位指定表格的宽度。 边框粗细：在该文本框中指定表格的边框宽度。不希望显示边框时，输入0。 单元格边距：确定单元格内容和单元格边界之间的像素数。 单元格间距：确定相邻的表格单元格之间的像素数。 在标头栏中有四个选项中，可以选择一种作为标题属性，使用标题可以方便站点浏览者了解表格主题和信息。各选项含义如下: 无：对表不启用列或行标题。 左：可以将表的第一列作为标题列，以便为表中的每一行输入一个标题。 上：可以将表的第一行作为标题行，以便为表中的每一列输入一个标题。 两者（左栏和顶栏）：使能够在表中输入列标题和行标题。 在可存取栏中可以指定以下选项。 标注：提供了一个显示在表格外的表格标题。 对齐标注：指定表格标题相对于表格的显示位置。 2．使用表格制作的页面实例 这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用行列的表格来制作。 在插入栏中选择按钮或“插入”菜单选“表格”。系统弹出表格对话框(。这些参数我们都已经认识了。行：列：其余的参数都保留其默认值。 第二步,在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。（图） 图3-5 第三步,?在表格的第一格按住左键不放，向下拖拽选中二格单元格。（图） 图3-6 然后在展开的属性面板中选择合并单元格按钮（如图红框所示）。将表格的单元格合并。如果要分割单元格，则可以用合并单元格按钮右边的按钮。 ??合并结果() 图3-8 第四步,用鼠标拖拽表格的边框调整到适当的大小。单击左边的单元格，然后输入，。在右边上下单元格内分别插入图片和文本。页面的基本样子有了。 光标移动到表格的边框上单击。表格周围出现调整框，表示选中整张表格。然后，在属性面板中将“边框”值设置适合的值，如果为0，边框在编辑状态，为虚线显示，浏览时就看不见了。一个符合要求的页面在表格的帮助下做好了。 图3-9 1．从其他文档导入表格式数据 Dreamweaver MX可以将创建在另一个应用程序（如 图3-10 2.在表格中直接插入数据 将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内容的方法很简单，只需将插入点定位到输入内容的单元格中，再输入文本或插入图像即可。 三、编辑表格 利用表格和单元格的“属性”面板可以随心所欲的调整表格和单元格背景色、背景图像、外边框厚度、单元格间距等属性。 下面我们学习在整个表格或选择的单元格内填充背景色和背景图像。当表格和单元格中同时应用背景色时，单元格背景的级别更高，单元格的颜色将覆盖表格的颜色，当表格和单元格内同时填充背景图像和背景颜色时，只显示背景图像。 操作步骤： 执行“文件”|“新建”命令，新建一个HTML文档。将鼠标在需要添加表格的地方单击，在“插入对象”面板中单击“插入表格”按钮或使用快捷Ctrl+Alt+T,此时会出现“表格”对话框，如图3-11中所示。 图3-11 在“表格”对话框中，将行数设为2，将列数设为1，表格高度设为741，将单位设为像素，输入完有关数据信息，如图3-12中所示。 图3-12 四、格式化表格 表格的格式化主要