网页中线条制作技巧

2008年9月28日 | 标签:

一、直线
也许是XP风格的影响吧,现在网页设计中经常使用直线效果。最常用的是<HR>标记(水平直线),它有一个Color属性,可以用代码:<hr noshade size=”1″ width=”100%” color=”0000FF”>产生一条蓝色水平直线。不过Netscape是不支持<HR>的Color属性的。所以我们要用最熟悉的表格/单元格,来完成这个“光荣而又艰巨”的任务。以下我们以Dreamweaver为例。
首先,将一个表格的边距(CellPad)设为“0”,这样才能做出无边框的表格哦(包括有宽度的虚边框);设置表格/单元格的背景色,如“#0000FF”。到这里还不行,因为Netscape也不支持显示无内容的表格/单元格背景色。
接下来的就是关键了,打开Fireworks(任何作图软件都可以,我习惯用Macromedia的东东,呵呵),新建一个1×1的文档,任取一种颜色做背景(或用默认的白色也可),然后按Ctrl+Shift+X,选项中格式设为Gif,按选择透明色按钮(最左下角的那个)选择色素表中的“白色”,然后按“导出”按钮,以适当文件名保存。
最后,在刚才的那个表格中插入这个1×1的Gif图像,设置其宽为你需要的宽度(并非必须,其实只要表格中有东东Netscape就能显示其背景色了)。OK,搞定!
水平竖线的制作方法也类似:表格的边距(Cellpadding)仍然要设为“0”;将其中一个单元格的宽度设为“1”(注意:DW在创建表格时会自动在每一个单元各种加入空格标记 ,一定要把这格单元格中的这个空格标记删除);设置这个单元格的背景色;插入刚才的那个1×1的Gif图像;调整图像高度。
另外,如果是要做一个细框表格(边线宽度为1像素的矩形框),只要三步就够了:插入一个1行1列的表格,设置其“间距(CellPad)”为1;将此表格的背景色改为你想要的颜色,如#0000FF;将光标定于唯一的单元格中,在属性面板中将单元格背景色改为白色(假设你网页的背景色为白色)。看到了么,很漂亮的细矩形框!
二、虚线
最简单的制作虚线的方法就是将虚线做成图片,但这样不但增大了网页下载时间,也不能灵活的应用于网页中各个地方。自从有了IE5.5,我们又有了一种利用CSS的新方法!
方法一:利用水平直线(<HR>标记)的Class属性。
首先在网页适当地方插入一条水平直线;在网页的<Head>与</Head>之间加入以下代码:
<STYLE type=text/css>
.dotline {
BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
}
</STYLE>
然后修改水平线的代码为:<hr class=dotline color=#0000FF size=1>。按F12看看吧,效果是不是很不错!
方法二:利用表格/单元格的Class属性。
建立一个表格;然后在网页的<Head>与</Head>加入以下代码:
<STYLE type=text/css>
.dtright {
BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: #0000FF 1px solid; BORDER-TOP: black 0px solid
}
.dtleft {
BORDER-BOTTOM: black 0px dashed; BORDER-LEFT: #0000FF 1px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: black 0px dashed
}
.dttop {
BORDER-BOTTOM: black 0px dashed; BORDER-LEFT: black 0px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: #0000FF 1px dashed
}
.dtbottom {
BORDER-BOTTOM: #0000FF 1px dashed; BORDER-LEFT: black 0px dashed; BORDER-RIGHT: black 0px dashed; BORDER-TOP: black 0px dashed
}
</STYLE>
最后修改表格标记<TABLE>为:<TABLE border=0 cellPadding=0 cellSpacing=0 class=dttop width=”100%”>。呵呵,表格的顶边就是一条虚线了。同样,单元格只要修改标记<TD>为:<TD class=rdash width=50%>就可以了。
如果要产生左、右、下边界的虚线效果,只需将class属性分别改为dtleft、dtright、dtbottom即可。
方法三:利用单元格背景图像。
打开Firework,新建一个2*1的图像,在其中任何一个像素中用铅笔工具涂上非背景色,然后Ctrl+Shift+R导出为gif文件;然后设置单元格的背景图片属性为这个文件,设置单元格的高为1px,并在单元格中插入上文所做的1*1透明图片,调整大小。完成!
如果觉得这个虚线太密了,可以把2*1文件改为建立一个4*1的,以此类推。

目前还没有任何评论.