Como criar rollover menus drop-down no dreamweaver

Rollover Drop-Down Menu

A navegação é uma das características mais importantes de um website. Um bom site oferece um sistema de navegação que é fácil de ler e entender, permitindo que os visitantes a encontrar o que estão procurando. Alguns sites contará com um menu drop-down exibir dentro de uma categoria maior. Usando o Dreamweaver, você pode fazer um menu drop-down rollover de incorporar em qualquer site.

Coisas que você precisa

  • PC ou computador Macintosh
  • Conhecimento de HTML
  • Dreamweaver 8.0 ou superior
  • Abra Dreamweaver.

  • A fase de projeto para o site é concluído em um programa gráfico. Isso inclui a navegação para o site. Todas as principais secções são nomeados por exemplo- sobre nós, serviços, entre em contato. Para este exemplo, a navegação irá ser horizontal.

  • Abra a página que terá a navegação no Dreamweaver. Na janela de design ou HTML, clique ou selecione a área onde o menu de navegação será colocado. No menu superior do Dreamweaver, selecione "Inserir" e depois "Imagem". Uma janela será aberta para localizar a imagem na pasta de imagens. Este é o lugar onde todas as imagens para o site deve ser armazenado. Depois que a imagem do menu for encontrado, selecione "Escolher" para colocar a imagem.

  • A barra de navegação principal está agora no lugar. Um dos itens do menu vai precisar para se tornar uma seção que contará com a rolagem e exibir o drop-down. Neste exemplo, a categoria rollover será "About Us". Procure o menu de propriedades no Dreamweaver. É geralmente localizado na parte inferior. Se não estiver visível, vá ao menu superior e selecione então "janela" em "Propriedades". Dentro da janela de propriedades, localize o quadrado azul na direcção da parte inferior esquerdo do menu. As formas azuis são chamados pontos quentes. Selecione o quadrado azul. Usando o mouse na parte de janela de design do Dreamweaver, arraste o mouse para que o quadrado azul aparece em torno do item de menu de rolagem. Por exemplo, o item de menu "About Us" será selecionado.



  • No menu superior no Dreamweaver, selecione "Janela" e depois "Comportamentos". Isto irá abrir uma janela para o lado direito do Dreamweaver. Selecione o sinal de mais localizado no canto superior esquerdo. Um menu será aberto e seleções serão listados. Escolha "Mostrar menu pop-up." Isto irá abrir uma janela separada.

  • Agora que o Mostrar menu pop-up é aberto, os itens da lista pode ser criada. Dentro da janela existem quatro guias. Selecione "Conteúdo". No campo de texto, digite o nome da página que será exibido no drop-down. Por exemplo, "História" seria listada em "About Us". No campo Link, insira o nome do arquivo para a página. Por exemplo, "História" pode ser history.html. Para adicionar outra página no drop-down, selecione o sinal de mais na parte superior da janela. Repita este passo para cada página a ser inscrito no drop-down. Os nomes de página e os nomes de arquivos serão listados na janela.

  • Uma vez que as páginas foram listados, selecione a guia "Aparência" para fazer alterações no drop-down para a fonte, tamanho, cor do texto e cor da célula. Use esses recursos para adicionar estilo para a área de drop-down.

  • Agora que os estilos foram aplicadas, selecione a guia "Posição". Selecione "Abaixo" para direcionar os itens de menu a cair abaixo da barra de navegação. Selecione "OK" para fechar a janela do menu.

  • Visualizar o menu em uma janela do navegador para visualizar o menu drop-down rollover concluída.

dicas avisos

  • Você pode adicionar muitas áreas pendentes de rolagem que você precisar. Este artigo cobre apenas adicionando menu drop-down de um capotamento.
De esta maneira? Compartilhar em redes sociais:

LiveInternet