i have this GUI screen shots from the design team which i needs to convert to a web page and what not. i'm thinking of finding some website which resembles the GUI so that i can copy and paste the html so i don't have to start from scratch. the only drawback about this method is i don't know what website actually looks like that so that might means a lot of browsing time. hehe.
我有来自设计团队的GUI屏幕截图,我需要将其转换为网页,而不是。我正在考虑找一些类似GUI的网站,以便我可以复制和粘贴html,所以我不必从头开始。这种方法的唯一缺点是我不知道网站实际上是什么样的,这可能意味着很多浏览时间。呵呵。
So just wondering if there's a tool which can help me do the search? Or even better yet if there's a tool which can convert image into html web page equivalent, that would be even better.
所以只是想知道是否有一个工具可以帮助我进行搜索?或者更好的是,如果有一个工具可以将图像转换为等效的html网页,那就更好了。
i guess i'm just another lazy uncreative programmer trying to get the gui part done quick and dirty, hehe.
我想我只是另一个懒惰的非创造性程序员试图快速和肮脏地完成gui部分,呵呵。
thanks.
5 个解决方案
#1
You mean you have a PNG, GIF or JPG screen-shot... and you want to feed that into a program and have it spit out a collection of HTML and CCS which when viewed in a browser would look just like that image?
你的意思是你有一个PNG,GIF或JPG屏幕截图...并且你想将它提供给一个程序并让它吐出一个HTML和CCS的集合,当在浏览器中查看时,它看起来就像那个图像?
I'm sorry to burst your bubble, but I would be very, very, very surprised if this was the case.
我很抱歉爆破你的泡沫,但如果是这样的话,我会非常,非常非常惊讶。
It's basically just impossible. If you see a box on the screen, it could be a text area, or a div, or a td, or a gif, or any one of fifteen different things. There's no way at all a program could every figure out which HTML element to use.
这基本上是不可能的。如果你在屏幕上看到一个方框,它可能是一个文本区域,一个div,一个td,一个gif,或者十五种不同的东西。根本不可能每个程序都能找出要使用的HTML元素。
I'm sorry, but you're going to have to write HTML yourself. A tool like Dreamweaver will help speed the process if you're new to HTML. But I'll bet ya two bits to a farthing that there's nothing on the planet which will automate this job.
对不起,你要自己写HTML。如果您不熟悉HTML,像Dreamweaver这样的工具将有助于加快这一过程。但是,我敢打赌,这两个星球上没有任何东西会让这项工作自动化。
Not the answer you wanted, sorry. But it's the answer.
不是你想要的答案,抱歉。但这就是答案。
#2
I am pretty sure that you can use Adobe Dreamweaver to do this - going from design to HTML.
我很确定您可以使用Adobe Dreamweaver执行此操作 - 从设计到HTML。
#3
You mention that they used Fireworks to do the design. Is that Adobe Fireworks? If so, that application has the option of outputting the design into HTML for you.
你提到他们使用Fireworks来进行设计。是Adobe Fireworks吗?如果是这样,该应用程序可以选择将设计输出为HTML。
From the feature list:
从功能列表中:
Design once, deploy to many platforms
设计一次,部署到许多平台
Output Fireworks designs to HTML or the application of your choice: Adobe Flash, Adobe AIR™, or Adobe Flex®. Craft custom skins with exceptional design tools. Now your tools will play well together. Design within Fireworks and then export standards-compliant CSS-based layouts — complete with external style sheets — to Dreamweaver CS4. Create components in Fireworks for use in Adobe Flex Builder™ software. Create HTML-based Adobe AIR prototypes directly from Fireworks.
将Fireworks设计输出为HTML或您选择的应用程序:Adobe Flash,Adobe AIR™或AdobeFlex®。使用卓越的设计工具制作定制皮肤。现在你的工具将很好地协同工作。在Fireworks中进行设计,然后将符合标准的基于CSS的布局(包括外部样式表)导出到Dreamweaver CS4。在Fireworks中创建组件以在Adobe Flex Builder™软件中使用。直接从Fireworks创建基于HTML的Adobe AIR原型。
#4
I'm not aware of any tool that can convert an image of a GUI into the equivalent HTML. I would imagine that would be very dependent on the styling of the GUI anyway. On top of that, it would probably produce some pretty nasty and nightmarish-to-maintain HTML.
我不知道任何可以将GUI图像转换为等效HTML的工具。我想这无论如何都非常依赖于GUI的样式。最重要的是,它可能会产生一些非常讨厌和噩梦般的维护HTML。
It's probably not the answer you want to hear, but I'd start coding.
这可能不是你想听到的答案,但我会开始编码。
Did the design team do the design in HTML? Photoshop mockups? Both of those would give you a better shot at avoiding hand-coding time.
设计团队是否使用HTML进行设计? Photoshop模型?这两个都可以让你更好地避免手动编码时间。
#5
From a screenshot?
从截图?
You probably don't wanna do this. You want probably want, at minimum, the file saved as jpeg or png, or any format, preferably with no compression so you dont lose quality.
你可能不想这样做。您可能希望至少将文件保存为jpeg或png,或任何格式,最好不要压缩,这样您就不会失去质量。
Then you can slice it. Google "photoshop slicing tutorial" and tons will appear.
然后你可以切片。谷歌“photoshop切片教程”和吨将出现。
At best, you want the PSD file, which you can then slide it up and hide/show layers of things you dont want, etc.
充其量,你想要PSD文件,然后你可以将它向上滑动并隐藏/显示你不想要的东西等等。
#1
You mean you have a PNG, GIF or JPG screen-shot... and you want to feed that into a program and have it spit out a collection of HTML and CCS which when viewed in a browser would look just like that image?
你的意思是你有一个PNG,GIF或JPG屏幕截图...并且你想将它提供给一个程序并让它吐出一个HTML和CCS的集合,当在浏览器中查看时,它看起来就像那个图像?
I'm sorry to burst your bubble, but I would be very, very, very surprised if this was the case.
我很抱歉爆破你的泡沫,但如果是这样的话,我会非常,非常非常惊讶。
It's basically just impossible. If you see a box on the screen, it could be a text area, or a div, or a td, or a gif, or any one of fifteen different things. There's no way at all a program could every figure out which HTML element to use.
这基本上是不可能的。如果你在屏幕上看到一个方框,它可能是一个文本区域,一个div,一个td,一个gif,或者十五种不同的东西。根本不可能每个程序都能找出要使用的HTML元素。
I'm sorry, but you're going to have to write HTML yourself. A tool like Dreamweaver will help speed the process if you're new to HTML. But I'll bet ya two bits to a farthing that there's nothing on the planet which will automate this job.
对不起,你要自己写HTML。如果您不熟悉HTML,像Dreamweaver这样的工具将有助于加快这一过程。但是,我敢打赌,这两个星球上没有任何东西会让这项工作自动化。
Not the answer you wanted, sorry. But it's the answer.
不是你想要的答案,抱歉。但这就是答案。
#2
I am pretty sure that you can use Adobe Dreamweaver to do this - going from design to HTML.
我很确定您可以使用Adobe Dreamweaver执行此操作 - 从设计到HTML。
#3
You mention that they used Fireworks to do the design. Is that Adobe Fireworks? If so, that application has the option of outputting the design into HTML for you.
你提到他们使用Fireworks来进行设计。是Adobe Fireworks吗?如果是这样,该应用程序可以选择将设计输出为HTML。
From the feature list:
从功能列表中:
Design once, deploy to many platforms
设计一次,部署到许多平台
Output Fireworks designs to HTML or the application of your choice: Adobe Flash, Adobe AIR™, or Adobe Flex®. Craft custom skins with exceptional design tools. Now your tools will play well together. Design within Fireworks and then export standards-compliant CSS-based layouts — complete with external style sheets — to Dreamweaver CS4. Create components in Fireworks for use in Adobe Flex Builder™ software. Create HTML-based Adobe AIR prototypes directly from Fireworks.
将Fireworks设计输出为HTML或您选择的应用程序:Adobe Flash,Adobe AIR™或AdobeFlex®。使用卓越的设计工具制作定制皮肤。现在你的工具将很好地协同工作。在Fireworks中进行设计,然后将符合标准的基于CSS的布局(包括外部样式表)导出到Dreamweaver CS4。在Fireworks中创建组件以在Adobe Flex Builder™软件中使用。直接从Fireworks创建基于HTML的Adobe AIR原型。
#4
I'm not aware of any tool that can convert an image of a GUI into the equivalent HTML. I would imagine that would be very dependent on the styling of the GUI anyway. On top of that, it would probably produce some pretty nasty and nightmarish-to-maintain HTML.
我不知道任何可以将GUI图像转换为等效HTML的工具。我想这无论如何都非常依赖于GUI的样式。最重要的是,它可能会产生一些非常讨厌和噩梦般的维护HTML。
It's probably not the answer you want to hear, but I'd start coding.
这可能不是你想听到的答案,但我会开始编码。
Did the design team do the design in HTML? Photoshop mockups? Both of those would give you a better shot at avoiding hand-coding time.
设计团队是否使用HTML进行设计? Photoshop模型?这两个都可以让你更好地避免手动编码时间。
#5
From a screenshot?
从截图?
You probably don't wanna do this. You want probably want, at minimum, the file saved as jpeg or png, or any format, preferably with no compression so you dont lose quality.
你可能不想这样做。您可能希望至少将文件保存为jpeg或png,或任何格式,最好不要压缩,这样您就不会失去质量。
Then you can slice it. Google "photoshop slicing tutorial" and tons will appear.
然后你可以切片。谷歌“photoshop切片教程”和吨将出现。
At best, you want the PSD file, which you can then slide it up and hide/show layers of things you dont want, etc.
充其量,你想要PSD文件,然后你可以将它向上滑动并隐藏/显示你不想要的东西等等。