8 Replies Latest reply: May 24, 2013 9:08 PM by Jeelzepup RSS

    Placed SWF file into dreamweaver, but it breaks up my layout.

    Jeelzepup

      Hello all

       

      OK - so - warning -  I am rather amateur at all this. LIke many people, I make up my own website, which I have done in the past with no problems, but this time I have come unstuck because I am trying to insert a flash swf. I have managed to get so far with my website design for the photos page (which includes a thumbnail gallery which has been made using flash) but now it is not previewing correctly.

       

      I have designed the layout in Fireworks and that exports as an html fine and looks good in dreamweaver and also when I preview in browser.

       

      I made a slice in Fireworks the same size as my swf and replaced that image with the swf once I had opened up the exported html file in DW. But sfter I put the swf in, when I preview in browser, the slices seem to have mucked about a bit and the images in the table (I assume) are not aligned correctly.

       

      Please bear in mind that since I will only ever design this website, I really don't want to have to spend hours learing CSS (or whatever) though of course I aprpeciate that knowing code will help. I have had a go at learning some of it, and cannot get my head around it! If there is no obvious answer, I guess I will just figure out another way around it - but I'm hoping it is something simple.....

       

      Here is a link to a screenshot of what it looks like when I preview (the white arrrows point out the problems)

       

      http://www.becreative.co.nz/broken.html

       

      Here is the code:

       

      Thank you

       

       

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

      <html>

      <head>

      <title>Event Decor | Photos | Becreative</title>

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

      <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

      <script language="JavaScript">

      <!--

      function MM_findObj(n, d) {

        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() {

        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];}

      }

      function MM_swapImgRestore() {

        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() {

        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];}}

      }

       

       

      </script>

      </head>

      <body bgcolor="#000000" onLoad="MM_preloadImages('images/AllHomef2.jpg','images/AllServicesf2.jpg','images/AllPho tosf2.jpg','images/AllPolicyf2.jpg','images/AllContactf2.jpg');">

      <div align="center">

        <table border="0" cellpadding="0" cellspacing="0" width="1200">

          <tr>

            <td colspan="7"><img name="photos01" src="images/photos01.jpg" width="1200" height="79" border="0" alt=""></td>

          </tr>

          <tr>

            <td rowspan="6"><img name="photos02" src="images/photos02.jpg" width="207" height="821" border="0" alt=""></td>

            <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="775">

              <tr>

                <td><img name="photos25" src="images/photos25.jpg" width="502" height="30" border="0" alt=""></td>

                <td><a href="http://www.becreative.co.nz/index.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('AllHome','','images/AllHomef2.jpg',1);"><img name="AllHome" src="images/AllHome.jpg" width="67" height="30" border="0" alt="Home"></a></td>

                <td><img name="photos04" src="images/photos04.jpg" width="17" height="30" border="0" alt=""></td>

                <td><a href="http://www.becreative.co.nz/services.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('AllServices','','images/AllServicesf2.jpg',1);"><img name="AllServices" src="images/AllServices.jpg" width="90" height="30" border="0" alt="Services"></a></td>

                <td><img name="photos06" src="images/photos06.jpg" width="16" height="30" border="0" alt=""></td>

                <td><a href="http://www.becreative.co.nz/photos.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('AllPhotos','','images/AllPhotosf2.jpg',1);"><img name="AllPhotos" src="images/AllPhotos.jpg" width="83" height="30" border="0" alt="Photos"></a></td>

                </tr>

            </table></td>

            <td rowspan="6"><img name="photos08" src="images/photos08.jpg" width="19" height="821" border="0" alt=""></td>

            <td><a href="http://www.becreative.co.nz/policy.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('AllPolicy','','images/AllPolicyf2.jpg',1);"><img name="AllPolicy" src="images/AllPolicy.jpg" width="74" height="30" border="0" alt="Policy"></a></td>

            <td rowspan="6"><img name="photos10" src="images/photos10.jpg" width="17" height="821" border="0" alt=""></td>

            <td><a href="http://www.becreative.co.nz/contact.htm" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('AllContact','','images/AllContactf2.jpg',1);"><img name="AllContact" src="images/AllContact.jpg" width="95" height="30" border="0" alt="Contact"></a></td>

            <td rowspan="6"><img name="photos12" src="images/photos12.jpg" width="13" height="821" border="0" alt=""></td>

          </tr>

          <tr>

            <td><img name="photos27" src="images/photos27.jpg" width="775" height="121" border="0" alt=""></td>

            <td rowspan="5"><img name="photos16" src="images/photos16.jpg" width="74" height="791" border="0" alt=""></td>

            <td rowspan="5"><img name="photos17" src="images/photos17.jpg" width="95" height="791" border="0" alt=""></td>

          </tr>

          <tr>

            <td><div align="center">

              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="775" height="520" id="FlashID" title="gallery">

                <param name="movie" value="gallery.swf">

                <param name="quality" value="high">

                <param name="wmode" value="opaque">

                <param name="swfversion" value="6.0.65.0">

                <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->

                <param name="expressinstall" value="Scripts/expressInstall.swf">

                <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->

                <!--[if !IE]>-->

                <object type="application/x-shockwave-flash" data="gallery.swf" width="775" height="520">

                  <!--<![endif]-->

                  <param name="quality" value="high">

                  <param name="wmode" value="opaque">

                  <param name="swfversion" value="6.0.65.0">

                  <param name="expressinstall" value="Scripts/expressInstall.swf">

                  <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->

                  <div>

                    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

                    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

                  </div>

                  <!--[if !IE]>-->

                </object>

                <!--<![endif]-->

              </object>

            </div></td>

          </tr>

          <tr>

            <td><img name="photos20" src="images/photos20.jpg" width="775" height="83" border="0" alt=""></td>

          </tr>

          <tr>

            <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="775">

              <tr>

                <td><img name="photos21" src="images/photos21.jpg" width="428" height="15" border="0" alt=""></td>

                <td><a href="http://www.orcon.net.nz"><img name="AllFooterOrcon" src="images/AllFooterOrcon.jpg" width="93" height="15" border="0" alt=""></a></td>

                <td><img name="photos23" src="images/photos23.jpg" width="254" height="15" border="0" alt=""></td>

                </tr>

            </table></td>

          </tr>

          <tr>

            <td><img name="photos28" src="images/photos28.jpg" width="775" height="52" border="0" alt=""></td>

          </tr>

        </table>

      </div>

      <script type="text/javascript">

      <!--

      swfobject.registerObject("FlashID");

      //-->

      </script>

      </body>

      </html>

        • 1. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
          MurraySummers ACP/MVPs

          I have designed the layout in Fireworks and that exports as an html fine and looks good in dreamweaver and also when I preview in browser.

           

          But this is a notoriously bad way to build a page for any use other than a prototype. It's completely unsuitable for actual use on the web. Why? Because the HTML created by FW (and by any graphics application) is so inflexible that when put into a situation where the browser settings are unpredicatable, the layout breaks apart. This happens because of the liberal use of row- and colspans in the generated HTML (count how many there are in yours). To see why this is bad, read this -

           

          http://www.apptools.com/rants/spans.php

           

          I have no doubt that this is what is responsible for your problems too.

           

          Of course, I'll say nothing about the ill-advised use of Flash....

          • 2. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
            Nancy O. MVP

            Of course, I'll say nothing about the ill-advised use of Flash....

            Then I will.   Flash is a dead web technology because the world's most popular devices don't support it.  If you choose to use Flash, you're alienating people who use iPhones, iPads, iPod Touch, newer Androids, and more...  That's a lot of people who will never see your flash gallery.

             

            Create a CSS Layout or use one of the pre-built layouts that comes with DW.  See screenshot.

            CS6-NewLayout.jpg

             

            Use a jQuery image gallery instead of Flash.  jQuery is well supported by all modern web devices.

             

            Cycle 2

            http://jquery.malsup.com/cycle2/

             

            Fancybox

            http://fancybox.net/

             

            Wow slider

            http://wowslider.com/

             

            Primer for using jQuery Plugins

            http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html

             

             

            Nancy O.

            • 3. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
              Jeelzepup Community Member

              I should explain that my website is used as an online portfolio more than anything else, so I really don't see the need for it to be viewed on small technology like iphones - which are way too small to see the images that people need to see anyway.

               

              You are both clearly very knowledgeable about this, but its there really a need to answer if all you are going to do is be dismissive and critical of the way I have attempted it?  If you could not answer my question (i.e. why the difference happened since I put the swf file in when it was previewing perfectly before) why waste your time answering at all?

               

              I shall find another way around it , as I am not able to spend a week or so attempting to teach myself CSS, and when I tried to look into jQuery, it was gobbledegook to me, hence doing it this way. Thank you for your time.

              • 4. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
                Nancy O. MVP

                I don't think either I or Murray were being the least bit dismissive.  You got some excellent advice from both of us. 

                #1 Graphics apps don't produce good HTML code.

                #2 Flash is not a viable web technology. 

                Whether you choose to make the necessary changes in your workflow is entirely up to you.

                 

                Good luck!

                 

                 

                Nancy O.

                • 5. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
                  Jeelzepup Community Member

                  Of course ou would think it excellent advice as you gave it, but it didn't actually answer my question of why it changes after I put the SWF file in though. It was fine before I put it in, and I have followed instructions to the letter how to do it, so I don't understand why the layout changed.

                   

                  And yes, sorry, but you did come across dismissive of the way I had tried to achieve what I wanted. I realised code experts would say I was doing it all wrong because I design graphically not with just code. I had seen similarly dismissive answers from you on other questions on the forum and that's what prompted me to mention that it's not worth me spending the tome to learn about CSS or whatever - but you must have glossed over that. Thats cool though - if you cannot answer why it has changed since I exhanged an image for a same sized swf file, not to worry - that's all I wanted to know. I will figure it out.

                  • 6. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
                    MurraySummers ACP/MVPs

                    it didn't actually answer my question of why it changes after I put the SWF file in though.

                     

                    Then you didn't read well.

                     

                    "...the layout breaks apart. This happens because of the liberal use of row- and colspans in the generated HTML (count how many there are in yours). To see why this is bad, read this -

                     

                    http://www.apptools.com/rants/spans.php

                     

                    I have no doubt that this is what is responsible for your problems too."

                     

                    That's your answer.

                    • 7. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
                      Ken Binney MVP

                      Jeelzepup wrote:

                      but it didn't actually answer my question of why it changes after I put the SWF file in though.

                       

                      Actually Becky, it did

                       

                      "Because the HTML created by FW (and by any graphics application) is so inflexible that when put into a situation where the browser settings are unpredictable, the layout breaks apart".

                      • 8. Re: Placed SWF file into dreamweaver, but it breaks up my layout.
                        Jeelzepup Community Member

                        Many thanks Murray - I wil have a further look into it. My apologies for missing that the first time and thank you for your help.