建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > Dreamweaver教程 >

Dreamweaver如何插入有颜色的直线

更新时间:2017-04-12整理编辑:建站学习网阅读: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预览,在浏览器中就可以看到所插入的细线的颜色已经变成了你想要的颜色。

本文网址:https://www.dedexuexi.com/wysj/dw/2789.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
在Dreamweaver中巧用框架建立网站
« 上一篇2017年04月12日
Dreamweaver CS3网页制作之CSS布局规则
2017年04月12日下一篇 »
  • Dreamweaver CS5-HTML简介
    0阅读
    1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本“更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部...
  • Dreamweaver文档编辑
    0阅读
    快捷键可以提高我们平时的工作效率,今天小编为大家介绍一下dreamweaver中文档编辑快捷键。
  • 色彩模式介绍
    0阅读
    在图象和图形处理软件中,通常都使用了HSB、RGB、Lab及CMYK几种色彩模型,并且具有多种色彩模式,用来反映不同的色彩范围,其中许多模式能用对应的命令相互转换。 (一) HSB模型 基于人类对色
  • Dreamweaver教程:用dw制作图片浏览器
    0阅读
    如图所示,在很多地方我们都看到过这样的图片展示效果 ,通过点击下方的缩略图来展示不同的图片,今天我们就是要来做一下这个效果,其实方法很简单,就是给缩略图添加一个交换图像的
  • DreamweaverMX2004打造留言本详解
    0阅读
    一、IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除程序添加/删除Windows组件对
 
QQ在线咨询