旗下网站:海南精英网|天涯门户|天涯数码
网站首页
home
网站建设
web Const
系统开发
System Dev
微信建站
weixin
网站推广
Website SEO
网站超市
Website SM
客户案例
Client case
网站模板
Web template
关于我们
About us
 
网站制作教程
建站基础系统
网站超市
网站建设资讯
网站模板
网站套餐
解决方案
经典案例
联系我们
QQ服务群:28519571
工作时间:86-0898-31568080
传真号码:86-31568085
24小时服务:0138-07590485
您的位置:网站建设-网站建设资讯-网站制作教程
阅读次数:2748 
   网站建设知识 | 网站制作教程 | 网站设计分析   
网页制作技巧

在网页设计的认识上,许多人似乎仍停留在网页制作的高度上。认为只要用好了网页制作软件,就能搞好网页设计了。其实网页设计是一个感性思考与理性分析相结合的复杂过程,它的方向取决于设计的任务,它的实现依赖于网页的制作。

由于网站正以惊人的速度在飞速增加,互连网通道是越来越拥挤了,网页的下载速度也越来越慢,给网页减重是网页设计工作者首先考虑的问题之一。减少图片数量、降低图片质量、采用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)步操作中把图象背景设为透明是关键,否则你就看不见下面的图片了。

海南网站建设|海南网站设计|海南网络公司|海南网站制作|三亚网络公司|海口网络公司|海口做网站公司|
网站地图合作伙伴企业发展企业文化联系我们返回首页
海南中立科技有限公司2011版权所有 24小时服务热线:13807590485   欢迎来电咨询
地址:海南省.海口市.海甸二东路环惠大厦6楼(南宝路明都大厦107#) 公司电话:0898-31568080 31568060 QQ:85398489
全国合作联盟分布:海南海口 四川成都 湖北武汉 湖南长沙 安徽合肥 广东深圳 山西太原 西藏拉萨
技术服务: E_mail:server@ngrx.com 服务订购:E_mail:web@ngrx.net
推广关键字:  海南网站建设  海南网站制作  海南网站设计  中立科技 备案/经营许可号:琼ICP备07000778