用Dreamweaver MX巧妙格式化表格

dreamweaver

  表格制作好了,内容也有了,怎么看着别扭呀!哦,还没有给表格化化装--格式化表格呀,俗话说:人靠衣服也靠鞍,要想让你制作的网页漂漂亮亮、美观大方,还有很长的路要走呢!

  一、格式化表格
  表格的格式化主要包括表格的对齐方式、间距与边距的调整、边框的设置及背景的设置。大部分工作可以通过表格的属性面板完成,如图所示。

  对齐:选定表格后,通过属性面板中Align(对齐)设置表格在网页中对齐方式:居中、居左或居右,如果你要使表格想去哪就去哪,想不去哪就不去哪,还得另想高招:
  1、将表格放置到层中;
  2、表格中嵌套表格。
  CellPad(边距)和CellSpace(间距):搞清楚两个概念是关键:边距是指单元格中文本与单元格边框之间的距离,而间距是指单元格之间的距离,如图所示,两者的单位都是象素,默认情况下以间距2,边距1的设置显示表格。

  表格的边框:可设置颜色和宽度,在“Border(边框)”域中默认值是1,增大数值可使边框宽度增加,形成立体边框,若输入的数值为“0”,则在浏览网页时不显示的表格的边框,只显示其中内容,这在网页设计中是应用比较多的。通过“BrdrColor(边框颜色)”域设置边框的颜色。
  表格背景:在“BgColor(背景颜色)”和“BgImage(背景图象)”域中对背景可设置颜色和图象,在设置背景图象时若表格大于图象,则图象是重复出现的。有时可形成奇特效果。

  二、格式化单元格
  单元格的格式化包括单元格及其中内容的格式化,通过单元格的属性面板进行设置,如图所示。

  单元格中文本:主要对字体、字号、颜色、对齐方式、是否换行等设置。在这里特别说明的是“NoWrap(换行)”的设置,默认单元格中的文本“换行”的,如果内容较长且要求相对完整,那么就要设置为“不换行”,选中“NoWrap”后的复选框即可,这样在网页浏览时表格的宽度可能超过显示器屏幕。选中“Header”后复选框可将光标所在行设置为标题:文本加粗并自动居中。
  单元格背景:在“Bg(背景)”域中给单元格加上背景颜色或图象,方法与表格背景的设置相同。
  单元格边框:在“Border(边框)”域中设置单元格的颜色。

  三、使用设计方案格式化表格
  使用“格式化表格”命令可以向表格快速应用一个预置的设计。您可选择选项定制该设计。若要使用预置设计:
  1、选定表格然后选择“Commands/Format Table”。
  2、在出现的对话框左边列表中选择一个设计方案,右边将显示该方案的一个样本。如图所示:

  3、若要进一步定制设计,可以对“RowColor(行颜色)”,“TopRow(首行)”及“LeftCol(首列)”进行修改。
  4、若要修改边框宽度,在“Border(边框)”域中输入一个数值,如果不需要边框则输入0。
  5、若要对表格单元格(td标签)而不是表格行(tr标签)应用设计,请选择“Apply All Attributes to TD Tags Instead of TR Tags(将所有属性应用到TD标签而不是TR标签)”。
  表格单元格格式化会覆盖您为该单元格所在行指定的一切格式。然而,如果您需要行中的所有单元格都格式化到一种格式,那么最好是格式化该行而不是该行的每个单元格,这样可以得到更加清楚而简练的HTML源代码。
  6、点击“应用”或“确定”以使用选定的设计格式化表格。

  四、格式化表格与单元格中的几个顺序问题
  如果同时设置了表格背景和单元格背景,会出现何种现象呢?即那一种设置优先呢?
  当在“文档”窗口中格式化表格时,您可以定义要应用到整个表格或是选定的行,列,单元格的属性。当某属性,如背景颜色或对齐方式,对整个表格设置与对表格某些单元格的设置不同时,理解Dreamweaver如何解释HTML源代码就很有用了。
  当同样的属性在表格中被多于一次设置时,Dreamweaver将采用如下的解释方式:单元格格式(td标签的一部分)优先权高于行格式(tr标签),而行格式的优先权高于表格格式(table标签)。所以,如果您为一个单元格指定其背景色为蓝色,而将整个表格背景色设置为黄色,该蓝色的单元格并不会变为黄色,因为td标签的优先权高于table标签。

时间: 2024-10-26 07:11:08

用Dreamweaver MX巧妙格式化表格的相关文章

Dreamweaver MX 2004 表格设计

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

Dreamweaver MX 2004 表格的使用

dreamweaver 网站设计者们得知Dreamweaver MX 2004问世,都在第一时间去享受它带来的最新功能,为迎合现在的网站开发要求,Dreamweaver MX 2004版本在动态网站建设的功能上做出了很大的改进.在界面功能的设计上方面,Dreamweaver MX 2004对使用方便性也做出了相当大的调整,包括在表格的设计上.CSS效果的定义上等等,都给我们耳目一新的感觉. 今天我们就一起来看看Dreamweaver MX 2004在创建表格方面的改进. 在表格创建的设置面板中,

使用Dreamweaver MX表格排序功能

dreamweaver|排序 教育信息化时代,考试成绩也要求上网公布.一次我将考试成绩制作成一个HTML文件,如图1所示,领导审查的意见是"将成绩按名次排列",可是所有的成绩已经用Dreamweaver MX制作好了,若先用Execl按要求排序,再导入到Dreamweaver MX制作,呵呵!太麻烦了,早就知道Dreamweaver具有排序功能,一直没有实战,何不利用Dreamweaver MX演练一番? 在Dreamweaver MX中,您可以对一列的内容进行简单排序,也可以对两列的

Dreamweaver MX 2004 打造细线表格[视频教程]

dreamweaver|教程|视频教程 文字教程:Dreamweaver MX 2004 打造细线表格 简要介绍:本例讲解了Dreamweaver一个非常实用的小技巧,通过背景色的填充来造成"视觉欺骗",从而创建1个像素粗细的表格.从而弥补了默认表格不精细美观的缺点. 全屏观看:第一集 第一集 点击这里播放第二集

Dreamweaver MX 2004 新功能试用:表格

dreamweaver 网站设计者们得知Dreamweaver MX 2004问世,都在第一时间去享受它带来的最新功能,为迎合现在的网站开发要求,Dreamweaver MX 2004版本在动态网站建设的功能上做出了很大的改进.在界面功能的设计上方面,Dreamweaver MX 2004对使用方便性也做出了相当大的调整,包括在表格的设计上.CSS效果的定义上等等,都给我们耳目一新的感觉. 今天我们就一起来看看Dreamweaver MX 2004在创建表格方面的改进. 在表格创建的设置面板中,

Dreamweaver MX应用表格排序

dreamweaver|排序 在Dreamweaver MX中,您可以对一列的内容进行简单排序,也可以对两列的内容进行更为复杂的排序.您不能对包含有Colspan或Rowspan属性的表格进行排序的,也就是说,不能对那些包含有合并单元格的表格进行排序. 下面就看一下具体的排序过程吧! 1.将光标移动到表格内任一单元格内,或选定表格,单击"Command/Sort Table-",打开Sort Table对话框,如图所示. 2.在对话框中进行如下的选择: 在Sort By选项中选择要排序

Dreamweaver MX 2004做ASP程序

dreamweaver|程序 最近论坛和QQ里总有人问,"我要学习ASP但是不知道从哪里学起?有没有初级入门的教程?",其实本站中已经有好多关于ASP的教程了而且还有相关的书籍提供大家下载,可能是没看到的原因吧?从今天开始我编写个教程教你一步一步学习ASP,在这里我们使用可视话的编程工具Dreamweaver MX 2004来实现开发ASP程序,在以后我将陆续给大家介绍如何开发ASP.NET.PHP,JSP.本教程写得比较简单,上手应该比较容易,大家跟着一步一步做就行了.我的操作系统是Win X

Dreamweaver MX 2004做ASP程序(3)显示数据库的数据

dreamweaver|程序|数据|数据库|显示 1.打开Dreamweaver MX 2004,在站点里面先新建个ASP页面(index.asp),选择新建项目中的"ASP Javascript".打开应用程序面板,在"应用程序"面板中选中"数据库"标签.只要我们在前面建立了站点,选择了文档类型(即我们选的ASP Javascript的),并且还测试了服务器(http://localhost/myweb/).那现在就点击"+"

Dreamweaver MX Ultradev探索(5-1)

dreamweaver Dreamweaver MX Ultradev探索(5)删除数据库中的记录 继续我们的Dreamweaver MX之旅,在上一章里我们学习了如何使用DW MX自带的服务器行为更新数据库里的记录,大家应当还应记忆犹新吧.它强大的服务器行为可以在我们不用书写一行代码的情况下对数据库里的数据库进行操作,比如说前面提到的插入,更新,删除等.在这一章里,我们将学习如果用DW MX对数据库里的记录进行删除. 先说说它的基本概念吧.:) WEB应用中可能包含允许用户通过浏览器来删除数据