博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web-4. 装饰页面的图像
阅读量:4325 次
发布时间:2019-06-06

本文共 1482 字,大约阅读时间需要 4 分钟。

4. 装饰页面的图像

4.1 页面颜色的设计

色彩的一般象征意义:红色是烈火的颜色,象征热情、奔放,也是鲜血的颜色,象征生命;黄色象征华丽、富贵、明快;绿色是大自然中草木的颜色,象征自然和生长,也象征和平与安宁;紫色有庄重感,象征高贵;白色给人以纯洁清白的感觉,象征圣洁。

(1)暖色调:红色、橙色、黄色、褐色等色彩的搭配。

(2)冷色调:青色、绿色、蓝色等色彩的搭配。

(3)将色调完全相反的颜色搭配在同一空间中。

 

4.2 图像的基本类型

  1. GIF格式

GIFGraphics Interchange Format的简称,可交换的图像格式。

注:“失真”与“不失真”

指的是图片转换成此格式时,其图像品质是否与原来相同。通常为了增加压缩的效果,一些肉眼看不到的图像信息就会被删除。这就与原来的图像不同了,这个过程是不可以恢复的。

 

  1. JPEG格式

JPEG格式是Joint Photographic Experts Group的简称,联合图像专家组。扩展名是.jpg.jpeg

 

4.3 图像的插入以及格式

插入标记<img>

格式:

<img src=” ” alt=” ” border=” ” width=” ” height= “ ” align=” ”>

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

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

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

widthheight在默认的情况下就是图像的原始大小

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

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

 

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

ο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

你可能感兴趣的文章
winform非常实用的程序退出方法!!!!!(转自博客园)
查看>>
xml解析
查看>>
centos安装vim
查看>>
linux工作调度(计划任务)
查看>>
hdu--1698 Just a Hook(线段树+区间更新+懒惰标记)
查看>>
SynchronousQueue
查看>>
Python学习笔记-EXCEL操作
查看>>
依照特定轨迹遍历字符串图
查看>>
Mantis 1.1.0 报告问题中设置必填项或取消必填项[Z]
查看>>
爬虫添加代理
查看>>
POJ 题目1204 Word Puzzles(AC自己主动机,多个方向查询)
查看>>
oracle经常使用函数(2)
查看>>
Iocomp控件之数字显示【图文】
查看>>
Androd开发之广告栏设计
查看>>
jquery.fly.min.js 拋物插件
查看>>
mini2440系统引导(五)串口UART
查看>>
JDK5.0新特性系列---9.注释功能Annotation
查看>>
普通平衡树(指针splay)
查看>>
【HEOI 2018】Day2 T2 林克卡特树
查看>>
vue-cli中配置sass的方法
查看>>