Tabsiz jadvallar Yangi dizayn chegaralarini oching
Jadvallarni tartibga solish uchun ko'pgina sabablar mavjud. Foydalanuvchilarning foydalanishni davom ettirish uchun beradigan eng ko'p sabablaridan biri bu CSS yordamida tartibni yaratish qiyinligi sababli. CSS-ning skripti o'rganishning egri chizig'ini talab qilsa-da, siz CSS-nizomni qanday qilishni tushunsangiz, qanchalik oson bo'lishi mumkinligiga hayron bo'lishingiz mumkin. Va yana bir bor o'rganganingizdan so'ng, CSS-dan foydalanmaslik uchun odamlarning ikkinchi eng ko'p tarqalgan sababini ko'rib chiqasiz: "Jadvallarni yozish tezroq". Tezroq bilasiz, chunki siz jadvallarni bilasiz, biroq CSS-ni o'rganganingizdan so'ng, bilan.
Brauzerni CSS joylashishni aniqlash
CSS-ni joylashtirish barcha zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi. Agar siz Netscape 4 yoki Internet Explorer 4 uchun sayt yaratmasangiz, o'quvchilaringiz sizning CSS-da joylashgan veb-sahifalarni ko'rishda muammo bo'lmasligi kerak.
Sahifani qanday yaratishingiz mumkinligini o'ylab ko'ring
Jadvallarni ishlatib, saytni yaratganingizda jadvalli formatda o'ylashingiz kerak. Boshqacha aytganda, siz hujayra, satrlar va ustunlar haqida o'ylayapsiz. Veb-sahifalaringiz ushbu yondashuvni aks ettiradi. Siz CSS joylashishni aniqlash dizayniga o'tayotganingizda, kontent mazmuniga qarab sahifalaringizni o'ylashni boshlaysiz, chunki kontent siz xohlagan joyga joylashtirilishi mumkin, hatto boshqa kontentning yuqori qismida ham bo'lishi mumkin.
Turli veb-saytlar turli tuzilmalarga ega. Samarali sahifani yaratish uchun unga berilgan kontentni belgilashdan oldin har qanday sahifaning strukturasini baholang. Misol sahifasida besh alohida bo'lim bo'lishi mumkin:
- Sarlavha . Banner reklamasi, sayt nomi, navigatsiya havolalari, maqola sarlavhasi va boshqa bir qancha narsalar.
- O'ng ustun . Ushbu sahifaning o'ng tomonida qidiruv qutisi, reklamalar, video qutilar va xarid qilish joylari mavjud.
- Kontent . Maqolaning matni, blog yozuvi yoki xarid qilish vositasi - sahifadagi go'sht kartoshkasi.
- Inline reklamalar . Kontent ichidagi reklamalar.
- Olmashlar . Pastki navigatsiya, mualliflik ma`lumotlari, mualliflik huquqi ma`lumotlari, pastki banner reklamalari va tegishli havolalar.
Ushbu besh elementni stolga qo'yishdan ko'ra, tarkibning turli qismlarini aniqlash uchun HTML5 qismli elementlardan foydalaning va keyin tarkib tarkibini sahifaga joylashtirish uchun CSS joylashuvidan foydalaning.
Sizning kontent bo'limlarini aniqlash
Saytingizning turli xil tarkibiy qismlarini aniqlaganingizdan so'ng ularni HTML-ga yozishingiz kerak. Odatda, sizning bo'limlaringizni har qanday tartibda joylashtirishingiz mumkin, lekin sizning sahifangizning eng muhim qismlarini joylashtirish yaxshi bo'ladi. Ushbu yondashuv qidiruv tizimini optimallashtirishga yordam beradi.
Joylashuvni namoyish qilish uchun uchta ustunli, ammo bosh yoki pastki satr bo'lmagan sahifani ko'rsating. O'zingiz yoqtirgan tartibni yaratish uchun joylashishni aniqlashdan foydalanishingiz mumkin.
Uch ustunli tartib uchun uchta bo'limni belgilang: chap ustun, o'ng ustun va kontent.
Ushbu bo'limlar tarkib uchun "ARTICLE" elementi va ikkita ustun uchun ikkita bo'lim elementidan foydalanilgan holda yaratiladi. Har bir narsa, uni identifikatsiya qilish xususiyatiga ega bo'ladi. Id identifikatoridan foydalanganda, har bir ID uchun yagona nomni kiritishingiz kerak.
Tarkibni joylashtirish
CSS-dan foydalanib, sizning ID raqamlaringiz uchun manzilni belgilang. Joylashuv ma'lumotlarini bunday chaqiriqqa saqlang:
#content {
}
Ushbu elementlar ichidagi kontent hozirgi manzilning yoki sahifaning kengligining 100 foizini tashkil etadigan darajada ko'proq joy egallaydi. Bir qismning joylashuvini joylashtirilishiga ta'sir qilmaslik uchun uni bo'shliqqa yoki chekka chiziq xususiyatlarini o'zgartiring.
Ushbu tartib uchun, ikki ustunni sobit kengliklarga o'rnating va keyin ularning o'rnini mutlaq qilib qo'ying, shunda ular HTMLda qaerda joylashganligidan ta'sirlanmaydi.
# chap-ustun {
Lavozim: mutlaq;
chap: 0;
kengligi: 150px;
margin-left: 10px;
margin-to'p: 20px;
rang: # 000000;
padding: 3px;
}
# o'ng ustun {
Lavozim: mutlaq;
chapda: 80%;
tepada: 20px;
kengligi: 140px;
padding-left: 10px;
z-indeksi: 3;
rang: # 000000;
padding: 3px;
}
Keyin kontent maydoni uchun, chekkalari o'ng va chapga o'rnating va shunday qilib kontent ikkita tashqi ustunni örtmemelidir.
#content {
tepada: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
rang: # 000000;
}
HTML-jadval o'rniga CSS-ni ishlatib sahifaingizni belgilash biroz ko'proq texnik ko'nikma talab qiladi, ammo to'lov sizning sahifangizga tuzilmaviy o'zgarishlar qilishda yanada moslashuvchan va sezgir dizaynlardan va qulaylikdan kelib chiqadi.