首页 > 互联网 > 设计制作 > 网页设计 > Div+css教程之制作html的工具

Div+css教程之制作html的工具

   来源:学问社    阅读: 2.42W 次
字号:

用手机扫描二维码 在手机上继续观看

手机查看

Div+css教程之制作html的工具你了解多少呢?就跟随本站小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网!

Div+css教程之制作html的工具

  1.切图工具

图片的效果对一个网页来说是很重要的,所以说在切图这方面也没什么小巧的工具,一种是用ps(photoshop),另外一种是fw(fireworks),除了这两个种工具ahuing没有找到一个合适的工具了,如果哪个朋友有更好的切具可以推荐下,目前ahuing用的是第二种,从效率上出发也建议用第二种;

fw切图是很简单的,打开一张效果图(必须是生成好的一个整张的图片,不存在图层),你需要切哪一部分就按下快捷键(M),再用鼠标在图片上选中你要切的部分,如果不能精确定位就按ctrl+鼠标中键滚动,将图片放大,定位好后,再ctrl+c复制背景,接着ctrl+n新建一个图片文件,ctrl+v粘贴,ctrl+shift+x导出图片确定就ok了,就这么简单。这种导出方式导出的图片大小是最小的,fw会删除一些不用的颜色值,当然有些朋友也会用fw的切片工具,这个也是可以的图片大小也是最小的,之所以ahuing直接复制粘贴主要是做图片精灵的方法,图片精灵在下面有一小节会介绍。fw具体使用在这里ahuing就不介绍了,有兴趣的朋友在网上bd一下吧

  2.编辑器

编辑器的选择就很多了,最简单的就一个记事本就可以,另外还有Notepad++、UltraEdit、dw(dreamweaver)、phpdesigner等,但是要提高编写效率还是用dw或者phpdesigner,两者都有代码提示功能(其它的编辑器也有,感觉不怎么智能,也不全),功能比较强大的就是dw了,基本上每个做网页的朋友无不知道它的,不过dw cs5太大了,对于一些配置低电脑是吃不消的,如果是单单做一个静态页面,ahuing建议你用phpdesigner,目前最新版本是7.2.5的,是一款精小的编辑器,内存占用只有20+M,代码提示功能也很强大,用这个时你需要设置几个地方,第一是查看-语言-中文,第二是工具-配置-代码完成,将代码提示所用的时间设置成最小,第三就是自定义了,你可以设置一些快捷键,那些文字的.颜色也可以配置成和dw一样,这样一但从dw转到phpdesigner后,界面不会觉得不习惯,ahuing配置成了firebug的颜色^_^;我还喜欢phpdesigner另一个强大的功能就是自动完成,比如说在编辑器里经常用的一个列表布局

我会把这部分代码存在编辑器里,并且用"pl"代替;当要用到这个布局时我只需要在编辑器里输入"pl"两个字母,然后ctrl+j,整个代码就出现了,这样在平时写代码时会大大提高编写效率,目前我的编辑器里已经存了几十种布局,用时只需将他们调出来,组合下就行了;(在dw里也有这个功能,就是代码片断)

  3.调试工具

在和有的朋友交流时,有的居然不知道有个叫firebug的东东,这也太无语,网页调试工具当然选择ff(火狐浏览器)的插件firebug,没有此插件的可以在ff-菜单栏-工具-附加组件-搜索firebug,然后添加到firefox重启ff就可以用了,按F12可以调出firebug界面,用时可以按快捷键ctrl+shift+c鼠标左键点要查看代码的位置,firebug面板里就会出现html代码及对应的css,html和css都可以在线修改并且能实时看到效果,这样可以把某个css调好后(注意调试只是当前的,源文件是不变的),再在源文件里修改就可以了,非常方便,除此之外有时我还用ie(只ie8+才有)的一个自带的工具,此工具类似于firebug,按F12可以调出来,用它只是看是ie下代码

  4.测试工具及技巧

下面再谈下常用的网页测试工具

首先说下浏览器,网络发展到现在,已经出现了各种各样的浏览器,我们做网页一般兼容主流浏览器就行了,所谓的主流浏览器主要有ff(firefox),chrome,ieX,opera,

Safari,傲游,搜狗等;哇这么多!我们都要做兼容,太多了吧?是的都要兼容。有没有好的办法,答案是肯定的。这么多浏览器其实内核只有几个,Trident(iex、Maxthon、The World 、TT、GreenBrowser、AvantBrowser、360),Gecko(ff火狐),Webkit(Safari苹果、chrome谷歌、以及360极速版、傲游3、QQ5),Presto(opera)这样一看就知道怎么办了吧我们只要兼容ieX和ff基本上就ok了。

再说下测试工具ietester和web superpreview,两个ahuing都用过,最后还是选择了前者,原因很多,主要是后者运行太慢,不支持js,有时需要测试js

最后总结一下,网页预览和调试以ff+firebug为主,用ietester测试,最后用chrome带一下就可以了

  5.小工具

取色器:有的人会问ps,fw不是有吸管吗,怎么还要取色器,当你在疯狂的写代码时,用ps,fw你不觉得太繁琐吗,言归正转,直接推荐Nuktool(纳克小工),它可以自定义快捷键这是我非常喜欢的,还可以把色值复制到剪切板,直接粘贴就行,除此之外还有天天取色器,好色鬼,迷你等。

图片压缩工具:如果你是用fw导出的图片那这个就不必要了,它已经足够小了,这个工具就是,是雅虎推荐的一款在线压缩工具网址是,并且它也做成了一个firebug的插件,可以在附加组件搜索yslow找到

代码压缩:当代码完成后,可以将其压缩一下,一是减少大小,二是可以保护代码;ahuing为你推荐css压缩,js和html压缩

动画设计
网页设计
环境设计
美工设计
平面设计
计算机辅助设计
广告设计
室内外设计