All Articles Dreamweaver
Dreamweaver CS5: creazione di un menu di spostamento da una 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.

Quando si costruisce un best-practice sito web, dovete costruire il vostro menu di navigazione sulla base di liste, se possibile. Theyre semanticamente preciso (un menu è una lista, dopo tutto) e CSS li rende facili da stile. Diamo un'occhiata a come funziona un elenco di navigazione sotto il cofano. Ill utilizzare Dreamweaver in vista Codice, ma sentitevi liberi di seguire con un editor di testo direttamente, se volete.

Fase 1 - Creare un elenco

Questa parte è facile: Creare un nuovo file HTML, nessun modello, è sufficiente digitare le voci nel menu. Racchiudere ogni voce dell'elenco con

Si dovrebbe finire con qualcosa di simile: <ul>
  <li>Home</li>
  <li>Products</li>
  <li>Support</li>
  <li>Team</li>
  <li>Contact Us</li>
</ul>

Tuttavia, si vuole fare in modo che ogni elemento di link a qualcosa che diventerà importante come si costruisce il CSS. Quindi, aggiungere collegamenti a carattere #, per creare qualcosa di simile:

<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>

Fase 2 - Collegare un file CSS esterno

Nel pannello CSS, premere il pulsante Nuova regola CSS nella parte inferiore del pannello (il documento con il simbolo più). Creare uno stile di identificazione con il nome navlist e scegliere di creare un nuovo file di foglio di stile. Nella finestra di dialogo che compare, il nome del file style.css . La sua sempre meglio utilizzare un foglio di stile esterno, anche quando si sperimenta.

Non abbiamo bisogno di definire qualsiasi cosa utilizzando la finestra di dialogo che appare accanto, quindi basta premere OK. Youll hanno creato un foglio di stile con una base, definizione di stile vuoto. Vederlo cliccando sul style.css appena sopra il documento, accanto alla sorgente evidenziata parole codice.

Fase 3 - Aggiungere alcune regole di base CSS

Abbiamo bisogno di specificare che l'elenco ha la navlist ID in modo che possiamo bersaglio. In HTML, aggiungere id=navlist al

Ora possiamo andare avanti sul CSS. Youll probabilmente desidera regolare background-color, la larghezza, i bordi e margini per iniziare, e ti voglio pensare a come costruire i selettori CSS. Se si utilizza #navlist li , youll accedere alla voce dell'elenco nella lista di navigazione. Ancora meglio, obiettivo #navlist li a bersaglio per i link all'interno della vostra lista. L'aggiunta di imbottitura per le rende un bersaglio più grande, mentre l'aggiunta di imbottitura per un elemento della lista non sarebbe. Prova:

# {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;

}


Il

Il #navlist li

Infine, il

Fase 4 - Aggiungete un po 'le regole CSS hover

Per rendere la lista più reattiva, aggiungere una regola hover:

# Navlist li a: hover {

background-color: # 444;

color: # EE2;

}

Fase 5 - Marcatura la pagina attiva

Il suo comune in questo tipo di pagine per segnare la pagina attiva con uno stile di classe mobile, per la classe di esempio = attivo, che si trova nella pagina corrente. Tuttavia, questo significa che il blocco del menu è diverso in ogni pagina. Il suo più conveniente per ogni link tag nel codice HTML con una classe diversa, quindi aggiungere una pagina specifica classe al tag body, e catturarli tutti con una sola regola CSS. Qualcosa di simile a questa:

<body id="bodypage1">

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

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

Il CSS corrispondenti:

# Bodypage1. Pagina1 uno, # bodypage2. Pagina2 uno, # bodypage3. Pagina3 uno, # bodypage4. Page4 uno, # bodypage5. Page5 a {

background-color: # 555;

color: # EE2;

}

In questo modo, avete solo bisogno di cambiare la classe del tag body in ogni pagina. Subdolo, ma funziona.

Ci sono molti, molti trucchi di più, ma questo è tutto per ora. Come forse avete visto nel video tutorial Esplorare CSS, per rendere la lista orizzontale, basta display: inline applicata al li elemento, in modo da esplorare che se lo si desidera. La prossima volta, anche un'occhiata ad alcune delle opzioni più esotiche.

finito product.png

Comments (0)

You must be logged in to comment.

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: