Validando formulários no Dreamweaver MX

Este tutorial tratará de um assunto muito útil para quem trabalha com formulários e não gosta de ficar escrevendo códigos de validação "na unha": o Dreamweaver MX nos oferece a possibilidade de validarmos um formulário de forma muito rápida e fácil! Vamos ver como isso funciona:
Comece criando um formulário conforme a figura abaixo:

Coloque o nome em cada um dos campos do formulário - neste exemplo eu coloquei "nome", "email" e "senha" respectivamente. A seguir abra o painel de Behaviors (Comportamentos) apertando Shift+F3. Após abrir o painel, clique no + para criar um novo comportamento e selecione a opção "Validate Form" conforme indica a figura:

Você verá uma tela como a da figura abaixo:

Perceba que você tem todos os campos do formulário e pode atribuir algumas configurações. Selecione o campo "nome" e configure de acordo com suas necessidades: neste exemplo eu configurei como "Required" para que o seu preenchimento seja obrigatório e em "Accept" eu configurei como Anything (indicando que qualquer caractere será aceito). Agora, selecione o campo "email" conforme a figura indica:

O campo "e-mail" foi configurado como obrigatório e em "Accept" eu configurei como "Email Adress" para que o Dreamweaver aceite apenas endereços de e-mail (impossibilitando que algum usuário coloque seu nome por exemplo no campo de e-mail) ... Agora vamos configurar o campo senha:

Neste campo eu configurei mais uma vez como um campo obrigatório - e configurei para que o Dreamweaver aceite apenas números (desta maneira a senha não pode conter letras ou outros caracteres a não ser números). Clique em OK e você verá que o painel de Behaviors indica que ao enviar o formulário (onSubmit) a checagem será feita:

Agora faça um teste para ver como ele funciona: no exemplo abaixo eu coloquei propositalmente um nome no campo de e-mail e no campo de senha preenchi apenas com letras. Ao tentar enviar o formulário o Dreamweaver retorna um alerta ao usuário informando que o campo de e-mail deve conter apenas um endereço de e-mail e que o campo de senha deve conter apenas números:

É isso aí! Viram como é muito mais simples fazer uma validação com o Dreamweaver MX?! Agora é só praticar e poupar tempo e trabalho!

Criando uma animação utilizando layers e a timeline no Dreamweaver MX

Quando você entra nos grandes portais e vê aqueles banners cruzando a tela, você pensa: "mas como será que se faz isso ?!? " Esse tutorial busca responder essa pergunta de modo fácil e dinâmico, ensinando você a utilizar duas ferramentas do Dreamweaver para realizar essa tarefa.
Clique aqui para ver um exemplo do que você vai aprender a fazer nesse tutorial.
Pois bem, vamos ao que interessa: abra uma nova página no Dreamweaver e desenhe um LAYER nela no topo esquerdo da mesma. Para desenhar um layer selecione a opção DRAW LAYER na barra de ferramentas, clique onde você deseja criar o layer e sem soltar o botão do mouse arraste o mesmo para ajustar o tamanho do layer.

Você deve obter um resultado parecido com a figura abaixo. Note que existe uma aba na área superior esquerda do layer: ela é usada para selecionarmos o layer mais facilmente e movimentar o mesmo pra qualquer lugar na página entre outras coisas.

Clique dentro do layer e insira uma imagem dentro dele: para inserir a imagem clique no botão Image da barra de ferramentas e procure no seu computador a figura que gostaria de usar.

Selecione o layer com a figura dentro, clique com o botão direito do mouse para abrir um novo menu de opções do layer. Selecione e clique em ADD to Timeline

Aparecerá um novo painel como o da imagem abaixo. Aqui vale a pena ficarmos atentos para alguns detalhes como:
- o ponto mais escuro no início da timeline representa o layer que você criou na posição 1 ou seja, de onde a animação vai começar a acontecer.
- o ponto mais escuro no final da linha destacada em azul representa a posição final do layer que você criou. Ou seja, o ponto onde a animação deve acabar.
- os números indicam a velocidade com que a animação vai ocorrer: quanto mais curto o intervalo selecionado entre o ponto de início da animação e o seu final, mais rápida a animação toda irá ocorrer, isto é, se você selecionar um intervalo entre 1 e 200, a animação ocorrerá mais lentamente já entre 1 e 15 será extremamente rápida.

No nosso exemplo, extendemos o ponto final para o ponto 45 da timeline (para isso basta clicar na bolinha mais escura final e arrastar até o número desejado). Agora atente para um detalhe importante: o marcador vermelho deve estar exatamente sobre a bolinha escura final para irmos para o próximo passo - se ele estiver em qualquer outro lugar com certeza o resultado final não será o esperado.

Agora nós vamos definir onde o fim da animação deve acontecer: selecione novamente o layer na página que você está construindo e o arraste até onde você quer que a animação vá. Pode ser pra cima, pra baixo, pra esquerda ou direita e no nosso exemplo seguimos da esquerda pra direita. Se você fez tudo certo, ao definir o ponto final da animação, uma linha (indentificada pelo retângulo azul) aparecerá indicando a direção da sua animação. Clique no indicador vermelho dentro da timeline (indicado pelo retângulo vermelho) e o arraste em direção ao número 1 da timeline.

Agora você só precisa definir no box da timeline que a animação deve ser automaticamente executada quando sua página web for carregada: para isso selecione o box AUTOPLAY sinalizado pelo círculo vermelho. Para tornar a animação infinita (pra ela ficar em looping) basta selecionar o box LOOP indicado pelo círculo azul. O campo circulado em preto é para você nomear a timeline (um recurso muito útil quando você está utilizando várias timelines) ...

Nota - Quando você seleciona a opção looping aparece um traço na parte superior da timeline: ele é o item que indica que a timeline deve retornar ao ponto 1 e recomeçar a animação. Caso você venha a mexer na bolinha final na timeline, você deve sempre lembrar de levar junto o traço - ou então sua animação vai dar um looping no meio (ou só vai dar um looping depois de muito tempo que a animação acabou).

Dicas:
1. A imagem dentro do layer pode conter link.
2. Combine a timeline com behaviors: você pode aplicar efeitos de show/hide layers em imagens ou texto na página podendo assim fazer a animação aparecer ou sumir da tela por completo.
3. Para posicionar o layer inicial na lateral esquerda fora da página (para que por exemplo a imagem comece totalmente fora da página e entre gradualmente), utilize as setas do teclado para movimentar o layer (pois o mouse nem sempre alcança a borda).

Colocando um scroller no seu site utilizando uma extension do Dreamweaver MX

Muitas pessoas não usam algumas das ferramentas mais versáteis do Dreamweaver que são chamadas Extensions: elas são pacotes de funções pré programadas que facilitam a vida do usuário dos programas da Macromedia.
Conseguindo a Extension para fazer o Scroller
Para colocar um scroller controlado (Ver exemplo funcionando) em nossa página, usaremos uma Extension - e para isso precisamos aprender como conseguir acesso às extensions. Para ter acesso a essas extensions você tem duas opções: entrar direto pelo site da Macromedia e procurar pelo link Extensions dentro dos Downloads ou então usar o atalho que vem no programa (toda vez que nos referirmos a programas nesse tutorial estaremos falando do Dreamweaver) que fica dentro da aba Behaviors conforme mostra a figura abaixo. Para acessar a página das extensions clique no item Get More Behaviors.

Bem, daqui pra frente faremos o processo de como obter a extension para o nosso scroller e como aplicar o mesmo à nossa página. O seu Internet Explorer abrirá em uma tela semelhante a essa:

Clique no botão Search Exchanges indicado pelo retângulo vermelho e uma página de busca será aberta. Procure por dHTML Scrollable Area. DICA: para economizar tempo na busca, selecione a opção para fazer a busca somente dentro de Dreamweaver Exchange
O resultado da busca deve trazer uma Extension exatamente com o nome que você procurou conforme mostra a foto abaixo.

Clique no botão Download indicado pelo retângulo vermelho acima para iniciar o download da Extension. Nesse ponto você será obrigado a fazer o login na comunidade exchange da Macromedia. Se você já usou Extensions antes, faça seu login e continue o processo e se você nunca usou, crie seu cadastro pois sem ele é impossível baixar o arquivo. Salve a extension no seu desktop, ou crie um pasta para guardar esse arquivo.

Instalando a Extension
Agora vamos instalar a sua Extension para que seu Dreamweaver assimile as novas capacidades que ela traz ao programa. Execute a Extension clicando duas vezes sobre ela e clique em Agree para instalá-la.

Utilizando a Extension
Daqui pra frente irermos demonstrar como aplicar a extension a um documento web. Vamos por etapas:
1. Abra o seu Dreamweaver (se ele estava aberto antes da instalação da extension você deve fechar e abrir o programa novamente)
2. Abra o documento no qual você deseja aplicar o scroller
3. Na tela de edição da página vá até o item Command no topo do programa e procure pelo comando DHTML AP Scrollabel Area conforme mostra a foto abaixo:

- a janela abaixo aparecerá:

- Pixel Top significa quantos pixels você quer deixar de margem do topo até onde começa a ser mostrado o conteúdo
- Pixel Left funciona com um parágrafo. A distância do texto e o limite esquerdo de onde será mostrado o conteúdo
- Pixel Width é a largura que você quer o scroller
- Pixel Hight é a altura que você deseja o Scroller.
- Scroll Speed é a velocidade que o texto vai correr
- A aba Content é onde você deve colocar o conteúdo do Scroler
Coloque suas configurações e aperte Create. Pronto ! O seu scroller está criado: agora é só posicionar onde você quer que ele apareça na sua página e ele já está funcionando. Se você quiser colocar figuras de setinhas no scroller, basta você substituir o texto Scroll UP e Scroll Down pelas imagens da sua preferência mantendo os links originais presentes nos textos ;) ...

Como importar uma tabela do MS Excel no Dreamweaver MX

Muitas vezes é preciso publicar em um site uma determinada tabela fixa (um orçamento feito no Excel, por exemplo) sem que precisemos redigitá-la. O que fazer ? Reescrever toda tabela? Não! Nesse tutorial será mostrado como exportar uma tabela do MS Excel e importar a mesma no Dreamweaver MX :) ...

A tabela usada no exemplo é esta.

Antes de tudo, veja como ficaria a tabela se usássemos o comando de copiar/colar diretamente na página HTML:

Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro
Ganho 0 0 1 8 0 4 13 27 38 40 57 60
Perda 6 2 9 8 0 2 2 8 1 4 6 20
Total -6 -2 -8 0 0 2 11 19 37 36 51 40

Realmente não é muito agradável de se ler e nem de se entender... Vamos fazer da maneira correta: abra a tabela no Excel, selecione o menu Arquivo -> Salvar como e em 'Salvar como tipo' escolha a opção 'Texto (separado por tabulações)'

Dê um nome para o arquivo e clicar em 'Salvar': se o arquivo que será exportado tem mais de uma pasta de trabalho (mesmo que só uma delas tenha sido utilizada), aparecerá um aviso semelhante a este:

Esse aviso é comum ao se criar um novo documento pois o Excel cria por default três pastas de trabalho mesmo que você utilize somente uma

Clicando no botão OK é possível que apareça outra aviso:

(clique na imagem para ampliá-la)

Isso ocorre porque o formato de arquivo de texto tem algumas limitações (para saber quais, clicar no botão 'Ajuda') que neste momento não são importantes. clique em 'Sim'. Pronto: as etapas do Excel já foram feitas. Agora é com o Dreamweaver ...

Crie um novo documento ou abra um já existente e selecione no menu Arquivo -> Importar -> Dados tabulares. Aparecerá a seguinte janela:

No primeiro campo deve-se localizar o arquivo '.txt' que foi salvo pelo Excel e no segundo campo deve-se escolher o delimitador 'Tabulação'. Na 'Largura da tabela' deve-se optar por 'Ajustar aos dados' ou definir o tamanho em pixels ou percentagem: a primeira opção é mais usada quando não há um layout na página HTML; assim sendo não é preciso obedecer nenhuma regra de tamanho para não quebrar o layout.

As outras opções já são conhecidas por quem trabalha com tabelas no Dreamweaver e talvez a única um pouco diferente seja 'Formatar a linha do alto': ela aplica uma formatação diferente para a linha do topo. Após escolher todas configurações, clique em OK. Mesmo depois disso tudo, é normal que algumas linhas/colunas sobrem mas basta selecioná-las e deletá-las.
Com a tabela já no Dreamweaver é possível usar os comandos como 'Formatar tabela' ou aplicar a formatação manualmente. Veja como ficou a tabela final (no Dreamweaver) depois de alguns segundos de "árduo trabalho" ;) ...

Macromedia Extension Manager

Uma grande ferramenta da Macromedia é o Extension Manager, um pequeno aplicativo que "turbina" os outros programas (Dreamweaver, Flash, Fireworks) e é possível baixar "extensões" na Web e instalá-las nos programas para obter algumas funções adicionais. Saiba como usá-lo:

Antes de tudo iniciar o Extension Manager...

...e então, a primeira e única janela do Extension Manager se abrirá:

1. Clicando neste ícone poderá instalar novas extensões, apenas uma por vez.
2. Ao selecionar uma extensão já instalada, clicando nesse ícone é possível deletá-la.
3. Nesse menu, estará presente todos os programas da Macromedia instalados.
4. Clicando nesse ícone será direcionado para o site de intercâmbio da Macromedia e lá é possível baixar novas extensões.
5. Abrir o arquivo de ajuda do Extension Manager.
6. De acordo com o programa escolhido no menu acima (campo 3), é mostrado nesta área todas extensões já instaladas para tal aplicativo:
- Ativo/Inativo: Desmarcando essa "checkbox" poderá remover parcialmente a extensão do programa. Caso queira ativar novamente a mesma depois de um tempo marca-se essa caixa novamente.
- Extensões instaladas: Mostra o nome da extensão.
- Versão: Mostra a versão de determinada extensão.
- Tipo: Exibe o gênero da extensão, sendo estes: Comportamento(Behaviors) ou Comando.
- Autor: Por último é exibido o autor de determinada extensão.
7. Nesta área é mostrada informações adicionais sobre a extensão como, por exemplo, a descrição de uso e sua função explicada detalhadamente.

Clicando no menu Arquivo, temos:

Instalar a extensão: Já descrito acima.
Empacotar extensão: Quando se cria uma nova extensão usa-se este recurso para criar um pacote da mesma e pode distribuí-la mais facilmente na Web.
Enviar a extensão: Ao clicar sobre este menu, será direcionado para uma página no site da Macromedia aonde se obtém mais informações de como enviar sua extensão.
Remover extensão: Já descrito acima.
Importar extensões: Usa-se quando desejar importar muitas extensões de uma só vez.
Ir para o intercâmbio da Macromedia: Já descrito acima.
Sair: Sairá do Extension Manager.

Vale lembrar que, para que as extensões instaladas apareçam no programa desejado, é preciso fechá-lo, caso esteja aberto, e iniciá-lo novamente.

Formatar e Ordernar Tabelas no Dreamweaver MX

Este tutorial explicará o funcionamento os comandos de Formatar e Ordernar Tabelas no software Dreamweaver MX. Estes dois recursos são muito uteis quando se deseja manter uma padronização de elementos inseridos numa tabela.
Formatar tabela
Este recurso está presente no menu ‘Comandos’ (é a terceira opção de baixo pra cima). Para que fique 'ativo' é necessário que haja uma tabela selecionada no momento e ao clicar sobre ele aparecerá a janela abaixo. Para facilitar o aprendizado a janela foi dividida em 6 campos:

1. No primeiro campo há algumas pré-definições de tabelas. É muito provável que a solução que se procura esteja citado nesses estilos.

2. Esta é área onde há a pré-visualização da tabela com o exemplo de um dos estilos e quais os efeitos das configurações setadas.
3. Definição das configurações das linhas de dados, isto é, todas as células exceto as do topo e as primeiras células de cada linha:
- Primeira (cor): Com a opção de alternância desativada, esta cor será aplicada à todas linhas exceto às descritas acima.
- Segunda (cor): Esta opção de cor só terá valor real se alguma opção de alternar estiver ativa.
- Alternar: Permite escolher entre quatro opções de alternância de cores pré-definidas, sendo elas: A cada duas linhas; Grupo de duas linhas; Grupo de três linhas e Grupo de quatro linhas.
4. Aqui é definido o estilo somente da linha do topo da tabela:
- Alinhar: Dentre os 3 tipos de alinhamento, podemos escolher um para ser aplicado a todo texto existente nas células da primeira linha da tabela.
- Estilo de texto: Pode-se setar se o texto da linha do topo será em negrito, itálico ou ambos.
- Cor do fundo: Como geralmente a linha de cima de uma tabela define uma característica das linhas abaixo dela, é interessante que esta tenha uma cor diferenciada e é nesta área que se define esta cor.
- Cor do texto: Aqui pode ser definida uma cor para aplicá-la ao texto.
5. Da mesma forma que a linha do topo, é comum que a primeira coluna defina alguma característica dos elementos ao lado dela sendo normal que ela tenha características de texto e cores diferenciadas:
- Primeira(cor): Com a opção de alternância desativada esta cor será aplicada a todas linhas exceto às descritas acima.
- Segunda(cor): Esta opção de cor só terá valor real se alguma opção de alternar estiver ativa.
- Alternar: Pode-se escolher entre 4 opções de alternância de cores pré-definidas, sendo elas: A cada duas linhas; Grupo de duas linhas; Grupo de três linhas; Grupo de quatro linhas.
6. Aqui podemos definir algumas opções finais:
- Borda: Tem o mesmo valor do atributo: border da tag table. Isto é, seta o valor da expessura da borda da tabela.
- Aplicar todos os atributos aos tags TD e não aos TR: Esta caixa seta se é para se aplicar à formatação somente na tabela e não em suas linhas, tendo como tag: TD e TR, respectivamente.

---

Ordenar tabela

Da mesma forma que a opção Formatar tabela, este recurso está presente no menu Comandos e só é ativo caso uma tabela esteja selecionada. Como o nome sugere, este recurso permite fazer os elementos de uma tabela seguirem uma determinada ordem. Abaixo as opções detalhadas presentes na janela:

- Ordenar por: Esta opção seta os valores da coluna que serão usados para organizar as linhas.
- Ordenar (campo 1): Determina o tipo de elemento que a coluna deve ser organizada - numericamente para números e alfabeticamente para palavras.
- Ordenar (campo 2): Escolha entre ascendente (De 0 até infinito e de A a Z) ou descendente (Infito até 0 e de Z a A), de acordo com suas necessidades.
- E então por: Neste campo pode-se criar uma ordenação secundária para a tabela.
- Ordenar (campo 1 e 2): Vide acima

- A ordenação inclui a primeira linha: Caso não haja itens que não possam ser alterados na linha do topo, deixar essa opção marcada.
- Ordenar as linhas THEAD: Caso haja uma seção thead na tabela, com essa opção marcada a mesma será incluída na ordenação porém, continuará no topo.
- Ordenar as linhas TFOOT: Caso haja uma seção tfoot na tabela, com essa opção marcada a mesma será incluída na ordenação porém, continuará na parte inferior da tabela.
- Manter os atributos TR com a linha ordenada: Mantém atributos como cor, centralização e etc, mesmo depois da ordenação.

Criando galerias de fotos com o Dreamweaver MX

Você sabia que é possível criar galerias de fotos para Web simplesmente com alguns clicks? Não!? Pois esse tutorial irá ensinar como fazer isso usando o Dreamweaver MX, software de edição de páginas desenvolvido pela Macromedia. Importante: é preciso ter o Fireworks instalado para que este comando funcione corretamente.

1. Crie um novo documento e no menu selecionar Arquivo -> Salvar. Renomeie o arquivo como index.htm.

2. Agora no menu Comandos escolher a opção 'Criar álbum de fotografias na Web'.

3. A seguinte janela será aberta:

Será apresentada a função de cada opção acima. Para facilitar o aprendizado elas serão identificadas por letras ao lado:

A - Nesta opção é definido como será o título do álbum e este título ficará no topo da página que será criada. Ex: Fotos da Família.
B - Informações de sub-cabeçalho: uma pequena descrição do "tema" das fotos. Ex: Viagem ao Rio de Janeiro.
C - Neste campo podem ser inseridas mais informações sobre as fotos. Ex: Apenas as melhores fotos foram selecionadas.
D - No campo 'Pasta das imagens de origem' pode-se clicar no botão 'Procurar' e definir a pasta na qual as fotos estão armazenadas.
E - Local onde ficarão todos os arquivos usados. É recomendável que seja em alguma sub-pasta da pasta que contém o arquivo "index.htm" criado anteriormente.
F - Quando a galeria for criada, as fotos serão exibidas em um tamanho pequeno (miniaturas) em uma tabela e ao serem clicadas ficarão no tamanho original. Neste campo é definido qual o tamanho dessas miniaturas e vale lembrar que as medidas são sempre em pixels. Na caixa ao lado seleciona-se o nome do arquivo a ser exibido ou não abaixo de cada miniatura; em alguns casos os arquivos têm nomes como 210802.jpg, então é recomendável não selecionar essa opção.
G - É definido o número de colunas da tabela de miniaturas: cinco é um tamanho apropriado.
H - Agora é determinado qual o formato de arquivo as miniaturas terão. Para ganhar velocidade é recomendado escolher a opção GIF - mas se o objetivo é qualidade, inclusive nas miniaturas, escolha JPEG.
I - Como as fotos serão copiadas para uma nova pasta, deverá ser definido qual o formato usado no arquivo em seu tamanho natural: o ideal é escolher a opção JPEG - Melhor qualidade.
J - Essa opção é algo extremamente útil: ela criará opções para navegar entre as fotos em todas as páginas, portanto é recomendado deixá-la selecionada.

&ampamp;amp;lt;a href="http://moads.valuead.com/default_reference?pid=70175&ampamp;amp;amp;gid=16" target="_blank"&ampamp;amp;gt;&ampamp;amp;lt;img src="http://moads.valuead.com/default_image?pid=70175&ampamp;amp;amp;gid=16" border="0"&ampamp;amp;gt;&ampamp;amp;lt;/a&ampamp;amp;gt;

Finalmente clicar em OK: o Fireworks e o trabalho serão iniciados. Esse processo pode demorar alguns minutos de acordo com a velocidade do computador usado.

Depois de finalizado o Dreamweaver será maximizado novamente e avisará que o álbum foi criado com sucesso. Agora o arquivo deverá ser salvo e visualizado no navegador preferido. O resultado será esse:

(essa imagem usada como exemplo foi tirada do arquivo de ajuda do Dreamweaver)

É nítido que o computador fará quase todo o trabalho. Pronto!