İllüstrasyon. Modern koşullarda çapraz tarayıcı düzeni - gerekli ilkenin ortak bir anlayışı

5. Uyarlanabilir düzen türü. Ana avantaj, kaynağın tüm popüler kullanıcı cihazları (PC'ler, dizüstü bilgisayarlar, tabletler, akıllı telefonlar vb.) için teknik olarak uyarlanması olasılığıdır. Birden çok stil sayfasını gruplayarak rahat kullanım sağlanır.

6. Esnek düzen (esnek). Web tasarımcılarının çevrelerinde, bu tür bir düzenin programlama alanında sınırsız olasılıkları ve beklentileri gizlediğini söylüyorlar. Asılsız olmamak için size esnek yerleşimin temel avantajlarının bir listesini sunuyoruz:

Mevcut alanı verimli bir şekilde doldurmak için tüm bloklar gerektiği gibi sıkıştırılır ve gerilir;
- metin malzemelerinin yatay ve dikey hizalanması için kaynaklar vardır;
- HTML'de bileşenlerin net bir şekilde yerleştirilmesine gerek yoktur;
- dilleri hem sağdan sola hem de soldan sağa yazmak mümkündür (bu durumda “başlangıç” ve “bitiş” kavramları daha uygun olacaktır);
- CSS'ye hakim olmak, minimum bir süre anlamına gelir.

7. Semantik HTML düzeni, blok düzeninin bir uzantısı olarak konumlandırılmıştır. İşlevselliği HTML5 platformunda analiz edebilirsiniz. Güncellenen etiket kümesinin web sayfasının yapısallığının göstergesini iyileştirmeye izin verdiğini unutmayın (arama motorları semantik kodlu portalları tercih eder).

Sonuç olarak, yüksek kaliteli bir sitenin, sayfaları (her şeyden önce) tarayıcılar arası uyumluluk ve uyarlanabilirlik kriterleri dikkate alınarak tasarlanmış bir platform olduğunu hatırlıyoruz. Kaynak türüne ve gelecekte yardımı ile çözülen görevler, hedefler yelpazesine odaklanan düzen türünü seçin. Sana iyi şanslar.

Neden bir değil?

Adil bir soru, neden onu bulmanın ve geliştirmenin tek bir yolu olmadığıdır? Ama insanlar farklı yaratıklar, bu yüzden farklı yollar buldular. Aslında, birçoğu yok, ayrıca bazıları bugün modası geçmiş. Temel yerleşim yöntemlerine bir göz atalım.

tablo

Tabloları kullanarak bir tel kafes oluşturma. Geçmişte, en temel ve popüler yol. Günümüzde bu şekilde yapılan siteler kalsa da her yıl modası geçmektedir. Yöntemin tamamı tablo etiketine ve satırlar ve hücreler gibi alt öğelerine bağlıdır. Sitenin tüm yapısı büyük bir tablo olarak işaretlenmiştir.

İtibar. Bu yaklaşım, birçok sütun ve sütun oluşturmayı kolaylaştırır. Karmaşık bir yapıya sahip düzenlerin bir tablo kullanarak dizilmesi oldukça kolaydır. Ayrıca tablo etiketi ve ilgili tüm öğeler tüm tarayıcılarda tam olarak aynı şekilde desteklenir.

Dezavantajları. Çok hantal kod, tablo düzeninin ana dezavantajıdır. Bir tabloya, yani iç içe geçmiş bir tabloya başka bir tablonun eklenebileceğine dikkat edilmelidir. Bu, çok sayıda iç içe yerleştirmeye ve bir sürü etikete yol açar. Ve bundan kaçış yok çünkü tablomuzun çalışması için tüm bu etiketlere ihtiyaç var. Böyle bir kodu anlamak çok kolay değil.

Tablo verilerinin farklı cihazlarda görüntülenmek üzere uyarlanması çok zordur. Bunu bloklarla yapmak çok daha kolaydır (kesinlikle ele alacağımız blok düzeni).

Alternatif. Daha yakın zamanlarda, CSS, aslında blokları kullanarak bir tabloyu simüle etmenize izin veren display özelliği için özel değerler tanıttı. Örneğin görüntü: tablo, görüntü: tablo satırı, görüntü: tablo-hücre. Bu özelliklerin uygulandığı öğeler sırasıyla tablo, tablo satırı ve hücre gibi davranmaya başlar. Bu yöntemin de kusurlu olduğunu indirmek gerekir, çünkü tüm tarayıcılarda tam olarak eşit şekilde desteklenmez. Bu özellikleri kullanırsanız, tarayıcılar arası uyumluluğu kapsamlı bir şekilde test etmeniz gerekir.

çerçeveler

Bir zamanlar başka bir dizgi yöntemi vardı, ancak bugün neredeyse unutuldu. Çerçeveleri kullanan düzenin özü, tarayıcı penceresinin çerçeve kümesi etiketi tarafından oluşturulan belirli sayıda bağımsız bloğa (çerçevelere) bölünmesidir. Çerçeveye yüklenecek html sayfasının yolu orada belirtilir.

Her çerçeve bağımsız bir öğedir. Yani kaydırma çubukları her blok için ayrı ayrı görünür. Çerçevelerin hiçbir zaman resmi olarak kabul edilmediğini söylemeliyim, bu yüzden bugün pratik olarak kullanılmazlar ve genellikle kötü bir yerleşim şekli olarak kabul edilirler.

Pirinç. 1. Bu, internette bulduğum çerçevelerle ilgili bir site örneği. Tahmin edebileceğiniz gibi, estetik yok.

Bloklar

Böylece bugün en popüler site düzeni teknolojisine geliyoruz. Bir dizi avantajı vardır ve genellikle en uygun olarak kabul edilir. Her blok, sınırsız sayıda öğeyi iç içe geçirebileceğiniz bağımsız bir öğedir. Blok konumlandırılabilir, yeniden boyutlandırılabilir, stilize edilebilir. Bunların hepsi CSS ile yapılır.

İtibar. Dizgi yapmamış olsanız bile mükemmel şekilde okunabilen son derece kompakt kod. Blokların farklı stillere bağlanması tablolara göre daha kolaydır. Böyle bir site daha hızlı yüklenir ve daha iyi indekslenir.

Blok öğeler, Photoshop'taki katmanlar gibi üst üste istiflenebilir. Şeffaflık desteği verildiğinde, birçok ilginç efekt elde edebilir, belirli bir alanı vurgulayabilir veya farklı içeriği aynı yere yüklemek için bir komut dosyası kullanarak uygulayabilirsiniz.

Dezavantajları. Pratik olarak hiçbiri yok. Blokların uyarlanması kolaydır, saklanması ve değiştirilmesi kolaydır. Div ve span kapsayıcıları, eski tarayıcılarda bile doğru şekilde oluşturulur. Yeni anlamsal bloklardan bahsedersek, tam destekleri yoktur. Ancak, bu sorun muhtemelen yakında çözülecektir. Zaten bugün, bağlantısı eski tarayıcılarda yeni öğeleri destekleme sorununu çözen dosyalar var. Blok yerleşim yöntemi, olağanüstü rahatlığı ve basitliği nedeniyle uzun süre var olacaktır.

Esnek kutular (esnek)

En yeni düzen yöntemi. 2014'ten beri ilk kez tarayıcılarda normal destek aldı. Birçok geliştirici artık bu yöntemi takip ediyor. Özü, display: flex'in yapısal elemanlara atanmasıdır. Bunlar aynı zamanda bir tür bloktur, sadece daha esnek ve işlevseldir.

Birçok kişi hala esnek kutuların bir site ızgarası oluşturmak için çok iyi bir çözüm olmadığını düşünüyor. Örneğin, bir sayfadaki küçük öğeler için uzun süredir flexbox önerilir, ancak çoğu hala sayfa tel kafesleri için kayan nokta kullanır.

Büyük olasılıkla, gelecekte flexbox nihayet kendisini yeni bir web sitesi yerleşim tekniği olarak kuracaktır, bu nedenle şimdi bu öğenin özelliklerini incelemeye değer.

Pirinç. 2. Esnek öğelerin özellikleri, onları kutulardan daha esnek hale getirir.

Flexbox'ın avantajları, fazla çaba harcamadan çeşitli ızgaralar ve sütunlar oluşturmanıza olanak tanıyan yeni css özelliklerini içerir. Normal bloğun desteklemediği dikey hizalama da desteklenir.

Çözüm

Günümüzde en basit ve en popüler yerleşim yöntemi blok tabanlı yaklaşım olmaya devam ediyor. Bazı yerlerde tablolar sizin için yararlı olacaktır, çünkü tablo verilerini bloklar halinde dizmek uygun değildir.

Çerçeveler, yapı oluşturmanın talihsiz bir yolu olarak uzun süredir göz ardı edildi, ancak bir makaleye aniden başka bir site eklemeniz gerekirse, iframe etiketi kullanışlı olabilir.

Son olarak, bugün tamamen yeni bir yerleşim şeklimiz var - esnek eleman ve onu normal bloktan daha esnek ve modern yapan özellikleri. Hepsi bugün için. Site oluşturma hakkında her şeyi öğrenmek için yeni blog makalelerini okumayı unutmayın.

Kullanıcıların %40'ının kötü tasarlanmış sitelerden ayrıldığını biliyor muydunuz? Neden Kar Kaybedersiniz? Aşağıdakilerden birini seçin ve yükleyin 44 bin premium web sitesi şablonu.İşletmeniz için mükemmel seçim!

Layout, kod yazma ve gelecekteki sitenin tasarımını geliştirme gibi ekstra işlerden kendinize tasarruf etmenizi sağlayacak vazgeçilmez bir araçtır. Bir düzen seçerken, en sevdiğiniz platforma uyarlanabilen tamamen hazır bir HTML şablonu elde edersiniz. Gerçek bir modern web sitesi düzeninin nasıl göründüğünü ve iyi bir düzen seçeneğini nasıl bulacağınızı bilmek ister misiniz? O zaman bu inceleme tam size göre.

Düzenin hem avantajları hem de dezavantajları vardır. Düzenlere göre avantajları, gelecekteki site için kod yazmanıza gerek kalmamasıdır. Düzen tasarımcıları bununla zaten ilgilendi. Ancak, herhangi bir geliştirme platformunu seçebilme avantajı da küçük bir dezavantajdır. En azından yeni başlayanlar için. Gerçek şu ki, bir düzen kullanırken, şablonu istenen platforma çekmek ve sitenin iyi çalışması için web geliştirme hakkında biraz bilgi sahibi olmanız gerekir. Bu durumda bir uzman olmadan yapmak oldukça sorunludur. Bu nedenle, daha basit bir şeye ihtiyacınız varsa, profesyonel CMS için tam teşekküllü şablonlara yönelmek daha iyidir. Örneğin, veya.

Düzeni olan bir web sitesi oluşturmaya karar verdiniz mi? Özellikle sizin için, kurumsal veya kişisel kullanım, yaratıcılık ve e-ticaret için en iyi ve en modern düzenlerden oluşan bugünkü koleksiyonum. Burada görevleriniz için herhangi bir seçenek bulacaksınız!

Şık premium tasarıma sahip modern web sitesi düzeni

Çeşitli site türleri için modern düzen

Verso - Bootstrap 4'e Dayalı Benzersiz HTML Şablonu

Özel bir tasarıma sahip 19 demo sitesi içeren çok güzel düzen. Çeşitli faaliyet alanlarındaki sitelere özelleştirilmesi ve uyarlanması kolaydır.

LeoHunt - herhangi bir amaç için uyarlanmış HTML5 düzeni

Tema, mobil cihazlarda çalışacak şekilde uyarlanarak tasarlanmıştır. 12 ana sayfa varyasyonunda, 3 tek sayfa görünümünde ve iki düzende temiz bir tasarıma sahiptir. Joomla ve WordPress için aynı şablonlar mevcuttur.

RaiseApp, çeşitli kullanımlar için duyarlı bir temadır

Bu, bir başlangıç ​​sayfası, bir blog ve ayrıca kişisel veya kurumsal bir web sitesi için mükemmel bir açılış sayfası veya klasik çok sayfalı bir web sitesi oluşturmanıza olanak tanıyan bir dizi UI bileşeni (2000+) içeren bir düzendir. Yeni başlayanlar WordPress sürümünü sevecektir.

Matex - malzeme tasarımı tarzında harika bir web sitesi için bir dizi hazır sayfa

Yaratıcı bir şekilde tasarlanmış bir HTML5 web sitesi konsepti, herhangi bir işletme ve uygulama için bir web sitesi oluşturmanıza olanak tanır: mimarlık ofisi, fırın, üniversite, inşaat şirketi ve portföy.

Honshi - Yaratıcı Çoklu Görev Web Sitesi Şablonu

Temiz tasarıma sahip şık ve basit şablon, herhangi bir web sitesi geliştirme için size yeni bir çözüm sağlayacaktır. Yerleşik iletişim formları, google maps, portföy bölümü, blog sayfaları ve çeşitli renk şemalarına sahiptir.

İş için sitenin modern düzeni

SaaSera - geliştiriciler ve yeni başlayanlar için düzen

Temayla birlikte, çeşitli alanlar için bir dizi çözüm elde edersiniz: BT, web geliştirme, yazılım geliştirme vb. Tasarım çok güzel, renkli ve yaratıcı.

Geliştiricilerin bir web sitesi oluşturması çok daha kolay olacaktır.

TechLine - şirketler, şirketler ve yeni başlayanlar için şablon

Esnek özelleştirme için 1000 seçenekli modüler bir Y çerçevesi temelinde oluşturulmuş, herhangi bir alanda iş odaklılık için zarif ve basit bir şablon. Yüzlerce sayfa, düzinelerce portföy konsepti ve binlerce simge dahildir. Yeni başlayanlar için wordpress sürümü.

TeraHoster - Profesyonel Hosting Şirket Teması

Temaya ana sayfa tasarımı için 4 konsept ve diğer sayfalar için seçenekler eklendi. Entegre WHMCS desteği.

Ayrıca WordPress sistemi için harika olanlarımız da var.

Endüstriyel - endüstriyel bir şirket için harika bir site şablonu

Bu tasarım konsepti, teknoloji, endüstri ve üretim alanlarında faaliyet gösteren şirketlerin web sitelerine yöneliktir. Tamamen duyarlı düzen ve 11 tasarım seçeneği.

ConstructZilla - temiz bir tasarıma sahip bir inşaat şirketi için web sitesi düzeni

Bu estetik açıdan temiz ve mobil cihazlar için optimize edilmiş HTML şablonu, düzeni bireysel iş gereksinimlerinize uyacak şekilde özelleştirmenize olanak tanır. Paralaks efekti ve AJAX formları ile 100'den fazla HTML dosyası.

InBenefit, endüstri ve şirketler için çok çeşitli WordPress temaları sunar.

Seyahat Turu - seyahat acentesi veya çevrimiçi rezervasyon hizmeti için şablon

Turizm endüstrisi için ideal, modern teknolojiye dayalı şık konseptleri gizler. Güzel galeriler ve bir derecelendirme sistemi var.

Universal - Danışmanlık Hizmetleri için İş Teması

Universal, çeşitli danışmanlık ve diğer ilgili finansal hizmetler firmaları için idealdir. Ekstra ücret ödemeden mobil optimizasyona ve premium kaydırıcı eklentisine sıkı bir şekilde odaklanın. Yeni başlayanlar bu WordPress şablonuna bayılacak.

Ayrıca çok çeşitli incelemelerimiz ve şirketlerimiz var.

TaxiPark - Bir taksi hizmeti veya taksi şirketi için HTML5 düzeni

Taksi şirketlerinin ihtiyaçları için özel olarak tasarlanmış çarpıcı bir HTML şablonu, hızlı geliştirme için mükemmel bir çözümdür. Üç ana sayfa seçeneği, Google yazı tipleri ve bir Paralaks efekti içerir.

Geçen yıl WordPress için havalı ve şık olanları seçtim. Şimdi kontrol edin!

BT ve serbest çalışanlar için modern web sitesi düzeni

Maestro - En İyi Eserleri Sunmak için AJAX Şablonu

Şablon, grafik tasarım, çeviri, fotoğrafçılık ve metin yazarlığı gibi çeşitli faaliyetlerde bulunan yaratıcı stüdyolar ve serbest çalışanların siteleri için benzersiz tasarım seçeneklerine sahiptir. Ek olarak, bir WordPress sürümü var.

Berk - minimalizm ruhu içinde havalı ve şık portföy şablonu

Grafik tasarımcılar ve yaratıcı stüdyolar için temiz ve profesyonel bir şablon. Tüm mobil ve sabit cihazlarda güvenle çalışır. Set, çeşitli tasarım türleri ve birinci sınıf bir kaydırıcı içerir.

Inshot - Duyarlı Fotoğrafçı Portföyü Teması

Bu, incelememizdeki kategorilerin hiçbirine uymayan ayrı bir konudur. Yine de harika, çünkü görüntülemeler ve reklamlar içeren bir video sitesi oluşturmanıza izin verecek. Yüksek indirme hızı ve kullanıcı dostu arayüz.

Artyom, şablonlara, eklentilere, kurslara ve sitenin diğer konularına adanmış "Web başarı laboratuvarı" projesinin web sitesinde çok sayıda inceleme ve makalenin yazarıdır. WordPress platformu vb. için şablon ve eklenti seçiminde uzman. Hobiler: ilginç literatür ve açık hava etkinlikleri okumak.

Çizimlerin düzeni kabaca yedi farklı türe ayrılabilir:

1. açık düzen,
2. kapalı,
3. sağır,
4. şerit,
5. alanlara erişimi olan,
6. kenar boşluklarında düzen,
7. düzeni zar zor yeterli.

Tüm bu yerleşim türleri şekilde şematik olarak gösterilmiştir.

Düzen açıkken, resim şeridin kenarına - iki veya üç sayfa kenar boşluğuna - yerleştirilir. Düzen kapatıldığında, resim, iki veya bir kenarı yan kenarlara gelecek şekilde metnin arasına yerleştirilir. Kör dizgi için resim metnin arasına yerleştirilir. Hessen'e göre, çizim üç taraftan kapatıldığında ve bir taraf üst veya alt kenar boşluğuna temas ettiğinde bile dizgiye "kör" denir.

Açık bir dizgi ile klişe sıyrılır veya fırfırlar olmadan verilir; kapatıldığında - ayrıca yırtık veya fırfırlar olmadan verilir; kör bir dizgi durumunda, klişe mutlaka yırtılır.

Listelenen düzen türlerine ek olarak, başka bir seçenek daha vardır: metin resmin içine yerleştirilir.

Bazı durumlarda (örneğin, küçük çocuklar için renkli kitaplar dizerken), yapının ana amacı, sayfanın önemli bir bölümünü kaplayan bir çizimdir. Metin sadece resmi tamamlar ve ona bağlı olarak oluşur. Bu tür dizgi, eski basılı kitaplarda bile bulunur.

Görsel açıdan, açık yerleşim faydalıdır. Burada çizimler, alanların beyaz rengiyle kontrast nedeniyle daha etkileyici hale geliyor. Ayrıca metin, şeklin üstünde ve altında veya iki veya üç şekil arasında bölümlere ayrılmamıştır.

Açık bir düzende, çizim kural olarak net bir dikdörtgen şekle sahip olmalıdır, aksi takdirde şeridin dikdörtgenliğini ihlal ederek içinde çukurlar oluşturur. Sonuç olarak, ton klişeleri açık düzen için daha uygundur. Çizgi klişelerinin düzeninin açık olduğu durumdan çıkmanın bir yolu, cetvellerden çerçeveler kullanmaktır. Ancak bu teknik, hem düzen tasarımcısının hem de yazıcının işini büyük ölçüde karmaşıklaştırır. Aynı zamanda, çerçeveleme yaparken, çoğu durumda, cetvellerin birleşimini boşluk olmadan doğru bir şekilde elde etmek imkansızdır. Klişe yapmadan önce çerçeveyi doğrudan çizim üzerinde yapmak daha uygundur.

Şeridin mutlak kareliği elbette zorunlu bir kural değildir. Bazen görüntünün konusuna bağlı olarak şerit dikdörtgenin kırılması tavsiye edilir. Şerit dikdörtgenin kasıtlı olarak imha edilmesinin özel bir tasarım tekniği olduğu durumlar vardır. Ve bazen, çubuğun dikdörtgenini kırmak metnin okunmasını kolaylaştırır.

Açık kaynak düzeni, bazı teknik zorluklarla ilişkilidir. Sadece genişlikte değil, aynı zamanda yükseklikte de şeridin dışındaki yüzü serbest bırakmak gerekir. Aynı zamanda, üstbilgi veya altbilgi metinden hafifçe dövülürse, o zaman yönü kesmeniz gerekir. Yazdırma sırasında bu, çinko levhanın altlıktan yırtılmasına neden olabilir. Formu kaplarken, şeridin dışında bırakılan faset de bazı rahatsızlıklar yaratır. Ancak, bir yerleşim türü seçerken bu hiçbir şekilde belirleyici bir husus olamaz.

Kapalı düzen en yaygın olanıdır. Bununla, çizimin belirli bir ölçeği (açık bir düzende olduğu gibi) veya ana hatları hakkında çok fazla endişelenmenize gerek yok: anahattaki tüm çukurlar fırfır çizgileriyle gizleniyor.

Kapalı bir düzende, çizim şeridin herhangi bir yerine yerleştirilebilirken, açık bir düzende sadece üstte veya altta yer alabilir.

Resmi metinden ayırmak istiyorsanız, kör düzen kullanışlıdır. Bu izolasyon, özellikle resmin çevresinde yeterince geniş bir boşluk bırakıldığında, resmin metin arasında vurgulanan bir dikdörtgen üzerinde olduğu gerçeğiyle yaratılır. Kör yerleşime yalnızca iki sütuna yazarken izin verilir. Bir sütunla, hem bir çizimi okurken hem de sütunlarda metnin algılanması son derece zordur.

Alanlara erişimi olan yerleşim düzeni, her tür literatür için uygun değildir. Bilimsel veya eğitici bir kitapta her zaman uygun olmayacaktır. Kapsamı dergiler ve kurgudur. Görsel açıdan, bu tür yerleşimin bir takım avantajları vardır. Resmin daha büyük bir ölçeğini elde etmeyi mümkün kılar, yani resmi tanımlamak daha iyidir. Bir alandaki resmin çıktısı, yalnızca bir bütün olarak asimetrik tasarım şeması için uygundur.

Alanlara girmek yeterince somut olmalıdır. Örneğin, 10-12 p'lik bir klişe vermek imkansızdır.

Kullanıma hazır bir düzen uygulamak, her zaman formaların dikkatli bir şekilde önceden düzenlenmesini gerektirir. Ayrıca, grafik materyali, ancak yeterli miktarda oluştururken bile dikkatli bir şekilde hesaplanmalıdır. Çoğu zaman, üst üste bindirilmiş çizimlerin etkileyiciliği azalır, çünkü bunlar şeridin kenarına ulaşmaz ve beyaz bir sınır oluşturur.

Teknik açıdan bakıldığında, alanlara erişimi olan ve zar zor yeterli olan yerleşim, bir arabada uzanırken büyük zorluklar yaratır.

Kenar boşluklarındaki rakamların yerleşimi yalnızca büyük kenar boşluklarıyla mümkündür. Bu tür bir düzen kurguda, özellikle de metne eşlik eden resimleme anlamında geniş fırsatlar sunduğu çocuklar için edebiyatta kullanılır. Şekiller yeterli miktarda verilmeli ve kitap boyunca eşit olarak dağıtılmalıdır, aksi takdirde bu tür bir yerleşim ekonomik değildir.

Çizgili bir düzende, çizim genellikle şerit formatına eşittir. Büyük bir renk yüküne sahip resimlere biraz daha küçük bir format verilirse daha iyi olur, aksi takdirde bitişik şeritten daha büyük görünürler. Geniş kenar boşluklarında, şerit resminin şerit biçiminden daha büyük olacağı durumlar olabilir. Çizgili bir çizim durumunda, şekil başlıkları için gereken boşluk kesinlikle hesaplanmalıdır.

Aslında şeridin genişliğine eşit olan resimler, özellikle renkli veya dinamik bir yapıya sahipse, format dışı görünebilir. Bu nedenle, klişe olduklarında, genellikle gerçek formattan biraz daha az verilirler.

Bazen bir çizim, tam formattan önemli ölçüde daha küçük olsa bile ayrı bir şerit üzerine yerleştirilir. Ekonomik değildir, ancak çizimin etkileyiciliğini artırabilir, onu metnin ve kitabın diğer unsurlarının etkisinden kurtarabilir ve beyaz ve siyahın (kağıt ve çizim) etkileşiminden en iyi şekilde yararlanmayı mümkün kılabilir.

Bu veya bu tür bir düzenin seçimi, tüm kitap tasarım sistemi tarafından istenir. Tasarım, defalarca vurguladığımız gibi, kitabın içeriğine ve türüne göre belirlenir. Bir kompozisyon düzeni şeması seçmenin temeli olmalıdırlar.

Merhaba blog sitesinin sevgili okuyucuları. Bugünkü görevimiz, sözde site düzenini (dünün düzeni) yardımıyla değil, yardımla oluşturmaktır. Div öğeleri... Onlar. div'lerde örnek için üst kısmı (başlık), alt kısmı (altbilgi) ve üç sütunu oluşturmamız gerekecek.

Bu arada, Fr.'ye yazdığımda bu sorunu zaten çözdük.

Tekrar etmeye değmez gibi görünüyor, ama bunu yapmayacağım. Bugün temelde farklı bir site düzeni yöntemi ve ayrıca paralel olarak direktiflerin amacını da ele alacağız. @import ve @media(ön tarafla) daha önce incelemiş olduğumuz CSS'de (elbette temel düzeyde).

Bloklar üzerinde web sitesi düzeni - buna ihtiyacınız var mı?

Ayrıca, şu anda, konsorsiyum tarafından temsil edilen orijinal kaynağa dayanarak Html dilini parça parça ayrıştırmayı başardık. Ancak, herkesin benim tavsiyelerime maruz kalmadığını ve hemen çalışmaya başladığını düşünüyorum.

Hatta seni kısmen anlıyorum. Aslında, bu şeylerin bilgisi kendi başına size ne şöhret ne de zenginlik getirmeyecek, sadece çok daha keyifli bir aktivite için harcanabilecek çok zaman alacaktır. Aynı şekilde çatal bıçak kullanmayı bilmek de sofranızda lezzetli yemeklerin olduğunu garanti etmez. Ancak, doğru zamanda kullanışlı olabilir ve önemli bir rol oynayabilir.

On ya da on iki yıl önce, kendim Html'yi kesinlikle incelemeye karar verdim, ancak bence en başta takıldım ve bu fikre olan ilgimi hızla kaybettim, başka bir nişancıda heyecan verici bir oyunu sıkıcılığımla alay etmeye tercih ettim. beyin.

Evet evet bir zamanlar hobim oyunlardı ama şimdi site bu hobi haline geldi ve bir zamanlar anlattığım bazı şeyleri uygulama fırsatı buldum. Üstelik oyunlara benzeterek, kazandığım para miktarı hala ne kadar başarılı ilerlediğimi gösteren bir tür sanal gözlük olarak algılanıyor.

Karım son birkaç yılda bir sonraki hobime karşı tutumunu oldukça kökten değiştirmiş olsa da, bu zaten ortadan kaldırılamaz gibi görünüyor (bu makaleyi dilbilgisi hataları için kontrol edecek olması üzücü, aksi takdirde tüm değişiklikleri açıklardım) Bu daha ayrıntılı olarak gerçekleşti), çünkü bu blog, tüm ilk beklenti ve şüphelerinin aksine, hışırtı faturaları şeklinde gerçek bir egzoz veriyor (bir cari hesaptaki rakamlarda ekrandaki rakamların yasal olarak nasıl gerçekleştirileceğini okuyun). Bireysel girişimci.

Genel olarak, bu lirik arasöz tesadüfen yapılmadı, çünkü Html ve CSS'nin İnternet işinizi kurarken küçük tuğlalar olduğunu söylemek istiyorum, ancak site düzeni ilkelerine sahip olmak ve bunları anlamak, bunların önünde belirli miktarda puan verecektir. kim bu bilgiyi ihmal etti.

Bir web projesinin genel başarısı, çoğu zaman, araştırması kolayca (ve genellikle çok hoş) uzak köşeye itilebilecek küçük şeylere bağlıdır. Sadece bir şeyi hatırlayamıyorum - tembellik ve ağır düşünmeden örülmüş o görünmez engeli aşmamı sağlayan şey. Kartların az önce düşmüş olması mümkündür. Bu nedenle, sizin de bu engeli aşmanızı diliyorum, ancak bunun nasıl yapılacağını tam olarak söyleyemem.

Tamam, değişmeyenlerle devam edelim. Div'leri ve stil kurallarını kullanarak bir site düzenini nasıl tasarlarım? Görelim. Doğal olarak, bu düzenin çalışmasını yerel bilgisayarda simüle edeceğiz, ihtiyacımız olan tüm dosyaları klasörlerinden birine atacağız. Barındırma yok ve. Bu, ilkeleri anlamak için gereksiz olacaktır.

Öyleyse, düzene geçelim. İlk olarak, gelecekteki web projemizin dosyalarının saklanacağı bir klasör oluşturup isimlendiriyoruz ve daha sonra içinde .html uzantılı ve isim indeksi ile bir metin dosyası oluşturuyoruz. Ayrıca bu klasörün içinde CSS dediğimiz başka bir klasör daha oluşturuyoruz (harici stil dosyalarımız içinde yaşayacaktır).

Sitenin düzeninde kullanılan resimleri (arka plan resimleri) bir parçası olacak şekilde bırakacağımız başka bir klasör eklemek mümkün olacak. Önceden, optimize etmenizi veya başka bir deyişle maksimuma çıkarmanızı tavsiye ederim.

Pekala, şimdi aşağıdaki balığı index.html'nize kopyalayın. Kodla çalışmak için kullanımı oldukça uygundur, ancak çalışma becerisine sahipseniz Dreamviewer daha işlevsel bir çözüm olabilir:

Başlangıçta, her zaman olduğu gibi, amacı linkte verilen makalede en ayrıntılı şekilde açıklanan gitmeli. Meta etiketi içinde, projemizi açtığımızda tarayıcı tarafından doğru yorumlanmasını belirtiyoruz. Her belgenin bir doldurulmuş (sayfa başlığı) olması gerekir, bu yüzden onu "balık" a ekledik.

Tüm kurucu belgelerinin tek bir alan adına ait olması nedeniyle sitenin tanımı gereği böyle olduğu açıktır, ancak ziyaretçiler için ana argüman web sayfalarının benzer tasarımı olacaktır ve bu, dikkate almamız gereken şeydir. kodlama yaparken hesap.

Bu nedenle, kesinlikle tüm sayfalara uygulanacak harici bir stil dosyamız olmalıdır. Ancak bunun yanı sıra, örneğin bir web projesinin farklı bölümlerinin biraz farklı görünmesini sağlayan ek CSS dosyaları da olabilir.

Sonuç olarak, sol veya sağ sütunun taşması, ID vnutr ve vnesh'e sahip bloklarda orantılı bir artışa neden olmaz (kayan elemanlar, ebeveynlerinin veya başka bir deyişle kapların yüksekliğini etkilemez), bu da içeriğin sürüneceği anlamına gelir. altbilgiye girer ve genellikle sınırların dışına çıkar. Bela.

Ancak, herhangi bir içerik içermeyen (ve dolayısıyla web sayfasında görünmeyecek) ve bu olayı ortadan kaldırmak için özel olarak tasarlanmış podporka kimliğine sahip dördüncü bir blok öğemiz var. obdhiy.css kodunda bu seçici için basit bir kural yazacağız. Sonuç olarak, podporka kimliğine sahip blok, bizim için yararlı olan bir özellik kazanacaktır - önünde yüzen herhangi bir öğeyi dikkate alacaktır (yani, kodda yukarıda yer almaktadır).

O. içerik sağ veya sol sütunda arttığında, podporka kimliğine sahip öğe orantılı olarak aşağı doğru kaydırılır ve bu etiket artık yüzer değil, daha sonra vnutr ve vnesh kimliğine sahip bloklar bunu hesaba katacak ve boyutlarını dikey olarak orantılı olarak artıracaktır:

Şimdi her şey düzgün çalışıyor gibi görünüyor. Ancak site düzenimiz henüz bitmedi. Diyelim ki ana sayfanın düzenini index.html'de bu şekilde yaptık, ancak başka bir bölüm için düzen görünümünün farklı olması gerekecek(örneğin, üç değil, yalnızca iki sütun olmalıdır). Bu durumdan nasıl çıkılır?

Bunun için index.html'den farklı bir dosya kullanmanız gerektiği açıktır. Bunu yapmak için index.html içeriği yeni bir dosyaya kopyalanabilir, örneğin razdel.html, çünkü mevcut kodu yeniden yazmak, yeniden yazmaktan daha kolay olacaktır.

Pekala, basamaklı stil sayfalarına sahip yeni bir dosya kullanmamız gerekecek, örneğin, razdel.css. Tam olarak onlarda değişiklik yapacağız ve aynı zamanda tam olarak nasıl olduğunu daha ayrıntılı olarak göreceğiz. @import yönergesini kullanın Bu gibi durumlarda.

razdel.html ile başlayalım:

...

Sayfa Başlığı başlığını değiştirdik ve dahil edilen stil sayfasının adını razdel.css olarak değiştirdik. Bu durumda, elbette, bu stil biçimlendirme dosyasını CSS klasöründe oluşturmak gerekli olacaktır. index.html için, obdhiy.css dosyasından kuralları yüklemek için tek bir @import yönergesini içeren osnovnoy.css aracılığıyla stil işaretlemesini eklediğimizi hatırlatmaya cüret ediyorum:

@import url'si (obdhiy.css);

Akıllı milimizde orijinal olmayacağız ve yeni (hala boş) bir stil dosyasının en başında kesinlikle aynı yönergeyi yazacağız. Böylece tekrar üç sütunlu bir düzen elde edeceğiz, ancak biraz sonra sadece birkaç kural ekleyerek onu kolayca iki sütunlu bir düzene dönüştürebiliriz. O bile değil. CSS klasöründe dvekolonki.css isimli başka bir dosya ve aşağıdaki içeriği oluşturacağız:

#sağ (ekran: yok;) #center (sağ kenar boşluğu: 0;) #vnesh (arka plan resmi: yok;)

Ne yaptık? Kullanarak web sayfalarında doğru sütunun görüntülenmesini devre dışı bıraktık. Ayrıca orta sütunun sağ dış kenar boşluğunu da kaldırdık çünkü artık gerekli değil. Sonunda, aynı sağ sütunda arka plan resmini göstermeyi yasakladık. Genel olarak, bölüm düzenimizde bu sağ sütunu tamamen ortadan kaldırdık.

Şimdi, iki sütunlu düzenin düzenini tamamlamak için, yalnızca bu dvekolonki.css dosyasını razdel.css dosyasına bağlamak için kalır, bunun nihai içeriği şimdi şöyle görünecektir:

@import url'si (obdhiy.css); @import url'si (dvekolonki.css);

Aşağıdaki koddaki tüm kurallar (dvekolonki.css'den) daha yüksek bir önceliğe sahip olacaktır, bu da onların eylemlerini web sayfasında gözlemleyeceğiz demektir. Sonuç olarak, razdel.html'yi açtığınızda, zaten iki sütunlu bir düzen görebilirsiniz:

Aslında ek görevimiz seçenekleri değerlendirmekti. modern site düzeninde @import yönergesini kullanma ki, inanıyorum ki, bununla başa çıktık.

Şimdi sıra, yazının başında bahsettiğim @media yönergesinin nasıl çalıştığını göstermeye kalıyor. Düzen ile çok dolaylı bir ilişkisi vardır, ancak muhtemelen bundan bahsetmemek dar görüşlü olacaktır.

@media yönergesini kullanarak yazdırmak için yerleşim düzeni

@media yönergesi sizin için değil, herhangi bir grafiksel zevk ve gereksiz bilgi olmadan bir web sayfasını yazdırmak isteyen okuyucularınız için yararlı olabilir. Bu durumda, kullanıcıların yalnızca orta sütunda bulunan içeriğe ihtiyacı olacaktır. Üstbilgi, altbilgi, sol ve sağ sütunlara ihtiyacı yoktur - yalnızca makalenin metni.

Modern tarayıcılardan herhangi birinde baskıyı önizlerken, elbette arka planda baskıyı devre dışı bırakabilirsiniz, yani. renk tasarımı, ancak tarayıcı tahılları (içeriği) samandan (gezinme) her zaman ayıramayacak, bu yüzden şansa umut vermemek için ona bu konuda yardım etmemiz gerekecek.

Ek olarak, yazdırma, İnternet'i bu kadar popüler yapan ana şeyi - diğer sayfalara köprüler arasında gezinme yeteneğini - kaybedecektir. Kağıt üzerinde, tüm köprüler tamamen bilgilendirici olmayacak eğer önceden ilgilenmezsen. Üç sütunlu düzenimize köprüler ekleyelim ve bir web sayfası yazdırmaya çalıştığımızda nasıl göründüğüne bakalım.

Böylece, böyle bir web sayfasını yazdıran kullanıcı, hangi blogun hala en iyi olduğunu asla bilemez. hadi meşgul olalım baskı için düzen nüansları, ve daha önce bahsedilen @media yönergesi bu konuda bize yardımcı olacaktır.

Bu stillerin hangi aygıta uygulanacağını belirtmek için medyayı kullanmanın iki yolu vardır. Harici stil dosyalarının bağlı olduğu Bağlantı etiketinde medya özniteliğini belirtebilirsiniz. Ancak bu durumda, tarayıcı sunucuya fazladan bir istekte bulunacaktır ki bu iyi değildir. Ancak, bu yöntemin yaşam hakkı vardır ve bu rezalet şöyle görünecektir:

medya özelliği diğer değerler kullanılabilir:

1. all - varsayılan olarak kullanılır ve bu stil dosyasının kesinlikle herhangi bir çıktı aygıtı için kullanılması gerekeceği anlamına gelir.
2. braille - parmak okuyucular (körler veya görme engelliler için)
3. avuçiçi - PDA'lar, akıllı telefonlar ve diğer önemsiz şeyler
4. baskı - yazıcılar
5. ekran - sitenizi görüntüleyecekleri kullanıcıların monitörlerinin ekranları
6. konuşma - konuşma tarayıcıları
7. projeksiyon - projektörler
8. tty - boyutu piksel olarak kullanamayacağınız teletipler ve diğer önemsiz şeyler
9. tv - eski güzel televizyon

Yukarıdaki örnekte, Media özniteliğini kullanarak, monitörde görüntülemek için web belgesine ayrı bir stil dosyası ve yazdırma için ayrı bir stil dosyası (print.css) bağladık. Bu, bu yerleşim eğitiminde tam olarak uygulamamız gereken şeydir, ancak bunu stil sayfasında yazılan @media yönergesini kullanarak biraz farklı bir şekilde yapmak daha iyi olur.

Dikkat ettiyseniz, seçtiğimiz bu tür düzen ile (@import kullanarak), her zaman aynı yönerge ile bağlanan ortak bir stil dosyamız var - obdhiy.css. Onun içinde, çağrıştırmaya başlayacağız.

@media'nın kendi sözdizimi vardır:

@medya ekranı, tv (yalnızca web sayfası hemen yukarıda belirtilen cihazlarda görüntülendiğinde yürütülecek, virgülle ayrılmış bir dizi seçici ve kural)

obdhiy.css dosyamızda mevcut tüm kuralları @media ekran yönergesinin içine almayacağız, en sonunda kullanarak bir belgeyi yazdırmak için gerekli CSS kurallarını eklemeniz yeterlidir. @medya baskısı:

@media print (* (renk: # 000! önemli; arka plan: şeffaf! önemli;) html (font: 10pt serif;) #footer, #header, #left, #right (ekran: yok;) #center (kenar boşluğu: 0;) a: after (içerik: "(" attr (href) ")";))

Hatırlarsanız, * seçici, Html kodunun kesinlikle tüm öğeleri için tüm bu stil kurallarını uygulamak anlamına gelir. Doğru, böyle bir seçici mümkün olan en düşük önceliğe sahiptir, bu nedenle, renk ve arka plan kurallarını kullanarak tüm öğelerin rengini siyah ve arka planı saydam olarak ayarlayarak, ayarı kullanarak konuları öncelikler sayısına getirmemeliyiz. .

Html seçici için varsayılan yazı tipi ayarını şuraya kaydettik, çünkü bu yazıcı için daha nettir. Yazı tipi herhangi bir serif olarak ayarlandı. display: none kullanarak, gövde kitinin (üstbilgi, altbilgi ve sütunlar) gösterimini devre dışı bıraktık ve kenar boşluğu: 0 kullanarak, orta sütundaki içeriğin genişlikteki tüm kullanılabilir alanı kaplamasına izin verdik.

Son seçici bir: sonra zor ve tam olarak neden bahsettiğini daha iyi anlamak için, () ve hakkında aşağıdaki yayınları gözden geçirmenizi tavsiye ederim. Ama buna oldukça basit bir amaç için ihtiyacımız var - kağıda tam olarak köprülerin nereye gittiğini görün.

After sözde öğesi, tarayıcı belgeyi oluştururken içerik oluşturmaya izin verir. After, bu bağlantının eklendiği yerden hemen sonra köprünün URL adresini eklememize izin verir. Bu, yalnızca iki sözde öğe için çalışan özel bir CSS içerik kuralı kullanılarak yapılır: after ve Before.