css技术在网页布局中的应用_第1页
css技术在网页布局中的应用_第2页
css技术在网页布局中的应用_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

css技术在网页布局中的应用

随着网络技术的快速发展，网站已成为部门管理和信息交流的新手段。艺术化的网站页面设计,能够给人们带来更大的视觉冲击,是体现网站是否优秀的一个重要方面。网络环境下,网络技术与网页的视觉设计相互依存,网站设计逐渐由简单的纯文本向图形丰富的视觉多元化发展,而速度是网页以及网页美化设计的基本要素,没有好的网络传送速度,就谈不上是好的设计。在此基础上,网页的字体、页面布局、色彩和图片等设计构成了整个页面视觉效果的重要组成部分,受其设计效果和设计过程的操作复杂性以及显示速度等因素影响,艺术化的网页美化设计向计算机网络技术提出新的要求,因此各种新的技术层出不穷,为网站视觉设计提供了许多设计方案。1基于网络的网络美化设计1.1表现层的布局语言CSS技术是CascadingStyleSheets的简称,即“层叠样式表”。CSS是跨平台浏览器之间的国际标准W3C中的一部分,是一种对WEB文档添加样式的简单机制,属于表现层的布局语言,在CSS标准里,不仅重新定义了HTML原来的样式,使CSS在格式定义方面具有特殊优势,更加入了区块设置、随意位置摆放等页面布局样式设定,使CSS可以提供精确定位功能以及各种特殊效果,可以有效地对不同网页的整体风格以及同一页面的不同部分实现更加精确的控制。从而为网页布局和页面效果的制作提供一种新途径。1.2基于国家数据的，得到改变网页的风格和风格信息CSS样式表可以用于HTML中3个不同的层次:local(定义一个页面的局部)、global(定义整个页面)和linked(定义多个页面)。为了使浏览器意识到CSS样式表的存在,必须用特定的方法将CSS样式表加入到HTML文档中去,概括起来可以分为外部引用、内部引用和局部引用三种。其中,链接外部CSS样式文件是使样式表功能发挥得最淋漓尽致的方法,它让网页的文字内容与版面设计分开,网页设计人员就可以将多个HTML文档都链接到一个CSS样式表。这个外部的CSS样式表将设定所有与之相链接的网页的外观风格。如果改变样式表文件中的某一细节,所有页面都会随之改变并反映出定义的风格。<DIV>是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。CSS+DIV制作的网站使得网站改版相对简单许多,很多问题只需要改变CSS而不需要使用DreamWeaver等网页编辑软件对网页结构进行重新设计,从而降低网站改版的成本。大到门户网站,小到不计其数的个人网站,都越来越关注DIV+CSS技术的标准化设计,在DIV+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。网络上非常流行的三行三列式网页布局,可以由网页设计软件如DreamWeaver、FrontPage进行所见即所得式的表格设计完成,修改时对表格逐个进行重新定位。如果使用DIV+CSS技术,只需对CSS代码进行简单设置,即可生成所需的页面布局,修改时,只需改动CSS代码,即可对所有网页的布局、风格进行改变:CSS文件主要代码:最终效果如图1所示。HTML文档里引用CSS文件后,需要修改各版快的布局、背景色、字体、高度等,可直接在CSS文件里对应的各版快代码进行修改,并同时在所有的HTML页面中生效。1.4滤镜的渐变应用在PHOTOSHOP等图形处理软件使用滤镜时,选择一个图片,用软件对其进行模糊或锐化处理,或者将文字和图像加上特殊效果,如浮雕、光晕等等,然后以GIF或JPEG格式发布到网页上。这种情况下,文字就变成了图像的存储格式,而且网页上加入过多图像会延长网页的打开时间,从而影响整个网站的形象。CSS滤镜可以很容易地为文本和图片进行模糊处理,比如加上彩色的投影、加上火焰的效果,甚至随意地将图片倒置等等。如果灵活应用滤镜,使滤镜效果不断变化和更替,还可以完成一些意想不到的渐变效果。当把滤镜和渐变效果结合到—起再应用到一些script脚本程序中,就能够产生绚丽的动画效果,设计者就可以建立起一个动态交互的网页。作为CSS技术的一个重要的组成部分,CSS滤镜大大丰富了网页样式表的内容,使CSS应用扩展到了网页排版以外更广阔的领域中。CSS是通过Filter属性来对网页对象发生作用的,它是一个对滤镜进行描述的字符串。Filter和其他样式的定义和应用方式一样,可以直接定义在HTML文档的<head>和</head>之间,这属于内部引用;也可以通过Style标签定义在HTML的行内进行定义,这属于局部引用;还有一种方法是建立一个CSS的文件,然后嵌入到HTML文档中,这属于外部引用。语法结构分别如下:Filter样式属性允许多个滤镜效果的叠加,也就是说,可以让一个HIML元素同时显示多个滤镜的效果。HTML滤镜属性只能作用于HTML控件元素上,如<body>、<img>等。例:设置CSS滤镜的blur属性代码如下:最终效果如图2所示:其中,图2左侧的是原始图片,右侧是增加CSS滤镜blur属性后的效果图片。由此可见CSS滤镜可以使用极少的代码文本,实现以往只有用专业图形处理软件才能达到的效果。2稳定的土壤结构CSS是网页制作的一种新技术,可以大大缩减页面代码,提高页面浏览速度

人人文库> 全部分类> 专业文献 > 学术论文

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论