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

相关推荐

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(纳克小工)，它可以自定义快捷键这是我非常喜欢的，还可以把色值复制到剪切板，直接粘贴就行，除此之外还有天天取色器，好色鬼，迷你等。

　　html的工具

　　文本编辑器

　　文本编辑器是最基本的HTML开发工具，它可以直接用来编写HTML、CSS、JavaScript等代码。常用的文本编辑器包括Windows系统中自带的记事本、Notepad++、Sublime Text等。这些编辑器都有代码高亮、自动补全、代码片段等有利于代码编写和阅读的特性。

　　IDE（集成开发环境）

　　IDE是针对开发人员的集成开发环境。它包括文本编辑器、编译器和调试工具等。IDE和文本编辑器类似，但具有更强大的特性，如自动代码生成、代码重构、单元测试、集成开发环境等。常用的IDE包括Visual Studio Code、Eclipse等。

　　可视化网站编辑器

　　可视化网站编辑器是一种使用拖放方式设计网站的工具，它可以直接操作网页的界面，不需要编写代码。可视化网站编辑器适合初学者，非常方便快捷。常见的可视化网站编辑器包括Wix、WordPress、Squarespace等。

　　CSS预处理器

　　CSS预处理器类似于编程语言中的编译器，它可以处理CSS语言，提供更为强大的逻辑和结构。CSS预处理器可以大大减少CSS代码的重复，使开发者能够更快速地编写和修改样式表。常用的CSS预处理器有Sass、Less等。

　　JavaScript框架

　　JavaScript框架是一种辅助JavaScript开发的强大工具。它们提供了开箱即用的功能组件，使得开发者在不必从头开始编写JavaScript的情况下就能够实现丰富的功能。常用的JavaScript框架包括jQuery、React、Vue等。

【Div+css教程之制作html的工具】相关文章：

如何设置html字体04-14

html与xhtml的区别规范是什么12-09

html的语言特点是什么04-19

HTML中Id和Name的区别是什么02-08

Photoshop魔棒工具04-26

photoshop文本工具的介绍04-06