-
Hallo.
-
Mijn naam is Nivesh
-
en ik ben ontwikkelaar
voor Google Web Designer.
-
Ik deze video laat ik zien
hoe u vloeiende indelingen maakt
-
met procentueel gebaseerde eenheden
voor positie en formaat.
-
Laten we eerst
naar een voorbeelddocument kijken
-
waarin alle elementen
pixels gebruiken voor positie en formaat.
-
Als ik dit bestand
in de browser bekijk
-
en het vensterformaat aanpas,
-
ziet u dat de indeling niet meeschaalt.
-
De positie en grootte
van de elementen verandert niet.
-
Laten we dat aanpassen
met procentueel gebaseerde indeling.
-
Als u wilt dat de hoofdcontainer
-
groter en kleiner wordt
samen met het scherm,
-
klikt u op 'Aanpassen aan viewport'
in het venster 'Eigenschappen'.
-
De paginabreedte en -hoogte
worden ingesteld op 100%.
-
De pagina wordt nu groter en kleiner
-
in verhouding tot het scherm.
-
U kunt ook de breedte
en hoogte van de linkerbovenpositie
-
van afzonderlijke elementen aanpassen.
-
Ik klik hier op de gele div
-
en wijzig de breedte en hoogte
van de linkerbovenpositie
-
door op het gedeelte 'Eenheid' te klikken
-
en '%' te selecteren.
-
U kunt ook meerdere elementen selecteren
-
en de positie en formaten wijzigen
in het gebruik van '%'.
-
Selecteer deze drie elementen onderaan
-
en stel de breedte en hoogte
van de linkerbovenpositie in op '%'.
-
U ziet dat de afzonderlijke
breedte en hoogte
-
van de linkerbovenpositie
ook '%' gebruiken.
-
Soms wilt u
-
dat de breedte en hoogte
van een element behouden blijven,
-
maar de positie laten updaten
-
als de schermgrootte verandert.
-
Ik ga de linker- en bovenpositie
van dit logo-element wijzigen
-
om '%' te gebruiken,
-
maar ik laat de breedte en hoogte
staan op pixels.
-
Laten we dit in de browser bekijken.
-
U zag dat toen ik
het browserformaat aanpaste,
-
de elementen meeschaalden met de viewport.
-
Een makkelijke manier
om vloeiende indelingen te maken,
-
is de optie 'Vloeiende indeling'
te gebruiken
-
in de optiebalk
van het gereedschap Selectie.
-
Ik ga nu naar een ander bestand
-
zonder procentueel gebaseerde indeling
-
voor deze onderste drie elementen.
-
Deze gebruiken nog steeds pixels.
-
Ik laat u het verschil zien
-
wanneer de optie 'Vloeiende indeling'
wel en niet is aangevinkt.
-
Ik verwijder het vinkje nu.
-
Ik selecteer deze drie elementen
-
en lijn ze verticaal gecentreerd uit
ten opzichte van de hoofdcontainer
-
en zet ze horizontaal
op gelijke afstand
-
ten opzichte van de hoofdcontainer.
-
Ik bekijk nu een voorbeeld.
-
U ziet nu
-
dat de elementen niet meeschalen
-
als ik het browservenster aanpas.
-
Ze blijven staan
waar ik ze heb uitgelijnd.
-
Dat komt
-
omdat als de optie
'Vloeiende indeling' niet is aangevinkt,
-
de uitlijning wordt uitgevoerd
-
als een eenmalige aanpassing
van positie en grootte.
-
Als ik de optie 'Vloeiende indeling' aanvink
-
en de uitlijningsinstellingen
opnieuw toepas,
-
dan lijn ik verticaal in het midden uit
en verdeel ik ze horizontaal.
-
Ik bekijk het nu in de browser.
-
Met de optie 'Vloeiende indeling'
-
maken we
een procentueel gebaseerde uitlijning
-
waarmee de elementen
relatief uitgelijnd blijven
-
ten opzichte van elkaar
en de overkoepelende container
-
als het formaat van de container verandert.
-
Dat was het voor deze video.
-
Bedankt voor het kijken.
