Fotoalbum maken (Slideshow widget)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Eén widget moet ik nog even uitleggen.

Want ik denk dat je deze wel gaat gebruiken.

En dat is de dia-presentatie.

Ik heb de Locatie-pagina geopend.

Ga naar de Widgets Library en sleep uit de map Slideshows de widget ‘Thumbnails' in de pagina.

Controleer in het lagen-venster dat deze in de content-laag’ staat.

Zo niet, sleep dan het selectievlakje van de huidige selectie naar de juiste laag. Zo!

Om de gehele widget op te pakken en te verplaatsen, selecteer je de ‘slideshow’.

Deselecteer eerst. Zorg dat je als tooltip 'Slideshow' ziet.

Nu kun je in klikken en de hele Slideshow verplaatsen.

Om de aanwezige afbeeldingen te vervangen activeer je het opties-menu.

Klik op het map-icoon achter ‘Add Images’.

Klik op open.

Selecteer een afbeelding, houd dan de Commando-toets ingedrukt.

Om binnen de lijst niet opeenvolgende afbeeldingen erbij te selecteren.

Klik op open.

De afbeeldingen worden in thumbnails geplaatst.

De volgorde hiervan kun je zelf bepalen.

Selecteer een thumbnail en verplaats deze in de volgorde.

Een indicator geeft de nieuwe positie van de afbeelding aan.

Laat de muis los en je hebt de volgorde veranderd.

Klik op de thumnails om de bijbehorende afbeeldingen in het target-gebied te bekijken.

Wijzig het formaat van een thumbnail.

Klik in op een hoekpunt, houd ingeklikt.

Klik in op een hoekpunt, houd ingeklikt.

Druk de Shift-toets erbij in om proportioneel te schalen.

Het trigger-gebied heeft een bepaald formaat.

Waardoor de thumbnails op een gegeven moment, niet meer naast elkaar passen

En dan onder elkaar worden geplaatst.

Selecteer het omsluitend trigger-gebied en maak deze breder.

Er komt dan een moment dat de thumbnails wel weer naast elkaar kunnen staan.

Activeer opnieuw de options.

Dankzij de optie ‘Edit Toghether’ wijzigden alle thumbnails toen je er slechts één van formaat veranderde.

Een zeer handige functie.

Ik benoem even snel een aantal opties waarmee je de dia-presentatie kunt instellen.

Bepaal bij de Parts welke sturings- en informatie-elementen je wilt tonen bij de presentatie.

Kwestie van aan- en uitvinken om deze toe te passen.

En je ziet vanzelf in beeld wat het is.

Al deze elementen kun je gewoon op andere posities plaatsen.

Dus ik kan de navigatieknoppen voor vorige en volgende afbeelding ook bovenop het presentatiegebied zetten.

Bij Transition bepaal je de overgang tussen de beelden.

Die kun je dus ook nog op horizontal of Vertical zetten.

Hier kun je dan ook nog een tijd aan verbinden bij Transition Speed.

Deze presentatie gaat zichzelf afspelen, via Auto Play, na , seconde.

M]aar dit kun je ook deactiveren.

Ik heb nu de ‘Captions’ op actief staan.

Dat betekent nog wel dat je zelf onder elke foto nog het onderschrift moet typen.

Net zo lang inklikken, dubbelklikken totdat je de tekst geselecteerd hebt.

En wijzig deze voor jouw tekst.

Verbind aan de vormgeving een alinea-stijl. Bijvoorbeeld 'brood'.

ik activeer opnieuw mijn selecctie-gereedchap en selecteer een nieuwe afbeelding.

De opmaak is al gewijzigd met de vormgeving van de paragraaf-stijl.

Je hoeft enkel de tekst nog maar te vervangen.

Zodra je hiermee klaar bent kun je een voorvertoning bekijken bij File > preview Page in Browser.

Controleer het eindresultaat. Werken alle knoppen?

En geven de thumbnails de juiste afbeeldingen weer?

Zo makkelijk is het om een diapresentatie te maken.