Creëeren van tijdlijn in Dreamweaver, hoe het best?

[Verwijderd]

Ik ben op school bezig met een afsluitende opdracht voor ANW. Hierbij moet ik een werkstuk maken over Semmelweis. Info over de persoon heb ik zat; enkel ik heb een probleempje. Ik moet een website maken die een (chronologische) tijdlijn laat zien. Het moet er ongeveer alsvolgt uit komen te zien:



Ik moet vervolgens op de gebeurtenissen (Geboorte; onderzoeken; dood) kunnen klikken en een popup naar voren krijgen met wat meer info (waar wanneer geboren etc.). Ik kan gewoon dit plaatje in dreamweaver bewerken met hotspots en toewijzen aan popups; maar dan zie je niet wanneer je iets selecteert. Geboorte moet rood worden oid. Hoe kan ik dit het beste maken in Dreamweaver? Zijn er programmas die dat makkelijk maken? Flash is niet aan de orde aangezien het gewoon HTML moet zijn.

Alvast bedankt

offtopic:
Ik vraag jullie geen echte hulp bij het huiswerk...en hoop dus ook dat dit niet zo wordt opgevat.

[faabman]

Als het geen semantisch correcte html hoeft te zijn dan zou ik gewoon met fireworks aan de gang gaan en dan een html-export genereren...

[Geert.H]

eensch met faabman
Nog even een uitbreiding op faabman.
Je gaat naar fireworks, en je gaat de lessen volgen. Daar staat precies beschreven hoe je zo iets moet doen. Lukt het niet, dan ram je op F1, en gebruik je de help. Dan moet je er wel uit zien te komen.

Vervolgens exporteer je het naar html, en dat zet je in wepsijt, en klaar is de spreekwoordelijke kees.

edit:
typo

[ Voor 5% gewijzigd door Geert.H op 10-04-2005 23:51 ]

[Verwijderd]

Ik ga het vandaag even proberen. Bedankt.

[Verwijderd]

wat is er mis met semantisch correcte HTML? lijkt me juist de uitdaging om dit in een dl te stoppen:

code:

<dl id="tijdlijn">
  <dt>1818</dt>
  <dd>Geboorte</dd>
</dl>

vervolgens met js die lijst doorlopen, de dt's eruit pikken en vertalen naar een x positie, de dd's een border geven en een berg padding en op die plek neerzetten.

edit: de opstarter voor vandaag:
http://www.rikkertkoppes.com/troep/tijdlijn.htm

[ Voor 31% gewijzigd door Verwijderd op 11-04-2005 09:30 . Reden: typo ]

[Verwijderd]

Verwijderd schreef op maandag 11 april 2005 @ 08:56:
wat is er mis met semantisch correcte HTML? lijkt me juist de uitdaging om dit in een dl te stoppen:

code:

<dl id="tijdlijn">
  <dt>1818</dt>
  <dd>Geboorte</dd>
</dl>

vervolgens met js die lijst doorlopen, de dt's eruit pikken en vertalen naar een x positie, de dd's een border geven en een berg padding en op die plek neerzetten.

edit: de opstarter voor vandaag:
http://www.rikkertkoppes.com/troep/tijdlijn.htm

Heel vet; maar

[Verwijderd]

wat ? dit is imho wel superbasic js en html, moet je toch wel mee vooruit kunnen?

[Verwijderd]

Verwijderd schreef op maandag 11 april 2005 @ 11:16:
wat ? dit is imho wel superbasic js en html, moet je toch wel mee vooruit kunnen?

Heb nog nooit met js gewerkt; verwacht ook niet dat ik hier ermee geholpen wordt (zal ik zelf wel doen ) ; maar het moet morgen af .

[Zoefff]

Verwijderd schreef op maandag 11 april 2005 @ 11:16:
wat ? dit is imho wel superbasic js en html, moet je toch wel mee vooruit kunnen?

Het is waarschijnlijk dat de TS het in IE bekijkt. En *tromgeroffel* die ondersteund hover alleen voor het element a, en niet (zoals FF) voor bijna alle elementen

Maar, (@ TS) wat mophor doet lijkt me wel de makkelijkste oplossing. Inderdaad een lijst of desnoods allemaal losse div's maken, en die stuk voor stuk positioneren. Dat is even werk, maar geeft imho wel het netste resultaat.

[Verwijderd]

ik zou zeggen dat de js zo'n beetje klaar is voor je, waarschijnlijk wil je nog wat spelen met css ofzo
d'r zal idd nog wel ff een a in moeten voor de popup, dus dan kan je die :hover ook daarheen verplaatsen, heb je dat ook weer opgelost voor IE. Verder is het natuurlijk vooral een kwestie van slimme vormgeving om die labels goed zichtbaar te maken.

natuurlijk ga ik geen kant en klare oplossing bakken

[Verwijderd]

Zoefff schreef op maandag 11 april 2005 @ 11:20:
[...]

Het is waarschijnlijk dat de TS het in IE bekijkt. En *tromgeroffel* die ondersteund hover alleen voor het element a, en niet (zoals FF) voor bijna alle elementen

Maar, (@ TS) wat mophor doet lijkt me wel de makkelijkste oplossing. Inderdaad een lijst of desnoods allemaal losse div's maken, en die stuk voor stuk positioneren. Dat is even werk, maar geeft imho wel het netste resultaat.

Ik gebruik wel gewoon FF maar ben niet ervaren met scripten..

[Zoefff]

Zoiets dan, met allemaal DIV-jes en wat CSS:

HTML:

<div id="container">
    <div id='geboorte'>
        <div id='geboorte_content'>
            <a href='#'>Geboorte</a>
        </div>
    </div>
    <div id='onderzoek_1'>
        <div id='onderzoek_1_content'>
            <a href='#'>Eerste onderzoek</a>
        </div>
    </div>
    <div id='onderzoek_2'>
        <div id='onderzoek_2_content'>
            <a href='#'>Tweede onderzoek</a>
        </div>
    </div>
    <div id='onderzoek_3'>
        <div id='onderzoek_3_content'>
            <a href='#'>Derde onderzoek</a>
        </div>
    </div>
    <div id='dood'>
        <div id='dood_content'>
            <a href='#'>Dood :'(</a>
        </div>
    </div>
</div>

Cascading Stylesheet:

body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:13px;
    font-weight:bold;
    color:#CCCCCC;
    background-color:black;
}
a {
    color:#CCCCCC;
    font-weight:bold;
    text-decoration:none;
}
a:hover {
    color:#FF0000;
}
#container {
    margin-left: -300px;
    left: 50%;
    position:absolute;
    width: 600px;
}
#geboorte {
    height:400px;
    position:absolute;
    border-left:2px solid gray;
}
#geboorte_content {
    position:absolute;
    top:385px;
    padding-left:3px;
}
#onderzoek_1 {
    height:400px;
    position:absolute;
    left:100px;
    border-left:2px solid gray;
}
#onderzoek_1_content {
    position:absolute;
    top:385px;
    padding-left:3px;
}
#onderzoek_2 {
    height:400px;
    position:absolute;
    left:150px;
    border-left:2px solid gray;
}
#onderzoek_2_content {
    position:absolute;
    top:370px;
    padding-left:3px;
}
#onderzoek_3 {
    height:400px;
    position:absolute;
    left:200px;
    border-left:2px solid gray;
}
#onderzoek_3_content {
    position:absolute;
    top:355px;
    padding-left:3px;
}
#dood {
    height:400px;
    position:absolute;
    left:350px;
    border-left:2px solid gray;
}
#dood_content {
    position:absolute;
    top:385px;
    padding-left:3px;
}

Geeft een resultaat zoals dit: http://zoefff.gotdns.com/got/tijdlijn.htm

Daar moet je toch wel mee uit de voeten kunnen

[Verwijderd]

ieks, smurfentaal

geef dan elke dd een id, kan de css verder hetzelfde blijven.
wat is er in hemelsnaam mis met een beetje semantiek?

[faabman]

Verwijderd schreef op maandag 11 april 2005 @ 12:06:
wat is er in hemelsnaam mis met een beetje semantiek?

Niks natuurlijk . Maar zoals ik in het begin al probeerde aan te geven kun je in sommige gevallen beter even terugvallen op een techniek die je al beheerst / de techniek waarmee je zelf denkt het snelste bij je doel te komen. Een ANW (school) project zal niet worden beoordeelt op de broncode, maar eerder op de manier waarop het er uit ziet. Wanneer je dan van jezelf denkt het snelst klaar te zijn door in een grafische app aan het werk te gaan en een html-export te maken, dan kan je dat beter doen als jezelf eerst een nieuwe techniek aanleren en daardoor je deadline mislopen.

De oplossing van mophor is natuurlijk wel de beste

[Zoefff]

Niets, maar wellicht dat de TS dit makkelijker vind

[Verwijderd]

Ik ben nu bezig in Fireworks; gaat wel lukken denk ik. Heb nu gewoon van de gebeurtenissen slices gemaakt en vervolgens alles als html opgeslagen. In dreamweaver vervang ik dan de slices (gifs) met door een rolloverimage (in photoshop het 2e plaatje gemaakt). Is dit de beste manier of kan ik in fireworks al rollover images aanmaken?

[ Voor 12% gewijzigd door Verwijderd op 11-04-2005 13:13 ]

[Verwijderd]

Kleine update:
Heb inmiddels een beetje met fireworks en dreamweaver aangekloot. Dit is het resultaat: http://www.annemiekevanrosmalen.nl/anw%20test/biografie.htm

Nu wil ik dus op die verschillende gebeurtenissen kunnen klikken. Er moet dan een popup oid tevoorschijnkomen die meer info geeft. Soms zie je op sites dat woorden als computer worden onderlijnd en als je er over heen gaat krijg je een soort van reclame als : "Computers; new and used; click here" . Zoiets zou wel handig zijn. Een popup mag ook als bovenstaande te moeilijk is.
Dit is de info:
http://www.annemiekevanro...t/Biografieuitgebreid.htm

Als ik dan op een gebeurtenis klik wil ik het liefste precies uitkomen op de gebeurtenis zelf en niet aan het begin van de pagina (hier niet van toepassing; maar bij andere informatie wel.).

Nog tips ?

[lucaspr]

Je weet waarschijnlijk hoe je een link moet maken in html, als je daar TARGET=_new aan toe voegd krijg je een pop up! slecht voorbeeld ()
<a href=http://www.ikweethetnietmeer.nl TARGET=_new>detekstwaarjeopklikt</a>

of je doet het met verschillende classes, dat kan ook, maar daar zullen anderen waarschijnlijk weer meer van weten!!
Succes!!

[Rowanov]

lucaspr schreef op maandag 11 april 2005 @ 15:05:
Je weet waarschijnlijk hoe je een link moet maken in html, als je daar TARGET=_new aan toe voegd krijg je een pop up! slecht voorbeeld ()
<a href=http://www.ikweethetnietmeer.nl TARGET=_new>detekstwaarjeopklikt</a>

of je doet het met verschillende classes, dat kan ook, maar daar zullen anderen waarschijnlijk weer meer van weten!!
Succes!!

dus...

Ik zou dit dan gebruiken, want wat hierboven staat klopt van geen kant:

HTML:

<a href="http://whatever" target="_blank"> LINK </a>

[ Voor 13% gewijzigd door Rowanov op 11-04-2005 15:11 ]

[Verwijderd]

werkt, allebei, alleen in het eerste geval gaat je nieuwe window "_new" heten, en zullen andere links met dat target ook in dat scherm openen, in het tweede geval opent ie een vers scherm elke keer (zonder naam)

@Holleboomer: je gaat toch niet serieus zeggen dat je dit overzichtelijker vind dan mijn voorbeeldje? Als je het niet met js wilt/kan oplossen, maak dan een combinatie van mijn html en Zoefff's css.

Als je een website moet maken als afsluitende opdracht, moet dat neem ik aan wel een beetje fatsoenlijk in elkaar zitten, anders heb je vrij weinig van dat vak geleerd imho

[ Voor 49% gewijzigd door Verwijderd op 11-04-2005 15:20 ]

[sPENKMAN]

Ik neem dat de beste kerel geen 200 jaar oud is geworden? Zou je dan de tijdlijn in het plaatje niet verkleinen naar wat relevantere data? Op deze manier staan de gegevens namelijk erg op een kluitje.

[Rowanov]

Verwijderd schreef op maandag 11 april 2005 @ 15:17:
werkt, allebei, alleen in het eerste geval gaat je nieuwe window "_new" heten, en zullen andere links met dat target ook in dat scherm openen, in het tweede geval opent ie een vers scherm elke keer (zonder naam)

Dan neemt niet weg dat zijn voorbeeld nergens op leek omdat de quotes ontbraken en hij hoofdletters gebruikt in zijn attribuut naam. Als je al hoofdletters gebruikt, doe het dan consequent.

[Verwijderd]

is niks mis mee in html, 't is gruwelijk lelijk en onoverzichtelijk en bad practice, dat wel, maar dik in orde hoor

[Rowanov]

Verwijderd schreef op maandag 11 april 2005 @ 15:28:
is niks mis mee in html, 't is gruwelijk lelijk en onoverzichtelijk en bad practice, dat wel, maar dik in orde hoor

Dat bedoelde ik, alleen bracht ik het wat onhandig

Ik vraag me eigenlijk wel af hoever te TS nu is met de aangedragen oplossingen...

[Verwijderd]

Dit is het uiteindelijke resulataat geworden:

http://www.annemiekevanrosmalen.nl/ANW/start.htm
Bedankt voor de tips; ik zal me wat gaan verdiepen in java etcetera.

[ Voor 7% gewijzigd door Verwijderd op 12-04-2005 15:43 ]

[Verwijderd]

hmz, ik wil niet vervelend zijn, maar als iemand van mijn cursus als afsluitende opdracht met zo'n html aankomt geef ik 'm terstond z'n geld terug en ga huilend aankloppen bij het uitzendbureau.

leren ze dit serieus aan tegenwoordig?

[under-world]

Navigatie onder FF is idd bedroevend. Ziet er opzich leuk uit daar niet van maar met zo'n uiterlijk verwacht ik wat meer interactie of animatie van elementen maar dat komt niet. Bijvoorbeeld een tijdlijn waar de content per element als mouseevent naar voren komt zetten ofzo. Voor dit soort ideetjes is Flash ook zeer geschikt. Ligt een beetje aan de omvang van de content.

[MuddyMagical]

sPENKMAN schreef op maandag 11 april 2005 @ 15:25:
Ik neem dat de beste kerel geen 200 jaar oud is geworden? Zou je dan de tijdlijn in het plaatje niet verkleinen naar wat relevantere data? Op deze manier staan de gegevens namelijk erg op een kluitje.

En ikke maar denken dat ik de enige was die er zo over dacht!
Is leuk hoor dat je van 1700 tot 1900 kan zien of er iets is gebeurd, maar echt relevant is het niet.
Is net zoiets als het verloop van de 2e wereldoorlog te laten zien op een tijdslijn vanaf 13 Januari 1491 tot 24 maart 2179.

[faabman]

Verwijderd schreef op dinsdag 12 april 2005 @ 14:34:
hmz, ik wil niet vervelend zijn, maar als iemand van mijn cursus als afsluitende opdracht met zo'n html aankomt geef ik 'm terstond z'n geld terug en ga huilend aankloppen bij het uitzendbureau.

leren ze dit serieus aan tegenwoordig?

Volgens mij gaat het om een opdracht voor het vak Algemene Natuur Wetenschappen op het voortgezet onderwijs... Vraag me af of daar een cursus html aan verbonden is...

[ Voor 4% gewijzigd door faabman op 12-04-2005 15:28 ]

[Verwijderd]

/me wordt oud..., vroeger hadden we nog gewoon natuurkunde en scheikunde.

maar dan vraag ik me af waarom je een html document moet bouwen als het daar geen donder mee te maken heeft. Anyways, als de opdracht is het bouwen van een html document, lijkt het me dat daar ook op beoordeeld wordt en dan geef ik de TS weinig punten op dat gebied. Als je er toch niet op beoordeeld wordt, dan boeit het idd niet zo heel veel allemaal, zorg dan voor goede info over onze medicijnman

[Verwijderd]

Ik heb m een beetje geupdate. Het hoeft echt geen hoogstaande website te zijn. Ik moest bij die gast nog vragen of ik 't in Dreamweaver/Fireworks mocht maken; de rest van de klas gebruikt AOL-press en dat resultaat is nog velen malen erger.

Over die jaartallen; hij heeft dat zo opgegeven omdat hij van alle onderzoekers een grote tijdlijn wil maken in html.En zoals al eerder gezegd; flash was niet toegestaan.

[ Voor 12% gewijzigd door Verwijderd op 12-12-2011 00:48 ]

[simon]

Ik vind 't nogal onoverzichtelijk, heel klein,zeker op hoge reso's. Verder zou 't mooi zijn als je't zo zou kunnen maken dat het geen waarover je gaat vergroot wordt. Kan prima met hovers..

[MuddyMagical]

Verwijderd schreef op dinsdag 12 april 2005 @ 15:45:
http://www.annemiekevanrosmalen.nl/anw/start.htm

Ik heb m een beetje geupdate. Het hoeft echt geen hoogstaande website te zijn. Ik moest bij die gast nog vragen of ik 't in Dreamweaver/Fireworks mocht maken; de rest van de klas gebruikt AOL-press en dat resultaat is nog velen malen erger.

Over die jaartallen; hij heeft dat zo opgegeven omdat hij van alle onderzoekers een grote tijdlijn wil maken in html.En zoals al eerder gezegd; flash was niet toegestaan.

Dat het geen hoogstaande kwaliteit hoeft te zijn betekent nog niet dat er niet over nagedacht mag worden.

Suggestie : Zet aub die woorden niet verticaal maar horizontaal. Ik moet mijn hoofd draaien als ik het wil lezen.

[Verwijderd]

Photoshop gebruiken voor een leuke layout en dan layeren+layers linken, stuk mooier, duidelijker, en je kan er veel meer mee.