中职 网页设计与制作案例教程第5章 .pptx

《中职 网页设计与制作案例教程第5章 .pptx》由会员分享，可在线阅读，更多相关《中职 网页设计与制作案例教程第5章 .pptx（52页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、中职 网页设计与制作案例教程第5章 工信版第5章 使用CSS设置图像样式WEB35.1 基础项目1：制作“李彦宏众里寻他千百 度”网页5.2 知识库：CSS图像样式5.3 基础项目2：制作“少年中国说”网页5.4 知识库：CSS背景样式5.5 提高项目：制作“低碳生活 从我做起”网页5.6 拓展项目：制作“春节民俗”网页目录WEB45.1 基础项目1：制作“李彦宏众里寻他千百度”网页5（1）掌握页面插入图像的CSS样式修饰方法；能够为网页中的图像或其他元素设置大小、位置、边框和对齐方式等，能够制作图文混排的页面。（2）掌握页面背景图的设置方法，能够在页面上添加背景图像。知识技能目标5.1 基础

2、项目1：制作“李彦宏众里寻他千百度”网页WEB6JPG格式GIF格式PNG格式5.2.1 网页图像格式5.2 知识库：CSS图像样式5.2.1 网页图像格式1GIF格式优点：优点：GIF图像支持背景透明，支持动画，支持无损压缩，文件小，加载速度快。缺点：缺点：只有256色，不适合摄影作品等高质量图像。应用范围：应用范围：常用于网站Logo、小图标（Icon）、线条图、小动画，以及网站上的元素背景（如按钮背景、导航条背景）等。5.2.1 网页图像格式2JPG格式优点优点：可以高效压缩，丢失图像不为肉眼所察觉的部分，使得图像文件变小的同时基本不丢失颜色。缺点：缺点：因支持有损压缩，不适宜打印，不支

3、持动画、不支持透明背景。应用范围应用范围：用来显示照片等色彩丰富的精美图像。5.2.1 网页图像格式3PNG格式优点优点：支持无损压缩、可渐变透明，可渐显，加载速度快。缺点：缺点：不如JPG色彩丰富，不支持动画。应用应用范围范围：常用于banner，也可用于Logo以及网站上的元素背景等。5.2.1 网页图像格式PNG是目前公认的最适合网络的图像格式，它兼具GIF和JPG的大部分优点，一般切图都会选择PNG格式导出。建议：建议：网站logo、小图标、按钮、背景、截图等推荐使用PNG格式；动图使用GIF格式；照片或风景图使用JPG格式。5.2.2 CSS常用图像样式1设置图像大小 在CSS中，可

4、以利用width（宽度）和height（高度）这两个属性来设置图像大小。语法格式：语法格式：width:属性值;height:属性值;5.2.2 CSS常用图像样式width和height这两个属性均有4种属性值，其属性值及含义如下：属性值属性值描述描述auto默认值。浏览器可计算出实际的宽/高度length使用px、cm等单位定义宽/高度%定义基于包含块（父元素）宽/高度的百分比宽/高度inherit规定应该从父元素继承width/height属性的值5.2.2 CSS常用图像样式%：一个相对单位px：绝对单位提示：当只设置width属性，而没有设置height属性时，图像会自动等比例缩放；

5、如果只设置了height属性，结果也一样。只有同时设置这两个属性，图像才不会等比例缩放。5.2.2 CSS常用图像样式在DW中测试以下两段代码，并在浏览器中拖动改变窗口大小对比查看效果。自适应示例自适应示例 图片缩放 .testwidth:50%;固定值示例固定值示例不等比例缩放 .testwidth:500px;5.2.2 CSS常用图像样式2设置图像边框图像的边框主要有3个属性：边框样式、边框宽度和边框颜色，这3个属性一般都是同时设置。border-style：边框样式border-width：边框宽度border-color：边框颜色语法格式：border-style:属性值;borde

6、r-width:属性值;border-color:属性值;5.2.2 CSS常用图像样式三个属性可以合并成一条语句语法格式：border:边框样式属性值 边框宽度属性值 边框颜色属性值;例：border:solid 5px red;/*设置实线、5个像素的红色边框*/请判断下面这条语句效果：border:dashed 2px#ccc;5.2.2 CSS常用图像样式4个方向分别设置：border-top：上边框border-right：右边框border-bottom：下边框border-left：左边框5.2.2 CSS常用图像样式提示：border的几个属性都可以同时给4个方向赋予不同的属性

7、值，当一个属性后面同时有4个属性值时，分别代表上、右、下、左顺序的4个方向；当后面有3个属性值时，顺序是上、左右、下；当后面有2个属性值时，顺序是上下、左右；当后面只有1个属性值时，则代表4个方向的样式相同。例：border-style:dotted solid;/*设置上边框和下边框是点状，左右边框是实线*/border-style:dotted solid double dashed;/*设置上边框是点状、右边框是实线、下边框是双线、左边框是虚线*/5.2.2 CSS常用图像样式border-width的属性值属性值属性值描述描述thin细边框medium中等边框thick粗边框lengt

8、h（值）（值）指定宽度值5.2.2 CSS常用图像样式border-style的属性值属性值属性值描述描述none定义无边框。hidden与none相同。dotted定义点状边框。dashed定义虚线。solid定义实线。double定义双线。双线的宽度等于border-width的值。groove定义3D凹槽边框。其效果取决于border-color的值。ridge定义3D垄状边框。其效果取决于border-color的值。inset定义3Dinset边框。其效果取决于border-color的值。outset定义3Doutset边框。其效果取决于border-color的值。inherit

9、规定应该从父元素继承边框样式。5.2.2 CSS常用图像样式3设置图像对齐方式（1）水平对齐图像的水平对齐不能通过直接设置图像的text-align属性实现，而是要通过设置其父元素的text-align属性来实现。left：左对齐center：居中对齐right：右对齐5.2.2 CSS常用图像样式3设置图像对齐方式（2）垂直对齐vertical-align 属性设置元素的垂直对齐方式，这个属性主要用于在文本中垂直排列图象。语法格式：vertical-align:属性值;5.2.2 CSS常用图像样式vertical-align的属性值属性值属性值描述描述baseline默认。元素放置在父元素

10、的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标top把元素的顶端与行中最高元素的顶端对齐text-top把元素的顶端与父元素字体的顶端对齐middle把此元素放置在父元素的中部。bottom把元素的顶端与行中最低的元素的顶端对齐。text-bottom把元素的底端与父元素字体的底端对齐。length比用数值指定由基线算起的偏移量，正负数均可。基线对于数值来说为0。%使用line-height属性的百分值来排列此元素，允许使用负值。inherit规定应该从父元素继承vertical-align属性的值。5.2.2 CSS常用图像样式图像垂直对齐示例：p.top vertical

11、-align:text-top p.bottom vertical-align:text-bottom 这是一幅位于段落中的图像。这是一幅位于段落中的图像。代码效果5.2.2 CSS常用图像样式提示：提示：当vertical-align的值为bottom或者sub时，IE与Firefox的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建议尽量少地使用浏览器间显示效果不一样的属性值。5.2.2 CSS常用图像样式4设置图文混排效果（1）文字环绕语法格式：float:属性值;float的属性值属性值属性值描述描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示

12、在其在文本中出现的位置。inherit规定应该从父元素继承float属性的值。5.2.2 CSS常用图像样式4设置图文混排效果（2）设置图像与文字间距离一般而言，在设置图像浮动后，还会通过margin属性来设置图像与文字之间的距离。如图像位于文字左边，则通过margin-right设置图像右边的外边距；反之，通过margin-left设置左边的外边距。提示：如果把margin的值设定为负数，文字将移动到图像的上方引起重叠。5.2.3 图像映射5.2.3 图像映射图像可以通过和创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接，这些可供点击的链接区域通常也被称为“热区”。图像标签中，

13、通过usemap属性与标签的name属性或id属性相关联，创建图像与映射之间的联系。具体是name属性还是id属性由浏览器决定，所以应同时向标签添加name和id两个属性。5.2.3 图像映射标签永远嵌套在标签内部。标签定义图像映射中的区域，其属性及属性值如下：必需的属性必需的属性属性属性值描述alttext定义此区域的替换文本。可选的属性可选的属性属性属性值描述coords坐标值定义可点击区域（对鼠标敏感的区域）的坐标。hrefURL定义此区域的目标URL。nohrefnohref从图像映射排除某个区域。shapedefaultrectcircpoly定义区域的形状。default是默认，r

14、ect是矩形，circ是圆形，poly是多边形。target_blank_parent_self_top在新窗口打开被链接文档在父框架集中打开被链接文档默认值，在与当前文档相同的框架中打开被链接文档在整个窗口中打开被链接文档WEB315.3 基础项目2：制作“少年中国说”网页32（1）掌握网页中的各元素背景颜色和背景图像的设置方法。（2）能够对背景图像进行各种控制，能够灵活处理背景颜色和背景图像的关系。知识技能目标5.3 基础项目2：制作“少年中国说”网页WEB335.4 知识库：CSS背景样式5.4.1 背景颜色样式background-color属性可用于设置图像或其它网页元素的背景颜色。

15、其可能的属性值如下：属性属性值描述描述color_name规定颜色值为颜色名称的背景颜色（比如red）。hex_number规定颜色值为十六进制值的背景颜色（比如#ff0000）。rgb_number规定颜色值为rgb代码的背景颜色（比如rgb(255,0,0)）。transparent默认。背景颜色为透明。inherit规定应该从父元素继承background-color属性的设置。WEB345.4 知识库：CSS背景样式5.4.2 背景图像样式CSS可以为整个页面设置背景图像，也可以为页面上指定的HTML元素设置背景图像。background-image：插入背景图像background-

16、repeat：设置背景图像的重复方式background-position：设置背景图像的位置background-attachment：固定背景图像WEB355.4 知识库：CSS背景样式5.4.2 背景图像样式（1）插入背景图像语法格式：background-image:url(背景图像的路径和名称);默认情况下背景图像会重复铺满设置背景图像的块元素区域WEB365.4 知识库：CSS背景样式5.4.2 背景图像样式（2）设置背景图像的重复方式语法格式：background-repeat:属性值;默认情况下，背景图像将从其所在元素的左上角开始重复。background-repeat的属性值

17、属性属性值描述描述repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。inherit规定应该从父元素继承background-repeat属性的设置。WEB375.4 知识库：CSS背景样式5.4.2 背景图像样式（3）设置背景图像的位置语法格式：background-position:属性值;两种取值方式：长度单位，如px、百分比等关键字描述WEB385.4 知识库：CSS背景样式background-position的属性值属性属性值描述描述说明明top left左

18、上如果仅规定了一个关键词，那么第二个值将是center。默认值：0%0%。top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下x%y%第一个值是水平位置，第二个值是垂直位置。左上角是0%0%。右下角是100%100%。如果仅规定了一个值，另一个值将是50%。xpos ypos第一个值是水平位置，第二个值是垂直位置。左上角是00。单位是像素(0px0px)或任何其他的CSS单位。如果仅规定了一个值，另一个值将是50%。您

19、可以混合使用%和position值。WEB395.4 知识库：CSS背景样式5.4.2 背景图像样式（4）固定背景图像语法格式：background-attachment:属性值;background-attachment的属性值属性属性值描述描述scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。inherit规定应该从父元素继承background-attachment属性的设置WEB405.4 知识库：CSS背景样式5.4.2 背景图像样式（5）背景样式综合设置background:#FFF url(images/dargon.

20、png)no-repeat fixed center center;background-color:#FFF;background-image:url(images/dargon.png);background-repeat:no-repeat;background-attachment:fixed;background-position:center center;WEB415.4 知识库：CSS背景样式5.4.3 CSS雪碧图雪碧图（sprite）也叫CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图像上，然后利用CSS的背景定位来显示需要显示的图像部分。减少H

21、TTP请求次数提升网页加载速度WEB425.4 知识库：CSS背景样式5.4.3 CSS雪碧图应用雪碧图三种主要情况：静态图，不随用户信息的变化而变化。小图，图像容量比较小。（大图不建议拼成雪碧图）加载量比较大。WEB435.4 知识库：CSS背景样式雪碧图制作规则（1）合并之前必须保留空隙如果是小图标，留的空隙可适当小一些，一般20像素左右；如果是大图标，要留的空隙就要大一点，因为大图标在调整的时候，影响到的空间也会比较大。WEB445.4 知识库：CSS背景样式雪碧图制作规则（2）排列方式有横向和纵向尽量避免大面积空白，让合并后的图像尽可能小一些。WEB455.4 知识库：CSS背景样式雪

22、碧图制作规则（3）合并分类的原则3种合并分类的原则：基于模块、基于大小和基于色彩。把同属一个模块的进行合并WEB465.4 知识库：CSS背景样式雪碧图制作规则（3）合并分类的原则把大小相近的进行合并WEB475.4 知识库：CSS背景样式雪碧图制作规则（3）合并分类的原则把色彩相近的进行合并WEB485.4 知识库：CSS背景样式雪碧图制作规则（4）合并推荐在实际的雪碧图制作中，一般采用两种方法：u只本页用到的图像合并u有状态的图标合并WEB495.4 知识库：CSS背景样式雪碧图应用练习请参考教材上的代码完成练习505.5 提高项目：制作“低碳生活 从我做起”网页515.6 拓展项目：制作“春节民俗”网页