terça-feira, 27 de outubro de 2020

DICAS 3161 -WEBDEV TUTORIAL 95 - 09-11-2020-10_00Hrs-Licao 7.1 - Styles Estilos - PARTE A


https://youtu.be/kogyCi8AnLQ


Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal


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

DICAS 3161 -WEBDEV TUTORIAL 95 - 09-11-2020-10_00Hrs-Licao 7.1 - Styles Estilos - PARTE A


ASSUNTOS

Lição 7.1. Os styles - estilos
Visão geral
Descobrindo estilos
Um controle: vários elementos
Descobrindo os estilos por meio de um exemplo
Entrando no projeto meu_webdev_site_gerenciar_produtos_amarildo
entrar controle referencia
entrar guia styles 
Selecionando o estilo CSS de um controle
Editando o estilo CSS de um controle
Criando um Estilo novo 
Os estilos WEBDEV
Proxima licao: Estilos de implementação: um exemplo prático


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





ErpMatos - TgsSistemas
skype:amarildo.matos.informatica
email: amarildo.matos@gmail.com
whats: 51984197742
Youtube: Amarildo Matos
http://www.amarildomatos.com.br
https://groups.google.com/forum/#!forum/amarildowindev

www.windev.com
https://www.pcsoft.fr/webinaires.htm?p=forumpcs
https://forum.pcsoft.fr/fr-FR/pcsoft.br.windev/page/1.awp
https://www.windev.com/windev/WD-Express.htm
https://www.windev.com/windevmobile/WM-Express.htm
http://windevdesenvolvimento.blogspot.com.br/2017/07/menu-blog.html


Lição 7.1. Os estilos
Esta lição vai te ensinar os seguintes conceitos
  • Os estilos CSS.
  • Os estilos WEBDEV.
Duração da aula

Tempo estimado: 1 h
Lição AnteriorÍndicePróxima lição
Visão geral
WEBDEV permite que você "crie" seus sites. Para ajudá-lo nessa tarefa, WEBDEV propõe o uso de dois tipos de estilos:
  • Os estilos CSS,
  • Os estilos WEBDEV.
Usar estilos para seus controles cria uma vantagem significativa: uma modificação realizada em um estilo WEBDEV ou CSS é aplicada automaticamente a todos os controles que usam esse estilo.
Descobrindo estilos
Antes de usar os estilos, vamos ver seu suporte de aplicação: os controles.

Um controle: vários elementos

Cada controle WEBDEV inclui vários elementos.
  • Vamos considerar o controle de edição, por exemplo. Este controle inclui três elementos:
    • a legenda.
    • a área de entrada.
    • uma área adicional contendo a legenda e a área de entrada.
      Elementos de estilo de um controle de edição
  • Como os estilos são aplicados ao controle de edição? O modo de aplicação de estilos depende do tipo de estilo usado (WEBDEV ou CSS).
    • Os estilos CSS no WEBDEV serão aplicados aos elementos de controle .
      Para o controle de edição, um estilo CSS específico pode ser aplicado à legenda do controle de edição ou à área de entrada.
    • Os estilos WEBDEV serão aplicados a todo o controle .
      Um estilo WEBDEV inclui vários estilos CSS.
      Por exemplo, no controle de edição, o estilo WEBDEV contém:
      • O estilo CSS da legenda,
      • O estilo CSS para a área de entrada,
      • As diferentes opções de estilo para a área global de controle.

Descobrindo os estilos por meio de um exemplo

  • Para descobrir os estilos no WEBDEV, um exemplo simples foi preparado para você:
    1. Inicie o WEBDEV 25 se necessário.
    2. Exiba a página inicial do WEBDEV se necessário (Ctrl + <).
    3. Na janela inicial, clique em "Tutorial" e selecione "Estilos (Resposta)".
    4. Abra a página "PAGE_Styles" no editor.
    5. Exiba a janela de descrição do controle de edição "Nome" (exiba o menu pop-up do controle e selecione "Descrição").
    6. Selecione a guia "Estilo". Esta guia é usada para definir as características de estilo de controle.
    7. A seguinte janela é exibida:
      Guia 'Estilo' de um controle de edição
Esta janela permite gerenciar os estilos CSS (seção 1 da janela) e os estilos WEBDEV (seção 2 da janela) para o controle. Vamos dar uma olhada nos recursos desta janela.

Selecionando o estilo CSS de um controle

  • Para selecionar os estilos CSS de um controle:
    1. Na guia "Estilo" da janela de descrição do controle, na caixa de combinação "Elemento", selecione o elemento com o estilo desejado.
      Elementos gerenciados pelo estilo

      Observação: Todos os elementos marcados como "(CSS)" podem usar um estilo CSS diretamente: tudo o que você precisa fazer é selecionar seu nome.
    2. A caixa de combinação "Estilo CSS" é usada para escolher o estilo CSS do elemento: este estilo será aplicado ao elemento.

Editando o estilo CSS de um controle

  • Para criar ou editar um estilo CSS:
    1. Na guia "Estilo" da janela de descrição do controle, clique em "..." ao lado da caixa de combinação "Estilo CSS".
      Crie ou edite um estilo CSS
    2. A janela para edição dos estilos CSS é aberta.
      Janela de edição de estilo CSS
    3. Esta janela permite criar ou modificar todos os estilos CSS do projeto.
  • Vamos estudar esta janela. Esta janela inclui 2 seções:
    • Seção 1. O status do controle ao qual o estilo será aplicado: normal, rollover, ativo, ...
    • Seção 2. As propriedades CSS associadas ao status selecionado. Cada propriedade CSS pode ser modificada para cada status.
  • Vamos verificar as características do estilo CSS denominado "MyCustomStyle_InputArea":
    1. Selecione o estilo "MyCustomStyle_InputArea" na caixa de combinação da seção 1, se necessário.
    2. Selecione o status "Normal" (o primeiro status da seção 1).
    3. Clique na guia "Plano de fundo": a cor do plano de fundo é branco.
    4. Selecione o status "Editar" (o 4º status da seção 1).
    5. Na guia "Plano de fundo", a cor de fundo da área de entrada é amarelo pastel. O estilo CSS contém o estilo de cada um dos estados .
    6. Feche a janela de descrição do estilo CSS.
  • A guia "Estilo" encontrada na janela de descrição do controle é exibida novamente. Na seção inferior da janela, você tem a capacidade de acessar rapidamente os elementos de estilo que são modificados com frequência:
    Acesso rápido às opções
    • Fonte,
    • Tamanho,
    • Negrito, Itálico, Sublinhado, Riscado,
    • Alinhamento vertical e horizontal,
    • Cor de fundo.

Cuidado

Essas opções são usadas para substituir rapidamente o estilo CSS do controle atual. Neste caso, as modificações realizadas nestas opções não serão aplicadas aos demais controles que utilizam este estilo CSS.
O link "Mais opções" é usado para substituir todas as outras propriedades de estilo CSS.
Vamos agora descobrir os estilos WEBDEV.

Os estilos WEBDEV

Um estilo WEBDEV inclui vários estilos CSS. Por exemplo, no controle de edição, o estilo WEBDEV contém:
  • O estilo CSS da legenda,
  • O estilo CSS para a área de entrada,
  • As diferentes opções de estilo para a área global de controle.
  • Para gerenciar os estilos WEBDEV, use o painel exibido à direita da guia "Estilo" de controle:
    Gerenciando os estilos WEBDEV
    O nome do estilo WEBDEV é exibido na parte superior desta janela. Você pode:
    • Escolha um estilo existente,
    • Adicione o estilo do controle atual à folha de estilo do projeto.
      Esta opção permite que você reutilize este estilo em outros controles de projeto.
    • Dissocie esse controle.
      Esta opção evita que futuras modificações de estilo sejam aplicadas a este controle. Esta opção não é recomendada: recomendamos que você use substituições de estilo.
A skin do projeto define um estilo WEBDEV para cada tipo de controle. Este estilo WEBDEV pode ser usado "como está" ou pode ser modificado em alguns elementos de controle. Por exemplo, para especificar que a legenda deve estar em negrito em um controle de edição (e apenas neste), você deve:
  • Selecione o elemento "Legenda (CSS)" na área inferior da guia "Estilo".
  • Selecione "Negrito" na área inferior.
Esta modificação não irá dissociar o estilo WEBDEV do controle: a propriedade Bold será anulada em relação ao estilo inicial.
Portanto, se o estilo inicial for modificado (para alterar a cor de fundo, por exemplo), esta modificação será aplicada a este controle, mantendo a substituição.




Postado por às
Marcadores: , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)

Teste

Teste
teste