Website uit verband getrokken in dreamweaver

Status
Niet open voor verdere reacties.

Tieske85

Gebruiker
Lid geworden
3 mei 2012
Berichten
6
Hallo,

Op het moment ben ik bezig met het maken van een website voor het bedrijf van mijn broer.
Ik heb een aanpassing gedaan in dreamweaver, waardoor nu de website uit verband getrokken is.
Dit krijg ik niet meer goed.

De aanpassing die ik gedaan heb is; nieuwe afbeeldingen (photoshopslides) in een aantal cellen geplaatst.
De slides van de website zouden precies inelkaar moeten passen, toch zit er ruimte tussen.

http://www.impulsfysiotherapie.nl/Indextest.html

Wie kan mij helpen?
 
De onderstaande code is volgens mij niet helemaal juist:

Code:
<th height="67" width="149" colspan="6" rowspan="3" nowrap><img src="../temp_site/images/sitelayoutsub_41.png" alt="" width="149" height="67"></th>

Moet <th height niet <td height zijn?

En ook zo afsluiten
 
Hallo Jan, bedankt voor de reactie

Ik heb het veranderd, maar geen verandering helaas.
 
Hoi Tieske85,

Poef! :shocked: Daar heeft Photoshop/Dreamweaver je op een vreselijke manier het brandnetelbos ingestuurd...

Hier past eigenlijk / helaas maar 1 antwoord op:
  • Zo gauw mogelijk die tabel-opmaak met 92 cellen (!) :rolleyes:, 50 images (!) :rolleyes: en onnodig hover-javascript overboord kieperen,
    want op deze manier is het ondoenlijk om het in orde te krijgen.

Om er vervolgens met enkele <div>'s, simpele html, wat css-opmaak en slechts een paar welgemikte background-images een pracht van een site van te maken! :)

Met vriendelijke groet,
CSShunter
 
Total Tabel Make Over !

Hoi Tieske85,
Tja, de beste stuurlui staan altijd aan de wal met van die vrolijke beweringen dat het allemaal heel anders moet. ;)
En makkelijker gezegd dan gedaan. Maar bewijzen of suggesties, ho maar!

Oké, daar gaan we. :)

Dit javascript ...:
[JS]<script type="text/javascript">
<!--
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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>[/JS]
... is overbodig, en kan vervallen door er css-hovers van te maken (die o.a. meteen beschikbaar zijn, geen preload nodig hebben, en ook geen swap-functies om de gewone toestand weer terug te krijgen bij verlaten van de hover).
Dat is één!

=======
Dit oerwoud aan tabelcellen, images en spacers en onmouseover's en image-swap-restore's ...:
HTML:
<table width="901" height="801" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
      <td colspan="32">
        <img src="../temp_site/images/Achtergrond_01.png" width="900" height="7" alt="Regent Achtergrond_01"></td>
	      <td>
		      <img src="../temp_site/images/spacer.gif" width="1" height="7" alt=""></td>

    </tr>
    <tr>
      <td height="793" width="27" rowspan="13"><img src="../temp_site/images/Achtergrond_02.png" width="27" height="793" alt="Regent Achtergrond_02"></td>
  <td colspan="30">
	        <img src="../temp_site/images/Logo.png" width="845" height="36" alt="Regent Logo"></td>
	    <td height="793" width="28" rowspan="13">
	        <img src="../temp_site/images/sitelayoutsub_04.png" width="28" height="793" alt=""></td>
  <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="36" alt=""></td>

    </tr>
    <tr>
      <td rowspan="2">
        <img src="../temp_site/images/Logo-06.png" width="4" height="49" alt="Regent Logo"></td>
	    <td colspan="14">
	        <img src="../temp_site/images/Naam.png" width="337" height="39" alt="Regent Naam"></td>
	    <td colspan="15" rowspan="2">
	        <img src="../temp_site/images/Logo-08.png" width="504" height="49" alt="Regent Logo"></td>
	    <td>

	        <img src="../temp_site/images/spacer.gif" width="1" height="39" alt=""></td>
    </tr>
    <tr>
      <td colspan="14">
        <img src="../temp_site/images/Logo-09.png" width="337" height="10" alt="Regent Logo"></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="10" alt=""></td>
    </tr>
    <tr>

      <td colspan="2" rowspan="5">
        <img src="../temp_site/images/sitelayoutsub_09.png" width="7" height="122" alt=""></td>
	    <td colspan="2"><!-- TemplateBeginEditable name="home_btn" --><img src="../temp_site/images/Hoofdmenu/Home_btn.png" alt="Home_btn" width="58" height="45"><!-- TemplateEndEditable --></td>
      <td colspan="4"><!-- TemplateBeginEditable name="wzw_btn" --><a href="Wiezijnwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wzw_btn','','../temp_site/images/Hoofdmenu/Wiezijnwij_02_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Wiezijnwij_btn.png" name="wzw_btn" width="108" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
	        <img src="../temp_site/images/sitelayoutsub_12.png" width="1" height="45" alt=""></td>
	    <td colspan="4"><!-- TemplateBeginEditable name="wdw_btn" --><a href="Watdoenwij.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wdw_btn','','../temp_site/images/Hoofdmenu/Watdoenwij_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Watdoenwij_btn.png" name="wdw_btn" width="120" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td colspan="4"><!-- TemplateBeginEditable name="tar_btn" --><a href="Tarieven.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('tar_btn','','../temp_site/images/Hoofdmenu/Tarieven_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Tarieven_btn.png" name="tar_btn" width="88" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
	        <img src="../temp_site/images/sitelayoutsub_15.png" width="1" height="45" alt=""></td>

	    <td colspan="3"><!-- TemplateBeginEditable name="cont_btn" --><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact_btn','','../temp_site/images/Hoofdmenu/Contact_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Contact_btn.png" name="contact_btn" width="83" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td>
	        <img src="../temp_site/images/sitelayoutsub_17.png" width="1" height="45" alt=""></td>
	    <td colspan="2"><!-- TemplateBeginEditable name="over_btn" --><a href="Overige.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('overige_btn','','../temp_site/images/Hoofdmenu/Overige_03_btn.png',1)"><img src="../temp_site/images/Hoofdmenu/Overige_btn.png" name="overige_btn" width="84" height="45" border="0"></a><!-- TemplateEndEditable --></td>
<td colspan="6">
	        <img src="../temp_site/images/sitelayoutsub_19.png" width="294" height="45" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>

      <td colspan="24">
        <img src="../temp_site/images/Hoofdmenu/Bovenlijn3.png" width="587" height="1" alt="Regent Tekstvlak"></td>
<td colspan="4">
	        <img src="../temp_site/images/sitelayoutsub_21.png" width="251" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
      <td rowspan="3">

        <img src="../temp_site/images/Zijvlakje.png" width="26" height="76" alt="Regent Tekstvlak"></td>
      <td colspan="4"><div id="submenu_01_btn"><!-- TemplateBeginEditable name="sub1_btn" --><img src="../temp_site/images/Submenu/Submenu1_00_btn.png" alt="subje1_btn" width="127" height="45"><!-- TemplateEndEditable --></div></td>
  <td height="25" colspan="5" align="center" valign="middle"><div id="submenu_02_btn"><!-- TemplateBeginEditable name="sub2_btn" --><img src="../temp_site/images/Submenu/Submenu2_00_btn.png" alt="subje2_btn" width="120" height="45"><!-- TemplateEndEditable --></div></td>
  <td colspan="7"><!-- TemplateBeginEditable name="sub3_btn" --><img src="../temp_site/images/Submenu/Submenu3_00_btn.png" alt="subje3_btn" width="120" height="45"><!-- TemplateEndEditable --></td>
<td colspan="4"><!-- TemplateBeginEditable name="sub4_btn" --><img src="../temp_site/images/Submenu/Submenu4_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
      <td colspan="5"><!-- TemplateBeginEditable name="sub5_btn" --><img src="../temp_site/images/Submenu/Submenu5_btn.png" width="120" height="45"><!-- TemplateEndEditable --></td>
      <td><!-- TemplateBeginEditable name="sub6_btn" --><img src="../temp_site/images/Submenu/Submenu6_btn.png" width="119" height="45"><!-- TemplateEndEditable --></td>
      <td height="662" width="86" rowspan="8"><p><img src="../temp_site/images/sitelayoutsub_29.png" width="86" height="662"></p>      </td>
<td>

	        <img src="../temp_site/images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        <img src="../temp_site/images/Tekstvlak-31.png" width="38" height="31" alt="Regent Tekstvlak"></td>
	    <td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub7_btn" --><img src="../temp_site/images/Submenu/Submenu7_btn.png" width="128" height="31"><!-- TemplateEndEditable --></td>
      <td colspan="4" rowspan="2"><!-- TemplateBeginEditable name="sub8_btn" --><img src="../temp_site/images/Submenu/Submenu8_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
      <td colspan="6" rowspan="2"><!-- TemplateBeginEditable name="sub9_btn" --><img src="../temp_site/images/Submenu/Submenu9_btn.png" width="120" height="31"><!-- TemplateEndEditable --></td>
      <td colspan="5" rowspan="2"><!-- TemplateBeginEditable name="sub10_btn" --><img src="../temp_site/images/Submenu/Submenu10_btn.png" width="121" height="31"><!-- TemplateEndEditable --></td>

<td rowspan="2">
	        <img src="../temp_site/images/Tekstvlak-36.png" width="34" height="31" alt="Regent Tekstvlak"></td>
	    <td height="20" width="165" colspan="3">
	        <img src="../temp_site/images/sitelayoutsub_36.png" width="165" height="20" alt=""></td>
  <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
      <td height="597" width="37" rowspan="6"><img src="../temp_site/images/sitelayoutsub_37.png" width="37" height="597" alt=""></td>

  <td height="22" width="128" colspan="2" rowspan="2"><img src="../temp_site/images/Nieuws/nieuwshoofd.png" width="128" height="22" alt="Regent Nieuws"></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
      <td height="519" width="594" colspan="26" rowspan="2"><!-- TemplateBeginEditable name="main_content_area" -->
        <div id="site_layout_content">
          <h2 align="center" class="style9 style10">&nbsp;</h2>
        </div>

      <!-- TemplateEndEditable --></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
      <td height="575" width="128" colspan="2" rowspan="4"><img src="../temp_site/images/Nieuws/nieuwstop_btn.png" alt="nieuwstop" width="128" height="6">
        <div id="Nieuws_01_btn">
          <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
              <span class="style6">Vacature manuele therapie</span></div>

        </div>
        <div class="style1" id="nieuws_02_btn">
          <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span><br>
            <span class="style6">Impuls studio geopend</span></div>
        </div>
        <div class="style3" id="nieuws_03_btn">
          <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12<br>

              </a><em>Nieuwe producten in de webshop</em><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3"><br>
          </a></div>
        </div>
        <div class="style3" id="nieuws_04_btn">
          <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
        </div>
        <div class="style3" id="nieuws_05_btn">
          <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>

        </div>
        <div class="style3" id="nieuws_06_btn">
          <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
        </div>
        <div class="style3" id="nieuws_07_btn">
          <div align="center"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></div>
        </div>
        <div class="style1" id="nieuws_08_btn">

          <div align="center"><span class="style4"><a href="file:///C|/Users/Mathijs/Desktop/Test/1wiezijnwij.dwt" class="style3">Woensdag 18/04/12</a></span></div>
        </div>
      <img src="../temp_site/images/Nieuws/nieuwsdown_btn.png" alt="nieuwsonder" width="128" height="89"></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="304" alt=""></td>
    </tr>
    <tr>
      <th height="67" width="149" colspan="6" rowspan="3" nowrap><img src="../temp_site/images/sitelayoutsub_41.png" alt="" width="149" height="67"></th>
	    <td height="12" width="317" colspan="15"><img src="../temp_site/images/Logo_02.jpg" alt="Regent Logo_02" width="317" height="12"></td>

      <td height="67" width="128" colspan="5" rowspan="3"><img src="../temp_site/images/Index_52.png" alt="" width="128" height="67"></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="216" alt=""></td>
    </tr>
    <tr>
      <td height="55" width="92" colspan="5" rowspan="2" align="center">
        <img src="../temp_site/images/sitelayoutsub_44.png" width="92" height="55" alt=""></td>
<td height="9" width="124" colspan="5" align="center">
	        <img src="../temp_site/images/Copyright1.png" width="124" height="9" alt="Regent Copyright"></td>
<td height="55" width="101" colspan="5" rowspan="2" align="center">

	        <img src="../temp_site/images/sitelayoutsub_46.png" width="101" height="55" alt=""></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="9" alt=""></td>
    </tr>
    <tr>
      <td height="46" width="124" colspan="5" align="center">
        <img src="../temp_site/images/sitelayoutsub_47.png" width="124" height="46" alt=""></td>
<td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="46" alt=""></td>
    </tr>

    <tr>
      <td>
        <img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="4" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="3" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="26" height="1" alt=""></td>

	    <td>
	        <img src="../temp_site/images/spacer.gif" width="32" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="6" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="78" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="11" height="1" alt=""></td>
	    <td>

	        <img src="../temp_site/images/spacer.gif" width="13" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="42" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>

	    <td>
	        <img src="../temp_site/images/spacer.gif" width="14" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="25" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="22" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="24" height="1" alt=""></td>
	    <td>

	        <img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="17" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="39" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="27" height="1" alt=""></td>

	    <td>
	        <img src="../temp_site/images/spacer.gif" width="1" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="53" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="31" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
	    <td>

	        <img src="../temp_site/images/spacer.gif" width="34" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="37" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="9" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="119" height="1" alt=""></td>
	    <td>
	        <img src="../temp_site/images/spacer.gif" width="86" height="1" alt=""></td>

	    <td>
	        <img src="../temp_site/images/spacer.gif" width="28" height="1" alt=""></td>
	    <td></td>
    </tr>
  </table>
... van 252 regels (!) kan allemaal vervangen worden door alleen maar deze regeltjes:
HTML:
<div id="header">
    <h1><span>Impuls Fysiotherapie</span></h1>
    <ul>
    	<li id="hme"><a href="index.html"><span>Home</span></a></li>
    	<li id="wie"><a href="wie.htm"><span>Wie wij zijn</span></a></li>
    	<li id="wat"><a href="wat.htm"><span>Wat wij doen</span></a></li>
    	<li id="tar"><a href="tarieven.htm"><span>Tarieven</span></a></li>
    	<li id="ctc"><a href="contact.html"><span>Contact</span></a></li>
    	<li id="ovr"><a href="overigen.html"><span>Overigen</span></a></li>
    </ul>
</div>

<div id="content">
...
</div>

<div id="rechterkolom">
...
</div>

<div id="voetstuk"><!-- ! --></div>
Dat is twee!

=======
De drie stylesheets site_layout.css, site_layout_content.css en nieuws_01_btn.css plus het ingesloten styleblok in de <head> kunnen door één stylesheet vervangen worden, dat voor alle pagina's bruikbaar is.
  • Bv. dit: imp-styles.css van nog geen 2kB
    (de verdere opmaak voor de content en de rechterkolom kan hieraan toegevoegd worden)
Dat is drie!

=======
De 50 opgesplitste images kunnen vervangen worden door 3 stuks die juist een aantal dingen combineren:
  • Een imp-content-bg.png,
    dat is een strookje dat verticaal herhaald wordt zodat de opmaak niet kapot gaat als er een langere pagina is.
  • Een imp-sprite.png,
    dat is de kop met logo en de menu-tabjes, inclusief al hun hover-varianten, plus de bovenkant van de rechterkolom. Met de eigenschap background-position wordt hier telkens een gedeelte van gebruikt.
  • Een imp-voetstuk-bg.png,
    waar de onderhoekjes in zitten plus het watermerk en de onderkant van de rechterkolom.
Het herhaalstrookje zit onderop, en wordt zo hoog als de pagina nodig heeft. De kop en het voetstuk worden er gewoon overheen geplakt. Klaar!
Dat is vier, vijf en zes!

=======
Meer is er niet nodig!
Want hiermee is ook het modelletje klaar:


  • Test: imp-nw1.htm

  • Er zitten nog 3 pagina's achter, waarmee je kan zien dat met exact dezelfde html-structuur en hetzelfde stylesheet alles goed gaat bij korte en lange pagina's, en bij veel of weinig tekst in de inhoud en/of rechterkolom. Alles gaat vanzelf!
  • Ook gaat vanzelf, dat elke pagina die openstaat, meteen zijn eigen tabblad in het wit laat zien. Dat gebeurt door de <body>-tag een per pagina verschillende class te geven, en dan regelt het zich allemaal vanzelf.

Dus: de tabellen het raam uit, en CSS voor de opmaak = mooie schone en simpele html, en krachtig werkende pagina's.
Voorjaarsschoonmaak!
Is dit genoeg wettig en overtuigend bewijs? ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Als dat geen service is, dan kunnen ze dat woord uit het woordenboek schrappen...:thumb:
 
Hallo csshunter,

Heel erg bedankt voor je uitgebreide antwoord, ik kan weer verder en nu de logge html-code efficiënter en gestroomlijnder maken!
Super :thumb:

Hartelijke groet,

Tieske85
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan