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>

格式：

src用于指定图像原文件的所在路径。

alt用于为图像添加提示性文字。即当鼠标放在该图像上时，鼠标的旁边就会出现提示性文字。

border用于为图像设置边框。当没有在图像上添加超链接的时候，图像边框为黑色；当为图像加上超链接的时候，图像边框的颜色与链接的文字的颜色是一样的，为深蓝色。

width和height在默认的情况下就是图像的原始大小

align用于为退昂设置与文字之间的对齐方式。

hspace和vspace用于设置图像与文字之间的对齐方式。

Top：沿着当前文本行的顶端对齐图像的顶端。

Middle：沿着当前文本行的顶端居中拜访图像。

Bottom：沿着当前文本行的底部对齐图像的底部。

Left：图像在文字的左侧。

Right：图像在文字的右侧。

Baseline：英文文字基准线对齐。

Textop：英文文字上边线对齐。

absbottom：文字的底线位于图像的底部。

absmiddle：文字的底线位于图像的中间。

例子：

<html>

<head>

<title>图像对齐实例</title>

</head>

<body>

水陆草木之花

</p>

</body>

</html>

4.4 动态替换图像

动态替换的意思就是，当用户的鼠标移动到图像上时，图像就会变成另一幅画，当离开后又会变成原来的图像。

例子：

<html>

<head>

</head>

<body>

<center><img src="./1.jpg" name="picture" width=400 eigth=600

οnmοuseοver="picture.src='./2.jpg'"

οnmοuseοut="picture.src='./1.jpg'">

</center>

</body>

</html>

转载于:https://www.cnblogs.com/free-1122/p/9858403.html

web-4. 装饰页面的图像相关推荐

sharepoint html 编辑器 ,使用 Web 部件自定义页面简介
Web 部件和 Web 部件页概述 Web 部件是模块化的信息单元,它构成 Web 部件页的基本构建基块. 您可以将 Web 部件添加到 Web 部件页的 Web 部件区域中,然后自定义各个 Web ...
html在浏览器显示图片,html - 在所有Web浏览器中显示TIFF图像
html - 在所有Web浏览器中显示TIFF图像如何在HTML页面中处理TIFF文件? 我想在HTML页面中显示TIFF文件. 我尝试使用嵌入式标签,对象ID,img等.但我无法在HTML页面中显 ...
第五章——认识媒体：为你的页面增加图像
浏览器如何处理图像浏览器看到一个<img>元素时,相比其他标记,会做不同的处理:浏览器在页面中显示图像之前,必须先获或这个图像. 下面通过一个例子来说明浏览器是如何处理图像的.比如,服务 ...
使用ASP.NET AJAX异步调用Web Service和页面中的类方法（2）：处理异步调用中的异常...
本文来自<ASP.NET AJAX程序设计第II卷:客户端Microsoft AJAX Library相关>的第三章<异步调用Web Service和页面中的类方法>,请同时 ...
将WebApiTestClient添加到ASP.NET Web API帮助页面
ASP.NET Web API帮助页面是一种有用的扩展,可为您的Web API自动生成基于Web的文档.它使调试变得更容易,因为您可以将帮助页面中的信息复制/粘贴到Fiddler等工具中,以调用Web ...
[html] 如何禁止web端的页面缩放？
[html] 如何禁止web端的页面缩放? <meta name="viewport" content="width=device-width, initial-s ...
手机Web前端调试页面之——Chrome DevTools（谷歌浏览器）的模拟手机调试
Chrome DevTools(谷歌浏览器)的模拟手机调试前言在客户端开发中,由于使用手机app加载webview页面,客户端与前端经常会出现数据交互情况: 但是在手机中无法调试看到前端代码的步骤 ...
关于Web的欢迎页面的开发设置
关于Web的欢迎页面的开发设置每博一文案命运总是不如人愿.但往往是在无数的痛苦中,在重重的矛盾和艰辛中,才是人成熟起来. 一次邂逅,一次目光的交融,就是永远的合二为一,就是与上帝的契约:总是风暴雷 ...
web record 前端页面录屏 (react + typescript)
web record 前端页面录屏 (react + typescript + parcel) 项目地址: https://github.com/bgwd666/web-record 演示: 录屏页面 ...
设计测试用例（蘑菇街web的登录页面）
下图是蘑菇街web的登录页面,根据图中的内容涉及相应的用例. 1.功能测试: (1)正常输入用户名.邮箱.手机号和对应的密码能够正常登录 (2)用户名.邮箱.手机号输错.密码正确无法登陆,反之一样 ( ...

web-4. 装饰页面的图像

4. 装饰页面的图像

web-4. 装饰页面的图像相关推荐

最新文章

热门文章