网页中如何做出图中的效果 我是用动易网站管理系统的

来源：蜘蛛抓取(WebSpider) 时间：2012-05-10 12:39 标签： 动易网站管理系统
网页设计中合理的选择图片格式 - DTOP - 动易设计团队博客
您的位置：&
从某种程度上说，判断一个网页设计师是否优秀，可以从其在网页设计中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。（特别是对于我这种输出很菜鸟的人来说，了解了它们的优缺点，对我更好的学习过程更加有好处，帮助也是很大的。）
下面我们就来仔细看一下：
JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲，就是：高的压缩比=低的图片质量=小的文件大小。反之，低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 ％的原始图像的像素数据，所以它不被认为是一种无损图像格式。
由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。
GIF格式，是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。Gif，有时也被成为&Giff&，是一种无损，8位图片格式。&无损&是指100%的保持原始图片的像素数据信息。专业名词&8位&是指，所能表现的颜色深度&&一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。
由于8位颜色深度的限制，Gif不适合应用于各种色彩过于丰富的照片存储场合。但它却非常适合应用在以下场合：
小图标（Icon）
用于布局的图片（例如某个布局角落，边框等等）
仅包含不超过256种色彩的简单，小型图片场合
透明特性：
GIF支持基本的透明特性，这意味着你能够使图片的某些像素&不可见&。在其被放置到网页中时，我们就可以看到通过这些不可见区域看到此图片后面的背景颜色。此特性非常有用：如果你需要将某个gif图片的内容置于所有图片的上层，你可以将其设置为透明。
压缩特性：
GIF格式采用LZW算法进行压缩，此算法是Unisys申请的一项专利。在很久很久之前，如果你想使用GIF格式，那么就意味着你需要向Unisys付费申请专利许可。不过值得高兴的是，此项专利技术已于日过期，我们现在可以免费的使用GIF了！
隔行扫描：
GIF同时也支持隔行扫描。隔行扫描能够令图片在浏览器中更快的加载和显示。此特性对于那些慢网速的浏览者来说尤其实用。
一个动态的GIF文件，是由若干帧图片所联结而成的动态图片。在显示时，这些动态帧被反复的绘制读取出来从而形成了简单的动画效果。合理的运用GIF动画能够为网页增添动静结合的效果，而过度的使用则会使网页杂乱无章。
PNG，读&ping&，初始时被作为GIF的免费替代格式所开发，采用公共专利压缩算法。PNG格式也是一种无损压缩，但与GIF格式不同的是，PNG同时支持8位和24位的图像。
8位PNG图像：
一个8位PNG图片，支持透明背景且像素颜色不能超过256种。除了压缩算法不同之外，此8位PNG格式与GIF格式极其相似；
8位PNG图片的用途与GIF格式基本相同，
小图标（Icon）
用于布局的图片（例如某个布局角落，边框等等）
仅包含不超过256种色彩的简单，小型图片场合
24位PNG图像：
24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。
对PNG的支持：
由于PNG格式的广泛使用和开发者更加重视网页的WEB标准，不同浏览器对PNG的支持就显得相当重要了。不过，幸运的是，目前市场上主流的浏览器对PNG格式都有很好的支持，这包括：IE*, Firefox, Safari, Opera, and Konqueror。
但不幸的是&&IE6及IE6以下的浏览器对PNG透明背景的支持并不好。不过我们仍可以通过其他方法来解决这个问题。（这个各位输出大侠都懂的）最全的动易CMS模板教程_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
最全的动易CMS模板教程
上传于||暂无简介
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩9页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢[转载]新手模板制作:从切图到导入Dreamweaver\动易全
新手模板制作:从切图到导入Dreamweaver动易全系列教程
&本人是个新手，正也在学习如何制作动易模板，找了很多的教程都没最终学好，在这帖出我找到的一些教程，方便新手们学习，因为看到有很多人也象我一样在如何切图、如何导入Dreamweaver编辑方面感到困惑。也希望得到高手的指点。
网页制作技巧：从切图到网页生成全攻略
文章来源：转帖自 &
鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始：
　　step1:在PhotoShop中打开设计稿，如下图
　　选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧：
大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示：
　　step2:在PhotoShop中选择file-save for
web...来输出，这里要注意一些参数的选择：
　我们来看看红线所标识的1，2，3部分，将1所示的切片工具选中，然后点选2所示的图片，在3所示的地方选择色值，如果色彩单一可以选择尽量小的色值位;(为什么要这样？？)答案：这样会大大减小文件的大小，同时又能比较好的保持图片的色彩；设置好后点OK输出文件，这里的文件包括了一个htm和images文件夹，如图：
　　这里候你的页面才算完成了一半，接下来在Dreamweaver里建立站点：
　　step3:定义站点：
　　在图示左边的site name中为站点起一个名字，如example
然后在下面的local root
folder中选择我们刚才导出的站点所以的文件夹；站点建好后在site
map中我们看到：
　　(为什么要建立站点？)建立站点可以使我们养成一种很好的习惯，就是把一个网站所包含的文件，文件夹有条理的放在一起，同时我们很容易的将这个站点移动到其它地方而不用对文件路径进行任何改写!(当然如果你实在不想建立站点也没人强求你，我在事际工作中就遇到这样的同事，没有习惯为页面建立站点，当然后果的要麻烦少少了)
　　step4:重新制作页面表格(为什么？)通常在photoshop中直接导出的
htm文件是不可以直接使用的，因为有些地方在实际运用时要作调整，比如有动态文字的地方，我们需要在页面中输入页不是使用图片，那么图片就要把它拿走，如果你在直接生成的htm中拿走不想要的图片再加上你想要的东西，你们发现页面将变得惨不忍睹，整个页面可能完全乱了套!
好了，先来分析一下导出的htm文件吧：
根据这个页面表格所示，我们在新的页面中建立一个三行一列的表格:
　　注意，把cellpadding,cellspacing,border三项值设为0，这个很重要；因为图片中我们不希望看到空隙和错位；然后再在第一行中插入一个三行两列的表格，并合并左边三列的表格，如图：
　　插入表格的时个要注意对比原htm文件中的内容，思考为什么这样做；
接下来在第二行中插入一个二行二列的表格，按上面的方法合并左边的格子，并在右边格子的第一行插入一个一行五列的表格如图示：
　　最后在下面一行插入一个三行二列的表格，并将图示中1,2外分别合并：
最后得到的页面应该是这样的：
　　好了，现在我们的任务就是往表格里面加图加内容了!这里就不再赘述了!(其实已经赘述得够多了!)
　　还要提醒大家注意的是在加图片和内容时，表格单元格的align,valign这两个属性非常重要，要不遗余力的运用它们来帮你做事!OK，自己实践一下!
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。

我要回帖

更多关于 动易网站管理系统 的文章

 

随机推荐