anoniem Geplaatst: 29 januari 2002 Auteur Delen Geplaatst: 29 januari 2002 ik zou aan mijn huiswerk gaan... maar ok :wink: (sorry teacher! ik weet dat ik zondig!) je maakt een standaard html page aan; [code:1:68076541a4] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> Fotogallery </title> </head> <body bgcolor="#ffffff"> </body> </html> [/code:1:68076541a4] Tussen [b:68076541a4]<body>[/b:68076541a4] en [b:68076541a4]</body>[/b:68076541a4] zet je vervolgens de hieronder staande code: [code:1:68076541a4] <table border="0" cellpadding="0" cellspacing="0" width="600"> <tr> <td width="300"></td> <td width="300"></td> </tr> </table> [/code:1:68076541a4] Tussen de eerste [b:68076541a4]<td>[/b:68076541a4] en [b:68076541a4]</td>[/b:68076541a4] zet je vervolgens: [code:1:68076541a4] <img src="thumb1.jpg" border=0 alt="klik voor uitvergroting"> [/code:1:68076541a4] Tussen de tweede [b:68076541a4]<td>[/b:68076541a4] en [b:68076541a4]</td>[/b:68076541a4] zet je de beschrijving van de foto. als je de page nu opslaat en in de browser bekijkt, zie je dat je twee rijen hebt: thumbnail beschrijving maar nu moet je nog op de thumbnail kunnen klikken. daarom zet je óm de <img...> heen deze code: [code:1:68076541a4] <a href="photo1.jpg" target="_blank"> <img...> </a> [/code:1:68076541a4] [b:68076541a4]* de <img...> die ik hier zet, is dus de img code die je al hád staan. * met target="_blank" geef ik aan, dat de foto in een nieuw scherm moet openen.[/b:68076541a4] Als je het nu opslaat en in de browser kijkt, zie je dat het plaatje aanklikbaar is en dat je dan bij het origineel komt. Maar, je wilt natuurlijk meerdere foto's onder elkaar. Even terugkijken naar de tabel dan en je ziet, dat dit: [code:1:68076541a4] <tr> <td width="300"></td> <td width="300"></td> </tr> [/code:1:68076541a4] het essentiële deel is; hierin wordt de TR (table row, tabelrij) aangegeven, met twee TD's erin naast elkaar in dezelfde rij. Na die twee TD's wordt de rij namelijk weer afgesloten met </tr>. Dus, wil je nog een rij onder je bestaande foto's, dan kopieer je dit stukje hierboven en zet je het zo neer: [code:1:68076541a4] <table border="0" cellpadding="0" cellspacing="0" width="600"> <tr> <td width="300"></td> <td width="300"></td> </tr> <tr> <td width="300"></td> <td width="300"></td> </tr> </table> [/code:1:68076541a4] Natuurlijk zijn deze cellen nu even leeg, je moet ze wel weer allemaal de invulling geven zoals hierboven staat. Zorg dat je de <tr>..</tr> code altijd vóór de </table> plaatst, want daarna is de tabel afgelopen en leest hij ook geen tabelrijen meer! Ga zo door tot je genoeg rijen hebt voor alle foto's die je wilt laten zien. Zorg wel dat als je copy&paste, je telkens de nummertjes van de thumbnail en de foto bijwerkt! Sla de pagina op als .htm of .html Goed, het Photoshop gedeelte: Open de eerste foto, laten we zeggen photo1.psd. Open hem, en sla hem meteen op met [b:68076541a4]File[/b:68076541a4] » [b:68076541a4]Save for web...[/b:68076541a4]. Stel het bestandsformaat in op JPEG en de compressie op ongeveer 60%; kijk zelf onderaan het venstertje hoe de verhouding bestandsformaat/kwaliteit ongeveer is. Geef de JPEG nu de naam 'photo1.jpg' Na het opslaan ga je gewoon door met de foto die nog in beeld staat. Met [b:68076541a4]Image[/b:68076541a4] » [b:68076541a4]Image Resize[/b:68076541a4] kun je hem kleiner maken (maar het origineel nog wel behouden!) Stel de gewenste breedte van de foto in op 200 pixels en kijk hoe de hoogte hierop reageert; dit regelt Photoshop zelf naar verhouding wel. Ook met verticale foto's; maak de breedte niet meer dan 300 pixels, want de tabel hierboven heeft maar kolommen van 300 pixels breed... en anders raakt de tabel én je page helemaal uit zijn proporties. Laat het plaatje resizen en druk [b:68076541a4]niet[/b:68076541a4] op save! Kies [b:68076541a4]File[/b:68076541a4] » [b:68076541a4]Save for web...[/b:68076541a4] Zet het bestandsformaat weer op JPG, dezelfde compressie, en sla hem op als 'thumb1.jpg' Doe dit achtereenvolgens met alle foto's en zorg dat de namen van de foto's en thumbnails overeenkomen met de namen die jij in de html page hebt gebruikt. Zet nu de pagina op de webserver (uploaden als platte tekst/ascii, niet binair). Zet in dezelfde map op de server de foto's, laad deze wél Binair op. Zet ze niet in een submap, want dan kan je pagina ze niet vinden! Als je dit hebt gedaan, zou de page te vinden moeten zijn op het net...evenals de foto's. [b:68076541a4]succes![/b:68076541a4] Quote Link naar reactie
anoniem Geplaatst: 29 januari 2002 Auteur Delen Geplaatst: 29 januari 2002 Als je er met zo'n uitleg niet uitkomt! :wink: Quote Link naar reactie
anoniem Geplaatst: 30 januari 2002 Auteur Delen Geplaatst: 30 januari 2002 Dit ziet er indrukwekkend uit. Ik ga ermee aan de slag en laat het resultaat nog wel even lezen. Hoop trouwens dat het ook met jouw huiswerk nog is goedgekomen. Quote Link naar reactie
anoniem Geplaatst: 30 januari 2002 Auteur Delen Geplaatst: 30 januari 2002 nou... nee... ik heb morgen een gesprekje met mn studiebegeleider en ik moet dit jaar nog héél hard aanpoten, wil ik mijn examen halen... ...maar dat komt niet alleen door dit avondje hoor, voel je niet schuldig :wink: Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen