X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Dreamweaver CS5: Construindo um menu de navegação a partir de uma Lista
Traduzido pelo Google Translate

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

Iain Anderson

Iain Anderson | Articles by this author

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government. Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link