我正在向初学者教授 Web 开发,向他们展示设计的基础知识会很有用,这意味着在将其转换为代码之前使用图形设计包提出布局。
需要明确的是,我想要一些东西来创建页面的“外观”,而不是布局。我不是说原型工具。对此有些困惑,我原来的问题的意思被改变了,我只是在半天后把它改回来。
html 和 css 本身将是手写的。
我需要一些可以免费获得或非常便宜的东西。它可以是为初学者设计的程序,也可以是具有“初学者模式”的更广泛的程序,或者是对新用户来说不那么令人生畏的界面。
有没有符合这个描述的软件?
我正在向初学者教授 Web 开发,向他们展示设计的基础知识会很有用,这意味着在将其转换为代码之前使用图形设计包提出布局。
需要明确的是,我想要一些东西来创建页面的“外观”,而不是布局。我不是说原型工具。对此有些困惑,我原来的问题的意思被改变了,我只是在半天后把它改回来。
html 和 css 本身将是手写的。
我需要一些可以免费获得或非常便宜的东西。它可以是为初学者设计的程序,也可以是具有“初学者模式”的更广泛的程序,或者是对新用户来说不那么令人生畏的界面。
有没有符合这个描述的软件?
Pencil与 Balmamiq 类似,但免费且开源。非常好,界面简单,你可以下载其他用户制作的图形集(用于网络、应用程序等)。

如果你追求美学,这可能是错误的方向,但Balsamiq是一个很好的工具,可以搞乱界面开发

在我看来(如果我错了,请纠正我)您课程的这一部分旨在向您的学生展示他们之后可能在现实世界中遇到的软件的基础知识。Photoshop、Fireworks 是创建网页设计图形元素的标准,所以我认为“轻”软件越接近 Photoshop/Fireworks 越好。
因此,我可以想到两种可能的选择:
Photoshop Elements是 Photoshop 的简化版本,而且便宜得多(但不是免费的)。在“专家模式”中使用它展示了 Photoshop 可以做的很多事情。
Splashup是一个基于 Web 的免费工具,其外观和行为与 Photoshop 非常接近。
Adobe Muse几乎就是为这类事情而创建的(不过请参阅下面的警告)。标语:
无需编写代码即可创建网站!
据我所知,它是近期唯一一家以设计风格创建网页布局的软件领域。成本是每月 20 美元的经常性费用,因此您可以使用它来让人们开始使用它,然后在他们不再需要它时放弃它。
但是- 从我读到的所有内容来看,这听起来像是一个糟糕的计划。基本上,这听起来像是关于固定的单元大小和不灵活的布局,并在事情变得复杂时将元素变成静态图像。它创建了可怕的无法使用的不灵活的代码,所以它基本上只是用于原型设计或制作组合/概念。
基于此,使用它听起来并不比 Photoshop 或 Photoshop Elements 或 Fireworks 或 GIMP 或 PixelMator 的旧工作流程来创建一个 comp/knockup,然后,当它作为一个概念达成一致时,开始编码。听起来它唯一会添加的是可点击的链接/组合和可能的半可用 CSS,代价是大量的设计功能。
这是一篇优秀的评论,几位专业设计师和开发人员在其中尝试过——他们的判断是复杂的、经过深思熟虑的……而且几乎一致残酷地否定。我在上面看到的所有其他东西都有相同的判断,即使人们试图给它带来怀疑的好处。
这就是说- Adobe 收取订阅费用的原因是他们希望它不断发展并且他们希望快速添加功能。所以它可能会突然变得更好。我很怀疑……但也许他们会证明我们错了。
If they did get it right, it'd be useful - you could design layouts you could show people in a real browser, with real interactive elements and real clickable links, then, when a design has been chosen, export the CSS file and some图像,当您开始处理最终布局和最终 CSS/图像时,您可以将其用作起点。但我还没有看到任何暗示它存在的东西。当他们只订阅它时,它也不太可能成为主流。
因此,如果情况有所改善,可能值得保持警惕。甚至可能值得一试,因为它是基于订阅的,因此风险低。
编辑:看起来最近的更新集中在交互性和对移动设计的支持上。两者都是在网页设计敲击中有用的东西,所以也许它正朝着正确的方向前进。但看起来它们仍然都是关于刚性的——网站的“移动版”、“平板电脑版”和“桌面版”,而不是响应浏览器的实际尺寸和功能。

你可能会觉得Project Meteor很有趣——一群设计师抱怨没有很好的专用软件来快速设计概念验证网页布局(但以一种半组织的方式抱怨)。