frontpage中的网页制作线条技巧

线条是网页制作中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 < HR > 的标签,也就是水平直线。但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条。在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得。

为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是否能够正确的显示。其中就有一个水平线的颜色属性问题。我们都知道 < HR > 标签具有一个 Color 属性,例如我们要制作一条红色的线条就可以用这样的代码:
< hr color="颜色代码" >

当你在 IE 中浏览这一段代码时你能得到一个你希望的红色线条,可是如果你的浏览器是 Netscape 的话,那么你看到的只是一个灰色的线条,因为 Netscape 根本就不支持 HR 的 Color 属性。我们该怎么办呢?

1、使用表格

现在流行的网页制作中我们大多数是用表格来规划一个网页的基本布局,因此使用表格的单元格来制作线条不会给你增加太多的麻烦。

首先我们需要将表格的单元格边距属性(cellpadding)设置为 0 。如:< table cellpadding="0" >,注意:只有将这个边距属性设置为 0 你才能制作一个小于 4 个象素的线条。因为 HTML 中 Cellpadding 的默认值是 2 个象素,上下两个边距相加就是 4 个象素。如果不设置 Cellpadding 属性哪怕是你将这个单元格的高度(Height)设置为 0 ,这个单元格的实际高度仍然是 4 个象素。
将单元格的高度(Height)设置为你希望得到的线条的高度。
设置单元格的背景颜色,如:
利用图像制作软件制作一个 1 * 1 的 GIF 格式的图像(一个点)。这里又有一个技巧,你可以将这个图像设置为透明的,这样你就可以利用这个“点”来制作任何颜色的线条,而不需要为每一种颜色的线条都制作一个这样的“点”。
这时你再用 Netscape 浏览这个表格你就可以看到一个红色的线条了。也就是说在 Netscape 中当一个单元格中什么也没有的时候,无法显示这个单元格的背景色,而只要这个单元格中有一点东西,就可以显示单元格的被景色。笔者也不知道什么原因但事实如此。

使用这一种方法你也可以制作纵向的线条。你只是需要将上述步骤的第 2 步的宽度改为你想要的线条的宽度,然后再设置高度或者调整这个单元格的行跨度以达到你想要的长度。这需要你在网页制作过程中根据自己的实际要求来做出相应的处理。顺便说一句,以前《电脑报》登过一篇文章说可以使用 HR 的 Size 属性来制作纵向线条,但我在实际中发现这种方法只能制作 100 个象素长的纵向线条。

(0)

相关推荐

  • 在Frontpage 中定义网页CSS样式

    说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的,但本文所描述的方法在FrontpageXP中基本上是适用的!另 ...

  • 网页设计\网页制作常用软件分享

    一.专业的网页设计.网页制作软件: 1.CorelDraw:通过CorelDRAW9的全方面的设计及网页功能融合到现有的设计方案中,制作矢量的插图.设计及图像,出色地设计公司标志.简报.彩页.手册.产 ...

  • 网页制作与美化工具

    目前.制作网页有两种方法:一种是使用FrontPage, Dreamweaver等网页制作工具进行:另一 种是使用HTML来编写.由于网页中含有文本.图片.图像.动画.齐效.视领等多种信息表达形 式. ...

  • 网页制作软件FrontPage XP的使用技巧

    最近笔者学会了用FrontPage XP做网页,心理特高兴,非常想把我在制作主页过程中的一些经验和大家交流交流.切磋切磋,我们一起来看看吧. 用表格做按钮 很多人为了做出按钮效果,不得不去动用一些图像 ...

  • 网页设计或UI设计中实用的制作技巧

    操作方法 01 1.巧妙设置对象名称我们在用Dreamweaver来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格.图象等,如果我们没有给某一个网 ...

  • iOS7在Safari网页中查找关键字的小技巧

    iOS7的Safari与旧版相比,界面和操作上都有很大不同。特别是直接在网页中搜索单词和查找关键字,在iOS7中轻微的改变也容易让人一头雾水。今天小编就向大家着重介绍在Safari网页中查找关键字的小 ...

  • Dreamweaver中怎样插入图片(网页制作设计)

    我们上网的时候可以看到很多精美的 网页,这些网页都是 网页制作者精心设计出来的,那么 Dreamweaver网页中如何 插入精美的图片呢?下面小编来给各位亲们讲解一下. 操作方法 01 第一步,先打开 ...

  • FrontPage教程编辑网页

    现在进入FrontPage.单击任务栏"开始"按钮,选择"程序"选项,单击"Microsoft FrontPage"选项就可以了. 可能你会 ...

  • FrontPage设计精彩网页九"慎"

    在网上游荡,看着别人的精彩主页难免心里痒痒的,但自己精心布置的家(个人主页),如果在不同的浏览器中呈现不同的面目,搞得一塌糊涂的话,你的个人主页恐怕也真成了"个人看的主页"了 .下 ...