网页设计常用度量单位

一、长度单位

长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是,在设计的时候需要为元素的位置、尺寸精确地定义一些值,以使其达到预期的效果。

CSS的主要功能之一就是CSS定位,这个定位的概念即包括位置的定位,也包括尺寸的定位。无论哪一种,都需要使用长度单位,不然,精确定位就无从谈起。

在CSS中,长度是一种度量尺寸,用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。

1.定义长度

在Dreamweaver 中要定义长度,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“-”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,这个数值可以是整数,也可以是小数。然后再在该选项的长度单位下拉列表框中选择一种长度单位。长度单位一般是一个由两个字母组成的单位缩写,例如cm,pt,em等。

2.绝对长度单位

网页定义上常常使用的绝对长度值由厘米(cm)、毫米(mm)、英寸(in)、点(pt)、派卡(pc)等等。

单位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc)

英寸 1.0 2.54 25.4 72 6

派卡 0.16667 0.4233 4.233 12 1.0

厘米 0.3937 1 10 28.3464 4.7244

毫米 0.03937 0.1 1.0 2.83464 0.47244

磅 0.01389 0.0352806 0.352806 1.0 0.83333

绝对长度值的使用范围比较有限,只有在完全知道外部输出设备的具体情况下,才使用绝对长度值。也就是说,绝对长度值最好用于打印机输出设备,而在仅仅作为屏幕显示时,使用绝对长度值意义不大,应该尽量使用相对长度值。

3.相对长度值

每一个浏览器都有其自己默认的通用尺寸标准,这个标准可以由系统决定,也可以由用户按照自己的爱好进行设置。因此,这个默认值尺寸往往是用户觉得最适合的尺寸。于是使用相对长度值,就可以是需要定义尺寸的元素按照默认大小为标准,相应地按比例缩放。这样就不可能产生难以辨认的情况。其实,百分比单位以及关键字都能产生相类似的效果。

CSS还支持下列三种长度的相对单位:em(当前字体中字母M的宽度)、ex(当前字体中字母X的高度)、px(一个象素的大小)。

使用em和ex的目的就是为所给的字体设置合适的宽度,而没有必要知道字体有多大,在显示时,可通过比较当前字体中的M和X来确定。字体越大,所对应的em和ex也就越大。

以象素为单位的长度是相对于显示器上的象素(或许为方形)的高度和宽度。影像的宽度和高度经常是以象素给出的。象素测量法通常不是个好方法。首先,象素的大小依分辩率变化较大,大多数用户都会将显示器设置成尽可能高的分辩率,从而导致象素太小,而无法阅读。

二、百分比单位

在Dreamweaver 中要使用百分比,首先应该在所选择的选项后面的文本框中写符号部分,这个符号可以是“+”(正号),表示正长度值,也可以是“—”(负号),表示负长度值。如果不写符号,那么默认值是“+”。在符号后紧接着是一个数值,符号后面可以输入任意值,但是由于在某些情况下,浏览器不能处理带小数的百分数,因此最好不用带小数的百分比。然后再在该选项的长度单位下拉列表框中选择“%”。

百分比总是相对于另一个值来说的。那个值可以是长度单位或是其他的。每一个可以使用百分比值单位指定的属性同时也自定义了这个百分比值的参照值。大多数情况下,这个参照值是此元素本身的字体大小。三、颜色单位

大量地使用图片可能会使网页富有生气。但是,每一个上过网的人都有为等待一个图片而焦急不安的经历。其实,适当地在不同的部位使用不同的颜色,也能起到类似图片的效果,把读者的注意力吸引到关键的部分,然而,下载网页的时间却大幅度地减少了。

color属性用来定义一个元素的前景颜色,在大多数情况下,这个元素中所包含的使文本对象。使用color属性同时还可以用来决定一个元素边框的颜色。通用的定义颜色的语法是:color:颜色值。

定义颜色值最简单也最直接的方法是使用百分比值。在这种情况下,红、绿、蓝颜色值的等级用百分比数来确定。格式是:color:rgb(R%,G%,B%)。使用百分比值来指定颜色还有一个好处是它能够声明一组真正的数字,不论它的值是多少。

指定颜色的另一种方法是使用范围在0~255之间的整数来设置。格式是color:rgb(128,128,128)。

定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示,例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。

四、URL单位

URL单位和链接的地址有关。所谓URL就是“Uniform Resource Locator”的简写,链接是网页的灵魂。通过链接的方式可以使各个网页之间联接起来,使网站中众多的页面构成一个有机整体,使访问者能够在各个页面之间跳转。链接可以是一段文本,一幅图像或其他网页元素,当在浏览器中用鼠标单击这些对象时,浏览器可以根据其指示载入一个新的页面或者跳转到页面的其他位置。

在创建链接的过程中,路径是非常重要的。Dreamweaver 中有两种路径:绝对路径和相对路径,其中相对路径可分为和根目录相对的路径及和文当相对的路径。

绝对路径时含服务器协议(在网页上通常是http://或ftp://)的完全路径。绝对路径包含的是精确位置而不用考虑源文档的位置。但是如果目标文档被移动,则链接无效。创建对当前站点以外文件的链接时必须使用绝对路径。

和根目录相对的路径总是从当前站点的根目录开始。站点上的所有可以公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠告诉服务器从根目录开始。例如,/ Dreamweaver /index.html将链接到站点根目录Dreamweaver文件夹的index.html文件。如果要在内容经常被移动的环境中链接文件,那么使用和根目录相对的路径往往是最佳的方法。在使用与根目录相对的路径时,包含链接的文档在站点内移动,链接不会中断。但是,和根目录相对的路径和适合于本地查看站点,在这种情况下,可以使用和文档相对的路径。

注意:当在浏览器中按照本地方式预览文件时,和根目录相对的路径所链接的内容不会出现。这是因为浏览器不能像服务器那样识别站点根目录,要预览和根目录相对的路径所链接的内容,必须将文件放置到远程服务器并从那里进行查看。

和文档相对的路径是指和当前文档所在的文件夹相对的路径。例如文档test.swf在文件夹Flash中,它指定的就是当前文件夹内的文档。… /test.swf指定的则是当前文件夹上级目录中的文档;而/test/test.swf指定是 Flash文件夹下test文件夹中的test.swf文档。和文档相对的路径通常是最简单的路径,可以用来链接总是和当前文档在同一文件夹中的文件。

注意:在创建和文档相对的路径之前必须保存新文件,因为在没有定义起始点的情况下,和文档相对的路径是无效的。在文档保存之前,Dreamweaver 会自动使用以File://开始的绝对路径。三、颜色单位

大量地使用图片可能会使网页富有生气。但是,每一个上过网的人都有为等待一个图片而焦急不安的经历。其实,适当地在不同的部位使用不同的颜色,也能起到类似图片的效果,把读者的注意力吸引到关键的部分,然而,下载网页的时间却大幅度地减少了。

color属性用来定义一个元素的前景颜色,在大多数情况下,这个元素中所包含的使文本对象。使用color属性同时还可以用来决定一个元素边框的颜色。通用的定义颜色的语法是:color:颜色值。

定义颜色值最简单也最直接的方法是使用百分比值。在这种情况下,红、绿、蓝颜色值的等级用百分比数来确定。格式是:color:rgb(R%,G%,B%)。使用百分比值来指定颜色还有一个好处是它能够声明一组真正的数字,不论它的值是多少。

指定颜色的另一种方法是使用范围在0~255之间的整数来设置。格式是color:rgb(128,128,128)。

定义颜色的第三种方法是使用十六进制数组定义颜色。这种定义的方法对于经常进行程序设计的人来说比较熟悉。定义颜色时使用三个前后按顺序排列的十六进制数组表示,例如“#FC0EA8”。这种定义的方式就是形如#RRGGBB的格式。即在红、绿、蓝的位置上添上需要的十六进制值。

四、URL单位

URL单位和链接的地址有关。所谓URL就是“Uniform Resource Locator”的简写,链接是网页的灵魂。通过链接的方式可以使各个网页之间联接起来,使网站中众多的页面构成一个有机整体,使访问者能够在各个页面之间跳转。链接可以是一段文本,一幅图像或其他网页元素,当在浏览器中用鼠标单击这些对象时,浏览器可以根据其指示载入一个新的页面或者跳转到页面的其他位置。

在创建链接的过程中,路径是非常重要的。Dreamweaver 中有两种路径:绝对路径和相对路径,其中相对路径可分为和根目录相对的路径及和文当相对的路径。

绝对路径时含服务器协议(在网页上通常是http://或ftp://)的完全路径。绝对路径包含的是精确位置而不用考虑源文档的位置。但是如果目标文档被移动,则链接无效。创建对当前站点以外文件的链接时必须使用绝对路径。

和根目录相对的路径总是从当前站点的根目录开始。站点上的所有可以公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠告诉服务器从根目录开始。例如,/ Dreamweaver /index.html将链接到站点根目录Dreamweaver文件夹的index.html文件。如果要在内容经常被移动的环境中链接文件,那么使用和根目录相对的路径往往是最佳的方法。在使用与根目录相对的路径时,包含链接的文档在站点内移动,链接不会中断。但是,和根目录相对的路径和适合于本地查看站点,在这种情况下,可以使用和文档相对的路径。

注意:当在浏览器中按照本地方式预览文件时,和根目录相对的路径所链接的内容不会出现。这是因为浏览器不能像服务器那样识别站点根目录,要预览和根目录相对的路径所链接的内容,必须将文件放置到远程服务器并从那里进行查看。

和文档相对的路径是指和当前文档所在的文件夹相对的路径。例如文档test.swf在文件夹Flash中,它指定的就是当前文件夹内的文档。… /test.swf指定的则是当前文件夹上级目录中的文档;而/test/test.swf指定是 Flash文件夹下test文件夹中的test.swf文档。和文档相对的路径通常是最简单的路径,可以用来链接总是和当前文档在同一文件夹中的文件。

注意:在创建和文档相对的路径之前必须保存新文件,因为在没有定义起始点的情况下,和文档相对的路径是无效的。在文档保存之前,Dreamweaver 会自动使用以File://开始的绝对路径.

时间: 2024-09-20 20:02:16

网页设计常用度量单位的相关文章

网页设计常用色彩搭配表,配色表

  考虑到国庆也有很多人没有办法在电脑前着手教程,那么,给你好的货就果断收走吧! 文章末尾还有小惊喜哦~ 在我们做网页设计的过程中,我们心里想要的各种色彩怎样调试出来的呢?特别是在我们的计算机中呢?下面,我们通过色相搭配和印象搭配的分类方法,在电脑上进行色彩搭配,并对搭配出来的每一种颜色附上对应的计算机代码.这样,在我们设计网站的过程中,就能够轻易地得到自己想要的颜色. 色彩搭配中色相搭配分类 网页设计中常见的色彩搭配按照色相的顺序归类.每类都以该色相为主,配以其他色相或者同色相的,应用对比和调

Google API提供的网页设计常用字体

我们在设计网页时会使用一些常用的字体,对于一些并不常用的字体则会通过图片来代替,通过Google API提供的字体我们可以不需要任何图片,而使用一些并不常用的字体,当用户打开网页时会通过Google服务器链接到这些字体,从而让网页显示出来,过程中用户不会感到任何不适. 对很多纠结于字体的 Web 设计与开发者而言,昨天有关 Google Font API 的新闻着实让他们高兴了一回,这个非常简单实用的 API 包含了一套字体库和预览工具,结合 Google 与 TypeKit 联合开发的开源 W

WEBJX收集整理2013年网页设计常用jQuery插件(1)

文章简介:今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等等.这些插件的官网都提供了详细的API和相关代码下载,也提供 今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示

WEBJX收集整理2013年网页设计常用jQuery插件(2)

文章简介:回到页面顶部.文本语音.图片旋转.图片预加载.SVG制作与动画等十款优秀的jQuery插件,希望这些插件能帮大家解决一时之需. 在第一期中向大家推荐了有关于响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip提示插件.3D旋转菜单等十款jQuery插件,今天继续第二期的插件推荐,在这一期中主要涵盖了:回到页面顶部.文本语音.图片旋转.图片预加载.SVG制作与动画等十款优秀的jQuery插件,希望这些插件能帮大家解

DIV+CSS标准化网页设计常用学习方法与技巧

CSS布局常用的方法 float:none|left|right  取值: none: 默认值.对象不飘浮 left: 文本流向对象的右边 right: 文本流向对象的左边  它是怎样工作的,看个一行两列的例子  xhtml代码: <div id="wrap">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列</div>

网页设计常用Javascript经典代码

中介交易 SEO诊断 淘宝客 云主机 技术大厅 1.添加到收藏夹 <script Language="Javascript">  function bookmarkit()  {  window.external.addFavorite('http://你的网址','你的网站名称')  }  if (document.all)document.write('<a href="#" onClick="bookmarkit()"&g

网页设计常用的一些技巧

1.加入收藏,设为首页: <a href="javascript:window.external.AddFavorite('http://www.bydragon.com','百龙设计工作室')">加入收藏</a> <a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http: //www.bydragon.co

WEBJX收集整理2013年网页设计常用jQuery插件(3)

文章简介:2013年优秀jQuery插件已发布两期了,今天继续给大家推荐三月刊的插件,在第三期中我们同样向大家介绍十个优秀的偛件,今天这十个插件包括:Google Map嵌入到你的站点.固定边栏菜单.支持css3的transform属性的插件.文本动画效果.图片选择区域控制.图片翻转功能等. 2013年优秀jQuery插件已发布两期了,今天继续给大家推荐三月刊的插件,在第三期中我们同样向大家介绍十个优秀的偛件,今天这十个插件包括:Google Map嵌入到你的站点.固定边栏菜单.支持css3的t

WEBJX收集整理2013年网页设计常用jQuery插件(4)

文章简介:在第四期jQuery插件的分享中,你会发现与以前的略有不同之处,是的.在今天推荐的十个插件中,我们有好几个是中国程序员写的,比如说说zTree写的树形结构效果插件,有SimpleTas插件还有茶哥.小生写的SimpleUI等,而且这回我将正美同学的Mass Framework(这个可不是jQue 在第四期jQuery插件的分享中,你会发现与以前的略有不同之处,是的.在今天推荐的十个插件中,我们有好几个是中国程序员写的,比如说说zTree写的树形结构效果插件,有SimpleTas插件还有