-
Olá!
-
Meu nome é Nivesh,
-
e sou desenvolvedor
do Google Web Designer.
-
Neste vídeo, você verá
como criar layouts fluidos
-
com unidades
de base percentual para posição e tamanho.
-
Primeiro, veremos um documento de exemplo,
-
onde todos os elementos
usam pixels para posição e tamanho.
-
Na visualização do arquivo no navegador,
-
ajusto o tamanho da janela,
-
e você verá que o layout não é atualizado.
-
A posição e o tamanho se mantêm fixos.
-
Você pode alterar isso
com o layout de base percentual.
-
Se quiser expandir ou reduzir
-
o contêiner da página principal
para ajustá-la ao tamanho da tela,
-
no painel Propriedades, clique em
"Corresponder à janela de visualização".
-
Isso definirá a largura
e a altura das páginas para 100%.
-
A página será expandida e reduzida
-
para se ajustar ao tamanho da tela.
-
Altere também a largura
e a altura da parte superior esquerda
-
de elementos individuais.
-
Selecionarei o div amarelo aqui
-
e alterarei a largura e a altura
da parte superior esquerda dele.
-
Clico na seção da unidade dos controles
-
e troco para usar porcentagem.
-
Você também pode
selecionar vários elementos
-
e alterar a posição
e os tamanhos deles usando %.
-
Agora, selecione
estes três elementos abaixo
-
e altere a largura
e altura da parte superior deles para %.
-
Veja que individualmente,
-
a % também é aplicada a essas medidas.
-
Talvez você queria
-
que a altura e a largura
dos elementos sejam fixas,
-
mas que a posição seja atualizada
-
com o tamanho da tela.
-
Para isso, aplicarei % no logo à esquerda
-
e ao topo do elemento,
-
mas definirei pixels
para a altura e a largura dele.
-
Vejamos a visualização no navegador.
-
Você verá que, com o ajuste do navegador,
-
os elementos seguem
a janela de visualização.
-
Crie layouts fluidos facilmente
-
usando a opção "Layout fluido"
-
na barra de seleção
das opções de ferramentas.
-
Outro arquivo
-
não terá o layout de base percentual
-
definido
para esses três elementos inferiores.
-
Por isso, os itens aqui ainda usam pixels.
-
Veremos agora a diferença
-
de desativar
ou ativar a opção "Layout fluido".
-
Neste caso, vou desativar.
-
Selecione os três elementos,
-
os centralize verticalmente
com o contêiner pai
-
e mantenha um espaço horizontal uniforme
-
em relação ao contêiner pai.
-
Esta é a visualização.
-
Veja que os elementos
-
não se ajustam
-
ao novo tamanho da janela do navegador.
-
Eles permanecem
onde foram alinhados pela última vez.
-
Isso acontece porque,
-
sem a opção "Layout fluido" ativada,
-
o alinhamento é feito
-
como um ajuste único de posição e tamanho.
-
Vou clicar nessa opção de layout,
-
reaplicar as configurações
de centralização vertical
-
e espaçamento horizontal
-
e visualizar no navegador.
-
Ao ativar a opção "Layout fluido",
-
criamos uma disposição de base percentual
-
que mantém os elementos alinhados
-
entre si e ao contêiner
-
de acordo com os ajustes de tamanho.
-
Chegamos ao final deste vídeo.
-
Obrigado por assistir!
