HTML(3)

将图像放入页面中
一、图像基础知识
1，计算机中显示的图像一般分两大类:矢量图、位图，二者区别是矢量图随着图片大小的缩放不会影响图片的效果，而位图会随图片的缩放有损图像质量。放大原始位图会使图像效果失真，缩小原始位图同样会使图像效果失真，这是因为图像的缩小，减小的是图像中像素的数量。
位图被分为8（有2的8次方种颜色）,16（有2的16次方种颜色）,24,32位图，设计者一般选择24位图像，32位图像虽然
质量更好，但也同时带来更大的图像容量，拖慢浏览者浏览页面的速度，事实上，一般肉眼很难分辨24位图和32位图的区别

页面中常用的位图格式:
a.JPEG格式，后缀名.jpg,JPEG文件是一种压缩过的图像，压缩的图像可以保持为8位、24位、32位深度的图像可以很好地处
理大面积调色的图像，如摄影作品、相片，但不适用于色彩对比强烈、有清晰边界、简单构图的图像，如logo、banner
b.PNG格式，后缀名.png,这是一种能够存储32位信息的位图图像,采用的是一种无损压缩的方式，PNG是专门为Web创造的图像，设计者常使用PNG文件在页面中加入logo或一些点缀的小图像

c.GIF格式，后缀.gif,它只支持256色以内的图像，因此GIF文件的图像效果很差，大可以制作动画

这三种图像在使用上各有千秋，JPEG可以压缩图像的容量，PNG的质量较好，GIF可以做动画。因此，当处理色调复杂、绚丽的图像时，如照片、图画时适合使用JPEG，而处理一些logo、banner、简单线条构图时适合使用PNG,而GIF通常只是用来表达动画效果

对于图像的使用没有严格的要求，设计者可以根据自己的习惯选择使用不同格式的图像

2.图像的分辨率单位dpi(display pixels/inch),即每英寸显示的线数。常说的分辨率有两种:
a.屏幕分辨率（计算机显示器默认的分辨率）
如果设计者制作的页面超过了显示器默认的分辨率，那么即使在浏览器全屏的情况下，页面也不能在浏览器中展示出来

b.图像分辨率度量位图图像内数据量多少，分辨率越高的图像包含的数据越多，图像的容量也就越大，需要消耗更多的计算机资源，需要更大的存储空间，因此要选择合适的图片（并不是说分辨率越高的图像就一定越清晰）

分辨率与像素的关系:分辨率指每英寸的像素值

3.网页中常用的banner尺寸(几种国际尺寸的banner，可供参考，不一定要完全遵循)
468*60 全尺寸banner 应用最为广泛的广告条尺寸，用于页眉或页脚
392*72 全尺寸带导航条banner 主要用于有较多图片展示的广告条，用于页眉或页脚
234*60 半尺寸banner,适用于框架或左右形式主页的广告链接
125*125 方形按钮，适用于表现照片效果的图像广告
120*90 按钮类型，应用于产品演示或大型logo
120*60 按钮类型，主要用于做logo使用
88*31 小按钮，主要用于网页链接或网站小型logo

120*140 垂直banner

二、用图像编织页面

1.页面中添加图像
<img src="..." alt="..."/>
src属性用来指定图像的位置，alt属性用来指定关于图像的描述性文本，如果浏览者不能看到图像，将看到alt属性注释的文本
(这里的图像是直接在DW中插入的，故图像路径自动出现)

<html>
    <head>
        <title>在页面中添加图像</title>
    </head>
    <body>
         <p><h2>我在练习在页面中添加图像</h2></p>
         <img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg" alt="图片展示出错"  align="left"/>
    </body>
</html>

2.在页面中对齐图片
放置在页面中的图片可以像编辑文本一样令图片左对齐，右对齐，居中对齐，只要在<imag/>标签中加入align属性即可
注意:对图像进行左对齐和右对齐时既可以将align属性放在<img/>标签内，也可以放在<p>标签或其他标签内，而居中
对齐的命令将align放在<img/>标签中不起作用，依然是左对齐

<html>
    <head>
        <title>在页面中添加图像</title>
    </head>
    <body>
         <p><h2>我在演示图片对齐内容</h2></p>
         <br>                      <!--换行-->
         <h1>哈哈</h1>
                                   <!--是使图像居中对齐-->
         <p align="center"><img src="file:///C|/Users/NIIT/Desktop/图片/link2.jpg" height=130 width=130 alt="图片展示出错" /> 
         <p>      
                                   <!--使图像居左对齐-->
         <img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg" alt="图片展示出错" height=130 width=130 align="left"/>
                                   <!--使图像居右对齐-->
         <img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg" alt="图片展示出错" height=130 width=130 align="right"/>
    </body>
</html>

3.图像与文本的对齐方式（如果想在图片的旁边放入文本内容，就需要考虑文本和图像的对齐方式）
a.使图像顶部和同一行文本对齐
<img style="vertical-align:text-top"/>
b.使图像中部和同一行文本对齐
<img style="vertical-align:middle"/>
c.使图像底部和同一行文本对齐
<img style="vertical-align:text-bottom"/>
d.使图像底部和文本基线对齐
<img style="vertical-align:baseline"/>
baseline和text-bottom属性的效果几乎相同

<html>
    <head>
        <title>图片与文本对齐方式</title>
    </head>
    <body>
         <p><h2>我在演示图片与文本的对齐</h2></p>
                                <!--图像顶部和同一行文本对齐-->
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg"  height=130 width=130 style="vertical-align:text-top" alt="出错喽"/>我爱洗澡皮肤好好    
                                <!--图像中部和同一行文本对齐-->
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg"  height=130 width=130 style="vertical-align:middle" alt="出错喽"/>噜啦啦噜啦啦噜啦噜啦嘞
                                <!--图像底部和同一行文本对齐-->
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link2.jpg" height=130 width=130 style="vertical-align:text-bottom" alt="出错喽"/>噜啦噜啦噜啦嘞 
                                <!--使图像底部和文本基线对齐-->
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link2.jpg" height=130 width=130 style="vertical-align:baseline" alt="出错喽"/>噜啦噜啦噜啦嘞 
    </body>
</html>

4.控制图像与文本的距离
编辑页面时除了可以控制图像与文本的编排方式还可以进一步调整图片与文本的距离，可利用hspace和vspace属性来分别控制图像四周与其他内容间隔的水平方向的宽度，或者是垂直方向的高度
在设置距离数值时使用的标准单位是像素(px),hspace=30表示控制图像左右两边与页面其他内容间隔30px的距离，vspace=40表示图像上下两边与页面其他内容的间隔距离是40px

<html>
    <head>
        <title>图片与文本的距离</title>
    </head>
    <body>
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg" height=130 width=130 hspace=30 />这段文字距离左边图像的距离是30px    
         
         <br>
         这段文字距离下面图片的距离是40px                       
         <p><img src="file:///C|/Users/NIIT/Desktop/图片/link.jpg"  height=130 width=130 vspace=40/>
         <br>这段文字距离上面的图像的距离是40px
    </body>
</html>

5.美化图像(给图像加边框)
在<img/>标签中加border属性,在border属性下输入像素值（指定边框的宽度） <img src="..." border=>

<html>
    <head>
        <title>给图片加边框</title>
    </head>
    <body>
         <p>图片加边框
         <p align="left"><img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg" border=8/>         
    </body>
</html>

6.水平线
常会在页面中加入水平线来隔开文本，或起到美化页面的作用
<hr align="..." width="..." size="...">
<hr>表示放入水平线，align编辑对齐模式，width属性表示水平线的长度,size属性表示水平线的宽度

<html>
    <head>
        <title>给图片加边框</title>
    </head>
    <body>
         <p><h1><strong>图片加边框</strong></h1></p>
         <hr>        <!--普通水平线-->
         <hr align="center" width=300 size=3>
         <p align="center"><img src="file:///C|/Users/NIIT/Desktop/图片/link1.jpg" border=8/>           
    </body>
</html>

7.改变页面背景
添加图片可以将图片放入页面中的任意位置，但不可以在图片上编辑文本，而背景图是整个页面的最底层，设计者可以在背景图上放任何页面内容
<body background= background-repeat: >
在页面主体开始的<body>标签中使用样式background-image属性（背景图像属性）,用来指定背景图片,使用时在url后放入指定的图片地址，background-repeat属性用来定义背景图像在水平方向或垂直方向上重复使用，以免图片太小不能铺满整个页面，水平方向重复添加用repeat-x,垂直方向重复添加用repeat-y,Z不重复添加用no-repeat

<html>
    <head>
        <title>设置背景图片</title>
    </head>
    <body style="background-image:url(file:///C|/Users/NIIT/Desktop/图片/link2.jpg);background-repeat:no-repeat">
         <p><h1><strong>设置背景图片</strong></h1></p>
         <p><h2><strong>两只小蜜蜂呀！飞到花丛中呀！！飞呀!!!!!飞呀</strong></h2></p>
    </body>
</html>

实例三把宠物的照片放到网页上（要求以一个banner开头，接下来左边文本是宠物介绍，右边是宠物照片）

<html>
    <head>
        <title>我的宠物</title>
    </head>
    <body>
        <p align="center"><img src="file:///C|/Users/NIIT/Desktop/图片/banner.jpg" " alt="图片不可见" width=1017 height=24></p>
        <br>
        <hr align="center" width=1000 size=4>        
        <br>
        <p><img src="file:///C|/Users/NIIT/Desktop/图片/mydog.jpg"  align="right" alt="图片不可见">
        
        <p><h2><strong>Jenny</strong></h2></p>
        <ul>
            <li>年龄: 2</li>
            <li>爱吃食物: 王中王</li>
            <li>特点: 很安静</li>
        </ul>
        <hr>
        <p><h3><strong>   宠物日记</strong></h3></p>
        <hr>
        <p>2018年7月16日</p>
        <pre>
            外面的天气还是很热，所以Jenny一直
        懒懒地趴在那里，好久也...
        </pre>
    </body>
</html>

猜你喜欢