Duyarlı HTML5 ve CSS3 düzeni. Altı adımda yeni başlayanlar için html5 ve css3'te duyarlı bir sayfa oluşturun! Html5 ve css3'te duyarlı düzen

Yazardan: HTML5 ve CSS3'ün yeni özelliklerini gösteren makaleler web'de görünmeye başladığından beri, resimsiz bir site düzeni oluşturma fikrim vardı. HTML5 ve CSS3'teki iyileştirmelerle donanmış (önceki saygın özelliklere göre), biçimlendirmesi için resimlere güvenmek zorunda olmayan düzgün görünümlü bir web sitesi yazmak o kadar da zor değil.

İşte HTML5 ve CSS3 ile kodlayacağımız sitenin bir görseli:

Pratik adımlara geçmeden önce, çalışmanın demo sonucunu görüntülemenizi tavsiye ederim.

Başlık öğesi, bir giriş grubunu veya gezinme yardımcılarını temsil eder.

Önerilerinin ardından, başlık öğesi logomuzu, alt başlığımızı ve ana gezinmeyi içerecektir. Başlık öğesi olan başlık'a girdiğimizde, sezgisel olarak başlık olarak düşündüğümüz sayfanın tüm bölümlerini içeren bir işaretleme ayrıntısına sahibiz. (Veya bir başlık kimliğine sahip bir div içine yerleştirilecek tüm sayfa ayrıntıları.) Başlık öğesi bir sayfada birden fazla kullanılabilir ve bunu, yazıların girişini içerecek makale öğelerinin içinde tekrar kullanacağız.

Hgroup öğesi

İlk olarak başlık öğesinin içinde başka bir yeni etiket olan hgroup var. Sitemizin logosunu ve alt başlığı sırasıyla h1 ve h2 etiketlerinde görüntülemek için kullanacağız.

Hgroup öğesi, başlık alt adlar gibi birden çok seviyeye sahip olduğunda bir h1-h6 öğeleri kümesini gruplamak için kullanılır, alternatif isimler veya alt başlıklar.

Hgroup öğesi, başlıkları her zamanki gibi başlık veya alt adların normal bir arka plana veya stile sahip olması için bir div içine sarmazsanız aşırı görünebilir. Ancak hgroup, belge şemasında önemli bir rol oynar. Şema algoritması sayfanızı kontrol eder ve başlık yapısını geçer. Anahat aracıyla çalışmanızın bir taslağını inceleyin. Şema algoritması bir hgroup öğesi ile karşılaştığında, üst düzey başlık (genellikle h1) dışındaki her şeyi yok sayar.

Şimdi bir sorunumuz var: devre algoritması kusursuz değil ve tam değil. Örneğin, tartışacağımız bir sonraki öğe nav öğesidir ve işaretleme onu "Adsız Bölüm" olarak işaretler. İşaretleme geliştiricilerinden şema algoritmasını, nav öğesini "Gezinme" olarak temsil edecek şekilde değiştirmeleri istenmiştir. Her durumda, hgroup öğesi size başlıklarını gruplandırmanız ve böylece hem yapısal hem de anlamsal olarak organize etmeniz için bir yol sağlar.

Gezinme öğesi

Sonraki HTML5 öğesine geçiyoruz - nav. Gezinme bölümünde, sıralanmamış bir listeye sarılmış ana site gezinmesini ekleyeceğiz.

Gezinme öğesi, bir sayfanın içindeki diğer sayfalara veya alanlara bağlanan bir bölümünü temsil eder: gezinme bağlantılarının olduğu bir alan.

Sitenizin ana gezinmesini oluşturmak için gezinmeleri kullanmak biraz zordur, ancak koşullar sitenizde daha fazla bağlantı alanı olacak şekildedir. soru, hangisini nav etiketi ile sarmalamanız gerektiğidir. İşte işe yarayabileceğini düşündüğüm bazı kullanım durumları:

İlgili Mesajlar.

Spesifikasyona göre, bunlar nav öğesi için uygun veya uygunsuz kullanım durumları olabilir. Spesifikasyon çok net değil ve verilen örnekler pek yardımcı olmuyor. Bu nedenle, spesifikasyon nihai ve daha spesifik olmasa da, seçim için doğru yöntem Nav öğesinin kullanımına yalnızca geliştirici topluluğu güvenebilir.

Makale öğesi

Size tanıtmak istediğim bir sonraki unsur makale. Demo sayfamızın ana alanı üç gönderi alıntı içerir ve her birini bir makale etiketi ile saracağız.

XHTML

2010

16 Nisan

Örnek Gönderi 1

38

Curabitur ut congue hac, diam turpis […]

2010 16 nisan Örnek Gönderi 1 38 Curabitur ut congue hac, diam turpis […]

Makale öğesi için W3C tanımı şöyledir:

Makale öğesi, bir belgedeki modüler bir bileşimi [...] temsil eder, bu nedenle, örneğin sendikasyonda (içeriği aynı anda birden çok Web sitesinde yayınlamak) tek başına veya yeniden kullanılabilir hale gelmesi amaçlanır.

Bu sefer teknik özellikler daha net ve blog yazısı (veya alıntı) çok daha iyi ( sendikasyondan bahsetmeye dikkat et) makaleye gider. Tabii ki sayfaya birçok makale öğesi yerleştirebiliriz.

Üstbilgi ve altbilgi öğelerini makalenin içine yerleştirdiğimizi şüphesiz fark etmişsinizdir. Hem üstbilgi hem de altbilgi, ayrı bir HTML sayfasında birden çok kez kullanılabilir. Başlık "bir giriş grubu veya gezinme yardımı" olduğundan, tarih, başlık ve yorum sayısını ekledik. Ardından, bir altbilgi (altbilgi) ve ardından bir yazı alıntı içeren bir paragrafımız var.

Altbilgi öğesi

Daha önce de söylediğim gibi, altbilgi aynı sayfada gerektiği kadar kullanılabilir ve bir belgenin sayfa altbilgi bölümünü veya bir belgenin bir bölümünü temsil eder.

Altbilgi öğesi, erişilen bölümün altbilgisini temsil eder. Tipik olarak, bir altbilgi bölümü hakkında atıf, ilgili belgelere bağlantılar, telif hakkı tarihi ve daha fazlası gibi bilgiler içerir.

Demo sayfasında dört altbilgi öğemiz var: üç makale öğesinin her biri için bir altbilgi ve tüm sayfa için ortak bir altbilgi. Makale öğesindeki altbilgi, gönderinin yazarının adını, etiketleri ve tam versiyon Blog yazısı.

Ortak altbilgi, üç bölüm öğesi ve bir telif hakkı bildirimi içerir. Altbilgi öğesinin her iki kullanımı da yasaldır ve W3C önerisiyle uyumludur.

Bölüm öğesi

Demo sayfamızın ortak altbilgi alanı üç bölüm öğesi içerir. Bunlarda, en popüler blog gönderilerini, son yorumları ve kurgusal şirketimizin kısa bir biyografisini listeliyoruz.

Bölüm öğesi, bir belgenin veya uygulamanın genel bir alanını temsil eder. Bu durumda bir bölüm, genellikle bir başlık içeren tematik bir içerik gruplamasıdır.

Bölüm öğesi, spesifikasyon tanımındaki bir div öğesine çok benzediği için oldukça zordur. Demo sayfasının kodunu yazmaya başladığımda bu tuzağa düştüm; Bölüm öğesinin içine üç makale öğesi yerleştirdim. Yöntemlerimin yanlışlığını çok geçmeden anladım. Bir bölümü kullanıp kullanmayacağınıza karar vermenin tek yolu, bir bölüm öğesiyle sarmak istediğiniz alanın bir başlığa ihtiyacı olup olmadığını görmektir. Tanımdan da görebileceğiniz gibi, bölüm öğesinin genellikle bir başlığı vardır.

Bölüm elemanını kullanmanın mantığını oluşturmak için sormak için yararlı olan başka bir soru şudur: Onu yalnızca stil amacıyla mı ekliyorsunuz? Bunu sadece bu bölümü JavaScript ile vurgulamak istediğiniz için veya ona normal stil uygulamak istediğiniz için eklersiniz ve bunun yerine bir div öğesi kullanmanız gerekir.

Demo sayfamızın üç makale öğesini bölüm etiketine sarmak, bölüm "Son Blog Yazıları" gibi bir başlık içeriyorsa haklı olacaktır. Mantıklı olurdu; aksi takdirde, makale öğelerinin içinde bulunduğu etiket yalnızca stil desteğidir - bu, ne zaman onu hedeflememize yardımcı olur? javaScript yardımı veya CSS.

Bir kenara öğe

Demo sayfası için kullanılan son HTML5 öğesi bir kenara; onu bir kenar çubuğu konteyneri olarak kullandık.

Yan öğe, bir sayfanın, yüzeysel olarak kenardaki içerikle ilişkili olan ve bu içerikten ayrı olarak algılanabilen içerikten oluşan bir bölümünü temsil eder. Bu tür bölümler genellikle tipografide yan sütunlar olarak gösterilir.

Spesifikasyondan da görebileceğiniz gibi, yan öğenin ideal kullanımına bir örnek kenar çubuğundadır. Grafiğin altında, demo sayfamızın yan öğesinin hiyerarşisini görebilirsiniz.

İki bölüm ve bir nav yerleştirdik. İlk bölüm öğesi Twitter ve RSS'ye bağlantılar içerir ve ikincisi en son tweet'i (kullanıcının Twitter gönderisi) temsil eder. İkinci unsur olan bölüm, başlığın olmadığı ender durumlardan biridir. Bir başlığı olabilir, "Son Tweet" gibi bir şey olabilir, ancak bunun gerekli olmadığını düşünüyorum çünkü okuyucular bu tür blokları görmeye alışkınlar ve alıntının altındaki Twitter etiketi oldukça tanınabilir. Kenar çubuğu gezinme öğemiz blogların listesini görüntülemek için kullanılır ve ana gezinmeden farklı olarak bir başlığı vardır.

Son kelime

Bu yüzden, makalemizin HTML5 ve CSS3'te site düzenine ayrılmış ilk bölümünün sonuna geliyor. Mümkün olduğunca kısa tutmaya ve HTML5 spesifikasyonundaki belirsizlikler üzerinde çok fazla zaman kaybetmemeye çalıştım çünkü henüz bitmedi. Bu arada, sitelere yeni öğeler sunmamızda bize rehberlik etmesi için topluluğa ve HTML5 şifacılarının çalışmalarına güvenmek zorunda kalacağız.

Okuduğunuz için teşekkürler ve bu makalenin işaretlemeyi süslemek için kullanılan CSS3 özelliklerini tartışacağımız 2. bölümünü kaçırmayın.

Her zamanki gibi, herhangi bir soru ve yorum bekliyorum. Lütfen çekinmeden konuşun ve yeni unsurların kullanımı hakkında bir tartışma başlatın, çünkü bu - en iyi yol faydalarını netleştirin.

Editor kadrosu: Rog Victor ve Andrey Bernatsky. Webformyself ekibi.

HTML5 ve CSS3 olmadan uzağa gidemezsiniz

Modern web siteleri ve web geliştirme, ne söylerse söylesin HTML5 ve CSS3 olmadan hayal etmek zaten imkansız.
Herhangi bir proje, herhangi bir müşteri, HTML5 ve CSS3'te geçerli, çapraz tarayıcı ve modern bir düzen gerektirir ve mobil cihazlar için uyarlanmalıdır.
HTML5 ve CSS3'te nasıl dizgi yapılacağını biliyorsanız ve projeyi mobil cihazlar için uyarlarsanız, çalışma saatinizin maliyetini güvenle artırabilirsiniz.
Kendiniz için bir web sitesi oluşturursanız, bu bilgi onu daha iyi, daha işlevsel ve daha kullanışlı hale getirmeye yardımcı olacaktır. Kural olarak, bu, pozisyonlarda bir artış, trafikte bir artış ve buna bağlı olarak gelir anlamına gelir.

Bunu biliyor musun...

Artık Yandex'in arama sonuçlarında (İLK 10'da), mobil cihazlara uyum sağlayabilen duyarlı tasarıma sahip sitelerin% 55'i bulunuyor. Bu, Yandex'in (ve Google'ın da) duyarlı tasarıma sahip sitelere daha fazla tercih verdiğini gösteriyor. Şunlar. kullanıcının rahat olduğu şeyler.
Ve site için HTML5 ve CSS3 eklendi ek özellikleryardımıyla siteyi daha da kullanışlı hale getirebiliriz.
Hem kullanıcılar hem de robotlar için.
Açılış sayfası ( Açılış sayfası, açılış sayfası) ziyaretçileri abonelere veya müşterilere dönüştürmeye hizmet eder.
Bazen trafik segmentasyonu için de kullanılır.
Açılış sayfası tek olabilir ayrı bir sayfa bir alanda veya tam teşekküllü bir web sitesinin parçası olarak.
Bu durumda, site aramada tanıtılır ve açılış sayfası Yandex.Direct, Google Adwods, Target Vkontakte vb.
Bu kombinasyon, çeşitli İnternet pazarlama araçlarından en iyi şekilde yararlanmanıza olanak tanır.
Artık tüm bunları hızlı bir şekilde öğrenme ve etkinliklerinde uygulama fırsatı var.

HTML5 + CSS3 + Duyarlılık + Açılış Sayfası
Bu kursla şunları yapabileceksiniz:

duyarlı web siteleri ve sayfalar oluşturun
onları mobil cihazlara uyarlayın
Kendi veya müşteri projelerinizde HTML ve CSS yeteneklerini kullanın
herhangi bir açılış sayfası oluşturun: yakalama sayfaları, abonelik sayfaları, ürün açılış sayfaları vb.
açılış sayfasına çeşitli efektler ve komut dosyaları ekleyin
gelişmiş formlar oluşturun ve kullanın geri bildirim ve daha fazlası.
Bu video kursuyla zor olmayacak!

Ders içeriği

Giriş bölümü

Yerleşim sürecini basitleştiren ve kolaylaştıran HTML5 ve CSS 3'teki yeni özellikler.
Anlamsal işaretleme - sırları ve ne için olduğu.
Medya nesneleri ekleme - oynatıcı olmadan ses ve video ekleme.

Pratik bölüm

Bir açılış sayfasının adım adım oluşturulması.
Bir düzeni planlamaktan, farklı karmaşıklıktaki her bloğun düzeninden komut dosyalarını bağlamaya ve php işleyicileri formlar için
Atlıkarınca / kaydırıcı, yumuşak kaydırma, düğmeler, CSS sprite, form doğrulama vb.

Ekle. malzemeler

Ek materyaller, üzerinde çalışacağımız tüm komut dosyalarını ve kaynakları içerir + doğru yere kopyalayıp yapıştırmanız gereken kodlu hile sayfaları.
Ve ayrıca diğer faydalı kaynaklar.
Video ders sayısı: 23

Bu kursu tamamladıktan sonra ne yapabilirsiniz?

Hazırlık aşamasında

PhotoShop ile PSD düzenini anlayın
PSD düzeninden istenen görüntüleri kesin
Bul güzel tasarımlar açılış sayfası ve siteler
Tasarım blokları ve düzen aşamaları
Simgeleri CSS sprite'larında birleştirin
PhpDesigner ile çalışın

Düzen açısından

Bağlan güzel yazı tipleri google depodan
Sözde sınıfları etkili bir şekilde kullanın
Siteyi tüm mobil cihazlar için uyarlayın
Blok, animasyon, dönüştürme, RGBA vb. İçin 2 veya daha fazla arka plan kullanın.
@Media sorgularıyla çalışın
Etkileşimli Yandex haritalarını ekleyin
CSS sprite'ları oluşturun ve sayfa yüklemeyi hızlandırın
İyi düşünülmüş stiller kullanın (Bootstrap gibi çerçevelere benzer)

İyileştirme açısından

Fareyle üzerine gelme efektleri oluşturun (fareyle üzerine gelindiğinde "canlandırın")
Bloklar arasında ve "Yukarı" düğmesi için yumuşak kaydırma yapın
Geri bildirim formlarını jQuery ile doğrulayın
UTM etiketlerinin aktarımı ile akıllı geri bildirim formları oluşturun
Olayları kullanarak Ya.Metrica'da hedefleri bağlayın ve yapılandırın
Daha hızlı yüklenmelerini sağlayarak sayfaları hafifletin
Sayfalardaki kusurları kontrol edin ve düzeltin

Uyarlanabilir düzen site, web sayfalarının otomatik olarak tabletlerin ve akıllı telefonların ekranlarına göre ayarlanmasını sağlar. Mobil internet trafiği her yıl büyüyor ve bu trafiği verimli bir şekilde işlemek için, kullanıcılara kullanıcı dostu bir arayüze sahip duyarlı siteler sunmanız gerekiyor.

Arama motorları, bir sitenin görüntülendiğinde yanıt verebilirliğini değerlendirmek için bir dizi kriter kullanır. mobil cihazlaroh. Google, mobil uyumlu web sitelerini mobil arama sonuçlarında özel bir işaretle işaretleyerek akıllı telefon ve tablet sahiplerinin İnternet'i kullanmasını kolaylaştırmaya çalışıyor. mobil uyumlu... Yandex ayrıca, mobil aramada kullanıcılar için mobil / duyarlı sürümü olan siteleri tercih eden bir algoritmaya sahiptir.

Sayfanın mobil cihazlarda servisler üzerindeki görüntüsünü kontrol edebilirsiniz.

İncir. 1. Yandex ve Google'ın, sitenin mobil cihazlara uygunluğuyla ilgili bir notla birlikte mobil sorunu

Duyarlı düzen nedir

Duyarlı düzen, herhangi bir cihazda görüntülendiğinde yatay bir kaydırma çubuğunun ve ölçeklenebilir alanların, okunabilir metinlerin ve tıklanabilir öğeler için geniş alanların olmadığını varsayar. Ortam sorgularının yardımıyla, sayfadaki blokların düzenini ve düzenlenmesini kontrol edebilir, şablonu farklı cihaz ekran boyutlarına uyum sağlayacak şekilde yeniden oluşturabilirsiniz.

Duyarlı bir web sitesi oluşturmak için temel teknikler makalede verilmiştir. İçin sorumlu tasarım sitenin ana kapsayıcısının genişliği% olarak ayarlanırken, tarayıcı penceresinin genişliğinin% 100'üne eşit veya daha az olabilir. Izgara sütunlarının genişliği de% olarak ayarlanır. İÇİNDE sorumlu tasarım ana kabın ve ızgara sütunlarının genişlikleri px değerleri kullanılarak sabitlenir.

Bu derste tartışılan duyarlı akışkan düzen tekniği, iki sütunlu bir düzende harika çalışır ve siteyi mobil cihazlarda hızlı ve kolay görüntülenebilir hale getirir. Şablon, sayfaların ana içeriğinin farklı bir düzenini varsayar, bu derste ana sayfanın düzeni demonte edilecektir.

Ana sayfanın düzeni

Bir sayfa üç ana bloktan oluşur: bir başlık (üstbilgi), ana içerik ve kenar çubuğu için bir sarmalayıcı kabı ve bir altbilgi (altbilgi). Tasarım devrilme noktalarımız olarak 768px ve 480px alacağız.

İlk noktada, üst menüyü gizleyeceğiz ve kenar çubuğunu yazılarla birlikte konteynerin altına taşıyacağız. İkinci noktada başlık elemanlarının konumunu değiştirecek, sosyal medya butonlarının postalardaki konumlandırmasını iptal edecek ve altbilgi sütunlarının etrafındaki akışı iptal edeceğiz.

İncir. 2. Duyarlı bir düzen örneği

1. Meta etiketler ve bölüm

1) Bölüme ekle gerekli dosyalar - kullanılan yazı tiplerine, jQuery kitaplığına ve önek içermeyen eklentiye bir bağlantı (özellikler için tarayıcı önekleri yazmamak için):

2. Sayfa başlığı

Sayfanın başlığında

aşağıdaki kap elemanlarını yerleştirin:
Amblem ;
ana menüyü gösterme / gizleme düğmesi

;
Ana menü

;
site arama formu
.

3. Makalenin bir özetini engelleyin

Makalelerin duyurusunu bir unsurla sarın

:



Tasarım (değiştir | kaynağı değiştir)

İlkbahar

Rus dili, mevsimler ve bunlarla ilişkili doğa olayları ile ilgili kelimeler açısından çok zengindir.

okumaya devam et

...

4. Yan sütun

Yan sütuna

5. Altbilgi

Sayfanın altbilgisinde, telif hakkı, sosyal medya düğmeleri ve bir bağlantı ile ilgili bilgiler yayınlayacağız. e-posta:

6. Genel CSS stilleri

Genel stiller, tarayıcı varsayılan stillerini sıfırlayın:

*, *: after, *: before (box-sizeing: border-box; padding: 0; margin: 0; geçiş: .5s kolay giriş; / * tüm sayfa öğeleri için yumuşak geçişler ekle * /) ul ( liste stili: yok;) a (metin dekorasyonu: yok; anahat: yok;) img (görüntü: blok; genişlik:% 100;) h1, h2, h3, h4, h5, h6 (font-family: "Playfair Ekran "; yazı tipi ağırlığı: normal; harf aralığı: 1px;) gövde (yazı tipi ailesi:" Açık Sans ", arial, sans-serif; yazı tipi boyutu: 14px; satır yüksekliği: 1; renk: # 373737; background: # f7f7f7;) / * * / header: after, .container: after, footer: after, .widget-posts-list li: after, #subscribe: after ( content: ""; display: table; clear: both;) / * grid konteynerinin genişliğini kontrol eden stil sınıfı * / .container (margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px;)

7. Başlık ve içeriği için stiller

başlık (genişlik:% 100; arka plan: beyaz; kutu gölgesi: 3px 3px 1px rgba (0,0,0, .05); dolgu: 15px 0; kenar boşluğu: 30px; konum: göreli;) / * logo * / .logo (display: block; float: left;) .logo span (color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius:% 50; kenar boşluğu: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba (0,0,0, .4);) .logo span: nth-child (tek) (arkaplan: # EF5A42;) .logo span: nth-child (çift) (arkaplan: # F8B763;) / * menu * / #menu (float: sağ;) #menu li (display: inline-block; margin-right: 30px;) #menu a (renk: # 111; metin dönüşümü: büyük harf; harf aralığı: 1px; yazı tipi ağırlığı: 600; ekran: blok; satır yüksekliği: 40px;) #menu a: vurgulu (renk: # EF5A42;) #menu li: son çocuk (margin-right: 0;) / * arama formu * / #searchform (float: right; margin-left: 46px; display: inline-block; position: göreli;) #searchform girişi (genişlik: 170px; float: sol; border: yok; padding-left: 10px; yükseklik: 40px; taşma: gizli; anahat: yok; renk: # 9E9C9C; yazı tipi stili: italik; ) #arama formu düğmesi (arka plan: şeffaf; yükseklik: 40px; sınır: yok; konum: mutlak; sağ: 10px; renk: # EF5A42; imleç: işaretçi; yazı tipi boyutu: 18px;) #searchform girişi: odak (anahat: 2px 768px genişlikte görünen katı # EBEBE3;) / * menü geçiş düğmesi * / .nav-geçiş (ekran: yok; konum: göreli; kayan: sağ; genişlik: 40px; yükseklik: 40px; margin-sol: 20px; arka plan: # EF5A42; imleç: işaretçi;) .nav-geçiş aralığı (ekran: blok; konum: mutlak; üst: 19px; sol: 8px; sağ: 8px; yükseklik: 2px; arka plan: beyaz;). Nav-geçiş aralığı: önce , .nav-toggle span: after (content: ""; position: mutlak; display: block; left: 0; width: 100%; height: 2px; arka plan: beyaz;) .nav-toggle span: before (top: -10px;) .nav-toggle span: after (bottom: -10px;) / * butonuna tıklandığında üst menüye eklenecek ve gizli menüyü gösterecek * / # menu.active (max-height : 123px;)

8. Ana içeriğe sahip blok için stiller

/ * sol konteyner * / .posts-list (margin-bottom: 30px; width: 64%; float: left;) / * post block * / .post (margin-bottom: 35px;) .post-içerik p (satır -height: 1.5; padding-bottom: 1em;) .post-image (margin-bottom: 30px;) .category (margin-bottom: 15px;) .category a (renk: # F8B763; text-transform: büyük harf;) .post-title (margin-bottom: 12px; font-size: 26px;) / * "okumaya devam et" düğmesi ve sosyal medya düğmeleri ile blok * / .post-footer (border-top: 1px solid # EBEBE3; border-bottom : 1px katı # EBEBE3; konum: göreli; margin-top: 15px;) .more-link (konum: göreli; ekran: satır içi blok; yazı tipi boyutu: 10px; metin dönüşümü: büyük harf; renk: beyaz; çizgi - yükseklik: 44px; dolgu: 0 22px; arka plan: # 3C3D41; harf aralığı: 0.1em; beyaz boşluk: nowrap;) .more-link: after (içerik: ""; ekran: blok; konum: mutlak; genişlik: 0; yükseklik: 0; üst: 0; sağ: 0; kenarlık: düz şeffaf; kenarlık-genişlik: 22px 18px; kenarlık-sol-renk: # 3C3D41; dönüştürme: translateX (% 100 ); ) .post-social (konum: mutlak; sol: otomatik; üst:% 50; sağ: 0; metin hizalama: sağ; dönüştürme: translateY (-50%); dolgu: 0; yazı tipi boyutu: 12px;). post-social a (display: inline-block; margin-left: 8px; color: # F8B763; genişlik: 25px; yükseklik: 25px; satır yüksekliği: 23px; metin hizalama: merkez; kenarlık-yarıçap:% 50; kenarlık : 1px katı;)

9. Yan sütun için stiller

/ * sağ kap * / kenara (genişlik: 33%; kayan: sağ;) / * widget kutusu * / .widget (dolgu: 20px 15px; arka plan: beyaz; yazı tipi boyutu: 13px; margin-bottom: 30px; kutu - gölge: 3px 3px 1px rgba (0,0,0, .05);) .widget-title (font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid # F8B763; kutu gölgesi: 3px 3px 0 0 # F8B763;) .widget-kategori listesi li (border-bottom: 1px solid # EBEBE3; padding: 10px 0; color: # c6c6c6; yazı tipi stili: italik;). Widget -category-list li: last-child (border-bottom: none;) .widget-category-list li a (color: # 626262; margin-right: 6px; font-style: normal;) .widget-category- list li a: before (content: "\\ f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: # c6c6c6;) .widget-posts-list li (border-top: 1px solid # EBEBE3; padding: 15px 0;) .widget-posts-list li: nth-child (1) (border-top: none;) .post-image-small (genişlik:% 30; float: sol; kenar boşluğu -right: 15px;) .widget-post-title (float: sol ; ) / * abonelik formu * / #subscribe (konum: göreli; genişlik:% 100; dolgu: 15px 0;) # abonelik girişi (genişlik:% 100; görüntü: blok; kayan nokta: sol; kenarlık: 2px katı # EBEBE3; dolgu : 0 0 0 10px; yükseklik: 40px; konum: göreceli; anahat: yok; renk: # 9E9C9C; yazı tipi stili: italik;) # abonelik düğmesi (dolgu: 0 15px; arka plan: şeffaf; yükseklik: 40px; kenarlık: yok ; konum: mutlak; sağ: 0; renk: # EF5A42; imleç: işaretçi; yazı tipi boyutu: 18px;) # abonelik girişi: odak + düğmesi (arka plan: # EF5A42; renk: beyaz;)

10. Altbilgi için stiller

Site alt bilgisini üç eşit sütuna bölün:

Altbilgi (dolgu: 30px 0; arka plan: # 3C3D41; renk: beyaz;) .footer-col (genişlik: 33.3333333333%; float: sol;) .footer-col a (renk: beyaz;) .footer-col: last- child (text-align: right;) .social-bar-wrap (text-align: center;) .social-bar-wrap a (padding: 0 7px; font-size: 18px;)

11. Medya sorguları

@media (max-width: 768px) (/ * üst gezinmeyi değiştirmek için düğmeyi göster * / .nav-toggle (display: block;) üstbilgi (padding: 10px 0;) / * üst menüyü gizle, kaydırmayı iptal et , konumlandırın, site başlığı yüksekliğine kaydırın * / #menu (maks-yükseklik: 0; arka plan: beyaz; float: yok; konum: mutlak; taşma: gizli; üst: 63px; sağ: 0; sol: 0; kenar boşluğu : 0; padding: 0; z-endeksi: 3;) / * liste öğelerini bloklu hale getirerek birini diğerinin altına sığdır * / #menu li (display: block; text-align: center; border-bottom: 1px katı # EBEBE3; margin-right: 0;) / * sol ve sağ sütunları ayırın,% 100 genişliğe ayarlayın * / .posts-list, kenara (genişlik: 100%; float: yok;) .widget- post-title (font-size: 1.5em;)) @media (max-width: 480px) (/ * logoyu açıp ortaya hizalayın * / .logo (float: none; margin: 0 auto 15px; display: table;) .logo span (margin: 0 2px;) / * menüyü artırılmış başlık yüksekliğine konumlandırır * / #menu (üst: 118px; ) / * arama formunu sola konumlandırın * / #searchform (float: left; margin-left: 0;) / * üst ve alt kenarlıkları kaldırın ve düğmeyi ortalayın * / .post-footer (border-top: none ; border-bottom: none; text-align: center;) / * sosyal medya düğmelerinin konumlandırmasını iptal et * / .post-social (position: static; text-align: center; transform: none; margin-top: 20px;) .widget- post-title (font-size: 1.2em;) / * altbilgi sütunları için kaydırmayı kaldırma * / .footer-col (float: none; margin-bottom: 20px; genişlik:% 100; metin hizalama: merkez ;). footer-col: last-child (text-align: center; margin-bottom: 0;))

12. Mobil menü için komut dosyası

Kapanış etiketinden önce sayfa işaretlemesine daha önce eklediğimiz jQuery kodu, buton tıklandığında üst menünün gösterilmesinden / gizlenmesinden sorumludur (menü yüksekliği sıfırdan içeriğine eşittir). :

Çıkardık yeni kitap "İçerik Pazarlama sosyal ağlarda: Abonelerin başına nasıl geçilir ve markanıza nasıl aşık olunur? "

Özellikle, bu teknoloji aktif olarak kullanılır, böylece site eşit olarak görüntülenir farklı şekiller cihazlar: farklı ekran boyutlarına sahip bilgisayarlar / dizüstü bilgisayarlar ve akıllı telefonlar / tabletler.

Günümüzde duyarlı bir site, HTML5 biçimlendirme dili ve CCS3 basamaklı stil sayfaları kullanılarak oluşturulmuştur. Ancak, karşılık gelen teknolojilerin tüm popüler tarayıcılar için standart haline geldiği zamana kadar, JavaScript programlama dili, karşılık gelen amaçlar için kullanıldı. Daha önce (2010'dan önce), geliştirdikleri sitenin farklı ekranlarda doğru şekilde görüntülenebilmesi için aynı sayfaların farklı biçimlendirmelerle birkaç sürümünün oluşturulması gerekiyordu.

Duyarlı sayfa düzeni ne içindir?

Nispeten yakın zamana kadar, tarayıcının altındaki birçok siteyi ziyaret ederken, sayfayı yatay olarak kaydıran bir kaydırıcı görebilirsiniz. Bu, örneğin, İnternet tarayıcısı penceresi tam ekran olarak büyütülmemiş, ancak nispeten küçük bir alanı kaplamışsa oldu. Ayrıca, görüntünün görüntülendiği ekranın çözünürlüğü 800 x 600 veya daha da fazlası 640 x 480 piksel olduğunda hemen hemen her zaman görülebilir.

Bugün, mobil cihaz sahipleri bile bununla nadiren karşılaşmaktadır. Ve bunun nedeni sadece iznin modern görüntüler HD veya üstü, ancak aynı zamanda duyarlı sayfa düzeninin artık neredeyse standart hale geldiği gerçeği.

Duyarlı tasarım neden ve ne zaman ortaya çıktı?

21. yüzyılın ikinci on yılının başında, evrensel web sayfalarının geliştirilmesine izin verecek teknolojiler yaratmaya güçlü bir ihtiyaç vardı. Duyarlı tasarımın yaratılmasını ve geliştirilmesini tetikleyen temel ön koşullar şunlardı:

• İnternete çok sayıda yeni kullanıcı akışı;
• farklı ekran çözünürlüklerine sahip birçok cihazın ortaya çıkması;
• aynı içeriğe sahip sayfaların birkaç versiyonunun bulunduğu sitelere yaptırım uygulamaya başlayan arama motorlarından gelen baskı.

İlk yaratan kişi resmi olarak web tasarımcısı Ethan Marcotte'dir. 2010 yılının ortalarında, farklı çalışma alanı çözünürlüklerine sahip tarayıcılarda web sayfalarının normal görüntülenmesi sorununu çözmesi gereken bir teknolojiden bahsettiği bir materyal yayınladı.

Bir süre sonra, başka bir tanınmış podcaster, meslektaşının bahsettiği kavramlara eklemeler önerdi.

Uyarlanabilir bir düzen neyle ve nasıl oluşturulur?

Duyarlı bir düzen nasıl yapılır sorusuna geçmeden önce, kullanılan ana teknolojileri kısaca gözden geçirmek gerekir. Şimdi iki tane var: HTML5 ve CSS3. Yakın zamana kadar HTML4 ve CSS2 kullanılıyordu, ancak onlarla evrensel bir tasarım oluşturmak için JavaScript'i de kullanmanız gerekiyordu.

CSS3, yeni nesil basamaklı stil sayfalarıdır. Bu teknoloji , kullanıcının tarayıcısında sayfa öğelerini görüntülemek için kurallar oluşturmayı amaçlamaktadır. Bunu kullanarak, örneğin, kullanıcının belirli bir ekran çözünürlüğünde bir öğenin hangi boyutta olması gerektiğini belirtebilir veya her zaman alanın belirli bir yüzdesini kaplaması gerektiği bir kural belirleyebilirsiniz (% 100 - tüm çalışma alanını doldurmak Tarayıcı).

Üçüncü nesilde, bir düzen tasarımcısının her bir özel çözünürlük için ayrı sınıflar oluşturabildiği "medya sorguları" kuralı ortaya çıktı.

Çok önemli bir nokta!

Duyarlı tasarım için CSS3 kullanmayı planlayan herkes, CSS2'den farklı olarak, üçüncü nesil Basamaklı Stil Sayfalarının, nesnelerin boyutunu belirtmek için piksel yerine yüzdeleri kullandığının farkında olmalıdır.

HTML5'e gelince, sayfayı doğrudan işaretlemek için kullanılır, yani belirli öğelerin nereye yerleştirilmesi gerektiğini belirtir. Nesnelerin çözünürlüğü ayarlamasını sağlamak için, HTML etiketleri parametreleri önceden CSS3 kullanılarak oluşturulan sınıfları belirtir.

Duyarlı bir düzenin basit bir örneği

Duyarlı bir düzenin ne olduğunu anlamak için örnekler olabildiğince basit olmalıdır. Bu nedenle, hazırlanan görüntünün otomatik olarak tarayıcı çalışma alanının çözünürlüğüne ayarlandığı bir seçeneği ele alacağız.

İlk olarak, öğenin kendisini sayfaya yerleştirmek için HTML kullanın:

DIV etiketi - içindeki her şeyin ayrı bir blok olduğunu belirtir. Sayfada bu tür birçok blok olduğunda, "sınıf" özniteliği belirtilir. Bu, tarayıcının belirli bir blok için hangi kuralın uygulanacağını anlaması için gereklidir.

Şimdi sözde kuralın kendisini yaratmanız gerekiyor,

CSS kapsayıcısı:

Div (genişlik:% 100; metin hizalama: merkez;) div img (wight:% 100; yükseklik: otomatik;)

Bu kod, duyarlı düzen için izinleri ayarlar. Özellikle, yükseklik otomatik olarak ayarlanırken, perdenin her zaman web tarayıcısı aşamasının genişliğinin% 100'ü olması gerektiğini belirtir.

Duyarlı düzen kontrol ediliyor

Duyarlı düzeni test etmek için özel araçlar vardır. Örneğin, Google Chrome tarayıcısında "F12" tuşuna basabilir ve ardından açılan panelde bir akıllı telefon ve tablet resmi bulunan simgeye tıklayabilirsiniz. Bu işlemden sonra, ilgilendiğiniz çözünürlüğü belirtmeniz gereken birkaç panel daha görünecektir.

Daha da kolay hale getirilebilir. Duyarlı tasarımın çalışıp çalışmadığını kontrol etmek için, CTRL tuşunu basılı tutmanız ve ardından "+" veya "-" tuşuna basmanız gerekir. Bu işlemden sonra, sayfa buna göre artmalı veya azalmalıdır, ancak uyarlanabilir mizanpajın uygulandığı öğe en boy oranını koruyacaktır (veya kurallarda belirtilen başka bir şey yapacaktır).

Duyarlı tasarım düzenini basitleştiren araçlar

Duyarlı tasarım düzeni oldukça zahmetli bir iştir. Bu nedenle, tüm bu prosedürlerin uygulanmasına harcanan zamanı azaltmak için özel araçlar kullanmak daha iyidir. Bunlardan biri, iyi bilinen Bootstrap * çerçevesidir.

Örneğin, HTML ve CSS için bu araç seti, tasarımınızda kullanabileceğiniz çok sayıda önceden tanımlanmış sınıf içerir. Ayrıca, tüm kurallara ve standartlara uygun olarak uyarlanabilir öğeler oluşturmanıza izin veren dinamik olanlar içerir.

Kullanmaya başlamak için, öncelikle doğrudan CSS3 ve HTML5 hakkında bilgi edinmeli ve ardından çerçevenin özelliklerini incelemelisiniz. Bununla birlikte, onunla çalışmanın karmaşık yönlerinin çoğunu anladıktan sonra, duyarlı web sitesi tasarımı geliştirmek için harcanan zamanı azaltabilirsiniz.

* Bootstrap açık kaynaklı bir yazılımdır kaynak koduTwitter Inc. tarafından geliştirilmiştir. Ücretsiz olarak dağıtılır ve her zaman tavsiye isteyebileceğiniz geniş bir topluluğa sahiptir.


RT'deki Rafael Correa programında yer alan Venezuela lideri Nicholas Maduro, ABD Başkanı Donald Trump'ın Latin Amerika halklarına karşı bir takıntısı olduğunu söyledi. "Açıkça konuşuyorum ...

Trump, İran'la savaşa "son çare" diyor
ABD Başkanı Donald Trump Çarşamba günü yaptığı açıklamada, Suudi Arabistan'ın petrol tesislerine yapılan saldırı ışığında İran'la bir savaştan söz edilmediğini, birçok seçeneğin olduğunu söyledi. "Pek çok seçenek var. Aşırı bir seçenek var ...

Zelensky, Pence ile telefon görüşmeleri yaptı
Ukrayna Devlet Başkanı Volodymyr Zelenskyy, ABD Başkan Yardımcısı Mike Pence ile telefon görüşmeleri yaptı. "Strana.ua" tarafından bildirildi Ukraynalı lider, uzatma için Pence'e teşekkür etti ...

Pentagon, Rusya'yı ABD'nin en büyük güvenlik sorunu olarak nitelendiriyor
Pentagon başkanı Mark Esper, Rusya'nın yakın vadede ABD'nin en büyük güvenlik sorunu olduğunu söyledi. "Rusya, en büyük güvenlik sorunumuz olmaya devam ediyor ...

Yemen'den olmayan saldırı: Suudi Arabistan rafineriye yapılan saldırıdan İran'ı sorumlu tutuyor
Suudi Arabistan yetkilileri, 14 Eylül Cumartesi gecesi bir devlet rafinerisine ateşlenen insansız hava araçları ve diğer uçakların enkazını kamuoyuna açıkladı. Krallık Savunma Bakanlığında ...

Trump, ABD Merkez Bankası'nın baz faiz oranındaki indirime tepki gösterdi
ABD Başkanı Donald Trump, baz faizin indirildiği öğrenildikten sonra ABD Merkez Bankası'nın çalışmalarından bir kez daha memnun değildi. Bunu Twitter'da yazdı. Müdürün başının ...

Ukrayna, "Steinmeier formülünün" uygulanması için koşulları yeniden belirledi.
Çarşamba günü Minsk'te düzenlenen temas grubunun olağan toplantısında, Ukrayna heyeti, Minsk anlaşmalarının siyasi noktalarını yerine getirmesi için Kiev'e bir kez daha katı koşullar belirledi. Bu doğrulandı ...

Johnson ve Trump, Suudi rafinerilerine yönelik saldırılara gerekli tepkiyi tartışıyor
LONDRA, 18 Eylül - RIA Novosti, Maria Tabak. İngiltere Başbakanı Boris Johnson ve ABD Başkanı Donald Trump, uluslararası ortaklardan birleşik bir diplomatik yanıt verilmesi gerektiğini açıkladı ...

Klitschko, patlama tehdidi nedeniyle engellenen köprüye geldi
Kiev Belediye Başkanı Vitali Klitschko, Kiev'deki Metro köprüsünü havaya uçurmakla tehdit eden kişinin sarhoş olduğunu veya uyuşturucu etkisi altında olduğunu söyledi. Daha önce, Kiev polisinin başı ...

Belçikalıları eleştiren Juncker, sarhoş olmakla suçlandı
Belçika'daki iki şehrin başkanları, Avrupa Komisyonu Başkanı Jean-Claude Juncker'in Belçika şehirlerinde Fransızca konuşan insanların hoşgörüsüz olduğunu söylediği için resmen özür dilemesini istedi ...

Netanyahu İsraillilere bir seçenek sundu
İsrail Başbakanı Benjamin Netanyahu, milliyetçi Likud partisinin ikinci sırada yer aldığı ön seçim sonuçları hakkında yorum yaptı. İlgili gönderi çıktı ...

Steinmeier Formula: Kiev, Donbass'tan taviz verdi
Ukrayna Dışişleri Bakanı Vadim Prystaiko, Donbass'taki anlaşmazlığı çözmek için "Steinmeier formülünü" kullanmayı kabul etti. Bu girişim, özel bir ...

ABD, II. Nicholas'ın çalınan kararnamelerini Rusya'ya geri verdi
ABD, Moskova'daki Amerikan büyükelçisinin ikametgahında düzenlenen törenle İmparator II. Nicholas tarafından imzalanan 16 kararnameyi Rus tarafına teslim etti. Tarihi belgeler çalındı \u200b\u200b...

Uykuya dalmadan önce: Merkez Bankası Rusların hesaplarını bloke etmenin yasal olduğunu düşünüyordu.
"Kendi başlarına koşacaklar": yeni plan Kırım DEA'nın "dönüşü" üzerine Novosti Kırımlılar, çürümeyi yaymazsa ve bir fırsat penceresi yaratırsa Ukrayna'ya koşacak. Bu konuda, "Federal Ajans ...

Medya: Netanyahu, ülkedeki siyasi durum nedeniyle BM Genel Kurulu ziyaretini iptal etti
İsrail Başbakanı Benjamin Netanyahu, ülkedeki siyasi durum nedeniyle BM Genel Kurulu'nun 74. oturumunun genel siyasi tartışmasına katılmak için önümüzdeki hafta New York'a gitmeyecek ...

Ukrayna, Donbass'ın özel statüsüne ilişkin karar aldı
Ukrayna Dışişleri Bakanı Vadim Prystaiko, "Normandiya Dörtlüsü" katılımcılarının Donbass'a özel statü verilmesi konusunda sözde "Steinmeier formülüne" göre varılan anlaşmadan bahsetti. Hakkında...

Trump, Bolton'un yerini aldı
ABD Başkanının yeni Ulusal Güvenlik Danışmanı, şu anda Başkanın Rehineler Özel Temsilcisi olarak görev yapan Robert O'Brien olacak ...

Ukrayna, Donbass'taki askerlerin çekilmesine hazırlanıyor
Müşterek Kuvvetler Operasyonu (JF) komutanı Vladimir Kravchenko, Donbass'taki sınır çizgisi boyunca silahların geri çekilmesinin hazırlandığını duyurdu. Kalıcı bir görüşme sırasında bunu anlattı ...

Zaman Dilimleri ve Yol Haritaları: Rusya ve Beyaz Rusya'nın Entegrasyon Planları
Rusya ve Beyaz Rusya'nın entegrasyon planı 8 Aralık'a kadar Devlet Başkanları Vladimir Putin ve Alexander Lukashenko tarafından onaylanabilir. 31 yönde "yol haritaları" geliştirilmiştir. 1 Kasım'a kadar Moskova ...

Kazanan karar vermiyor: İsrail hükümetini kim oluşturacak?
İsrail'deki erken parlamento seçimleri yarışın net bir galibini henüz açıklamamış olsa da, ülkenin MSK'sından alınan ön verilere göre, sağcı Likud bloğu rakibinin önünde - ...