• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Dreamweaver教程 > 在Dreamweaver中插入有颜色的直线(水平线)

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含颜色,水平线等相关知识,佚名 希望在学习及工作中可以帮助到您
在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 8怎么通过代码设置页面高宽颜色?
  • Dreamweaver CS5更改代码颜色方法(可自定义)
  • 在Dreamweaver中插入有颜色的直线(水平线)
  • 解决Dreamweaver中关于应用CSS的小问题

相关文章

  • 2017-08-06Dreamweaver默认网页编码修改方法
  • 2017-08-06Dreamweaver CS4新增相关功能介绍
  • 2017-08-06DW如何制作一个简单的垂直导航?
  • 2017-08-06dreamweaver教程之制作图形提交按钮示例(图)
  • 2017-08-06Dreamweaver设置页面属性后采用HTML格式怎么办?
  • 2017-08-06Dreamweaver单元格怎么合并?
  • 2017-08-06怎么使用Dreamweaver给网站图片添加alt标签?
  • 2017-08-06Dreamweaver解决网页制作中的空格问题
  • 2017-08-06Dreamweaver CS3网页制作中的CSS布局规则
  • 2017-08-06Dreamweaver 序列号(dw8 cs3 cs5 )小结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • dreamweaver 8怎么通过代码设置页面高宽颜色?
    • Dreamweaver技巧之在网页中给视频播放窗口预设图像
    • Dreamweaver编写CSS必需掌握的技巧
    • Dreamweaver工作区布局有哪些工具?
    • 用dreamweaver制作网站下拉菜单效果示例教程
    • DreamWeaver文件保存时提示"发生共享违例"问题分析及解决方法
    • dreamweaver里不用的站点怎么删除?
    • Dreamweaver怎么添加文本?怎么设置文本?
    • Dreamweaver注释怎么设置快捷键?
    • DW制作鼠标放在图片上就换另一个图片

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有