网页制作 用Dreamweaver制作细边表格

dreamweaver|网页

  在Dreamweaver中插入一个表格,若设置其“边框(Border)”为1,预览时其边框线较粗。对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧--巧用背景颜色和间距制作细边线表格。

  以制作一个4行3列、边框线为红色细线的表格为例:

  Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格。

  Step 2 在“属性”面板中设置此表格的属性如下:边距(cellpadding)根据需要自行设置值(例如10);间距(cellspacing)为1;边框(Border)为0;背景颜色(border)为红色。

  Step 3 选中此表格的所有单元格,在“属性”面板中设置所有单元格的属性如下:背景颜色(Bg)为白色或红色以外的其他颜色。

  最后,保存网页,按F12预览。怎么样,一个4行3列的红色细线表格是不是呈现在你面前?

 

  另外,如果我们照常想用表格来布局定位,但只要外边框线显示为细线,而内部单元格的分隔线不显示的效果,则可以配合使用嵌套表格。下面以表格外边框线为红色细线为例来说明操作方法:

  Step 1 在Dreamweaver的设计视图插入一个1行1列的表格。

  Step 2 在“属性”面板设置此表格的属性如下:“边距”根据需要自行设置(例如5);“间距”为1;“边框”为0;“背景颜色”为红色。

  Step 3 选中此表格唯一的单元格,在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。

  Step 4 将光标定位在此1行1列的表格中,根据需要插入一个几行几列的嵌套表格,此嵌套表格的“边框”一定设置为0,“边距”和“间距”可以根据需要设置或不设置,其他属性可不进行设置。

  这样,我们就可以在嵌套表格的不同单元格内插入文字、图片等其他网页元素了。

  是否有点动心了?赶快试试吧!

时间: 2024-10-27 18:46:46

网页制作 用Dreamweaver制作细边表格的相关文章

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我

使用Dreamweaver制作网页时文字自动换行的小技巧

在使用Dreamweaver制作网页时,遇到制作表格的时候,内部的文字没有自动换行,我应该怎么做呢?下面提出两种解决方案,大家可以参考!在这里你如果知道该技巧,你可以略过!如果你不知道,不要说什么现在网页中已经没有表格了这样绝对的话啊?Web标准时代网页中照样应该是不能把表格完全抛弃的!呵呵. 解决表格中文字自动的换行的情况有两种可能: 第一种,你用CSS把表格内文字的字体设置成了英文字体,这样在Dreamweaver里表格内的文字不会自动换行,但这仅是Dreamweaver里的显示效果,在IE

Dreamweaver制作细线表格

表格是网页的重要组成部分,合理使用表格,将会使网页开起来更富特色,而其中的细线表格也是我们最常用的技巧,下面看看如何制作细线表格. 打开Dreamweaver(下文中该软件将简称为Dw)后,可以看到如下的界面(如图1): 图1.Dw窗口 首先,我们在工具面板中选择按钮创建一个表格,单击后,将会出现如图(2)所示的表格属性设置 图2.表格属性窗口 这里我们分别设置参数为:行=1,列=1,宽度=270[象素],边框=0,单元格边距=0,单元格间距=1这样设置后,将会在编辑区生成如图(3)所示的表格

Dreamweaver制作网页小技巧汇集

本文汇集了一些Dreamweaver制作网页时的可以用的一些小技巧.希望对您有所帮助. 1)怎样将 Dreamweaver 集成到 IE 浏览器? Dreamweaver 安装程序会在上下文选单增加一个" Edit with Dreamweaver "命令,我们还可以修改 Windows 的注册表使它与 IE 集成.就象 MS Word . Frontpage 和 Notepad 一样,通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页. 将下面文本的最后一行要改

Dreamweaver制作复杂交换图像

dreamweaver     制作效果 我们要制作出一列7个按钮的图片,并且在这一列的按钮图片的前面加上一个指针,我 们要实现的效果是当我们在将鼠标移向某一个按钮图片的时候,这个按钮上面的文字变换颜色.并且指针指向这张图片(效果如图1所示). 图1 制作原理 交换图像的制作原理是应用到Dreamweaver中的行为面板上的翻转图像(Swap image)这一个工具.将它设置成为当产生鼠标悬停在某一个按钮图片的动作的时候,让按钮本身实现一个图像的交换(交换成为黄色文字的图片),与此同时设计指针图

Dreamweaver制作文字特效

我们常用的网页制作工具Dreamweaver MX不仅可以制作网页,而且利用其中的CSS滤镜我们还可以对文字或图片进行简单的特效处理.下面我们就通过几个例子来看一看在Dreamweaver中是如何制作特效文字的. 光晕字 首先启动Dreamweaver,在新文档中插入一个1×1的表格,边框设置为0,然后在其中输入需要修饰的文字. 单击右面的浮动面板中的"设计→CSS样式"打开这一浮动面板. 面板右下角的四个按钮分别是:添加.新建.编辑以及删除CSS样式. 注意:在Dreamweaver

用Dreamweaver制作动态链接的Flash按钮

dreamweaver|按钮|动态|链接 Dreamweaver 4.0 以上的版本都提供了"插入Flash按钮"功能.如下面演示中的flash按钮,就是由Dreamweaver制作并插入的. 这里先介绍一下普通的flash按钮的制作方法,以Dreamweaver MX为例:新建一个HTML文件,并先保存它.然后在"Insert(插入)"菜单的"Media(多媒体)"标签中,点击"Flash Button(Flash 按钮)"

Dreamweaver制作基于WordPress的留言本III

虽然说在Dreamweaver量身打造Wordpress留言板(二)这一篇当中,让留言板后台的帐号与Wordpress帐号共用,但登入的部分,还是得个别登入,这样感觉还是有些小麻烦,于是梅干突然想到,若能取得Wordpress是否已登入的话,那将子就只要登入一次好了,于是上网Google了一下,哈-果真可以也,于是梅干就把它与留言板整合起来,让Wordpress登入后,就可直接编辑留言,并且也把del.php加入安装防护,以防有人士若直接在后面打del.php?id=xxx时,就可直接删除留言,