All Articles Dreamweaver
Dreamweaver CS5: Construindo um menu de navegação a partir de uma Lista
Iain Anderson on Sat, January 7th 0 comments
When it comes down to it a Nav Menu is basically a list. Iain Anderson takes us through the basics of building one such menu from a list in Dreamweaver CS5.

Ao construir um site de melhores práticas, você deve construir seus menus de navegação usando listas, se possível. Theyre semanticamente precisos (um menu é uma lista, afinal de contas) e CSS torna fácil de estilo. Vamos dar uma olhada em como funciona uma lista de navegação sob o capô. Mal estar usando o Dreamweaver no modo de exibição Código, mas sinta-se livre para seguir junto com um editor de texto em linha reta, se desejar.

Passo 1 - Crie uma lista

Esta parte é fácil: Crie um novo arquivo HTML, nenhum modelo, e basta digitar os itens em seu menu. Coloque cada item da lista com

Você deve acabar com algo parecido com isto: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

No entanto, você quer certificar-se cada item links para algo que se tornará importante como vamos construir o CSS. Então, adicionar links para o caractere #, para criar algo como isto:

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Team</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

Passo 2 - Link para um arquivo CSS externo

No painel CSS, pressione o botão Nova regra CSS na parte inferior do painel (o documento com o símbolo de mais). Criar um estilo de identificação com o nome navlist e optar por criar um arquivo de folha de New Style. Na caixa de diálogo que aparece, o nome do arquivo style.css . É sempre melhor usar uma folha de estilo externa, mesmo quando experimentar.

Nós não precisamos de definir qualquer coisa usando a caixa de diálogo que aparece ao lado, então pressione OK. Você terá criado uma folha de estilo com uma base de definição de estilo, em branco. Visualizá-lo clicando no logo acima style.css o documento, ao lado do Código destaque palavras Source.

Passo 3 - Adicione algumas regras básicas CSS

Precisamos especificar que a lista tem o navlist ID para que possamos torná-lo alvo. No HTML, adicione id=navlist à

Agora podemos começar indo na CSS. Youll provavelmente vai querer ajustar background-color, largura, bordas e margens para começar, e você vai querer pensar sobre como você construir a seletores CSS. Se você usar #navlist li , você vai acessar o item da lista na lista de navegação. Melhor ainda, alvo #navlist li a direcionar os links dentro de sua lista. Acrescentando-lhes estofo torna um alvo maior, enquanto a adição de estofo para um item da lista não. Experimente:

# {Navlist

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

}

# Navlist li {

margin: 5px;

}

# Navlist li a {

background-color: # 222;

color: # eee;

padding: 10px;

text-decoration: none;

display: block;

}


O

A #navlist li

Por fim, o

Etapa 4 - Adicione um pouco de CSS hover regras

Para tornar a lista mais reativa, adicionar uma regra hover:

# Navlist li a: hover {

background-color: # 444;

color: # EE2;

}

Passo 5 - Marcação a página ativa

É comum nesses tipos de páginas para marcar a página ativa, com um estilo de classe móvel, por exemplo, classe = ativo, que é colocado na página atual. No entanto, isto significa que o bloco de menu é diferente em cada página. Seus mais conveniente para cada tag link no HTML com uma classe diferente, em seguida, adicione uma classe de página específica para o corpo tag, e pegá-los todos com uma regra CSS simples. Algo como isto:

<body id="bodypage1">

  <li class="page1"><a href="#">Home</a></li>

  <li class="page2"><a href="#">Products</a></li>

O CSS correspondência:

# Bodypage1. Page1 a, # bodypage2. Page2 a, # bodypage3. Page3 a, # bodypage4. Página4 a, # bodypage5. Page5 a {

background-color: # 555;

color: # EE2;

}

Desta forma, você só precisa alterar a classe da tag body de cada página. Sneaky, mas funciona.

Há muitos, muitos truques mais, mas isso é tudo por agora. Como você deve ter visto no vídeo tutorial Explorando CSS, para tornar a lista horizontal, você só precisa de display: inline aplicada à li elemento, de modo que explore, se desejar. Da próxima vez, bem olhada em algumas opções mais exóticas.

terminou-product.png

Related Videos
Comments (0)

You must be logged in to comment.

Core Dreamweaver CS5
Dreamweaver CS5 101
Dream It. Do It.
Do you want to learn Core Dreamweaver CS5?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: