《网页设计与制作（第2版）》第7章 用表格来布局页面

第7章

用表格来布局页面网页设计与制作（第2版）2023/1/31第七章用表格来布局页面本章内容主要包括表格的创建；三种表格元素（表格、行和列、单元格）的属性的设置；嵌套表格的使用。使用表格排版是网页的主要制作形式，表格应用于网页排版，不仅能够控制网页在IE窗口中的位置，还可以控制网页元素在网页中的显示位置，这就涉及排版的原理、小图片的使用等内容，最后还介绍了应用表格样式控制方面的知识。2023/1/32第7章用表格来布局页面第七章用表格来布局页面7.1创建表格7.2设置表格及单元格的属性7.3表格与单元格具体操作7.4表格的进一步操作7.5表格扩展模式7.6上机练习：用表格布局模式设计网页2023/1/33第7章用表格来布局页面7.1创建表格可以这样说，网页设计就是从创建表格开始的，因为在Dreamweaver中，表格除了具有归纳作用外，更具有定位和组合的作用，因此能够将元素定位在网页中的任何想要显示的区域中。由此可见，网页中表格创建是网页设计的基础。下面开始对网页中的表格进行介绍。2023/1/34第7章用表格来布局页面7.1创建表格7.1.1插入表格1．插入表格的方法常用的插入表格的方法有三种：方法1：如图7-1所示，在菜单栏中选择“插入”→“表格”菜单项，方法2：如图7-2所示，在“插入面板”中选择“常用”→“表格”命令方法3：使用快捷键Ctrl+Alt+T2023/1/35第7章用表格来布局页面7.1创建表格“表格”对话框中参数的含义2023/1/36选项功能行数指定表格行的数目列指定表格列的数目表格宽度以像素或者百分比为单位确定表格的宽度，可以在下拉列表中选择设置宽度的不同单位。当表格的单位为百分比时，表格的宽度会在IE浏览器窗口中随着窗口变化而变化；当表格宽度的单位为像素时，表格的宽度是固定的边框粗细以像素为单位设置表格边框的粗细效果单元格边距指定单元格边框和单元格内容之间的像素值，即单元格内容距离边框的距离大小。如果不希望显示边框时，设置为“0”像素即可；空白不填则默认值为1单元格间距指定相邻单元格之间的像素数，即单元格与单元格之间的距离。空白不填则默认值为2对齐标题按钮定义表格标题的对齐方式标题无表示不设置表格的行或列的标题左表示一行归为一类，可以为每行在第一栏设置一个标题顶部表示一列归为一类，可以为每列在第一栏设置一个标题两者表示可以同时输入“左”端和“顶部”的标题标题定义表格的标题，即在表格外显示的标题摘要可在此处对表格进行注释第7章用表格来布局页面7.1创建表格【例题7-1】插入一个3行3列的表格2023/1/37属性数值行列3行3列宽度300像素边框粗细1单元格边距2单元格间距3标题两者标题成绩表摘要这是一个显示张红和王娜数学和语文成绩的表格第7章用表格来布局页面7.1创建表格【例题7-1】插入一个3行3列的表格2023/1/38第7章用表格来布局页面7.1创建表格7.1.2在表格中输入网页元素在表格创建完成后，就可以向表格中添加相应的网页元素。在表格中插入文本或图像的方法与直接在网页中插入的方法基本相同，下面介绍在表格中插入元素的操作方法。2023/1/39第7章用表格来布局页面7.1创建表格7.1.2在表格中输入网页元素2.在表格中插入图像方法与插入文本的方式基本相同，都是先插入表格，将光标放置在单元格中，然后插入图像文件。如果图像超出了单元格大小，单元格会自动扩展。2023/1/310第7章用表格来布局页面7.1创建表格7.1.2在表格中输入网页元素3.导入表格数据用户可以将在另一个应用程序中，以分隔文本格式（其中的项以制表符、逗号、冒号或分号隔开）的数据导入到Dreamweaver中，并设置为表格格式。2023/1/311第7章用表格来布局页面7.1创建表格7.1.2在表格中输入网页元素4.导出Dreamweaver文档中的表格2023/1/312第7章用表格来布局页面7.2设置表格及单元格的属性对在DreamweaverCS6中的网页中插入表格，并对表格进行一定的设置，通过对表格和单元格的设置，在满足网页设计布局要求的同时满足用户浏览需求。下面介绍设置表格属性和单元格属性方面的知识。2023/1/313第7章用表格来布局页面7.2设置表格及单元格的属性7.2.1设置表格属性2023/1/314第7章用表格来布局页面7.2设置表格及单元格的属性7.2.1设置表格属性2023/1/315属性功能表格ID定义表格在网页文档中唯一编号标识行定义表格中包含的单元格行的数量列定义表格中包含的单元格列的数量宽用于定义表格的宽度，单位为像素或百分比填充用于定义表格边框与其中各单元格之间的距离，单位为像素。如果不需要此设置，可设置为“0”间距用于定义表格中各单元格之间的距离，单位为像素。如果不需要此设置，可设置为“0”对齐定义表格中单元格内容的对齐方式，默认为两端对齐。用户可设定为左对齐、居中对齐、右对齐等类在该下拉列表框中，可以将CSS规则应用于表格边框定义表格边框的宽度。如不需要显示宽度，可设置为0表格尺寸清除列宽

可将已经定义的表格宽度清除，转换为无宽度定义的表格，使表格随内容的增加而自动扩展宽度清除行高

可将行高清除并转换成无行高定义的表格，使行高随着内容的增加而自动扩展。将表格宽度转换成像素

将以百分比为单位的表格宽度转换为以像素为单位的表格宽度将表格宽度转换成百分比

将以像素为单位的表格宽度转换为以百分比为单位的表格宽度Fireworks源文件如果在设计表格时使用了Fireworks源文件作为表格的样式设置，则可通过此项目管理Fireworks的表格设置，并将其应用到表格中第7章用表格来布局页面7.2设置表格及单元格的属性7.2.2设置单元格属性

2023/1/316第7章用表格来布局页面7.2设置表格及单元格的属性7.2.2设置单元格属性

2023/1/317属性功能合并单元格

对两个以上的单元格进行合并。拆分单元格

可以将一个单元格拆分成几个按行或按列排列的单元格，也可对两个以上的单元格进行合并后再进行拆分。水平设置单元格中内容的水平对齐方式垂直设置单元格中内容的垂直对齐方式宽设置单元格的宽度高设置单元格的高度不换行若选“√”，则该单元格的内容不会自动换行。该选项属于强制不换行，所有内容在一行中显示。选择不换行选项，往往会撑大整个表格，所以一般不要使用这种方式标题若选“√”，则设置该单元格为标题单元格，单元格的内容将自动居中并加粗背景颜色用来设置单元格的背景颜色页面属性单击此按钮，弹出页面属性对话框，用于设置网页文档的属性第7章用表格来布局页面7.2设置表格及单元格的属性【例题7-2】制作蒲公英学校课程表2023/1/318第7章用表格来布局页面7.2设置表格及单元格的属性【例题7-2】制作蒲公英学校课程表要求：表格整体背景颜色为#D2E2EF，表格边框颜色为#B6C9D2；所有单元格居中对齐，字体大小为12px；第一列和第二行字体加粗；第二行背景颜色设置为：#B6C9D7；填写科目的单元格设置背景颜色：#E9F1F8；最上一行设置行高70像素；背景图片：bg1.jpg；字体：隶书、36px、红色；左上角单元格，插入图片，设置图片宽和高为70，并设置图片在单元格的居中对齐；最下一行设置行高20像素；背景颜色：#B6C9D7，边框颜色：#0000FF；2023/1/319第7章用表格来布局页面7.3表格与单元格具体操作7.3.1表格的操作在计算机中进行操作时，要先选中被处理的对象，同样对表格操作也不例外，对表格来说，其基本操作主要包括对表格行与列的操作。2023/1/320第7章用表格来布局页面7.3表格与单元格具体操作7.3.2网页中表格行与列的操作1．列的操作2023/1/321第7章用表格来布局页面7.3表格与单元格具体操作7.3.2网页中表格行与列的操作2．行的操作2023/1/322第7章用表格来布局页面7.3表格与单元格具体操作7.3.2网页中表格行与列的操作3．删除行和列4．插入行或列2023/1/323第7章用表格来布局页面7.3表格与单元格具体操作【例题7-3】制作宝贝相册2023/1/324第7章用表格来布局页面7.3表格与单元格具体操作【例题7-3】制作宝贝相册要求：标题“宝贝相册”设置字体为黑体、大小为36像素、颜色为#FFCC33、居中对齐；创建导航位置的表格1行5列、表格宽度为100像素、边框粗细为1、单元格边距为3、单元格间距为0，表格居中对齐；行的背景颜色设置为#FF99CC，且里面的文字居中对齐；设置每个单元格一样的宽；设置网页的背景颜色为#9FF，设置导航链接；创建相片展示表格3行4列；宽度1000像素、边框粗细1像素、单元格边距10像素、单元格间距10像素、边框颜色#003333、表格背景颜色#00CCFF、第一行背景颜色为#66FFCC、第二行背景颜色为#FFFF66、第三行背景颜色为#66FF00；2023/1/325第7章用表格来布局页面7.3表格与单元格具体操作【例题7-4】制作软件DreamweaverCS6下载页面2023/1/326第7章用表格来布局页面7.4表格的进一步操作7.4.1表格分隔线与边框操作在<Table>标签中加入代码●rules="none“● Rules=“cols”● Rules=“rows”2023/1/327<table>标签中的frame主要包括above、below、vsides、hsides、ths、rhs和void7个参数，并且它只控制表格的边框。第7章用表格来布局页面7.4表格的进一步操作7.4.2表格特效设置1．并排两个表格2．立体化表格2023/1/328第7章用表格来布局页面7.5表格扩展模式所谓表格扩展模式，就是指临时向文档中所有的表格添加单元格边距、间距和增加表格的边框，为编辑提供更加方便的操作，在此模式下可以精确地放置插入点。2023/1/329第7章用表格来布局页面7.5表格扩展模式7.5.1表格扩展模式的进入和退出2023/1/330第7章用表格来布局页面7.5表格扩展模式7.5.2表格扩展模式的应用2023/1/331进入表格的扩展模式后，会发现图片的周围增加了间距，此时光标很容易插入图片所在的单元格内，可以方便地输入文本等内容第7章用表格来布局页面7.5表格扩展模式【例题7-5】制作个人简历2023/1/332第7章用表格来布局页面7.6上机练习：用表格布局模式设计网页使用表格布局模式设计网页既方便又快捷，本章已经学习了一些使用表格布局页面的方法，下面通过练习操作，掌握表格布局模式设计网页的操作方法。2023/1/333第7章用表格来布局页面小结表格是在HTML页面中添加文本与图片的强大工具，它提供了在页面中增加水平与垂直结构的网页设计方法。当创建一个表格后，用户就能轻松修改其外观与结构，例如增加内容，增加、删除、分割、合并行与列，修改表格、行、单元格属性，复制与粘贴单元格等。2023/1/334第7章用表格来布局页面小结表格是网页排版的灵魂。表格既可以以一个网页中的元素来体现自己的使用特点，同时主要用来布局网页，用它来对页面平面结构进行划分布局有着极为重要的作用。一定要注意掌握在页面中通过DreamweaverCS6对表格的操作与处理与在别的软件（如电子表格Excel）中的不同。注意区分对表格以及单元格处理操作的不同，灵活使用属性面板属性设置功能。最后通过一个上机操作完成一个表格的页面布局，并在其中添加了图像、文本、动画等元素。2023/1/335第7章用表格来布局页面习题一、选择题1．在表格的“属性”面板中，

图标的含义是（）。A．将表格宽度转化为像素

B．将表格高度转化为像素C．将表格宽度转化为百分比

D．将表格高度转化为百分比2023/1/336第7章用表格来布局页面