Skip navigation
Jeelzepup
Currently Being Moderated

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

May 23, 2013 7:12 PM

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/AllPhotosf2.jpg','images/AllPolicyf2.jpg','images/AllCon tactf2.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);"><i mg 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.g if" 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>

 
Replies
  • Currently Being Moderated
    May 24, 2013 3:45 AM   in reply to Jeelzepup

    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....

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 2:35 PM   in reply to MurraySummers

    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.h tml

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 3:15 PM   in reply to Jeelzepup

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 5:18 PM   in reply to Jeelzepup

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 5:52 PM   in reply to Jeelzepup

    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".

     
    |
    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