Een ' picture show , "of" fotogalerij ", presenteert foto's in een portfolio - achtige webpagina. Terwijl image galleries vele configuraties kunnen hebben , een populair formaat geeft miniatuurafbeeldingen langs de zijkant , bovenkant of onderkant van de pagina . Als de gebruiker elke miniatuur klikt , een bijbehorende full-size versie van de foto wordt weergegeven in het midden van de pagina . Dreamweaver CS3 ondersteunt verschillende manieren om foto albums te creëren . Een van de eenvoudiger en meer voorkomende methoden is het gebruik van " frameset . " Een frameset is een HTML- webpagina container bestaande uit twee of meer " frames ". Elk frame toont een individuele pagina of URL . Wat je nodig hebt
Adobe Dreamweaver CS3 of hoger
Adobe Photoshop , Apple iPhoto , Windows Paint of een ander beeldbewerkingsprogramma
Toon Meer Aanwijzingen
voorbereiden van uw foto's
< br > 1 formaat van de foto's in uw beeldbewerkingssoftware . U zult twee versies van elke afbeelding --- een full - size versie (zeg , 400 door 300 pixels , of wat het beste werkt voor de vorm en grootte van uw foto's ) en een miniatuur -versie (laten we zeggen , 100 bij 75 pixels ) nodig . kopen van 2 Stel de resolutie voor elk beeld op " 72 " puntjes ( of pixels ) per inch ( of " 96 " voor high - definition beeldschermen ) .
3 elke afbeelding opslaan in een subdirectory van de directory waar je van plan bent om uw afbeeldingengalerij website te maken . Noem de subdirectory " beelden . " Sla de beelden als JPEG-bestanden . Noem ze " foto1 , " " foto2 , " enzovoort; naam van de bijbehorende miniaturen " thumb1 , " " thumb2 , " enz.
creëren Your Image Gallery in Dreamweaver
4 Open Dreamweaver , en klik vervolgens op " File " op de menubalk . Kies " Nieuw " om het dialoogvenster Nieuw document weer te geven .
5 Klik op " Pagina van Sample" in de linkerkolom van het dialoogvenster , en klik vervolgens op " Frameset " in de "Sample Folder " kolom . Dit toont een lijst van monster framesets in de derde kolom van het dialoogvenster . Koos voor " Fixed Links . "
Klik 6 "Create . " Dreamweaver geeft de " Frame Toegankelijkheidskenmerken " dialoogvenster . Klik op " OK . " De frames worden benoemd op basis van hun positie op de pagina . De linker frame wordt genoemd " leftFrame , " en het hoofdframe wordt genoemd " mainFrame . "
7 Klik op " File " op de menubalk en kies " Save All . " Dreamweaver zal u vragen om een naam drie bestanden , de een na de ander : " . Gallery " Ten eerste, de frameset zelf --- noem maar op Ten tweede , het belangrijkste kader --- naam het " foto1 . " Ten derde , het linker frame --- noem maar op " thumbnails ".
Insert 8 " photo1.jpg " in het hoofdmenu ( rechts ) kader , en klik vervolgens op " File " op de menubalk en kies " Frame opslaan . "
9 Maak een nieuwe HTML-bestand in het hoofdframe voor elke foto en opslaan , zoals deze : Delete " photo1.jpg " van het hoofdframe . Plaats " photo2.jpg " in het hoofdframe . Klik op " File " op de menubalk en kies ' Frame opslaan als . " Noem het bestand " foto2 " en sla het op . Herhaal deze procedure voor elk van uw foto's , het benoemen van elk HTML -bestand met de bijbehorende foto naam .
10 Plaats uw miniaturen in het linker frame. Plaats de beelden verticaal in het frame in de volgorde waarin u ze de naam --- " foto1 " eerste , " foto2 " tweede , enz.
11 Selecteer de eerste miniatuur . Ga naar het venster Eigenschappen en typ de bestandsnaam en het pad voor de eerste full - size foto HTML-pagina in het veld " Link" , zoals deze : . " Images/photo1.html " ( zonder aanhalingstekens ) op Twitter 12 Klik op de " Target " drop -down in het venster Eigenschappen en kies " mainFrame . " Dit vertelt de browser van de gebruiker om photo1.html laden in het hoofdframe toen ze de miniatuur klikt.
13 Herhaal de twee voorgaande stappen voor elk van uw duimnagel en full - size afbeelding sets .
14 Klik op " File " op de menubalk en kies "Save Frame" te redden " thumbnails.html . "
Open " gallery.html " 15 in een browser te testen uw afbeeldingengalerij .
|
