Geplaatst door crazyheels
Hoewel dat anker gedoe me nog niet helemaal duidelijk is...het kwartje valt daar nog niet...komt wel.
Nog een klein voorbeeldje dan ter verduidelijking:
Stel, iemand heeft op een webpagina de beschrijving van 5 artikelen staan:
Beschrijving Artikel 1
Beschrijving Artikel 2
Beschrijving Artikel 3
Beschrijving Artikel 4
Beschrijving Artikel 5
Als de bezoeker in de inhoudsopgave op een artikel klikt moet hij direct bij de bijbehorende beschrijving uitkomen. Daarvoor geef je elke artikelbeschrijving zijn eigen anker:
<a name="beschrijving_artikel_1"></a>
Beschrijving Artikel 1
<a name="beschrijving_artikel_2"></a>
Beschrijving Artikel 2
<a name="beschrijving_artikel_3"></a>
Beschrijving Artikel 3
<a name="beschrijving_artikel_4"></a>
Beschrijving Artikel 4
<a name="beschrijving_artikel_5"></a>
Beschrijving Artikel 5
De links naar die plaatsen zien er dan zó uit:
<a href="#beschrijving_artikel_1">Artikel 1</a>
<a href="#beschrijving_artikel_2">Artikel 2</a>
<a href="#beschrijving_artikel_3">Artikel 3</a>
<a href="#beschrijving_artikel_4">Artikel 4</a>
<a href="#beschrijving_artikel_5">Artikel 5</a>
Dus als je in dit voorbeeld op Artikel 4 klikt spring je naar het anker <a name="beschrijving_artikel_4"></a>. Bovenaan de pagina wordt nu datgene getoond wat direct na dat anker komt. En dat is de beschrijving van Artikel 4.
Je hebt zoiets ongetwijfeld weleens gezien. Vaak staat er dan ook na elke beschrijving een link met "Terug naar inhoudsopgave." Dat werkt uiteraard op dezelfde manier. Stel dat die inhoudsopgave op een andere pagina staat - bijv. home.htm.
Vlak daarvoor maak je dan in de html een anker, bijv.
<a name="inhoud"></a>.
De link terug wordt dan:
<a href="home.htm/#inhoud">Terug naar inhoudsopgave</a>.
Geplaatst door crazyheels
wil je nog eens kijken en je eerlijke mening vertellen.
Het maakt eerlijk gezegd een nogal rommelige indruk, maar dat begrijp ik best.
Je bent hier heel enthousiast aan begonnen, maar niet met een duidelijk vooraf opgesteld ontwerp.
(Zo ben ik overigens ook begonnen. Mijn eerste site maakte ik min of meer per ongeluk toen ik in Word aan het uitvogelen was wat je met hyperlinks kunt doen. Van een ontwerp was natuurlijk geen sprake, maar ik vond het al fantastisch dat ik ook iets op internet kon zetten.
)
Ik zou dit als een soort oefenperiode beschouwen: probeer zoveel mogelijk uit wat je met NVU allemaal kunt doen, raak een beetje vertrouwd met html, experimenteer met IrfanView om je foto's optimaal te krijgen (de best mogelijke kwaliteit bij de kleinst mogelijke bestandsgrootte), kijk eens wat je met tabellen kunt doen, etc.
Kortom, ga maar eens lekker rommelen met die programma's.
Dan komt er op een gegeven moment vanzelf een punt dat je denkt, "Dit kan ik een stuk beter krijgen." (Of: "Ik heb er nu zo'n chaotisch geheel van gemaakt dat ik maar eens opnieuw begin."
)
Vervolgens ga je een nieuw ontwerp op papier zetten: Bepaal welke kleuren je gaat gebruiken en welk lettertype. Zet navigatieknoppen bij voorkeur allemaal naast elkaar bovenaan de pagina. Tekst op de knoppen zo groot/klein dat er geen stukjes onzichtbaar zijn. Bedenk een mooie lay-out voor tekst- en fotopagina's etc.
Kijk ook eens op sites van andere bands; misschien brengt dat je op ideeën.
Aan de hand van het ontwerp weet je dan ook welke afbeeldingen je gaat gebruiken. Die optimaliseer je voor het web en vervolgens zet je ze in een map in je hoofdmap die je
afbeeldingen of
images noemt; momenteel heb je alle afbeeldingen tussen de html-documenten staan, wat behoorlijk onoverzichtelijk kan gaan worden als de site wat groter wordt.
En nog een paar tips:
- Link niet naar losse foto's - bijv.
<a href="foto_jean.jpg">. Je afbeelding wordt dan in een leeg, wit browservenster getoond, wat niet echt mooi is; gebruik ankers bij de foto's op de pagina's.
- Wacht nog maar even met links naar muziekbestanden; bij de methode die je nu gebruikt duurt het veel te lang voordat de muziek gaat spelen - zelfs bij een adsl-verbinding. Bovendien zit je daarna tegen een witte pagina met een - in mijn geval - QuickTime Playerbalkje aan te kijken.
Er is een manier om door een klik op de knop direct muziek te horen, maar daar komen Flash en streaming audio bij kijken. Dat lijkt me momenteel nog een beetje te hoog gegrepen.
-
Deze website is het best te bekijken met een Mozilla Firefox browser.
Uiteindelijk moet de site natuurlijk in elke browser goed te bekijken zijn.
Hiervoor raad ik je aan met tabellen te werken (er bestaan nauwelijks websites die hier geen gebruik van maken). Met al die spaties in je code kun je nooit een goede lay-out krijgen.
Maak je bijvoorbeeld op elke pagina een tabel met een vaste breedte van 760 pixels, die je in het midden plaatst, dan zal die pagina op elke schermresolutie vanaf 800 x 600 pixels op dezelfde manier worden weergegeven. Natuurlijk is er op een resolutie van 1024 x 768 dan wat meer ruimte aan de linker- en rechterkant, maar de lay-out blijft exact gelijk.
Op een lagere resolutie dan 800 x 600 blijft die lay-out ook gelijk, maar er verschijnt dan een horizontale schuifbalk omdat de tabel te breed is. (Maar wie heeft er nu nog een resolutie van 640 x 480?)
Er zijn veel grote websites die een vaste breedte gebruiken -
de BBC bijvoorbeeld, al hebben ze er daar voor gekozen de inhoud rechts te plaatsen i.p.v. in het midden.
Plak het volgende voorbeeldje maar eens in Kladblok, sla het op als tabel.html en bekijk het resultaat in IE en Firefox op verschillende resoluties.
<html>
<head>
<title>Tabel</title>
</head>
<body>
<div align="center">
<table width="760" border="1" cellpadding="5">
<tr>
<td width="110">Hier komt bijvoorbeeld een logo te staan</td>
<td width="650">En hier een kop of titel</td>
</tr>
<tr>
<td colspan="2"><br>En hier komt de volgende lap tekst.<br><br>
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla<br><br>
Vervolgens kun je natuurlijk nog veel meer rijen aan dit voorbeeld toevoegen, verdeeld in zoveel cellen als je wilt, waarin je dan weer tekst of afbeeldingen plaatst.<br><br>
Op die manier bepaal je de lay-out van tevoren.<br><br>
In de ontwerpfase laat je de rand van de tabel zichtbaar (border="1").
Als alles af is verander je de 1 in 0 en zijn de randen niet meer zichtbaar.
</td>
</tr>
</table>
</div>
</body>
</html>
Een andere mogelijkheid is de tabelbreedte op 100% te zetten. (table width="100%") Hij wordt dan op ELKE resolutie over de hele breedte van het scherm getoond.
Logischerwijs wordt de lay-out in de lengte hierbij aangepast.
Je zult in dat geval dus regelmatig op verschillende resoluties moeten kijken of alles er nog wel uitziet zoals je bedoeld had.
Succes maar weer. :thumb:
Guus.
