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

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.