quarta-feira, 28 de outubro de 2020

DICAS 3162 -WEBDEV TUTORIAL 96 - 10-11-2020-10_00Hrs-Licao 7.1 - Styles Exemplos - PARTE B - FINAL



https://youtu.be/NjENgYgkwL8




Bom Dia Boa Tarde Boa Noite

Seja Membro do Canal

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

DICAS 3162 -WEBDEV TUTORIAL 96 - 10-11-2020-10_00Hrs-Licao 7.1 - Styles Exemplos - PARTE B - FINAL

ASSUNTOS


ACHEI TOP ESSAS DUAS AULAS DE CSS, MAS NO FINAL
DA AULA, MOSTRANDO COMO COLOCAR ESTRELA NO TEXTO
COMO OBRIGATORIO, FOI TOP DEMAIS


Estilos de implementação: um exemplo prátic
Adicionando um estilo no projeto
Mudando estilo fundo amarildo digitacao
Mostrando Resultado
Substituindo um estilo CSS para um controle
Modificando um estilo CSS para todos os controles
Estilos e rich text - Adicionando uma Estrela 
proxima licao: Lesson 7.2. Cookies



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


Estilos de implementação: um exemplo prático
Chega de teoria, vamos trabalhar. Vamos criar um controle de edição e modificar seus estilos na página "PAGE_Styles" do projeto "Styles".
Observação: Usaremos um controle de edição, mas o princípio de manipulação de estilos pode ser aplicado a todos os controles disponíveis no WEBDEV.
  • Para criar o controle de edição:
    1. No painel "Criação", no grupo "Controles usuais", clique em Criação de um controle de edição.
    2. Clique onde deseja criar o controle na página.
Este controle está associado a um estilo WEBDEV (é o estilo WEBDEV padrão definido no skin escolhido ao criar o projeto).
  • Três métodos podem ser usados ​​para selecionar o estilo WEBDEV de um controle:
    • Por meio da guia "Estilo" encontrada na descrição de controle do controle (como já visto).
    • Através do painel "Modificação" da faixa de opções: é exibida uma prévia dos diferentes estilos WEBDEV disponíveis para o controle.
      Painel de 'Modificação' da faixa de opções
    • Exibindo o menu pop-up de controle e selecionando "Escolha um estilo WEBDEV".
      Editando a folha de estilo
  • Este último método será utilizado para associar o controle recém-criado ao estilo "EDT_Custom". Este estilo é usado por todos os outros controles de página.
    1. Selecione o controle que acabou de ser criado.
    2. Exiba o menu de contexto de controle e selecione "Escolha um estilo WEBDEV".
    3. Na janela que aparece, selecione o estilo "Personalizado".
    4. Valide a janela para seleção de estilo. A cor da legenda de controle muda: o estilo é aplicado.
  • 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. Insira a entrada no novo controle de edição: a área de entrada é colorida em amarelo.
    3. Feche o navegador.

Substituindo um estilo CSS para um controle

  • Agora vamos modificar o estilo da área de entrada encontrada no controle:
    1. Abra a janela de descrição do controle criado.
    2. Na guia "Estilo", escolha o elemento "Área de entrada (CSS)".
    3. Clique no link "Mais substituições" para substituir o CSS deste elemento.
    4. Selecione o status “Editar”.
      Estilo - Estados de um elemento
    5. Na guia "Plano de fundo", altere a cor do plano de fundo. Escolha uma cor roxa, por exemplo.
    6. Validar. No painel de estilos WEBDEV, o link (canto superior direito) indica "1 substituição".
    7. Ao clicar nele, você pode ver que a cor de fundo da área interna editável foi substituída.
    8. Valide a janela de descrição do controle.
  • 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. Mova o cursor de um controle para outro: a cor de fundo é amarela para todos os controles, exceto para o controle que acabou de ser criado.
    3. Feche o navegador.

Modificando um estilo CSS para todos os controles

  • Agora vamos modificar o estilo CSS da área de entrada para alterar a cor do texto. Esta modificação será realizada para todos os controles de edição da página.
    1. Exibe a janela de descrição do controle criado (Alt + Enter).
    2. Na guia "Estilo", escolha o elemento "Área de entrada (CSS)".
    3. Clique no botão [...] à direita do nome do estilo CSS. A janela para editar o estilo CSS é exibida.
    4. Selecione o status "Normal".
    5. Na guia "Texto", altere a cor. Escolha uma cor verde, por exemplo.
    6. Valide a seguir valide a janela de descrição do controle.
  • 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. Digite o texto nos diferentes controles de edição da página: o texto é exibido com a nova cor selecionada. Esta modificação foi levada em conta inclusive no controle que foi criado anteriormente e cujo estilo foi sobrescrito.
    3. Feche o navegador.
Estilos e rich text
Quanto à aparência, você também pode definir rich text nos elementos!
O rich text permite que você use estilos diferentes para as diferentes palavras na legenda de controle. Portanto, para a legenda de um controle de edição, você pode definir que parte da legenda usará a cor padrão, enquanto outra parte usará uma cor diferente.
Vamos dar um exemplo simples: adicionar um asterisco vermelho para especificar que um controle é obrigatório.
  • Em nosso exemplo:
    1. Selecione o controle de edição "Nome".
    2. Pressione a tecla ESPAÇO ou ENTER no teclado.
    3. O texto da legenda se torna editável.
      Legenda do controle no modo de edição
    4. Adicione uma estrela no final da legenda.
    5. Selecione esta estrela.
    6. No painel "Texto", no grupo "Fonte":
      Opções de fonte
      • Clique no Expoentebotão para trocar a estrela em expoente.
      • Mude a cor do texto para vermelho com o Mudar a corbotão.
    7. Saia do modo de edição (tecla Esc).
    8. O asterisco vermelho aparece na legenda do controle.












Postado por às Nenhum comentário:
Marcadores: , ,

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 Nenhum comentário:
Marcadores: , ,
Assinar: Postagens (Atom)

Teste

Teste
teste