Uma chuva de e-mails foi constatada após a publicação da coluna “Menu PopUp do Fireworks”, pois muitas pessoas tentaram fazer não o site todo no Fireworks, e sim, somente a criação do menu e adaptação dele em suas páginas já existentes.

Porém, nossas páginas já possuem características básicas como alinhamento centralizado de tabelas, ou locais reservados ao PopUp menu que não seja o topo de uma página, normalmente o menu ocorre abaixo de um banner ou outras ocasiões.

É justamente ai que está o problema, quando o menu é movido forçadamente, ele perde o registro de exibição dos seus itens, assim, as layers que continham os sub-itens ficam completamente deslocados em relação ao botão que dá o “start” de sua abertura.

Para resolver tal problema e posicionar corretamente o menu, é necessário pequenos ajustes e até colocar a mão nos códigos HTML.

Portanto, nesta coluna, daremos um pouco mais de ênfase ao Dreamweaver e sua integração com Fireworks do que a construção propriamente do menu no Fireworks.

1. Download do PopUp em PNG

Inicie aqui baixando o menu PopUpMenu em PNG (http://www.geekbrasil.com.br/colunas/fireworks/9/arquivos/popup.zip), pronto para exportação para HTML.

Aqui começa nossa instrução de hoje!

2. Exportar o HTML

Com o arquivo já aberto na área de trabalho do Fireworks, vamos tomar os procedimentos padrões para criação de um HTML contendo o PopUp menu baixado a pouco.

Exporte com o nome de “pop.html” (dê preferência em uma pasta de fácil acesso no seu computador, ela será reutilizada no Dreamweaver).

3. Vamos ao Dreamweaver

a. Com uma página em branco no Dreamweaver, salve o documento como “teste1.html”;

b. Utilize agora o “common” “insert Fireworks html” (recurso exclusivo a usuários de Dreamweaver);

c. Na janela que resulta, clique em browser, selecione o arquivo exportado do Fireworks, “pop.html”;

d. Configure-a da seguinte forma, em seguida dê “Ok”.

4. Testando e constatando o erro

Salve o arquivo (Ctrl+S), em seguida pressione F12 e visualize o arquivo, constate que os menus já sofrem um deslocamento provocado pelas bordas padrões do HTML, a mesma coisa irá ocorrer se o mesmo pop for inserido em qualquer ponto ou tabela em uma página, o erro!

Finalize o seu navegador e no Dreamweaver, solicite uma nova página e salve-a como “teste2.html”.

5. Consertando o erro, posicionado corretamente os menus

Uma simples atitude no Dreamweaver resolve o problema de posicionamento dos itens do PopUp menu, é a criação de uma Layer para inserção do conteúdo HTML do Fireworks dentro dele.

a. Selecione o objeto “Draw Layer”, e desenhe em qualquer ponto da sua página um layer;

b. Clique dentro do layer e repita o procedimento de inserção de HTML do Fireworks;

c. Salve e teste o arquivo (F12).

Com certeza, dessa vez o arquivo obteve sucesso, com a exibição dos sub-itens no local programado no Fireworks.

Como exemplo somente, arraste esse objeto e verá que mesmo em funções mais avançadas o recurso é preservado.

Não entrarei em detalhes quanto a construção do método de arrasto de layers.

Você pode fazer o download do arquivo (http://www.geekbrasil.com.br/colunas/fireworks/9/arquivos/arrasto.zip) se desejar.

Utilizei um behavior padrão do Dreamweaver chamado “Drag Layer”.

6. Inserção do PopUp dentro de uma tabela

Para este método, será inevitável o contato com o código, porém superficialmente, inicie um novo trabalho no Dreamweaver e salve-o como “teste3.html”:

a. Insira uma tabela com as seguintes configurações abaixo;

b. Reconfigura a tabela para os seguintes parâmetros;

c. Clique dentro da célula superior esquerda e insira os seguintes valores;

d. Desenhe uma layer em qualquer ponto da tela, de qualquer tamanho também;

e. Arraste a layer para dentro da célula esquerda abaixo, isso é possível pelo ícone “”;

f. Clique dentro do layer e repita o procedimento de inserção de HTML do Fireworks.

7. Editando o HTML

Após todos os procedimentos acima cumpridos, vamos fazer a edição de pequenos parâmetros no HTML, para isso:

a. Selecione o ícone do layer e pressione “F10″;

b. O código fonte referente ao objeto selecionado aparecerá em destaque, é nesse ponto onde iremos alterar os parâmetros, localize a seguinte referência:

style=”position:absolute; left:XXXpx; top:XXXpx;…

Altere por:

style=”position:relative; left:0px; top:0px;…

c. Em seu properties, aparecerá um botão de “refresh”, clique nele ou opte em pressionar “Ctrl+Spacebar” para atualizar a visualização, em seguida pressione F10 novamente para ocultar o “Code Inspector”;

d. salve o arquivo e visualize no navegador, o resultado deverá ser parecido com este exemplo.

Notas:

. Compatibilidade

O recurso obteve 100% de eficácia em IE 4.0 a 6.0 para PC.

Como era de se esperar, o Netscape até versão 4.3 para PC não obteve a exibição de layers, nas versões superiores, foram possíveis as exibições, porém ao exibir os sub-menus, a tabela que continha o objeto é redimensionada por um instante, em seguida retorna em seu estado original, mesmo em Netscape 6.2.2 para PC.

O recurso não foi testado para Netscape ou Internet Explorer para Mac;

. Conformidade

Por tratar-se da primeira solução do gênero, muitos bugs poderão surgir, porém, nos baseamos pela maioria dos internautas que usam como browser default o Internet Explorer e sistema operacional Windows.

Usuário de Netscape ou Mac já possuem uma certa conformidade com alguns recursos não suportados;

. Solução

desenvolvedores que desejarem cooperar no aprimoramento desta ou de soluções alternativas, porem enviar um e-mail para o autor.

Continuem visitando as matérias e dando suas sugestões através do e-mail do autor, isso é importante para nós e para vocês visitantes e profissionais, vocês fazem esta seção, peça seu conteúdo, será um prazer atendê-los!

Até a próxima, e espero que essa abordagem tenha sido útil para vocês.

Autor/fonte: Eduardo Carrega