Briljantna uporaba seznamov HTML v spletnem oblikovanju

Lahko najdete dobro oblikovane sezname po vsem internetu. Oblikovalci jih uporabljajo že desetletja koordinirati informacije o strani in postavitve, in v današnjem spletu lahko vidite veliko ustvarjalnost pri tem, kako spletni oblikovalci uporabljajo sezname. Ti vključujejo navigacijske menije, povezave profilov, arhive, naloge / kontrolne sezname in tone drugih uporab!

V tem postu bom predstavil različne vrste HTML seznamov, z nasveti za njihovo oblikovanje, zlasti o tem, kako seznamu dodajte edinstven rob. Prav tako vas bom popeljal skozi nekaj primerov spletnih strani s fantastičnimi vzorčnimi predlogi in na koncu boste dobili seznam spletnih strani z dobro oblikovanimi seznami HTML. Ni več dvoma o tem, kako narediti svoje navadne sezname edinstvene, in začnimo z njimi kar najbolj izkoristiti danes!

Elementi seznama

Spletni oblikovalci nenehno skačejo iz ene v drugo, s čimer se sčasoma spremenijo slogi spletnega mesta, vendar so seznami preizkušeni s časom in lahko so v prihodnosti inovativni v svetovnem spletu.

Pred preverjanjem primerov želim prekriti nekaj točk s seznami HTML. Obstaja nekaj različnih vrst seznamov, ki jih lahko uporabite v svojem lastnem oblikovalskem delu. Večina spletnih oblikovalcev se osredotoča na Neurejeni seznami ki se odprejo z

Urejeni seznami

Definicije podatkov

Neurejeni seznami (
)

Morda je eden izmed najbolj uporabljenih elementov v standardih HTML4 / HTML5. Neurejeni seznami bodo podatke izpisali na enak način kot naročeni seznam, ne glede na to, ali ste na strani ne bodo prikazani številski označevalniki. Namesto tega se vsakemu predmetu poda a majhen krog ali disk in razčlenjeno na novo vrstico. Ta ikona lahko spremenite tudi z lastnostmi tipa slog seznama najdemo v CSS.

Spodaj je primer kode neurejenega seznama:

  Točka 1
 Točka 2
 Točka 3

Neurejeni seznami so odlično sredstvo za gradnjo povezave za navigacijo. Ker lahko enostavno vstavite celotne sezname znotraj katere koli postavke seznama je preprosta stvar za ustvarjanje povezav za pod-navigacijo prav tako. Ko odstranite slog seznama, boste imeli prazen element elementa. Tukaj lahko sidrne povezave snamete kot elemente bloka na vaši strani, tako da izpolnite obliko navigacijskega menija, z nekaj jQuery kode pa lahko sestavite lepo glavo za vaše spletno mesto..

Najpogosteje najdete neurejene sezname na sredini spletnih člankov ali navodil za namestitev. To opazite Google in drugi iskalniki ne obdelujejo vsebine vaše strani drugače, Tvoja SEO ne bi smel biti prizadet, ne glede na to, katero vrsto vnosa izberete.

Urejeni seznami (
)

Ko morate naročiti niz podatkov, lahko nastavite svoj okvir postavitve iz nič, toda na ta način boste morali dodati vsako povečano številko z roko, kar je lahko naporno. Naročeni seznami so odlični ohranjanje oštevilčenih nalog v skladu brez vijakov. Vrstni red notranjih elementov seznama (

) bo narekovalo, kako bodo predstavljeni podatki.

Spodaj je primer kode naročenega seznama:
```
  Točka 1
 Točka 2
 Točka 3
 
 
```
Možno je tudi spremenite števec iz rednih števil na peščico drugih možnosti. Tej vključujejo abecedno črkovanje in rimske številke, poimenovati jih nekaj. Spletni oblikovalci bi uporabljali naročeni seznam za sezname, ki so specifični za vsebino. Podatki o receptih, dnevne naloge, priljubljene, ali na vrh / nedavno prijavljeni uporabniki so le nekaj primerov. Pogosto boste videli blog komentarji zgrajena z uporabo naročenih seznamov, da vsak komentar ostane v oštevilčenem zaporedju.

Seznami definicij podatkov (
)

Seznami definicij se ne vidijo več pogosto (ne tako, kot so bili vedno priljubljeni). Včasih so jih videli s spletnimi oblikovalci, ki so ustvarjali kompleksne oblike povezav ali vsebine polja. The oznaka seznama podatkov (
) koderji danes pogosto napačno razumejo. V specifikacijah HTML4.01 so bili uporabljeni seznami podatkov seznanite s svojimi opisi. Ti so se imenovali seznami definicij.

Spodaj je primer kode seznama definicij podatkov:
```
  Točka 1
 Opis
 Točka 2
 Opis
 Točka 3
 Opis
 
 
```
Z novimi specifikacijami specifikacij HTML5 so bili narejeni prepisi. V načinu uporabe elementov ni razlik s sintakso, vendar je bil njihov namen posodobljen kot seznam opisov, ki je sestavljen iz enega ali več podatkovnih izrazov (
), ki mu sledi ena ali več definicij podatkov (
).

Dober primer iz članka HTML5 Doctor je: a seznam oblikovanih metapodatkov. V enem samem dl element seznama, ki ga želite določite izraz, kot je vaše ime, nato vsako naslednje oznaka definicije lahko opisuje podatke o vas, morda vašo starost, poklic, trenutno mesto / mesto itd vsak nabor podatkov s parom ključ / vrednost se lepo ujema z opisnim seznamom. V seznamu lahko uporabite več podatkovnih izrazov, vendar W3C to navaja vsak izraz mora biti edinstven na seznamu.

Zdaj, ko smo prišli do treh priljubljenih stilov seznama, se premaknite na nekaj primerov! Spletni oblikovalci so v zadnjih letih postali zelo ustvarjalni s svojimi seznami. Spodaj sem katalogiziral 7 priljubljenih spletnih mest s posebnim poudarkom na njihovi ustvarjalni uporabi seznamov.

Preprosta navigacija z neurejenim seznamom

Navigacijski meniji so veliko enostavnejši za izdelavo s sodobnimi CSS tehnikami. Zato so neurejeni seznami in celo urejeni seznami postali priljubljena možnost. Eden od mojih najljubših primerov tega se pojavlja na blogu socialnih medijev, Mashable.

Proti vrhu glave boste opazili 2 glavna niza povezav. Neposredno na vrh svojega logotipa je majhen neurejen seznam, ki vsebuje povezave skupnosti, kot so Zgodbe, Trendne teme in Ljudje. Oblikovalec je ustvaril eleganten slog hover, ki ima solidno ozadje in barvno shemo.

Neposredno pod tem boste videli njihove povezave za navigacijo. Ta navigacijski meni vodi do kategorij spletnih dnevnikov, kot so Social Media ali Tech. Oba neurejena seznama sta vsebovana v HTML5
element da bo vse vstavljeno v predlogo. Tukaj dodani učinki prikazujejo zaokrožen kot okrog menija za pod-navigacijo. Vsaka povezava se prikaže kot blok element in zavzame veliko prostora v pod-navigacijskem meniju.

Seznam funkcij programske opreme

To je verjetno eden mojih najljubših primerov oblikovanih seznamov. Spletni razvijalci in podjetja za programsko opremo jih uporabljajo v svojih lastnih podjetniških spletnih modelih. Moj primer se osredotoča na stran Kodeksa Kulturnih Stvar, aplikacije seznama opravil. Zgradili so a oblikovan niz predmetov in funkcij lahko najdete v Stvari.

Celotna zbirka je v notranjosti a
, ki vsebuje levi in desni stolpec. V notranjosti so plavajoče
elementi z levim in desnim razredom, v tem zaporedju. Vsebina elementa seznama je dejansko razdeljene na segmente in CSS se uporablja za uskladitev vsega.

Slike so dodane kot oznake neposredno v kodo in postavljeni glede na njihovo vsebino
. The močna oznake se uporabljajo za vsako od točk glave, ki so prikazane v temnejšem besedilu, in neposredno po tem se doda opis.

Elementi so bili lepo sestavljeni in zelo občudujem delovno etiko Kodeksa kulture. Dokazali so, da ponujajo fantastične modele v letih, še posebej za stvari. Če si ogledate ikono imenik, kot je Icon Finder, je dokaj preprosto izbrati nabor brezplačnih iger, od tu pa lahko oblikujete in kodirate podoben slog seznama v CSS..

Če vas zanima nadaljnje oblikovanje, je stran Stvari za iPhone dejansko uporabila seznam opisov. Vsaka ikona je kot definicijski izraz in opisi so postavljeni na desno. To ni priporočljiv način uporabe teh oznak, vendar v nekaterih okoliščinah deluje dobro!

Kategorije in oznake spletnega dnevnika

Uporabniki WordPressa dobro poznajo sistem kategorij / oznak. Do sedaj je dobro delovala v večini oblik družbenih medijev, vendar je prvotno izhajala iz blogosfere. Oznake so odlične za prikazovanje nekaj nišnih člankov, povezanih s temo. Kategorije so veliko širše in se uporabljajo za večji del vaših člankov.

Najboljši primer, ki si ga lahko zamislim, je Smashing Magazine in njihova ponovna zasnova nove domače strani. Na vrhu boste opazili označeni zavihek “Magazine” z majhno ikono oznake, ki visi ob strani. Pri prikazu skritega seznama kategorij, kot so kodiranje, oblikovanje, grafika, itd., Prikažite le-te. Vsak je tudi oblikovan z elegantnim učinkom CSS3 hover, ki se prikaže kot sijajni gumbi..

Če pogledate kodo, boste opazili, da so to polje postavili v levi stolpec. Dano je a prikaz: nič; slog se prikažejo skrite, dokler se ne sproži. Neurejen seznam je nastavljen za vsak element seznama, ki vsebuje sidrno povezavo, kot alternativo tem povezavam so prikazane v vrstici in prelomljene na dve vrstici za potreben prostor.

Stolpci za nogo z seznami definicij

Vedno sem bil velik oboževalec klasičnega oblikovanja Digg. Na njem je bilo vse, kar bi pričakovali od spletne strani z novicami z velikimi socialnimi zmogljivostmi. Eden resnično zanimiv del njihovega starega modela je nastavitev stolpcev noge s seznami definicij.

Na žalost je ekipa Digg že zagnala v4 design v živo, vendar je internet nostalgičen kraj in s spletnim arhivom Wayback lahko od avgusta 2007 privzamemo starejšo različico Digga. V tej predlogi je veliko fantastičnih elementov uporabniškega vmesnika, natančneje se osredotočimo na področje noge. Opazili boste, da je vsak stolpec dejansko razdeljen v a element seznama podatkov. Ti stolpci so nastavljena tako, da se prikaže kot bloki in plavata drug ob drugem z vnaprej določenimi širinami.

The podatkovni izrazi se obnašajo kot glave na seznamu in se pojavijo le enkrat na stolpec. Po mojem mnenju je to veliko lepši in čistejši način za izdelavo opisnih seznamov. Na seznam je možno uporabiti več kot en izraz, vendar to pogosto uniči vaš HTML in lahko hitro izgubite sled. Prva dva stolpca vsebujeta 6-7 povezave, ki so pod enim drugim kot podatkovni izrazi za opis besedila glave, toda po tem boste opazili, da se stolpci ločijo od privzetega oblikovanja.

Na primer spodaj Digg Orodja in API obstajajo samo dve opredelitvi podatkov. To so dejansko 2 odstavka, ki vsebujejo notranjo povezavo in stavek. Nikakor ni nič narobe s to oznako in je pravzaprav zelo ustvarjalen in trajnosten sistem za izgradnjo stolpcev za noge. Prepričan sem, da boste, če brskate po arhivih strani Digg, našli veliko bolj fantastičnih primerov seznamov.

Opravila in opravila

Seznami niso vedno samo vključeni v oblikovalske sloge. Obstajajo časi, ko je vsebina zahteva elemente seznama za oblikovanje dejanskega seznama podatkov. Seznami nalog so odličen primer teh pojavov. Vendar ni veliko ton upraviteljev nalog, zgrajenih v spletu, zato je težko najti odlične primere.

Flow App je ena taka storitev z lepo uporabniško ploščo. Če imate čas, vam predlagam, da se prijavite za brezplačen račun, da boste aplikaciji dali predstavitev. Tudi če ne načrtujete plačevanja, je še vedno zelo zabavna spletna aplikacija, s katero se lahko zmešate in lahko celo izvlečete navdih za oblikovanje.

Če ste prijavljeni, spodnji levi meni razvrsti vašo zbirko seznamov. To so naloge, ki jih lahko preuredite, uredite, označite in preverite kot popolne. S klikom na prvi privzeti seznam “Osnove” bo odprl vsebino v desnem podoknu, pri čemer je celotna struktura seznama sestavljena z neurejenim seznamom.

Vsak element vsebuje precej veliko notranjega konteksta. Vsak bar, ki ga vidiš, gre čez darila ena postavka seznama je dodana na splošno
element. Obstaja tudi veliko notranjih objektov, kot so ikona za urejanje, potrditveno polje za dokončanje, zastavica in ikona za smeti. Tudi v stranskem meniju povezave spodaj “Osredotočite se” boste opazili zgrajene postavke, nastavljene na neurejen seznam. Izgleda fantastično zaradi svoje preprostosti.

Seznam igralcev

Skupaj s številnimi kolegi oblikovalci sem velik Dribbble odvisnik. Spletna stran je zgrajena čudovito in vključuje nekaj najboljših grafičnih oblikovalcev z vsega sveta. Če niste seznanjeni z omrežjem, je Dribbble samo vabljiva socialna skupnost spletnih oblikovalcev, ki si delijo posnetke svojega zadnjega dela..

Stvari postanejo zanimive, če usmerite pozornost na spodnjo desno stran njegovega stranskega območja. Tukaj imamo urejen seznam z razredom “seznam igralcev“. Vsebuje novince, ki so najnovejši oblikovalci, ki so jih povabili in ki so se nazadnje prijavili na spletno mesto. Iz kakršnega koli razloga se je spletni razvijalec podjetja Dribbble odločil za uporabo Naročeni seznam z vsako postavko seznama vsebuje podrobnosti o uporabniku.

Notranja vsebina je dejansko razdeljena na dva segmenta. A
plava na desno drži povezavo sledi / ne sledi če ste trenutno prijavljeni. Nadomestni element prikaže a
glava razreda “vcard” vsebuje ime in avatar uporabnika. Oba sta povezana z njihovim osebnim profilom Dribbble in nekaterimi statističnimi podatki o računu.

Vodoravne drobtine

Obstaja nekaj fantastičnih primerov in pisnih najboljših praks za izgradnjo navigacijske navigacije. Ti meniji vidno prikažejo zbirka pod-povezav, ki ste jih preusmerili, da dosežete trenutno stran. Imamo fantastično vadnico za drobtine, ki je narejena na Hongkiatu, zgrajenem v celoti s tehnikami CSS3 in neurejenimi seznami.

Načrt uporablja sidrne povezave kot blokovne elemente za prikaz menija s seznamom. Sidrna povezava ima sliko ozadja in a zmanjšuje z-indeks tako, da bodo puščice prikazane na vrhu vsakega sočasnega elementa.

Prav tako preverite Googlov primer na eni od njihovih strani za podporo. To je popoln element strani za vključitev v vašo spletno stran, če jo imate več vstavljenih strani vsebine. Obiskovalci se bodo verjetno hoteli vrniti na prejšnje strani, ne da bi preverjali svojo zgodovino.

Ni veliko možnosti za izdelavo seznama povezav. Lahko uporabite urejen seznam tako pajki iskalnikov razumejo, da obstaja vrstni red povezav v meniju, vendar, kot je bilo navedeno prej, to verjetno ne bo preveč razliko, ko gre za razvrstitev v SERPS. Če imate zapletene potrebe po drobtinah, kot so naslov / opis za vsako povezavo, lahko bolje uporabite element seznama definicij.

Več lepih uporabniških vmesnikov na seznamu

Ne da bi se spuščali v preveč podrobnosti, je moj cilj, da zberem fantastično namestitev elementov vmesnikov, ki temeljijo na seznamu. To je veliko lažje reči kot narediti - vendar ima internet toliko možnosti, ki jih lahko izbirate! Na področju seznamov HTML je veliko prostora za rast. Če umirate za več navdiha, si oglejte spodnjo mini galerijo s fantastičnimi primeri.

6wunderkinder

Fantastičen navigacijski meni, oblikovan kot elementi gumbov.

Cake Sweet Cake

Cake Sweet Cake ima lep seznam sličic, ki vsebujejo nekaj okusnih vzorcev njihovih pekarskih del.

Cheesemonger Invitational

Spletna stran Cheesemonger Invitational ima 2 ločena
elementov, ki plujejo, da ustvarite 1 navigacijski meni. Izgleda zelo lepo v skladu z njihovo osredotočeno grafiko logotipa.

Urejevalnik Threepenny

Povezave socialnih medijev na spodnjem delu spletne strani urejevalnika Threepenny so oblikovane na seznamu. Popolnoma se prilega v stolpec tematskih postavitev roke in papirja.

Le Tipi

Še en lep primer navigacijskega menija, oblikovanega s slikami in CSS-jem.

Saj veš kdo

Veste, kdo ima na svojem spletnem mestu poseben učinek retro oblikovanja. Spodnji del domače strani ima majhen urejen seznam, ki vsebuje sličice njihovega najnovejšega projektnega dela.

MediaLoot

Neurejen seznam za načrte za prijavo v MediaLoot izgleda obetavno.

365psd

365psd ponuja povsem novo predlogo Photoshop za prenos vsak dan. V stranski vrstici boste našli seznam oznak, vgrajenih v neurejen seznam. To izgleda odlično v blogih in arhivskih straneh, kjer je seznam majhnih oznak primeren.

Zaključek

Upamo, da vam je ta galerija ustvarjenih seznamov v HTML-ju prinesla navdih za oblikovanje vsebine postavitve. Na spletnih straneh je lahko težko določiti konkretno idejo za vaše sezname, vendar so seznami postavk velik del procesa oblikovanja in nudijo konstruktivne odnose med oznakami za označevanje in vsebino.

Obstajajo verjetno na ducate drugih fantastičnih seznamov, najdenih po spletu, in z naraščajočo količino spletnih oblikovalcev, ki so na voljo, bomo zagotovo videli, da se število povečuje hitreje kot kdajkoli prej. Če poznate katero koli odlično spletno stran s čudovitimi HTML-seznami, lahko v spodnjem oddelku za komentarje ponudite povezave. Tudi če dodate katerikoli od zgoraj navedenih slogov v svojo spletno stran, bi radi preverili!
Vrnite menije za Office 2003 nazaj na 2010 z UBitMenu

Prinesite Windows 7 Start Menu na Windows 10 s Classic Shell

Razvedri Firefox za praznike