在设计网页和多媒体界面的过程中，经常会使用一些线条和框架来划分界面区域，尤其是在线条和框架较多的网页中。本节将介绍如何制作网页中常用的线条和边框。

首先，虚线的产生

在网页中，虚线是线条和边框最常见的设计。一方面，他们可以使网页的结构清晰，另一方面，他们可以装饰和点缀图片。

(1)执行“文件新建”菜单命令，如下图所示。

(2)双击工具箱中的“抓取工具”放大图像。(3)在工具箱中选择“矩形框选择工具”，在工具选项栏中将“羽化”值设置为0，在图像窗口中拖动鼠标，在中间建立一个像素选择区域，用黑色填充，如下图所示。

(4)按CtrL A选择所有图像，执行菜单栏中的“编辑定义”命令，在弹出的“定义图案”对话框中点击“确定”即可定义图案。(5)重新创建图像文件，然后在工具中选择“单线框选择工具”，创建单线选择区域。执行菜单栏中的“编辑填充”命令，选择刚刚在弹出的“填充”对话框中定义的图案进行填充，得到一条虚线。将虚线应用于网页的效果如下图所示。

二、立体线条的制作

使网页中线条和边框的设计具有独立感，可以极大地丰富网页的视觉效果，打造更加活跃的网页界面。本文介绍了一种制作具有独立感线条的方法。(1)执行“文件新建”菜单命令，创建一个大小为9.5cm5cm、分辨率为72像素/英寸的图像文件。(2)将背景色的RGB值设置为95、98、1 01，用灰色填充图像的背景色。(3)将图像放大200%。(4)在工具阶段选择“铅笔工具”，在铅笔工具选项栏中设置参数，如下图所示。

(5)打开画笔面板，设置参数，如下图所示。

(6)创建一个新层“层1”。(7)将前景色的RGB值设置为1 93、1 94和198，按住Shift键的同时在屏幕中水平拖动鼠标，绘制一条两种宽度的虚线，如下图所示。

(8)新建一个图层“Layer 2”，然后将前景色设置为黑色，按住Shift键的同时将鼠标水平拖动到灰色线上方，然后画一条同样长度的黑色虚线。(9)选择工具箱中的“移动工具”，然后用箭头键稍微移动一下“第2层”的黑色虚线，使“第1层”和“第2层”中的两条虚线有交错的效果，两条虚线偏移一个像素，如下图所示。

(10)双击工具箱中的“放大镜工具”，以1 00%的比例显示图像，产生立体效果，如下图所示。

这样的立体线条如果应用到网页设计中，会产生很好的视觉效果。如下图所示，如果重用这条线，可以形成大面积的分割。

三、斜纹线的制作

斜纹线经常被用作网页中功能区域的底纹，但很少被用作分割线。斜纹线的制作主要采用Photoshop软件的定制图案技术，具体操作步骤如下。(1)执行“文件新建”菜单命令，创建一个大小为9.5厘米X5厘米、分辨率为72像素/英寸的图像文件。(2)将背景色的RGB值设置为95、98、1 01，用灰色填充图像背景。(3)将图像放大到1600%。(4)创建一个新层“层1”。(5)在工具箱中选择“铅笔工具”，在铅笔工具选项栏中设置参数，如下图所示。

(6)将前景色的RGB值设置为1 90、1 91、1 92，点击屏幕绘制两条由1 0像素组成的平行斜线，如下图所示。

(7)在工具箱中选择矩形工具，在工具选项栏中将Feather值设置为O，在屏幕中拖动鼠标创建矩形选择区域，然后在Layers面板中隐藏Background图层，如下图所示。

(8)执行“编辑定义图案”菜单命令，在弹出的“图案名称”对话框中输入名称，然后点击“确定”按钮，如下图所示。

(9)按Ctrl A选择所有图像，然后按Delete删除所选区域的图像。(1 0)选择工具箱中的“矩形框选择工具”，在屏幕中创建一个矩形选择区域。(1 1)在工具箱中选择“油漆桶工具”，在“油漆桶工具”选项栏中点击，选择刚刚存储的图案名称，如下页所示。

(1 2)点击选择区域，填充图案，然后按Ctrl D取消选择区域效果，如下图所示。

这条对角线可以作为功能区的底纹，也可以作为网页设计中的点缀。如下图所示，我们将这条对角线应用到导航栏右侧的空白区域，平衡了整个页面，增强了节奏感，使页面更加和谐清晰。

第四，跨线生产

像斜纹线一样，十字纹线也用于网页功能模块的底纹。制作方法和思路与斜纹线基本相同。关键是要准确定义模式样本，这一点非常重要。(1)执行“文件新建”菜单命令，创建一个大小为9.5cm5cm、分辨率为72像素/英寸的图像文件。(2)将背景色的RGB值设置为95、98、101，用灰色填充背景色。(3)以1 600%的比例放大图像。(4)创建一个新层“层1”。(5)在工具箱中选择“铅笔工具”，在“铅笔工具”选项栏中设置参数，如下图所示。

(6)将前景色的RGB值设置为1 90、1 91、1 92，点击屏幕绘制单像素组成的图像，如下图所示。

(7)在工具箱中选择矩形框选择工具，在工具选项栏中将Feather值设置为O，在屏幕中拖动鼠标创建一个正方形选择区域，如下图所示，选择图像，然后在图层面板中隐藏背景图层。

(8)执行“编辑定义图案”菜单命令，在弹出的“图案名称”对话框中输入名称，然后存储图案。(9)按Delete键删除选中区域的图像，然后显示“背景”图层，重新使用“矩形框选择工具”在屏幕中创建一个矩形的选中区域。(1 O)在工具箱中选择“油漆桶工具”，在油漆桶工具选项栏中点击，选择刚刚保存的图案。(11)点击选中区域填充图案，效果如下图所示。

在网页设计中，我们使用交叉线作为导航栏的底纹，使页面看起来干净而不单调。如下图所示，与其他按钮导航栏相比，这种设计具有制作方法简单、效果突出的特点。