Ég las grein hérna um að það þyrfti að lífga upp áhugamálið svo ég áhvað að skrifa smá grein hérna, gjöriði svo vel. Það er gert ráð fyrir því að þú kunnir eitthvað í CSS/HTML þegar þú lest þessa grein.

Margir kannast kannski við það að nota töflur á fullu til að halda öllu til haga og skipuleggja, en þá er verið að nota töflurnar í annað en þær voru upprunalega ættlaðar í. <i>table</i> taggið er eingöngu ættlað til þess að halda utan um gögn, ekki til þess að afmarka “tenglasvæði” og skipta síðuni upp með töflum til að skipuleggja útlitið á henni.

En hvernig á þá að skipuleggja síðuna til þess að hún líti vel út ? Það eru nokkrar leiðir, það er hægt að nota CSS og búa til dálka, síðan er hægt að nota <i>div</i> taggið til að setja hluti á sinn stað. Ég ættla sýna smá dæmi um hvernig má nota CSS og <i>div</i> taggið til að gera dálkana:

&lt;div id=&quot;banner&quot;&gt;
&lt;div id=&quot;leftcontent&quot;&gt;
&lt;div id=&quot;centercontent&quot;&gt;
&lt;div id=&quot;rightcontent&quot;&gt;

Þegar við höfum komið þessu fyrir þá getum við sett eftirfarandi CSS kóða í skjalið til þess að staðsetja þetta :

body {
/* Hversu langt skulu dálkarnir vera frá brún*/
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
/* Staðsetning og stillingar fyrir vinstri-dálkinn */
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}

#centercontent {
/* staðsetning og stillingar fyrir miðju-dálkinn */
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;

voice-family: “\”}\“”;
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

#rightcontent {
/* staðsetning og stillingar fyrir hægri-dálkinn */
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}

#banner {
/* staðsetning og stillingar fyrir topp-dálknum */
background:#fff;
height:40px;
border-top:1p x solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: “\”}\“”;
voice-family: inherit;
height:39px;
}
html>body #banner {
/* hæðinn á topp-dálknum */
height:39px;
}

Ef mér skjátlast ekki þá ættu þið að vera kominn með fjóra dálka, ein topp dálk og þrjá sem hanga niður úr honum ( ef þú sért ekki farðu yfir kóðan aftur og tékkaðu á því hvort þú hafir nokkuð gleymt að loka einhverjum töggum ). Prufaðu líka að setja texta á í <i>div</i> töggin og sjá hvernig það kemur út. Þetta er nokkuð sniðugt ekki satt.

Vona að þið hafið skilið þetta :). En næst á dagskrá er það hvernig á að gera þetta á auðveldan hátt í Dreamweaver. <a href="http://www.macromedia.com/devnet/mx/dreamweaver/ articles/tableless_layout.html“ target=”_blank">Hér</a> er grein á þeirra eigin síðu. En í stuttu máli sagt þá geturu smellt á Insert > Layout Objects > Layer síðan geturu fært þetta fram og til baka og setta einn ofan á annan, með þessu er hægt að skipuleggja síðuna algjörlega ( þetta á við um Dreamweaver MX 2004 ).

Þetta er bara stutt kynning ég vona að þið lítið betur á þetta, afar þægilegt og á eftir að límast við ykkur.

Til stjórnenda: ef sýni töggin ( div ) fer í klessu þarna efst þá vinnsamlegast bara sleppið að pósta þessari grein og látið mig vita, svo má annars bara fjærlægja þessa línu :)