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. Het 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. Het is niet mogelijk meerdere vensters tegelijk open te hebben. Het documentvenster kan verder hulpmiddelen als linialen en hulplijnen bevatten. Het 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 en weergavefunctie in de Musebalk Het 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 Hulp- en kolomlijnen Horizontale scrollbalk Het documentvenster Grijs werkgebied Vertikale scrollbalk 8 INTRODUCTIE
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 vijf 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; in de modus Publiceren upload je de bestanden naar de server en in de modus Beheren kom je in de online beheer omgeving van je site 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. Het 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
Hoofdstuk De site-structuur 1 De site-structuur wordt in Muse weergegeven in het site-overzicht. In dit hoofdstuk stel je de hoeveelheid pagina s en hun onderlinge verhouding in. Om gestructureerd te werk te gaan, maak je daarbij gebruik van zogenaamde stramienpagina s. Ook algemene instellingen als de breedte, hoogte en marges voor een site komen aan bod. 15 HOOFDSTUK 1
De site-structuur De site die je in dit boek gaat bouwen, is voor een bagelshop met de naam Bagel Boulevard. In dit hoofdstuk bouw je de site-structuur van Bagel Boulevard in Muse na. Het opzetten van de basis De site-structuur bestaat uit vijf pagina s op het hoogste niveau en twee pagina s op het tweede niveau. In de volgende stappen wordt deze structuur in Muse nagebouwd. 1 Start Muse. Als je het programma voor het eerst opstart, wordt het welkomscherm weergegeven. De map Bagelshop bevat alle bestanden die nodig zijn voor het bouwen van de website. Ook staat in deze map ter referentie een voltooide versie van de website, genaamd Bagelshop_definitief.muse. Een deel van het welkomscherm Kies Nieuw maken Site of het menucommando Bestand Nieuwe site... N. Het dialoogvenster Nieuwe site wordt weergegeven, waarin de algemene instellingen voor de gehele site kunnen worden opgegeven. 2 Stel zo nodig Breedte pagina in op 960 px en Min. hoogte op 500 px. Het aantal kolommen wordt 12. Typ hiervoor het getal 12 in het veld Kolommen of klik op de pijl omhoog om de huidige waarde te verhogen. Na het aanbrengen van deze wijziging worden de andere waarden automatisch bijgewerkt, als je in een ander invoerveld klikt. Laat de marges, opvulling en overige instellingen ongewijzigd. De algemene site-instellingen in het dialoogvenster Nieuwe site Opmerking: Het menu Oorspronkelijke layout is standaard ingesteld op Computer, dat is de layout die je voor de site Bagel Boulevard als eerste zult maken. Als je voor nieuwe projecten liever met een layout voor tablets of smart phones wilt starten, kun je dat in dit menu bepalen. 16 hoofdstuk 1 De site-structuur
3 Klik op OK om de instellingen op te slaan en het dialoogvenster te sluiten. Intermezzo Het site-overzicht Je ziet nu een (site)overzicht. Dit is een weergave van de pagina s met de hiërarchische opbouw van de website. Je kunt hier pagina s op hetzelfde niveau maken (dus zonder sub- of kindpagina s), of je kunt pagina s maken op verschillende niveaus. Je kunt in Muse gemakkelijk pagina s maken en opnieuw rangschikken in een willekeurige volgorde, zonder je zorgen te hoeven maken over verbroken koppelingen. Het is echter belangrijk de inhoud van een nieuwe site goed in te delen, te bepalen welke pagina s je nodig hebt en te beslissen hoe je de informatie wilt weergeven op de site. De optie Vaste voettekst in het dialoogvenster Nieuwe site is standaard aangevinkt. De voettekst blijft dan op de gewenste locatie staan, ook als het browservenster groter is dan het webpagina-ontwerp. Als je een Muse-site weergeeft in een browser op een grote monitor, en uitzoomt op een pagina waarvoor Vaste voettekst niet is ingeschakeld, zie je de browservulling in het gebied onder de voettekst. Wanneer de optie Vaste voettekst is ingeschakeld, blijft de voettekst inhoud altijd aan de onderzijde van het browservenster staan. In dit boek (en de meeste andere gevallen) laat je de optie Vaste voettekst ingeschakeld. 6 Klik op het plus-icoontje rechts van de miniatuur van de pagina over ons om een derde pagina te maken. Geef deze de naam contact. Het site-overzicht 4 Kies Bestand Site opslaan S. Geef de site de naam Bagel shop.muse in het dialoogvenster Adobe Muse-bestand opslaan als. Navigeer naar de map Bagelshop en klik op Bewaar. In de volgende stappen maak je het site-overzicht met in totaal zeven pagina s, waaronder de pagina Home. 5 Plaats de muisaanwijzer over de miniatuur van de pagina Home en klik op het plus-icoontje rechts van de miniatuur van de pagina Home om een nieuwe pagina op hetzelfde niveau aan te maken. Typ in het label veld onder de nieuwe pagina als naam: over ons. De pagina s rechts van de pagina Home 7 De site bevat ook twee pagina s links van de pagina Home. Klik op het plus-icoontje links van de miniatuur van de pagina Home en geef de nieuwe pagina de naam agenda. Herhaal deze bewerking nogmaals om de laatste nieuwe pagina op hetzelfde niveau te maken en wijzig de naam van deze pagina in menu. Het site-overzicht bevat nu in totaal vijf pagina s met de namen menu, agenda, Home, over ons en contact. 17
8 De site bevat twee pagina s op het tweede niveau, dat wil zeggen: ze zijn ondergeschikt aan een pagina op het hoogste niveau. Plaats de muisaanwijzer over de miniatuur van de pagina menu en klik op het plus-icoontje onder de miniatuur van deze pagina. Zo maak je een nieuwe pagina aan op het tweede niveau. Geef deze de naam recepten. 9 Herhaal de vorige stap om een pagina dank aan te maken onder de pagina contact. Het site-overzicht ziet er nu zo uit: 10 Dubbelklik op het veld onder de miniatuur van de pagina Home en verander de naam in home (onderkast). Na deze wijzigingen is het site-overzicht voltooid. Gemeenschappelijke siteelementen op stramienpagina s Om consistent te werken, plaats je veel voorkomende site- elementen, zoals de kop- en voettekst en de sitenavigatie, op stramienpagina s. Op deze manier hoef je alleen de unieke inhoud aan de afzonderlijke pagina s toe te voegen. Dit werkt op dezelfde manier als in InDesign. In de volgende stappen ontwerp je een stramienpagina voor de site. Deze stramienpagina bevat de permanente illustraties en elementen die automatisch op de normale pagina s van de site worden weergegeven, als ze aan dit stramien zijn gekoppeld. Intermezzo Als je de indeling van de site wilt wijzigen, kun je de miniaturen van de pagina s eenvoudig naar een andere positie slepen. Je kunt ook pagina s verwijderen door de muisaanwijzer boven de miniatuur van de betreffende pagina te plaatsen en te klikken op het icoontje. 11 Dubbelklik in de overzichtsmodus op de miniatuur van de pagina A-stramien om deze in de ontwerpmodus te openen. De pagina A-stramien wordt geopend in een eigen tabblad. In de Musebalk wordt het woord ontwerpen nu blauw weergegeven. Intermezzo Bovenaan de interface van de overzichtsmodus zie je de drie layoutknoppen Computer, Tablet en Telefoon. Naast de namen van de layouts Tablet en Telefoon wordt een plus-teken weergegeven. Dat betekent dat deze layouts nog niet zijn gemaakt. In dit hoofdstuk maken we voorlopig alleen het site-overzicht voor computerschermen. Die voor de andere layouts volgen in hoofdstuk 10. Links van de layouts kun je de grootte van de mini aturen naar eigen wensen aanpassen. A-stramien in de ontwerpmodus Terwijl de pagina is geselecteerd, kun je de opties in de Besturingsbalk gebruiken om de vulkleur en lijninstellingen bij te werken. Ga als volgt te werk om de stramienpagina bij te werken. 18 hoofdstuk 1 De site-structuur
12 Klik op de woorden Vulling browser (blauw) in de Besturingsbalk. Klik bij Afbeelding op Afbeelding toevoegen en blader naar het bestand patroon.png in de map Bagelshop stramien. Selecteer dit bestand en klik op Open om dit als achtergrondafbeelding in te stellen. Let op dat Aanpassen is ingesteld op Naast/ onder elkaar. Dit zorgt ervoor dat de achtergrondafbeelding zowel horizontaal als verticaal wordt herhaald om het browservenster te vullen. Klik ergens buiten het venster Vulling browser om het te sluiten. Intermezzo Muse functioneert in veel opzichten als een ontwerpprogramma zoals InDesign: veel voorkomende elementen worden op zogenoemde stramienpagina s geplaatst. Dit zijn sjabloonpagina s bestaande uit o.a. horizontale en verticale hulplijnen. Het stramien zorgt voor eenheid en samenhang en bepaalt de positie van tekst en beeld. Vaste elementen (bijvoorbeeld logo, voettekst en navigatiemenu) worden meestal op een stramienpagina gezet. De normale (echte) sitepagina s zijn afgeleid van deze stramienpagina s. Op deze pagina s staan de vaste elementen dan ook. Als je deze elementen in Muse wilt verplaatsen, vervangen, schalen of verwijderen, zal dat op de stramienpagina s moeten gebeuren. Op de normale pagina s zijn deze elementen niet te selecteren en dus ook niet te wijzigen. 13 Om de pagina zelf te vullen, klik je in de Besturingsbalk op Vulling (let op: niet Vulling browser ) en stel je de vulkleur in op wit. Merk op dat je voor de vulling ook een afbeelding of kleurverloop kunt instellen. Zet de Dekking op 85 % om iets van de browservulling door te laten schijnen. Klik buiten het venster Vulling om het te sluiten. Gebruik Vulling browser om de achtergrondafbeelding in te stellen die in het browservenster wordt weergegeven. Opmerking: als de website wordt gepubliceerd, wordt de oorspronkelijke kleine afbeelding die je hebt ingesteld als een (naast/onder elkaar geplaatste) achtergrondvulling maar één keer geladen. Naast/ onder elkaar geplaatste achtergrondafbeeldingen zijn vaak patroontegels en handig voor het opvullen van grote stukken van de pagina of browservenster, zonder de downloadsnelheid nadelig te beïnvloeden. Gebruik Vulling om de kleur en dekking van de pagina in te stellen. 19
Nu ga je de afbeeldingen plaatsen om de voettekst samen te stellen die op de meeste sitepagina s zal worden weergegeven. Het is een goede gewoonte om sites te voorzien van voetteksten. 14 Teken met het gereedschap Rechthoek precies aan de onderkant van de pagina een rechthoek die de breedte van de pagina beslaat, dus 960 px breed is. Let op dat je niet de breedte van het browservenster aanhoudt. Stel de hoogte in op 150 px. In het paneel Transformeren kun je de waarden zo nodig precies instellen. 16 Klik op het woord Vulling in de Be sturingsbalk om het venster Vulling te openen voor de rechthoek. Stel de kleur voor de rechthoek in op Geen (de witte staal met de rode diagonale lijn). Klik buiten het kleurvenster om het te sluiten. Klik op Afbeelding toevoegen en stel de achtergrond afbeelding van de rechthoek in op patroon_voettekst.png. (uit de map Bagelshop stramien ). Bij Aan pas sen, stel je de optie Naast elkaar in, waardoor de afbeelding van links naar rechts wordt herhaald. Klik buiten het venster om het te sluiten. Een rechthoek die de breedte van de pagina beslaat Opmerking: Je kunt o.a. checken of de rechthoek is geselecteerd als de selectie-indicator in de Besturingsbalk het woord Rechthoek laat zien. 15 Stel de lijnbreedte van de rechthoek in op 0 px. Intermezzo Hulplijnen voor het instellen van kop- en voettekst gebieden De afzonderlijke pagina s van een website hebben vaak een verschillende hoogte, afhankelijk van de hoeveelheid tekst en afbeeldingen op elke pagina. Het is om die reden handig dat je een koptekst altijd op dezelfde positie boven aan de pagina kunt instellen en de voettekst altijd direct onder de pagina-inhoud, ongeacht de hoogte van elke pagina. In de volgende stappen stel je de kop- en voettekstgebieden van de stramienpagina in. 17 Maak zo nodig alle hulplijnen zichtbaar met het commando Weergave Hulplijnen tonen ;. Maak zo nodig ook de linialen zichtbaar via Weergave Linialen tonen D. De selectie-indicator is een belangrijk hulpmiddel bij het ontwerp en bevindt zich linksboven in de zogenaamde Besturingsbalk. Wanneer er niets is geselecteerd, geeft de selectie-indicator het woord Pagina weer ten teken dat alleen de pagina zelf is geselecteerd. Als je een object op de pagina selecteert, zoals een geplaatste afbeelding, wordt het woord Afbeeldingskader weergegeven of bij een rechthoek het woord Rechthoek. Het is in de dagelijkse praktijk nuttig om te weten welk item momenteel is geselecteerd. Houd altijd een oogje op de selectie-indicator om te controleren of het juiste element is geselecteerd. Als andere pagina-elementen zijn geselecteerd, kun je altijd de volledige pagina opnieuw selecteren door op een leeg gebied of het grijze werkgebied aan de linker- of rechterkant van de pagina te klikken. 18 Zorg er ook voor dat de hulplijnen voor kop- en voettekst worden weergegeven. Als dat niet het geval is, kies je Weergave Koptekst en voettekst tonen ;. Opmerking: Je kunt ook het menuutje Weergave opties in de Musebalk kiezen om de hulplijnen en linialen in of uit te schakelen. Een andere methode is om met de rechtermuisknop (of ctrl-toets) te klikken en in het contextmenu de hulplijnen en linialen in of uit te schakelen. 20 hoofdstuk 1 De site-structuur
Een slideshow-agenda Een agenda kan prima in de vorm van een slide show worden gegoten. Voor Bagel Boulevard download je een slideshow van de Muse community en pas je deze naar de De Muse community Er is een levendige Muse community, waar onder andere widgets, thema s en iconen worden uitgewisseld. Een breed overzicht van deze community is te vinden in bijlage J. 1 Ga in de browser naar de Muse community op http://muse.adobe.com/exchange en zoek naar Slide show. Klik op Slideshow (Composition Wid get) by MuseGrid.com. vormgeving van Bagel Boulevard aan. Op de webpagina kun je meer lezen over de functionaliteit van deze widget en staat er een link naar een voorbeeldpagina. 2 Download het bestand naar de map Bagelshop agenda. In de Finder kun je zien dat dit bestand ( 6889780_496519_musegrid-slider. mulib ) de extensie.mulib heeft. Dit staat voor Muse Library. Opmerking: als je geen internet-verbinding hebt, kun je het bestand musegrid-slider.mulib in de map Bagelshop agenda gebruiken. 64 hoofdstuk 6 EEN SLIDESHOW- AGENDA
Bibliotheek 3 Open in de ontwerpmodus van Muse de pagina agenda. Open het paneel Bibliotheek (let op: dit is een ander paneel dan Widgetbibliotheek ). Klik beneden op de knop Musebibliotheek importeren. 4 Navigeer naar de map Bagelshop agenda en open het zojuist gedownloade bestand 6889780_496519_musegrid-slider.mulib. Opmerking: Je komt via het paneel Bibliotheek ook op de muse-site terecht door te klikken op Adobe Muse Exchange. Ook kun je in de Finder dubbelklikken op een.mulib-bestand om deze in het paneel Bibliotheek te laden. G. Zoals je ziet zijn de widget en de andere elementen net niet gelijk aan de paginabreedte. Je zult de breedte van de afzonderlijke elementen moeten aanpassen. 6 Sleep de handle rechts beneden naar de rechter pagina-rand (breedte 960px). Dit is een licht/donkergrijze achtergrond die geen deel uitmaakt van de slideshow-widget. Klik dan op de hoofdafbeelding (het besturingspaneel toont Doel. Sleep de handle rechts beneden met de hoofdlettertoets ingedrukt tot een breedte van 960 px. Zorg ook dat X=0 px en Y=80 px. 7 Herpositioneer tot slot de vier trigger -kaders, zodat ze horizontaal evenveel ruimte innemen. Let op: elk trigger-kader bevat twee ingesloten tekstkaders. Verplaats de trigger -kaders ook iets naar beneden zodat het donkergrijze driehoekje onder de donkergrijze lijn valt. De pagina agenda ziet er nu als volgt uit: 5 Open de map Slideshow (Compostion Widget) en sleep de Slideshow Widget naar de pagina. Verplaats de groep naar de linkerhoek net onder de koptekst: X=0 px en Y=80 px. 6 Je hebt nu een groep geplaatst waar de widget onderdeel van uitmaakt. Om de afzonderlijke elementen te kunnen aanpassen, degroepeer je eerst via Object Groep opheffen 65
Parallax Scrolling Op de home-pagina van Bagel Boulevard komt veel informatie, die met behulp van Parallax Scrolling, aan de bezoeker van de site wordt getoond. De pagina-navigatie geschiedt door te scrollen of door verwijzing naar zogenaamde Opmaak van de pagina home De pagina home zal er anders uit komen te zien als de overige pagina s en is om die reden gebaseerd op een eigen stramien: homestramien. De rest van de vormgeving pas je toe op de pagina home zelf, die zal bestaan uit een algemene inleiding en vier secties ( bagels, muffins, lattes en desserts ). 1 Open de pagina home en maak de volgende transparante tekstkaders met een lijndikte van 0 px: Alles in de laag Laag 1. ankers. X=236 px Y=265 px B=500 px H=250 px X=178 px Y=550 px B=185 px H=110 px X=370 px Y=550 px B=334 px H=110 px X=236 px Y=700 px B=390 px H=210 px onze algemene inleiding inleiding Bagels kopjes en omschrijving twee bagels kopjes en omschrijving twee bagels bagels kopjes en omschrijving twee bagels kopjes en omschrijving twee bagels X=236 px, Y=265 px, B=500 px, H=250 px (voor de algemene inleiding) X=178 px, Y=550 px, B=185 px, H=110 px (voor segmentwoord onze ) X=370 px, Y=550 px, B=334 px, H=110 px (voor segmentwoord bagels ) X=236 px, Y=700 px, B=390 px, H=210 px (voor inleiding bagels) X=236 px, Y=950 px, B=254 px, H=185 px (voor kopje en omschrijving van twee bagels) X=528 px, Y=950 px, B=254 px, H=185 px (voor kopje en omschrijving van twee bagels) X=236 px, Y=1145 px, B=254 px, H=185 px (voor kopje en omschrijving van twee bagels) X=528 px, Y=1145 px, B=254 px, H=185 px (voor kopje en omschrijving van twee bagels) 2 Als lijn onder de titel maak je een rechthoek: X=178 px, Y=657 px, B= 783 px, H=2 px, zonder lijndikte maar met de vulkleur # 78A0C7. X=236 px Y=950 px B=254 px H=185 px X=528 px Y=950 px B=254 px H=185 px X=236 px Y=1145 px B=254 px H=185 px X=528 px Y=1145 px B=254 px H=185 px 3 Klik in de Finder (of in Windows) in de map Bagelshop home dubbel op het tekstbestand home.pages (of op de PC: home.docx ) om het te openen (in Pages of MS Word). Kopieer de eerste tekstonderdelen uit dit tekstbestand en plak ze in Muse in de tekst kaders van stap 1. In de laatste vier kaders plak je de kopjes en omschrijvingen van twee soorten bagels. 82 hoofdstuk 8 PARALLAX SCROLLING
4 Geef de tekstonderdelen vorm en maak gebruik van alinea stijlen: - algemene inleiding: hiervoor heb je al eerder een alineastijl gemaakt met de naam inleiding (PT Sans Narrow, corps 19 pt, kleur # 4E87AD). Pas deze alineastijl toe; - segmentwoorden ( onze en bagels ): PT Sans Narrow bold, corps 100 pt, kleur # 78A0C7, naam alineastijl: segmentwoord ; - inleiding bagels: zelfde als alineastijl inleiding ; - kopje voor bagels: PT Sans Narrow bold, corps 19 pt, kleur # 4E87AD, naam alineastijl: kopje ; - omschrijving bagels: PT Sans Narrow, corps 15 pt, kleur # 4E87AD, naam alineastijl: omschrijving. Intermezzo Tekstbestanden in formaten anders dan.txt moeten via kopiëren en plakken in Muse worden geplaatst. Als alternatief kun je de tekstbestanden openen in het oorspronkelijke tekstverwerkingsprogramma en vervolgens exporteren naar het.txt-formaat. Teksten in dat formaat zijn via het commando Bestand > Plaatsen D wel te importeren in Muse 5 Voor de algemene inleiding maak je op de volgende manier een beginkapitaal. Maak een tekstkader: B=40 px, H=84 px. Typ hierin de letter B en geef deze vorm: PT Sans Narrow bold, corps 70 px, kleur # 4E87AD. Knip dit tekstkadertje via X (zodat het in het geheugen staat) en plaats de tekstcursor aan het begin van de algemene inleiding. Plak het kadertje met de beginkapitaal via V. 6 Open het paneel Omloop en kies. Hierdoor loopt de tekst om het kadertje met beginkapitaal. Om de hoogte van de beginkapitaal aan te passen naar drie regels, pas je eerst de regelafstand in het paneel Tekst aan naar 85%. Daarna is de hoogte van het kadertje aan te passen naar 60 px. Nu loopt de beginkapitaal over drie regels. Wis tot slot de kleine B. Het kadertje met beginkapitaal over drie regels Ankers Ankers worden toegepast om naar een specifieke sectie van een pagina te gaan. Omdat de pagina home van Bagel Boulevard uit vier secties zal bestaan (bagels, muffins, lattes en desserts), maak je in de volgende stappen vier ankers aan. Intermezzo Om te navigeren naar elementen op één lange pagina worden ankers gebruikt. Ankers zijn onzichtbare posities op de pagina waarnaar gelinkt kan worden. Vaak komen ze voor in combinatie met een nagivatie- of menubalk op dezelfde pagina. Als je op links naar ankers klikt, zie je de pagina op het scherm verschuiven. Het is ook mogelijk te linken naar ankers op andere pagina s. 83
SEO in Muse BIJLAGE A Muse is gemaakt voor grafisch vormgevers, maar om een site goed vindbaar te laten zijn op het web, zul je behalve de vormgeving rekening moeten houden met SEO oftewel Search Engine Optimization. Door o.a. het instellen van metagegevens, (als trefwoorden, paginanaam en -titels) en alternatieve beschrijvingen van afbeeldingen bereid je de site voor op de zoekmachines van Google en andere. Uiteindelijk leidt dit tot betere vindbaarheid en dus hogere bezoekersaantallen. Wat kun je zoal instellen in Muse? Beschrijving Een korte en adequate omschrijving van je site en/of de inhoud van de specifieke pagina. Een beschrijving zal de vindbaarheid van je site vergroten als het tussen 120 en 180 karakters bevat en de kernwoorden van de site of pagina worden gebruikt. Geen of een niet adequate beschrijving zal de vindbaarheid van de site verlagen. Opmerking: voor onze startpagina zou de volgende beschrijving adequaat zijn: Bagel Boulevard levert de lekkerste bagels, muffins, lattes en desserts, zowel online als in haar vestiging te Amsterdam (Prinsengracht 581H). Metagegevens Hoe je site of een pagina ervan in de zoekresultaten van Google e.a. verschijnt is onder meer afhankelijk van de metagegevens (metadata) die je hebt ingevoerd. Deze metagegevens omvatten de beschrijving, trefwoorden paginanaam en paginatitel. Je kunt ze instellen via het menucommando Pagina Pagina-eigenschappen... in de tabbladen Metagegevens en Opties. Trefwoorden Trefwoorden (sleutelwoorden) helpen eveneens de vindbaarheid te verhogen. Het kunnen woordcombinaties of losse woorden zijn, gescheiden door een komma. Opmerking: voor de meeste pagina s van Bagel Boulevard zouden de volgende trefwoorden adequaat zijn: bagel, Bagel Boulevard, muffin, lattes, desserts, bagel ontbijt, bagel lunch, Prinsengracht 581H Amsterdam, online bagels bestellen. Paginanaam Deze naam heb je al opgegeven in de modus Overzicht (site-overzicht) als naam voor de pagina. Die naam kun je hier wijzigen, maar dat is niet aan te bevelen omdat dan ook de naam van het navigatiemenu-item wijzigt (als de pagina onderdeel uitmaakt van een navigatiemenu). Voor SEO is de naamgeving van de pagina in principe niet relevant. Paginatitel Door de optie Gelijk aan paginanaam uit te vinken kun je een aparte paginatitel opgeven. Deze titel zie je terug in het tabblad van je browser en is van groot 100 ADDENDA SEO IN MUSE
belang voor een goede vindbaarheid. Het is een goede gewoonte deze titel iets ruimer te omschrijven dan de paginanaam, maar niet meer dan ± 5 woorden. Opmerking: voor de pagina Menu zou de volgende paginatitel adequaat zijn: Bagel Boulevard ontbijt- en lunch-menu s. Voor- en achtervoegsel paginatitel (alleen stramienpagina s) Uitsluitend in de pagina-eigenschappen van stramienpagina s bestaat de mogelijkheid om een voor- of achtervoegsel voor paginatitels op te geven. Alle pagina s die op het betreffende stramien zijn gebaseerd, laten dan naast de titel ook dit voor- of achtervoegsel in het tabblad van de browser zien. Gewoonlijk zet je er een scheidingsteken bij. Bestandsnaam Dit is de naam die het html-bestand zal krijgen bij htmlexport of upload naar Business Catalyst. In de meeste gevallen is het prima om deze gelijk te houden aan de paginanaam. Door de optie Gelijk aan paginanaam uit te vinken, kun je indien gewenst een andere bestandsnaam opgeven. Dit is niet mogelijk voor de startpagina die verplicht de bestandsnaam index.html heeft. Opmerking: voor het basisstramien zou het volgende Voorvoegsel adequaat zijn: Bagel Boulevard Alinealabels Alinealabels (Paragraph tags) vormen een andere me tho de om de vindbaarheid van een site of pagina te vergroten. Zoekmachines maken namelijk onderscheid tussen tekstonderdelen als titels, kopjes en platte Sitemap Over het algemeen laat je de optie pagina opnemen in sitemap.xml aangevinkt. Hierdoor kan de pagina nog gemakkelijker worden gevonden door bezoekers en zoekmachines. 101 SEO IN MUSE
tekst als in de html aan deze tekstonderdelen specifieke labels zijn gekoppeld als H1, H2, p. In Muse kun je deze belangrijke labels voor SEO aan alinea s koppelen in het paneel Tekst, maar ook via alineastijlen. Open daarvoor het dialoogvenster Opties voor alineastijl, dat zichtbaar wordt als je in het paneel Alineastijlen dubbel op een stijlnaam klikt. Bij Alinealabel kies je dan een html-label dat qua importantie overeenkomt met je stijl. Voor titels op een pagina kies je gewoonlijk Titel (h1) en voor tussenkopjes bijvoorbeeld Subkop (h3). Als je de site exporteert naar html zal dan bijvoorbeeld de code <H1></H1> worden toegevoegd aan de titel en daar kunnen de zoekmachines mee overweg. Afbeeldinglabels Voor afbeeldingen kun je Knopinfo en Alternatieve tekst opgeven door met de rechtermuisknop op een afbeelding te klikken en in het contextmenu te kiezen voor Afbeeldings eigenschappen bewerken... De Knopinfo die je in het dialoogvenster typt, zal te zien zijn als je in de browser met de muis over de betreffende afbeelding staat. Deze tekst is gewoonlijk geel gemarkeerd. Alternatieve tekst is bedoeld voor bezoekers die de weergave van afbeeldingen hebben uitgeschakeld of visueel gehandicapten. Deze alternatieve tekst zal worden voorgelezen door computerschermlezers. Voor beeldgeoriën teerde websites kunnen Knopinfo en Alternatieve tekst een bijdrage leveren in de SEO, voor tekstgeoriënteerde sites zijn ze niet strikt noodzakelijk. SEO-vriendelijke lettertypen In het kader van SEO is het onverstandig lettertypen toe te passen die op je computersysteem zijn geïnstalleerd, de zogenaamde systeemlettertypen. Omdat er geen zekerheid bestaat of bezoekers over dezelfde lettertypen beschikken als jij, bestaat de kans dat deze worden vervangen door algemeen voorkomende lettertypen. Muse ondervangt dit probleem door in Muse toegepaste systeemlettertypen bij export om te zetten naar afbeeldingen. Hierdoor is de vormgeving weliswaar gewaarborgd, maar zoekmachines kunnen de tekst dan niet als zodanig herkennen. De vindbaarheid van je site kan er onder lijden. Het alternatief zijn web- of webveilige lettertypen. Zie ook het theorie-artikel over Lettertypen. Opmerking: in een aantal gevallen dient een systeemlettertype als decoratie (denk aan handgeschreven of sierletters) of is de SEO minder belangrijk. Je kunt deze teksten dan omzetten in afbeeldingen en een Alternatieve tekst geven. Voor titels, koppen en platte tekst is het echter goed gebruik af te zien van systeemlettertypen. 102 ADDENDA SEO IN MUSE