6 Replies Latest reply: Jul 21, 2012 3:12 PM by ben90036 RSS

    Edited HTML Image - Export to Website. Possible?

    ben90036 Community Member

      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!

        • 1. Re: Edited HTML Image - Export to Website. Possible?
          ben90036 Community Member

          I am wondering if there is anyone who has done this, too. If so, I know it's possible

          • 2. Re: Edited HTML Image - Export to Website. Possible?
            MurraySummers CommunityMVP

            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.

            • 3. Re: Edited HTML Image - Export to Website. Possible?
              adninjastrator Community Member

              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

              • 4. Re: Edited HTML Image - Export to Website. Possible?
                Nancy O. CommunityMVP

                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.

                • 5. Re: Edited HTML Image - Export to Website. Possible?
                  ben90036 Community Member

                  Thank you for the reply, since I'm rather new to all of this and it's out of my knowledge range it doesn't surprise my that I'm not doing it the best way! haha. Here is the code as request, that I have from DW:

                   

                  <head>

                  <title>camera_travels</title>

                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                  <!--Fireworks CS5 Dreamweaver CS5 target.  Created Sat Jul 21 15:06:52 GMT-0700 (Pacific Daylight Time) 2012-->

                  </head>

                  <body bgcolor="#ffffff">

                  <img name="camera_travels" src="camera_travels.png" width="2005" height="1289" border="0" id="camera_travels" usemap="#m_camera_travels" alt="" /><map name="m_camera_travels" id="m_camera_travels">

                  <area shape="poly" coords="1786,590,1769,526,1781,525,1789,559,1809,583,1786,590" href="www.recordyouradventures.com/rentals-2" alt="" />

                  <area shape="poly" coords="1435,494,1487,487,1509,495,1542,488,1583,460,1591,524,1588,569,1571,589,1556,610, 1537,638,1522,626,1507,630,1488,630,1475,626,1458,618,1448,613,1435,494" href="www.recordyouradventures.com/rentals-2" alt="" />

                  <area shape="poly" coords="1227,473,1325,466,1333,489,1349,612,1351,643,1342,663,1336,689,1334,704,1321,708, 1325,722,1314,721,1305,718,1293,729,1284,717,1284,697,1250,675,1257,648,1238,645,1218,615, 1201,584,1215,560,1219,543,1216,526,1242,516,1244,492,1227,473" href="www.recordyouradventures.com/rentals-2" alt="" />

                  <area shape="poly" coords="774,753,888,760,884,848,990,888,1071,885,1117,901,1118,972,1142,1017,1130,1084,10 61,1125,1004,1158,979,1220,986,1263,967,1262,928,1250,907,1240,885,1183,837,1101,802,1074, 771,1071,746,1106,708,1091,674,1028,634,983,612,951,756,965,774,753" href="www.recordyouradventures.com/rentals-2" alt="" />

                  <area shape="poly" coords="576,518,825,543,811,733,550,705,576,518" href="www.recordyouradventures.com/rentals-2" alt="" />

                  <area shape="poly" coords="63,355,205,397,169,533,325,760,320,810,304,867,204,854,204,825,177,790,161,773,94 ,731,70,625,51,547,34,426,63,355" href="www.recordyouradventures.com/rentals-2" alt="" />

                  </map>

                  </body>

                  </html>

                  • 6. Re: Edited HTML Image - Export to Website. Possible?
                    ben90036 Community Member

                    Thanks a bunch for such a detailed reply! I did not know you could lay over it it and use those as links. I used slices since it was the only thing I knew (or thought I knew) how to do.

                     

                    I have since used the hot link feature within DW (posted above is the code) and now realize that I can use this to size my image down since it's huge right now. Thank you again and I'll keep working on it!