网页制作四大妙招


网页制作四大妙招

文章插图
网页制作四大妙招

文章插图
【网页制作四大妙招】由于网站正以惊人的速度在飞速增加,互连网通道是越来越拥挤了,网页的下载速度也越来越慢,给网页减重是网页设计工作者首先考虑的问题之一 。减少图片数量、降低图片质量、采用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 拉线背景示例
拉线背景已成为一种时尚,目前一些大型网站的网页都在大量使用拉线背景,制作拉线背景同样无需制作整幅的拉线图象,只需制作一幅拉线单元图象就行了 。制作方法如下:

推荐阅读