Content van website beheren (Assets)

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 reactie

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.

Zodra je een muse-bestand opent.

Controleert Muse of alle geplaatste afbeeldingen en illustraties nog op dezelfde plek staan als toen je ze plaatste.

Muse maakt namelijk een koppeling naar de locatie van het bestand dat je plaatst.

Dus stel dat je een afbeelding plaatst vanaf een usb-stick.

Dan moet die stick wel beschikbaar zijn als je dit bewuste document opent.

Mocht Muse het bestand niet kunnen vinden dan verschijnt deze melding in beeld.

Hier staat dat je het venster Assets kunt raadplegen om het probleem op te lossen.

Ik klik op OK. Ik open een webpagina en ga naar Window > Assets.

In het venster Assets worden alle gekoppelde bestanden binnen een website bijgehouden.

Dus hier vind je ook een prachtig overzicht van alle gebruikte afbeeldingen.

Achter de naam van het bestand kun je aflezen hoe de afbeelding is toegepast.

‘Background’ betekent dat je de afbeelding als een vulling hebt toegepast via ‘Fill’.

Staat er een driehoekje voor de bestandsnaam.

Dan wordt de afbeelding op meerdere pagina’s toegepast.

Klik op de driehoek om te zien op welke pagina’s dat zijn.

Om de afbeelding op een pagina te bekijken.

Klik je met de rechtermuisknop ingedrukt op het icoon.

En kies je uit de lijst voor ‘Go to Asset’.

De pagina wordt voor je geopend en de afbeelding wordt voor je geselecteerd.

Als je deze afbeelding in de gehele website wilt vervangen door een andere.

Dus op beide pagina's in dit geval.

Dan klik je met de rechtermuisknop ingedrukt op het bovenste afbeeldings-icoon.

Ik kies uit de lijst voor ‘Relink All Instances’.

Navigeer naar de nieuwe afbeelding en klik op Open.

De afbeelding is nu overal in de website bijgewerkt naar de nieuwe versie.

Je kunt afbeeldingen en illustraties ook laten insluiten.

Klik opnieuw met de rechtermuisknop ingedrukt op de afbeelding en kies voor de optie ‘Embed Link’.

Het document wordt dan natuurlijk wel zwaarder.

Maar je hoeft nu niet meer bang te zijn dat de afbeelding niet meer gevonden kan worden.

ingesloten afbeeldingen herken je aan het afbeeldings-icoon achter de naam.

Met een waarschuwings-icoon wordt aangegeven dat er iets mis is met de afbeelding.

ik zet alle waarschuwingen even bovenaan in de lijst.

Dit gele waarschuwingsbord bijvoorbeeld.

Betekent dat de afbeelding groter is toegepast dan de resolutie toestaat.

Open de afbeelding.

Klik met de rechtermuisknop ingedrukt op de probleemafbeelding.

En zeg 'Go to Asset'.

De pagina waarin de afbeelding wordt gebruikt wordt voor je geopend.

Selecteer de afbeelding.

De huidige breedte is pixels terwijl de afbeelding is voorbereid op pixels.

Die informatie zie je ook bij de tooltip in het Assets-venster.

Ik wijzig de huidige breedte weer terug naar pixels.

Zorg dat de breedte en hoogte wel met elkaar gekoppeld is.

Anders schaal je disproportioneel.

Positioneer de afbeelding opnieuw.

En nu is het gele waarschuwingsbord verdwenen.

Het rode waarschuwingsteken met een vraagteken erin.

Betekent dat de koppeling naar deze afbeelding niet meer juist is.

Misschien heb je de afbeelding verplaatst of had je hem ooit vanaf een externe schijf gekozen.

Om de originele route op te zoeken gebruik je de tooltip.

Als eerste staat de originele route aangegeven die destijds naar dit bestand leidde.

Deze stond dus los in de map ‘Assets’.

Klik met de rechtermuisknop ingedrukt op het bestand.

En kies voor ‘Relink’.

Navigeer naar de map ‘Assets’.

Het bestand ‘logo.svg’ staat niet meer los in de map.

Want deze heb ik verplaatst naar de map ‘verplaatst’.

Open deze en voilà het waarschuwingsteken verdwijnt.

Want de koppeling naar de illustratie is weer hersteld.

Klik met de rechtermuisknop opnieuw op een .svg-bestand.

SVG-bestanden kun je niet insluiten.

De optie ‘Embed Link’ is niet beschikbaar.

Dus voor verschillende bestandsformaten gelden verschillende opties.

Experimenteer ook met de overige opties.

Experimenteer ook met de overige opties als ‘Go to Asset, Reveal in Finder’ etcetera.

Via het contextuele menu kun je heel snel de originele afbeeldingen opzoeken...

... openen en bewerken in een edit-programma.