sexta-feira, 30 de outubro de 2020

DICAS 3165 -WEBDEV TUTORIAL 99 - 13-11-2020-10_00Hrs- Lesson 7.4. Ancoragem e zoneamento - PARTE A




https://youtu.be/5fi2lJ6Lj_8



Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

Esse Video Ao Vivo vai estrear as 10:00 do dia 13/11/2020-

DICAS 3165 -WEBDEV TUTORIAL 99 - 13-11-2020-10_00Hrs- Lesson 7.4. Ancoragem e zoneamento - PARTE A


ASSUNTOS

Ancoragem e zoneamento
Esta lição vai te ensinar os seguintes conceitos
O que é uma âncora?
Criando uma página no modo Zoning.
Implementando as âncoras.
Visão geral
Criando projeto Webdev_Ancora_Zoneamento_Amarildo
e sera colocado no repositorio windev 
adicionando o projeto no scm 
Criação de uma página no modo de zoneamento
Pagina Ancoras 
Indo Pagina Zoneamento
Dividindo pagina horizontalmente
Dividindo pagina verticalmente
e colocando cor em cada zona
colocanco controles staticos
e alterando para cabecalho,menu,conteudo


DICAS 3067 -WEBDEV TUTORIAL 1-Licao 1.1-14-09-2020 11hrs-DESCUBRA WEBDEV
DICAS 3068 -WEBDEV TUTORIAL 1-Licao 1.2-14-09-2020 15hrs-Web development and WEBDEV - PARTE A
DICAS 3069 -WEBDEV TUTORIAL 3-Licao 1.2-14-09-2020 16hrs-Web development and WEBDEV - PARTE B









PlayList WebDev tutorial Amarildo Webdev
Playlist Windev Tutorial Amarildo Windev
Playlist windev Franca PcSoft
Amarildo
Windev
WxSolucoes
Matos Informatica
Repositorio Windev
Site forum Google 
Video sobre 3 Mil Videos Windev 
PlayList Pedrosao
Video sobre Alfaserver servidor 
Ultimo Video manipulacao arquivos












Lição 7.4. Ancoragem e zoneamento
Esta lição vai te ensinar os seguintes conceitos
  • O que é uma âncora?
  • Criando uma página no modo Zoning.
  • Implementando as âncoras.
Duração da aula

Tempo estimado: 30 min
Lição AnteriorÍndicePróxima lição
Visão geral
O WEBDEV permite que você gerencie dois tipos de âncoras:
  • 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:
    1. Inicie o WEBDEV se necessário.
    2. Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
    3. Na página inicial, clique no botão "Criar um projeto" e selecione "Site". O assistente de criação de projeto é iniciado.
    4. Mantenha as opções padrão das diferentes etapas do assistente de criação de projetos, até chegar a "Descrição - Informações gerais".
    5. 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
  • Para criar uma página usada para implementar o gerenciamento de âncoras:
    1. Crie uma nova página em branco.
      • Na janela do novo elemento, clique em "Página" e em "Página".
        Observação: Para exibir a janela de criação de um novo elemento, clique Crie um elementoentre os botões de acesso rápido.
      • O assistente de criação de página é iniciado.
      • Clique em "Em branco" e valide o assistente.
    2. A janela para salvar a página é exibida.
    3. Digite "Âncoras" como título. O nome ("PAGE_Anchors") é proposto automaticamente.
    4. Validar.
Agora vamos dividir nossa página em 3 áreas:
  • Um cabeçalho (no topo em toda a largura).
  • Um menu à esquerda (em toda a altura).
  • Uma área de conteúdo no meio.
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.
  • Agora vamos criar controles estáticos em cada área:
    1. Saia do modo de edição "Zoneamento" clicando na guia "Página" na parte superior da página (abaixo da faixa de opções).
    2. No painel "Criação", no grupo "Controles usuais", expanda "Texto" e selecione "Estático simples".
    3. Clique dentro da área amarela. O controle estático é criado automaticamente.
    4. Modifique a legenda (tecla de espaço no teclado): a legenda do controle é "Cabeçalho".
    5. Repita as operações 2 a 4 para criar:
      • um controle estático exibindo "Menu" na área verde.
      • um controle estático exibindo "Conteúdo" na área laranja.
  • Salve a página (Ctrl + S) e execute o teste de página ( Execute o teste de uma páginaentre os botões de acesso rápido).
    1. A página é exibida no navegador.
    2. 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.

    Teste

    Teste
    teste