X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Dreamweaver CS5: creazione di un menu di spostamento da una lista
Tradotto da Google Translate

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

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