Siteleri tasarlarken genellikle temel bir soruyu çözmeniz gerekir: Farklı ekran çözünürlükleriyle açıldığında sayfanın davranışı ne olacak? Burada iki seçenek vardır - "kauçuk" (germe) site sayfaları veya statik. İlk seçenek tartışılacaktır. Yerleşim tercihiniz ne olursa olsun, esnek tasarımın ana ilkesi göreceli ölçeklenebilirliktir.
Bu gerekli
- - HTML bilgisi;
- - html kodunu düzenlemek için program.
Talimatlar
Aşama 1
Ana işaretlemeyi yansıtacak olan site şablonunuz için ana dosyayı seçin. index.html veya index.php dosyası olabilir. En iyi görsel site şablonu düzenleme yazılımlarından biri Macromedia Dreamweawer'dır. Gerekli düzenleme bu program bazında yapılacaktır.
Şablon dosyasını açın veya "Dosya" - "Yeni", kategori - "Temel sayfa" - "HTML" veya "Dinamik sayfa" - "PHP" komutunu kullanarak yeni bir tane oluşturun. Burada, site yapısının tam olarak iki dosyadan birine kaydedildiği genel durumu ele alıyoruz.
Adım 2
Masalarda, div bloklarında ve birleşik (aynı anda tablolar ve bloklar) olmak üzere farklı düzen türlerinin olduğu uzun zamandır bir sır değildir. Tablo düzeninden html etiketi sorumludur.
Her özellik için bir yüzde (%100) belirtin. Bu, herhangi bir geometriye sahip ekranlarda otomatik olarak uzanan tablo hücrelerinin etkisini elde edecektir. 19 inçlik bir monitör veya akıllı telefon olabilir - her biri içeriği doğru şekilde yeniden üretecektir.
Aşama 3
Tablo hücreleri arasındaki yazışmayı tam olarak belirtmeniz gerekiyorsa, aşağıdaki örneği kullanın:
| … … 1. hücrenin içeriği. … | … … 2. hücrenin içeriği. … |
Burada, hücrelerden birinin, tablonun kendisi için tanımlanan her şeyin %30'u genişliğinde belirtildiğini göreceksiniz. Basit bir hesaplama, ikinci hücre için %100 - %30 = %70'in kaldığını gösterir. Bu durumda tablo hücrelerinden birinin genişlik özniteliğine sahip olmaması gerektiğini unutmayın. Tarayıcı tüm hesaplamaları kendi başına yapacak ve tabloyu hücrelerle doğru bir şekilde uzatacaktır. Tabloların içindeki içerik de farklı ekranlarda doğru şekilde esneyecek ve küçülecektir.
4. Adım
Div düzenine sahip bir durumda, etiket blokları varsayılan olarak ekranın tam genişliğine kadar uzatılır ve soldan sağa, yukarıdan aşağıya doğru birbiri ardına takip edilir. Geometrilerini iyileştirmek için, örneğin niteliklerini ve / veya kutunun (Kutu) boyut ve konum kategorisi için belirttiğiniz bir CCS sınıfı veya tanımlayıcısı (ID) oluşturun. Belirtilen stili site işaretleme dosyasına bağlamayı ve sınıfı (ID) istenen etikete bağlamayı unutmayın. Genellikle betiğin en başına yerleştirilir ve gelecekteki tüm site geometrisini tanımlar:
… … site içeriği. …
Veya bunun gibi:
… … site içeriği. …
CSS kuralının kodu aşağıdaki gibi olacaktır:
… sınıfım {
genişlik: %30;
yükseklik: %50;
}
#benim kimliğim {
genişlik: %30;
yükseklik: %50;
}
