搜索
主讲：韩维良2020年1月网站建设第7章使用表格第一节使用表格对页面进行布局由于网页的主要组成元素是文字、图形或其它一些可视化元素（如Flash动画、图像或文本段落），为了不使它们从一个边缘流向另一个边缘，必须将它们插入到一个“容器”中，这个“容器”就是表格。表格能将页面划分为任意矩形区域，除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，将网页中的元素放到表格的单元格中进行页面排版，是最常用的一种控制页面整体布局的工具。2020年1月30日星期四教育学院3网站建设第7章使用表格实际上，在Internet上的绝大多数网页都是用表格辅助布局的。借助表格实现网页的精细排版。可以说表格的灵活应用是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计师的水平。2020年1月30日星期四教育学院4网站建设第7章使用表格一、版面布局概述一般情况下一个网页主要包括：LOGO（标志），Banner（横幅广告条），导航栏，导航菜单，网页正文，版权声明。在设计页面布局时，也正是围绕着这些元素展开的。在页面制作过程中要确定一个页面的布局（版式），应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。2020年1月30日星期四教育学院5网站建设第7章使用表格做一个网页，尤其是主页，先要规划好版面布局（页面的条块分割）。如同一个容器，规划好位置。几种常用的版式（分栏结构）：二分栏，三分栏的结构等。2020年1月30日星期四教育学院6网站建设第7章使用表格2020年1月30日星期四教育学院7网站建设第7章使用表格2020年1月30日星期四教育学院8网站建设第7章使用表格常见的网页布局类型：有“国”字型、“匡”字型、“三”字型、“川”字型等。网站建设第7章使用表格1．“国”字型网站建设第7章使用表格2．“匡”字型网站建设第7章使用表格3．“三”字型网站建设第7章使用表格4．“川”字型网站建设第7章使用表格5．其他类型(1)封面型(2)Flash型(3)框架型网站建设第7章使用表格6、网页页面的构成1）网页尺寸根据屏幕分辨率的大小设计网页的宽度。一般如果屏幕分辨率为800*600那么设计网页的尺寸为780*428，如果屏幕分辨率为1024*768，那么设计页面尺寸为980*600。2）页头（页眉）通常放置logo（网站标志）和banner（广告条）3）页脚放置版权信息、联系电话、网站介绍、备案信息等等。4）导航栏各版块栏目的超链接。网站建设第7章使用表格第二节插入表格一、创建表格1、插入表格在文档窗口的设计视图中，将插入点置于要插入表格的位置，单击“插入”菜单中的“表格”或单击插入栏的“常用”中的“插入表格”按钮，或者Ctrl+Alt+T。设置行列数以及边框等。2020年1月30日星期四教育学院16网站建设第7章使用表格网站建设第7章使用表格在对话框中进行选项设置。行、列数：用于设置插入表格的行数和列数。表格宽度：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与其上一级窗口的宽度将保持相同的百分比。边框粗细：用于设置表格的边框宽度。单元格边距：(属性面板是填充)用于设置表格中单元格中的内容与单元格边框的距离。2020年1月30日星期四教育学院18网站建设第7章使用表格单元格间距：用于设置表格中单元格之间的间距。页眉：把表格的第一行或第一列作为标题行或标题列，作为标题行或标题列的行或列的内容将以粗体的形式显示。分别为无、左、顶部、两者。即确定是否启用表格的行列标题。在左侧为行标题，在顶部为列标题。辅助功能中的标题：用于设置表格标题，该标题在表格的外侧。(选中后，可知，也作为表格的一部分)摘要：用于描述表格的相关信息。2020年1月30日星期四教育学院19网站建设第7章使用表格2020年1月30日星期四教育学院20辅助中的标题网站建设第7章使用表格表格宽度菜单：单击表格中的任意位置，在表格的上方或者下方显示宽度和宽度分布。单击其中的小三角可以对其进行相应的设置。也可以在“查看”中“可视化助理”的“表格宽度”中设置显示或者隐藏，默认显示。2020年1月30日星期四教育学院21网站建设第7章使用表格实践：实现如下的操作。2020年1月30日星期四教育学院22网站建设第7章使用表格在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。另外,表格内容的排版等。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。2020年1月30日星期四教育学院23网站建设第7章使用表格2、表格的html标签tablewidth=300border=1trtda1/tdtdb1/td/trtrtda2/tdtdb2/td/tr/table2020年1月30日星期四教育学院24网站建设第7章使用表格table/table表格标记tr/tr行标记td/td单元格标记2020年1月30日星期四教育学院25网站建设第7章使用表格第三节选择表格一、选择表格鼠标指针指向表格左上角，当鼠标指针右下角出现表格图形时，单击。将光标指向表格边框，单击鼠标，可以选择整个表格。“修改”—“表格”—“选定表格”；右击，选“表格”—“选定表格”表格内任意单击，在“标签选择器”中单击table其它方法不常用略。2020年1月30日星期四教育学院26网站建设第7章使用表格二、选择表格的行或列鼠标指针指向行左边缘或者列的顶边，出现实心箭头时单击，或者单击并拖动可选择多行或者多列。从某处按下左键，拖动出一个多行多列的矩形区域。插入点置于某单元格中时，在“标签选择器”单击tr，则选中插入点所在的行。单击表格宽度菜单中的小三角，选“选择列”2020年1月30日星期四教育学院27网站建设第7章使用表格三、选择单元格1、选择单个单元格Ctrl+单击在单元格中单击，按下Ctrl+A2、选择相邻的单元格单击首，Shift+单击尾3、选择不相邻的单元格Ctrl+逐个单击2020年1月30日星期四教育学院28网站建设第7章使用表格2020年1月30日星期四4、用“标签选择器”选择单元格插入点置于某单元格中时，在“标签选择器”中单击td，则选中插入点所在单元格。教育学院29网页中插入的表格状态栏中的“标签选择器”网站建设第7章使用表格第四节设置表格的属性选择要设置属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在属性面板中设置。2020年1月30日星期四教育学院30网站建设第7章使用表格表格：用于设置表格的名称。行和列：用于设置表格的行数和列数。宽：用于设置表格的宽度，单位为“百分比”或“像素”。填充：用于设置单元格中的内容与边框之间的距离。（单位：象素）(内边距)，在表格插入对话框称为单元格边距。间距：用于设置单元格之间的距离，（单位：象素）对齐：用于设置表格在网页中的对齐方式。2020年1月30日星期四教育学院31网站建设第7章使用表格2020年1月30日星期四教育学院网站建设第7章使用表格2020年1月30日星期四教育学院33border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)网站建设第7章使用表格边框：用于设置表格外边框的宽度。类：用于设置表格的CSS样式。单击按钮，（宽度橡皮擦）可以取消单元格的宽度设置，使其宽度随单元格的内容自动缩放。单击按钮，（高度橡皮擦）可以取消单元格的高度设置，使其高度随单元格的内容自动调整。单击按钮，可以将表格宽度转换为像素。单击按钮，可以将表格宽度转换为百分比。2020年1月30日星期四教育学院34网站建设第7章使用表格2020年1月30日星期四教育学院网站建设第7章使用表格第五节设置行、列和单元格的属性单击某单元格，在属性面板中可以设置其属性，上半部分为单元格内文本的属性，下半部分为单元格的属性。2020年1月30日星期四教育学院36网站建设第7章使用表格一、拆分和合并单元格拆分单元格的操作是将一个单元格拆分为几个连续的单元格；拆分方法：选取一个单元格，单击属性面板中的“拆分单元格为行或列”按钮→填写拆分行（列）的数目。2020年1月30日星期四教育学院37网站建设第7章使用表格合并是将多个连续的单元格合并成一个；合并方法：选取待合并的多个连续的单元格，单击属性面板中的“合并所选单元格”按钮。二、设置单元格内容的对齐方式水平：设置单元格内容在水平方向上的对齐方式，主要有：默认、左、中、右。垂直：设置单元格内容在垂直方向上的对齐方式，主要有：默认、顶端、剧中、底部、基线。2020年1月30日星期四教育学院38网站建设第7章使用表格三、设置单元格背景选取单元格，在属性面板中的“背景”中添加背景图片或在“背景颜色”中选取一种颜色或利用16进制数指定一种颜色；2020年1月30日星期四教育学院39网站建设第7章使用表格第六节表格基本操作一、调整表格大小1、调整列宽：拖动列右边框。2、调整行高：拖动行下边框。3、调整表宽：选中表格，拖动右侧尺寸控点。4、调整表高：选中表格，拖动底边尺寸控点。5、同时调整表宽表高：选中表格，拖动右下角尺寸控点。2020年1月30日星期四教育学院40网站建设第7章使用表格二、清除和均化表格大小1、清除所有高度方法：选中表格，选择表格宽度菜单中的“清除所有高度”。或者“修改”—“表格”—“清除单元格高度”。使表格高度收缩至最小程度，即不能再小了。2020年1月30日星期四教育学院41网站建设第7章使用表格2、清除所有宽度方法：选中表格，选择表格宽度菜单中的“清除所有宽度”。或者“修改”—“表格”—“清除单元格宽度”。使表格宽度收缩至最小程度，即不能再小了。3、统一所有宽度宽度不一致现象：代码设置与可视化属性中设置的不一致。方法：选中表格，选择表格宽度菜单中的“使所有宽度一致”2020年1月30日星期四教育学院42网站建设第7章使用表格4、统一列宽调整表格中的各列宽度后，可以使再其宽度相同。方法：单击某一列，在其列宽度菜单中，选择“清除列宽”。2020年1月30日星期四教育学院43网站建设第7章使用表格三、增加行和列1、增加行方法：右击某行→“表格”—“插入行”/“插入行或列”；“修改”—“表格”—“插入行”/“插入行或列”命令。“插入”—“表格对象”—“在上面插入行”/“在下面插入行”命令。选中表格，在属性面板中“行”数中增加数值。2020年1月30日星期四教育学院44网站建设第7章使用表格2020年1月30日星期四教育学院45网站建设第7章使用表格2、增加列方法：右击某列→“表格”—“插入列”/“插入行或列”；“修改”—“表格”—“插入列”/“插入行或列”命令。“插入”—“表格对象”—“在左边插入列”/“在右边插入列”命令。选中表格，在属性面板中“列”数中增加数值。2020年1月30日星期四教育学院46网站建设第7章使用表格四、删除表格元素1、删除单元格内的对象方法：选中一个或者多个单元格，按Delete，或者“编辑”—“清除”。2、删除行方法：在欲删除的行中单击，选择“修改”—“表格”—“删除行”命令；在欲删除的行中右击，选择“删除行”命令；选中表格，在属性面板中“行”数中减少数值，则从表格底部删除相应的行数。2020年1月30日星期四教育学院47网站建设第7章使用表格3、删除列方法：在欲删除的列中单击，选择“修改”—“表格”—“删除列”命令；在欲删除的列中右击，选择“删除列”命令；选中表格，在属性面板中“列”数中减少数值，则从表格右端删除相应的列数。2020年1月30日星期四教育学院48网站建设第7章使用表格五、剪切、复制和粘贴单元格1、剪切或者复制单元格方法：选中一个包含一个或者多个单元格的矩形区域，“编辑”—“剪切”/“复制”，或者Ctrl+X/Ctrl+C;如果选中区域包含整行或者整列，则为剪切后删除所