在Dreamweaver中插入有颜色的直线(水平线)

所属分类: 网页制作 / Dreamweaver 阅读数: 1005
收藏 0 赞 0 分享
在dreamweaver中,如果插入 Horizontal Rule (水平线),默认情况下这根线只是灰色,在很多情况下,这并不符合我们的要求。如果想要插入其他颜色的直线(甚至细到一个像素),该怎么办呢?

  首先,在document window(网页编辑窗口)中的适当位置,插入Horizontal Rule,

  按ctrl + F3 调出 Property inspector(属性面板),

  

  在这个属性面板中,把shading(阴影)前的勾去掉。在W中输入像素值(pixels)或者百分比,可以设置这条线的长度。在H中,输入1,都可以使这根线变得很细,细到一个像素。如果想要的是粗线,可以在H中,输入更大的值。这样细线就插好了,但你会发现,这根线是灰色的,在属性面板中,并不可以设置颜色。如果想要设置其他颜色,可以通过css来控制。在DreamWeaver中可以非常容易地设置css,你甚至完全不需要了解css的语法。

  选择Text菜单下的CSS style | New Style ,

  

  在“New Style (新样式)”对话框中,在name(名称)栏中输入一个名称,如"colorline",并在Define(定义)单选框中选择“This document only(只用于此页)”,然后点ok。随后会弹出的Style definition for .colorline对话框:

  

  在type项目中,选择想要的颜色,比如说红色,然后点ok,再点done,于是一个新的样式就建好了。选定网页编辑窗口中的细线,点 Text | CSS style | colorline(colorline就是刚才建立的那个新样式),在网页编辑窗口中,线的颜色依然还是灰色,但按F12预览,在浏览器中就可以看到所插入细线的颜色已经变成了你想要的红色。

  还有一种办法可以插入有颜色的细线,甚至细到一个像素.首先在网页编辑窗口中插入一个一行一列的表格,然后在这个表格中插入一个1pixel × 1Pixel的透明图像(在dreameaver4中控制页面布局所使用的spacer image正是这样的图像,所以如果你不会用软件制作这样的图像,可在dreameaver4中如此生成:

  

  Object面板  首先点选Objiect面板的View 中的layout view(布局视图),再点draw layout table,在网页编辑窗口中拖动生成一个布局表格(layout table),点表格头的下拉菜单中的Add spacer image,

  

  创建并保存spacer image,这个spaceer image 就是一个1像素× 1像素的透明图像)。然后在表格的属性中设置为:H(高度)为1 pixel(1像素),W(宽度)为想要的宽度(可输入像素值或者百分比),cellpad、 cellspace、border中都输入0,然后在Bg Color(背景颜色)中选择想要的颜色,带颜色的水平细线就这样被插入了。

  

  如果把H值增大,那么这条线会变粗。如果要插入带颜色的垂直细线,则把H设置为想要的高度值,W设置为0,其他设置同上,即可插入垂直细线。在网页编辑窗口中,这的颜色仍是灰色的,但按F12预览,在浏览器中就可以看到所插入的细线的颜色已经变成了你想要的颜色

更多精彩内容其他人还在看

Dreamweaver怎么添加背景音乐?dw添加声音文件的方法

Dreamweaver怎么添加背景音乐?想让网页打开就会有歌声出现,该怎么设置呢?今天我们就来看看给网页添加声音文件的详细方法,图文教程,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver中CSS面板该怎么设置?

Dreamweaver中CSS面板该怎么设置?Dreamweaver中新建的网页需要使用CSS面板设置摆弄狂,字体,背景颜色等等各种参数,该怎么设置呢?下面我们就来看看CSS面板的使用方法
收藏 0 赞 0 分享

Dreamweaver编辑网页预览的时候显示乱码该怎么办?

Dreamweaver编辑网页预览的时候显示乱码该怎么办?Dreamweaver做网站的时候,网页出现了乱码,无论是预览还是发布出来都是乱码,出现这个状况我们需要在网页编码里面加上声明编码的meta信息,详细解决办法请看下文
收藏 0 赞 0 分享

Dreamweaver浏览器测试图文教程

这篇教程主要是向脚本之家的朋友分享Dreamweaver浏览器测试方法,教程真的很不错,很值得大家学习,推荐过来,一起来学习吧
收藏 0 赞 0 分享

Dreamweaver怎么添加文本?怎么设置文本?

文本行为,就是网页中的文本有行为,用的最多的又状态栏文本和文本域文本,尤其是文本域文本是最常用到的,那么Dreamweaver怎么添加文本?怎么设置文本?下面小编就为大家详细介绍一下,来看看吧
收藏 0 赞 0 分享

Dreamweaver中怎么让html网页中的table边框细线显示?

Dreamweaver中怎么让html网页中的table边框细线显示?Dreamweaver中插入表格默认是宽边框的,看上去很难看,该怎么将边框设置成细线呢?请看下文详细介绍,需要的朋友可以参考下
收藏 0 赞 0 分享

DW cc 2015快捷键该怎么导出/修改/删除?

DW cc 2015快捷键该怎么导出、修改、删除?dw中有很多快捷键方便我们操作,但是有时候自己设置的快捷键项导出来以后备用,该怎么办呢?如果想修改或删除其中一个或多个快捷键又该怎么办呢?请看下文详细介绍
收藏 0 赞 0 分享

Dreamweaver怎么进行批量文件搜索指定内容?

Dreamweaver怎么进行批量文件搜索指定内容?Dreamweaver中的文件很多,想要查找文件很不容易,该怎么才能快速的进行批量查找文件的?下面我们来看看Dreamweaver文本查找功能的使用方法
收藏 0 赞 0 分享

怎么格式化html代码? Dreamweaver格式化html代码的技巧

怎么格式化html代码?Dreamweaver编辑网页的时候,发现代码格式很乱,看起来很费劲,该怎么一键格式化呢?下面我们就来看看Dreamweaver格式化html代码的技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

Dreamweaver CS6制作一个新闻网页首页的实例教程

Dreamweaver CS6制作网页很方便,为了方便学习我们我们举了一个实际的例子,使用Dreamweaver CS6做了一个简单的网页,非常简单,适合新手学习,需要的朋友可以参考
收藏 0 赞 0 分享
查看更多