Broncode exporteren (HTML, JavaScript & CSS)

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.

Websites worden gemaakt met behulp van html, css en javascript.

Als je je website bekijkt in een browser.

En je klikt met de rechtermuisknop ingedrukt ergens op de pagina.

Kun je uit het contextuele menu kiezen voor ‘Inspecteren’.

Met het selectiegereedschap actief.

Kun je over de onderdelen van de pagina lopen.

De html, de css-stijlen en de javascripts worden weergegeven in de inspect-vensters.

Webdevelopers beheersen deze talen.

Muse biedt creatieven die die kennis niet hebben.

Toch de mogelijkheid om websites te ontwerpen en te publiceren.

Dit houdt in dat Adobe Muse op de achtergrond jouw document omzet naar html, css en javascript.

Hier gaan we nu even naar kijken. Ga naar File > Export as HTML.

Kies een doelmap om de html in te verzamelen.

Ik maak een nieuwe map aan hiervoor en noem deze 'webevent-bronbestanden'.

Klik op 'Choose'.

Je geeft de domeinnaam van de website op en klikt op OK.

Muse bouwt nu een Local Root Folder op. Dat is de bronmap van de website.

Ook nu krijg ik een waarschuwing dat het mailadres dat ik gebruik in mijn formulier.

Niet overeenstemt met mijn domeinnaam. Ik klik op OK.

Zoek deze bronmap op in de Finder en bestudeer de inhoud.

Je ziet dat de Local Root Folder van een website heel georganiseerd is.

De 'index.html' is de startpagina van elke website. Die moet zo heten.

De eerste pagina in de Plan Mode heet altijd de ‘index.html’.

Klik met de rechtermuisknop op het icoon van de startpagina en kies voor Page Properties.

De Page Name is Webevent. Deze naam wordt gebruikt voor het navigatiemenu in de site.

De Pagetitle wordt gebruikt in het tabblad van de browser. Dat is ook Webevent.

En bij Filename staat ‘index.html’. Deze naam mag je dus nooit wijzigen.

Naast de html-bestanden van de site staan er een aantal mappen.

In de map ‘assets’ worden bestanden bewaard die in de site gebruikt worden.

Zoals in ons geval de pdf-brochure.

De vormgeving wordt bepaald door css-stijlen.

Je ziet dat er voor elke pagina een apart css-stijlblad is gemaakt.

En nog wat extra stijlbladen die muse maakt om alle vormgeving in goede banen te leiden.

Dan een map waarin alle gebruikte afbeeldingen van de site staan opgeslagen.

Als je denkt, wat vreemd dat het er nu ineens zo veel kunnen zijn?

Elke keer dat je de afbeelding op een ander formaat toepast wordt deze apart weggeschreven.

Want afbeeldingen tonen zichzelf het snelst in een site als deze op ware grootte is voorbereid.

Bij Responsive Design wil je natuurlijk dat de mobiele versie supersnel getoond kan worden.

En een klein plaatje is dan sneller in beeld.

Bij de scripts worden de gebruikte en dus benodigde javascript-bestanden bewaard.

Alle middelen uit de Widget Library maken gebruik van javascript.

Al deze bestanden vormen samen de website.

Stel dat een webdeveloper of it’er inzage wil hebben in de broncode van jouw website.

Dan kun je hem of haar deze bronbestanden geven.

Voor jou als ontwerper is het handig en nuttig om te weten dat dit de onderliggende techniek van webdesign is.

We zijn aan het einde gekomen van de cursus.

Ik hoop dat je veel geleerd hebt en mooie websites gaat bouwen.