Dreamweaver如何插入有颜色的直线

  在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预览,在浏览器中就可以看到所插入的细线的颜色已经变成了你想要的颜色。

时间: 2024-09-27 03:06:13

Dreamweaver如何插入有颜色的直线的相关文章

在Dreamweaver中插入有颜色的直线

dreamweaver|插入 在dreamweaver中,如果插入 Horizontal Rule (水平线),默认情况下这根线只是灰色,在很多情况下,这并不符合我们的要求.如果想要插入其他颜色的直线(甚至细到一个像素),该怎么办呢? 首先,在document window(网页编辑窗口)中的适当位置,插入Horizontal Rule, 按ctrl + F3 调出 Property inspector(属性面板), 在这个属性面板中,把shading(阴影)前的勾去掉.在W中输入像素值(pix

网站制作中如何插入一条彩色直线

网站制作中如何插入一条彩色直线方法一: 首先在网页编辑窗口中插入一个一行一列的表格,然后在这个表格中插入一个1pixel × 1Pixel的透明图像(在dreameaver4中控制页面布局所使用的spacer image正是这样的图像,所以如果你不会用软件制作这样的图像,可在dreameaver4中如此生成Object面板,首先点选Objiect面板的View 中的layout view(布局视图),再点draw layout table,在网页编辑窗口中拖动生成一个布局表格(layout ta

在Dreamweaver中插入背景音乐的几种方法

dreamweaver|插入 在 Dreamweaver 中插入背景音乐的几种方法 多次收到喜欢太平洋网络学院的网友的信件,信中提问如何在 Dreamweaver 中插入背景音乐,现在让我一次性向大家介绍几种背景音乐的插入方法,让更多的人去掌握它. 一.直接插入法 1.打开一张需要插入背景音乐的网页,在菜单中找到这样的命令: Windows - > Behaviors,调出"Behaviors"行为面板,如下图所示(Dreamweaver MX 的面板): 2.点击"+

Dreamweaver中插入FLASH参数详解

dreamweaver|插入|详解 在Dreamweaver中插入FLASH后还可以有很多的控制参数,点属性面板右下的参数钮,就会有参数和值的加入.大家可以自由的控制,建议下最新的FLASH4的OBJECT插件,这样才能正确自动安装支持FLASH4的插件.如果没有也可以把下面的两个路径手工改一下.    注:有"*"的是可以在插入时就有和在DW中的FLASH属性面板中有的参数,true就是有效false就是无效. SRC:  *.swf (flash文件名)*    move:  *.

在 Dreamweaver 中插入背景音乐的方法

dreamweaver|插入 多次收到喜欢太平洋网络学院的网友的信件,信中提问如何在 Dreamweaver 中插入背景音乐,现在让我一次性向大家介绍几种背景音乐的插入方法,让更多的人去掌握它. 一.直接插入法 1.打开一张需要插入背景音乐的网页,在菜单中找到这样的命令: Windows - > Behaviors,调出"Behaviors"行为面板,如下图所示(Dreamweaver MX 的面板): 2.点击"+"号按钮,选择"play soun

在Dreamweaver中插入Flash 的参数详解

在Dreamweaver中插入FLASH后还可以有很多的控制参数,点属性面板右下的参数钮,就会有参数和值的加入.大家可以自由的控制, 以下内容摘自 Flash MX 2004 帮助文档 参数和属性 下列标记属性和参数描述了由"发布"命令创建的 HTML 代码.在编写自己的用于显示 Flash 内容的 HTML 时,可以参考此列表.除非特别说明,否则所有条目都同时适用于 object 标记和 embed 标记.可选条目也在此列出.Internet Explorer 可以识别用于 obje

jsp-JSP问题,Dreamweaver cs6插入协议

问题描述 JSP问题,Dreamweaver cs6插入协议 请问这个要怎么弄,上下滑动那个? 另,不太清楚,是不是可以用Dreamweaver cs6编辑JSP?可否科普一下

用Dreamweaver轻松插入Java特效

利用 Java 技术制作网页特效,可以使网页生动美观,然而, Java 命令并不是那么容易掌握的,很多读者看到编程语句就头晕.本实例将为读者介绍一个好东西 --Anfy Java ,有了它,可以不用编写 Java 命令,就能轻松实现各种网页特效. 效果说明 在一张雪景图片上生成飘雪特效,同时伴随着飘雪还会有文字自下而上地运动,形成一个冬季雪景的动画,并将该动画插入到网页中的任意位置上,如图 62-1 所示. 创作思想 首先利用 Anfy Java 软件生成特效,然后将该软件自动生成的代码复制到网

用DreamWeaver定制网站的颜色

dreamweaver DW4出台也有相当一段时间了,众多体贴的新功能让设计师们兴奋了好久.这其中比较瞩目的就是新的Assets面板.作为一个Web设计师来说效率是十分重要的,DW4的Asset可以让你统一地管理整个站点的资源.这样可以免去反复搜索的痛苦,可以成倍地增长效率.DW4新的Assets面板是一种可以在编辑网站时根据档案型态,例如图片.样板等来管理档案的新工具,当你定义新站台时,所有类型的组件会自动增加到Asset面板里的适当表框中.当我们定义一个站点时,这个站点内的所有上述类型的元素