网页设计用什么工具
网页设计工具Frontify可以让你在5分钟内创建一套漂亮而完备的风格指南!这个在线工具有趣而简单，让你维护品牌风格和样式快速而方便。下面是网页设计用什么工具的介绍，希望对您有所帮助。
1. Frontify
Frontify 可以让你在5分钟内创建一套漂亮而完备的风格指南!这个在线工具有趣而简单，让你维护品牌风格和样式快速而方便。由于Frontify 优秀的用户体验设计，你可以很快上手，即使你有专业的需求，Frontify 的说明文档也可以引导你实现一些更细致更专业的东西。
2. Flarum
Flarum 是一套简约易用的开源论坛系统。如果你需要一个相对简单的论坛网站的话，可以考虑Flarum，它界面简单且可以快速上手，让你更多的专注于话题讨论。Flarum的论坛页面滚动加载流畅，无需等待页面加载。
3. Lightning Design Systems
这个名为闪电设计系统的工具专注于构建体验优秀的企业级APP。在这套系统的支持之下，你可以快速地对整个界面进行深度定制，保持整个界面保持高度 的一致性而无需让工程师在此耗费更多精力，你所需要做的就是下载那些无平台限制的CSS框架，然后开工就可以了。你可以参考这套系统的详细说明作出符合 SalesForce生态的优质APP，轻松地调用SalesForce的核心视觉组件和交互模式，拿出最佳的方案。
4. Rucksack
Rucksack 是一款有趣的CSS工具，让CSS的开发过程更加有趣了。Rucksack 是基于PostCSS构建的，模块化设计，没有冗余，运行起来飞快。将Rucksack融入到你的开发流程是很简单的，Rucksack对绝大多数的工具 都有相应的插件。由于它是基于PostCSS来构建的，所以它同其他的CSS处理工具都能很好的兼容，甚至能够同Stylus直接协同。
5. GridLayout
GridLayout是一款轻量级的栅格系统，用以制作水平滚动或者垂直滚动的Web应用，并且能够兼容旧版的浏览器。如果你需要创建复杂的布局， 并且需要对旧版的浏览器进行兼容，选择GridLayout是很不错的。这套工具涵盖了1KB大小的CSS文件和大概0.5KB的JS文件，如果你只需要 支持更为现代的浏览器，最好不要使用Flexbox。这个工具是基于MIT的协议来分发的。
6. Bonsai
Bonsai 是一款为自由设计师所准备的工具，用来创建、签署和存储工作合同的工具，并且可以协助付款、托管。目前这个签署协议的模块已经完善并且发布了，而支付和托 管的部分还处于内测阶段。现在Bonsai对于专业的设计人员的工作合同签署的支持已经做的很不错了，尤其是支付方式的规定、知识产权保护等环节。
7. Apostrophe
Apostrophe 是一款设计驱动下、基于Node.js 和MongoDB的内容管理系统。这套CMS为你提供了灵活的工具，你可以以此为基础设计内容向的网站，不论是简约风还是繁复的结构都可以轻松Hold 住。这套系统的开发者相信，内容编辑应该是简单而易用的，也就是在这想法的驱动下Apostrophe的编辑体验设计的非常容易上手，网站编辑也可以轻松 掌控网站内容。
8. Grid.Guide
Big Bite 的员工发现计算栅格的宽度是一件非常恼人的事情，尤其是在嵌套结构下。正是在这种需求的驱动下，他们发明了这款Grid.Guide工具。这款工具会根据 最大宽度和列数来帮你计算可能的排列组合，生成对应的PNG文件，让你可以直接托拽到相应的工具中使用。更重要的是，Grid.Guide是完全免费的!
9. Quantity Queries
Quantity Queries 是一款帮你进行数量查询的工具。
10. Timber
Shopify Timber 是一款前端框架，用于快速便捷地构建Shopify主题。其实从广泛意义上来说这是一款可以广泛应用的主题制作工具，并不全限制于在Shopify中运 用。不论是经验丰富的设计师和前端还是新手都可以灵活运用，其中包含了模板、标记、模块和CSS框架，根据你的需求调用就好了。
11. Now UI Kit
InVision所提供的这套Now UI Kit 是一套堪称完美的跨平台UIKit，可以用于网页设计、平板和手机的界面，当然，最重要的是它是免费的。其中包含了52个完整的设计模板、35款可以自定义的图标以及可以运用在各种界面中超过180个UI组件。
12. Unsplash
我们其实已经不是第一次推荐Unsplash.it ，它是用于网页中的图片占位符，其中所用的图片是来自于网站Unspalsh.com，这个网站提供了许多高品质的图片，这也使得Unsplash.it的效果非常不错。
13. Gitup
Gitup 是一款为Git所准备的图形化客户端。在Gitup的协助下你可以便捷的提交、创建新的分支、合并等等等等。Gitup 赋予了Git全新的交互方式，让代码管理更加迅速、安全、无痛。
14. Color Hunt
ColorHunt 包含了一系列漂亮炫酷的色彩组合，网站会每天更新配色方案，并且根据浏览数排列出最漂亮的配色方案。
15. TinyCon
TinyCon 是一款管理Favicon 的库，借助它可以方便地管理Favicon和弹出框。
中级网页制作软件
如果你对网页设计已经有了一定的基础，对HTML语言又有一定的了解，那么你可以选择下面的几种软件来设计你的网页，他们一定会为你的网页添色不少。
①DreamWeaver
自制动态HTML动画的网页
DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
②Fireworks
第一款彻底为Web制作者们设计的软件
Fireworks的来头实在不小，它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片!
③Flash
让你的网页动起来
Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。#{6FLASH6}#可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。FLASH虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScripe，您也可做出互动性很强的主页来。有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局!我相信这句话没错!
④HotDog Professional
制作要加入多种复杂技术的网页
HotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分。HotDog的高级HTML支持插入marquee，并能在预览模式中以正常速度观看。这点非常难得，因为即使首创这种标签的Microsoft在FrontPage中也未提供这样的功能。HotDog对plug-in的支持也远远超过其他产品，它提供的对话框允许你以手动方式为不同格式的文件选择不同的选项。但对中文的处理不很方便。
HotDog是个功能强大的软件，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。
⑤HomeSite
制作可完全控制页面进程的网页
Allaire的HomeSite是一个小巧而全能的HTML代码编辑器，有丰富的帮助功能，支持CGI和CSS等等，并且可以直接编辑perl程序。HomeSite工作界面繁简由人，根据习惯，可以将其设置成像Notepad那样简单的编辑窗口，也可以在复杂的界面下工作。
HomeSite更适合那些比较复杂和精彩页面的设计。如果你希望能完全控制你制作的页面的进程，HomeSite是你最佳选择。不过对于生手过于复杂。
⑥HotMetal Pro
制作具有强大数据嵌入能力的网页
HotMetal既提供“所见即所得”图形制作方式，又提供代码编辑方式，是个令各层次设计者都不至于失望的软件。但是初学者需要熟知HTML，才能得心应手地使用这个软件。HotMetal具有强大的数据嵌入能力，利用它的数据插入向导，可以把外部的Access、Word、Excel以及其他ODBC数据提出来，放入页面中。而且HotMetal能够把它们自动转换为HTML格式，是不是很棒?此外它还能转换很多老格式的文档(如WordStar等)，并能在转换过程中把这些文档里的图片自动转换为GIF格式。
HotMetal为用户提供了“太多”的工具，而且它还可以用网状图或树状图表现整个站点文档的链接状况。
网页设计制作详细流程
1、设计的任务：设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。
2、设计的实现，设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制，这一部分可以在纸上完成。第二部分为网页的制作，这一过程是在计算机上完成的。
3、色彩的熟练运用，色彩是一种奇怪的东西，它是美丽而丰富的，它能唤起人类的心灵感知。一般来说，红色是火的颜色，热情、奔放;也是血的颜色，可以象征生命。黄色是明度最高的颜色，显得华丽、高贵、明快。
4、造型的组合，在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。
5、遵循五大设计原则，设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。
6、网页的优化，在网页设计中，网页的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性，影响观者对网站的印象。
拓展资料：
《网页设计与制作教程》介绍了基本的网页标记语言、网页编辑工具、图片美化工具以及多媒体制作工具的使用，并通过实例对网站的建设过程做了详细的讲解。
快速制作教程：
1、在应用公园官网登录注册。
2、选择开发模式，有主题模式、自由模式、一键模式三种。自由模式你比较灵活，多操作要求较高，这里选择主题模式。
3、选择制作模板后，填写你的应用的名称、启动页、LOGO等，官方的系统里面有参考。
4、进入制作页面进行制作。
网页设计中常用的字体
1、微软雅黑
Vista之后新引入的字体，这个字体的使用率不用说了，可以说是web里面最安全的一个字体。字体方正、简洁，被广泛使用。
2、黑体
黑体字和微软雅黑差不多，作为非称线字中的一种，一样具备方正、简洁、醒目的特点。这样的字体特别适合当标题。其实黑体在使用上没有微软雅黑来得清晰明亮，一般在微软雅黑和黑体的选择下，个人更倾向微软雅黑。
3、华文细黑
华文细黑是Mac下的默认中文，这套字体跟前面的微软雅黑相比较，更显绢细、秀气。笔划细节比微软雅黑处理的多一些，所以整体给人比较精致的感觉。注意一下，华文细黑并不是所有电脑的自带字体，当网站文字用到这个字体的时候，是需要在自己电脑上下载这套字体的。除此，在写css代码的时候，font-family应该设置的选择性多一下，以保证界面打开的最佳效果。
4、中易宋体
前面介绍的三款字体都是非称线字，接着要介绍的是称线字体——中易宋体，简称宋体。宋体在我们的日常中使用范围也很广，这是电脑自带的其中一种字体。宋体是为适应印刷术而出现的一种汉字字体。笔划有粗细变化，常用于书籍、杂志、报纸印刷的正文排版，所以在大篇幅文章的设计时，可以采用宋体。这个字体是Windows系统下最常见的字体，小字体点阵，大字体TrueType。大标题显示时字体不是很好看，所以一般不建议用宋体来当标题。
5、Arial
说到Arial，这套字体是微软公司网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，所以一般可以考虑用Tahoma字体来替代。这套字体方正、不花巧、方便阅读和印刷清晰。使用范围也是特别的广泛。但是要知道的是，苹果系统下是没有这套字体的，苹果系统下默认的是Helvetica。
6、Tahoma
ahoma是英文Windows操作系统的默认字体，这个字体比较均衡，是种非常圆滑的字体。这个字体和中文混排显示时，不会出现中英文不对齐的状态。这套字体解决了Arial大写“I”与小写“l”难以分辨的问题。也相当于在Arial上优化了不少。除此，细看这套字体，可以发现其实在一些笔划的处理上还是很精致的。
7、Helvetica
说到Helvetica这套字体，应该是设计师们的最爱了吧。这套字体属于 Realist风格，拥有简洁现代的线条，受到大部分设计师的追捧。这种字体给人一种简单、现代化、休闲轻松的感觉。适用于扁平化设计，也适合搭配任何设计项目，包括banner、平面设计以及网页字体等。在Mac下面被认为是最佳的网页字体，但在Windows下由于Hinting的原因显示很糟糕。
8、Georgia
说到英文的称线字，肯定首选是Georgia。这套字体笔划粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还不错。此种字体风格优雅又精致，可用于电影海报、游戏、时尚类网页设计中。
在专业的网页设计里，除了Banner图、广告语等特殊情况可能会用到特殊字体，网页中使用的字体以不超过2种为准，并且最好采用标准字体，比如中文的宋体、微软雅黑，英文的Arial、Helvetica。只有使用这些系统自带的字体，才能让前端开发人员在排版时高程度地还原设计稿的文字效果。倘若使用了特殊字体，在设计font-family的时候，应该多设置几种字体的优先顺序，以确保网页显示的最佳效果。当然，我们一般情况下建议使用系统自带的字体。
