Lar Mídia social Como criar uma barra de navegação de uma lista não ordenada de links no Dreamweaver - dummies

Como criar uma barra de navegação de uma lista não ordenada de links no Dreamweaver - dummies

Vídeo: JQuery Mobile - Trabalhando com Listas - Parte I #18 2025

Vídeo: JQuery Mobile - Trabalhando com Listas - Parte I #18 2025
Anonim

Aqui está um ótimo truque CSS para transformar uma lista com marcadores em uma barra de navegação no Dreamweaver com um efeito de rolagem simples. Usar uma lista com marcadores para barras de navegação é uma convenção bem aceita para sites que atendem aos padrões atuais de acessibilidade.

Crédito: Fotos por istockphoto. com

Os mesmos links ainda estão contidos na lista não ordenada, mas a aplicação dos estilos altera sua aparência drasticamente.

Crédito: Fotos por istockphoto. com

Para criar uma barra de navegação usando CSS para redefinir a lista não ordenada e as tags de link, siga estas etapas:

  1. Clique para colocar o cursor onde você deseja criar sua barra de navegação na página.

  2. Digite o texto que deseja servir como links, separando cada um pressionando a tecla Retornar ou Entrar para criar um retorno de parágrafo.

    Para formatar os links como uma lista não ordenada, separe cada linha de texto que você deseja vincular com uma marca

  3. Crie links, selecionando cada pedaço de texto, clicando no ícone de hiperlink no painel Inserção comum e, em seguida, selecionando a página à qual deseja vincular ou inserindo um URL.

  4. Arraste para selecionar todo o conjunto de links e, em seguida, clique no ícone Lista desordenada no Inspetor de propriedades.

    Um ponto de bala aparece no início de cada link. Se qualquer link não for configurado com uma bala separada, clique para excluir o espaço entre ele e o link antes dele e, em seguida, pressione Return ou Enter para separar os links com um retorno de parágrafo.

  5. Para adicionar uma etiqueta em torno de uma lista de links (ou qualquer outro conteúdo que já esteja em uma página), selecione o conteúdo e clique no ícone Div no painel Inserção comum.

    A caixa de diálogo Inserir Div é aberta.

    Adicionando uma tag em torno da lista desordenada de links é útil se você deseja adicionar formatação.

  6. Escolha Seleção de embrulho na lista suspensa Inserir.

    Para um controle mais preciso sobre onde você adiciona uma nova tag, você pode escolher opções na lista suspensa Inserir na parte superior da caixa de diálogo Inserir Div.

  7. Digite um nome no campo Classe ou no campo ID.

    Uma tag com a classe ou ID nome que você inseriu é adicionada automaticamente à página em torno da lista de links.

  8. Na parte inferior da caixa de diálogo Inserir Div, clique no botão Nova regra CSS.

    O novo nome da regra CSS é adicionado à lista de nomes de estilo no painel CSS Designer Selectors.

  9. No painel Propriedades, especifique as configurações desejadas para cor, fundo, tamanho, margens e preenchimento.

    A formatação de estilo é aplicada automaticamente ao conteúdo da tag porque você aplicou o estilo conforme você criou nos Passos 5-7.

  10. Para criar um estilo composto que formatará a lista não ordenada somente quando for usado na barra de navegação, crie um estilo composto que inclua o nome da classe. barra de navegação:

    1. Coloque o cursor em qualquer lugar na lista com marcadores.

    2. Clique no sinal de mais (+) na parte superior do painel Seletores.

    3. No campo Nome do seletor, verifique se o Dreamweaver foi inserido automaticamente. navbar ul como o nome de um novo estilo no painel Selectores.

    4. No painel Propriedades, defina as margens e o preenchimento para 0.

  11. Crie um estilo composto para redefinir as etiquetas dos itens da lista:

    1. Coloque o cursor em qualquer lugar na lista com marcadores.

    2. Clique no sinal de mais na parte superior do painel Seletores.

    3. No campo Nome do seletor, verifique se o Dreamweaver foi inserido automaticamente. navbar ul li como o nome de um novo estilo no painel Selectores.

    4. No painel Propriedades, defina Display como Inline.

    5. Altere o tipo de estilo da lista para Nenhum para remover a marca.

    6. Defina as margens esquerda e direita para 20 pixels.

      Esta etapa separa os itens da lista uns dos outros na lista horizontal. Você pode alterar a configuração para criar a quantidade de espaço entre os links que melhor se adequa ao seu design.

  12. Crie um estilo para redefinir a tag do link:

    1. Clique para colocar seu cursor dentro de um link na barra de navegação.

    2. Clique no sinal de mais na parte superior do painel Seletores.

    3. Se quiser alterar o nome do estilo, clique duas vezes no nome no painel Seletores e digite o nome que deseja usar.

    4. Na seção Texto do painel Propriedades, defina Decoração de texto para Nenhum.

    5. Ainda na seção Texto, escolha uma cor da cor bem para especificar a cor dos links quando eles são carregados em uma página.

  13. Crie um novo estilo para redefinir a tag do hover-link para que a cor do link mude quando um usuário rola um cursor sobre o link:

    1. Clique no sinal de mais na parte superior do painel Seletores.

    2. No campo Nome do seletor, digite. navbar a: hover.

    3. Na seção Texto do painel Propriedades, defina Decoração de texto para Nenhum.

    4. Ainda na seção Texto, escolha uma cor da cor bem para especificar a cor do link quando os usuários rodam o cursor sobre o link.

  14. Crie um novo estilo para redefinir a tag do link visitado para que a cor do link mude depois que um usuário clicar em um link:

    1. Clique no sinal de mais na parte superior do painel Seletores.

    2. No campo Nome do seletor, digite. navbar a: visitado.

    3. Na seção Texto do painel Propriedades, defina Decoração de texto para Nenhum.

    4. Ainda na seção Texto, escolha uma cor da cor bem para especificar a cor do link depois de ter sido visitada.

  15. Clique no botão Live na parte superior do espaço de trabalho ou clique no botão Visualizar para exibir a página em um navegador para ver o efeito dos estilos do link.

Como criar uma barra de navegação de uma lista não ordenada de links no Dreamweaver - dummies

Escolha dos editores

Como executar o teste beta para uma aplicação iOS - manequins

Como executar o teste beta para uma aplicação iOS - manequins

Depois de executar o seu aplicativo em alguns dispositivos e está confiante de que está funcionando da maneira que é suposto, considere levá-lo às mãos de alguns testadores beta. O teste beta permite que você receba comentários de usuários reais e repare todos os erros antes que o público em geral os veja. Você pode se surpreender ...

Como publicar no Amazon Appstore para Android - dummies

Como publicar no Amazon Appstore para Android - dummies

Publicação para o Amazon Appstore para Android é semelhante à publicação na Google Play Store: você cria uma conta e, em seguida, talvez seja necessário pagar uma taxa de desenvolvedor. Ao contrário do Google Play Store, os aplicativos devem ser revistos no Amazon Appstore para Android, portanto, planeje alguns dias entre o dia em que você enviar ...

Como preparar ativos gráficos em seu aplicativo Android para publicar na Play Store - Dummies

Como preparar ativos gráficos em seu aplicativo Android para publicar na Play Store - Dummies

Quando você publica um aplicativo Android na Play Store, você interage com o Console do desenvolvedor do Google Play. O passo essencial nesta interação é o passo em que você carrega o arquivo APK do seu aplicativo. É o passo essencial, mas não é o único passo. Você também deve usar a Consola do desenvolvedor da Play Store ...

Escolha dos editores

As Leis de Minecraft Redstone - dummies

As Leis de Minecraft Redstone - dummies

Cada mecanismo Redstone da Minecraft possui um conjunto diferente de propriedades que determinam como ele atua. Você deve entender as relações entre suas propriedades. Depois de trabalhar com Redstone por um tempo, a forma e a função das suas ferramentas podem se tornar bastante intuitivas. Até então, você pode usar essas informações para descobrir quais opções são ...

Minecraft Pocket Edition Guia de Sobrevivência - dummies

Minecraft Pocket Edition Guia de Sobrevivência - dummies

Ao contrário da versão bastante complicada para PC do Minecraft, Pocket Edition (PE) de A Minecraft tem uma série de etapas mais direta para alcançar seu ponto final, o Nether Spire. Para sobreviver ao PE Minecraft, um jogador precisa seguir a série de passos descritos abaixo. Punch madeira e construir um abrigo. Todo o Minecraft ...

Minecraft Para Dummies Cheat Sheet - dummies

Minecraft Para Dummies Cheat Sheet - dummies

Minecraft requer um jogador para reunir recursos para sobreviver, construir, criar, e avance no jogo. Devido aos diferentes ambientes encontrados no Minecraft, um jogador precisa usar diferentes estratégias para reunir recursos eficientemente nas três principais áreas do jogo - Overland, the Mines e the Nether. Uma vez que estes ...

Escolha dos editores

Como criar mensagens de e-mail de impressão em série no Word 2013 - dummies

Como criar mensagens de e-mail de impressão em série no Word 2013 - dummies

Palavra 2013 permite que você expire mensagens de e-mail personalizadas usando a opção E-Mail para mala direta. Esta opção funciona apenas quando você configura o programa Microsoft Outlook no seu computador. Depois disso, você inicia o documento principal para sua fusão de e-mail obedecendo a estas etapas:

Como criar múltiplas colunas em um documento do Word 2007 - dummies

Como criar múltiplas colunas em um documento do Word 2007 - dummies

Para converter seu padrão single- (ou não-) coluna do documento do Word 2007 em um com várias colunas, basta escolher o formato da coluna que deseja no menu Colunas. Instantaneamente, seu documento é transformado em uma maravilha multicolora!

Como criar tabelas rápidas nas tabelas do Word 2008 para Mac - dummies

Como criar tabelas rápidas nas tabelas do Word 2008 para Mac - dummies

Ajudam você a organizar idéias ou dados que seriam aborrecedores e difíceis de compreender em forma de parágrafo regular. Com o Word 2008 para Mac, você pode facilmente criar tabelas - às vezes chamadas de grades - em qualquer lugar em seus documentos. A maneira mais fácil de criar tabelas é com um dos melhores recursos novos ...