网页制作妙招

由于网站正以惊人的速度在飞速增加，互连网通道是越来越拥挤了，网页的下载速度也越来越慢，给网页减重是网页设计工作者首先考虑的问题之一。减少图片数量、降低图片质量、采用jpg、gif等压缩图片文件，如此等等，其目的都有是为了给网页减重，提高传输速度。我这里再告诉你几种方法来给网页减重（本文介绍的方法均在Dreamweaver3中实现，若在其它网页制作工具中具体作法稍有改变）： 1、不使用图片获得各种颜色的线条 图1 各种颜色的线条 在Dreamweaver3或Forntpage中虽有插入水平线的功能，但他插入的线条无法改变颜色，为了获得特定颜色的线条你不得不使用图片，这无疑增大了网页负担，有没有其它办法呢？有！你可以使用表格来实现，考虑到表格是以行为单位来定位的，为了能更方便的定位线条，我们把表格放到层上，这样你就可以任意把线条放到任何位置了。具体作法如下： （1）单击功能面板上的插入层图标，在页面上画一个层，再在功能面板上点击插入表格图标，在弹出的表格面板上把表格的行和列均设置为1； （2）选取表格，在表格的属性面板上把“cellpad”、“cellspace”、“border”均设置为“0”，把“W”设置为“100%”，“H”设置为2pixels（象素），设置好表格的背景色（也就是线条的颜色。 （3）在单元格中点一下，在单元格的属性面板上把“W”设置为“100%”，把“H”设置为2pixels（象素）； （4）在快速启动栏上点击源代码检示窗图标，在源代码编辑窗中把单元格中的“ ”（“空格”代码）删去。 到此，一条特定颜色的水平线已画好。若要改变线条颜色，只要改变表格的背景色就行了；若要改变线条高度(即线条的粗细），只要修改（2）、（3）中的“H”即可；改变层的宽度，就可改变线条的长度；若要把水平线变为垂直线，只要把（2）、（3）中的“W”和“H”的值换一下就行了，是不是方便极了。 2、巧作渐变色背景 图2 渐变色背景示例 象图2这样的渐变色背景能给人一种梦幻般想象的感觉或产生明显的立体感，当我们需要使用渐变色背景图像时，我们不必做与所填充的面积等大的图像，只要做一幅能包含所有渐变色的图像单元就行了，这样即使是填充整页的背景，其图像文件的大小也不到1K，而且横向渐变色，背景区纵向高度任意改变不必改动背景图像；纵向渐变色，背景区横向宽度任意改变不必改动背景图像；真是方便。 制作方法如下： （1）横向渐变色图像单元制作 在Potoshop中，单击“File”主菜单，选择“New”，在新建图象属性对话图上，在图象宽度输入框中输入你的背景区域宽度，在图象高度输入框中输入1pixels，按“OK”键，再用渐变色填充，根据需要修饰一下，用Export输出 jpg、gif均可。 （2）纵向渐变色图像单元制作 在Potoshop中，单击“File”主菜单，选择“New”，在新建图象属性对话图上，在图象高度输入框中输入你的背景区域宽度，在图象宽度输入框中输入1pixels，按“OK”键，再用渐变色填充，根据需要修饰一下，用Export输出 jpg、gif均可。 有了图象单元，只要在需要渐变色背景的区域把相应的背景图象单元作为背景图象就行了。 3、拉线背景的制作技巧 图4 拉线背景示例 拉线背景已成为一种时尚，目前一些大型网站的网页都在大量使用拉线背景，制作拉线背景同样无需制作整幅的拉线图象，只需制作一幅拉线单元图象就行了。制作方法如下： （1）在Potoshop中，单击“File”主菜单，选择“New”，在新建图象属性对话图上，在图象高度输入框中输入2pixels，在图象宽度输入框中输入1pixels，按“OK”键，再用填充工具把其中的一个象素填充上你所要的颜色，根据需要修饰一下，用Export输出 jpg、gif均可。 （2）在需要拉线背景的区域，选择上面做好的图象作为背景图象，就一切OK了。而且无论你是多大的背景区域均不必修改图象单元。 4、拉丝图象的制作技巧 图5 拉丝图象示例 拉丝图象给人一种朦胧的想象感觉，另外，他可以用质量比较低的图片，这大大减少了图片文件的份量，加快了下载速度，我想这可能是其流行起来的主要原因之一。拉丝图象的制作方法已有不少文章介绍。我在这里介绍的方法与一般方法不同，它能更进一步减少你的网页重量，提高制作拉丝图象的效率。制作方法如下： （1）在Potoshop中，单击“File”主菜单，选择“New”，在新建图象属性对话图上，在图象高度输入框中输入2pixels，在图象宽度输入框中输入1pixels，图象背景选择（透明背景）“Transprent"，按“OK”键，再用填充工具把其中的一个象素填充上你所要的拉丝颜色，根据需要修饰一下，用Export输出 gif即可； （2）在Dreamweaver3中，单击功能面板上的插入层图标，在页面上画一个层，再在功能面板上点击插入图象的图标，在层上插入你所要的图象； （3）再单击功能面板上的插入层图标，在页面上画一个层，在该层的属性面板上，在层背景图象输入框中输入你刚制作的拉丝单元图象文件名； （4）把上面制作的有拉丝背景的层拖到图象上，并调整层的大小与图片大小一致，一幅漂亮的拉丝图象就做成了。 若要把网页中已有的图象变为拉丝图象，只要重复（3）、（4）两步操作就行了。用本方法还可以把动画变成拉丝动画呢？怎么做，不用我讲了吧？！把图片换成动画就大功告成了。是不是太方便了。这里提醒你注意：第（1）步操作中把图象背景设为透明是关键，否则你就看不见下面的图片了。 　　摘自《赛迪网》　冯永耀/文