网页设计第五章课件

第第5章章 表单、样式表和命令表单、样式表和命令5.3 样式表样式表nCSS（层叠样式表）是对HTML标记功能的扩充，许多使用HTML标记不能完成的功能可以使用CSS完成。nCSS也是一种格式化网页的标准方式，能精确定位网页元素，保持页面在不同浏览器设置下显示一致。n使用CSS可以在网页制作中将格式处理与内容编辑工作分开，减轻劳动强度，提高工作效率。5.3 样式表样式表一、在网页中使用CSS技术一般有三种方式：1、嵌入式样式表：将CSS样式直接嵌入到HTML标记内 5.3 样式表样式表分析：CSS的属性名称和HTML标记的属性名 称有所不同，如字体名称属性为font-family，字体大小属性为font-size等。CSS样式表定义中，属性和属性值之间使用”:”分隔，各个属性之间使用”；“间隔5.3 样式表样式表2、全局格式页样式表：是将CSS样式定义在网页头部。定义的样式在整个网页文件中都可以使用。样式定义行1 样式定义行2 5.3 样式表样式表3、样式表文件 样式表文件可以实现多个网页文档共享样式表定义。真正做到格式处理与内容分类，提高工作效率，使页面格式标准化。（1）生成样式表文件 样式表文件就是只包含标签和类定义项的文本文件，文件扩展名为.css5.3 样式表样式表（2）使用样式表文件 在网页中使用样式表文件有以下两种方式：链接外部文件 这种方式只是将样式表文件链接到页面中，不需要占用存储空间。5.3 样式表样式表 type属性值只能是属性值只能是text/css。是允许不支持这类型的是允许不支持这类型的浏览器忽略样式表单。浏览器忽略样式表单。rel属性值只能是属性值只能是styleshee5.3 样式表样式表导入格式页 导入格式页就是将样式表文件导入到本网页中。这种方式较少使用，因为浪费存储空间。import url(“样式文件名”)5.3 样式表样式表二、CSS使用方法1、新建样式表，如图所示5.3 样式表样式表n2、如下图所示，利用样式表制作网页5.3 样式表样式表n如下图所示，制作网页5.4 CSS滤镜滤镜 nCSS滤镜是CSS的一个filter属性，滤镜格式为：filter:属性值(参数=参数值，)5.4 CSS滤镜滤镜 根据属性值和参数设置的不同可以产生不同的效果。常用CSS滤镜属性值如下：alpha：透明滤镜 blur：模糊滤镜 shadow/dropshadow：阴影效果滤镜 glow：发光效果滤镜5.4 CSS滤镜滤镜 chroma：屏蔽色滤镜filpH：水平镜像滤镜filpV：垂直镜像滤镜ware：波纹滤镜gray：灰度滤镜invert：翻转滤镜Xray：X线滤镜5.4 CSS滤镜滤镜 n一些滤镜不能用于图片，如发光滤镜。n对同一对象可以使用多个滤镜，格式为：filter：属性值（参数=参数值,）属性值（参数=参数值,）例如：例如：filter:fliph flipv水平镜像水平镜像滤镜滤镜垂直镜垂直镜像滤镜像滤镜5.4 CSS滤镜滤镜 1、透明滤镜Alpha 透明滤镜是以透明效果显示指定区域的对象，格式为：filter:alpha(opacity=不透明度 ,finishopacity=结束不透明度,style=样式,startX=n,startY=m,finishX=p,finishY=q)n、m、p、q均为整数值。可选值为可选值为0100，0代表代表完全透明，完全透明，100代表完全代表完全不透明。不透明。只使用只使用opacity参数参数时，表示整个对象时，表示整个对象的不透明度的不透明度使用可选项参数时，使用可选项参数时，style参数是必须的。参数是必须的。他指示透明区域的他指示透明区域的形状。其中形状。其中1代表代表线形，线形，2代表放射代表放射状，状，3代表长方形。代表长方形。指示结束区指示结束区域的不透明域的不透明度。默认值度。默认值为为05.4 CSS滤镜滤镜 n使用可选项参数时，style参数是必须的。他指示透明区域的形状。其中1代表线形，2代表放射状，3代表长方形。设置或检索透明渐变的样式。5.4 CSS滤镜滤镜 n0|1|2|3 0:默认值默认值。整体透明度。将 Opacity 值均匀的作用于对象。1:线性渐变透明度。从由 StartX 和 StartY 决定的点，由 Opacity 决定的透明度开始，到由 FinishX 和 FinishY 决定的点，由 FinishOpacity 决定的透明度结束。2:圆形放射渐变透明度。圆形放射区域的圆心为对象的中心，圆周到与对象的边相切为止。透明渐变由圆心开始，到圆周结束。开始透明度由 Opacity 决定，结束透明度由 FinishOpacity 决定。5.4 CSS滤镜滤镜 3:矩形放射渐变透明度。由对象的边开始，到对象的中心结束。开始透明度由 Opacity 决定，结束透明度由 FinishOpacity 决定。5.4 CSS滤镜滤镜 nfinishopacity参数指示结束区域的不透明参数指示结束区域的不透明度，这时度，这时opacity指示开始区域的不透明度。指示开始区域的不透明度。finishopacity参数的默认值为参数的默认值为0。区域是由区域是由startX,startY,finishX,finishY指指定。定。n startX,startY,finishX,finishY参数的默参数的默认值与认值与style参数的取值有关。参数的取值有关。Style=1时默时默认值为：认值为：startX=0,startY=0,finishX=区区域宽度域宽度,finishY=05.4 CSS滤镜滤镜 startX:可选项。整数值(Integer)。设置或检索透明渐变开始点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0。startY:可选项。整数值(Integer)。设置或检索透明渐变开始点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0。5.4 CSS滤镜滤镜 finishX:可选项。整数值(Integer)。设置或检索透明渐变结束点的水平坐标。其数值作为对象宽度的百分比值处理。默认值为 0。finishY:可选项。整数值(Integer)。设置或检索透明渐变结束点的垂直坐标。其数值作为对象高度的百分比值处理。默认值为 0。5.4 CSS滤镜滤镜 nstyle=2或3时,区域起始点为区域中心,结束点为外边框,指定区域值无效.5.4 CSS滤镜滤镜 2、模糊滤镜blur与阴影效果滤镜shadow、dropshadow(1)模糊滤镜blur：产生类似阴影的效果.模糊滤镜格式为:filter:blur(add=truefalse,direction=方向,strength=长度)5.4 CSS滤镜滤镜 add参数默认值为true,一般不需要使用。direction为产生模糊影像的方向，默认值270(向左)，只能使用45的整数倍数值，0为垂直向上，按顺时针递增。strength为模糊阴影长度,默认5px。5.4 CSS滤镜滤镜(2)shadow滤镜 shadow滤镜可以在指定方向产生投影。它的格式是：filter:shadow(color=投影颜色，direction=角度)direction指示投影的方向，它的取值和blur滤镜是一样的。5.4 CSS滤镜滤镜（3）dropshadow滤镜 dropshadow滤镜可以指定投影的偏移量。它的格式是：filter:dropshadow(color=投影颜色，offX=n,offY=m,positive=truefalse)5.4 CSS滤镜滤镜 5.4 CSS滤镜滤镜 noffX:可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在横坐标轴上以对象为基准的偏移量。正值向右偏移，负值向左偏移。默认值为 5。noffY:可选项。整数值(Integer)。单位为像素(px)。设置或检索阴影在纵坐标轴上以对象为基准的偏移量。正值向下偏移，负值向上偏移。默认值为 5。5.4 CSS滤镜滤镜 positive:可选项。布尔值(Boolean)。设置或检索滤镜是否从对象的非透明像素建立阴影。假如你有一个透明的对象但想给它建立普通的阴影，设置此参数值为 true。这会让透明对象的阴影在透明区域外，而非在透明区域内。5.4 CSS滤镜滤镜 true|false true:默认值默认值。滤镜从对象的非透明像素建立阴影。false:滤镜从对象的透明像素建立阴影。5.4 CSS滤镜滤镜 blur、shadow、dropshadow三种滤镜有相似之处，但各有不同特点。blur滤镜可以指定阴影方向和长度；shadow滤镜只能指定投影方向；dropshadow滤镜可以达到投影与对象分离的效果。5.4 CSS滤镜滤镜 3、发光效果滤镜glow 发光效果滤镜glow会使对象的边缘产生类似发光的效果。它的格式如下：filter:glow(color=发光颜色，strength=光线长度)发光效果滤镜不能用于图片。发光效果滤镜不能用于图片。5.4 CSS滤镜滤镜 单位为单位为象素象素5.4 CSS滤镜滤镜 4、屏蔽色滤镜chroma 该滤镜用来屏蔽掉某种指定颜色，其格式为：filter：chroma（color=颜色）使用chroma滤镜时，屏蔽掉的颜色是指定的某种颜色，是以颜色值判断的，所以有时认为应该屏蔽掉的颜色没有全部屏蔽掉,其原因就是眼睛对颜色的区分是有限的,与颜色值差距很大。5.4 CSS滤镜滤镜 5、水平与垂直镜像滤镜 flipH、flipV滤镜用于实现对象的水平与垂直翻转效果，没有参数，直接使用即可。格式为：filter:flipH flipV5.4 CSS滤镜滤镜 6、波纹滤镜ware 该滤镜可以使图像产生正玄波动效果。格式为：filter：ware(add=true false，freq=频率，lightstrength=光线强度，phase=初相角，strength=振幅)波纹方向，波纹方向，true为横向，为横向，false为纵向为纵向（默认（默认）波纹光线强波纹光线强度，取值为度，取值为0100，0最最强，强，100最最弱弱正玄波初正玄波初相角，默相角，默认值为认值为0波纹幅度，在波纹幅度，在add为为false时时不起作用不起作用5.4 CSS滤镜滤镜 add:可选项。布尔值(Boolean)。设置或检索滤镜作用图像是否覆盖原始图像。true|false true:滤镜作用图像覆盖原始图像。false:默认值默认值。只显示滤镜作用图像。5.4 CSS滤镜滤镜 freq:可选项。整数值(Integer)。设置或检索滤镜建立的波浪数目。默认值为 3。lightStrength:可选项。整数值(Integer)。波纹光线强度。取值范围为 0-100。默认值为 100。0光线最强，光线最强，100光线最弱。光线最弱。5.4 CSS滤镜滤镜 phase:可选项。整数值(Integer)。设置或检索正弦波开始处的相位偏移。取值范围为 0-100。默认值为 0。数值越大则偏移量越大。strength:可选项。整数值(Integer)。单位为像素(px)。设置或检索以对象为基准的在运动方向上的向外扩散距离。取值范围为=1。默认值为 1。5.4 CSS滤镜滤镜 7、灰度滤镜gray、翻转滤镜invert和X线滤镜Xray都是没有参数的滤镜。灰度滤镜gray：把彩色图片转换成灰度等级的图片（黑白图片）。翻转滤镜invert：对图片的色彩、饱和度和亮度值产生翻转效果。X线滤镜Xray：可以产生类似X光片的效果。5.4 CSS滤镜滤镜 5.1 表单表单n表单：是用户利用浏览器对Web站点网络数据库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理。这种查询方式叫做交互的或者叫做双向的。这些表单对象包括文本域、下拉列表框、复选框和单选按钮等。5.1 表单表单n表单对象是让用户输入信息的地方，表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去，才可以接收外来的信息。5.1 表单表单1、表单域和插入表单对象（1）创建与删除表单域5.1 表单表单（2）设置表单域的属性5.1 表单表单n“表单名称”文本框：在该文本框内输入表单域的名称n“动作”文本框和按钮：利用它们可以输入脚本程序或含有脚本程序的HTML文件。5.1 表单表单n“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的三种方式。GET：获得，即追加表单值到URL，并发送服务器GET请求。POST：传递，在消息正文中发送表单的值，并发送服务器POST请求。5.1 表单表单（3）插入表单对象5.1 表单表单2、设置文本字段的属性文本字段也叫文本域。表单中经常使用文本字段。它可以是单行，也可以是多行，它用于接收文本、数字和字符。5.1 表单表单3、设置复选框和单选按钮的属性（1）设置复选框的属性5.1 表单表单（2）设置单选按钮的属性：一组单选按钮中只允许选中一个。5.1 表单表单4、设置按钮的属性 按钮用来制作“提交”和“重置”按钮，还可以调用函数提交表单：可以向服务器提交整个表单。重设表单：可以取消前面的输入，重位 表单。无：表示是一般按钮，可用来调用脚本程序。5.1 表单表单5、设置列表/菜单和文件域的属性5.1 表单表单eg：如图所示，制作表单p经常不断地学习,你就什么都知道。你知道得越多,你就越有力量pStudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe学习总结结束语当你尽了自己的最大努力时，失败也是伟大的，所以不要放弃，坚持就是正确的。When You Do Your Best,Failure Is Great,So DonT Give Up,Stick To The End演讲人：XXXXXX 时 间：XX年XX月XX日