Opmerking:

Adobe Muse voegt geen nieuwe functies meer toe en stopt op donderdag 26 maart 2020 met de ondersteuning. Zie de pagina Einde van levensduur voor Adobe Muse voor meer informatie en assistentie.

Werken met hiërarchische stramienpagina's

Met Muse kunt u stramienpagina's maken die worden toegepast op andere stramienpagina's. Het functioneren van hiërarchische stramienpagina's valt te vergelijken met de manier waarop stramienpagina's kunnen worden toegepast op een pagina in de overzichtsweergave. In eerdere versies van Muse kon u meerdere stramienpagina's maken, maar u kon per keer slechts één stramienpagina met een set pagina-elementen op een webpagina toepassen.

Als u in het verleden een website met twee verschillende gedeelten wilde maken die wel op elkaar leken, maar er toch anders uitzagen, kon u een stramienpagina dupliceren, deze iets wijzigen en vervolgens toepassen op bepaalde pagina's. Hierdoor bevatten beide stramienpagina's vaak dezelfde elementen. Als u de website dan bijwerkte, moest u de inhoud in beide stramienpagina's bewerken om alle elementen synchroon te houden.

Met Muse 4.0 en hoger kunt u een pagina A-stramien maken die de gemeenschappelijke elementen bevat die op meerdere stramienpagina's worden weergegeven (zoals het toevoegen van de achtergrond en voettekst, zoals in de vorige secties is beschreven). Vervolgens maakt u aanvullende stramienpagina's die alle elementen van de pagina A-stramien overnemen, plus alle elementen die uniek zijn voor de eerste sectie. Als u een derde stramienpagina maakt, kan die alle elementen van de A-stramienpagina gebruiken, plus alle elementen die uniek zijn voor de tweede sectie.   

Het voordeel van het gebruik van hiërarchische stramienpagina's is dat u slechts één instantie van een element hoeft te gebruiken. Wanneer u het ontwerp van een website wijzigt, hoeft u elk element maar één keer te bewerken en alle instanties ervan worden dan automatisch bijgewerkt op de site.

Stramienpagina's worden beheerd en toegepast in de overzichtsweergave. Net zoals u op de miniatuur van een stramienpagina kunt klikken en deze naar een paginaminiatuur kunt slepen om de stramienpagina erop toe te passen, kunt u meerdere stramienpagina's maken en vervolgens op deze stramienpagina's klikken en ze naar een andere stramienpagina slepen. U kunt desgewenst ook met de rechtermuisknop op een willekeurige stramien- of paginaminiatuur in de overzichtsweergave klikken. Kies in het contextmenu dat verschijnt de optie Stramienen om de stramienpagina in te stellen.

Let op: als u de aanwijzer boven een pagina- of stramienpaginanaam houdt, wordt er knopinfo weergegeven met de hiërarchie van de toegepaste stramienpagina's voor die pagina of stramienpagina.

U hebt nu de pagina A-stramien gemaakt met een zich herhalende browserachtergrond en voettekstinhoud. In de volgende sectie maakt u een nieuwe stramienpagina die de inhoud van de pagina A-stramien overneemt. U gaat een koptekst aan deze pagina toevoegen, zodat u deze op de sitepagina's kunt toepassen. Voer de volgende stappen uit:

  1. Terwijl u het site-overzicht weergeeft in de overzichtsweergave, plaatst u de cursor boven de paginaminiatuur A-stramien om aan weerszijden een plus-teken weer te geven. Klik op het plus-teken rechts van de pagina A-stramien om een gloednieuwe stramienpagina te maken. Standaard krijgt de nieuwe stramienpagina de naam B-stramien.
  2. Dubbelklik op het tekstveld B-stramien onder de miniatuur om de pagina te bewerken. Typ een toepasselijkere naam voor de nieuwe stramienpagina die u net hebt gemaakt: Main.
  3. Klik met de rechtermuisknop op de miniatuur van de stramienpagina Main en kies Stramienen > A-stramien in het contextmenu dat wordt weergegeven.
In deze zelfstudie leert u de werkruimte van Adobe Muse kennen en ziet u hoe u een volledig functionerende website kunt maken zonder dat u code hoeft te schrijven. U leert ook hoe u een overzicht van de website maakt, hoe u gebruik kunt maken van stramienpagina's en welke opties voor browservulling er zijn in Muse.
Kies A-stramien in het menu om deze toe te passen op de stramienpagina Main.

Als u de pagina A-stramien hebt toegepast op de stramienpagina Main, wordt de miniatuur van de stramienpagina Main bijgewerkt met dezelfde weergave. Op het blauwe label onder de miniatuur van de stramienpagina Main staat [A-stramien], omdat u deze in Stap 3 hebt toegepast op de stramienpagina Main.

Het is een belangrijk verschil dat de stramienpagina Main in feite niet de elementen van A-stramien bevat, u hebt A-stramien immers niet gewoon gedupliceerd. In plaats daarvan stelt u op de stramienpagina Main een koppeling in naar A-stramien, zodat alle nieuwe inhoud die u toevoegt aan A-stramien automatisch ook op de stramienpagina Main wordt weergegeven.

Zoals al eerder vermeld, is het grote voordeel van hiërarchische stramienen dat de voettekst, het menu en de achtergrond nog steeds alleen op de pagina A-stramien bestaan. Als een klant dus later wil dat u een andere herhalende achtergrond gebruikt, kunt u de pagina A-stramien bijwerken. De stramienpagina Main wordt dan automatisch ook bijgewerkt.

Verderop in deze zelfstudie gaat u twee verschillende stramienpagina's maken voor verschillende weergaven in de twee verschillende sitesecties. U kunt nu echter de pagina's in de overzichtsweergave bijwerken, zodat deze allemaal de nieuwe stramienpagina Main gebruiken in plaats van de pagina A-stramien.

  1. Klik en sleep de stramienpagina Main naar de miniatuur van de food-pagina linksboven in het scherm. Tijdens het slepen van de miniatuur van de stramienpagina Main naar de miniatuur van de food-pagina, verandert de blauwe tekst onder de miniatuur van de food-pagina van [A-stramien] in [Main].

Dit is de meest gebruikelijke manier om stramienpagina's op pagina's toe te passen in de overzichtsweergave, maar u kunt ook het contextmenu gebruiken:

  1. Klik met de rechtermuisknop op de miniatuur van de events-pagina en kies Stramienen > Main in het contextmenu dat wordt weergegeven.
In deze zelfstudie leert u de werkruimte van Adobe Muse kennen en ziet u hoe u een volledig functionerende website kunt maken zonder dat u code hoeft te schrijven. U leert ook hoe u een overzicht van de website maakt, hoe u gebruik kunt maken van stramienpagina's en welke opties voor browservulling er zijn in Muse.
Gebruik het contextmenu om Main in te stellen als de stramienpagina voor de events-pagina.

  1. Gebruik uw favoriete methode (beschreven in stap 4 en 5) om Main in te stellen als de stramienpagina voor de overige drie pagina's: home, about en visit.

Na het aanbrengen van deze wijziging staat op alle blauwe tekstlabels onder alle paginaminiaturen nu de tekst [Main]. Als u de cursor echter boven een van de blauwe labels plaatst, verschijnt er knopinfo waarin de hiërarchie van de toegepaste stramienpagina's wordt weergegeven.

In deze zelfstudie leert u de werkruimte van Adobe Muse kennen en ziet u hoe u een volledig functionerende website kunt maken zonder dat u code hoeft te schrijven. U leert ook hoe u een overzicht van de website maakt, hoe u gebruik kunt maken van stramienpagina's en welke opties voor browservulling er zijn in Muse.
Nuttige knopinfo die de hiërarchie beschrijft, verschijnt wanneer u de muis boven het label plaatst.

In dit voorbeeld bevat de hiërarchie slechts één niveau. Met andere woorden: de stramienpagina Main neemt de inhoud van de stramienpagina A-stramien over. U dient echter te weten dat u desgewenst een reeks stramienpagina's kunt maken. U kunt bijvoorbeeld een stramienpagina maken met de naam Koptekst die alleen de koptekstinhoud bevat, en vervolgens een andere stramienpagina maken met de naam Voettekst die de inhoud van de stramienpagina Koptekstoverneemt. Vervolgens maakt u nog een stramienpagina met de naam Main die alles op de stramienpagina Voettekst overneemt (en dus ook de koptekst). Afhankelijk van het ontwerp van een site en de wetenschap dat bepaalde elementen waarschijnlijk worden gewijzigd, kunt u verschillende niveaus van overname maken. Het op deze manier onderverdelen van het ontwerp lijkt op het maken van symbolen, omdat u specifieke delen van een ontwerp kunt isoleren, en deze delen later gemakkelijk weer kunt vinden en bewerken.

Ga naar de volgende zelfstudie, Uw eerste website maken met Muse, deel 2. Daar leert u werken met widgets (vooraf samengestelde, interactieve sitefuncties die u naar pagina's kunt slepen). Met widgets kunt u snel geavanceerde functionaliteit toevoegen aan pagina's zonder code te hoeven schrijven. U leert het gedrag en de weergave van widgets bewerken, zodat u de weergave ervan in het site-ontwerp kunt aanpassen.

Koptekstinhoud toevoegen aan de hoofdstramienpagina

Nu u de voettekst hebt voltooid door een menuwidget toe te voegen aan de hoofdstramienpagina, gaat u de navigatie op hoofdniveau toevoegen. Ga als volgt te werk om inhoud in het koptekstgebied toe te voegen.

  1. Dubbelklik in de overzichtsweergave op de miniatuur van de hoofdstramienpagina om de pagina te openen en in de ontwerpweergave te bewerken (als deze nog niet geopend is).
  2. Gebruik de tool Rechthoek om een rechthoek te tekenen die in de linkerbovenhoek van het zichtbare browsergebied begint en de volledige breedte beslaat tot de rechterbovenhoek. Gebruik de tool Selecteren om de handgrepen aan de boven-, linker- en rechterzijde van de rechthoek te slepen totdat kortstondig het rode kader zichtbaar is om aan te geven dat de rechthoek op een breedte van 100% is ingesteld, net als toen u de voettekst maakte.
fig_30_building
Teken een rechthoek die het volledige bovenste gedeelte van het browservenster beslaat.

 

Nadat u de handgrepen hebt gesleept, moet de rechthoek ongeveer 1160 pixels breed en 253 pixels hoog zijn. De horizontale X-waarde is -100, wat betekent dat de linkerbovenhoek van de rechthoek zich 100 pixels van de linkerbovenhoek van de pagina bevindt. De Y-waarde is 0, wat betekent dat de linkerbovenhoek van de rechthoek verticaal overeenkomt met de linkerbovenhoek van de pagina). Als u deze waarden exact wilt instellen, kunt u de velden in het deelvenster Transformeren of het regelpaneel bekijken terwijl de rechthoek is geselecteerd.

  1. Stel de lijnbreedte in op 0 en gebruik het menu Vulling om de vulkleur op Geen in te stellen. Klik op de map rechts van de afbeeldingssectie en blader om de afbeelding tile-header.png te selecteren. Stel het menu Aanpassen in op Naast elkaar.
fig_31_building
Gebruik het menu Aanpassen om de achtergrondafbeelding horizontaal te herhalen.

 

Hoewel de koptekst bestaat uit één rechthoek, geeft de zich horizontaal herhalende achtergrond de indruk dat er sprake is van een grijze rechthoek boven op een zwarte rechthoek.

  1. Kies Bestand > Plaatsen of gebruik de sneltoetscombinatie Command-D (Mac) of Control-D (Windows) om het dialoogvenster Importeren te openen.
  2. Blader naar het bestand bg-ribbon.png in de map met voorbeeldbestanden en selecteer dit bestand. Klik op Openen om het bestand te kiezen en sluit het dialoogvenster Importeren.
  3. Klik eenmaal in het midden van de koptekstrechthoek, boven aan de pagina. Hierdoor wordt een enkele instantie van het bestand bg-ribbon.png met de oorspronkelijke afmeting geplaatst.
  4. Gebruik de tool Selecteren om het oranje lint uit te lijnen, zodat dit verticaal gecentreerd wordt boven aan de koptekst en de breedte van de pagina beslaat.
fig_32_building
Oranje lint grafisch zo ingesteld dat dit in de koptekst is gecentreerd.

 

Het oranje lint zal de achtergrond van het menu op hoofdniveau vormen dat u in de volgende sectie gaat toevoegen.

Een stramienpagina dupliceren

De koptekstinhoud van de hoofdstramienpagina is voltooid. Hoewel u de hoofdstramienpagina zou kunnen gebruiken voor elke pagina op de site, heeft dit siteontwerp twee secties. Het ontwerp van de hoofdstramienpagina zal uiteindelijk worden gebruikt voor de pagina's "home" en "visit". Een tweede, iets andere, hoofdstramienpagina zal worden gebruikt voor de pagina's "food", "events" en "about".

Ga als volgt te werk om de hoofdstramienpagina te dupliceren:

  1. Klik in de overzichtsweergave met de rechtermuisknop op de miniatuur van de hoofdstramienpagina.
  2. Kies Pagina dupliceren in het contextmenu dat wordt weergegeven.
fig_38_building
Gebruik het menu om de bestaande hoofdstramienpagina te dupliceren.

 

Een nieuwe hoofdstramienpagina wordt rechts van de hoofdstramienpagina weergegeven met de standaardnaam Main copy. Aangezien u de hoofdstramienpagina dupliceert, is de nieuwe pagina al gebaseerd op de pagina A-Master.

  1. Dubbelklik op het veld Naam onder de hoofdstramienpagina die u zojuist hebt gemaakt en wijzig de naam ervan in Voorgrond.

Hierna gaat u leren hoe u de rangschikking van elementen op een hoofdstramienpagina kunt instellen, zodat in plaats van items die altijd onderop worden weergeven nu boven op pagina-elementen worden weergegeven. Het is raadzaam uw werk op dit punt op te slaan.

  1. Kies Bestand > Site opslaan.

Een van de voordelen van het maken van een duplicaat van de hoofdstramienpagina is dat u een deel van de inhoud kunt instellen op weergave boven op andere pagina-inhoud, bijna alsof u Ordenen > Naar voorgrond hebt geselecteerd. Dit voorgrond-gedrag is gewenst voor de pagina's "food" en "events".

De mogelijkheid om de stapelvolgorde van elementen van de hoofdstramienpagina in te stellen, is een nieuwe functie in Muse 4.0. In eerdere versies moest u koptekst- of voettekstelementen op elke pagina opnemen in plaats van op een hoofdstramienpagina als u algemene plaatselementen boven op andere inhoud in de paginalay-out wilde opnemen.

Elementen instellen in stramienpagina's voor weergave op de voorgrond

In Muse kunt u via de interface van de ontwerpweergave een pagina-element selecteren en Object > Naar voorgrond, Naar voren, Naar achtergrond, Naar achteren selecteren om een item weer te geven boven op of onder op een ander item op de pagina. (U kunt ook met de rechtermuisknop op een element of groep klikken en Ordenen > Naar voorgrond, Naar voren, Naar achtergrond, Naar achteren selecteren om de stapelvolgorde in te stellen).

Bij het ontwerpen van sites met eerdere versies van Muse is het standaardgedrag dat elementen van een hoofdstramienpagina altijd achter alle elementen op de pagina worden getoond wanneer de pagina wordt weergegeven. Deze vorming van achtergrondlagen kon soms problematisch zijn (afhankelijk van het siteontwerp) omdat de enige tussenoplossing het kopiëren en plakken was van elementen (die u normaal gesproken op een stramienpagina zou opnemen) op alle sitepagina's waar u deze bovenop wilde weergeven.

Muse bevat de nieuwe mogelijkheid om de rangschikking van elementen op stramienpagina's te beheren. In plaats van altijd alles op een stramienpagina op te nemen achter pagina-elementen, kunt u nu elementen op stramienpagina's selecteren en deze instellen als voorgrondelement. Items op een hoofdstramienpagina die als voorgrondelementen worden ingesteld, worden boven op alle pagina-elementen weergegeven.

Deze nieuwe optie is beschikbaar via Object > Verplaatsen naar > Stramienvoorgrond. Bovendien kunt u met de rechtermuisknop op elk element in de ontwerpweergave klikken tijdens het bewerken van een stramienpagina en Verplaatsen naar > Stramienvoorgrond kiezen in het contextmenu dat wordt geopend.

In dit voorbeeldproject vereist het ontwerp dat de inhoud van de pagina's "home" en "visit" de standaardstapelvolgorde gebruikt (pagina-elementen worden weergegeven boven op de koptekst in de hoofdstramienpagina), maar de pagina's "food", "events" en "about" niet.

Voor de pagina's "food" en "visit" zult u de stramienpagina Voorgrond bewerken, zodat de koptekstinhoud op de voorgrond wordt weergegeven, boven op de pagina-inhoud bij het bladeren door de pagina's. Voer de volgende stappen uit:

  1. Klik in de overzichtsweergave op de miniatuur van de stramienpagina Voorgrond om de pagina te openen en te bewerken in de ontwerpweergave (als deze nog niet is geopend).
  2. Gebruik de tool Selecteren om op de volledige koptekstinhoud te klikken en deze te selecteren, inclusief de rechthoek met de zich herhalende achtergrondafbeelding, het geplaatste oranje lint, de menuwidget en het bewegende GIF-logo in het midden.
  3. Terwijl de volledige koptekstinhoud is geselecteerd, klikt u met de rechtermuisknop en kiest u Verplaatsen naar > Stramienvoorgrond. In tegenstelling tot het gebruikelijke blauwe kader voor geselecteerde objecten, krijgen items die u selecteert voor weergave op de voorgrond een rood kader.
fig_39_building
Verplaats de koptekstinhoud naar de voorgrond via het contextmenu.

Op die manier weet u zeker dat de koptekst boven op de pagina-elementen wordt weergeven bij de pagina's waar de stramienpagina Voorgrond wordt toegepast.

  1. Terwijl de volledige koptekst is geselecteerd, zet u deze aan de bovenkant van de pagina vast, zodat zelfs wanneer door de pagina wordt gebladerd de koptekst niet meeverschuift. In deel 7 leert u meer over het vastzetten van objecten, maar nu klikt u in het regelpaneel op de vastzetpositie midden boven om de koptekst vast te zetten.
fig_40_building
Zet de geselecteerde koptekst vast door de positie midden boven te selecteren.

  1. Klik en sleep de stramienpagina Voorgrond op de pagina "food" om deze toe te passen. Herhaal deze stap nog tweemaal om de stramienpagina Voorgrond toe te passen op de pagina's "events" en "about".

Nadat u deze wijziging hebt aangebracht, wordt in de blauwe labeltekst het woord [Voorgrond] weergegeven om aan te geven dat de pagina's "food", "events" en "about" nu de stramienpagina Voorgrond gebruiken. Als u de cursor op het blauwe label [Voorgrond] plaatst, wordt knopinfo getoond waarin wordt aangegeven dat de stramienpagina Voorgrond is gebaseerd op de pagina A-Master.

Bij het ontwerpen van uw eigen siteprojecten kunt u met de nieuwe functie Verplaatsen naar voorgrond experimenteren om elementen op stramienpagina's op de voorgrond te plaatsen. Verderop in deze zelfstudie gaat u het ontwerp van de pagina's "food" en "events" voltooien en ziet u hoe dankzij de voorgrondinstelling de koptekst boven op andere inhoud op de pagina wordt weergegeven.

In het volgende deel van deze zelfstudie, Uw eerste website maken met Muse, deel 4, leert u hoe u kunt werken met ingesloten HTML om code weer te geven die van andere websites is gekopieerd. U zult bovendien leren hoe u een lichtbakcompositiewidget kunt toevoegen aan de pagina "home".

Meerdere stramienpagina's gebruiken en animatie opnemen

In deze sectie leert u meer over het werken met stramienpagina's en hoe u ten behoeve van de consistentie gemeenschappelijke site-inhoud op meerdere stramienpagina's kunt weergeven wanneer u verschillende delen van een site maakt. U leert ook strategieën voor het verplaatsen van elementen van stramienpagina's, omdat het in bepaalde site-ontwerpen handig is om meerdere stramienpagina's te maken en slechts bepaalde afbeeldingen op elke pagina te plaatsen (zoals een site met vier gebieden met een andere kleurcode). U leert ook elementen die normaal gesproken op een stramienpagina staan, verplaatsen naar een specifieke pagina om speciale ontwerpeffecten tot stand te brengen, zoals het boven elkaar plaatsen van items in lagen.

Stramienpagina-inhoud bewerken

Objecten op een stramienpagina worden weergegeven onder inhoud die op een afzonderlijke pagina is geplaatst. Alle objecten die u in de kop- of voettekst van uw startpagina hebt geplaatst, worden in een laag geplaatst vóór de in de kop- en voettekst van de stramienpagina geplaatste achtergrond. Daarom kunnen er situaties optreden waar u elementen van een stramienpagina naar afzonderlijke pagina's moet verplaatsen, zodat deze vóór andere elementen op de pagina worden weergegeven.

De inhoud die aan stramienpagina's wordt toegevoegd, moet later worden bewerkt door de stramienpagina te openen. Als u een pagina opent die aan een stramienpagina is geassocieerd en probeert de koptekst, voettekst of andere stramienpagina-inhoud te bewerken, lijkt deze te zijn vergrendeld. U kunt twee verschillende strategieën gebruiken wanneer u inhoud op een stramienpagina moet wijzigen:

  1. Dubbelklik op de miniatuur van de stramienpagina in de overzichtsweergave en bewerk de inhoud van de stramienpagina in de ontwerpweergave.

  2. Dubbelklik in de overzichtsweergave op de miniatuur van de stramienpagina om deze te openen in de ontwerpweergave. Selecteer de elementen die u wilt bewerken (plaats deze vóór andere elementen door ze op een sitepagina te plaatsen) en kies Bewerken > Knippen of gebruik de sneltoetsen Command-X (Mac) of Control-X (Windows).

  3. Ga terug naar de overzichtsweergave en dubbelklik op de pagina die de (eerdere stramienpagina-)inhoud zal bevatten. Kies Bewerken > Op plaats plakken. Zo komt het element dat (of komen de elementen die) u van de stramienpagina hebt geknipt op dezelfde positie op een normale pagina terecht. Desgewenst kunt u meerdere pagina's openen en Bewerken > Op plaats plakken kiezen om de inhoud die eerst op de stramienpagina stond naar vele andere pagina's van uw site te distribueren.

Desgewenst kunt u ook een bestaande stramienpagina dupliceren. U kunt uw site zodanig configureren dat de meeste pagina's één stramienpagina gebruiken, terwijl een speciale pagina een gedupliceerde, vergelijkbare versie van de stramienpagina gebruikt (met specifieke elementen die van die gedupliceerde stramienpagina naar de speciale pagina van de site zijn gekopieerd). Raadpleeg de volgende subsectie voor meer informatie over het dupliceren van stramienpagina's.

Zodra het object op de afzonderlijke pagina's en niet op de stramienpagina staat, kunt u het naar wens op de afzonderlijke pagina's bewerken en ervoor zorgen dat het object op de voorgrond wordt weergegeven.

In dit voorbeeldproject wordt het logo van Kevin's Koffee Kart (rode fiets met banner) momenteel vlak boven de sitenavigatie in de koptekst weergegeven. De kop- en voettekstinhoud wordt automatisch weergegeven op elke pagina omdat de startpagina (en elke andere pagina die u maakt) standaard is gekoppeld aan de pagina A-Master die deze inhoud bevat. Vaak kunt u ten behoeve van de consistentie websites maken die allemaal dezelfde stramienpagina gebruiken.

Deze site heeft echter een uniek geanimeerd logo dat alleen op de startpagina wordt weergegeven. Als u de live voorbeeldsite van Kevin's Koffee Kart bekijkt, ziet u dat het rode fietslogo één keer op de startpagina wordt geanimeerd wanneer de pagina wordt geladen. Het lijkt alsof de fiets de pagina van de linkerzijde komt binnenrijden. Als u klikt om andere pagina's te bekijken, ziet u dat de animatie alleen op de startpagina optreedt. Alle andere logo's op de pagina's van de site zijn statisch.

In de volgende subsectie leert u hoe u een gedupliceerde stramienpagina maakt en hoe u pagina's toewijst voor het gebruiken van een specifieke stramienpagina in de overzichtsweergave.

Stramienpagina's dupliceren en verwijderen

  1. Klik op de koppeling Overzicht om toegang te krijgen tot de overzichtsweergave. Zoek de miniatuur A-Master, onder aan de interface van de overzichtsweergave.

  2. Houd de cursor boven de miniatuur A-Master en wanneer u er met de muis overheen gaat, ziet u dezelfde plustekenpictogrammen (+) als wanneer u nieuwe pagina's aan de sitemap toevoegt. Klik op het plus-teken (+) rechts van de miniatuur van A-master. U kunt deze techniek wanneer u maar wilt gebruiken om een volkomen nieuwe stramienpagina te maken. De miniatuur is leeg, wat betekent dat deze niet de inhoud bevat die u aan de pagina A-Master hebt toegevoegd. De nieuwe stramienpagina krijgt standaard de naam B-Master, maar u kunt op het veld onder de miniatuur klikken om de pagina een andere naam te geven.

    In dit geval maakt u niet een geheel nieuwe stramienpagina, maar maakt u een duplicaat van de bestaande A-Master.

  3. Klik op het X-pictogram in de rechterbovenhoek van de pagina B-Master om deze te verwijderen. (Als u met deze methode per ongeluk een bestaande stramienpagina wist, kiest u Bewerken > Ongedaan maken Stramienpagina verwijderen om de stramienpagina te herstellen.)

  4. Klik met de rechtermuisknop op de miniatuur van de pagina A-Master en kies Pagina Dupliceren in het contextmenu dat wordt weergegeven. Er wordt een nieuwe miniatuur weergegeven met een kopie van de stramienpagina, genaamd A-Master-kopie.

    fig_59_getting
    De pagina A-Master dupliceren in de overzichtsweergave.

  5. Klik op het veld onder de miniatuur van de A-Master-kopie en geef de gedupliceerde stramienpagina een nieuwe naam, namelijk MasterFlash. U gebruikt deze pagina voor het toevoegen van de veelzijdige media-inhoud die uitsluitend op de startpagina wordt geanimeerd. Alle andere pagina's blijven naar de pagina A-Master verwijzen die een statische versie van het logo in de koptekst weergeeft.

  6. Klik met de rechtermuisknop op de miniatuur van de startpagina . In het menu dat wordt weergegeven, kiest u Stramienpagina's > MasterFlash. Deze bewerking associeert de MasterFlash-stramienpagina aan de startpagina.

    Opmerking:

    U kunt de MasterFlash-miniatuur ook op de miniatuur van de startpagina slepen om deze toe te passen.

Eenmaal toegepast, wordt de naam van de MasterFlash-stramienpagina tussen haakjes weergegeven onder de miniatuur van de startpagina in de overzichtsweergave.

Als u op Voorvertonen klikt, zult u geen verschil zien in de startpagina. Aangezien MasterFlash een gedupliceerde kopie van het bestand A-Master is, wordt de startpagina net als voorheen weergegeven met het statische logo. In de volgende subsectie gaat u echter de MasterFlash-inhoud bewerken om de animatie toe te voegen die alleen op de startpagina zal plaatsvinden.

Het gebruik van gedupliceerde, bijna gelijke (maar net iets andere) stramienpagina's is een ideale manier om een bepaald gedeelte van een website te onderscheiden en om de startpagina uniek te maken, zoals beschreven voor dit project.

In deze zelfstudie leert u stramienpagina's te gebruiken. We analyseren en deconstrueren drie sitelay-outs om te zien hoe u interessante effecten en siteconsistentie kunt bereiken met de gemeenschappelijke elementen op een stramienpagina.

Maar wat is een stramienpagina eigenlijk? Met een stramienpagina kunt u gemeenschappelijke elementen, zoals kop- en voetteksten, logo's en navigatie, op meerdere pagina's op uw site toepassen. U kunt één stramienpagina voor uw site instellen of meerdere stramienpagina's gebruiken, zodat u consistent en snel unieke stijlen op verschillende delen van uw site kunt toepassen.

Standaard maakt Muse een lege startpagina en een lege stramienpagina wanneer u een nieuwe site maakt. Deze pagina's zijn het beginpunt voor alle websites. U kunt een overzicht van de website plannen met lege pagina's en daar later stramienpagina's op toepassen, of u kunt uw website maken door te beginnen met de stramienpagina, deze toe te passen op één pagina (de startpagina) en vervolgens nieuwe pagina's te maken op basis van dat ontwerp.

Sitelay-outs deconstrueren

Het evalueren van verschillende lay-outs voor stramienpagina's is een goede manier om nieuwe strategieën voor siteontwerp te leren. In dit artikel bekijken we drie verschillende in Muse gemaakte sitelay-outs en bekijken we hoe deze zijn gemaakt.

Als u de stappen wilt volgen en de middelen voor elke voorbeeldsite wilt openen, downloadt u de voorbeeldbestanden, decomprimeert u het ZIP-bestand en dubbelklikt u op elk .muse-bestand om het te openen in Muse.

Let tijdens het bekijken van de voorbeeldsites op enkele eigenschappen die worden gebruikt om creatieve site-ontwerpen met eenvoudige navigatie te maken die bezoekers helpen zich te oriënteren terwijl ze de inhoud van de site verkennen:

  • Site-eigenschappen instellen om de afmetingen van alle pagina's te definiëren
  • Hulplijnen gebruiken om de kop- en voettekstgebieden in de stramienpagina te definiëren
  • Objecten vastzetten ten opzichte van het browservenster, zodat deze buiten de paginalay-out vallen
  • Vulling voor achtergrondafbeeldingen instellen op schuifbare of vaste posities om interessante effecten te bewerkstelligen
  • Rechthoeken uitrekken tot deze de volledige breedte van de browser omspannen
  • Accordeonwidgets en diapresentatiewidgets toevoegen om interactieve pagina-inhoud weer te geven
  • Menuwidgets aanpassen en opmaken om sitenavigatie te verschaffen
  • Ankerkoppelingen maken om verticaal of horizontaal naar specifieke paginagedeelten te springen
  • Code van externe sites (ingesloten HTML) plakken om eigenschappen aan pagina's toe te voegen

Probeer tijdens het bekijken van elke voorbeeldsite te schuiven en het browservenster te vergroten of te verkleinen om te zien hoe het live-voorbeeld werkt. Open vervolgens elk .muse-bestand in Muse om te zien hoe de stramienpagina's worden gebruikt om sitelay-outs te standaardiseren voor een meer consistente online-ervaring.

Voorbeeld 1: Happy Valley Adventure

fig01.master.b720

In het eerste voorbeeld zijn de voettekstafbeeldingen onder aan het browservenster vastgezet. Bovendien is de achtergrond van de voettekst ingesteld op een breedte van 100% om de horizontale onderzijde van de pagina te omspannen. De langere pagina-inhoud schuift achter de voorgrond van de voettekst om een luchteffect met een verloop te creëren. Als u op de ankerkoppelingen aan de linkerkant klikt, verplaatst de pagina verticaal naar de desbetreffende sectie. Half doorzichtige grafische elementen en een strategische stapelvolgorde geven de indruk dat u in een ballon door de lucht vliegt.

Let op het volgende terwijl u het .muse-bestand voor deze site bekijkt:

In de stramienpagina verschaft een aantal met verlopen gevulde rechthoeken de achtergrond voor de langere pagina-inhoud.

  • De startpagina bevat een voettekstillustratie met een horizontaal geplaatste achtergrondafbeelding met een breedte van 100% die aan de onderkant van het browservenster is vastgezet. Een tweede voettekstafbeelding (de top van de berg) is gecentreerd en ook vastgezet aan de onderkant van de browser, en zodanig gerangschikt dat deze boven de andere horizontaal geplaatste voettekstafbeelding wordt weergegeven. Dit effect is bereikt door Ordenen > Naar voorgrond te kiezen. Deze strategie is geschikt voor elke beeldschermgrootte.
  • De navigatiekoppelingen aan de linkerzijde springen naar de ankertags die aan de lange, verticaal georiënteerde pagina zijn toegevoegd. Wanneer bezoekers op de koppelingen klikken, verschuift de pagina om de bijbehorende inhoud weer te geven. Het concept ziet er evenwichtig en consistent uit, ook als nieuwe sitesecties zichtbaar worden.
  • De sectie met contactgegevens van de startpagina bevat ingesloten HTML voor het weergeven van contactformulieren om de communicatie met bezoekers en het plannen van komende avonturen te vergemakkelijken.

Voorbeeld 2: Kevin's Koffee Kart

fig02.master.b720
Deze site met meerdere lagen gebruikt een menuwidget en ingesloten HTML-eigenschappen.

De startpagina van de website van Kevin's Koffee Kart bevat Flash-animaties in de koptekst en vastgezette wolkafbeeldingen. Als u schuifbalken gebruikt om door de pagina te bladeren, ziet u dat de achtergrondafbeelding is vastgezet en niet meeschuift, maar dat de pagina-inhoud erboven wordt verschoven. Een presentatie wordt automatisch afgespeeld, waarbij afbeeldingen onder een ingesloten HTML-twitterfeed worden doorlopen.

De menubalk in de koptekst is gemaakt met een horizontale menuwidget om consistente sitenavigatieknoppen te maken die automatisch worden bijgewerkt wanneer u nieuwe pagina's toevoegt. In dit voorbeeld wordt de menuwidget geconfigureerd om zowel pagina's op hoofdniveau als op subniveau weer te geven.

Experimenteer met het menu en zie hoe elke pagina wordt geladen terwijl u op de knoppen klikt. De kop- en voettekst zijn op alle pagina's gelijk, maar de paginahoogten variëren op basis van de inhoud. De bruine voettekst bestaat uit twee rechthoeken met een breedte van 100% die de volledige breedte van het browservenster omspannen en die conformiteit aan elke pagina toevoegen.

De volgende ontwerpconventies zijn gebruikt voor de website van Kevin's Koffee Kart:

  • Deze site bevat twee vergelijkbare stramienpagina's: de stramienpagina zonder de Flash-media die is toegepast op de meeste sitepagina's en een tweede stramienpagina met de Flash-film die alleen is toegepast op de startpagina. Beide stramienpagina's hebben voetteksten met een breedte van 100% met transparante randen en gebruiken ten behoeve van de consistentie dezelfde menuwidget. Nadat de eerste stramienpagina is gemaakt, worden de elementen gekopieerd en op hun plaats in de tweede stramienpagina geplakt om ervoor te zorgen dat alle elementen perfect zijn uitgelijnd.
  • De pagina's worden ingedeeld in de overzichtsweergave om sitesecties van het hoogste niveau en van subniveaus te maken, hetgeen wordt weerspiegeld in de keuzelijstitems van de menuwidgets.
  • De achtergrondafbeeldingskaart die als browservulling wordt gebruikt, is ingesteld om op oorspronkelijke grootte te worden weergegeven in plaats van meerdere afbeeldingen onder of naast elkaar te plaatsen. De achtergrondafbeelding is gecentreerd en zodanig ingesteld dat deze niet onder de inhoud van de pagina wordt geschoven.
  • De pagina-achtergrond is gevuld met een effen witte kleur die enigszins transparant is, zodat de kaartafbeelding op de achtergrond zichtbaar is.
  • De startpagina bevat twee half-doorzichtige wolkafbeeldingen die aan de browser zijn vastgezet. Schuif de pagina verticaal om te zien dat de vastgezette elementen niet worden verplaatst en op dezelfde positie blijven staan als u het browservenster vergroot of verkleint.
  • De startpagina gebruikt ingesloten HTML om live Twitter-feedinhoud te kunnen weergeven.
  • De Koffee-pagina heeft een accordeonobject dat deelvensters uit- en samenvouwt wanneer erop wordt geklikt om meer inhoud weer te geven op een compact gebied van de pagina.
  • Op de pagina Origins ziet u een widget voor een miniaturenpresentatie waarmee een interactieve fotogalerie wordt weergegeven. De pagina Preparation gebruikt ankertagnavigatie om naar elke sectie in de pagina te gaan en de pagina Kart Map bevat ingesloten HTML om een live Google Latitude-kaart weer te geven op basis van de huidige locatie van de mobiele telefoon die voor het account wordt gebruikt.

Voorbeeld 3: More than Square

fig03.master.b720
Sterk overlappende, vastgezette afbeeldingen omringen de schuivende pagina-inhoud.

In het uiteindelijke voorbeeld zijn de gebouwafbeeldingen rechtsboven en linksonder vastgezet om een kader te vormen voor de pagina-inhoud. Het gebouw in de rechterbovenhoek is op de voorgrond geplaatst om de pagina-inhoud aan de bovenzijde te overlappen, terwijl het gebouw linksonder onder de pagina wordt weergegeven.

De pagina-inhoud is gecentreerd, half doorzichtig en verschoven ten opzichte van de architecturale elementen met afgeronde hoeken. De pagina-inhoud wordt verticaal verschoven en de hoogte varieert terwijl u door de pagina's klikt. Koppelingen naar sociale netwerken (Twitter, Facebook en YouTube) blijven aan de linkerkant van de pagina staan ten behoeve van betere wederzijdse koppelingen en een consistent asymmetrisch ontwerp van de hele site.

De startpagina heeft een fotogalerie met de navigatieknoppen Next en Previous, maar de galerie is ook geconfigureerd om de dia's in een laag tempo af te spelen wanneer de gebruiker niet op de knoppen klikt. Op de pagina How to Get Here ziet u een interactieve kaart die is gemaakt aan de hand van ingesloten HTML-code die van Google Maps is gekopieerd.

Let op het volgende terwijl u het .muse-bronbestand voor dit voorbeeld bekijkt:

In dit voorbeeld staan bijna alle gemeenschappelijke pagina-elementen op de stramienpagina. Deze strategie maakt het gemakkelijker om de site bij te werken en wijzigingen in de afzonderlijke pagina-inhoud aan te brengen.

De stramienpagina bevat een niet-schuifbare achtergrondafbeelding als voettekstafbeelding, die linksonder in de browser is vastgezet. De stramienpagina bevat ook het half-doorzichtige paginaontwerp met de afgeronde hoeken en de sitenavigatie.

Alle sitepagina's hebben een vastgezette afbeelding in de rechterbovenhoek die vóór de pagina-inhoud wordt weergegeven om een perspectiefillusie te wekken die wordt doorgevoerd in de hoeken van de gebouwafbeeldingen.

Muse is een gebruiksvriendelijk ontwerpprogramma waarmee u uw ontwerpen op het web kunt plaatsen. Dankzij de creatieve plaatsing van elementen in de stramienpagina's en de unieke inhoud die op elke pagina wordt weergegeven, kunt u aansprekende lay-outs maken. U kunt uw creativiteit dus de vrije loop laten en innovatieve sites maken voor uw klanten.

Raadpleeg de pagina Muse Help en zelfstudies voor meer tips voor het werken met Muse of de pagina Muse Events voor live en opgenomen videolessen.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid