Como adicionar uma caixa suspensa no Dreamweaver (com imagens)

Índice:

Como adicionar uma caixa suspensa no Dreamweaver (com imagens)
Como adicionar uma caixa suspensa no Dreamweaver (com imagens)

Vídeo: Como adicionar uma caixa suspensa no Dreamweaver (com imagens)

Vídeo: Como adicionar uma caixa suspensa no Dreamweaver (com imagens)
Vídeo: Licenças de Software (Você sabe diferenciar GNU, MIT e outros tipos?) // Dicionário do Programador 2024, Marcha
Anonim

Este wikiHow ensina como usar o Adobe Dreamweaver para criar uma caixa suspensa para uma página da web. As caixas suspensas são menus que "caem" quando um item da sua página da web é clicado, apresentando mais opções no processo.

Passos

Adicionar uma caixa suspensa no Dreamweaver Etapa 1
Adicionar uma caixa suspensa no Dreamweaver Etapa 1

Etapa 1. Abra um projeto do Dreamweaver

Clique duas vezes no arquivo do projeto para fazer isso. Se você deseja criar um novo projeto do Dreamweaver, em vez disso, abra o Dreamweaver e clique em Arquivo, clique Novoe siga as instruções na tela.

Adicionar uma caixa suspensa na etapa 2 do Dreamweaver
Adicionar uma caixa suspensa na etapa 2 do Dreamweaver

Etapa 2. Crie uma lista ordenada

Para criar um menu suspenso, você deve ter pelo menos um item de marcador. Você pode criar um marcador desativando o CSS (clique no Visualizar item de menu, selecione Renderização de estiloe clique Estilos de exibição se estiver marcada), clicando no local onde deseja adicionar o ponto, clicando no ícone do marcador na parte inferior da janela e digitando o nome do ponto. Você deve então ligar novamente o CSS antes de prosseguir.

  • O nome do ponto aqui servirá como ativador do menu suspenso (por exemplo, o botão sobre o qual passa ou toca para abrir o menu suspenso).
  • Pule esta etapa se você já tiver um item de lista que deseja converter em um menu suspenso.
Adicionar uma caixa suspensa na etapa 3 do Dreamweaver
Adicionar uma caixa suspensa na etapa 3 do Dreamweaver

Etapa 3. Determine o nome da sua lista

Clique no Código guia e certifique-se de que você está no Código fonte configuração e, em seguida, role para baixo até o código da lista ordenada (será entre um"

"tag e um"

"tag) e procure a tag" "acima do topo"

tag. A palavra entre aspas é o nome da sua lista.

  • Se você não vir um nome, insira a tag (onde nome se refere ao seu nome preferido da lista) diretamente acima do

    marcação.

Adicionar uma caixa suspensa na etapa 4 do Dreamweaver
Adicionar uma caixa suspensa na etapa 4 do Dreamweaver

Etapa 4. Remova os marcadores

Certifique-se de que você está no lugar certo clicando no Projeto guia e, em seguida, clicando no CSS Designer guia no canto superior direito da janela e faça o seguinte:

  • Clique + à direita do título "Seletores".
  • Digite #name ul onde "name" é o nome da sua lista.
  • Pressione ↵ Enter duas vezes.
  • Role para baixo e clique list-style-type no painel na parte inferior do CSS Designer aba.
  • Clique Nenhum no menu pop-up resultante.
Adicionar uma caixa suspensa na etapa 5 do Dreamweaver
Adicionar uma caixa suspensa na etapa 5 do Dreamweaver

Etapa 5. Altere sua lista ordenada para exibição horizontal

Para fazer isso:

  • Clique + à direita do título "Seletores".
  • Digite #nome li onde "nome" é o nome da sua lista.
  • Encontre o título "flutuante" no painel na parte inferior do CSS Designer aba.
  • Clique no Deixou botão imediatamente à direita do título "flutuante".
Adicionar uma caixa suspensa na etapa 6 do Dreamweaver
Adicionar uma caixa suspensa na etapa 6 do Dreamweaver

Etapa 6. Adicione uma tag ativa à sua lista

Clique no + à direita de "Seletores", digite #nome a (onde "nome" é o nome da sua lista) e pressione ↵ Enter duas vezes.

Adicionar uma caixa suspensa na etapa 7 do Dreamweaver
Adicionar uma caixa suspensa na etapa 7 do Dreamweaver

Etapa 7. Adicione uma cor de fundo

Selecione os #nomeia um item, se necessário, clique na guia "Cor de fundo" em forma de caixa na parte superior do CSS Designer painel, selecione o cor de fundo opção e selecione uma cor de fundo para usar.

Esta é a cor que os itens da sua lista suspensa usarão

Adicionar uma caixa suspensa na etapa 8 do Dreamweaver
Adicionar uma caixa suspensa na etapa 8 do Dreamweaver

Etapa 8. Faça com que seus itens de lista usem o formato de "bloco"

Esse formato garante que, quando alguém clicar ou tocar em um item da lista, poderá abri-lo selecionando um pouco acima ou abaixo, em vez de selecionar precisamente o texto:

  • Certifique-se de que o seu #nomeia um o item é selecionado no CSS Designer aba.
  • Role para baixo até o título "display" no painel.
  • Clique no lado direito do título "display" e, em seguida, clique em bloquear no menu resultante.
Adicionar uma caixa suspensa na etapa 9 do Dreamweaver
Adicionar uma caixa suspensa na etapa 9 do Dreamweaver

Etapa 9. Adicione preenchimento, se necessário

Se você notar que os itens da sua lista estão pressionados uns contra os outros, você pode colocar algum espaço entre eles, fazendo o seguinte:

  • Certifique-se de que o seu #nomeia um o item é selecionado no CSS Designer aba.
  • Role para baixo até o título "preenchimento" no painel.
  • Altere os campos de texto "px" superior e inferior para ler pelo menos 5.
  • Altere os campos de texto "px" esquerdo e direito para ler pelo menos 10.
Adicionar uma caixa suspensa na etapa 10 do Dreamweaver
Adicionar uma caixa suspensa na etapa 10 do Dreamweaver

Etapa 10. Crie uma cor flutuante

Esta é a cor que aparecerá quando você passar o cursor do mouse sobre um item no menu suspenso:

  • Clique + à direita do título "Seletores".
  • Digite #nave a: hover (onde "nome" é o nome da sua lista) e pressione ↵ Enter duas vezes.
  • Clique na guia "Cor de fundo".
  • Selecione cor de fundo e selecione uma cor mais clara do que a usada para a cor de fundo.
Adicionar uma caixa suspensa na etapa 11 do Dreamweaver
Adicionar uma caixa suspensa na etapa 11 do Dreamweaver

Etapa 11. Desligue o CSS

Clique no Visualizar item de menu, selecione Renderização de estiloe clique no Estilos de exibição opção na janela pop-out.

Se o Estilos de exibição opção estiver esmaecida, clique em qualquer lugar no documento do Dreamweaver e tente novamente.

Adicionar uma caixa suspensa na etapa 12 do Dreamweaver
Adicionar uma caixa suspensa na etapa 12 do Dreamweaver

Etapa 12. Crie o conteúdo do menu suspenso

Você pode fazer isso adicionando subpontos abaixo do marcador que deseja usar como botão do menu suspenso:

  • Clique à direita do item da lista que deseja transformar em um menu suspenso e pressione ↵ Enter.
  • Pressione Tab ↹.
  • Digite o nome do primeiro item do menu suspenso e pressione ↵ Enter.
  • Digite o nome do próximo menu suspenso e pressione ↵ Enter e repita conforme necessário.
Adicionar uma caixa suspensa na etapa 13 do Dreamweaver
Adicionar uma caixa suspensa na etapa 13 do Dreamweaver

Etapa 13. Amarre o conteúdo do menu suspenso a um item de marcador

Para fazer isso:

  • Clique + ao lado de "Seletores", digite #nome ul ul e pressione ↵ Enter duas vezes.
  • Role para baixo e clique exibição, então clique Nenhum no menu pop-up.
  • Encontre e clique posição, então clique absoluto no menu pop-up.
Adicionar uma caixa suspensa na etapa 14 do Dreamweaver
Adicionar uma caixa suspensa na etapa 14 do Dreamweaver

Etapa 14. Crie o próprio menu suspenso

Você terá que adicionar outro seletor para fazer isso:

  • Clique + ao lado de "Seletores", digite #nome ul li: hover> ul e pressione ↵ Enter duas vezes.
  • Encontre e clique exibição, então clique bloquear no menu pop-up resultante.
Adicionar uma caixa suspensa na etapa 15 do Dreamweaver
Adicionar uma caixa suspensa na etapa 15 do Dreamweaver

Etapa 15. Faça com que o conteúdo do menu suspenso seja exibido verticalmente

Por padrão, o conteúdo do menu suspenso será exibido em uma barra horizontal, mas você pode forçá-lo em uma coluna vertical fazendo o seguinte:

  • Clique + ao lado de "Seletores", digite #nome ul ul li e pressione ↵ Enter duas vezes.
  • Encontre o título "flutuante".
  • Clique no botão "nenhum" () opção à direita do título "flutuante".
Adicionar uma caixa suspensa na etapa 16 do Dreamweaver
Adicionar uma caixa suspensa na etapa 16 do Dreamweaver

Etapa 16. Salve seu projeto

Pressione Ctrl + S (Windows) ou ⌘ Command + S (Mac) para fazer isso.

Se você criou um novo arquivo Dreamweaver para este projeto, você precisará inserir um nome, selecionar um local para salvar e clicar Salve  para salvar seu arquivo.

Recomendado: