您好,欢迎来到素彩网!

基础(16)你必须了解的网页设计常用度量单位(2)

来源:sc115.com | 423 次浏览 | 2011-07-29

标签: Dreamweaver cs3 基础你必须了解的网页设计常用度量单位

三、颜色单位

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

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://开始的绝对路径。

搜索: Dreamweaver cs3 基础你必须了解的网页设计常用度量单位 

最热-Dreamweaver CS3

基础(23)如何快速在Dreamweaver CS3中编辑网页标签

基础(17)Dreamweaver CS3临时文件的工作方式

基础(24)用Dreamweaver CS3 巧妙格式化您的表格

基础(18)在Dreamweaver CS3中加入CSS样式表的四种方法

基础(25)Dreamweaver CS3中使用层的一些技巧和建议

基础(19)Dreamweaver CS3 实现多分辨率层定位

基础(26)如何在Dreamweaver CS3中做自定义弹出窗口

基础(27)玩转Dreamweaver CS3中的层及应用

基础(28)在Dreamweaver CS3中实现不同分辨率下的层定位

基础(20)使用Dreamweaver CS3文件库功能快速更新网站

基础(29)深入了解Dreamweaver CS3中的内置Fireworks功能

基础(30)教您如何处理Deamweaver CS3中CSS应用无效的问题

基础(31)教您深入了解新的 Dreamweaver CS3 CSS 布局

素材
精美实用的提示框矢量图7精美实用的提示框矢量图7
精美实用的提示框矢量图6精美实用的提示框矢量图6
折纸网站设计矢量图5折纸网站设计矢量图5
精美实用的提示框05—矢量图精美实用的提示框05—矢量图
精美实用的提示框矢量图4精美实用的提示框矢量图4
折纸网站设计矢量图4折纸网站设计矢量图4
精美实用的提示框矢量图3精美实用的提示框矢量图3
精美实用的提示框矢量图2精美实用的提示框矢量图2
精美实用的提示框矢量图精美实用的提示框矢量图