A âncora para o conteúdo: Uma âncora para o conteúdo é usada para definir o comportamento do controle ou área ao modificar seu conteúdo. O controle manterá o mesmo tamanho? Ele vai se adaptar ao seu conteúdo?
A âncora do navegador: uma âncora do navegador é usada para definir o comportamento de um controle ou área ao redimensionar o navegador. O controle será ampliado? Ele vai se mover?
A âncora do navegador é usada para definir o comportamento das páginas durante a exibição em resoluções específicas (tablets, telefones, ...).

As âncoras podem ser facilmente implementadas por meio de uma opção encontrada no menu pop-up de controles.

Vamos brincar com as âncoras agora com um exemplo. Nesta lição, usaremos apenas âncoras de navegador.

Vamos criar um projeto contendo uma página usada para implementar as âncoras do navegador e apresentar seus benefícios.

Para criar um projeto no WEBDEV:

Inicie o WEBDEV se necessário.
Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
Na página inicial, clique no botão "Criar um projeto" e selecione "Site". O assistente de criação de projeto é iniciado.
Mantenha as opções padrão das diferentes etapas do assistente de criação de projetos, até chegar a "Descrição - Informações gerais".

Digite o nome do projeto ("Âncoras") e valide as diferentes etapas do assistente com as opções padrão.


	Responda	Um exemplo corrigido pode ser acessado a qualquer momento para verificar a validade das operações realizadas. Para abrir este projeto corrigido, na página inicial, clique em "Tutorial" e selecione "Âncoras (Resposta)".

Criação de uma página no modo de zoneamento

Agora vamos dividir nossa página em 3 áreas:

Cada área terá um comportamento específico ao redimensionar a página.

Para criar as áreas, usaremos o recurso de zoneamento.

Para criar uma primeira área de título no topo da página:
1. No painel "Página", no grupo "Editar", expanda "Zoneamento" e selecione "Dividir horizontalmente".
2. O cursor do mouse se transforma em uma caneta.
3. Clique no topo da página e desenhe uma linha horizontal. A área é criada ao soltar o botão do mouse.

Para visualizar esta área, vamos associá-la a uma cor de fundo:
1. Abra a janela de descrição da área: selecione "Descrição da área" no menu pop-up.
2. Na guia "Estilo", selecione o elemento "Borda / Bckgrd" se necessário e selecione uma cor de fundo (dica de ferramenta amarela, por exemplo).
3. Valide a janela de descrição da área.

Vamos realizar as mesmas operações para dividir a área inferior de nossa página:
1. No painel "Página", no grupo "Editar", expanda "Zoneamento" e selecione "Dividir verticalmente".
2. O cursor do mouse se transforma em uma caneta.
3. Clique no meio da área inferior e desenhe uma linha vertical.

Para ver essas áreas, associe a cor verde à área inferior à esquerda e a cor laranja à área inferior à direita.

Salve a página (Ctrl + S) e execute o teste de página ( entre os botões de acesso rápido).

A página é exibida no navegador.
Redimensione o navegador: a página permanece centralizada, mas as áreas não são redimensionadas.
Vamos mudar este modo de operação para que as áreas se adaptem ao tamanho do navegador. Usaremos âncoras.

Páginas

sexta-feira, 30 de outubro de 2020