it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Uso brillante di elenchi HTML in Web Design

Puoi trovare elenchi ben disegnati su Internet. I progettisti li utilizzano da decenni per coordinare le informazioni e i layout delle pagine e nel Web di oggi è possibile vedere la grande creatività nel modo in cui i web designer utilizzano le liste. Questi includono menu di navigazione, collegamenti profilo, archivi, attività / liste di controllo e tonnellate di altri usi!

In questo post presenterò diversi tipi di elenchi HTML, con suggerimenti su come progettarli, in particolare su come aggiungere un bordo univoco alla tua lista . Ti illustrerò anche alcuni esempi di siti Web con fantastici design di elenchi e alla fine otterrai un elenco di siti Web con elenchi HTML ben progettati. Non ci sono più dubbi su come rendere unici i tuoi elenchi dall'aspetto semplice e iniziamo a sfruttarli al meglio oggi!

Gli elementi dell'elenco

I web designer stanno costantemente saltando da un carro a un altro, causando il cambiamento degli stili del sito web nel tempo, ma le liste hanno superato la prova del tempo e potrebbero essere in giro nell'innovazione futura del World Wide Web.

Prima di esaminare gli esempi voglio coprire alcuni punti con gli elenchi HTML. Esistono pochi tipi di elenchi che è possibile utilizzare nel proprio lavoro di progettazione. La maggior parte dei web designer si concentra sugli elenchi non ordinati che vengono aperti con un

    tag, ma ci sono anche altre due varianti meno popolari: elenchi ordinati e definizioni dei dati . Ho approfondito ulteriori dettagli qui sotto.

    Liste non ordinate (
      )

    Forse uno degli elementi più utilizzati negli standard HTML4 / HTML5. Gli elenchi non ordinati generano i dati allo stesso modo di un elenco ordinato, tuttavia non vedrai nessun indicatore numerico sul lato . Invece ad ogni oggetto viene dato un piccolo cerchio o disco e suddiviso su una nuova linea. Questa icona può anche essere modificata con la proprietà del tipo di stile lista trovata in CSS.

    Di seguito è riportato il codice di esempio dell'elenco non ordinato:

    • Articolo 1
    • Articolo 2
    • Articolo 3

    Le liste non ordinate sono il rimedio perfetto per creare collegamenti di navigazione . Dato che puoi facilmente annidare interi elenchi all'interno di qualsiasi elemento della lista, è semplice creare link di navigazione secondaria . Dopo aver rimosso lo stile dell'elenco, rimarrai con un elemento elemento vuoto. Da qui puoi disegnare i link di ancoraggio per apparire come elementi di blocco sulla tua pagina, compilando così un design del menu di navigazione, e con qualche codice jQuery puoi mettere insieme una bella intestazione per il tuo sito.

    Più comunemente troverai elenchi non ordinati nel mezzo di articoli web o istruzioni di installazione. Prendi nota del fatto che Google e altri robot di ricerca non elaborano i contenuti della tua pagina in modo diverso, quindi il tuo SEO non dovrebbe essere influenzato indipendentemente dal tipo di annuncio che scegli .

    Elenchi ordinati (
      )

    Quando è necessario ordinare un set di dati, è possibile configurare da zero il proprio framework di layout, ma in questo modo è necessario aggiungere manualmente ciascun numero progressivo, cosa che può risultare noiosa. Le liste ordinate sono ottime per mantenere in linea i compiti numerati senza errori. L'ordine degli elementi della lista interna (

  • ) determinerà come vengono presentati i dati.

    Di seguito è riportato il codice di esempio dell'elenco ordinato:

    1. Articolo 1
    2. Articolo 2
    3. Articolo 3

    È anche possibile cambiare il contatore da numeri regolari a una manciata di altre opzioni . Questi includono lettere alfabetiche e numeri romani, per citarne alcuni. I web designer userebbero l'elenco ordinato per gli elenchi specifici del contenuto. I dati delle ricette, le attività quotidiane, i preferiti o gli utenti registrati / superiori sono solo alcuni esempi. Spesso i commenti del blog vengono creati utilizzando elenchi ordinati per mantenere ogni commento in una sequenza numerata.

    Elenchi di definizione dei dati (
    )

    Gli elenchi di definizioni non si vedono più spesso (non come se fossero mai stati popolari). Sono stati visti con i web designer che creano complessi formati di link o contenuti di scatole. Il tag dell'elenco di dati (

    oggi è spesso frainteso dai programmatori. Nelle specifiche HTML4.01 sono stati usati gli elenchi di dati per accoppiare gli articoli con le loro descrizioni . Questi sono stati chiamati elenchi di definizioni.

    Di seguito è riportato il codice di esempio dell'elenco di definizioni dei dati:

     Articolo 1 
     Descrizione 
     Articolo 2 
     Descrizione 
     Articolo 3 
     Descrizione

    Tuttavia con le nuove specifiche HTML5, gli elenchi di dati hanno ricevuto una trascrizione. Non ci sono differenze con la sintassi nel modo in cui si usano gli elementi, tuttavia il loro scopo è stato aggiornato come un elenco di descrizione che consiste di uno o più termini di dati (

    ) seguito da una o più definizioni di dati (
    ) .

    Un forte esempio tratto dall'articolo di HTML5 Doctor è un elenco formattato con metadati . All'interno di un singolo elemento di lista dl definiresti un termine, come il tuo nome, quindi ogni successivo tag di definizione potrebbe descrivere dati su di te, possibilmente la tua età, professione, città / città corrente, ecc. In definitiva qualsiasi insieme di dati con chiave / valore le coppie si adattano bene in una lista di descrizioni . È possibile utilizzare più di un termine di dati in un elenco, ma W3C afferma che ogni termine dovrebbe essere univoco nell'elenco.

    Ora che abbiamo individuato i 3 stili più popolari, passiamo ad alcuni esempi! I web designer sono diventati molto creativi con le loro liste negli ultimi anni. Di seguito sono stati catalogati 7 dei miei siti web preferiti con particolare attenzione all'utilizzo creativo degli elenchi.

    Semplice navigazione nella lista non ordinata

    I menu di navigazione sono molto più semplici da costruire con le moderne tecniche CSS. Questo è il motivo per cui liste non ordinate e persino liste ordinate sono diventate un'opzione popolare. Uno dei miei esempi preferiti di questo appare sul blog dei social media, Mashable.

    Verso l'alto della loro intestazione noterete 2 insiemi principali di collegamenti. Direttamente in cima al loro logo c'è una piccola lista non ordinata che contiene link di comunità come Top Stories, Trending Topics e People. Il designer ha creato uno stile elegante al passaggio del mouse che presenta uno sfondo e una combinazione di colori solidi.

    Direttamente sotto a questo vedrai i loro collegamenti di navigazione secondaria. Questo menu di navigazione porta a categorie di blog come Social Media o Tech. Entrambi gli elenchi non ordinati sono contenuti in un HTML5