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.
In een responsief ontwerp is één lay-out voor objecten en tekst mogelijk niet geschikt voor alle schermformaten. Afbeeldingen, tekst, widgets en formulieren worden mogelijk verplaatst bij verschillende breekpunten. De kaders kunnen groter zijn dan de paginabreedte, objecten kunnen over elkaar heen worden geplaatst of de tekst wordt minder duidelijk. Afbeeldingen, tekst, widgets en formulieren moeten mogelijk worden verplaatst bij verschillende breekpunten. Bepaal de lay-out van objecten en de opmaak van tekst dus zorgvuldig, zodat deze goed worden ingedeeld voor verschillende schermformaten.
Wanneer u de pagina hebt ontworpen, kunt u met de scrubber een voorvertoning van uw lay-out in verschillende schermformaten bekijken. U kunt breekpunten toevoegen als u ziet dat u de lay-out van de objecten moet wijzigen bij een bepaalde browserbreedte.
Lees verder voor meer informatie over breekpunten en over het effectief ontwerpen van uw lay-outs in responsieve lay-outs van Adobe Muse.
De breekpunten in een responsieve lay-out vertegenwoordigen de verschillende browserbreedten in pixels. Met behulp van breekpunten kunt u uw ontwerp in verschillende browserbreedten visualiseren en testen hoe de objecten op een pagina reageren op wijzigingen in browserbreedten.
Standaard bevat een nieuwe site in Adobe Muse een breekpunt voor desktops (pixelbreedte 960). U kunt nu de lay-out voor deze breedte gaan ontwerpen. Wanneer het ontwerp is voltooid, kunt u een voorvertoning van de lay-out bekijken bij verschillende breedten met de scrubber. Wanneer u dit doet, kunt u de breedte waarop het ontwerp breekt zien en opslaan. U kunt bijvoorbeeld zien wanneer een tekstregel in twee delen wordt gesplitst of wanneer afbeeldingen in een rij verticaal worden gestapeld. Dit zijn de breedten die extra breekpunten nodig hebben. Na het toevoegen van de vereiste breekpunten kunt u het ontwerp aanpassen, zodat de objecten netjes worden weergegeven.
Aan het einde voegt Adobe Muse voor elk breekpunt een bijbehorende declaratie voor een mediaquery aan uw webpagina toe. De mediaquery is een CSS3-module die toestaat dat de weergegeven inhoud zich aanpast aan de verschillende schermgrootten. De meeste moderne browsers kunnen de mediaquery's interpreteren die overeenkomen met deze breekpunten. Wanneer gebruikers uw webpagina op diverse apparaten weergeven, kiezen de browsers de meest geschikte mediaquery en de bijbehorende ontwerplay-out om aan gebruikers weer te geven.
-
Klik op
op de breekpuntbalk. U ziet dat er een nieuw breekpunt op de breekpuntbalk wordt toegevoegd. U kunt ook de browserbreedte van het breekpunt zien.Voeg op dezelfde manier alle benodigde breekpunten aan de breekpuntbalk toe om specifieke browserbreedten in te stellen.
Wanneer u op een breekpunt klikt, wordt het actieve breekpunt gevuld met kleur. De andere breekpunten worden grijs weergegeven.
Opmerking:
U kunt ook breekpunten toevoegen door bibliotheekitems met breekpunten in de ontwerpweergave te plaatsen. Open het deelvenster Bibliotheek, selecteer het object dat u wilt plaatsen, klik op de plus naast het object en sleep het object naar de ontwerpweergave.
U kunt breekpunten zowel aan stramienpagina's als aan afzonderlijke pagina's toevoegen. Wanneer u breekpunten aan een afzonderlijke pagina toevoegt, worden de waarden van de breekpunten alleen op die pagina toegepast.
Wanneer u breekpunten op een stramienpagina toevoegt, kunt u ervoor kiezen om alle benodigde breekpunten toe te passen op de afzonderlijke pagina's. De breekpunten van stramienpagina's worden als kleine driehoekjes op de afzonderlijke pagina's weergegeven. Klik op + om die breekpunten op de afzonderlijke pagina's te activeren.
Neem het volgende scenario in gedachten. Wanneer u uw site opmaakt, moet u mogelijk specifieke breekpunten toevoegen voor telefoons. U kunt deze breekpunten aan de stramienpagina toevoegen zodat deze al beschikbaar zijn op de afzonderlijke pagina's. Wanneer u verdergaat met het ontwerpen van afzonderlijke pagina's, kunt u deze breekpunten in deze pagina's met één klik toevoegen.
Opmerking:
Wanneer u een andere stramienpagina toepast op een afzonderlijke pagina, worden de breekpunten van de oude stramienpagina vervangen door de breekpunten van de nieuwe stramienpagina.
-
Als u de kleur van een breekpunt wilt weergeven of bewerken, klikt u met de rechtermuisknop op het breekpunt en kiest u Eigenschappen breekpunt, of dubbelklikt u op het breekpunt.
In dit venster kunt u ook de waarden wijzigen voor de kleur, breedte, hoogte en marge van het breekpunt.
Wijzig de kleur van het breekpunt en breekpuntwaarden in het dialoogvenster Eigenschappen breekpunt.
Opmerking:
U kunt de breekpunten van de stramienpagina niet bewerken vanaf de afzonderlijke pagina's.
-
Als u een breekpunt wilt verwijderen, voert u een van de volgende stappen uit:
- Klik op de X aan de linkerkant van het actieve breekpunt.
- Klik met de rechtermuisknop op de breekpuntbalk en kies Breekpunt verwijderen.
Wanneer u een breekpunt verwijdert, verandert de bijbehorende lay-out en worden de tekstinstellingen voor het breekpunt ook verwijderd.
Klik op het x-symbool om het breekpunt te verwijderen.
Klik met de rechtermuisknop en verwijder breekpunten.
Opmerking:
U kunt geen breekpunten van de stramienpagina verwijderen vanaf een afzonderlijke pagina.
U kunt van het huidige breekpunt naar het volgende of vorige breekpunt gaan. Ga als volgt te werk om naar het vorige of volgende breekpunt te gaan:
- Windows-gebruikers:
- Vorige breekpunt - druk op Ctrl + Shift + 5
- Volgende breekpunt - druk op Ctrl + Shift + 6
- Vorige breekpunt - druk op Ctrl + Shift + 5
- Mac OS-gebruikers:
- Vorige breekpunt - druk op Cmd + Shift + 5
- Volgende breekpunt - druk op Cmd + Shift + 6
- Vorige breekpunt - druk op Cmd + Shift + 5
U kunt de volgende opties gebruiken om te zorgen dat uw lay-out er op alle breekpunten goed uitziet:
- Objecten tonen/verbergen: U kunt een object in een breekpunt naar keuze verbergen terwijl u het in een ander breekpunt weergeeft. Zie Objecten weergeven of verbergen voor meer informatie.
- Object verschillend plaatsen in verschillende breekpunten: u kunt een object op verschillende posities in verschillende breekpunten plaatsen. Zie Objecten plaatsen in een responsief webontwerp voor meer informatie.
- Responsief vastzetten gebruiken: U kunt bepalen welke objecten statisch moeten zijn en welke dynamisch moeten zijn. U kunt de statische objecten vastzetten, zodat deze op dezelfde positie blijven op alle breekpunten. Zie voor meer informatie Responsief vastzetten.
- De grootte van objecten wijzigen: U kunt de grootte van een object bij elk breekpunt aanpassen. U kunt ook instellen dat de grootte van een object automatisch wordt aangepast aan de breedte van de pagina. Zie De grootte van objecten wijzigen voor meer informatie over het wijzigen van het formaat van objecten.
- Tekst opmaken voor verschillende breekpunten: U kunt tekst anders opmaken in verschillende breekpunten om de helderheid en de leesbaarheid van tekst bij verschillende browserbreedten te optimaliseren. Zie voor meer informatie Tekst opmaken in responsieve lay-outs.
Stel u het volgende scenario voor: u hebt een traditioneel menu voor een desktopscherm ingevoegd. Maar dit menu neemt veel te veel ruimte in op tabletschermen. Een sandwichmenu of een accordeon werkt beter voor tablets.
Een dergelijk scenario is gemakkelijk op te lossen met een responsieve website in Adobe Muse. U kunt ervoor kiezen om een traditioneel menu voor de desktopweergave te tonen en een sandwichmenu voor tablets te laten zien, zoals weergegeven in de volgende afbeeldingen.
-
Klik met de rechtermuisknop op het object dat u wilt verbergen en klik op Verbergen in breekpunt.
Het object wordt verborgen in de huidige breekpuntweergave, maar is zichtbaar in andere breekpunten. Als u het object ook in alle andere breekpunten wilt verbergen, klikt u op Verbergen in andere breekpunten. U kunt het object later in specifieke breekpunten tonen in het deelvenster Lagen.
Objecten verbergen in breekpunten
U kunt objecten verschillend positioneren in verschillende breekpuntweergaven. U kunt bijvoorbeeld afbeeldingen in de desktopweergave horizontaal plaatsen en de afbeeldingen in de weergave op mobiele apparaten verticaal plaatsen.
Adobe Muse onthoudt de positie van objecten en geeft de juiste lay-out weer wanneer het schermformaat verandert.
-
Opmerking:
Wanneer u de lay-out van objecten bepaalt, vergeet dan niet om de afstand tussen de objecten en de afstand tussen het object en de rand van een browser te controleren. U moet de objectposities mogelijk aanpassen of meer breekpunten toevoegen om ontwerpproblemen die tussen breekpunten kunnen optreden, op te lossen.
U kunt een groep objecten tegelijkertijd verplaatsen in een responsieve lay-out. Wanneer u een groep verticaal uitgelijnde objecten wilt verplaatsen, hoeft u alleen maar het bovenste object te selecteren. De verticale greep verschijnt dan in de linkermarge in Adobe Muse.
Wanneer u op de handgreep klikt en deze omhoog of omlaag verplaatst, ziet u dat het geselecteerde object en alle onderliggende objecten als een groep worden verplaatst.
U kunt een reeks breekpunten toevoegen door een bibliotheekitem met breekpunten in de ontwerpweergave te plaatsen. Open het deelvenster Bibliotheek (Vensters > Bibliotheek). Select het item dat u aan de pagina wilt toevoegen. Klik op de plus naast het item en sleep het item naar de ontwerpweergave.
U ziet een reeks breekpunten die automatisch aan uw pagina zijn toegevoegd. Als u al breekpunten aan uw pagina hebt toegevoegd en u voegt een bibliotheekitem toe, worden alle breekpunten op de pagina geactiveerd.
U kunt bibliotheekitems met breekpunten gebruiken om snel breekpunten tussen verschillende pagina’s, en zelfs tussen verschillende .muse-bestanden, te repliceren.
Als u in Adobe Muse bepaalde objecten statisch wilt maken, kunt u vastzetten gebruiken. U kunt een object vastzetten op een pagina of in een browser:
- Objecten vastzetten in een browser: U kunt een object vastzetten in de browser als u wilt dat het object steeds op dezelfde plek blijft staan, zelfs wanneer de schuifbalk van de browser wordt gebruikt. Een menubalk blijft dan bijvoorbeeld op dezelfde plek staan, zelfs wanneer u op de pagina omhoog of omlaag schuift. Meer informatie over het vastzetten van objecten in de browser vindt u via deze koppeling.
- Objecten vastzetten op pagina: U kunt een object op een pagina vastzetten als u wilt dat het object vast blijft staan ten opzichte van de webpagina. Een voorbeeld is een bedrijfslogo dat altijd in de rechterbovenhoek van de webpagina wordt weergegeven.
Lees verder als u wilt weten hoe u een object op een pagina in een responsief ontwerp kunt vastzetten.
Opmerking:
Als u wilt bepalen of u een object wilt vastzetten, gebruikt u de scrubber en bekijkt u de pagina bij verschillende browserbreedten. Als u een object dan nog steeds wilt vastzetten op de pagina, voert u de volgende stappen uit:
-
Zet het object op een van de volgende manieren vast op een pagina:
- Links van pagina vastzetten
: Kies dit vakje als u een object links van de webpagina wilt vastzetten. De afstand tussen de rand van het browservenster en de linkerkant van het object blijft constant. - Midden van pagina vastzetten
: Kies dit vakje als u een object in het midden van de webpagina wilt vastzetten. De afstand tussen de linker- en bovenrand van het object en de rand van het browservenster blijft constant. - Rechts van pagina vastzetten
: Kies dit vakje als u een object rechts van de webpagina wilt vastzetten. De afstand tussen de rand van het browservenster en de rechterkant van het object blijft constant.
Als u bijvoorbeeld een knop als Alvast bestellen hebt die op alle breekpunten in de rechterhoek van de pagina moet worden weergegeven, moet u de knop selecteren en de knop aan de rechterkant vastzetten zoals in de afbeelding is weergegeven.
Klik op het vakje aan de rechterkant om het object rechts van de pagina vast te zetten.
Wanneer u een object op een pagina vastzet, geeft Adobe Muse een stippellijn weer vanaf het object om de Vastzetten op pagina-positie aan te geven. In de volgende afbeelding ziet u de stippellijn die tot de rechterrand van de pagina loopt. Dit geeft aan dat het object aan de rechterkant van de pagina is vastgezet.
Stippellijnen geven de Vastzetten op pagina-positie aan.
- Links van pagina vastzetten
-
Klik met de rechtermuisknop op het object en kies Vergroten/verkleinen > <Optie Vergroten/verkleinen instellen>.
Opmerking:
De optie Vergroten/verkleinen verschilt per object. Zo kunt u voor een afbeelding de breedte en hoogte wijzigen in een responsieve lay-out, terwijl u voor een tekstvak alleen de breedte kunt wijzigen.
Voor objecten die niet dynamisch zijn, is de optie Vergroten/verkleinen niet beschikbaar.
-
Sleep en vergroot of verklein het object voor het huidige breekpunt.
In de eerste afbeelding ziet u bijvoorbeeld dat de afbeelding de breedte overschrijdt bij een breekpunt van 768 pixels. U kunt de afbeelding slepen en de grootte ervan aan de paginabreedte aanpassen, zoals weergegeven in de tweede afbeelding.
Afbeelding overschrijdt paginabreedte.
Sleep objecten en wijzig de grootte ervan voor verschillende breekpunten.
Opmerking:
Als items binnen een staatknop of een andere widgetcontainer als vrij zijn ingesteld, worden ze verplaatst en/of vergroot of verkleind wanneer de grootte van de container verandert.
Als u de grootte en positie van een object naar andere breekpunten wilt kopiëren, voert u de volgende stappen uit:
-
Ga op een van de volgende manieren te werk:
- Selecteer Formaat en positie kopiëren naar > <specifieke breekpuntwaarde> om de huidige objectgrootte en -positie toe te passen voor het specifieke breekpunt.
- Selecteer Formaat en positie kopiëren naar > Alle breekpunten om de huidige objectgrootte en -positie toe te passen op alle breekpunten.
In een responsief ontwerp is de afhandeling van tekst voor verschillende browserbreedten belangrijk, opdat de tekst duidelijk en goed leesbaar is. De tekst die in een breekpuntweergave is geplaatst, kan in een andere breekpuntweergave opeens anders over de regels worden verdeeld. Er kunnen ook ongewenste regeleinden worden weergegeven wanneer u naar een ander breekpunt gaat.
Met Adobe Muse kunt u tekst verschillend opmaken voor verschillende breekpunten. Zo kunt u er bijvoorbeeld voor kiezen om een lettergrootte van 20 punten te gebruiken voor tablets en een lettergrootte van 15 punten voor mobiele apparaten.
Voor het opmaken van tekst in een responsief ontwerp biedt Adobe Muse een pictogram voor tekstopmaak in het deelvenster waarin u ook de tool Uitsnijden en de tool Selecteren vindt. Dit pictogram heeft twee opties waarmee u de tekst kunt opmaken.
Met de optie Tekst opmaken op verschillende breekpunten kunt u tekst op alle breekpunten op een pagina opmaken. Wanneer u deze optie kiest, hoeft u de tekst in slechts één breekpuntweergave op te maken. De tekst wordt automatisch opgemaakt over de andere breekpunten.
Als u daarentegen tekst voor een specifiek breekpunt moet opmaken, kiest u de optie Tekst opmaken op actief breekpunt. Zo kunt u er bijvoorbeeld voor kiezen om de tekstgrootte tot 24 te verhogen bij het opmaken van tekst voor mobiele apparaten.
De tekstopmaak wordt onthouden en dienovereenkomstig weergegeven wanneer de website wordt weergegeven met verschillende browserbreedten.
-
Selecteer het tekstvak en sleep het om het formaat ervan te wijzigen. Uw tekst wordt opnieuw uitgelijnd terwijl u het tekstvak vergroot of verkleint.
Opmerking:
De rechtergrens van het tekstvak bepaalt de mate waarin de tekst zal doorlopen in de breedte bij het vergroten of verkleinen van het tekstvak.
-
Als u tekst wilt opmaken, selecteert u de gewenste tekst en klikt u op een van de volgende opties:
- Tekst opmaken op verschillende breekpunten om de tekst op alle breekpunten op te maken.
- Tekst opmaken op actief breekpunt om de tekst alleen voor het huidige breekpunt op te maken.
Beide opties zijn beschikbaar in het linkerdeelvenster waarin u de tool Tekst of de tool Uitsnijden selecteert.
Tekst opmaken in responsief ontwerp
A. Tekst opmaken op verschillende breekpunten B. Tekst opmaken op actief breekpuntOpmerking:
Met de tekstopmaakoptie in een responsieve lay-out wijzigt u alleen de opmaak van de tekst. U kunt niet de woorden of de inhoud van elk breekpunt wijzigen.
Als u de grootte en positie van tekst over verschillende breekpunten of browserbreedten wilt kopiëren, voert u de volgende stappen uit:
-
Ga op een van de volgende manieren te werk:
- Klik met de rechtermuisknop en selecteer Tekstopmaak kopiëren naar > <specifieke breekpuntwaarde> om de huidige tekstkenmerken op dat specifieke breekpunt toe te passen.
- Klik met de rechtermuisknop en selecteer Tekstopmaak kopiëren naar > Alle breekpunten om de huidige tekstkenmerken op alle andere breekpunten toe te passen.
U kunt scrolleffecten toevoegen in een responsieve lay-out. Scrolleffecten worden alleen ondersteund met vaste breekpunten. Vaste breekpunten geven aan dat de paginabreedte van de lay-out vast staat. Voeg een vast breekpunt toe, selecteer het object waarop u scrolleffecten wilt toepassen en configureer vervolgens de instellingen voor Scrolleffecten.
-
Wanneer u de responsieve lay-out opent, ziet u de breekpunten op uw pagina. Deze breekpunten zijn vrij, zoals aangegeven door een pictogram met pijlen in beide richtingen.
Vrije breekpunten worden aangeduid door een pictogram met dubbele pijlen
De scrolleffecten voor vrije breekpunten zijn uitgeschakeld
-
Een breekpunt met vaste breedte toevoegen
De vaste breekpunten zijn gemarkeerd met een vierkant pictogram
-
Selecteer het object waarop u de scrolleffecten wilt toepassen en configureer de instellingen voor Scrolleffecten.
Scrolleffecten toepassen op geselecteerde objecten
Opmerking:
U kunt Scrolleffecten alleen toepassen bij het vaste breekpunt, niet bij de andere (vrije) breekpunten.
Zie Scrolleffecten toepassen in Adobe Muse om te lezen hoe u scrolleffecten kunt toevoegen en gebruiken in Adobe Muse.
Wat zijn de ideale breekpunten tijdens het ontwerpen van een site voor computers, tablets en mobiele apparatuur?
Als u een site ontwerpt voor een specifiek apparaat, kunt u het geschikte breekpunt toevoegen. Gebruikers kunnen uw site echter vanaf elk willekeurig apparaat met elke mogelijke schermgrootte bekijken. Het wordt daarom aanbevolen om alleen breekpunten toe te voegen op onderbrekingen in uw ontwerp. Dan weet u zeker dat uw site goed wordt ingedeeld op elk apparaat.
Waarom werken de breekpunten in stramienpagina's niet op individuele pagina's?
De breekpunten op stramienpagina's worden als witte driehoekjes weergegeven op de individuele pagina's. Als u deze breekpunten op individuele pagina's wilt inschakelen, klikt u op het witte driehoekje op de breekpuntbalk en klikt u vervolgens op de plusknop (+).
Een andere manier om breekpunten gemakkelijk over te brengen van een stramienpagina naar een specifieke pagina is door een element op de stramienpagina te kopiëren, vervolgens over te schakelen naar de pagina waarop u de breekpunten wilt toepassen en Bewerken > Plakken met breekpunten te selecteren. Ten slotte verwijdert u het geplakte item van het canvas. Hoewel het item wordt verwijderd, blijven de breekpunten op de stramienpagina staan.
Hoe kan ik voorkomen dat tekstvakken elkaar in mijn responsieve lay-out overlappen?
Hoe kan ik de spaties of witruimte in mijn responsieve sites verwijderen?
Extra spaties of witruimte kunnen verschillende oorzaken hebben, zoals een vaste voettekst of een verborgen object. Lees dit artikel om te leren hoe u dit probleem kunt oplossen.
Hoe kan ik het grijze gebied verwijderen dat verschijnt als ik een voorvertoning van mijn site weergeef?
Wanneer u een grijs gebied in de voorvertoning ziet, dient u te controleren of er een extern object of een verborgen object buiten de pagina is geplaatst. Klik op Weergave > Kaderranden tonen om alle objecten te selecteren. U kunt ook uitzoomen en de plaatsing van alle objecten bekijken. Kijk of u een verborgen of extern object ziet en plaats dergelijke objecten binnen uw lay-out om dit probleem op te lossen.
Hoe kan ik alle widgets dynamisch of responsief maken?
Alle widgets in Adobe Muse zijn momenteel niet-responsief. Raadpleeg deze tabel om het responsieve gedrag van elke widget te bekijken.
De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.