Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

Dreamweaver


Você está aqui: Home » Dreamweaver » Criação de Menu Deslizante através do DreamWaver

Criação de Menu Deslizante através do DreamWaver


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/mkt digital_flash_300x250.swf', 300, 250 ); " alt="Tecnoponta - 300 x 250 - MKT Digital" />

Salve, salve galera!!!

Neste artigo, irei mostrar como desenvolver um menu “pop-up” totalmente personalizado, a sua maneira, usando apenas o Dramweaver, sem a necessidade de conhecimento de linguagem de programação.

- Você deverá ter o layout do site desenvolvido, então crie uma imagem (figura 1.1) que será a base do menu:

Figura 1.1

Img5

 

 - No meu caso estou utilizando a figura “Menu” como figura base para o Menu.

- Crie uma Nova Camada (figura 2.1) e a posicione sobre a figura base (figura 2.2). Logo, crie o layout do Menu dentro da Camada (figura 2.3).
Obs.: Não se esqueça de nomear a camada, de melhor forma para identificá-la,

Img2

(figura 2.1)

Img3

(figura 2.2)

Img1

 

(figura 2.3)  

-  Selecione a Camada que será o menu, e, na caixa de ferramentas “Propriedades” no campo “vis” selecione “hidden” para ocultar a camada.

 - Selecione a Figura Base, acesse a caixa de ferramentas “Comportamentos” (SHIFT + F3). Na guia “Comportamentos” pressione o botão “+” e selecione a opção “Mostrar-Ocultar as Camadas” (figura 3.1).  

 Img4

(figura 3.1)

 - Ao acessar a opção “Mostrar-Ocultar as Camadas”, uma janela abrirá mostrando todas as camadas existentes no seu arquivo. (em nosso exemplo apenas 1)

- Selecione a camada referente ao menu e pressione o botão “Mostrar”, clique em Ok (figura 3.2).

- Na caixa “Comportamentos” selecione o evento e clique na seta. Um sub-menu abrirá e deverá ser selecionado a opção “OnMouseOver”.

- Repita a operação e no lugar de “Show” selecione “Hide” e no sub-menu selecione a opção “OnMouseOut”.  

Img

(figura 3.2)

Bem galera, espero que vocês tenham gostado, no próximo artigo estarei enviando como desenvolver um menu semelhante a esse, porém em FireWorks. Enviem dúvidas, críticas ou sugestões de artigos para o e-mail, renato.salgados@gmail.com.

Abraços a todos, fui!!!


Sobre o Colunista:

Renato Silva


Profissão: Estudante de Comunicação Social pela UNI-BH, trabalho como desenvolvedor web em uma agência de comunicação.

Descrição: Com grande experiência em comunicação social, desenvolvo trabalhos de qualidade na área de comunicação voltados para a mídia impressa e digital (desenvolvimento de peças gráficas, campanhas publicitárias, web-sites - utilizando de conhecimento para melhores práticas em design de páginas, Web 2.0 e conhecimento em padrões de acessibilidade). Conhecimentos em Programação: Visual Basic - Html – ASP – CSS (folha de estilos)

Deixe seu comentário:




Outros artigos postados por este autor


Artigos relacionados sobre Dreamweaver





© Copyright 2002-2017
Portal SOS Designers
Webmaster: Luiz Antonio Bovi