web-4. 装饰页面的图像
Posted free-锻炼身体
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web-4. 装饰页面的图像相关的知识，希望对你有一定的参考价值。
4. 装饰页面的图像
4.1 页面颜色的设计
色彩的一般象征意义：红色是烈火的颜色，象征热情、奔放，也是鲜血的颜色，象征生命；黄色象征华丽、富贵、明快；绿色是大自然中草木的颜色，象征自然和生长，也象征和平与安宁；紫色有庄重感，象征高贵；白色给人以纯洁清白的感觉，象征圣洁。
（1）暖色调：红色、橙色、黄色、褐色等色彩的搭配。
（2）冷色调：青色、绿色、蓝色等色彩的搭配。
（3）将色调完全相反的颜色搭配在同一空间中。
4.2 图像的基本类型
- GIF格式
GIF是Graphics Interchange Format的简称，可交换的图像格式。
注：“失真”与“不失真”
指的是图片转换成此格式时，其图像品质是否与原来相同。通常为了增加压缩的效果，一些肉眼看不到的图像信息就会被删除。这就与原来的图像不同了，这个过程是不可以恢复的。
- JPEG格式
JPEG格式是Joint Photographic Experts Group的简称，联合图像专家组。扩展名是.jpg和.jpeg。
4.3 图像的插入以及格式
插入标记<img>
格式：
<img src=” ” alt=” ” border=” ” width=” ” height= “ ” align=” ”>
src用于指定图像原文件的所在路径。
alt用于为图像添加提示性文字。即当鼠标放在该图像上时，鼠标的旁边就会出现提示性文字。
border用于为图像设置边框。当没有在图像上添加超链接的时候，图像边框为黑色；当为图像加上超链接的时候，图像边框的颜色与链接的文字的颜色是一样的，为深蓝色。
width和height在默认的情况下就是图像的原始大小
align用于为退昂设置与文字之间的对齐方式。
hspace和vspace用于设置图像与文字之间的对齐方式。
Top：沿着当前文本行的顶端对齐图像的顶端。
Middle：沿着当前文本行的顶端居中拜访图像。
Bottom：沿着当前文本行的底部对齐图像的底部。
Left：图像在文字的左侧。
Right：图像在文字的右侧。
Baseline：英文文字基准线对齐。
Textop：英文文字上边线对齐。
absbottom：文字的底线位于图像的底部。
absmiddle：文字的底线位于图像的中间。
例子：
<html>
<head>
<title>图像对齐实例</title>
</head>
<body>
<h1 align=center>爱莲说</h1>
<h3 align=center>周敦颐</h3>
<p><img src="./connect.jpg" alt="美女" width=150 height=100 align=left>
水陆草木之花
</p>
</body>
</html>
4.4 动态替换图像
动态替换的意思就是，当用户的鼠标移动到图像上时，图像就会变成另一幅画，当离开后又会变成原来的图像。
例子：
<html>
<head>
<title>动态图像</title>
</head>
<body>
<center><img src="./1.jpg" name="picture" width=400 eigth=600
onmouseover="picture.src=‘./2.jpg‘"
onmouseout="picture.src=‘./1.jpg‘">
</center>
</body>
</html>
以上是关于web-4. 装饰页面的图像的主要内容，如果未能解决你的问题，请参考以下文章
使用 sitemesh/decorator装饰器装饰jsp页面（原理及详细配置）
使用 sitemesh/decorator装饰器装饰jsp页面（原理及详细配置）
装饰器实现flask登录，没登录不让看index页面，多个装饰器装饰一个函数的执行顺序