O que saber
- Vá para Inserir > Formulário > Formulário. Clique na linha vermelha pontilhada no formulário e vá para Insert > Form > List/Menu. Escolha as opções de acessibilidade.
- Clique no menu e selecione suas propriedades, então selecione Listar valores para adicionar novos itens de menu. Clique no sinal de mais para adicionar mais itens.
- Adicione valores de item e escolha um item padrão. Para adicionar ações, vá Insert > Form > Jump Menu. Adicione itens ao menu Jump e salve.
Dreamweaver facilita a criação de menus suspensos para o seu site. Mas como todos os formulários HTML, eles podem ser um pouco complicados. Este tutorial o guiará pelas etapas para criar um menu suspenso no Dreamweaver.
Menus de s alto do Dreamweaver
Dreamweaver 8 também fornece um assistente para criar um menu de s alto para navegação em seu site. Ao contrário dos menus suspensos básicos, este menu fará algo quando você terminar. Você não precisará escrever nenhum JavaScript ou CGI para que seu formulário suspenso funcione. Este tutorial também explica como usar o assistente do Dreamweaver 8 para criar um menu de s alto.
Primeiro, crie o formulário
Exceto para assistentes especiais como o menu de s alto, o Dreamweaver não ajuda a fazer com que os formulários HTML "funcionem". Para isso, você precisa de um CGI ou JavaScript.
Quando você está adicionando um menu suspenso ao seu site, a primeira coisa que você precisa é de um formulário para cercá-lo. No Dreamweaver, vá para o menu Inserir e clique em Formulário e escolha "Formulário".
Exibição de formulário na visualização de design
Dreamweaver mostra a localização do formulário visualmente na visualização de design, para que você saiba onde colocar os elementos do formulário porque as tags de menu suspenso não são válidas (e não funcionarão) fora do elemento do formulário. Como você pode ver na imagem, o formulário é a linha pontilhada vermelha na visualização do design.
Escolher Lista/Menu
Menus suspensos são chamados de itens de "lista" ou "menu" no Dreamweaver. Então, para adicionar um ao seu formulário, você precisa entrar no menu Formulário no menu Inserir e escolher "Lista/Menu". Certifique-se de que seu cursor esteja dentro da linha pontilhada vermelha de sua caixa de formulário.
Janela de Opções Especiais
Nas Opções do Dreamweaver, há uma tela de Acessibilidade. Seus menus suspensos ficarão imediatamente mais acessíveis do que outros sites se você preencher essas cinco opções.
Acessibilidade do formulário
As opções de acessibilidade são:
Etiqueta
O campo do rótulo aparece como texto ao lado do seu elemento de formulário. Digite um nome para o menu suspenso. Pode ser uma pergunta ou frase curta que o menu suspenso irá responder.
Estilo
HTML inclui uma etiqueta de rótulo para identificar seus rótulos de formulário para o navegador da web. Suas opções são envolver o menu suspenso e o texto do rótulo com a tag, usar o atributo "for" na tag do rótulo para identificar a qual tag de formulário ele faz referência ou não usar a tag do rótulo.
Posição
Você pode colocar sua etiqueta antes ou depois do menu suspenso.
Chave de Acesso
Os visitantes podem usar uma tecla de acesso com as teclas "Imagem" ou Option para acessar diretamente esse campo do formulário. Este atalho de teclado torna seus formulários muito fáceis de usar sem um mouse. alt="
Tab Index
O índice de tabulação é como os usuários devem acessar os campos do formulário ao usar o teclado para tabular na página da web.
Ao atualizar suas opções de acessibilidade, clique em OK.
Selecione o Menu
Depois de exibir o menu suspenso na visualização de design do Dreamweaver, você precisa adicionar os vários elementos. Primeiro, selecione o menu suspenso clicando nele. O Dreamweaver colocará outra linha pontilhada apenas no menu suspenso para mostrar que você o escolheu.
Propriedades do Menu
O menu de propriedades mudará para as propriedades da lista/menu desse menu suspenso. Lá você pode dar um ID ao seu menu (onde diz "selecionar"), decidir se você quer que ele seja uma lista ou um menu, dar a ele uma classe de estilo da sua folha de estilo e atribuir valores à lista suspensa.
Qual é a diferença entre lista e menu?
Dreamweaver chama um menu suspenso de qualquer menu suspenso que permite apenas uma seleção. Uma "lista" permite várias opções no menu suspenso e pode ter mais de um item.
Se você quiser que um menu suspenso tenha várias linhas de altura, altere-o para um tipo "lista" e deixe a caixa "seleções" desmarcada.
Adicionar novos itens da lista
Para adicionar novos itens ao seu menu, clique no botão "Listar valores…", que abre a janela acima. Em seguida, digite o rótulo do item na primeira caixa. Ele será exibido na página.
Adicionar mais e reordenar
Clique no ícone de mais para adicionar mais itens. Se você quiser reordená-los na caixa de listagem, use as setas para cima e para baixo à direita.
Dar valores a todos os itens
Se você deixar o valor em branco, o rótulo irá para o formulário. Mas você pode fornecer valores a todos os seus itens - para enviar informações alternativas ao seu formulário. Você usará muito isso para coisas como menus de s alto e hiperlinks.
Escolha um padrão
Páginas da Web padrão para exibir o item drop-down listado primeiro como o item padrão. Mas se você quiser selecionar um diferente, destaque-o na caixa "Selecionado inicialmente" no menu Propriedades.
Veja sua lista na visualização de design
Ao terminar de editar as propriedades, o Dreamweaver mostrará sua lista suspensa com o valor padrão selecionado.
Veja sua lista na visualização de código
Se você alternar para a visualização de código, poderá ver que o Dreamweaver adiciona seu menu suspenso com código limpo. Os únicos atributos extras são as opções de acessibilidade. O código é todo recuado e muito fácil de ler e entender.
Salvar e visualizar no navegador
Se você salvar o documento e visualizá-lo em um navegador da web, verá que seu menu suspenso se parece com o esperado.
Mas não faz nada…
O menu que criamos acima parece bom, mas não faz nada. Para que ele faça algo, você precisa configurar uma ação de formulário no próprio formulário.
Felizmente, o Dreamweaver tem um formulário de menu suspenso integrado que você pode usar imediatamente em seu site sem precisar aprender sobre formulários, CGIs ou scripts. É chamado de menu de s alto.
O Dreamweaver Jump Menu configura um menu suspenso com nomes e URLs. Em seguida, você pode escolher um item no menu e a página da Web será movida para esse local, como se você tivesse clicado em um link.
Vá para o menu Insert e escolha Form e depois Jump Menu.
Janela do menu de s alto
Ao contrário do menu suspenso padrão, o menu Jump abre uma nova janela para você nomear seus itens de menu e adicionar detalhes sobre como o formulário deve funcionar.
Para o primeiro item, altere o texto "un titled1" para o que você deseja ler e adicione um URL.
Adicione itens ao seu menu de s alto
Clique no item adicionar para adicionar um novo item ao seu menu de s alto. Adicione quantos itens desejar.
Opções do Menu de S alto
Depois de adicionar todos os links desejados, você deve escolher suas opções:
Abrir URLs em
Se você tiver um conjunto de quadros, poderá abrir os links em um quadro diferente. Ou você pode alterar a opção da janela principal para um destino especial para que a URL seja aberta em uma nova janela ou em outro lugar.
Nome do Menu
Dê ao seu menu um ID exclusivo para a página. É necessário para que o script funcione corretamente. Ele também permite que você tenha vários menus de s alto em um único formulário - dê a todos nomes diferentes.
Insira o botão Go após o menu
Eu gosto de selecionar isso porque às vezes o script não funciona quando o menu muda. Também é mais acessível.
Selecione o primeiro item após a mudança de URL
Selecione isso se você tiver um prompt como "Selecione um" como o primeiro item do menu. Isso garantirá que esse item permaneça padrão na página.
Visualização do design do menu de s alto
Assim como em seu primeiro menu, o Dreamweaver configura seu menu de s alto na visualização de design com o item padrão visível. Você pode editar o menu suspenso como faria com qualquer outro.
Se você editá-lo, certifique-se de não alterar nenhum ID nos itens; caso contrário, o script pode não funcionar.
Menu de s alto no navegador
Salvar o arquivo e pressionar F12 exibirá a página em seu navegador preferido. Lá você pode selecionar uma opção, clicar em "Ir", e o menu de s alto funciona.
