Skip navigation
ben90036
Currently Being Moderated

Edited HTML Image - Export to Website. Possible?

Jul 20, 2012 7:06 PM

Tags: #dreamweaver #wordpress #html_to_wordpress

Hi all,

 

What I am wondering is how to move a Dreamweaver FILE (not an entire site) into my WP site. Here is what I did.

 

1. Sliced a picture inside of Fireworks.


2. Exported as HTML into Dreamweaver to mark it up with my links and such.


3. Want to put this file (it's an interactive map with links for the states) into my site but can't figure out how. It works while in DW since it's hosted locally but how the heck do I get this nicely sliced image into WordPress?!?! Perhaps I need to start with the file type...not even certain of what will xsfer into WordPress

 

Thanks in advance!

 
Replies
  • Currently Being Moderated
    Jul 21, 2012 5:34 AM   in reply to ben90036

    1. Sliced a picture inside of Fireworks.


    2. Exported as HTML into Dreamweaver to mark it up with my links and such.

     

    This is definitely a very poor procedure (generally).  One should never use HTML written by FW (or PS, or any graphics application) in a live web page.  The HTML is just not "industrial strength".

     

    Nevertheless, let's see the code you want to appear on your WP page, please.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 21, 2012 9:47 AM   in reply to ben90036

    I fear you may have started at the wrong end... "slicing a picture"... and then finally ending up in your WP site. You may have created a square peg and are attempting to place it into a round hole.

    WP handles HTML just fine, you can copy/paste code directly from DW into a WP post using the HTML tab (NOT the Visual tag) when creating a new post in WP. I prep all my WP posts in DW (hand coded) and then copy/paste into WP.

    You don't need to copy/paste any of the <head>, open/close <body> or <html> tags either, they are already in the WP doc.

    Any styling you've added to the HTML can be either in-line or added to the WP style.css file.

    HOWEVER, you have to realize that the "container" that your new post in being placed in already has multiple CSS rules that set the width, location, etc of that container.

    So I'd suggest you start in WP and work backwards.

    First determine the largest image dimension that could be placed into a new post (or at least see if your map image will fit without downsizing).

    Next, create one simple, single color rectangle image the size of your map and place that into a new post as a test. Does it fit? is it positioned as you want, etc. Get all sizing and positioning issues out of the way before doing anything else.

    OK, so now you know the max image dimension that you can use.

    Now you start with a map image that you know will fit within those dimensions. Not really sure why you would wnt to "slice" the image at all. That just adds another layer of complexity. I'd use one big map image and hot map or place transparent .png images over various areas to create links.

    But realize that you'll need to map all locations relative to the top left corner of the image container (which you should add as the first line of the HTML).

    Start simple, your already tested rectangle image, then place one hot spot or link over that image and copy/paste the HTML code into your WP post and test it.

    Starting with a completely sliced, finished map and attempting to alter that to fit may cause hours of headaches.

    Best of luck on your project!

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 21, 2012 11:33 AM   in reply to ben90036

    Your WordPress Theme should have it's own menu system which is populated dynamically with PHP code.

     

    If you don't like the menu that came with your WordPress Theme, there are tons of WordPress Menu plug-ins or Widgets you can use instead. 

    http://wordpress.org/extend/plugins/dropdown-menu-widget/screenshots/

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points