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
Marcadores: , ,

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)

Teste

Teste
teste