12 Replies Latest reply on Dec 14, 2009 12:51 PM by pixlor



      i used fireworks about 3 years ago and it is how i was taught photo editting so i use it even though im a pc not a mac.

      however this being the first time ive used it 3 years i have forgotten a lot of my editting skills.

      so my question is

      how do i extract html from an image(s) i have been working in order to post them in say an html doc. and end up with my pic(s) online?

      the attached file is what i have been working on.

      so please answer because i do have a deadline with this as i am doing it for someone else

        • 1. Re: html/xhtml
          pixlor Level 4

          You've posted a .jpg. This is a flattened bitmap where the text has just become other colored pixels.


          Have you been saving as a .jpg or do you have a Fireworks' formated .png document where you have a background image and the text in separate vector text objects?

          • 2. Re: html/xhtml
            hellwolf1234 Level 1

            i saved as that to make it a smaller file size.

            i can recreate itll take all of 3 mins to recreate and save it as a png. however once its a png how in the world do i get the html codeing?

            • 3. Re: html/xhtml
              pixlor Level 4

              Really, the best thing is to do it in an HTML authoring environment (such as Dreamweaver) or text editor. Here are a couple of really good tutorials:


              http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/ (The author uses Photoshop for her graphics, but you can use Fireworks just as easily.)


              If you want that image behind some text, you'll want to place it as the background for the div that holds the text. As here:



              In order to set text in a certain font on the Web the visitor has to have that font installed on his or her computer. You set the fonts in your CSS, what's called a font stack, because you make a stack, or list of your preferred font, then acceptable alternatives.



              But...some of those effects are very difficult to reproduce with CSS and I wouldn't suggest you attempt them without very clear understanding.

              1 person found this helpful
              • 4. Re: html/xhtml
                hellwolf1234 Level 1

                i have dreamweaver as well.

                i was exporting the image(S) from fireworks to dreamweaver and i "coped html code to clipboard" and then i went and posted it in the html file form of dreamweaver. however when i did this is apperared as a broken image and was not useable.

                • 5. Re: html/xhtml
                  pixlor Level 4

                  If you have a broken image, it's because the reference in the file isn't correct/the image isn't where the code is looking for it.


                  If your html file and your image are in the same folder on your hard drive, then the reference should look like this:

                  <img src="myimg.jpg" [other attributes, such as height and width]>


                  Commonly, however, people make a folder in their site structure named "images" to hold their images and Fireworks may expect you to export your images there. In that case, the reference in your HTML file should look like this:

                  <img src="images/myimg.jpg" [other attributes, such as height and width]>


                  Use code view in Dreamweaver and see what the reference to your image is..if it's in a sub folder and if that's where you want it. If it's other than what you have or want, change the code, make sure the image is where the code expects it to be, and save your file.

                  • 6. Re: html/xhtml
                    hellwolf1234 Level 1


                    • 7. Re: html/xhtml
                      hellwolf1234 Level 1

                      that is what im getting..... gah so confusing....

                      • 8. Re: html/xhtml
                        pixlor Level 4

                        I'm sorry, but what is that supposed to be?


                        When you export your image(s) from Fireworks, where do you export them to?

                        In Dreamweaver's code view, what do you have for the reference to the images?


                        The image reference in the HTML file needs to be correct for the relationship of the HTML file to the images. For example. Let's suppose you have a folder somewhere on your hard drive where you're working on your friend's project. Maybe you have a number of working design documents, maybe some stuff your friend has sent you. You also need to store the files you produce: HTML documents and images. One possible way of organizing the data you have is a structure similar to the following:

                        • My-Friends-Web-Site
                          • Content (contains stuff your friend has sent you: images, text files, snippets from emails, etc; use sub-folders as necessary)
                          • Design (working design stuff you do; use sub-folders as necessary)
                            • Logo (if you do one, it's nice to keep it separate)
                            • Page (the page design, usually a Fireworks layout; save your working documents here)
                            • other design elements that might be nice to put in their own folder
                          • Web (this is the folder you will define as the site folder in Dreamweaver and which you can upload to the server)
                            • images (the specific folder for site-wide images, header, navigation, etc; export to here from your Fireworks documents)
                            • other folders for main content areas

                        Stuff comes in, you do work, different stuff goes out to the Web.


                        1. Make sure you at least have the Web and Web/images sub-folders of your project folder.
                        2. In Fireworks, go to File > Image Preview or File > Export and export your images to the Web/images folder.
                        3. In Dreamweaver, save the main page for your friend's site as index.html (or index.htm) and put it in the Web folder.
                        4. Use Dreamweaver's code view. Look for the line(s) that reference your image(s). They should reference the image(s) as being in the sub-folder images. For example, if your header is myheader.jpg, and you export it to the Web/images folder, then the HTML code should read:
                          <img src="images/myheader.jpg" [plus some other attributes such as height and width]>
                        5. Alternative to 4., from Dreamweaver, use the Insert menu to add the image(s) which you exported to the Web/images folder.
                        • 9. Re: html/xhtml
                          hellwolf1234 Level 1

                          im not making a site just the header. and it still needs some work....

                          im so confused...

                          all i want is the html code so he can post on hiw website!!! gah!

                          • 10. Re: html/xhtml
                            pixlor Level 4

                            Then you still need to export the image somewhere and you still need to have the HTML code reference its correct position. It doesn't matter if an image is on the table next to you or on the moon. HTML can still reference it. But you need to code it for where the image actually is. You can't code the HTML for an image at the table next to you when it is actually on the moon or vice versa.


                            Broken images happen when you a) don't export your images or b) don't put them where you think you put them or c) don't reference them properly in the code. All three problems are not technical problems, but organizational problems. If you follow the instructions in my previous post, you'll be fine. They may be overkill, but they'll get you there.


                            HTML files are not like Word files. Images are not embedded in the file. HTML is code that browsers interpret. One of the pieces of code is the img tag. When browsers read that, they understand that they are to go fetch an image - which is a separate file - and display it. You need to produce two files: an image and an HTML file. But the HTML code still must correctly reference the location of the image. Otherwise, you get that broken image symbol.


                            Either you are not exporting your image or you're not putting it in the place that matches the reference in the code. First: are you exporting your image? If yes, then look at your code (Dreamweaver's code view, not design view) and see where the img tag says the image should be.

                            1 person found this helpful
                            • 11. Re: html/xhtml
                              hellwolf1234 Level 1

                              there, now you have gotten simple enough to where i can understand you.


                              i have all my files fore fireworks in one folder named fireworks. when i export i save the file to either fireworks or desktop, ive tried both and came up with the same results. i will try your method and see what i come up with. thank

                              • 12. Re: html/xhtml
                                pixlor Level 4



                                Um...here's an alternative...make a folder on your desktop for the work you're doing for your friend. Save the HTML file there and export (or move) your header image there - both files in the same place. Then, go into the code and make sure that the img tag does not have any folder information in it.


                                For instance...if your image is headerimg.jpg then the img tag should look like
                                <img src="headerimg.jpg" [and some other stuff]/>


                                I looked for some tutorial information about images in HTML. I think this one has a clear description:


                                Read the section "Let the Coding Begin" to see the difference between referencing images in the same folder or in sub-folders.