【vgdesign博客原创文章，转载请注明】

网页设计中可以用精致的虚线进行模块的间隔，利用Photoshop的图案和填充功能可以方便的实现虚线的绘制并应用到网页设计中。

1、设计虚线重复单元

建立X像素宽、Y像素高的图片，注意，XY有一值为1px，另一值随意，但决定了虚线的疏密程度。笔者这里讲解横向虚线，因此高为1px；宽设定为5px，其中有色像素3px，透明2px，如图所示。

全选这张图片（也就是5个像素点，快捷键为Ctrl+A），然后选择菜单命令“编辑>定义图案”，弹出图案名称对话框，起好名字，确定，这个重复单元就保存在了Photoshop的图案库中。

2、使用虚线重复单元

常用的使用环境有两种，一种在Photoshop中使用，另一种在Dreamweaver等网页设计环境中使用，二者都将生成虚线线条，下面分别讲述。

（1）Photoshop使用：

建立新图层，利用工具栏中的“单行选框工具”建立一单行选区。

选择菜单命令“编辑>填充”，弹出“填充”对话框。注意，此时图中的虚线为选区显示的虚线，非最终做好的虚线。

在“使用”下拉菜单中选择“图案”，然后点击下方的自定图案，选择刚才建立的重复单元。这个图案同时也可以被其它涉及到利用图案的命令所用。

去掉选区（Ctrl+D），虚线就做好了。再次注意，一定要在新建的普通层上做虚线。

（2）Dreamweaver使用：

如果想在网页设计中使用虚线单元，请先保存刚才的单元图片为GIF格式，然后在Dreamweaver中将其设定为背景图片，并进一步规定横向或者竖向排列即可。HTML代码形式为：

<td background="dottedline.gif" style="background-repeat:repeat-x"></td>

dottedline.gif为重复单元图片的名称，属性background-repeat规定了虚线的排列方向，分为repeat（横竖都排）、repeat-x（横排）、repeat-y（竖排）、 no-repeat（不排）等几种。

:: vgdesign ::