dw虚线横线的代码_虚线代码大全

在网页设计工具Dreamweaver(以下简称DW，目前最高版本为4.02，本文例子中用的是4.0版)里有一项十分强大的功能，就是模板！

那模板有什么魅力呢？它又有什么样的特点呢？

利用模板，我们可以固化站点每页都出现的元素。

通过利用模板创建WEB页，可使整个站点具有统一的风格。

只要修改模板，就可以修改应用了该模板的所有WEB页，而不需要手动修改每一页。比如需要更改你的版权时，你是不是要一页一页的进行版权修改？如果有上千页呢？我相信你会一个头两三个大。但如果你用上了模板的话，这些都不成为问题。

下面是个较全面的例子，能迅速的让你掌握模板的使用。

1. 编辑页面

1。单条虚线代码：

大家都知道我们使用

标签就可制作出一个细线条，不过我们可以对

定义一些参数可以获取可爱的细虚线。我们也可以修改其中的color,size的参数可以得到不同的效果……

2。CSS定义表格边框大全(细线/虚线/点线)

定义表格边框全部为1 边框颜色 #C7C7C7代码为：

.tb1{ border:1px solid #C7C7C7;}

定义表格边框左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7代码为：

.td2{ border-top:1px solid #C7C7C7;

border-bottom:1px solid #C7C7C7; border-left:1px solid #C7C7C7;

border-right:1px solid #C7C7C7;}

定义表格边框为1,上边框为0 边框颜色 #C7C7C7 下边框颜色为 #888888代码为：

.td2{ border:1px solid #C7C7C7; border-top:0px;

border-bottom:1px solid #888888}

定义表格边框虚线代码为：

.tb1{ border:1px dashed #C7C7C7;}

定义表格边框点线代码为：

.tb1{ border:1px dotted #C7C7C7;}

方法二：在CSS里面设定。

如果你用DreamWeaver话，只要在CSS面板里new一个style，选择“redefine

HTML

Tag”，再在下拉菜单里先“table”，在弹出的面板里，category里选择border，在border里，将top,left,right,bottom都设成1px，颜色设成你想要的边框的颜色。然后在style下拉框里选择dashed。一切ok。只是所有的表格都会用虚线做边框了。注意，这个效果在浏览器里才能看见。

方法三：直接在html里设置(如果你只想让某一个表格边框是虚线的话)。

在表格的html里加上这个：

style="BORDER-LEFT: #000000 1PX DASHED;

BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED;

BORDER-BOTTOM: #000000 1PX DASHED"

颜色是十六位代码，你可以自己设。

注：方法二、三，只能在IE5.5里用，到了NETSCAPE里一点用处都没有，除非你用做好的底图填充。

网页中呈现虚线

使用Math.floor()可以获得一个数的整数部分。在网页中呈现虚线的原理是，2个点的颜色交替，周而复始。根据这个原理，使用JavaScript写一段document.write单元格的循环程序。首先将程序列出来：

document.write('

height=1

width='+len+'>

');

for(i=0;i

width='+d2+'>

bgcolor=333333>')}

运行的结果如：

........................................

说明：len=400表示虚线的长度为400像素，d1和d2是黑白相间的间隔，cou=Math.floor(len/(d1+d2))，cou表示总共要循环的次数。例如这里是400像素的虚线，黑色点和白色的点都是2像素，那么就要循环100次。由这200个单元格组成一条虚线。

改变虚线的长度，请修改len=400的值；

改变虚线的颜色，请修改bgcolor=333333的值；

改变虚线的高度，请修改height=1的值；

改变虚线的密度，请修改d1和d2的值。

Q：网页中的虚线怎么做？

A：做一个2*1的图片，一半有色彩，一半透明，存成透明GIF，然后把它设置成单元格背景图，把单元格设置为高度为1，删除其中的代码即可实现横虚线效果。竖虚线依此类推。

用CSS也可以办到，把border的属性设置为dotted。

鼠标放到文字上后在文字下面出现下划虚线

A { text-decoration: NONE}

A:hover {border-bottom:1px dashed #6099de }

href="#">

color="#6099de">鼠标放上来会有下划线

打开DW，新建一个站点，我们就取名为“蜘蛛网”。

新建一个空白页面作为内页(通常一个网站只有一个首页，所以对首页我们可以不做成模板)，取名为body.htm。

编辑这个页面，完成如图1。

图1，编辑完成后的body.htm页面，注意A处，此处将作为可编辑区域，下文会针对提及。

2. 生成模板　　编辑完成后，我们将此页保存为模板(注意不是保存为普通的htm网页)。通过DW中的FileàSave As

Template可以存为模板，执行此命令后会弹出Save As Template窗口，如图2。

图2，Save As Template窗口。

图2中的B处为选择站点，我们选择“ 蜘蛛网”，C处为我们要存为的模板文件名，我们填入body。按右上角的Save保存。

这时我们按F8调出site(站点管理器)，在Templates文件夹中可以看到body.dwt(当有模板文件时，DW会自动生成Templates文件夹，dwt为模板类型文件)

3. 编辑模板

在Site中打开body.dwt模板文件，将会发现跟body.htm页面好像没什么分别，但其实是不一样的，在body.htm中是无法添加可编辑区域的。可编辑区域只能在模板文件中添加。

为了让大家更好的理解“可编辑区域”，我们先用此模板生成一个htm文件：点FileàNew From

Template，弹出Select

Template窗口，在emplates中选择body，再点击右上角的Select即可生成一个新的htm文件。我们将此新建页面改名为body2.htm。现在我们用DW将body.htm与body2.htm两文件都打开，比较一下有什么不同。你会发现在body2.htm页面的右上角写着“Template:body”几个字。(说明此页是由body.dwt模板文件生成)同时你会惊讶的发现body2.htm文件竟然不可以编辑(body.htm可以编辑)。对了，这就是由于在body.dwt模板文件中没有定义“可编辑区域”的结果，使得生成的页面都不可编辑了。所以我们必须在模板文件中添加可编辑区域。下面是添加可编辑区域的步骤：

打开body.dwt模板文件，我们希望中间的表格可以编辑(也就是图1中的A处)。但是要在body.dwt文件中，而不是body.htm)，所以要在此处添加可编辑区域。

2) 将鼠标光标放入A处表格里，点击鼠标右键，选择New Editable Region…，弹出New Editable

Region窗口，要求填入此可编辑区域的名称(我们通常称为可编辑区域标记)。我们填入Region01，点击ok关闭此窗口完成当前可编辑区域标记的编辑。此时可以看到在表格中有如图3的显示。

图3，New Editable Region窗口。

说明此处有一个标记为Region01的可编辑区域。

到此为止我们定义了一个可编辑区域，如果有多个编辑区域，同样可以如法炮制。

※还可以通过ModifyàTemplatesàNew Editable

Region…生成新的可编辑区域，如果想删除可编辑区域，可通过ModifyàTemplatesàRemove Editable

Region…，然后按提示操作即可。

4. 用模板生成页面　　其实我们前面也提及过用模板生成页面的步骤，就是通过FileàNew From

Template。请参考第三步的有关步骤。现在我们用模板生成一个名为body3.htm的页面。这时你会发现，在body3.htm页面中除了可编辑区域Region01可以编辑外，别的地方鼠标都成了限制状态。我们在此可编辑区域中添加我们需要的内容，比如我们随便写入一篇文章。这样就可以根据我们的需要，利用模板生成页面。

5. 修改模板内容与更新站点文件

打开body.dwt模板文件，将我们需要修改的地方进行修改，比如我们把logo图片换掉或修改任何非可编辑区域，甚至添加或删除可编辑区域等。

下面就用换logo来说明模板是如何更新文件的。

我们把logo图片换成另外我们喜欢的图片，完成后保存body.dwt文件，这时DW会弹出窗口询问是否需要更新文件，选择Update，DW就会自动的将所有用此模板生成的页面都更新，更新时DW会弹出Update

Pages窗口，完成后，在Update Pages窗口中会给出更新日志。

※如果选择了don’t

Update，DW直接保持模板文件，暂时不更新页面，但我们可以手动更新页面，只要选择ModifyàTemplatesàUpdate

Pages…即可。

这时我们打开任意一个用body.dwt生成的页面，如body3.htm。会发现logo图片已经改变。

不难发现，利用这个功能，我们可以轻松的解决站点更新问题，模板的功能十分强大，此文只起到抛砖引玉的作用，很多功能由于篇幅问题未能提及，自己要多尝试，这样才能充分领略DW的模板风采。

在DW中，还有一项称为库的功能，跟模板可以有机的配合，这样会使模板的功能更加强大，如果读者反应有兴趣的话，我愿意为大家献上这一份礼物。

更多推荐