Contact Us at 1-619-940-7199
  • Home
  • Online SiteBuilder
  • Training Center
    • Ultimate Guide: WordPress for a Business Website
    • Step by Step Web Design Course
    • Tutorials
    • Dreamweaver Template Mega Pack
  • Web Design Toolbox
    • Dreamweaver
      • Dreamweaver Templates
      • Dreamweaver Template Mega Pack
      • Dreamweaver Tutorials
    • WordPress
      • WordPress Themes
      • WordPress Theme Designers
  • Services
  • Company
  • Blog

Inserting Fireworks HTML into Dreamweaver

Helping You Build, Manage and Promote Your Website!

Home / Inserting Fireworks HTML into Dreamweaver / Inserting Fireworks HTML into Dreamweaver

Posted on: 07-11-2010 Posted in: Dreamweaver Tutorials, Tutorials

Got Adobe Fireworks and Dreamweaver?  Did you know there is a way to integrate the two, but just don’t know how?  This Dreamweaver and Fireworks tutorial will tell you exactly what to do.

1.  In this tutorial we are going to insert a table that was created in Fireworks (be sure to check out the Fireworks tutorial on Creating a Navigation Bar). Once we have inserted the Fireworks HTML into our Dreamweaver document, we will add the corresponding links using the Point-to-File method we learned about in an earlier tutorial.

Let’s get started!

2.  In this example, I have created a page with a couple of tables. The top table is 760 x 86 pixels and contains the header graphics. The second table, which we will use for the navigation and body text, is 760 pixels wide and has 2 cells, 150 pixels (navigation) and 610 pixels (body).

Note: In the below graphic, the second table appears as a single row. We will insert the Fireworks navigation bar that we created into the first cell.

Hint: In both cells, set the Vertical Alignment to Top. This will ensure proper placement when the body text is long.

3.  Place your cursor in the column where you want to insert the table, and on the Objects Toolbar click the Insert Fireworks HTML button.

In the Insert Fireworks dialog box, browse to the location of the html file we created in Fireworks. I saved my file as navigation.htm in the images folder. Click OK.

Remember, we are not just inserting a Fireworks graphic, we are inserting all of the html that Fireworks has created for the graphic we have sliced and diced so it will render perfectly.

4. Now we’re cookin’ with gas. Let’s go ahead and position our current Document and Site window as shown so we can start creating our links.

Select the Home button then from the Properties window drag the Point-to-File icon from the Property Inspector to the page you wish to link to. Home button to index.htm, Company button to company.htm, you get the picture.

Now we’re rockin. Check out the next tutorial, where we find out how to edit our graphics with Roundtrip Graphic Editing between Dreamweaver and Fireworks.

Share and Enjoy:
  • Print
  • email
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • Live
  • Netvibes
  • NewsVine
  • PDF
  • Posterous
  • Reddit
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz

About the Author

SiteBuilder
I am an Internet Consultant, Web Designer, Internet Marketer, Project Manager and Entrepreneur. If you are looking for help in building, managing and promoting your website and business, please contact me for a free consultation!

  • Related Posts
  • Popular Posts
  • UpThemes Premium WordPress Themes
    UpThemes Premium WordPress Themes
  • Studio Press Premium WordPress Themes
    Studio Press Premium WordPress Themes
  • Gorilla Themes Premium WordPress Themes
    Gorilla Themes Premium WordPress Themes
  • jQuery and Photo Gallery Conflict in Business Catalyst
    jQuery and Photo Gallery Conflict in Business Catalyst
  • UpThemes Premium WordPress Themes
    UpThemes Premium WordPress Themes
  • Studio Press Premium WordPress Themes
    Studio Press Premium WordPress Themes
  • Gorilla Themes Premium WordPress Themes
    Gorilla Themes Premium WordPress Themes
  • jQuery and Photo Gallery Conflict in Business Catalyst
    jQuery and Photo Gallery Conflict in Business Catalyst

Leave a Reply

Click here to cancel reply.

Member Login

You are not currently logged in.






» Register
» Lost your Password?

Recent Posts

  • UpThemes Premium WordPress Themes
  • Studio Press Premium WordPress Themes
  • Gorilla Themes Premium WordPress Themes
  • jQuery and Photo Gallery Conflict in Business Catalyst
  • How to Build a Successful Blog Business Book

Popular Posts

Online SiteBuilder. Web Design Training. Tools, Templates & Resources.
Everything You Need for a Successful Website.
About Us
  • Company
  • Services
  • Support
  • Contact Us
Web Design Resources
  • Online SiteBuilder
  • Training Center
  • Web Design Toolbox
  • Web Design & Internet Marketing
Training Center
  • Ultimate Guide: Using WordPress for a Business Website
  • Step by Step Web Design Course Using Dreamweaver and Fireworks
© 2010 Infinium Group, LLC. All Rights Reserved
  • About Us
    • Contact
    • Support
    • Terms of Use
TwitterStumbleUponRedditDiggdel.icio.usFacebookLinkedIn