网页中图形处理的几种方法和技巧
随着 Internet的不断发展壮大，Internet 上的网页制作成了一门新兴科学。网页中不可避免地包含着一定数量的图形，因为较多的图像在增加吸引力的同时能给访问者提供更多更直接的信息，同时图像也较少受计算机平台、地域和语种的限制，能使网页更多地显示出制作者的创造力。
虽然图像具有上述优势，但是由于图像是在Internet网络上传送，而Internet线路目前的传输速率还不理想，特别是国内大多数用户是通过慢速拨号连入本地的ISP,因此图像的大小在很大程度上影响着网页的下载时间，制作不好的图像文件下载时更会浪费Internet的带宽。
由此可见我们在制作网页时优化图像的大小是非常关键的，优化后的图像也许仅仅减少了几千个字节，但当页面中不只是一幅图像，或不止一个用户且不止一次地访问该页面时，节省的下载时间和通道带宽将是巨大的。下面我们就浅谈一下制作网页时几种用来优化图形的常用格式。
GIF格式
GIF(Graphic Interchange Format图形互换格式)是为跨平台消费市场开发的，当时消费者还没有机会使用“高档”的图形卡，大多数计算机的图形颜色比256色还少，所以256色被作为可显示的最高数目。GIF也是Internet上使用最早、应用最广泛的图像格式。GIF格式储存8位／点至l位／点的图像。其原理是减少每点的存储位数以减小图像文件的大小，这就是我们通常所说的减色抖动dithering。准确地说，GIF减少了图像调色板中的色彩数量，从而在存储时达到减小图像文件大小 的目的。该调色板通常并非Windows本身提供的标准凋色板，而是图像优化处理后的调色板。
现在假定我们制作一幅全色图像（用photoshop的术语就是“RGB模式”），原图为120k的“PSD格式”，准备作成一份GIF的文件之前，必须将它用一个相关的颜色图转换成为一个受限制的8位图像（用photoshop的术语说就是工作于“索引颜色模式”）
由表1可看出，保持图像尺寸不变的情况下减少图像中每点的色彩数可以减少图像文件的大小。
尽管支持的颜色数目较少，GIF格式仍然因拥有一些Ｗeb上使用很广泛的特殊效果而留存至今。如：交错效果、透明颜色效果以及GIF89a(动画)效果。
交错
交错即图像下载时从模糊逐渐到清晰的过程。
当你查看一幅本地系统的图像时，通常图像都是一下子就全部显示出来而与用什么方式储存关系不大，但是在Internet网络上就不一样，当通过Internet慢慢地下载一个包括图像的文件，浏览器能边下载边显示收到的内容，此时就可以看到图像文件显示的顺序，GIF默认的存储图像顺序为从上到下、从左到右。当下载到一半时，只显示上半部图像。如果下载得慢而下半部图像是关键部位，则必须等待下半部图像的出现，这对用户来说是相当烦人的。
GIF允许图像进行交错处理，此时不再严格地从上到下、一行像素一行像素地显示，而且每隔八行处理一次，然后再填补其间的空隙直到清晰为止。下载过程好比是一幅粗线条的素描变成色彩分明的图像，交错后的GIF文件容量并不变化。这种效果处理主要用于处理一些尺寸比较大的图像。
GIF89α
GIF89α提供的动画实际上由多幅GIF图像组成，浏览器软件以每幅GIF图像定义的时间间隔顺序显示，形成动画效果。
我们可以把动画分成以下三种常见的类型 ：
第一种类型是由多幅内容不相干但具有相同尺寸的GIF图像文件组成的动画文件，在质量允许的情况下，采用上述方法把组成GIF89α动画的每幅GIF文件的色彩数尽可能减少，便可以做到缩小文件。
第二种类型，我们仔细观察可以发现大部分动画的第二幅图像只是在第一幅图像的某些区域有一定的变化，因此在第二幅图像中可以只保存不相同区域的内容，这样可以极大地缩小文件。
第三种类型是有固定背景的动画，这样只须保存第二幅图像的前景并设背景为透明就可以了。
对于第二种和第三种类型我们必须保证组成动画的每幅GIF图像都使用相同的调色板进行减色抖动，同时第二幅图像定位必须准确。
如果我们使用一幅200×100(宽×高)点阵作背景，用上面的三种方法分别制作一幅类似于霓虹灯效果的 GIF89a动画交替显示“图像”两个字，我们将会发现三种方法的显示效果完全一样，但用第三种方法优化的文件比用第一种方法优化的小50%(表2)。
JPEG格式
由Joint Photographic Experts Group提出并因此而得名，是在Internet上被广泛支持的图像格式，JPG支持16M色彩也就是通常所说的24位颜色或真彩色，其典型的压缩比为4:1。
很多朋友都用虚拟主机来做网站，将网页文件存放在虚拟空间上，但是页面内容一多，网站打开的速度就显得特别慢，如果您碰到这种情况，与其寻求更好的空间，不如通过优化网页代码来取得满意的速度。笔者总结了一些切实可行的方法，制作主页时，以下的方法可以令你的网页速度大大提高。
一、记得帮页面减肥
我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘，再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重，所以，网页本身所占的空间越小，那么浏览速度就会越快。这就要求在做网页的时候遵循一切从简的原则，如：不要使用太大的Flash动画、视频、图片等。
二、如没必要，尽量使用静态HTML页面
众所周知，ASP、PHP、JSP等程序实现了网页信息的动态交互，运行起来的确非常方便，因为它们的数据交互性好，能很方便地存取、更改数据库的内容，使网站“动”起来，如：论坛、留言板等。但是这类程序必须先由服务器执行处理后，生成HTML页面，然后再“送”往客户端浏览，这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序，网页显示速度肯定会慢，所以没有必要，请尽量使用静态的HTML页面。
三、不要将整个页面内容塞到一个Table中
这是网页设计的问题了，很多站长为了追求页面统一对齐，将整个页面的内容都塞进了一个Table（表格）里，然后再由单元格td来划分各个“块”的布局，这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的，如果某些内容无法访问，就会拖延整个页面的访问速度。正确的做法是：将内容分割到几个具有相同格局的Table中去，不要全都塞到一个Table里。其实现在都WEB标准都提倡抛弃表格！
四、将ASP、ASPX、PHP等文件的访问改为．js引用
这在ASP、ASPX、PHP等程序设计时应该注意的，如果你要在静态的HTML页面里嵌入动态的数据，而这些动态的数据是由ASP、PHP等程序来提供的话，会使用以下的语句引用： < script src="http://image.ccidnet.com/ad_files/network_index.asp?orders=1">< /script>
这样的话，每次有一个人访问你的网站，服务器就要执行并处理一次network_index.asp文件，从数据库抽取相应的数据，再输出给网页显示，如果有几万个人同时访问，就要执行几万次，后果就可想而知。建议在这些程序中将数据动态生成到一个network_index.js文件中去，然后在首页通过
<script src="http://www.179job.com/ad_files/home_daohang/network_index.js"></script>
这样的代码来引用该network_index.js文件。这样，数据显示的任务就交给客户端的浏览器去做，不会耗费服务器的资源，显示速度自然就很快；前者所花的时间几乎是后者的几倍！
五、使用iframe嵌套另一页面
如果你要在网站上插入一些广告代码，又不想让这些广告网站影响速度的话，那么，使用iframe最合适不过了。方法是：将这些广告代码放到一个独立的页面去，然后在首页用如下的代码将该页面嵌入即可，这样就不会因为广告页面的延迟而拖了整个首页的显示，代码如下：
< iframe frameborder=0
leftmargin=0
marginheight=0
marginwidth=0
scrolling=no src="http://www.179job.com/pub/123.html"
topmargin=0 width=700 height=440 >
< /iframe>
其中http:
我想使网页既有简体版又有繁体版的，现在已经做好了简体版的了，请问如何把它们转化为繁体版的？
答：Dreamweaver中就有转化的功能，选择“Modify→Page Properties”打开页面属
性窗口，在“Document Encoding”中选择“繁体Big5码”即可。但这种方法太麻烦，又不支持批量转化。推荐大家使用ConvertZ这个软件，它是一个用来转换GBK/Big5内码的小工具，支持大量文件批量转化及剪贴簿文字内容的转换等，可以到http://nj.onlinedown.net/soft/4376.htm下载。
2、如何改变鼠标样式
有些网页很特别，鼠标不是Windows常规的箭头，而是一些十字形、手形等。请问这个是如何制作的？
答：在Dreamweaver打开CSS Style浮动窗口，按“+”号新建一个样式，OK后进入“Style Definition for xxx”窗口，选择最后一项“Extensions”，并选择右边“Visual Effect”下面的“Cursor”下拉框中的各个选项，即可实现鼠标的各种效果。
3、如何制作表格虚线
有些网页表格不是实线的，而是虚线，表格中好像只有实线的呀，请问如何制作表格虚线？
答：你可以在表格背景中设置一个1×2的图，半黑半白，这样就可以。还有一个办法就是使用CSS，新建一个Style，选择“Redefine HTML Tag”，在下拉菜单中选择“Table”，在弹出对话框中的“Category”里选择“Border”，将Top、Left、Right、Bottom都设成1px，颜色设成你想要的边框的颜色。然后在“Style”下拉框里选择“Dashed”，点“OK”。这样所有的表格都变成虚线的了。
如果你是一个网站的站长，有大量的文章要用同样的版式做成网页文件，你是否觉得用Dreamweaver或者Frongpage一页一页的制作太麻烦呢？下面这款软件可以帮上您的大忙，它可以根据设定好的版式，一次性的自动将大量文本文件转换成一个完整的网页，这样就可以省却自己手工制作的麻烦，有效的提高了效率。
软件资料
软件名称：王子网页转换小精灵
软件版本：V1.1
软件大小：516KB
软件性质：免费软件
支持平台：Win 9X /Win NT / Win 2000 / Win XP
下载地址：新浪下载中心
王子网页转换小精灵（以下简称“小精灵”）是一款免费的绿色软件，解压缩后就可以使用。运行软件后界面(如图1)，左边为要转换的文件列表，右边为功能按钮。
图1
首先，把要转换的文件放到同一目录下，在主界面的左边设置好要转换文件的路径，选取好要转换的文件，若有多个文件要选取，可以配合Shift或者Ctrl键选取。在转换前，必须先进行转换的相关设置。点击主界面上写字板图标样的按钮，进入设置窗口。
在设置窗口中提供了多种选项的设置，下面对每个选项进行具体的说明。
一、转换类型设置
小精灵在进行转换时，会根据文件类型有选择地进行转换。默认转换*.txt,*.rtf等文件，若有需要您可以自己增加转换类型，只要输入文件类型的扩展名后，点“增加转换类型”按钮即可。
二、保存设置
小精灵支持将转换后的文件保存为htm、html、asp和php后缀，在下拉框中相应的选取，这里以htm为例。点击浏览按钮，可以选择转换后文件的保存位置。
三、特效设置
转换后的文件，可以根据需要加入各种特效，以为您的网页增色。如果您要使用其他特效，还可以通过点“收集”按钮进行扩展，只要选择特效的源文件路径和特效名称即可。
四、公共设置
公共设置是最重要的设置，它直接关系到输出文件的效果。按要求分别在每个文本框中输入您的网页参数，并设置好图片、颜色、字体等即可（如图2）。
图2
我给这个全新的无边框窗口起名为NBW，NBW即No Border Window的缩写，只是想区别于CW。这个无边框窗口可以随意拖动、最小化、关闭等等，不仅在IE5/IE6中测试通过，在腾讯的TE中测试也没有问题。
首先看一下实际效果：
调用的过程如下：（noBorderWin函数是事先定义好的，后面会对函数的实现过程进行分析）
noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)
各参数的说明如下：
fileName ：要打开的文件。
w ：窗口的宽度(px)。
h ：窗口的高度(px)。
titleBg ：窗口“标题栏”的背景色以及窗口边框颜色。
moveBg ：拖动窗口时“标题栏”的背景色以及窗口边框颜色。
titleColor：窗口“标题栏”文字的颜色。
titleWord ：窗口“标题栏”中显示的文字。
scr ：窗口中是否出现滚动条。取值yes/no或者1/0。
我们看到，窗口样式全部在函数的参数中设置，从而保证了使用的便捷。比如，上面例子的代码如下：
＜a href=http:///htmldata/2005-03-19/1111163004.html#none onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');＞点击此处将弹出NBW窗口＜/a＞
如何使用已经说完了，那么，这个函数具体是如何实现的呢？下面，我们就以直接给出源码并加以注释的方式进行讲解。为了容易区分阅读，代码部分使用灰色，注释部分使用红色。
代码和注释如下：
//--------------------------------------------------------
＜script language=javascript＞
//*****定制NBW窗口中几个用到的图片的路径*****
minimizebar="minimize.gif"; //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif"; //窗口右上角关闭“按钮”的图片
closebar2="close2.gif"; //鼠标悬停时关闭“按钮”的图片
icon="icon.gif"; //窗口左上角的小图标
//***************定制结束*****************
//*******开始定义noBorderWin()函数********
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)
{
var contents="＜html＞"+ //变量contents是一个字符串变量，它是NBW窗口中的所有代码。 SyntaxHighlighter.highlight();
相关文章
php 中file_get_contents超时问题的解决方法
file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25- php如何实现抓取网页图片，相较于手动的粘贴复制，使用小程序要方便快捷多了，喜欢编程的人总会喜欢制作一些简单有用的小软件，最近就参考了网上一个php抓取图片代码，封装了一个php远程抓取图片的类，测试了一下，效果还不错分享...2015-10-30
- 相信很多站长都遇到过这样一个问题，访问页面时出现408错误，下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因： HTT...2017-01-22
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- ps软件是现在非常受大家喜欢的一款软件，有着非常不错的使用功能。这次文章就给大家介绍下ps把文字背景变透明的操作方法，喜欢的一起来看看。 1、使用Photoshop软件...2017-07-06
- photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14
intellij idea快速查看当前类中的所有方法(推荐)
这篇文章主要介绍了intellij idea快速查看当前类中的所有方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-02- 1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31
js导出table数据到excel即导出为EXCEL文档的方法
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht...2013-10-13- 批量更新mysql更新语句很简单，更新一条数据的某个字段，一般这样写：复制代码 代码如下:UPDATE mytable SET myfield = 'value' WHERE other_field = 'other_value';如果更新同一字段为同一个值，mysql也很简单，修改下where即...2013-10-04
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
- 本文涉及的主题虽然很基础，在许多人看来属于小伎俩，但在JavaScript基础知识中属于一个综合性的话题。这里会涉及到对象属性的封装、原型、构造函数、闭包以及立即执行表达式等知识。公有方法 公有方法就是能被外部访问...2015-11-08
- JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
安卓手机wifi打不开修复教程，安卓手机wifi打不开解决方法
手机wifi打不开？让小编来告诉你如何解决。还不知道的朋友快来看看。 手机wifi是现在生活中最常用的手机功能，但是遇到手机wifi打不开的情况该怎么办呢?如果手机wifi...2016-12-21- 最近想自学PHP ，做了个验证码，但不知道怎么搞的，总出现一个如下图的小红叉，但验证码就是显示不出来，原因如下 未修改之前，出现如下错误； （1）修改步骤如下，原因如下，原因是apache权限没开， （2）点击打开php.int.， 搜索extension=ph...2013-10-04
- 单个字符分割 string s="abcdeabcdeabcde"; string[] sArray=s.Split('c'); foreach(string i in sArray) Console.WriteLine(i.ToString()); 输出下面的结果: ab de...2020-06-25
- javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visi...2013-10-13
连接MySql速度慢的解决方法(skip-name-resolve)
最近在Linux服务器上安装MySql5后，本地使用客户端连MySql速度超慢，本地程序连接也超慢。 解决方法：在配置文件my.cnf的[mysqld]下加入skip-name-resolve。原因是默认安装的MySql开启了DNS的反向解析。如果禁用的话就不能...2015-10-21- 本篇文章是对C#方法进行了详细的总结与介绍，需要的朋友参考下...2020-06-25
- 步骤：Window -> PHP -> Editor -> Templates，这里可以设置（增、删、改、导入等）管理你的模板。新建文件注释、函数注释、代码块等模板的实例新建模板，分别输入Name、Description、Patterna)文件注释Name: 3cfileDescriptio...2013-10-04