Dreamweaver表格设计

   表格设计

  表格是现代网页制作的一个重要组成部分。表格之所以重要是因为表格可以实现网页的精确排版和定位。本节教程我们分为两步来进行。首先看表格操作的一个实例。然后来看一些表格操作的基本方法。在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍。(看下图)


  一张表格横向叫行,纵向叫列。行列交叉部分就叫做单元格。

  单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。整张表格的边缘叫做边框。

  下面看看我们使用表格制作的页面的实例


  这幅页面的排版格式,如果用以前我们所讲的对齐方式是无法实现的。因此我们需要用到表格来做。实际上是用两行两列的表格来制作。

  1、在插入栏中选择


  按钮或“插入”菜单>选“表格”。系统弹出表格对话框如下图。这些参数我们都已经认识了。行:2。列:2。其余的参数都保留其默认值。。


  2、在编辑视图界面中生成了一个表格。表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。当光标移到点上就可以分别调整表格的高和宽。移到表格的边框线上也可以调整。(如下图)


  3、在表格的第一格按住左键不放,向下拖拽选中二格单元格。(如下图)


  然后在展开的属性面板中选择合并单元格按钮(如下图红框所示)。将表格的单元格合并。如果要分割单元格,则可以用合并单元格按钮右边的按钮。


  合并结果如下图。


  4、用鼠标拖拽表格的边框调整到适当的大小。

  5、单击左边的单元格,然后输入“摄影作品赏析”文字,并调整大小,因是竖排应每个字回车一次。如果需要调整格子的大小。只需要鼠标的光标移动到边框上拖拽即可。

  6、在右边上下单元格内分别插入图片和文本。页面的基本样子有了。


  7、光标移动到表格的边框上单击。表格周围出现调整框,表示选中整张表格。然后,在属性面板中将“边框”值设置适合的值,如果为0,边框在编辑状态,为虚线显示,浏览时就看不见了。

  一个符合要求的页面在表格的帮助下做好了。

  通过上面的操作我们对于表格有了一个初步的认识。还要提示一点,对整幅表格操作和对一个单元格操作的时候,相应的属性面板是不同的。

  表格颜色设置,选择整幅表格后,利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下,其余操作同上。

  下面我们就来看看这些属性面板的区别。

  表格的属性面板,要出现这个面板必须先选中整幅表格,方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图:


  选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图:


  对表格操作的几种常用方式:

  合并:将选中的连续单元格合并成为一个单元格。

  分割:将一个单元格分割成若干单元格。

  水平对齐方式:分为(左)(中)(右)三种。

  垂直对齐方式:分为(顶)(居中)(居底)(基线对齐)

  表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。


  在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法:

  选中一行,把光标移到该行的最左边单元格的左面,光标会变成箭头状。单击就可以选中一行。

  选中一列,把光标移到该列的最上边单元格的上面,光标会变成箭头状,然后单击可以选中一列。

  选中整张表格,把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意:

  选中单元格。单元格可以同时选中多个。选择连续的单元格,光标先选中的一个单元格,按shift键不放,选取最后一个单元格。选不连续的单元格。按住Ctrl键,点取所需要的单元格即可。

  我们对于表格的使用就讲到这里,表格是网页制作的基本技术,只有通过不断实践才能充分掌握。

  通过上面的操作我们对于表格有了一个初步的认识。还要提示一点,对整幅表格操作和对一个单元格操作的时候,相应的属性面板是不同的。

  表格颜色设置,选择整幅表格后,利用属性面板的颜色选择器设置背景色。单元格也可单独设置。鼠标在需要设置的单元格点一下,其余操作同上。

  下面我们就来看看这些属性面板的区别。

  表格的属性面板,要出现这个面板必须先选中整幅表格,方法上面已经提到过了。您可以在众多选项中填入需要的参数。如下图:


  选中了单元格之后属性面板就发生如下变化了。选择行或者列都属于选中单元格。如下图:


  对表格操作的几种常用方式:

  合并:将选中的连续单元格合并成为一个单元格。

  分割:将一个单元格分割成若干单元格。

  水平对齐方式:分为(左)(中)(右)三种。

  垂直对齐方式:分为(顶)(居中)(居底)(基线对齐)

  表格还可以增加或者删除行或者列。在一个单元格中单击鼠标右键。在右键菜单中选择表格选项>>选择“插入行或列”。系统会弹出对话框如下。


  在对话框里填入数据即可。最后要说的是选中表格中的各种元素的方法:

  选中一行,把光标移到该行的最左边单元格的左面,光标会变成箭头状。单击就可以选中一行。

  选中一列,把光标移到该列的最上边单元格的上面,光标会变成箭头状,然后单击可以选中一列。

  选中整张表格,把光标移到表格的左上角或右边框或下边框线上。单击即可选中整幅表格。选中的表格会在周围出现一个黑框表示整张表格选中了。请看如下示意:

  选中单元格。单元格可以同时选中多个。选择连续的单元格,光标先选中的一个单元格,按shift键不放,选取最后一个单元格。选不连续的单元格。按住Ctrl键,点取所需要的单元格即可。

  我们对于表格的使用就讲到这里,表格是网页制作的基本技术,只有通过不断实践才能充分掌握。

时间: 2024-10-30 22:28:30

Dreamweaver表格设计的相关文章

Dreamweaver MX 2004 表格设计

dreamweaver|设计 Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱.在此笔者就谈谈该软件新版本中的表格设计. 表格在网页中的重要性不言而喻:网页的框架.结构都要通过合理的表格布局来完成和实现. 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1). 其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题.布局功能以及附加信息显示

教程/dreamweaver/提高 细品DW MX 2004表格设计

dreamweaver|教程|设计 Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱.在此笔者就谈谈该软件新版本中的表格设计. 表格在网页中的重要性不言而喻:网页的框架.结构都要通过合理的表格布局来完成和实现. 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1). 其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题.布局功能以及附加信

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

Dreamweaver网页制作之表格设计

表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我们所讲的对齐方式是

Dreamweaver网页设计制作技巧与提高

dreamweaver|技巧|设计|网页|网页设计 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素

细品DW MX 2004表格设计

设计 Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱.在此笔者就谈谈该软件新版本中的表格设计. 表格在网页中的重要性不言而喻:网页的框架.结构都要通过合理的表格布局来完成和实现. 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1). 其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题.布局功能以及附加信息显示功能. 在Header中

简介Word 2013表格设计的新特性

微软在过去几周提供了许多Word 2013的信息,包括近期一些此软件关于如何处理批注与修订的文章.本周,微软透露了一些在Word 2013中表格设计的新特性. Word官方博客的一篇博文中,微软表示,用户在Word 2013中的表格里插入行或列时,可以用其全新设计的插入按钮.插入按钮会在表格外任意行与列之间显示.微软说,插入控制按钮显示后,只需点击一下,相应位置的行或列就插入完成了. 微软还对Word 2013的表格风格进行了全新的设计.新版Word允许用户使用列表或网格设计风格对表格进行快捷风

Dreamweaver表格以及列表隔行换色的js效果代码

Dreamweaver表格以及列表隔行换色的js效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

表格设计你要知道的(下)

接上篇,看似简单的表格真要设计好还是需要花些气力的,看看下面这些细节设计点,你是否也知道? 5.重点在于行或者列 表格是由最简单的行.列.单元格构成的,根据浏览的目的和希望突出的信息不同,行.列.单元格都可以通过一些变化进行强调,这是将信息通过表格传达出去的最为根本的使用方式. 邮箱产品就是强调行的表格设计的典范,像Gmail.Yahoo Mail.126邮箱,这些表格没有纵向的线条,用横线构架出行的视觉,数据信息均匀分布,更强调每一行内的信息连续性,不强调行与行的数据对比情况.同时,辅助于背景