Een multi-layout. website bouwen. met Muse. Met download van oefenbestanden. Angelo Spiler

Transcriptie

1 Een multi-layout website bouwen met Muse CC Met download van oefenbestanden Angelo Spiler

2 Een multi-layout website bouwen met Muse CC Een multi-layout website bouwen met Muse ISBN: Digitaal ebook PDF, bij voorkeur te lezen met Acrobat (Reader), in het bijzonder bij lezing op tablets Gezet in Frutiger 2014 Option One, Amsterdam Auteur: Angelo Spiler Redactie: Priscilla Raadsen Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand en/of openbaar gemaakt in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of op enige andere manier zonder voorafgaande schriftelijke toestemming van de uitgever.

3 Inhoud Voorwoord 5 Introductie 7 De interface 8 et documentvenster 8 De menubalk 9 De gereedschappen 9 De werkmodi (Musebalk) 9 De besturingsbalk 9 De panelen 9 Andere onderdelen 9 De workflow 10 et concept 10 De site-structuur 10 et schrijven/verzamelen van content 10 De vormgeving van de site 10 De opmaak van de pagina s 11 et testen 11 et publiceren 11 De navigatie 12 Zoomen 12 Zoomcommando s 12 andmatig zoomniveau 12 andje 13 Naar andere modus 13 Naar andere pagina 13 1 De site-structuur 15 et opzetten van de basis 16 et site-overzicht 17 Gemeenschappelijke site-elementen op stramienpagina s 18 ulplijnen voor het instellen van kop- en voettekst gebieden 20 2 et navigatiemenu 27 Een laag voor interactieve elementen 29 De vormgeving van het navigatiemenu 30 De tekstlabels in het navigatiemenu 31 Individueel bewerken van knoppen 32 De voettekst en koppelingsstijlen 33 Alineastijlen 34 Pagina-elementen instellen als voettekstitems 35 3 De elementen in de koptekst 37 et headerbeeld en logo 38 Social-media knoppen 39 Social-media koppelingen 40 Aangepaste koptekst voor home 41 4 Een interactieve menukaart en ingesloten html 45 Een diapresentatie van de menukaart 46 Vormgeving van de menutekst 50 De bibliotheek 52 Ingesloten html 53 5 Een Google Map en contactformulier 57 Een Google Map 58 et contactformulier 59 De dankpagina 60 Een beginkapitaal 61 6 Een slideshow-agenda 63 De Muse community 64 Bibliotheek 65 Verbroken koppelingen herstellen 66 Nieuwe inhoud 66 3 INOUD

4 7 Een accordeon 71 Tekst en beeld in een verticale accordeon 72 Diapresentatie met aanbevelingen 76 Social-media widgets 78 8 Parallax Scrolling 81 Opmaak van de pagina home 82 Ankers 83 Animatie door Parallax scrolling 85 Kopiëren van meerdere elementen 87 9 De site online zetten 89 Favicon 90 SEO-gerelateerde instellingen 90 TML-labels 91 Alternatieve tekst voor afbeeldingen 92 Instellen van index.html 92 Publicatie naar Business Catalyst 93 Exporteren naar TML Multi-layout design 97 Muse en multi-layout design 98 et vormgeven van de telefoon-layout 99 Addenda 100 SEO in Muse 100 Web-, webveilige en systeemlettertypen 103 Afbeeldingskaders en rechthoeken gevuld met afbeeldingen 105 Korte tips 107 In browser editing 108 Muse en Digital Publishing Suite 111 Een staatknop 112 Bestandsformaten voor het web 113 Voornaamste shortcuts 114 Muse glossarium 116 Muse community 121 Index 122 Feedback 124 Opmerking: klik op een onderwerp om naar de betreffende pagina te gaan. Bij dit boek horen bestanden die je downloadt vanaf Voer het wachtwoord museboek in en download het zip- bestand Bagelshop. Pak het bestand uit op je computer en plaats de map Bagelshop op een geschikte plaats, bijvoorbeeld op het bureaublad. De online-versie van de site die je in dit boek zult bouwen, is in verschillende layouts (voor laptops en desktops, tablets en smartphones) te zien op 4 INOUD

5 Voorwoord Bij het maken van websites zijn traditioneel twee groepen professionals betrokken: aan de ene kant de programmeurs met kennis van o.a. html, CSS, javascript en PP, en aan de andere kant de vormgevers met kennis van o.a. Photoshop, InDesign en Illustrator. Tussen die twee groepen heeft altijd een (diepe) kloof bestaan. Programmeurs hebben in de praktijk vaak weinig kaas gegeten van een aantrekkelijke vormgeving; en vormgevers zien in de regel op tegen het abstracte denkniveau dat nodig is om code te schrijven. Programmeurs en vormgevers waren tot elkaar veroordeeld... tot nu toe! De centrale vraag die Adobe zich stelde was: oe zou het zijn als sites kunnen worden gebouwd zonder enige kennis van code? Zou dat niet het walhalla voor vormgevers zijn?. Met de introductie van Muse in 2011 heeft Adobe aan vormgevers die radicale koerswijziging aangeboden. Zij kunnen met Muse effectief en zonder enige kennis van code websites bouwen. Wat is de positie van Muse in vergelijking met software als DreamWeaver of platforms als WordPress en Drupal? In vergelijking met DreamWeaver is Muse intuïtiever en nog meer op vormgevers gericht. oewel DreamWeaver net als Muse grafisch georiënteerd is, komt de code al snel om de hoek kijken. WordPress en Drupal hebben op eigen wijze een stap weg van de code en richting vormgeving en kant-en-klare functionaliteit gezet, maar o wee als je het net iets anders wilt. En een vormgever wil het altijd net iets anders. Dan moet in de code worden gedoken en voelt de vormgever zich verloren zonder de hulp van een programmeur. Muse is ontwikkeld om de websiteprogrammeur overbodig te maken. Of dat in álle gevallen lukt, is de vraag, maar dat je met Muse met louter grafische middelen websites kunt bouwen, staat vast. Dit boek laat zien hoe dat gaat. Speciale kennis is niet vereist, wel de algemene vaardigheden om met een computer om te gaan. Kennis van InDesign biedt zeker voordelen, omdat veel concepten in Muse dezelfde zijn. Denk aan stramienpagina s, alineastijlen en bibliotheken. Muse is het kleine zusje van InDesign: wat InDesign is voor drukwerk en digitale publikaties, is Muse voor websites. En door de koortsachtige ontwikkeling van Muse wordt dit zusje snel groot. eel groot! Angelo Spiler 5 VOORWOORD

6 6 INTRODUCTIE

7 Introductie In deze introductie staan de interface en navigatie van Muse centraal. oe werkt Muse? Welke gereedschappen biedt het? Waarvoor dienen de panelen en Besturingsbalk? oe navigeer je tussen de pagina s? Ook leer je hoe het ontwerp en de bouw van een site het best kan worden gepland. 7 INTRODUCTIE

8 De interface De interface is de look & feel van een programma. Waar staat welk onderdeel en wat kun je er mee? De belangrijkste onderdelen van de Muse-interface zijn: het documentvenster, de menubalk, de ge reedschappen en werkmodi, de besturingsbalk en de panelen. et documentvenster Dit is het venster waarin de afzonderlijke pagina s worden weergegeven en bewerkt. Bovenaan dit venster staan de namen van open pagina s (en het site-overzicht) in tabvorm. Door op een tab te klikken, open je de betreffende pagina in het documentvenster. et is ook mogelijk meerdere vensters tegelijk open te hebben. et documentvenster kan verder hulpmiddelen als linialen en hulplijnen bevatten. et venster ziet er anders uit bij het site-overzicht (de modus Overzicht ). Je kunt in dat overzicht geen pagina s bewerken, maar wel de site-structuur en omvang bepalen. De gereedschappen van Muse aan de linkerzijde et site-overzicht en de open pagina s in tabvorm De menubalk met commando s en subcommando s. De Besturingsbalk om elementen of de pagina in te stellen De werkmodi Overzicht t/m Beheren in de Musebalk In tabs gegroepeerde panelen Linealen ulp- en kolomlijnen orizontale scrollbalk et documentvenster Grijs werkgebied Vertikale scrollbalk 8 INTRODUCTIE

9 De menubalk De menubalk bestaat uit menu s en submenu s en bevat alle commando s die het programma rijk is. Voor veel commando s zijn er alternatieven in de vorm van shortcuts of je vindt ze terug in het contextmenu van een geselecteerd element (te benaderen via de rechtermuisknop of door de controltoets ingedrukt te houden). De gereedschappen Aan de linkerzijde is de kleine set aan gereedschappen van Muse terug te vinden. Toch kun je met deze beperkte set een site volledig vormgeven. Met de gereedschappen selecteer je een element, snijdt je een afbeelding bij, typ je tekst, maak je rechthoeken en navigeer je op een pagina. Voor meer specifieke beeldbewerkingen kun je terugvallen op software als Photoshop. Door op de tabs van panelen te klikken, open en sluit je ze De werkmodi (Musebalk) De balk onder de menubalk heeft geen officiële naam. Omdat links in de balk de letters Mu te zien zijn, wordt er in dit boek aan gerefereerd als de Musebalk. In deze balk staan o.a. de vier werkmodi van Muse. In de modus Overzicht plan je de site; in de modus Ontwerpen geef je de pagina s vorm; in de modus Voorvertonen check je de vormgeving en functionaliteit in een browser-achtige omgeving; en in de modus Publiceren upload je de bestanden naar de eigen server (ftp-host) of een server van Adobe (via Business Catalyst). De besturingsbalk De besturingsbalk biedt veelgebruikte opties om geselecteerde elementen vorm te geven of te koppelen. Als geen element is geselecteerd, kun je pagina-eigenschappen instellen. De panelen De panelen vormen de meest complexe onderdelen van de interface. Sommige bieden dezelfde eenvoudige opties als de besturingsbalk, andere voegen complexe interactieve functionaliteit Een ander onderdeel van de Muse-interface: een dialoogvenster (met popup-menu) aan de pagina toe. Alle panelen zijn op te roepen via het menu Vensters. Andere onderdelen Daarnaast zijn er dialoogvensters die herkenbaar zijn aan een OK- en Annuleren-knop. et programma vraagt in zo n venster direct om input: je kunt geen andere bewerkingen uitvoeren zolang een dialoogvenster open staat. Tot slot zijn er de shortcuts. Dat zijn toetscombinaties waarmee het werken veel sneller gaat. Meestal worden in shortcuts één of meer van de volgende modificeer -toetsen gebruikt: de commandtoets (voor PC-gebruikers de controltoets Ctrl ), de optietoets en/of de hoofdlettertoets. Een uitgebreide lijst van shortcuts is te vinden in de bijlagen. 9 De interface