Como criar uma barra de navegação a partir de um não ordenada lista de links no Dreamweaver
Aqui está um grande truque CSS para transformar uma lista com marcadores em uma barra de navegação em Dreamweaver com um efeito de rolagem simples. Usando uma lista com marcadores para barras de navegação é uma convenção bem aceite para sites que atendem aos padrões de acessibilidade atuais.
Os mesmos links ainda estão contidos na lista não ordenada, mas a aplicação dos estilos muda sua aparência dramaticamente.
Para criar uma barra de navegação usando CSS para redefinir a lista e link não ordenadas as tags, siga estes passos:
Clique para colocar o cursor onde você deseja criar sua barra de navegação na página.
Digite o texto que deseja servir como as ligações, separando cada pressionando a tecla Return ou Enter para criar um retorno de parágrafo.
Para formatar os links como uma lista não ordenada, separar cada linha de texto que você deseja vincular com um
tag.
Criar links selecionando cada pedaço de texto, por sua vez, clicando no ícone Hyperlink no painel Common Inserir e, em seguida, selecionar a página que você deseja vincular ou inserindo um URL.
Arraste para selecionar todo o conjunto de links, e em seguida, clique no ícone de lista não ordenada no Inspetor de propriedades.
Um ponto de bala aparece no início de cada link. Se qualquer ligação não está definida off com uma bala em separado, clique para excluir o espaço entre ele e o link antes dele, e pressione Return ou Enter para separar as ligações com um retorno de parágrafo.
Para adicionar uma marca em torno de uma lista de links (ou qualquer outro conteúdo que já está em uma página), selecione o conteúdo e, em seguida, clique no ícone Div no painel Common Inserir.
A caixa de diálogo Inserir Div abre.
Adicionar uma etiqueta em torno da lista de links desordenados é útil se você quiser adicionar formatação.
Escolha Wrap Around Seleção da lista drop-down Inserir.
Para um controle mais preciso sobre onde você adicionar um novo tag, você pode escolher opções na lista suspenso Inserir na parte superior da caixa de diálogo Inserir Div.
Digite um nome no campo Classe ou o campo ID.
Uma tag com o nome da classe ou ID que você inseriu é adicionado automaticamente para a página em torno da lista de links.
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 Seletores CSS Designer.
No painel Propriedades, especifique as configurações desejadas para a cor de fundo, tamanho, margens e preenchimento.
A formatação de estilo é automaticamente aplicado ao conteúdo da marca, porque você aplicou o estilo como você criou nas etapas 5-7.
Para criar um estilo composto que irá formatar a lista não ordenada somente quando ele é usado na barra de navegação, crie um estilo composto que inclui o nome da classe .navbar:
Coloque o cursor em qualquer lugar da lista com marcadores.
Clique no sinal de mais (+) na parte superior do painel de seletores.
No campo Selector Nome, certifique-se que o Dreamweaver automaticamente inscrito .navbar ul como o nome de um novo estilo no painel Seletores.
No painel Propriedades, definir as margens e preenchimento para 0.
Criar um estilo composto de redefinir as marcas de item de lista:
Coloque o cursor em qualquer lugar da lista com marcadores.
Clique no sinal de mais na parte superior do painel de seletores.
No campo Selector Nome, certifique-se que o Dreamweaver automaticamente inscrito .navbar li ul como o nome de um novo estilo no painel Seletores.
No painel Propriedades, defina a exibição para inline.
Alterar o tipo de estilo de lista para Nenhum para remover a bala.
Definir as margens esquerda e direita para 20 pixels.
Este passo separa os itens da lista de uma outra 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.
Criar um estilo de redefinir a tag link:
Clique para colocar o cursor dentro de um link na barra de navegação.
Clique no sinal de mais na parte superior do painel de seletores.
Se você quiser alterar o nome do estilo, clique duas vezes no nome no painel Seletores e digite o nome que deseja usar.
Na seção Texto do painel Propriedades, defina text-decoration para Nenhum.
Ainda na seção Texto, escolha uma cor do poço de cor para indicar a cor de links quando eles são carregados em uma página.
Criar um novo estilo para redefinir a tag pairar-link para que a cor do link vai mudar quando um usuário passa o cursor sobre o link:
Clique no sinal de mais na parte superior do painel de seletores.
No campo Selector Nome, insira .navbar a: hover.
Na seção Texto do painel Propriedades, defina text-decoration para Nenhum.
Ainda na seção Texto, escolha uma cor do poço de cor para especificar a cor do link quando os usuários rolar o mouse sobre o link.
Criar um novo estilo para redefinir a tag link visitado para que as alterações ligação de cor após um usuário clica em um link:
Clique no sinal de mais na parte superior do painel de seletores.
No campo Selector Nome, insira .navbar a: visited.
Na seção Texto do painel Propriedades, defina text-decoration para Nenhum.
Ainda na seção Texto, escolha uma cor do poço de cor para especificar a cor do link depois de ter sido visitado.
Clique no botão ao vivo no topo da área de trabalho ou clique no botão Preview para visualizar a página em um navegador para ver o efeito dos estilos de link.
