Como criar e usar um menu popup com o Fireworks MX e Dreamweaver MX

Neste tutorial será explicado como criar e usar um menu popup com os softwares Fireworks e Dreamweaver (ambos na versão MX). Ao iniciar o Fireworks, deve-se criar um novo documento de 430x300 px. com a cor branca como fundo e em seguida desenhar uma interface. Neste exemplo, forai criada uma empresa fictícia chamada 'Lex Advogados':

Selecione o objeto que terá de ser clicado para o menu aparecer. Com o botão direto, clique e selecione Inserir fatia. Neste exemplo, foi escolhida a caneta como o 'ícone do menu'. Após inserir a fatia o objeto ficará assim:

Clicar na fatia e selecionar no menu Modificar -> Menu pop-up -> Adicionar menu pop-up. Uma janela chamada Editor de menu pop-up será aberta. Na primeira aba (Conteúdo) deve-se digitar todos os itens do menu:

Neste exemplo há uma amostra de todas opções disponíveis: foram criados tópicos (Quem Somos, Clientes, Artigos, Fale Conosco) e sub-tópicos (História e Área de atuação, Pessoas Físicas e Pessoas Jurídicas). E foi usada a opção 'Destino' para _blank (nova página). O uso desta aba é bem fácil: o primeiro botão adiciona uma nova linha de menu; o segundo remove uma linha (caso haja sub-tópicos pendentes nesta linha eles também serão removidos); o terceiro recua uma linha para a esquerda e finalmente o quarto menu recua uma linha para a direita (criando assim um sub-tópico).

Agora clique no botão Próximo no canto inferior desta janela. Na aba 'Aparência' terão as seguintes opções:

Esta aba muda de acordo com a seleção ativa na opção 'Células' e nesta opção é possível determinar se as células serão feitas usando códigos HTML ou se será criada imagens. Na imagem acima a opção ativa é HTML e abaixo veremos a mesma aba com a opção 'Imagem' ativa.

Ao lado da opção 'Célula' pode-se escolher se o menu será vertical ou horizontal. O resto das opções são simples: escolhe-se a fonte, o tamanho, se será em negrito e/ou em itálico e escolhe-se uma entre as três opções de alinhamento do texto dentro da célula (tudo isto com acompanhamento em tempo real por um quadro em baixo da janela). Por fim temos as opções de 'Estado Acima' e 'Estado Sobre', sendo que em ambas são escolhidas a cor do texto e a cor da célula. O estado 'acima' é o estado normal da célula e o 'sobre' define qual será a cor de fundo e a cor do texto quando se passa o mouse por certa célula.

A mesma aba com a opção 'Imagem' selecionada:

São as mesmas opções com a grande diferença de permitir a escolha de 'Estilos' para a célula ! Clique em 'Próxima' para passar para a próxima aba: ela chama-se 'Avançada' e oferece boas opções de aprimoramento do menu ao destino final. Veja:

Nos campos de Largura/Altura da célula é possível determinar um número, em pixels, para as dimensões das células ou deixar no modo 'Automática' em que as células serão ajustadas ao texto. Os campos de preenchimento da célula e espaçamento entre as células representam as tags: cellpadding e cellspacing, respectivamente. O campo 'Recuo do texto' define o tamanho do espaço entre o canto esquerdo e o início do texto e a 'Espera do menu' escolhe-se o tempo que irá demorar para o menu aparecer.
A caixa 'Mostrar borda' habilita ou não o aparecimento das bordas no menu. Por fim, as quatro últimas opções: Largura da Borda, Sombra, Cor da Borda e Realce. Estas opções não estão disponíveis quando são usadas imagens ao invés de HTML para a construção do menu.

A última aba (Posição) é esta:

Basta selecionar uma das pré-disposições de menu ou entrar com oss próprio valores. Para ter mais informações sobre cada opção basta passar o mouse sobre elas. Após isso deve-se clicar em Concluído. A aparência agora será esta:

Note que há uma tabela com 4 linhas: ela representa o menu. Arraste-a para onde desejar que ela apareça. Agora selecione o menu Arquivo -> Visualizar Exportação para que você escolha o formato mais adequado à interface criada. Caso haja muitas cores (como dêgrades), dê preferência ao formato JPEG e se houver poucas cores utilize o formato GIF (como neste exemplo). Clique então em Exportar e caso apareça um aviso dizendo que as fatias serão ignoradas, clique em OK. Escolha uma pasta onde será salvo o arquivo HTML e configure as opções desta maneira:

Nome: Escolher um nome para o arquivo HTML. No exemplo usamos: lex.htm
Salvar como: HTML e imagens
HTML: Exportar arquivo HTML

Nas três últimas caixas deixar marcada apenas as caixas de seleção 'Incluir áreas sem fatias' e 'Colocar imagens na subpasta'. A caixa 'Incluir áreas sem fatias' faz com que todas as partes mesmo as sem fatias sejam exportadas e a segunda caixa 'Colocar imagens na subpasta' proporciona uma maior organização dos arquivos. Após marcar esta caixa, clique em 'Procurar' e crie uma subpasta imagens dentro da pasta que ficará o arquivo HTML clicando em Abrir logo em seguida. A parte inferior ficará assim:

Clique em Salvar.
Agora será usado o Dreamweaver: crie um novo documento e salve-o na mesma pasta onde o arquivo HTML do Fireworks está. Clique em Inserir -> Imagens Interativas -> HTML do Fireworks. Localize o arquivo HTML do Fireworks e clique duas vezes sobre o mesmo, certificando-se que a caixa 'Excluir o arquivo após a inserção' não está marcada. Se tudo ocorreu bem você terá a mesma interface criada no Fireworks agora no Dreamweaver. Também é possível que acima da tabela haja o ícone : ele representa o script em JavaScript gerado pelo Fireworks com todas informações do menu.

Salve novamente o arquivo e visualize-o no navegador (pressione a tecla F12). Pronto!
Veja aqui como ficou o arquivo final usado no exemplo: lembre que, como é apenas um exemplo os links não funcionam. Para baixar o arquivo fonte (PNG) usado neste exemplo, visualize esta imagem e depois clique com o botão direito do mouse escolhendo a opção Salvar. Depois abra-a no Fireworks :) ...

Visualização de código no Dreamweaver MX

Sem dúvida nenhuma o Dreamweaver é a melhor opção quando se deseja criar bons sites para Web. Ele vem conquistado cada vez mais a simpatia de usuários iniciantes e também dos 'experts' - afinal o Dreamweaver MX é capaz de criar páginas dinâmicas com as mais diferentes linguagens de um modo bastante simples. Tudo isso em uma interface WYSIWYG, em inglês "What-You-See-Is-What-You-Get" e em português "O que você vê é o que você tem". Deste modo, sites inteiros podem ser criados sem decorar dezenas de comandos.
Apesar de toda facilidade o Dreamweaver também oferece a opção de "Visualização de código". Neste tutorial será apresentado como otimizar o trabalho usando esse tipo de visualização, dando várias dicas e configurações que podem ser utilizadas para o trabalho mais agradável e eficiente.
Na versão MX o Dreamweaver tem um terceiro tipo de visualização: nela pode-se conferir a criação do site tanto no modo código como no modo projeto, usando uma "meia-tela":

A figura mostra um exemplo da visualização de "meia-tela" e também três opções de visualização realçadas com cores diferentes:

Em cinza: Modo de visualização de código. É nela que será baseado esse tutorial.
Em vermelho: Nessa opção vê-se as duas outras simultaneamente. Ela é a mais indicada para qualquer usuário (seja ele um iniciante ou um pouco mais experiente) pois os usuários que não têm muito conhecimento de HTML podem observar como é a estrutura dos códigos enquanto escrevem o site e os mais avançados podem fazer pequenas correções no código do site sem perder muito tempo.
Em verde: Visualização do Projeto. Devido à sua extrema facilidade, essa é a visualização mais usada.
Antes de tudo, são configuradas as opções de como o Dreamweaver tratará a visualização de código: no menu Editar -> Preferências -> Codificação por Cores, selecionar HTML como tipo de documento e  'Editar o esquema de cores':

No box de seleção são apresentados os tipos de TAGs e do lado esquerdo e do lado direito algumas opções para realçá-las. Logo abaixo você pode ver o exemplo de como ficará a visualização do Código: por padrão o Dreamweaver já tem um esquema de cores mas novos esquemas podem ser testados. Se ao terminar você desejar salvar as configurações, clique em 'OK' e caso você queira manter a configuração anterior, clique em 'CANCELAR'.
Selecionar 'Dicas de código', selecionar todas opções e programar o atraso para 0 (zero) segundo. Na categoria 'Formato do código', o Dreamweaver já tem ótimas configurações por default. Mas podem ser feitas algumas melhorias:

:: Diminuir o Tamanho do recuo para 1
:: Setar o tamanho de tabulação para 2

As outras configurações já são as mais indicadas para uso - portanto não é aconselhável trocá-las.
Vá para a categoria 'Quick Tag Editor', selecione todas caixas e defina o atraso para 0.5 segundo. Ainda na caixa de 'Preferência', selecione a categoria 'Regravação de código' e marque todas as opções - EXCETO a opção 'Remover as tags de finalização adicionais'. Depois que todas as preferências foram setadas, clique em OK.
Agora clique no menu 'Exibir' -> 'Auxílios visuais' e marque todas opções:

O Dreamweaver pode ser configurado para criar o código da página de diversas maneiras: para isso, no menu 'Editar' -> 'Biblioteca de tags'. Não é recomendável mexer nessa opção pois caso algo saia errado, a página poderá não ser exibida corretamente nos navegadores.
IMPORTANTE: Todas modificações de formato de código não afetarão documentos antigos. Para deixar os documentos já criados de acordo com essas novas configurações, faça o seguinte: com o documento aberto selecionar no menu 'Comandos' -> 'Aplicar' a formatação de origem.
Por último, serão apresentadas algumas dicas para edição de tags usando a Visualização de código. Para se criar uma nova tag os procedimentos são simples, ao digitar "<" e a primeira letra, um pequeno menu surgirá logo abaixo com todas as tags:

Pode-se continuar digitando normalmente a TAG e para escolher a tag que está em foco no menu basta você apertar a tecla TAB e inserir o ">" final: ao fazer isso, a tag de finalização surgirá. Depois disso podem ser editados todos atributos da tag usando o Editor de tags. A figura mostrará como se deve iniciar o editor de tags:

Nota-se que ao clicar com o botão direito do mouse na tag inicial, há uma opção de 'Editar tag': ao clicá-la aparecerá uma nova janela com todas as opções de atributos para a tag. Na imagem abaixo há um exemplo do 'Editor de tags' com a tag <iframe>:

Por esse editor (cuja existência é ignorada pela maioria dos usuários), todos atributos de uma tag são editados de forma fácil e direta. O editor pode ser acessado através do modo visualização de projeto; para isso clique no objeto que deseja que tenha sua tag editada e vá ao menu Modificar -> Editar tag.
As opções de busca do Dreamweaver também se estendem ao código fonte: utilize a opção de Pesquisa Editar -> Localizar e substituir ou simplesmente tecle CTRL+F:

No campo 'Procurar' , a opção 'Código-fonte' permitirá fazer buscas e substituições de forma rápida em todo o site - em toda uma pasta ou apenas no  documento. Para finalizar, este tutorial mostrará como "dar aquela enxugada" no documento, economizando segundos preciosos da conexão do visitante.
"Enxugando" o código
Depois de tanto trabalho na construção de um site é comum que existam muitas linhas de códigos inúteis - principalmente se esse documento foi importado de um editor de textos como o MS Word. Algumas dessas tags podem ser deletadas sem que a parte visual do site sofra alterações e algumas outras tags - principalmente as que setam o tipo e tamanho da fonte - podem ser agrupadas.
O Dreamweaver oferece uma pequena ferramenta para fazer essa tarefa de forma rápida e simples, a qual está presente no menu 'Comandos' e tem o título de "Limpar HTML". Ver figura abaixo:
Ao clicar sobre Limpar o HTML, uma nova janela se abrirá podendo escolher as "opções de limpeza". Todas as opções já marcadas são as ideais para uso:

Quando o código do site estiver totalmente pronto, a caixa 'Markup Especial do Dreamweaver' pode ser marcada para que se elimine todas as 'observações' do Dreamweaver (como por exemplo os itens de biblioteca e imagens de rastreamento). Se o HTML foi importado do Word, utilize a opção 'Limpar HTML do Word'. Todas opções restantes deverão permanecer da maneira apresentada e na seqüência, clique em OK.

Painel Assets Dreamweaver MX

Neste tutorial estaremos vendo como utilizar o Painel Assets do Dreamweaver MX, mais um painel que pode - e muito - facilitar nossa vida, agilizando nosso trabalho e poupando muito tempo! Vamos lá!?
Vamos começar abrindo o Painel, utilizando para isso a tecla F11 ou clicando em Window/Assets, conforme indica a figura:

Você verá o seguinte Painel em sua tela:

Perceba que nesta Painel você encontra um botão no canto superior direito. Este botão abre o Menu com algumas opções:

Clicando no botão temos o menu:

Vejamos pra que serve cada uma das opções deste menu:
Refresh Site List: Atualiza a lista do Site
Recreate Site List: Recria a lista do Site
New Library Item: Cria um novo item na Biblioteca
Edit: Edita o item selecionado
Insert: Insere um novo item
Rename: Renomeia item selecionado
Delete: Apaga item selecionado
Update Currente Page: Atualiza a página atual
Update Site... : Atualiza o Site
Copy to Site: Copia item selecionado para o Site desejado
Locate in Site: Encontra/Localiza no Site
Help: Painel de Ajuda
Rename Panel Group: Renomeia o grupo de Painel
Maximiza Panel Group: Maximiza o grupo de Painel
Close Panel Group: Fecha o Painel
Perceba também que no Painel Assets você possui vários ícones que indicam o grupo que você está utilizando. A seguir, veremos qual o significado e respectivo Grupo de cada um destes ícones ...

Perceba que no painel Assets você possui um grupo de ícones, separando conteúdos:

Ao clicar em um ícone destes, você abrirá seu respectivo grupo no painel Assets.Vejamos o significado de cada um destes ícones:

Ícone do grupo de imagens

Ícone do grupo de cores

Ícone do grupo de links

Ícone do grupo de Flash

Ícone do grupo de ShockWave

Ícone do grupo de filmes

Ícone do grupo de Scripts

Ícone do grupo de Templates (Modelos)

Ícone do grupo da Biblioteca

Agora que você já conhece os ícones e quais os seus respectivos grupos, vejamos cada um destes grupos. Vamos começar com o grupo de imagens - portanto clique no ícone de Imagens (já mostrado acima) para obter a seguinte tela:

Perceba que na imagem acima fiz algumas "anotações". O grupo de imagens é dividido em "Site" e em "Favorites" e ao selecionar uma arquivo (neste caso uma imagem) é mostrado o preview (prévia) da imagem. Perceba ainda que no canto inferior direito há alguns botões: o primeiro deles serve para atualizar a lista, o segundo serve para adicionar um novo item a esta lista e o terceiro é utilizado para adicionar o item selecionado aos favoritos do painel.
Ao clicar com o botão direito em algum item da lista, você terá o seguinte menu:

Vejamos o significado de cada um deles:
Refresh Site List: Atualiza a lista do Site
Recreate Site List: Recria a lista do Site
Edit: Edita o arquivo selecionado
Insert: Insere o item selecionado
Add To Favorites: Adiciona aos Favoritos
Copy to Site: Copia o Item para Site desejado
Locate in Site: Localiza Item no Site
Clique com o botão direito em algum item e escolha a opção "Add To Favorites". Perceba que ao abrir o modo "Favorites" do Painel você encontrará o item dentro dele juntamente com outros que já foram adicionados:

No grupo dos "Favorites" você também possui alguns botões no canto inferior direito que lhe permitem fazer algumas configurações:

O primeiro botão serve para criarmos pastas (para organizarmos os itens existentes nos "Favorites"), o segundo botão serve para adicionar um item, o terceiro para editar e finalmente, o quarto botão serve para excluirmos o item do grupo "Favorites". Agora abra clique no ícone de Cores para abrir seu painel:

Todas as cores utilizadas no site estarão aqui, ficando mais fácil de Adicionar cores à Tabelas, Frames, Layers...
Agora que você já conhece cada um dos ícones, basta ir selecionando cada um deles para abrir seus respectivos painéis! ;)

Criando um mapeamento de imagens no Macromedia Dreamweaver MX

Este tutorial mostrará como mapear uma figura. Mas o que é "mapear uma figura" ? Mapear uma figura nada mais é que definir uma ou mais áreas que terão seu próprio link para redirecionamento. Iremos nos basear neste exemplo:

Neste exemplo iremos colocar um link no rosto do BABOO e colocaremos um link no quadrado do Windows Server 2003.
Abra uma nova página no Macromedia Dreamweaver MX: clique em File > New:

Escolha HTML e clique em Create. Surgirá uma nova tela no Macromedia Dreamweaver MX. Para inserir uma imagem no Macromedia Dreamweaver MX, clique em Insert > Image ou simplesmente utilize o atalho Ctrl + Alt + I:

1: Nos mostra qual imagem estamos abrindo (Preview).
2: As extensões das imagens que poderão ser inseridas (no menu dropdown que ali possui, existem outras opções).
3: O local onde a imagem se encontra.
4: Clique em OK para inserir a imagem
Feito isto, a imagem irá surgir na página HTML. Note esta barra de opções que surgiu:

Vamos explicar:
1: Esta caixa de texto nos mostra qual o endereço local da imagem.
2: Estas duas caixas nos mostra a dimensão da figura. W = Comprimento e H = Altura.
3: Estas três opções poderão ser executadas de acordo com sua necessidade de alinhamento da figura: Alinhar à esquerda, Centralizar ou Alinhar à direita.
4: Finalmente as opções de mapeamento do Macromedia Dreamweaver MX: a primeira opção nos mostra que iremos mapear uma área quadrada (ou retangular) da figura, a segunda opção nos mostra que iremos mapear uma área circular (ou elíptica) da figura e a terceira opção nos mostra que iremos mapear uma área poligonal (vários vértices) da figura.
Para fazermos o primeiro mapeamento do exemplo acima nós utilizaremos a opção de mapeamento de áreas circulares (segunda opção citada acima). Com a figura inserida na página clique em Oval Hotspot tool:

Feito isto, quando passar o mouse em cima da figura, surgirá um símbolo "+". Clique e segure o botão esquerdo do mouse na área que deseja inserir o link:

Agora solte o mouse e a imagem ficará assim:

Caso você precise de alinhar a área de mapeamento dentro da figura, clique no botão Pointer Hotspot tool e arraste a área para o local desejado.Este é o botão: .
Note que surgiu uma nova barra de opções:

1: Iremos colocar o endereço do link.No nosso caso "http://www.baboo.com.br"
2: Aqui colocaremos o nome do mapa (para evitar problemas escolha nomes diferentes para cada mapeamento)
Veja como ficou esta barra de opções:

Quando você acabar de escrever nas opções, pressione a tecla Enter do seu teclado (não se esqueça de colocar http:// no link). Pronto: o mapeamento da primeira área já foi feita!
Agora iremos mapear a segunda área. Lembre-se de que o primeiro mapeamento já foi feito e utilizaremos a mesma imagem:

Agora clique em Rectangular Hotspot tool:

No nosso caso será mapeado o quadrado do Windows Server 2003. Feito isto, quando passar o mouse em cima da figura, surgirá o símbolo "+". Clique e segure o botão esquerdo do mouse na área que deseja inserir o link:

Agora solte o mouse e a imagem ficará assim:

Caso você precise de alinhar a área de mapeamento dentro da figura, clique no botão Pointer Hotspot tool e arraste a área para o local desejado. Este é o botão: .
Agora configuraremos o link do segundo mapeamento: clique no quadrado verde que surgiu e na barra que surgiu complete com o link desejado:

Nossa barra de opções ficará assim:

Quando você acabar de escrever nas opções, pressione a tecla Enter do seu teclado (não se esqueça de colocar http:// no link). Pronto: o mapeamento da segunda área foi feita!
Nosso tutorial foi bem simples, porém bem explicativo. Utilize o mapeamento em seu website a partir de hoje ! :) ... Veja nosso exemplo (passe o cursor do mouse sobre o rosto do Baboo e sobre o quadrado do Windows Server 2003 e veja na barra de status de seu navegador que os links são diferentes):

Conectando-se a banco de dados com Macromedia Dreamweaver MX

Introdução
O Macromedia Dreamweaver MX é uma ferramenta poderosíssima para designers e produtores. Uma de suas muito importantes funções é o "poder" de conectar-se com um banco de dados e permitir-nos realizar operações com ele com incrível facilidade. Isso também permite o uso de "server behaviors", que são comandos pré-defindos que nos permitem realizar com poucos cliques e quase nenhuma digitação ou queima de neurônios operações complexas ou trabalhosas, como inserção em banco de dados a partir de formulário -  o que demandaria um trabalho considerável para relacionar campo do formulário/campo da tabela.
Isso, que poderia ficar extremamente complicado se tivermos muitos campos, é extremamente simples com o "Insert command", que associa os nomes dos dois "lados". Mas para usar a grande maioria desses comandos, é necessária uma conexão ao banco de dados. Nesse tutorial aprenderemos a fazer uma conexão com um banco de dados estilo Microsoft Access 2000.
1. Criando um banco de dados
Nesse exemplo vamos criar um banco de dados simples com apenas uma tabela, e esta com quatro campos, incluindo a chave primária. A situação é o armazenamento de dados de um site com login. Teremos a coluna "id", chave primária, Auto Incremento, a coluna "user", texto, 255 caracteres, a coluna "pass", texto, 255 caracteres e a coluna "accesslevel", texto, 255 caracteres. Você pode criar o banco de dados você mesmo no Microsoft Access 2000/XP ou baixar o arquivo já criado aqui, se você não tiver o MSAccess ou não conseguir criar o banco.
2. Definindo um site
A conexão é relativa a um site, e por isso você deverá selecionar ou criar um. Se não souber como fazer isso, nesse mesmo site (BABOO) há um tutorial explicando como fazer. Vamos assumir que você tenha um site chamado "site do tiburcio", e que ele esteja localizado em "C:\Inetpub\wwwroot\tiburcios". Coloque o arquivo baixado (database.mdb) ali.
3. Criando a conexão
Agora vamos criar a conexão. Para isso, abra o painel Databases, pressionando Ctrl+Shift+F10. Agora, crie um arquivo novo, tipo ASP VBScript.

Se você já estiver com o servidor de testes do site configurado, as etapas 1, 2 e 3 já estarão com uma marca de positivo ao lado esquerdo, indicando que foram concluídas. A 4ª etapa é clicar no botão de "+" do painel, como o próprio programa diz. Escolha Custom Connection String. (A outra opção é DSN, que é configurada no servidor. Até hoje eu não encontrei um servidor grátis que ofereça esse recurso. Nada impede que você tente, a efeito de testes, mas seguirei supondo que você escolheu a primeira opção.)
Na janela que vai se abrir, digite o nome da conexão. No campo abaixo, você vai escrever a string. Ela ficará assim, com as aspas (mais tarde explicarei como ela funciona):
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Inetpub\wwwroot\tiburcios\database.mdb"
Sua janela deve estar assim, portanto:

Clique no botão "Test Connection". Você deverá receber a seguinte mensagem:

Se a mensagem não aparecer ou aparecer qualquer outra diferente, verifique se:
1. O nome foi digitado e não contém caracteres "malucos" (%¨&*...)
2. A string foi digitada corretamente
3. A localização está correta
4. A opção "Use Driver on this machine" está marcada
Na string, Provider é o driver que faz a conexão e Data Source é onde o banco de dados está localizado fisicamente no servidor. Para saber onde fica fisicamente um banco de dados num servidor pago, ligue para o suporte. Para saber aonde está num servidor gratuito, visite esta página.
4. Um, dois, três, testando...
Vamos criar uma página simples para verificar o funcionamento do banco de dados: para isso, abra o painel Bindings, pressionando Ctrl+F10. Pressione o botão de "+" e escolha Recordset (query). No campo name, digite um nome. No campo SQL, digite "SELECT * FROM users" para mostrar tudo o que há na tabela users.
Clique em TEST. Se você ver os resultados, está acabado. Você pode continuar e criar uma página que mostre os dados por completo, e até juntar inserção e tudo. Você pode ver um exemplo aqui.