网站设计如何实现图文混排_博纳网络深圳网站建设公司

当前位置：

发布时间：2018-09-15

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

在网页中，图像的作用越来越重要。在一个页面中加入适当的图像，可以使页面显得更生动活泼、美观大方，尤其是在一些展示、宣传、艺术页面中，图像是必不可少的。此外，图形给人的视觉印象总要比文字强烈得多，善用图像可为网页增色不少。如何合理有效地插入图像就是本章要讨论的问题。同时，本章还将介绍使用CSS设置图像样式的方法，包括边框、对齐方式和图文混排等，并通过具体的实例阐述文字和图片的综合应用。深圳网站设计公司整理出如下几个网页制作插入图片的关键步骤。

◆　网页图像概述

◆　搜集网页图像素材

◆　在网页中插入图像

◆　CSS设置图片样式的方法

◆　CSS控制图片的对齐方式

◆　灵活使用CSS文字和图片属性进行图文混排

1.网页图像概述
在设计和制作网页之前，首先要制作网页图像，这是不可缺少的前期工作。制作一个网页大部分时间都花在版面安排和图像设计上。如果一个网页版面安排合理、整洁、图形设计精美，一定能让人喜爱。制作网页使用的图像不仅要简单，还需要与整个页面设计风格、结构特点、图像要表达的内容相协调，否则很难与页面匹配。

2.网页图像格式网页中对所使用的图像格式是有限制的，不是任何一种图像格式的文件都能应用到网页中，所以在制作之前就要考虑到这一点，以免制作出来的图像无法在网页中使用。目前，网络支持的图形格式主要有JPEG/JPG、GIF和PNG3种。由于这3种格式各有利弊，在设计网页时，要根据实际情况来选择使用何种图像格式。

（1）JPEG/JPG：这是一种失真压缩的图像文件格式，其压缩效果非常明显，并支持真彩色24位和渐进格式。虽然此格式支持真彩色24位，但压缩后的文件相对网络图像而言仍然显得很大，仅适用于对于质量要求高的图像，如颜色丰富的风景画和照相作品等，可以考虑使用这一格式。JPEG格式在压缩保存的过程中会以失真最小的方式丢掉一些人眼不易察觉的数据，因而以此格式保存后的图像没有原图像的质量好。

（2）GIF：这是网页中使用最多的图像格式，它最大的优点就是所生成的文件比较小，非常适合网络传输，并且支持透明背景和动画功能。因此，此格式在网页中应用非常广泛。GIF格式的图像与JPEG格式不同，它为非失真压缩，存储格式为1位~8位。只支持256色，而不支持真彩色24位，这是GIF格式的主要缺点。

（3）PNG：此格式是Fireworks的默认格式，它是一种非失真压缩格式，具有JPEG和GIF格式的全部优点，如支持透明背景、动画和真彩色24位。除了上面介绍的3种图像格式之外，还有许多种图像格式，如BMP、TIF、PSD、EPS等格式，但这些格式都无法直接使用到网页中。因此，在设计网页过程中，必须将这些图像格式的文件先转换成GIF、JPEG或PNG格式的文件。转换方法很多，只要用Photoshop等图像处理软件打开要转换的图像文件，另存为在网页中使用的JPEG、GIF或PNG格式文件即可。

3.图像下载速度

从图像显示效果而言，当然是图像颜色越丰富越好，这样可以很清晰地欣赏图像。但对浏览者而言，就需要等待更多的时间才能浏览到此图像。因为颜色越丰富，图像文件就越大，其在网络上的传输也就越慢。因此，在设计网页时，万不得已不要放入过大的图像文件，也不要用过多的多媒体文件造成浏览者观看页面时的麻烦。其实，制作网络图像与制作普通图像没什么两样，不同点在于网络图像要在网络上传输，因此除了要考虑图像品质之外，更多的则要考虑图像文件的大小，以便图像能够更快地在网络上传输。控制图像文件大小，以便于在网络上传输时，应注意以下几项。

（1）图像格式：不同的图像格式，其压缩率不同，所存储的文件大小也不同。

（2）图像尺寸：图像尺寸越大，图像文件就越大。反之，图像尺寸越小，文件就越小。

（3）颜色数目：在一个图像中，颜色越丰富，所记录的数据就越多，因而保存后的文件也就越大。

（4）分辨率：分辨率是指在单位长度内所含有的点（或像素）的多少。因此，分辨率越大，所记录的数据也就越多，文件也就越大。根据以上几点，用户就可以在制作图像时，合理有效地控制图像文件的大小了。但要注意，不要一味地追求文件大小，而忽略了图像质量。若如此，即使图像文件再小也失去了意义。有时，不得不在网页中放入一些大图，但应为浏览者多考虑，尽量让这个图像文件最小。例如，可以使用Photoshop中的图像分割功能，将图像分割成多个小区域。这样，在网络上下载时就不会因图像太大而造成漫长的等待了。网站制作公司（博纳网络）编辑整理。

当前文章链接：/construction/jzhyzx/1366.html

上一篇：网站设计师如何正确处理“网站有序列表问题” 下一篇：网站设计师分享网页制作图像处理技巧（一）

返回列表