Lay out gemaakt nu goed coderen..

Status
Niet open voor verdere reacties.
V

volcom

Gebruiker
Lid geworden
7 jun 2008
Berichten
83
Beste,

Mijn layout is gemaakt maar nu is mijn vraag hoe het beste te coderen, normaal doe ik het altijd gewoon zeer amateuristisch, via photoshop en dan gewoon dreamweaver dus niks div's ofzo.

Maar nu hebben al veel mensen gezegd dat ik van deze methode moet afstappen.
Kan iemand me zeggen hoe ik deze layout het beste ga coderen en hoe ?

http://kavaljee.be/OUD/voorbeeld.jpg

Bvb,
Volcom
 
Ik zou gewoon voor een table gaan? Of misschien meerdere tables?

Zo kun je voor de header, het menu en de main body een aparte table maken, of ze alle 3 in een table gooien met tr's en td's.

Voor de footer onderaan is een DIV waarschijnlijk beter, maar met een table proberen kan natuurlijk altijd

Dit is allemaal niet erg moeilijk, kijk anders eens op http://w3schools.com/html/default.asp
 
Laatst bewerkt:
Naarling zei:
Waarom adviseer je iets dat al jaren ten strengste wordt afgeraden?


Dat is dan wel weer goed advies.

Wat de originele vraag betreft, ik zal even knutselen en het resultaat later hier neerzetten.
Klik om te vergroten...

En wie raad dit dan al jaren af vraag ik me dan af? Naar mijn mening zijn tables nog altijd het handigste voor iets simpels als dit, en al helemaal als je niet al te veel ervaring hebt met html.

Het enige wat ik 'al jaren' zou afraden zijn frames, maar dat is mijn mening.


EDIT: en hey als je hier de pagina bron bekijkt zie je ook dat hier nog gebruik gemaakt word van tables, wel in combinatie met div's uiteraard. maar dan nog ;)
 
Laatst bewerkt:
Tabellen voor lay-out worden al jaren afgeraden door vrijwel elke profesionele sitemaker. w3c bijvoorbeeld raadt ze ook af. Tig organisaties voor toegankelijkheid raden ze af. De officiële webrichtlijnen van de overheid voor Nederlandse sites verbieden ze, evenals die van bijvoorbeeld de Amerikaanse overheid en nog tig andere landen. En zo is de lijst eindeloos aan te vullen.
De reden daarvan is dat tabellen volstrekt ontoegankelijk zijn voor mensen met bijvoorbeeld 'n spraakbrowsers. Verder leveren ze 'n zeer grote kans op 'n zeer lage plaats in zoekmachines. 'n Tabel wordt gelezen van links naar rechts. Probeer maar 'ns 'n krant te lezen van links naar rechts, niet van kolom naar kolom. Dus per horizontale regel. Dat is wat 'n spraakbrowser (en dus ook de spider van Google) zien. Complete wartaal dus.
Tabellen zijn bedoeld voor cijfers e.d., niet voor lay-out.
Geneste tabellen zijn 'n nachtmerrie om te onderhouden. Bij elke kleine wijziging heb je kans dat 't kaartenhuis volledig in elkaar stort.
Als je divs e.d. gebruikt, die speciaal zijn bedoeld voor lay-out, kun je zeer makkelijk wijzigingen aanbrengen.
't Gaat ook niet om meningen: dit zijn gewoon feiten. 't Afraden van frames is ook geen mening: frames zijn gewoon hopeloos. In html5 zijn ze helemaal verboden (behalve iFrames met veel meer beperkingen dan nu), ongeacht wat iemand ervan vindt.
Maar met 'n heel klein beetje googelen vind je zelf bergen mensen en organisaties die tabellen afraden, en slechts nog 'n enkeling die er enthousiast over is.
 
Juist, daarom dus.

Het was een beetje een haastklus, had niet veel tijd, maar hier is het resultaat van het klussen.
Je kunt onderstaande gewoon naar een leeg tekstdocument kopiëren en dat opslaan als droogkuis.html o.i.d. met Notepad of een andere simpele tekstverwerker. Niet met Word dus, dat voegt eigen opmaak toe die niet in HTML thuishoort.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Droogkuis</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#envelop{
    width:800px;
    margin:0 auto;
}
h1{
    text-align:center;
    background-color:silver;
}
#menubalk{
    background-color:white;
    
}
#menu{
    margin:0 0 0 50%;
    float:left;
}

#menu ul{
    padding:0;
    margin:0 0 0 -50%;
    list-style:none;
}
#menu li{
    padding-right:5px;
    margin:0;
    display:inline;
}
#inhoud{
    clear:both;    
    background-color:silver;
    padding:10px;
}

h2{
    background-color:gray;
    padding:3px;
    display:inline-block;
    margin-left:-50%;
}
#kopje{
    float:left;
    margin-left:50%;
}

#inhoud p{
    width:600px;
    clear:left;
}
.plaatje{
    width:150px;
    height:150px;
    background-color:yellow;
}
.plaatje-rechts, .plaatje-rechts{
    float:right;
}

#voet{
    text-align:center;    
}
</style>
</head>
<body>
<div id="envelop">
<div id="kop">
    <h1>Uw Partner in professionele reiniging</h1>
</div>

<div id="menu">
     <ul>
        <li><a href="info.html">Info</a></li>
        <li><a href="diensten.html">Diensten</a></li>
        <li><a href="prijslijst.html">Prijslijst</a></li>
        <li><a href="route.html">Route</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>

</div>
<div id="inhoud">
    <div id="kopje">
    <h2>Info</h2>
    </div>
    <div class="plaatje plaatje-rechts"></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
    <div class="plaatje plaatje-rechts"></div>
    <div class="plaatje plaatje-links"></div>
</div>
<div id="voet">
    <p>Dit is een voettekst</p>
</div>
</div>
</body>
</html>
In dit voorbeeld heb ik voor het gemak de CSS in het HTML document gezet maar in het echt hoort dat natuurlijk in een apart bestand zodat het makkelijk op iedere pagina toegepast kan worden. De drie gele divjes moeten er uiteindelijk natuurlijk ook uit, die zijn alleen maar om te laten zien hoe je plaatjes in de tekst zou kunnen plaatsen en positioneren. Het kan best zijn dat er voor een aantal problemen elegantere oplossingen zijn maar meer tijd om er dieper over na te denken had ik even niet
 
hmmm ,, hoe moet ik het dan doen met mijn design ? Hoe zal ik het moeten gaan slicen?
 
Je maakt bijvoorbeeld div#kop zo hoog, dat de afbeelding met Droogkluis Castermans en de kledingstukken erin passen, boven de kop. Als afbeelding (<img>, of als achtergrond-afbeelding). De achtergrond van div#kop geef je dan 'n kleur grijs.
Je blauwe knoppen komen in de <li>'s binnen de ul in div#menu. Je kunt gewoon je knoppen gebruiken, maar met als alt-tekst of title bij de href ook de links (anders ziet 'n spraakbrowser en dus ook Google ze niet, want die 'zien' geen plaatjes).
De drie afbeeldingen zet je in de divs met class='plaatje'.
Enz.
De body kun je ook grijs maken, dan heb je gelijk je achtergrondkleur.
't Is even wennen als je tabellen gewend bent, maar 't is uiteindelijk veel makkelijker en flexibeler, beter te onderhouden en helpt 'n hogere plaats in 'n zoekmachine te krijgen.

Edit: wat ik dus vergeet: je 'slicet' niet de hele pagina, maar pikt gewoon de bijzondere stukjes uit je ontwerp, zoals de kop en de afbeeldingen. En die poot je met behulp van divs e.d. op de juiste plaatsen neer.
 
Laatst bewerkt:
De plaatjes zijn nu weg.
Zou naarling misschien nog even iets nieuws willen maken? :o
 
Plaatjes invoegen doe je met <img src="locatievanhetplaatje/wasmachine.jpg" alt="dit is een plaatje van een wasmachine">. Om ze op de goede plek te krijgen kun je er een class aan meegeven, op dezelfde manier als ik in het voorbeeld boven met de spans heb gedaan.
Hier en hier zijn trouwens twee goede online cursussen voor HTML en CSS te vinden. De eerste is in het Nederlands, de tweede in het Engels.
 
Het zou leuk zijn als je zelf ook wat inzet toonde...

Maargoed: je moet eerst de keuze maken hoe je wilt "slicen" - maw elke knop los en een losse header of alles in één keer in combinatie met een imagemap. Een voorbeeld (hier live te zien):
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Droogkuis</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			#envelop{
				width:1027px;
				margin:0 auto;
			}
			#kop img {
				border: none;
			}
			#inhoud{
				background-color:#E1E1E1;
				padding:10px;
				margin-top:5px;
			} 
			#voet{
				text-align:center;
				margin:2em;
			}
			.voet {
				background-color:#F4F4F4;
				padding:1em;
			}
		</style>
		</head>
	<body>
		<div id="envelop">

			<div id="kop">
				<img src="header.gif" usemap="#headermap" width="1027" height="244" alt="" />
				<map name="headermap" id="headermap">
					<area shape="rect" coords="734,176,891,236" href="?p=contact" alt="contact" title="contact" />
					<area shape="rect" coords="582,176,701,236" href="?p=route" alt="route" title="route" />
					<area shape="rect" coords="420,176,545,236" href="?p=prijslijst" alt="prijslijst" title="prijslijst" />
					<area shape="rect" coords="231,176,388,236" href="?p=diensten" alt="diensten" title="diensten" />
					<area shape="rect" coords="110,176,198,236" href="?p=info" alt="info" title="info" />
				</map>

			</div>
			<div id="inhoud">
				<h2>Info</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
			</div>

		</div>
		<div id="voet">
			<p><span class='voet'>Droogkuis Castermans &amp; Jasper Vlayen &copy; 2010</span></p>
		</div>
	</body>
</html>
 
Mogelijk is er ook 'n beetje 'n misverstand. Als je met slicen bedoelt dat je de hele afbeelding, dus helemaal compleet, in stukjes gaat hakken en die stukjes dan als achtergrond overal neer gaat zetten: dat is een volstrekt achterhaalde techniek die in 99 van de 100 gevallen hartstikke verkeerd is. Die techniek stamt uit de tijd van tabellen voor lay-out, iets dat al tien jaar wordt afgeraden omdat het waanzinnig veel nadelen heeft.
Tegenwoordig (nou ja, al meer dan tien jaar dus) stop je alleen in afbeeldingen wat echt nodig is. Zoals bij jou de header.
Dat ellendige veel te veel slicen is, net zoals tabellen en frames, helaas niet van internet af te knuppelen, maar 't is echt volkomen achterhaald.
 
Hey flits,
Bedankt.
En ik probeer zeker wel, alleen is divs helemaal nieuw voor mij.
Maar flits er gaan wel stukken van de layout verloren he, hoe recupereer ik dat?
 
Als divs en zo helemaal nieuw voor je zijn, is het misschien 'n idee om even 'n gratis korte cursus te volgen. Daarin komen dingen wat gestructureerder dan via vragen aan bod. Dan heb je in ieder geval de basiskennis en zijn dingen waarschijnlijk veel duidelijker, waardoor je ook veel gerichter dingen kan vragen en zo.
'n Goede Nederlandstalige cursus staat op http://www.web-garden.be/
en 'n net nog 'n heel klein beetje betere Engelstalige op http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan