网页的布局和定位

《网页的布局和定位》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章网页的布局和定位1本章概要1.表格的建立与设置2.表格在排版中的应用3.层的建立与设置4.层在排版中的应用5.框架的使用本章解说在现代网页设计中，版式的设计越来越重要，而网页版式设计中最常用的方法莫过于使用表格、图层、框架三种。无论是大型门户网站、电子商务网站，还是个人小型网站，都大量地运用表格和图层为页面排版。可以说，表格和图层是网页版式制作的基础。本章将从如何建立表格和图层开始讲解，由浅入深地将表格、图层和框架在网页排版应用中的各项功能进行了详细讲解。通过本章的学习，用户应该能够熟练运用表格、图层和框架为网页进行版式设计。3.1表

2、格的建立与设置学习目标能够插入表格，对表格的各组成单位进行选取能够插入、删除行或列，合并、拆分单元格能根据要求对表格、行、列、单元格属性进行设置了解DreamweaverMX的配色方案表格是在网页制作中经常运用的元件，它不仅能用于整理数据分类资料，还能用于网页排版以及制作一些特殊效果。本节将介绍插入表格、选取表格等基本操作方法。■64第3章网页的布局和定位3.1.1如何插入表格插入表格的方法很简单，步骤如下：（1）单击【插入】→【常用】→【插入表格】按钮，如图3-1所示。或单击【插入】→【表格】→【插入表格】按钮，如图3-2所示。图3-1　

3、“插入”面板下“常用”面板的“插入表格”按钮图3-2　“插入”面板下“表格”面板的“插入表格”按钮（2）弹出“插入表格”对话框，如图3-3所示。z：根据图中设置，即将新建的表格设为9行、6列。z：指定表格单元格中内容与表格单元格边框之间的空间大小。z：指定表格内单元格之间的间隙大小。z：指定表格的宽度，此时图3-3“插入表格”对话框指定表格宽度为浏览器宽度的75%。z：指定表格宽度是以像素为单位还是以浏览器窗口百分比为单位。z：指定表格的边框宽度。若不希望显示边框，可输入0。（3）设置完成后单击按钮，就会在页面上看到插入的表格，如图3-4所

4、示。图3-4　插入的表格3.1表格的建立与设置65■（4）将光标移动到单元格中，就可以输入文字或插入图片，最终效果如图3-5所示。（5）将网页保存为zgkcb.htm，以便在后面有关表格排版的章节中调用。图3-5　职高课程表3.1.2表格元素的选取在了解表格的选取之前，先来介绍一下表格的结构。表格的结构可以分为以下几部分：zTabl：整个表格。zCell：单元格，就是表格的基本组成单位。zRows：行，就是一行水平方向的单元格。zColumns：列，就是一列垂直方向的单元格。1．选取整个表格（1）在DreamweaverMX中选取表格的方法

5、有很多种，最简单的就是将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表格。（2）光标在表格中间时，可以执行菜单的【修改】→【表格】→【选择表格】命令或按快捷键【Ctrl】+【A】选取整个表格。在表格中单击右键，从弹出的快捷菜单中选择【表格】→【选择表格】命令。（3）还有一个简单的方法是当光标在单元格中出现时，在DreamweaverMX页面编辑窗口的左下角的HTML快速启动栏上选择“Table”标签，就可以选取整个表格，如图3-6所示。图3-6　通过标签选取表格2．选取单元格（1）将鼠标指针移动到某个单元格上，按住【Ctrl】键不放，再

6、单击，就可以选中这个单元格。（2）按住【Ctrl】键，再逐个单击要选取的单元格，就可以选中不连续的多个单元格。■66第3章网页的布局和定位（3）通过鼠标拖曳的方式可以选取连续的一片单元格。3．选取行将鼠标指针移动到选取行的左边，光标变成“箭头”形状时单击鼠标左键就可以选中一整行。按住鼠标左键不放上下拖动还可以选取多行，如图3-7所示。图3-7　选择表格中的一行4．选取列和选取行一样，将鼠标指针移动到选取列的上面，光标变成箭头形状时单击鼠标左键就可以选中一整列。按住鼠标左键不放左右拖动也可以选取多列。将光标移至单元格中，可用键盘上的方向键和【

7、Tab】键在单元格之间移动，如果在表格最后一个单元格按下【Tab】键，表格会自动添加一行。3.1.3行、列的插入或删除下面来学习如何为表格增加、删除行或列，以便对表格的行、列进行调整。1．插入单一行、列（1）插入新的行时，新增的行会出现在插入点的上方，而插入列时，会出现在插入点的左方。因此，将插入点也就是光标移动到表格中的适当位置，然后执行菜单的【修改】→【表格】→【插入行】命令插入行，或执行菜单的【修改】→【表格】→【插入列】命令插入列，如图3-8所示。图3-8　执行插入行命令（2）在表格中选择好插入点后单击鼠标右键，弹出的快捷菜单的“表

8、格”子菜单中3.1表格的建立与设置67■也包括这些命令，如图3-9所示。■68第3章网页的布局和定位图3-9　执行插入行命令实现插入行操作提示：光标插入点必须是在表格单元格内或选