Web Tasarımında HTML Listelerinin Mükemmel Kullanımı
İnternetin her yerinde iyi tasarlanmış listeleri bulabilirsiniz. Tasarımcılar onları yıllardır kullanıyor sayfa bilgisi ve düzenleri koordine etmek, ve günümüzün web'inde, web tasarımcılarının listeleri kullanma şeklindeki harika yaratıcılığı görebilirsiniz. Bunlar arasında gezinme menüleri, profil bağlantıları, arşivler, görevler / kontrol listeleri ve diğer birçok kullanım alanı bulunmaktadır.!
Bu yazıda, özellikle nasıl yapılacağına ilişkin tasarım önerileri ile çeşitli HTML listeleri tanıtacağım. listenize benzersiz bir kenar ekleyin. Ayrıca sizi harika liste tasarımlarına sahip birkaç web sitesi örneğinden geçireceğim ve sonunda güzel tasarlanmış HTML listelerine sahip web sitelerinin bir listesini alacaksınız. Düz görünüşlü listelerinizi nasıl eşsiz göstereceğiniz konusunda şüphe yok ve bugün bunlardan en iyi şekilde yararlanmaya başlayalım.!
Liste Öğeleri
Web tasarımcıları bir gruptan diğerine sürekli atlıyor, böylece web sitesi stillerinin zaman içinde değişmesine neden oluyor, ancak listeler zamana dayanıyor ve World Wide Web'in gelecekteki inovasyonunda çok iyi olabilir..
Örnekleri incelemeden önce, HTML listelerinde birkaç noktayı ele almak istiyorum. Kendi tasarım çalışmalarınızda kullanabileceğiniz birkaç farklı liste tipi vardır. Web tasarımcılarının çoğunluğu Sırasız Listeler ile açılan
etiketi, ancak iki tane daha az popüler varyasyon vardır: Sıralanan Listeler ve Veri tanımları. Aşağıda daha fazla ayrıntıya girdim.
Sırasız Listeler ()
Muhtemelen HTML4 / HTML5 standartlarında en çok kullanılan unsurlardan biridir. Sırasız listeler, sıralı listeyle aynı şekilde veri gönderir; taraftaki herhangi bir sayısal işaretleyiciyi görmeyecek. Bunun yerine her maddeye bir küçük daire veya disk ve yeni bir çizgiye bölündü. Bu simge liste tarzı özelliğiyle de değiştirilebilir CSS’de bulundu.
Sırasız listenin örnek kodu aşağıdadır:
- Madde 1
- Madde 2
- Öğe 3
Sıralanmamış listeler bina için mükemmel bir çözümdür gezinti bağlantıları. Kolayca yapabilirsiniz beri tüm listeleri herhangi bir liste öğesine yerleştir bu bir alt gezinti bağlantıları oluşturmak için basit bir konu yanı sıra. Liste stilini kaldırdıktan sonra boş bir öğe ile bırakılacaktır. Buradan sayfanızda blok öğeler olarak görünecek şekilde bağlantı linkleri düzenleyebilir, böylece bir gezinme menüsü tasarımını doldurabilir ve bazı jQuery kodlarıyla siteniz için güzel bir başlık oluşturabilirsiniz.
En sık olarak sıralanmamış listeleri web makalelerinin ortasında veya yükleme yönergelerinde bulabilirsiniz. Dikkat edin Google ve diğer arama botları, sayfa içeriğinizi farklı bir şekilde işlemez, yani senin SEO, seçtiğiniz liste türünden bağımsız olarak etkilenmemelidir.
Sıralı Listeler ()
Bir veri seti sipariş etmeniz gerektiğinde, kendi mizanpaj çerçevenizi sıfırdan ayarlamak mümkündür, ancak bu şekilde her artan sayıyı elle eklemeniz gerekir; bu da yorucu olabilir. Sipariş edilen listeler numaralandırılmış görevleri aynı hizada tutmak vidalanma olmadan. Dahili liste öğelerinizin sırası () verilerin nasıl sunulduğunu belirleyecektir.
Aşağıda, sipariş verilen listenin örnek kodu verilmiştir:
- Madde 1
- Madde 2
- Öğe 3
Mümkün Sayacı normal sayılardan bir avuç başka seçenekle değiştirin. Bunlar arasında alfabetik yazı ve Roma rakamları, birkaç isim. Web tasarımcıları içeriğe özgü listeler için sıralı listeyi kullanır. Tarif verileri, günlük görevler, Favoriler, veya En son / en son giriş yapan kullanıcılar sadece birkaç örnek. Genellikle göreceksiniz blog yorumları Her yorumu numaralı sırada tutmak için sıralı listeler kullanılarak oluşturulmuştur.
Veri tanımı listeleri ()
Tanım listeleri artık çok sık görülmüyor (hiç popüler olmadıkları gibi değil). Web tasarımcılarıyla karmaşık bağlantı biçimleri veya kutu içeriği oluştururken görüldü. veri listesi etiketi (
) Günümüzde kodlayıcılar tarafından sıklıkla yanlış anlaşılmaktadır. HTML4.01'de veri listeleri için kullanıldı öğeleri açıklamalarıyla eşleştirme. Bunlara tanım listeleri adı verildi..
Aşağıda veri tanım listesinin örnek kodu verilmiştir:
- Madde 1
- Açıklama
- Madde 2
- Açıklama
- Öğe 3
- Açıklama
Ancak yeni HTML5 özellikleriyle veri listelerine bir transkripsiyon verilmiştir. Öğeleri nasıl kullandığınız konusunda sözdizimi açısından herhangi bir fark yoktur, ancak amaçları bir Bir veya daha fazla veri teriminden oluşan açıklama listesi () ardından bir veya daha fazla veri tanımı (
).
HTML5 Doktor'un makalesinden güçlü bir örnek meta veriler biçimlendirilmiş liste. Bir tek içinde dl
Yapacağınız liste elemanı terim tanımlamak, adınız gibi, ardından her biri tanım etiketi verileri tanımlayabilir hakkınızda, muhtemelen yaşınız, mesleğiniz, bulunduğunuz kasaba / şehir vb. Anahtar / değer çiftli herhangi bir veri seti bir açıklama listesine tam olarak uyar. Bir listede birden fazla veri terimi kullanabilirsiniz, ancak W3C her terim benzersiz olmalı listede.
Şimdi 3 popüler liste stilini belirledik, hadi bazı örneklere geçelim! Web tasarımcıları son yıllarda listelerinde çok yaratıcı oldular. Listelerimin yaratıcı kullanımına özel olarak aşağıdaki favori web sitelerimden 7'sini katalogladım.
Basit Sırasız Liste Gezintisi
Gezinme menüleri, modern CSS teknikleriyle oluşturmak çok daha kolaydır. Bu nedenle sıralanmamış listeler ve hatta sıralı listeler popüler bir seçenek haline geldi. Bunun en sevdiğim örneklerinden biri sosyal medya blogu Mashable'de.
Üstbilgilerinin üst kısmına doğru 2 ana bağlantı grubu göreceksiniz. Doğrudan logolarının en üstünde, En Çok Okunan Haberler, Trend Konuları ve Kişiler gibi topluluk bağlantıları içeren küçük bir sıralanmamış liste var. Tasarımcı, sağlam bir arka plana ve renk düzenine sahip şık bir hover tarzı oluşturdu.
Bunun hemen altında alt gezinti bağlantılarını göreceksiniz. Bu gezinme menüsü, Social Media veya Tech gibi blog kategorilerine yönlendirir. Her iki sıralanmamış liste bir içinde bulunur. HTML5 eleman Her şeyi şablonla aynı hizada tutmak için. Buraya eklenen vurgulu efektleri, alt gezinti menüsünün etrafında yuvarlak bir köşe görüntüler. Her bağlantı bir blok öğesi olarak görüntülenir ve alt gezinti menüsünün büyük bir bölümünü kaplar..
Yazılım Özelliklerini Listeleme
Bu muhtemelen tarz listelerimin en sevdiğim örneklerinden biri. Web geliştiricileri ve yazılım şirketleri bunları kendi kurumsal web tasarımlarında kullanırlar. Örneğim yapılacaklar listesi uygulaması olan Kültür Kodunun Şeyleri sayfasına odaklanmaktadır. İnşa ettiler biçimlendirilmiş öğe ve özellik kümesi Şeyler bulabilirsiniz.
Bütün koleksiyon içinde bulunur Görüntüler olarak eklenir. Öğeler güzel bir şekilde bir araya getirildi ve Kültür Kodunun çalışma etiğine büyük hayranım. Yıllar boyunca, özellikle de Şeyler için harika tasarımlar sunduğunu kanıtladılar. Icon Finder gibi herhangi bir simge dizinine bakarsanız, bir dizi freebie seçmek oldukça basittir ve buradan bir tasarım mockup yapabilir ve CSS'de benzer bir liste stilini kodlayabilirsiniz.. Tasarımlarıyla daha fazla ilgileniyorsanız, iPhone için Şeyler sayfası aslında bir açıklama listesi kullanıyor. Her simge tanım terimi olarak ayarlamak ve açıklamalar sağa yerleştirilir. Bu etiketleri kullanmanın önerilen yolu bu değildir, ancak bazı durumlarda iyi sonuç verir! WordPress kullanıcıları kategori / etiket sistemine çok aşinadır. Şimdiye kadar çoğu sosyal medyada iyi çalıştı, ancak başlangıçta blogosferden türetildi. Etiketler, konuyla ilgili birkaç niş makale görüntülemek için mükemmeldir. Kategoriler çok daha geniştir ve makalelerinizin daha büyük bölümünü kapsayacak şekilde kullanılır. Aklıma gelen en iyi örnek Smashing Magazine ve yeni ana sayfalarının yeniden tasarlanması. En üstte etiketli bir sekme göreceksiniz “dergi” tarafında asılı küçük bir etiket simgesi ile. Kodlama, tasarım, grafik vb. Gibi kategorilerin gizli bir listesini görüntülemek için bunun üzerine gelin. Her biri parlak düğmeler olarak görünmek üzere süslü bir CSS3 vurgulu efekti ile de düzenlenir. Koduna baktığımızda, bu kutuyu sol sütun alanına yerleştirdiklerini fark edeceksiniz. Verildi Ben her zaman klasik Digg tasarımının büyük bir hayranıydım. Harika sosyal yeteneklere sahip bir haber web sitesinden bekleyebileceğiniz her şeye sahipti. Eski tasarımlarının gerçekten ilginç bir parçası tanım listelerini kullanarak alt sütun ayarları. Ne yazık ki Digg ekibi zaten v4 tasarımını canlı olarak başlattı, ancak Internet nostaljik bir yer ve Wayback Internet Archives ile 2007 Ağustosundan itibaren Digg'in eski bir tasarımını çekebiliriz. daha özel olarak, altbilgi alanına odaklanalım. Her sütunun gerçekte bir veri listesi elemanı. Bu sütunlar blok olarak gösterilecek ve önceden belirlenmiş genişliklerde yan yana kayan. veri terimleri başlık olarak davranır Liste içinde ve yalnızca sütun başına bir kez görünür. Bence bu, açıklama listelerinizi oluşturmanın çok daha güzel ve daha temiz bir yoludur. Liste başına birden fazla terim kullanmak mümkündür, ancak bu genellikle HTML'nizi bozar ve kod izini çok çabuk kaybedebilirsiniz. İlk iki sütun içeren Başlık metnini tanımlamak için veri terimleri olarak birbirlerinin altında listelenen 6-7 bağlantı, ancak bundan sonra sütunların varsayılan biçimlendirmeden ayrıldığını fark edeceksiniz. Örneğin, altında Digg Araçları ve API var sadece iki veri tanımı. Bunlar aslında iç bağlantı ve cümle içeren 2 paragraftır. Bu işaretlemede kesinlikle yanlış bir şey yok ve aslında altbilgi sütunlarının oluşturulması için çok yaratıcı ve sürdürülebilir bir sistem. Digg'in sayfalarının arşivlerinde gezinirseniz listelerin çok daha harika örneklerini bulacağınızdan eminim.. Listeler her zaman sadece tasarım stillerine dahil değildir. Aslında içeriğin olduğu zamanlar vardır. gerçek bir veri listesi oluşturmak için liste öğelerini gerektirir. Yapılacaklar listeleri bu fenomenlerin mükemmel bir örneğidir. Bununla birlikte, web'de yerleşik bir ton görev yöneticisi bulunmadığından harika örnekler bulmak zor. Akış App güzel bir kullanıcı paneli ile böyle bir hizmettir. Zamanınız varsa, uygulamaya bir demo vermek için ücretsiz bir hesap açmanızı öneririm. Ödemeyi planlamıyor olsanız bile, hala uğraşmak çok eğlenceli bir web uygulaması ve hatta bazı tasarım ilhamlarını bile çıkarabilirsiniz. Giriş yaptıysanız, sol alt menü listelerinizi sıralar. Bunlar, yeniden düzenleyebileceğiniz, düzenleyebileceğiniz, etiketleyebileceğiniz ve eksiksiz olarak kontrol edebileceğiniz görevlerdir. İlk varsayılan listeye tıklayarak “Temeller” içeriği sağ bölmede açacaktır, burada tüm liste yapısı sıralanmamış bir liste ile oluşturulmuştur. Her madde oldukça fazla miktarda iç içerik içermektedir. Karşınıza çıkan her bir bar sunar genel olarak bir liste öğesi eklendi Birçok tasarımcı ile birlikte büyük bir Dribbble bağımlısıyım. Web sitesi güzelce inşa edilmiştir ve dünyanın dört bir yanından en iyi grafik tasarımcılarından bazılarına sahiptir. Ağa yabancıysanız, Dribbble, en son çalışmalarının fotoğraflarını paylaşan, yalnızca davetkar bir web tasarımcıları topluluğudur.. Dikkatinizi kenar çubuğu alanının sağ alt köşesine çevirirseniz işler ilginçleşir. Burada sınıfla birlikte sıralı bir listemiz var. “oyuncu listem“. Davet edilen en yeni tasarımcı olan ve en son web sitesine giriş yapan çerezlere sahiptir. Her ne sebeple olursa olsun Dribbble web geliştiricisi kullanmayı seçti. Kullanıcıyla ilgili ayrıntıları içeren her bir liste öğesiyle birlikte sıralı liste. İç içerik aslında iki bölüme ayrılmıştır. bir Ekmek kırıntısı navigasyonunu oluşturmak için bazı harika örnekler ve yazılı en iyi uygulamalar vardır. Bu menüler görünür bir şekilde görüntülenir. Geçerli sayfaya ulaşmak için kullandığınız alt bağlantıların toplanması. Tamamen CSS3 teknikleri ve sıralanmamış listelerle oluşturulmuş Hongkiat'ta hazırlanmış harika bir breadcrumbs eğitimimiz var. Tasarım kullanır blok elementleri olarak çapa bağlantıları Liste menüsünü görüntülemek için Bağlantı bağlantısı arka plan görüntüsü ve azalan Ayrıca, Google'ın destek sayfalarından birindeki örneğini inceleyin. Bu, kendi web sitenize eklemek için mükemmel bir sayfa öğesidir. iç içe çoklu sayfalar. Ziyaretçiler muhtemelen geçmişlerini kontrol etmeden önceki sayfalara dönmek isteyeceklerdir. Kırıntı bağlantılarının bir listesini oluşturmak için çok fazla alternatif yok. Sıralı bir liste kullanabilirsiniz. arama motoru tarayıcılarının menü bağlantılarına bir sipariş olduğunu anlıyorlar, Ancak, daha önce de belirtildiği gibi, SERPS'te sıralama söz konusu olduğunda muhtemelen çok fazla bir fark yaratmayacaktır. Her bir link için bir başlık / açıklama gibi ekmek kırıntılarına daha fazla ihtiyaç duyuyorsanız, tanım listesi öğesini daha iyi kullanabilirsiniz.. Çok fazla ayrıntıya girmeden harika bir liste tabanlı arayüz öğeleri kurulumu hedefim. Bu söylenenden çok daha kolay - fakat İnternet'in seçebileceği çok fazla seçenek var! HTML listeleri alanında büyüme için çok fazla alan var. Daha fazla ilham almak için can atıyorsanız, aşağıdaki küçük galeriye birkaç harika örnekle bakın. Düğme öğeleri olarak tasarlanmış harika bir gezinme menüsü. Cake Sweet Cake, fırın işlerinin lezzetli örneklerini içeren küçük resimlerin güzel bir listesini sunar. Cheesemonger Invitational web sitesinde 2 ayrı sayfa bulunmaktadır. Threepenny Editörünün web sitesinin alt kısmındaki sosyal medya bağlantılarının tümü bir liste halinde hazırlanmıştır. Eller ve kağıt düzeni temalarının bir sütununa mükemmel şekilde uyar. Resimler ve CSS ile tarz navigasyon menüsünün bir başka güzel örneği. Kim kendi Web sitesinde şık bir retro tasarım etkisi özellikleri biliyorsunuz. Giriş sayfasının alt kısmında en son proje çalışmalarının küçük resimlerini içeren küçük bir sipariş listesi vardır.. MediaLoot'un üyelik planları için yapılan sıralanmamış bir liste umut verici görünüyor. 365psd, her gün indirmek için yepyeni bir Photoshop şablonu sunar. Kenar çubuklarında, sıralanmamış bir listeye yerleşik bir etiket listesi bulacaksınız. Bu, küçük bir etiket listesinin uygun hissettirdiği bloglarda ve arşiv sayfalarında mükemmel görünüyor. Umarım, yaratıcı HTML biçimli listelerden oluşan bu galeri, mizanpaj içeriğini tasarlamanız için size ilham vermiştir. Listeleriniz için web sayfalarında somut bir fikir bulmak zor olabilir, ancak materyal listeleri tasarım sürecinin büyük bir bölümünü oluşturur. işaretleme etiketleriyle içerik arasında yapıcı ilişkiler sunar. Muhtemelen web çevresinde düzinelerce fantastik liste daha vardır ve mevcut web tasarımcılarının sayısındaki artışla, bu sayının her zamankinden daha hızlı arttığını göreceğiz. Müthiş HTML listeleri içeren harika bir web sitesi biliyorsanız, aşağıdaki yorum bölümündeki bağlantıları sunmaktan çekinmeyin. Ayrıca, yukarıda listelenen stillerden herhangi birini kendi web sitenize eklerseniz, incelemeyi çok isteriz!
sol ve sağ sınıfı olan öğeler, sırasıyla. Liste öğesi içeriği aslında parçalara ayrılmış ve CSS her şeyi hizalamak için kullanılır. etiketler doğrudan koda ve içerdiklerine göre konumlandırılmış
.
kuvvetli
etiketler koyu metinde görünen başlık noktalarının her biri için kullanılır ve bu açıklamadan hemen sonra açıklama eklenir..Blog Kategorileri ve Etiketler
görüntü yok;
stil vermek tetiklenene kadar gizli görünmek. Sırasız liste bağlantı içeren her liste öğesiyle birlikte ayarlanır, fakat alternatif olarak bu linkler satır içi görüntülenir ve iki satıra bölündü gerekli alan için.Tanım Listeleri ile Altbilgi Sütunları
Görevler ve Yapılacaklar
eleman. Düzenleme simgesi, tamamlama onay kutusu, bayrak ve çöp kutusu simgesi gibi birçok iç nesne vardır. Ayrıca yan menüdeki bağlantılar “odak” farkedeceksin inşa edilmiş sıralanmamış bir listeye ayarlanmış öğeler. Kesin sadeliği için fantastik görünüyor.Oyuncu Listesi Dribbble
sınıfın başlığı “vcard” kullanıcının adını ve avatarını içeren. Her ikisi de bazı hesap istatistiklerinin yanı sıra kişisel Dribbble profilleriyle bağlantılı.
Yatay Ekmek Kırıntıları
Z-endeksi
özelliği, oklar her eşzamanlı öğenin üstünde görüntülenecek.Daha Güzel Liste Tabanlı Kullanıcı Arabirimi
6wunderkinder
Kek Tatlı Kek
Cheesemonger Davetiye
Gezinme menüsü oluşturmak için yüzen öğeler. Ortalanmış logo grafikleri ile uyumlu görünüyor.Threepenny Editör
Le Tipi
Kim olduğunu biliyorsun
MediaLoot
365psd
Sonuç