Dreamweaver

Dicas, sites e links úteis para / sobre / de / em Dreamweaver

Centralizando layout • Código HTML que não aparece no Internet Explorer

Precisa de curso/treinamento de Dreamweaver ou serviços em webdesign,no Rio de Janeiro (RJ)? Fale comigo: Wallace Vianna, designer.

Dreamweaver CS6 (em diante)

Personalizando a validação de formulário no Dreamweaver com behavior/comportamento Validate Form/Validar formulário

Sei que as tecnologias mudam, o Dreamweaver hoje (2016) possui os snippets (objetos Javscript avançados) para validação de formulário, mas achei interessante postar aqui algumas dicas sobre o recurso existente em Behaviours/Compartamentos: validate form/Validar formulário (uma biblioteca visual de Javascript para impedir que o formulário seja enviado vazio ou preenchido incorretamente):

Como funciona/onde fica
Esse recurso funciona primeiro  selecionando um formulário HTML com campos nomeados (nas tags/marcadores HTML <INPUT>, nos parâmetros “name”e “id”).

Se seu formulário não possui validação ainda

  • basta ir no menu Window/Janela > Behaviors/Comportamentos > Validate Form/Validar formulário;
  • o painel vai aparecer com 2 colunas vazias, então basta clicar no botão “+”
  • no painel visualizamos os nome dos campos (IDs), cujas ações podem ser definidas (ex.: campo de formulário “nome” pode ser Required/obrigatório, assim como “e-mail”, etc).

Se seu formulário já possui validações definidas (e você deseja edita-las)

  • basta ir no menu Window/Janela > Behaviors/Comportamentos > Validate Form/Validar formulário;
  • o painel vai aparecer com as colunas e eventos preenchidas; basta clicar na ação Validate form/Validar formulário
  • no painel visualizamos os nome dos campos (IDs), cujas ações podem ser editadas

Definindo ou alterando as ações, basta dar Ok.

Editando a validação
Dependendo da sua versão/correção do Dreamweaver a validação vai aparece em inglês (!).

dreamweaver-alerta-ingl

Para corrigir isso temos de ir no painel Code/Código ou Split/Dividir e localizar o código Javascript existente, que começa nas linhas

<script type=”text/javascript”>
function MM_validateForm()

Por exemplo, as linhas

else if (test.charAt(0) == ‘R’) errors += ‘- ‘+nm+’ is required.\n’;

if (errors) alert(‘The following error(s) occurred:\n’+errors);

podem ser traduzidas assim:

else if (test.charAt(0) == ‘R’) errors += ‘- ‘+nm+’ é obrigatório.\n’;

if (errors) alert(‘O(s) seguinte(s) erro(s) ocorreram:\n’+errors);

E que vai ser exibido assim, ao enviar o campo “nome” vazio:

dreamweaver-alerta-pt

Personalizando a validação
Apesar do código se basear na tag/marcação <input,  ID=”nome”> para fazer a validação, o texto que aparece na validação é retirado da tag/marcação <input,  name=”nome”>

Isso permite que você tenha o texto com letras maiúsculas e minúsculas, além de outros caracteres que ajudem a identificar o campo, no quadro de diálogo da validação.

Exemplo, se o campo validado for DDD do FAX, o ID deste campo deve ser simples assim:

ID=”dddFax”

Já o campo nome pode ser mais complexo:

name=”DDD do FAX”

Ficando assim no código:

<input type=”text” ID=”dddFax” name=”DDD do FAX”>

E ficando assim na mensagem de alerta:

dreamweaver-valida-form

Centralizando layout no Dreamweaver CS4 (vertical e horizontal) com tabelas

Caso precise centralizar um layout de tamanho fixo (ex: 640 x 480 px) em seu HTML, pode usar o editor de código DreamWeaver para esse fim.

Observação:
Esse exemplo usa tabelas, que é uma tecnologia que funciona em todos os navegadores, em qualquer versão. Se precisar ou quiser uma solução que não use tabelas, (Javascript, p.ex.) acesse esse link (centralizando layout verticalmente):

Atenção: Neste tutorial usaremos o layout “clássico” do Dreamweaver, para que usuários de versões anteriores compreendam este tutorial mais facilmente.

dreamweaver-layout-centalizado0

Crie uma página nova no Dreamweaver, em HTML 4.01 transitional (HTML 4.01 de transição).

dreamweaver-layout-centalizado1

dreamweaver-layout-centalizado00

Insira uma tabela com 1 linha e 1 coluna, em 100% de largura (em pixels).

dreamweaver-layout-centalizado2

Abra o painel Dividir/Split

dreamweaver-layout-centalizado3

e acrescente no código já existente
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

o parâmetro height=”100″ (100% da altura da tela), ficando assim:
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ height=”100″>

dreamweaver-layout-centalizado4

Clique dentro da tabela e defina no painel de Propriedades o alinhamento horizontal e vertical centralizado:  horiz = centro/center Vert = meio/middle

dreamweaver-layout-centalizado5

Insira o seu layout de tamanho fixo (que pode ser um filme Flash, uma página HTML com tabelas, ou um layout em CSS/sem tabelas dentro de uma outra tabela) ali dentro.

dreamweaver-layout-centalizado6

Salve e visualize no navegador.

dreamweaver-layout-centalizado7

dreamweaver-layout-centalizado8

Se por acaso o layout não aparecer centralizado em sua tela:
– aumente a resolução de seu monitor: vá em propriedades de vídeo e selecione uma resolução maior do que a atual.

dreamweaver-layout-centalizado11 dreamweaver-layout-centalizado12

  • abra o código de seu HTML e remova a primeira tag ou marcação (cabeçalho ou DTD)

dreamweaver-layout-centalizado9

dreamweaver-layout-centalizado10

Código HTML que não aparece no Internet Explorer

Vide este artigo na seção Código > HTML.

Extensões / Plug-ins para Dreamweaver

Veja na home deste blog: Soluções dignas de registro > Galeria de fotos fáceis e interessantes no Dreamweaver

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: