您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第七课:层叠样式表
网页制作——第七课:层叠样式表
发表日期:2007-3-31 7:58:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 3200

录音下载(一)  录音下载(二)

第一节:CSS样式

我们可能都有这样的体验,如果设置浏览器中字体的大小,网页中的字体就会随之改变。这固然会给一些有特殊需要的用户带来方便,但同时也给网页的布局带来负面影响--网页的版面会随着字体的改变而变的面目全非。但一个好的网页,却不受浏览器字体设置的影响,网页中的文本等始终保持原有的外观,这就是CSS的作用。

    CSS是Cascading Style Sheets(层叠样式表单)的简称。它允许作者在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术,例如我们现在最常见的去除链接文字的下划线就是CSS最简单的应用。

    Dreamweaver是最早将CSS的应用于网页的工具。通过直观的界面,设计者可以定义超过70种不同的CSS设置,这些设置可以影响到网页中的任何元素,从文本的间距到类似于多媒体的转换。可以随时创建自己的样式单,然后在任何时候连接调用它。

    CSS也是以代码形式出现的,编写好的CSS代码,在网页的HTML中以<style>标签形式出现,在网页中使用CSS有三种方式:

  • 外部文件方式
         即用任何一种文本编辑工具将编辑好的CSS代码保存为***.css的文件,然后在网页的文档头加入代码<Link Rel="stylesheet" Href="***.css" Type="text/css"> 凡是在网页文档头加入了这行代码的网页都将按照CSS格式显示。这种方式一般主要在使整站风格统一时使用。
  • 内部文档头格式:
         它是将CSS风格网页的文件头之间,应用的范围仅在该文档。这种方式主要在确定某个页面风格时使用。
  • 直接插入式:
         这种方法是在每一个HTML标签后直接书写CSS属性。在对页面的某一个标签进行调整时使用这种方式。

     CSS是HTML代码的扩充,只要修改CSS代码中的参数值,就能随心所欲的改变网页的风格,但是编写代码仍旧是一个很繁琐的工作。幸好 Dreamweaver MX 2004 的【CSS样式】面板和【CSS属性】面板,为我们提供了极大的便利,只需要点点鼠标,就能自动生成CSS代码。

CSS样式】 

    在【窗口】菜单选择【CSS样式】

    打开【CSS样式面板】其右下脚的几个快捷按钮见下图的注释。

【附加样式表】
     链接外部样式表,给出***.css文档的URL即可。也能导入这个CSS文件进行编辑。

【新建样式表】

名称:
     为新建的样式命名,必须以“.”开头,以英文字母命名。

选择器类型:
    类-应用与任何标签。
    标签-定义特定的标签 。
    高级-为具体的某一个标签组合或者具有ID属性的标签定义格式。

定义在:

  • 选择“新建样式表文件”按下“确定”后弹出对话框,要求将样式保存为样式表文件,供“外部文件方式”使用。
  • 选择“仅对该文档”定义只能用在改文档的样式。

    下面通过一个实例来体会一下样式表的作用:

要求:
     建立一个名为“.aaa”的样式表,字体为“宋体”,字号为24点,颜色为“红色”,背景颜色为“蓝色”。

1、新建一个HTML文档,单击【CSS样式】面板中的【新建样式】打开对话框。

    在【分类】中选择【类情】设置字体,大小,颜色后按下【应用】按钮。

    在【分类】中选择【背景】设置背景颜色后点击【确定】.aaa样式表建立完毕。

    在编辑窗口的属性面板样式中选择“aaa”然后输入文本。

    回到【CSS样式】面板,选中“.aaa”然后单击右下脚的“编辑样式”按钮,可以对刚才设定的样式进行更改,例如,将文字颜色改为白色。

 

    上面已经大致介绍了CSS的基本概念,下面来了解一下CSS的属性。

CSS的属性

    通过上面的介绍,大家会发现CSS定义样式有八个大类,每个类都有自己相应的属性。

   

    下面分别介绍各类的功能以及设置后的效果。

类型

    包含9种CSS属性,主要针对网页中的文本。

    下面是按照上图参数设置出的文本效果:

 

背景

    背景的功能是在网页的元素后面放置固定的背景色或者图像,(注意:是网页元素后的背景色或背景图像,而不是网页的背景色或背景图像)其参数面板如下:

    下面是按照上图参数设置出的文本效果:

 

第二节: CSS属性

前面已经大致介绍了CSS的基本概念,下面来了解一下CSS的属性。

CSS的属性

    通过上面的介绍,大家会发现CSS定义样式有八个大类,每个类都有自己相应的属性。

   

    下面分别介绍各类的功能以及设置后的效果。

类型

    包含9种CSS属性,主要针对网页中的文本。

    下面是按照上图参数设置出的效果:

 

背景

    背景的功能是在网页的元素后面放置固定的背景色或者图像,(注意:是网页元素后的背景色或背景图像,而不是网页的背景色或背景图像)其参数面板如下:

    提示:在设置背景图像时,最好同时指定一种背景色。这样在下载背景图像时,背景色会首先出现在屏幕上,而且它会透过背景图像上的透明区域显示出来。

    下面是按照上图参数设置出的效果:

 

区块

    区块是指网页中的文本、图像、层等元素的集合,区块属性用于控制块中内容的间距、对齐方式、文本缩进等,其属性参数面板如下:

    下面是按照上图参数设置出的效果:

 

方框

    CSS将网页中所有的块元素都看作包含在一个虚拟的方框内,这个方框包含四个部分:

下图是方框的参数面板:

【宽】【高】
     设置方框的本身的宽度和高度,可以使方框不受其中内容多少的影响。

【浮动】
     设定其他元素(如文本、层、表格等)在边框的哪个边上围绕元素浮动。

【清除】
     定义元素的边不允许有层,例如清除边上的层,则清除设置的元素,移动到该层的下方。

【填充】
     用于控制边框的边距大小。

【边界】
     用于控制留白的大小。

    下面是按照上图参数设置了方框的效果:

 

边框

边框面板的属性主要针对方框的边框。其参数面板如图:

    下面是按照上图参数设置了边框的效果:

 

列表

    列表属性主要用于控制列表内的各项元素:

  • 【类型】中有10种选择,可供列表每一项前面使用,如圆点或罗马字母。
  • 【项目符号图像】作用是项目前的符号用图像替代。
  • 【位置】项目符号或图像显示在方框之内或者之外。

 

【定位】

 定位主要用于精确定位层的位置,共包括六个参数:

    定位主要是一次性定义网页或者整个网站中层的定位点和层的属性,其具体内容可以参见【层与时间轴】一章。

扩展

    扩展分为两个部分

  • 【分页】这是为打印网页而设置的,选项表示在样式表所控制的对象之前或者之后分页。
  • 【视觉效果】(为网页设置特殊效果)
    • 【光标】指定某个元素上要使用的光标形状,有15种形状可供选择。一般使用的是windows里面的各种光标,也可以指定图标的URL。
    • 【过滤器】为网页中的元素添加各种效果,其具体使用方法在下一个小节详细介绍。

 

第三节:CSS过滤器

CSS过滤器有两种,其中一种是静态过滤器,可以使对象产生静态的特殊效果;另一种是动态过滤器,用来处理网页或者HTML元素对象的显示效果的。

静态过滤器

    首先我们来一起做一个实例,为网页中的图像设置模糊效果:

    1、新建一个网页,网页中插入一个图像:

2、选定图像,然后在【文本】/【CSS样式】菜单中选中【新建】命令,打开【CSS面板】

【标签】选择“img”

【选择器类型】选择“标签”

【定义在】选择“仅对该文档”

    按下确定“确定”按钮后出现样式定义对话框:

    选则“扩展”分类。【过滤器】中选择如下,并手动修改参数,按下【确定】按钮。保存网页文件,然后在浏览器打开该网页,显示如下效果:

实例分析

    在CSS静态过滤器中有14种效果可以被IE4.0浏览器支持,其中是:

  1. Alpha渐变半透明效果。
  2. Blur模糊效果(风吹效果)
  3. Chroma指定颜色为透明效果(使图像中某种指定的颜色成为透明)
  4. DropShadow下落阴影效果(使HTML对象产生下落式阴影效果)
  5. Shadow渐进式下落阴影效果。
  6. FlipH水平翻转效果。
  7. FlipV垂直翻转效果。
  8. Glow光晕效果。
  9. Gray灰色调效果。
  10. Invert底片效果。
  11. Light光源投射效果。
  12. Mask色片覆盖效果(遮罩效果)
  13. Waver波浪效果。
  14. Xear X光片效果。

在上一个实例中,我们使用了模糊效果,其中作用和参数见下表:

参数名称
功能
参数值
Add 是否显示原对象 0=显示;1=不显示
Direction 模糊方向 0=上,45=右上,90=右,125=右下,180=下,225=左下,270=左,315=左上
Strength 模糊半径,单位像素。 自然数

    由此可见,过滤器是由参数和参数值组成的,这些参数和值的变化组合,能使对象产生各种效果。其功能并不比PhotoShop软件中的滤镜效果逊色。相反不少图像处理软件进行特殊效果处理之后的图片体积会有所增加,而使用过滤器对图片进行处理能保持图片原有的属性,大大加快网页装载速度。

    过滤器参数属性过多,针对不同的施加对象,各类参数要根据使用者的喜好、需求以及对象本身的属性进行设置调试。具体的使用方法请各位参考相关书籍,在此不一一叙述了。

动态过滤器

    在一些动画软件中能制作出翻书效果的GIF动画。使用动态过滤器同样可以制作动态的演示效果,并且网页的打开速度要比使用GIF动画快很多。但是动态过滤器不能像静态过滤器那样直接在HTML中调用,它要结合在Scripts程序中,由Scripts对其加以控制,要想使用动态过滤器则需要掌握Scripts编程。请大家参考其他相关书籍学习掌握。这里只介绍一下动态过滤器能产生的效果:

  • 各种形状的大小变换,远近变换;
  • 各种方向的切如切出,淡入淡出;
  • 爆炸效果,百叶窗效果,棋盘效果;
  • 各种随机变换效果等。

 


双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉