《第4章表格.ppt》由会员分享，可在线阅读，更多相关《第4章表格.ppt（23页珍藏版）》请在三一文库上搜索。
1、第4章 表格,基本操作 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。 1、插入表格 在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。,行：表格的行数 列：表格的列数 单元格间距：单元格之间的空间大小，不含边框 单元格边距：单元格与单元格内的内容之间的空间大小 宽度
2、：表格的宽度 边框：表格的边框宽度,标题,表格边框,单元格,单元格边距,单元格间距,2、选定表格和单元格 1）、选定整个表格 把鼠标放在表格边框的任意处，当出现 这样的标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中标签即可；或在单元格任意处单击，点鼠标右键在弹出菜单菜单中选择“表格选择表格” 2）、选定特定单元格 按住Ctrl键，鼠标在需要选中的单元格单击即可；或者，选中状态栏中的标签。 按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中不连续的几个单元格，可以按住Ctrl键，单击要选择的所有单元格即可。,3）、一次性选择整行或整列 将光标移动到行左侧
3、或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。 3、表格属性的设置 表格的属性面板分为两类：一个是表格属性面板，另一个是单元格属性面板。表格属性面板中包含了“表格”对话框内的所有设置项，可以在此对话框中指定表格的整体大小和背景色等项目。而在单元格属性面板中，可以指定单元格大小、背景色等。,1）、表格属性面板 填充：文本框用来设置单元格边距。 间距：文本框用来设置单元格间距。 对齐：下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。 边框：文本框用来设置表格边框的宽度。 背景颜色：文本框用来设置表格的背景颜色。 边框颜色：用来设置表格边框的颜色。在“背景图像”文本框填入表格
4、背景图像的路径，可以给表格添加背景图像。也可以给文本框加上链接路径。还可以单击文本框后 浏览：查找图像文件。在“选择图像源”对话框中定位并选择要设置为背景的图片，单击“确认”按钮即可。,2）、单元格属性面板 水平：文本框用来设置单元格内元素的水平排版方式，是居左、居右或是居中。 垂直：文本框用来设置单元格内的垂直排版方式，是顶端对齐、底端对齐或是居中对齐。 高、宽：文本框用来设置单元格的宽度和高度。 不换行：可以防止单元格中较长的文本自动换行。 标题：使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。 背景：文本框用来设置表格的背景图像。 背景颜色：文本框用来设置表格的背景颜
5、色。 边框：文本框用来色设置表格边框的颜色。,表格外观 表格的外观包括表格边框的粗细与颜色、单元格之间的距离（即间距）、表格内容的颜色与对齐方式、表格的背景颜色与背景图像，以及单元格的背景颜色与背景图像等。 1、调整表格属性面板和单元格的大小 利用表格属性面板修改表格大小 在文档窗口中调整单元格大小 利用单元格属性面板修改大小,注：无法修改单元格高度时的处理方法 有时候，当用户为了修改特定单元格的高度，在单元格属性面板中输入设置值，但是文档窗口中看不到如何变化。出现这种现象的原因是因为，与当前单元格相邻的其他单元格中存在比当前单元格设置值还要大的单元格。在这种情况下，应在选择各个单元格之后，分
6、别制定不同的大小。,2、表格对齐方法 表格的对齐方式分为两种：指定表格自身位置的对齐方法和指定表格内容的对齐方法。 1）、表格位置对齐方法 表格在网页文档中的对齐有左对齐、居中、右对齐。在选定整个表格之后，可以在属性面板中的“对齐”列表中选择需要的对齐方式。 2）、表格内容的对齐方法 设置表格内文本或图像的对齐方式的方法和一般文档和图像的对齐方法相同。因为表格内内容的对齐方式只能在单元格属性面板中设置，所以不能选定整个表格，而是在拖动鼠标选择所有单元格之后，指定内容的对齐方式。,3、统一设置内部边线和外部边框 将表格边框宽度设置为2像素以上的值时，只有表格的外观边框会加宽，内部边线的宽度不会发
7、生如何的变化。下面介绍的是，统一表格的内部边线和外部边框的方法。 如：指定单元格的背景色与网页文档的背景色相同。将边框设置为0,并在间距栏中输入边框厚度。,4、调整表格边框和余白 利用表格属性面板内的“边框”设置栏，可以指定表格边框的厚度。当修改表格边框时，表格的外部边框将变成指定的宽度，而表格内部边线仍然采用默认线条。另外，也可以根据需要制定表格边框的颜色，增加余白，从而表现特殊的效果。在设置表格的余白时，可以利用调整单元格之间边距的“间距”和调整单元格内容到边线之间边距的“填充”进行设置。 如：将边框设置为3，选择一种颜色，再将间距设置为5，之后将填充设置为20. 5、在表格中插入背景图像
8、 在表格中插入背景图像并填充表格空间，就可以设计出具有独特风格的网页文档。,表格的行和列 1、插入或删除行和列 选中要插入行或列的单元格，单击鼠标右键，在弹出菜单中选择“插入行”或“插入列”或“插入行或列”命令。 要删除行或列，选择要删除的行或列，单击鼠标右键，在弹出菜单中选择“删除行”或“删除列”命令即可。,2、合并或拆分单元格 拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出对话框中，按需要设置即可。 合并单元格时，选中要合并的单元格，单击属性面板中的“合并”按钮即可。,嵌套表格 表格之中还有表格即嵌套表格。 网页的排版有时会很复杂，在外部需要一个表格来控制总
9、体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。 引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。 另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。,1、将光标放置在文档窗口要插入表格的位置，单击常用插入栏“表格”按钮，插入一个1行1列的表格一，宽度500像素，高度1
10、00，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/003.gif。 2、将光标放置在表格一内，插入表格二，1行1列，宽度100，高度100，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/002.gif。 3、将光标放置在表格二内，插入表格二，1行1列，宽度100，高度100，单元格间距和单元格边距都为8像素，边框为10，边框颜色为#FEE4ED。背景图像选择beij/005.gif。 4、将光标放置在表格三内，选择单元格的背景图像为beij/006.gif。添加文字“恭贺新禧”，字号68px，字体为隶书，颜色为#A51008。,格式化表格 做好
11、的表格可以使用DW提供的预设外观，可以提高制作效率，保持表格外观的同一性，同时样式提供的色彩搭配也比较美观。 插入一个5行6列的表格，表格的宽为500像素，高为300像素，边框、单元格间距和边距全为0 。 选择表格，居中对齐表格后，执行命令/格式化表格，弹出“格式化表格”对话框，我们选择AltRows red格式，单击“确定”表格的样式就设定好了。,表格技巧 1、利用小于1像素的细线制作表格边框的方法 在Dreamweaver中可以对表格的边框进行设置，边框宽度值最低可设置为1像素。但是在因特网上“遨游”时，偶尔会看边框宽度小于1像素的情形。这种效果并不是通过设置表格宽度实现的，而是利用单元格
12、间距表现类似边框的效果。 如：在选定整个表格之后，将属性面板的“边框”设置为1，边框颜色设为红色。按“F12”浏览。现在减少边框的宽度，删除刚设置的值，将表格的背景色指定为边框的颜色（如红色）。将间距的值设为1，再将光标定位到单元格内，将单元格的背景色设置为与网页文档的背景色相同的白色，按“F12”浏览，此时表格的宽度看起来远远小于1像素。,2、制作细边框的其他方法 在使用这种方法时，需要使用两个表格；一个是起边框用表格，另一个是填写内容的表格。首先，创建单个表格之后，将该表格的背景色指定为需要的边框颜色，并将“间距”值设置为1.然后，在表格中插入宽度为100%的表格，并未表格填充内容。统一内
13、侧表格的颜色和网页文档的颜色之后，再统一两个表格的大小，就能制作出细边框表格了。,3、如何确定表格和单元格大小 在Photoshop等编辑图形程序中对网页的各个部分进行分割后保存时，需要预选确认表格和单元格的大小。简单地说，标题所在单元格的大小应与菜单图像的大小一致。另外，在设计其他页面布局时，应在Photoshop中分割图像之前，预先确定整体布局和布局表格的大小。,4、将默认文件扩展名改为.html 在Dreamweaver中保存网页文档时，默认状态下采用“*.htm”扩展名。如果想保存为html格式，要想输入精确的扩展名。但是，只要在Dreamweaver内置的XML文档中稍做一些修改，就
14、可以将默认扩展名修改为.html。 如：打开“C:Program FilesMacromediaDreamweaver 8ConfigurationDocumentTypesMMDocumentTypes.xml”文件，此时，将在Dreamweaver中打开“MMDocumentTypes.xm”的源代码。在代码的第3行“winfileextension=htm,html,shtml”设置扩展名顺序，就能更改默认文件扩展名了，即调换html和htm的位置将html放到第1位，按“Ctrl+S”，重新启动Dreamweaver程序。此时，在创建网页文档之后进行保存时，显示的默认扩展名是“*.html”。,