8 Replies Latest reply on Feb 26, 2010 11:00 AM by Nancy OShea

    Imported photoshop slices don't show up nice

    andyalbergs

      Hey peeps,

       

      As many others, I've made a newsletter with PS and sliced it up before importing it into DW. The only thing I did in DW is adding some links to a couple of the JPEG's. When viewing the html file in IE and FF it seems that the different slices are a bit shifted (I get small white bars between the slices instead of a smooth overall view). I don't have this problem when using Safari as a browser. It certainly has something to do with the code but what??

      Hopefully someone can help me out...

       

      Thx!

        • 2. Re: Imported photoshop slices don't show up nice
          hans-g. Adobe Community Professional & MVP

          Hi,

           

          your image <p><img src="http://www.rojo-events.be/eflyers/maart/afbeeldingen/eflyer_feb_01.jpg" width="800" height="270" alt=""></p>  finds in a table. The following images you put in a table which is underneath. If you want to keep the table, you should copy all the following pictures in the same table.

           

          Hans-G.

          • 3. Re: Imported photoshop slices don't show up nice
            andyalbergs Level 1

            But this is the way photoshop composed the HTML file. The original HTML file by photoshop showed every image in a different cell which is ofcourse good but for some reason, the slices don't align perfectly as they supposed to...

            • 4. Re: Imported photoshop slices don't show up nice
              ashveer munilal

              Hey there I have been in that situation before. But I had over come it now that i knw more. Ok i am going to explain to u what went wrong 1st and then post the html code. When u export the html with the slices from PS and then open it in dreamweaver it will display fine, but when u just make a link to any of the sliced images it adds and anchor but with a border around the images. So thats why the whole newsletter is offset. Its better to add the link from the behavior panel on the right, by adding "onclick" "go to URL" function and that should work fine.

               

              OR

               

              You could just export the jpg of the newsletter and inport it in dreamweaver and make hotspots on wer u want the links to be and add links to the hotspots.

               

               

              Insert HTML Code to ur page:

               

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
              <!-- saved from url=(0055)http://www.rojo-events.be/eflyers/maart/eflyer_feb.html -->
              <HTML><HEAD><TITLE>eflyer_feb</TITLE>
              <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
              <META name=GENERATOR content="MSHTML 8.00.6001.18882">
              <script type="text/javascript">
              <!--
              function MM_goToURL() { //v3.0
                var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
                for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
              }
              //-->
              </script>
              </HEAD>
              <BODY leftMargin=0 topMargin=0 bgColor=#ffffff marginheight="0" marginwidth="0"><!-- Save for Web Slices (eflyer_feb.psd) -->
              <TABLE id=Tabel_01 border=0 cellSpacing=0 cellPadding=0 width=801 height=2000>
                <TBODY>
                <TR>
                  <TD colSpan=6><IMG alt="" src="eflyer_feb_files/eflyer_feb_01.jpg"
                    width=800 height=270></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=270></TD></TR>
                <TR>
                  <TD rowSpan=10><IMG alt="" src="eflyer_feb_files/eflyer_feb_02.jpg"
                    width=51 height=1730></TD>
                  <TD colSpan=2><img src="eflyer_feb_files/eflyer_feb_03.jpg" alt=""
                    width=144 height=204 onClick="MM_goToURL('parent','http://www.facebook.com/event.php?eid=307062589144#!/event.php?eid=283295711364&ref=ts');r eturn document.MM_returnValue"></TD>
                  <TD rowSpan=8 colSpan=3><img alt=""
                    src="eflyer_feb_files/eflyer_feb_04.jpg" width=605 height=1522></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=204></TD></TR>
                <TR>
                  <TD colSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_05.jpg"
                    width=144 height=245></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=245></TD></TR>
                <TR>
                  <TD rowSpan=8><IMG alt="" src="eflyer_feb_files/eflyer_feb_06.jpg" width=1
                    height=1281></TD>
                  <TD><img src="eflyer_feb_files/eflyer_feb_07.jpg" alt=""
                    width=143 height=201 onClick="MM_goToURL('parent','http://www.facebook.com/event.php?eid=307062589144#!/event.php?eid=283295711364&ref=ts');r eturn document.MM_returnValue"></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=201></TD></TR>
                <TR>
                  <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_08.jpg" width=143
                    height=250></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=250></TD></TR>
                <TR>
                  <TD><img
                    src="eflyer_feb_files/eflyer_feb_09.jpg" alt="" width=143 height=204 onClick="MM_goToURL('parent','http://www.rojo-events.be/');return document.MM_returnValue"></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=204></TD></TR>
                <TR>
                  <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_10.jpg" width=143
                    height=103></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=103></TD></TR>
                <TR>
                  <TD><img
                    src="eflyer_feb_files/eflyer_feb_11.jpg" alt="" width=143 height=198 onClick="MM_goToURL('parent','http://www.rojo-events.be/');return document.MM_returnValue"></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=198></TD></TR>
                <TR>
                  <TD rowSpan=3><IMG alt="" src="eflyer_feb_files/eflyer_feb_12.jpg"
                    width=143 height=325></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
              height=117></TD></TR>
                <TR>
                  <TD rowSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_13.jpg"
                    width=164 height=208></TD>
                  <TD><img src="eflyer_feb_files/eflyer_feb_14.jpg" alt=""
                    width=85 height=93 onClick="MM_goToURL('parent','http://www.youtube.com/user/Diamondsatversuz');return document.MM_returnValue"></TD>
                  <TD rowSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_15.jpg"
                    width=356 height=208></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1 height=93></TD></TR>
                <TR>
                  <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_16.jpg" width=85
                    height=115></TD>
                  <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                height=115></TD></TR></TBODY></TABLE>
              <!-- End Save for Web Slices --></BODY></HTML>

              • 5. Re: Imported photoshop slices don't show up nice
                bregent Most Valuable Participant

                >But this is the way photoshop composed the HTML file

                 

                This is why using Photoshop, or any graphic applications, to build your html is not a good choice other than for prototyping. Most folks export only the graphics from these apps, then assemble the html/css in DW.

                • 6. Re: Imported photoshop slices don't show up nice
                  andyalbergs Level 1

                  Hey Ashveer,

                  Check out the updated html file: http://www.rojo-events.be/eflyers/maart/eflyer_feb.html

                  I've tried out your method and it works in an internet browser. All jpegs show up aligned and perfect. The problem is that you can't visually see that there are some links attached to parts of the newsletter. The cursor doesn't even change when rolling over a link.... Which makes this trick pretty useless because people don't know that parts are clickable...

                  A second problem is Microsoft Outlook. When importing the newsletter in outlook, everything shows up perfectly BUT the link part doesn't work at all. Nothing happens when clicking on the link parts...

                  Isn't there another way to work around this problem (without using CSS) because it's pretty urgent for me... I need to deliver tomorrow...

                  Grtz,

                  A

                  • 7. Re: Imported photoshop slices don't show up nice
                    ashveer munilal Level 1

                    Hey there, I kind of figured that after i sent it to you. Bt i have done another way for you jst replace the old code with this one. This 1 should work fine.

                     

                     

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                    <!-- saved from url=(0055)http://www.rojo-events.be/eflyers/maart/eflyer_feb.html -->
                    <HTML><HEAD><TITLE>eflyer_feb</TITLE>
                    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
                    <META name=GENERATOR content="MSHTML 8.00.6001.18882">
                    <script type="text/javascript">
                    <!--
                    function MM_swapImgRestore() { //v3.0
                      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
                    }
                    function MM_preloadImages() { //v3.0
                      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
                    }

                    function MM_findObj(n, d) { //v4.01
                      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                      if(!x && d.getElementById) x=d.getElementById(n); return x;
                    }

                    function MM_swapImage() { //v3.0
                      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                    }
                    //-->
                    </script>
                    </HEAD>
                    <BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginwidth="0" marginheight="0" onLoad="MM_preloadImages('eflyer_feb_files/eflyer_feb_11.jpg','eflyer_feb_files/eflyer_fe b_03.jpg','eflyer_feb_files/eflyer_feb_07.jpg','eflyer_feb_files/eflyer_feb_09.jpg','eflye r_feb_files/eflyer_feb_14.jpg')"><!-- Save for Web Slices (eflyer_feb.psd) -->
                    <TABLE id=Tabel_01 border=0 cellSpacing=0 cellPadding=0 width=801 height=2000>
                      <TBODY>
                      <TR>
                        <TD colSpan=6><IMG alt="" src="eflyer_feb_files/eflyer_feb_01.jpg"
                          width=800 height=270></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=270></TD></TR>
                      <TR>
                        <TD rowSpan=10><IMG alt="" src="eflyer_feb_files/eflyer_feb_02.jpg"
                          width=51 height=1730></TD>
                        <TD colSpan=2><a href="http://www.facebook.com/event.php?eid=307062589144#!/event.php?eid=283295711364&ref=ts" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','eflyer_feb_files/eflyer_feb_03.jpg',1)"><img src="eflyer_feb_files/eflyer_feb_03.jpg" name="Image28" width="144" height="204" border="0"></a></TD>
                        <TD rowSpan=8 colSpan=3><img alt=""
                          src="eflyer_feb_files/eflyer_feb_04.jpg" width=605 height=1522></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=204></TD></TR>
                      <TR>
                        <TD colSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_05.jpg"
                          width=144 height=245></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=245></TD></TR>
                      <TR>
                        <TD rowSpan=8><IMG alt="" src="eflyer_feb_files/eflyer_feb_06.jpg" width=1
                          height=1281></TD>
                        <TD><a href="http://www.facebook.com/event.php?eid=307062589144#!/event.php?eid=283295711364&ref=ts" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','eflyer_feb_files/eflyer_feb_07.jpg',1)"><img src="eflyer_feb_files/eflyer_feb_07.jpg" name="Image29" width="143" height="201" border="0"></a></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=201></TD></TR>
                      <TR>
                        <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_08.jpg" width=143
                          height=250></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=250></TD></TR>
                      <TR>
                        <TD><a href="http://www.rojo-events.be/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','eflyer_feb_files/eflyer_feb_09.jpg',1)"><img src="eflyer_feb_files/eflyer_feb_09.jpg" name="Image30" width="143" height="204" border="0"></a></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=204></TD></TR>
                      <TR>
                        <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_10.jpg" width=143
                          height=103></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=103></TD></TR>
                      <TR>
                        <TD><a href="http://www.rojo-events.be/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','eflyer_feb_files/eflyer_feb_11.jpg',1)"><img src="eflyer_feb_files/eflyer_feb_11.jpg" name="Image27" width="143" height="198" border="0"></a></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=198></TD></TR>
                      <TR>
                        <TD rowSpan=3><IMG alt="" src="eflyer_feb_files/eflyer_feb_12.jpg"
                          width=143 height=325></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                    height=117></TD></TR>
                      <TR>
                        <TD rowSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_13.jpg"
                          width=164 height=208></TD>
                        <TD><a href="http://www.youtube.com/user/Diamondsatversuz" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','eflyer_feb_files/eflyer_feb_14.jpg',1)"><img src="eflyer_feb_files/eflyer_feb_14.jpg" name="Image31" width="85" height="93" border="0"></a></TD>
                        <TD rowSpan=2><IMG alt="" src="eflyer_feb_files/eflyer_feb_15.jpg"
                          width=356 height=208></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1 height=93></TD></TR>
                      <TR>
                        <TD><IMG alt="" src="eflyer_feb_files/eflyer_feb_16.jpg" width=85
                          height=115></TD>
                        <TD><IMG alt="" src="eflyer_feb_files/spacer.gif" width=1
                      height=115></TD></TR></TBODY></TABLE>
                    <!-- End Save for Web Slices --></BODY></HTML>

                    • 8. Re: Imported photoshop slices don't show up nice
                      Nancy OShea Adobe Community Professional & MVP

                      If the intent is to EMAIL the Newsletter, this approach will never work.  Most email clients don't support Javascript, Flash or other web technologies, so "onClick" behaviors are ill advised.  Use text links for people who have images turned off in their email client.  Provide a link to the web page for email clients that can't view HTML.

                       

                      HTML Emails and Newsletters -

                      http://alt-web.blogspot.com/2010/02/html-emails-and-newsletters.html

                       

                      As bregent said, don't allow Photoshop or any other graphics app to generate your HTML code for you.  Use Photoshop to create images.  Use DW to build your HTML page.

                       

                      Taking  a Fireworks (or Photoshop) comp to a CSS based layout in DW

                      Part 1 --
                      http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html

                      Part 2 --
                      http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists
                      http://alt-web.com/
                      http://twitter.com/altweb
                      http://alt-web.blogspot.com