Internet Derazalar Android
Kengaytirmoq

Sahifada podvalni yaratish uchun pastki yorliqdan foydalanish. Sizning qo'llaringiz bilan qayoqingiz bilan to'ldirilgan

To'liq bezatilgan veb-saytlarga foydalaniladigan har bir kishi sahifaning pastki qismiga "mixlangan" (yopishqoq, yopishqoq) paydo bo'lishini afzal ko'radi. Ammo Internetda ikkita muammo bor: infektsiyali kirish maydonlari va yaroqsiz (derazaning pastki qismiga). Masalan, habrahobr.ru/supts/suffials-ning qisqa sahifasini ochganimizda, u erda ko'rish oynasining pastki qismida joylashganligini darhol urib, o'rtada va hatto yuqori qismida pastda bo'sh bo'lganda.

Shunday qilib, o'rniga.
Ajam vertekserlar uchun ushbu qo'llanma 45 daqiqada kamchiliklarni qanday qilib kamchiliklarni hal qilish uchun, hatto Habr kabi obro'li nashrni amalga oshirish, hatto u bilan istiqbolli loyihaning amalga oshishi sifatida olib borish.

Keling, tarmoqdan olingan mixli izchining bir turini bajarishga nazar tashlaymiz va nima bo'layotganini tushunishga harakat qilaylik. CSS-RICS.com/Snipippet/css/sticky-footer
CSS:
* (Marja: 0; pljcingding: 0;) HTML, Tana, # HUPAP; MINT; MIN; MIN;) #molin (pladding-pastki; 150px; ) / * Belgisi * / #footer (pozitsiyasi) kabi balandlik bo'lishi kerak (pozitsiyasi; -15px; 150px; aniq:) / * Tozalash * / .CLARIFIX: Oradan keyin (kontlej: »displey: Blok; 0; IE-Mac \\ * / * HTML-dan yashiradi. Councrix (balandligi: 1%;) .clomafix (displey: blok; blok;) / * IE-Mac-dan yashirish * /
HTML:

Har kimning deyarli, hatto CSSni bilish, ushbu kodga qarab, printsiplarda ko'rib chiqadi va murakkab loyihani ishonchli tarzda boshqaradi. Yon tomonda biron bir qadam yon ta'sirga olib keladi. Quyida navbatda o'ylash va uning asosida CSS qoidalari bilan yanada tushunish uchun mo'ljallangan.

Keling, nazariyadan boshlaylik

Mixlangan aspirerning odatiy amalga oshirilishi CSS2 uchun noyob mulkka asoslanadi, bu elementlar to'g'ridan-to'g'ri avlodlardir Tana. - foiz balandligini qo'llab-quvvatlash ( balandligi: 100% yoki boshqa ota-onasi, agar ularning ota-onalari yorliqdan boshlanadigan derazaga nisbatan derazaga nisbatan HTML.. Ilgari, shifokorlarsiz va endi savollarning foiz balandligi har qanday darajadagi va zamonaviy shifokorlarda, faqat foiz elementlari bo'yicha qo'llab-quvvatlanadi. Shuning uchun, agar biz tarkibiy qismni qilsak (uni chaqiraylik) #layot) 100% balandlikka ega bo'lsa, u deraza bo'lgandek aylantiriladi. Hamma (oqim) unga joylashtiriladi, Futur va ehtimol Heer.

Ushbu blokdan keyin hammasi joylashtirilgan va uni balandligi 0 pikselga aylantiradi. Umuman olganda, siz kuzatishingiz mumkin #layot Ko'p bloklar sifatida joylashtiring, ammo ularning barchasi balandligi 0 piksel yoki hujjat oqimi tashqarisida bo'lishi kerak (emas lavozimi: statik.). Va odatda foydalanishda yana bir muhim e'tibor mavjud. 0 balandligi kerak emas. Siz sobit balandligini, balki asosiy qismdan mulk hisobidan olib tashlash uchun asosiy bo'limni amalga oshirishingiz mumkin. marja-pastki: - (balandligi);.

Inson tili bilan gaplashganda, uslublar pastki qismida bo'sh "cho'ntagida", u doimo derazaning pastki chegarasiga yoki derazaning pastki chegarasiga tushadi yoki ulangan bo'lsa Hujjat oynaning balandligidan yuqori. Internetda va Xabrenada ko'plab brauzerlarda turli xil muvaffaqiyatli ish bilan shug'ullanadiganlar ko'p. Biz uni "ishchi ish" sifatida ishlatishni o'zingiz qurishda davom etamiz.

Blokning pastki qismidan beri #layot - Bu cho'ntak, u ombor ob'ektlarini ko'rsatmaydigan bo'sh bo'lishi kerak. Va bu erda biz boshqa cheklov bilan uchrashamiz - biz bo'sh cho'ntagida mablag 'qilolmaymiz plomba ichida #layotChunki keyin u 100% dan oshadi. I I. ni qutqarmaydi. marja. - Xo'sh, bo'shliqni amalga oshirilayotgan elementlarning xususiyatlari bilan amalga oshirilishi kerak. Bundan tashqari, suzuvchi elementlar chegarasi chegara ostida bo'lishini ta'minlash, masalan, blok bilan amalga oshiriladi

qayerda .clby (aniq: ikkalasi ham). Bu juda muhim yoki bu " balandlik"Bu yahudiy emas yoki bir xil nisbiy bo'linmalarda yoki biz uni sahifani o'zgartirish jarayonida hisoblab chiqamiz. Odatda ushbu chizma blokini kerakli balandlikni o'rnatish bilan birlashtirish qulay.

Keling, bizning tajribamizning sahifalarining tuzilishini ko'rib chiqaylik. Buning uchun, chashka derazasini yoki shunga o'xshash oynani (ishlab chiqaruvchi asboblari (ishlab chiqaruvchi asboblari (CTRL-F12)) Chromda ochib berish oson.

... Eng yaxshi reklama blok ...

Ishchiga murojaat qilaylik

Nimasan ko'rinyapsiz qatlamlarning kamchiliklari Mixlangan harfning ta'sirini amalga oshirish nuqtai nazaridan? Biz buni ko'ramiz
1) Saytning pastki qismida ID \u003d maksimal balandlikda joylashgan. Nazariyga ko'ra, u, ota-onalar va tarkibiy blok. Hard-chap chap rang uzunligi 100% ni qo'yish kerak. Ikkinchisi bilan bog'liq muammolar paydo bo'ladi - bu buning uchun moslashtirilmaydi. Binobarin, taxmin qilingan blok yoki alomat darajasi darajasi etarli emas. Bundan tashqari,
2) Xafagarchilik o'zgaruvchisi (ro'yxatdagi narsalar va shrift hajmidagi narsalar soniga bog'liq, u HTML-dan, balki CSS-dan ko'rinmaydi). Va
3) ustida #layot 90px balandligi balandligi ko'rsatilgan reklama birligi mavjud;
4) Blokda ham, na (umuman gapiradigan) tekislikdagi bloklar yo'q #layot (Blokning tepasida .Roted_posts.; Biroq, ehtimol u futur bilan bog'liq bo'lishi kerak).

4-band - Siz skriptni chizishingiz kerak.
Aniqlash uchun uchinchi nuqta, shunchaki #layout (-90px) qo'shib tuyuladi, lekin bu blokni bosadiganlar yoki reklama beruvchilar tomonidan e'lon qilinmasligini hal qilishini unutmang . Bu bo'lmagan sahifalar soni ko'p. Shuning uchun, giyohvandlik marjali. Reklama blokidan - yomon fikr. Yaxshisi - ichkariga joylashtiring #layot - Unday bo'lsa, u hech narsaga xalaqit bermaydi.

Birinchi mahsulot odatda daromadli ravishda tug'ilishi kerak, u homila birligini ostiga qo'yish kerak #layot. Biroq, JavaScript bilan siz boshqa tarqalgan narsalarning sxemalarini amalga oshirishingiz mumkin, ammo har qanday holatda sizga JS yoki dastlabki tartib kerak.

Saytning eng so'nggi feloxeridan kuchliroq bo'lolmaymiz, chunki tarkib ichidagi botqoqni "kiritish" dan ko'ra "kiritilmasak, keyingi saytga to'g'ri joylashtirish g'oyasini qoldiring (bu" salqin " Xabra!) Va, shuningdek, Habr to'g'ri maqomga JavaScript (foydalanuvchi skript) ni tarqatadi. (Men darhol aytaman, men pegigurist emas, otishni va sayt turini ayblamayman, albatta, loyihalarni boshqarishning strategik qarorini belgilamayman. Chunki biz idealga etib bormaymiz, chunki Birinchi ikkinchi Ikkinchi ikki ikkitasi, sahifani yuklab olish jarayonida tartibsiz tartibda bo'ladi. Ammo biz uchun tushuncha va "Aytishnikov" dunyoning eng mashhur veb-saytidan oshib ketish imkoniyati.

Shuning uchun, skriptning istalgan joyda (sahifaning oxirida) biz Reklama va Futurni istalgan joylarga o'tkazamiz. (Foydalanuvchi skriptlari tufayli eritma tozadan ko'ra qiyinroq bo'ladi.)
Var Topl \u003d DQ ni kamaytirish uchun Var Topl \u003d DQ ("# tartib"), Lorat \u003d DQ ("# belgisi") ni kamaytirish uchun ); Agar (Topl && Lead) // banner - LayinBefore Cents bloki (O't oyi, Lay.Firsstchild); Agar (&& & & & & & Lay.NextSiBling) bo'lsa, // uzating Layer.prientnode.inoderbecore (pastki, yotqizish);
Bloklarni joylarga joylashtiring - agar kerakli xususiyatlarni buyumlarga tayinlashi davom etmoqda. Futorning balandligi talab qilinishi kerak, chunki biz uni "Sahifaning oxiri tugashi" deb ataganimiz uchun talab qilinadi (sahifaning oxiri). Foydalanuvchi ish joyi tufayli yuqorida aytib o'tilganidek, sahifada batrent ko'rgazmasining sayohati muqarrar. Siz "yaxshi yuz" ni yaratishga harakat qila olasizmi, ammo "yomon o'yin" bilanmi? Nima uchun? Saytning "yomon o'yin" sizga yuqori ishtiyoqsiz kontseptsiyani amalga oshirishga imkon beradi, bu uning loyihasi bo'yicha sifatni baholash uchun etarli va "to'g'ri o'yin" bilan talab qilinmaydi.
if (oyoq) (// ekvalayzer

"H.Appnd_el" (CLSS: "Aniq", Appendto: Appendto: Var Foogote \u003d Oyoq.ofseTheight; // ... va olmashlari balandligi o'lchash), agar (YukarıyaL && Lay && Footer && Lay.NextSibling) mazmuni ( "Leiaut" istalgan balandligi (// Alignment blok) H.APND_EL ((ta EKMlariga: "ochiq ", CSS :( balandligi: (foth ||) +" px "), Appendto:" 100% ";" 100% ";" # tartibda: - - " + Foto + "px! Muhim" HTML, tana (balandligi: 100%) ")
Bu erda o'z-o'zidan yozma funktsiyani qo'llashga imkon berdi h.apnd_el.JQuery bilan bir xil qilish -
$("
") .Cs ((Balandlik: Foto :| 0)). Appendto ($ (pastki yoki))
Va bundan tashqari - CSS qoidalarini amalga oshirishning yana bir odatiy funktsiyasi - h.Addules.. Bu erda u qilolmaydi, chunki siz qoidani e'lon qilishingiz kerak " ! Muhim."- shunchaki foydalanuvchi skriptidan uslublarning ustuvor yo'nalishlari tufayli.

Ushbu kodlar bilan biz foydalanuvchi skriptidagi (pastga sakrashdan keyin) ni soqol olishingiz mumkin (pastga sakrashdan keyin) va sahifalarni qanday yaratishni to'liq anglay olamiz. Har kuni sakrash dizaynidan foydalaning - yoqimsiz, shuning uchun uni namoyish va sinovdan o'tkazish tavsiya etiladi. Xabraja foydalanuvchisi skriptida men "Powouter" konfiguratsiyasi bilan uni yopish orqali shunga o'xshash skriptni o'rnatdim ("Powouter" konfiguratsiyasi bilan sozlash ("Power-ning pastki qismiga mixlash" ni o'rnatdim. 0.883_2012-09 versiyasidan boshlab -12.

Agar ular o'rnatilgan bo'lsa, zencomment uslubini yangilash zarurati? Ha, ta'sir qiladi. Foydalanuvchi tomonidan kiritilgan uslublar shunchalik ustuvor bo'lgan uslublar tarmog'i tufayli, men foydalanuvchini to'g'ri tuzatishga majbur bo'ldim qobiliyat Tirnoqli futbol bilan ishlaydi. Agar siz foydalanuvchini yangilamagan bo'lsangiz (2.66_2012-2009-12 gacha) - alpida ishlamaydi.

To'smoq rotlangan_post. (O'tmishdagi uchta ommaviy xabarlar) alkog'iga mantiqiy ko'rinadi, shuning uchun haqiqiy skriptda shuningdek, u ham looksga o'tkaziladi.

Ikkinchi element (lichhonning kamchiliklari ro'yxatidan) - mulohazalar faqat Xabra uchun (ko'chirish va qisman takrorlamaydi).

Sahifalar sof CSS-da mixlangan idishga xalaqit beradigan muammolar mavjud, bu brauzerdagi standart shrift hajmiga qarab aniqlangan botqoq balandligidir. CSS-larda Faperni amalga oshirish uchun siz shriftlarning nisbiy balandligini tanlashingiz kerak, ammo agar foydalanuvchi kompyuterida foydalanuvchining kompyuterida berilmasa, ular ishlamasligi mumkin. Shuning uchun echimda o'tish (o'tishi) ning taxminiy holatida, uni aniqlik bilan va aniq ko'rinishga ega bo'lishi mumkin bo'lgan JavaScript kiritilishi kerak. Yoki turli platformalar bo'yicha foydalanuvchi skriptida qabul qilingan qarorning tavba qilinganini hisoblash, birinchi kuzatuvlar shuni ko'rsatadiki, eritma amaliy.

Xulosa: XayRe tartibini to'liq tartibga solish mumkin, ammo buning uchun siz to'g'ri tartibda bloklangan tartibning xatti-harakatlarini aniq tushunishingiz mumkin. (Endi tayanch va yuqori banner "bu erda emas" va unday emas, chunki bu shunchaki uslublar shunchaki harakatsiz bo'lishingiz mumkin emas. shrift noaniqligida.

Savdo

Agar sizda habrajax 0.883+ bo'lsa, biz "ikkalasi ham" ishini ko'ramiz. U balandlikdagi balandliklarni moslashtiradi. Bu sizga eng yaxshi sahifalar odatdagi nuqtaga qaraganda, qancha yaxshi sahifalar mavjudligini baholashga imkon beradi. Zencmment foydalanuvchilari skriptlarga mos keladi, ammo mixlangan izchining to'g'ri ishlashi uchun siz Zencmment 2.66_2012-09-12 + versiyasini o'rnatishingiz kerak.

Amalga oshirishning xatti-harakati haqidagi faktlar

Shamanizm, oyoq, uslublar va skriptlar bo'lgan shamanizmdir (faqat nazariya bilan mustahkamlangan). Turli xil brauzerlarda, ozgina boshqacha xatti-harakatlar, ammo ba'zi joylarda - kutilmagan. Foydalanuvchi skriptlari va o'rnatilgan bloklarsiz natijalar boshqa bo'ladi. Foydalanuvchi bo'yicha amalga oshirilayotgan tajriba keltirilgan.

1) Firefox - bu uchinchi oyoqqa sakrashning etishmasligi. Ular bunday emas - chizig'i quyidagi tomonga joylashtirishdan keyin paydo bo'ladi.

2) Chrom - u "bo'ronli aylantirish" sahifasiga - sekundiga, bo'sh joylarga bo'sh joylar qo'shiladi, pastki qismida bo'sh joylar qo'shiladi - bu balandliklarni hisoblash bilan bog'liq. U foydalanuvchiga belgilangan HTML, tana (balandligi: 100%) bilan davolanadi, ammo har doim ishlayotgan kafolatlarsiz. Ishonchli - hujjat balandligidagi derazadan oshmaganligini tekshiring va agar u oshmasa, undan foydalaning, aks holda hech narsa. Sakrash bilan - hamma narsa tartibda, u.

3) Sahifaning birinchi yuklanganida (v. 12.02) opera (v. 12.02). Ammo shoshilinch qayta yoqish hopni ko'rsatishi mumkin. Qolganlari fxdan kam emas.

Shunga kelsak, ular xromni to'g'ri (skript) va ushbu shaklda berish uchun o'rgatishlari kerak, bu shaklda ko'rib chiqish uchun versiyani chiqarib oling. Shuning uchun foydalanuvchidagi fitna maqolaga qaraganda biroz murakkabroq.

Shuni eslatib o'tish kerakki, bu to'liq amalga oshirish emas - masalan, foydalanuvchi tomonidan qayta ishlangan oyna holatlari hisobga olinmaydi. Siz topilgunga qadar va undan keyin va undan keyin ham, undan keyin, mantig'i noqulayliklarga olib kelmaydigan muvaffaqiyatsizliklarni keltirib chiqaradigan xatolarni boshdan kechirishingiz mumkin. Kamchiliklar ongli ravishda tashlab ketilmoqda, chunki takomillashtirishning murakkabligi va qarorning muddati kuzatilmoqda.

Natijada, u hech bo'lmaganda tezkor kompyuterlar uchun ishning samarali sxemasi bo'lib o'tdi. Agar noto'g'ri xatti-harakatlar aniqlansa, "osti boylik" konfiguratsiyasi o'chirilishi kerak.

Qaysi sahifalar uchun foydali?

Standart saytda, UstRil-da, hatto qisqa javoblar sahifalari 1500px dan oshadi, bu ko'p hollarda gorizontal ravishda joylashtirilgan monitorlar bilan. Ammo an'anaviy monitorlar ham, taxminan 1300 piksellarning shaxsiy sahifalari tez-tez 1300 piksel bo'lib, u erda butun shon-shuhratda paydo bo'lgan. Foydalanuvchi sozlamalarida juda uzoq va bir nechta sahifalar emas.

Agar siz Zencomment UstiRI-dan foydalansangiz, ular kerakli sahifadagi balandlikni sekinlashtiradilar va Xabraja foydalanuvchisining skripti Sidbarda ba'zi yoki yon bloklarini ko'rsatmasligi mumkin. Shuning uchun, skriptlar va uslublar bilan hiyla-nayrang bo'lmaganning ta'siri sezilarli darajada kuzatiladi. Shuning uchun, Xabrajaxda birinchi marta paydo bo'lganligi haqida ma'lumotga ega. Ammo odatiy joy, mixlangan oyoqning foydali bo'lishi mumkin bo'lgan bir qator sahifalar mavjud.

Qo'llab-quvvatlaydimi?

O'tgan yil davomida saytning xatti-harakati shuni ko'rsatadiki, ishlab chiquvchilar (va shuning uchun etakchilik) ilgari mavjud bo'lgan imkoni va Usershesda mavjud bo'lgan imkoniyatlarni amalga oshira boshladilar. Masalan, yil boshida men ko'plab kichik tilaklarni to'plaganimda yozdim. Olti oy ichida men unga qaytib keldim va mamnuniyat bilan belgilandim (matnda o'ngda), siz saytga tilaklar allaqachon kiritilgan deb ta'riflangan bir qator imkoniyatlar ko'rsatilgan.

Keyin sharhlarni baholash uchun kvadratlar o'rniga "o'qlar" ga qarang. Ular 3 yil oldin Olmalxa foydalanuvchi ("Pretettifer") da, 2 yil oldin qabul qilingan. 2-3 oy oldin ular saytda paydo bo'ldi. Biroz vaqtdan keyin o'qlarni ma'lum bir masofada ajratishiga ishonishni boshlaydi, chunki zencomamda (ikkinchi o'ng tomonning chap tomonidagi bitta o'qni, ikkinchi o'ng tomonda).

Shuning uchun, ehtimol, habrenadagi «mixlangan askarlar» bu bunday xayol emas, ular 3 yil oldin ko'rinishi mumkin.

Paydo bo'lgan habraja skriptidagi boshqa xususiyatlarso'nggi 3 oy ichida (Sozlamalarda uzish):
* Jamoatni kiritish maydonchalari (operada katta matnlarda sekinlashishi mumkin);
* haftaning kunlari "bugun" va "kecha" dan tashqari;
* Tasmadagi voqealar 1 qatorga va 2 ta belgidan iborat;
* "Habr *" so'zlarini "·" va "·" ga tushirish;
* Maqolani sanalari bo'yicha uchishlar - maqolada, maqolada u URL manziliga raqami bilan yuklangan.
* 2 so'zgacha bo'lgan "shunga o'xshash xabarlar" ni buraldi. "Shunga o'xshash xabarlar" ning skrinshoti (4 ta havola 4 ta emas).

Biz CMS-ni CMS-ni tahrirlash-tahririyatga bag'ishlangan beshinchi darsni boshlaymiz, bu safar biz sayt uchun tayanchigim haqida gaplashamiz. Biz uning yaratilishiga yo'l-yo'riq va ba'zi yondashuvlar uchun mumkin bo'lgan variantlarni tahlil qilamiz.

Oyoqqa nima

Saytning taxallusi yoki podvaliga ko'ra, uning eng past qismi, odatda, qoida tariqasida, mualliflik huquqi va hk. Shablonda standart ijro PakostarFokster hech qanday mazmunli ma'lumotlarni o'z ichiga olmaydi:

Standart foker tarkibi joriy yil, sayt nomi va "Top" havolasi sahifaning yuqori qismiga olib boradi. Rostini aytsam, Futretning ushbu versiyasi bizning saytimizga tashrif buyuruvchilar uchun befoyda bo'lib, bizning ishimizda "eng yaxshi" havolasi kerak emas, biz ushbu maqsadlar uchun chiroyli tugmachani oldik.

Shuning uchun, boshlash uchun men pastki qismning standart tarkibidan xalos bo'lishni taklif qilaman. Faylni oching index.php. Standart protostar shabloni va kiyim-kechak uchun javobgar bo'lgan kodni qidirish. Fresser chiqishi uchun kod 205 va 219 stringsiyalar o'rtasida mos keladi (Joomla versiyasiga qarab) quyidagilar (Joomla versiyasiga qarab va kod liniyalariga kiritilgan o'zgarishlar aniqlanishi mumkin):

Va endi 210 dan 217 gacha bo'lgan qo'shimcha kodni o'chirib tashlang, natijada Kodek uchun kod bo'ladi:

Aslida, biz faqat papkadagi ishlab chiqarish modullarini qoldirib, quyidagi barcha narsalarni olib tashladik, buning uchun satr javobgar:

Indeks faylini saqlang, saytga o'ting va sahifani yangilang. Jamchning mazmuni bunga erishdik. Endi siz o'z xohishingizga ko'ra, siz o'z xohishingizga ko'ra, siz o'z xohishingizga ko'ra, siz ham pastki adatiyorga yangi ma'lumot qo'shishingiz mumkin, ammo bu savolga javob berishdan oldin - "Pollavchining saytida nima bo'lishi mumkin?"

Saytning videosida qanday ma'lumot

Sayohatchilarni samarali qilish uchun u saytga tashrif buyuruvchilar bilan qiziqishi mumkin bo'lgan ma'lumotlar mavjud bo'lishi kerak. Sayt yo'nalishi bo'yicha ushbu ma'lumotlar farq qilishi mumkin. Bu erda pastki qismda keltirilgan ma'lumotlarning kichik misollari:

  • Qo'shimcha menyu - Ushbu menyu allaqachon mavjud bo'lgan yoki noyob bo'lishi mumkin. Pastki qismdagi mobil qurilmalardan, tashrif buyuruvchi, frek sahifasidan saytingizni mobil qurilmalardan, tashrif buyuruvchi, frek sahifasidan kirganingizda, menyuni poster-da takrorlash foydali bo'ladi.
  • Bog'lanish uchun ma'lumot - saytlarni sotish yoki turli xil xizmatlarni taqdim etadigan saytlar uchun aloqa ma'lumotlarining mavjudligi shunchaki zarur, ammo uning oldidagi joyda.
  • Ijtimoiy tarmoqlar tugmalari - Zamonaviy dunyoda, ko'plab odamlar uchun ijtimoiy tarmoqlar barchasi, shuning uchun bu ma'lumotlar ortiqcha bo'lmaydi.
  • Turli xil havolalar - Masalan, sayt xaritasi, Yangiliklar tasmasi va boshqalar.
  • Vidjetlar- Saytda aks etayotgan faoliyatni, davvatlarni hisobga olgan holda, yaqinda sharhlovchilar, so'nggi sharhlar va boshqalar.
  • Reklama- Men saytdan nafaqat uning mavjudligi, balki foyda ham olishni istagan payt juda oz vaqt bor, bu holda izdoshi reklama uchun yomon konteyner bo'lmasligi mumkin.

Saytning alogiga mos kelmasligingiz, yuqoridagilarning barchasi, uning yo'qligi kabi, haddan tashqari ma'lumotni haddan tashqari oshirib yuborish yaxshi narsalarga olib kelmaydi.

Boshqa tomondan, qaysi ma'lumot sizning saytning izdoshi, asosiy dizaynga mos keladigan va chiroyli bezatilgan.

Sayt uchun belgini yaratish

Endi nazariyani tashlaylik va to'g'ridan-to'g'ri altbilgining yaratilishiga o'ting. Fetrerni shakllantirish usullari bir necha bo'lishi mumkin:

  • Avtomatik- ma'lum bir ma'lumotlarni chiqarish uchun turli modullardan foydalanishni anglatadi
  • Qo'llanma- Modullar ishlatilmaydi, barcha o'zgarishlar shablon fayllarini tahrirlash orqali qo'lda amalga oshiriladi.
  • Aralashgan- Bunday holda, yuqoridagi ikkalasi ham ishlatiladi.

Har bir usullar o'z yo'lida yaxshi, masalan, dastlabki bosqichda modullardan foydalanish vazifani soddalashtiradi va modullar foydalanilmasa, sahifa yuklashni tezlashtiradi. Qanday bo'lmasin, tanlov siznikidir.

Barcha mumkin bo'lgan variantlarni ko'rib chiqish uchun men uchinchi versiyada tanlovimni to'xtataman. Shunday qilib, sizda ikkala tahrir qilingan narsada sizda umumiy fikr bo'ladi.

Misol sifatida, men uchta vertikal qismga ajratishga qaror qildim, Saytda ma'lum bir sayt sahifalariga havola qildim, markaz kichik matnni olib chiqish uchun mos keladigan logotipga tegishli bo'ladi. Patnachining chap va o'ng qismida, modullarga javob beriladi va logotip indeks faylida bosib chiqariladi.

Avvaliga biz ikkita bo'lakning sonida yangi modullar uchun yangi pozitsiyalarni yaratamiz (buni qanday qilish kerak, biz ikkala bo'lakdagi shablonlarni sozlash va tahrirlash va tahrirlash va tahrirlashda biz gapirdik). Ular pastki va o'ng tomonida joylashganligi sababli, ularda tegishli ismga ega bo'ladilar - oyoqlari chap. va to'g'ri. Biz ularni faylda e'lon qilamiz templlasedeAl.XML..

Endi biz shablon indeks fayliga o'zgartirishlar kiritamiz, mening kodim quyidagicha bo'ladi:

basturur. "Andoza /". $ bu-\u003e shablon. "/ //goom4all.png"?\u003e /\u003e

Va aniq skrinshot uchun:

Modullar odatda qanday aniq, ammo men logotipda batafsilroq to'xtashni xohlayman. Logotipning mahsuloti kodiga to'g'ri keladi:

basturur. "Andoza /". $ bu-\u003e shablon. "/ //goom4all.png"?\u003e /\u003e

Birinchi qarashda, rasm uchun odatdagi HTML yorlig'i, ammo odatiy fayl joylashuvining o'rniga PHP kodi yozilgan. Birinchi qarashdagi ushbu Kodeks murakkab va tushunarsiz bo'lib tuyulishi mumkin, ammo aslida u demontaj qilingan bo'lsa, unda murakkab narsa yo'qligi aniq bo'ladi:

  • - PHP kodini ishga tushiring
  • aks sado.- Chiziqning chiqish uchun javobgar
  • $ Bu-\u003e basodurl - Bu satr sayt nomini qaytaradi.
  • andoza / - Bu erda rasm shablonlar papkasida saqlanayotganini ko'rsatamiz
  • $ bu-\u003e shablon - Joriy shablon nomini qaytaradi
  • / Roimages/Joom4all.png. - shablonning ildiz jildidagi rasm va rasm bilan fayl nomi
  • ?> - PHP kodini tugatish

Ushbu PHP kodidan foydalanish natijasida biz rasm fayliga nisbatan nisbiy yo'lni olamiz. Boshqacha qilib aytganda, bu nomning saytda bo'ladi va shablon rasmidan foydalaniladigan rasmda tanlangan shablonning papkasidan olinadi.

Biz indeks.php faylini tejaymiz. Endi u yopilishi mumkin, bu biz uchun endi foydalidir.

Endi keling, yangi pozitsiyalarda olib qo'yilgan bir nechta modullarni yaratamiz. Birinchi modul menyuni va ikkinchi kichik matnda menyuni ko'rsatadi.

Keyingi bosqichda modullarni yarating - "Menyu" va "HTML Cod" turi (modul yaratish uchun) menyu uchun menyu uchun. Ularga nisbatan pozitsiya sifatida biz faqat yaratilgan modul pozitsiyalarini tanlaymiz:

Saytda qolgan menyu uchun menyuimizni ajratish uchun menyu modul sozlamalari "_footer" Soffiya qo'shing:

"HTML kodi" turidagi qanday modulni tushuntirish uchun men skrinshotdagi harakatlarining printsipini ko'rsataman:

Ushbu modulni odatiy matndan tashqari aniq matn bilan to'ldirdim, men joriy yilni ko'rsatadigan kichik PHP kodini yozdim:

Biz modullarni tejaymiz va natijani tekshirish uchun saytga boramiz va men bunga ega bo'ldim:

Natijada, ammo juda ta'sirli emas. Endi biz CSS-dan foydalanib, oyoqning elementlarini etarli darajada tartibga solishimiz kerak.

Yangi foker bloklarini chiqarishni boshlash:

Oyoq chap, .Foot-markaz (chapda; chapda; Faver-chap (kengligi) (kengligi) / * chap blokning kengligi * / .foot-markaz (marjasi) -Lakft: -6px;) likent * / .fact-o'ng (/ * to'g'ri blok * / suzish: yo'q; balandligi; balandligi; balandligi; balandligi;

Ro'yxatdan o'tish uchun navbatdagi nomzod quyidagi uslublarni qo'llagan menyu:

Ul.nav.menu_footer (marj: 0; 0;) * / ul.nav.menu_footer l. line lin: 18px;) Ul.item-179 A (/ * menyusi; rangi: # fc8f30; (/ * Menyusi * / rangi haqida: # 5AA426; chegara-engil # 5AA426;) (/ * menyusi) A Kontaktlar * / marjx; : 3px qattiq # 0F70AD; Rang: # 0F70AD;)

Va oxirida, quyidagi tarkibning asosiy qismidan asarni ajrating:

Oyoq.footer HR (chegara tegi: 3px qattiq # fc8f30;) / * pastki qismini asosiy tarkibdan ajrating * /

Uslub faylini saqlang, saytga o'ting va natijaga qarang:

Shunday qilib, biz bizning saytimiz uchun qadam yaratdik, bu standartdan ko'ra ko'proq qiziqarli ko'rinadi. Men ushbu darsni ushbu darsni ko'rib chiqaman va keyingi darsda biz mumkin bo'lgan dizayn xatolarini tekshiramiz va ba'zi kamchiliklarni tuzatamiz. Bundan tashqari, men sizga Joomla 3 shablonini qanday yaratish haqida maqolani va xususan jabhalardan dothrap bilan tezda yaratishni maslahat beraman.

Ushbu tegni sahifada bir necha marta oldingi teglar sifatida ishlatish mumkin. Ehtimol, siz allaqachon bu nomdan voz kechgansiz, u podvaldagi sahifadir. Uni hisoblash, mualliflik huquqi matnida saytga, aloqa ma'lumotlari va hk. Shuningdek, navigatsiya panelini () sahifaning podvaliga kiritish mumkin. Hech kim bunday yangi elementlarni chetga surish va bo'lim sifatida kiritishni taqiqlamaydi, lekin men buni sizning joyingizda qilmasdim.

va
Biz to'liq foydalanamiz!

Yangi belgi

Sayt sarlavhasi

№1 post

Bu erda biz birinchi xabar matni yozamiz.

2 raqami 2-raqam.

Bu erda biz ikkinchi post matnini yozamiz.

Pochta muallifi (maqolalar): Aleksandr Pobedinskiy

Bu erda odatda bu huquqlar himoyalangan. Yil I.T.P. Nusxa taqiqlangan)))

Natijada, quyidagi natija quyidagilar bo'lishi kerak:

Shu mis misdan, har bir maqola yoki lavozimlar o'z elementlariga ega bo'lishi mumkin.

va > Hujjat sahifalarining sarlavhasi va podvalidan qat'iy nazar. Bunday holatlarda, ushbu elementlar bir necha bor foydalanishlari mumkin. Garchi men ularga tashqi tomondan foydalanish mumkinligiga aminman.

Xo'sh, siz HTML5 ning asosiy tarkibiy tarkibiy elementlarini va quyidagi darslarni, boshqa HTML xususiyatlarida bo'lmagan turli xil shakllarni ko'rib chiqamiz!

Salom, aziz blogi o'quvchilari veb-sayti. Biz boshlangan va oldingi uchta maqolada boshlangan va davom etgan bloklarning tartib mavzusini davom ettiramiz. Aslida, biz ushbu ikki va uch ustunli tartibni yaratishga muvaffaq bo'ldik va hatto kauchuk makoni yaratish nuanslarini ko'rib chiqishga muvaffaq bo'ldik.

Bundan tashqari, sayt tartibiga bag'ishlangan birinchi maqolalarda, veb-karra ishlov berishning ba'zi asosiy tushunchalari, bu nuanslarni tushunish juda qiyin bo'lishini tushunmasdan ko'rib chiqildi.

Bizning saytimizda qanday muammolar paydo bo'ldi

Bugun biz ilgari yaratgan tartibda yuzaga keladigan bitta kichik muammoni hal qilishga harakat qilamiz. Ko'pincha, bu holat katta monitorlar (yuqori aniqlik bilan) va kam miqdordagi ma'lumotlar bilan sahifani ko'rsatganda sodir bo'ladi.

Bunday holda, Futer ekranni ekranning pastki qismiga bosmasligini, ammo deyarli balandlikda joylashgan bo'lib, ko'p hollarda u xunuk va estetik emas.

Shunga qaramay, menimcha, siz kerakli sayt tartibining pastki qismiga bosing va ayniqsa sahifaning balandligi foydalanuvchi ekranining balandligidan kamroq bo'lgan taqdirda bo'ladi. Sxaymatik tarzda taqdim etish mumkin:

Ular. Sahifadagi kichik bir ma'lumotlar uchun kelajakning to'g'ri xatti-harakati va katta foydalanuvchi ekrani quyidagicha bo'ladi:

Qanday qilib amalga oshirilayotgan narsa bo'lsa ham, siz bizning tartibimizning Kodeksi bilan bir qator manipulyatsiyani amalga oshirishingiz kerak. Bundan tashqari, biz nafaqat style.css uslubidagi CSS fayllariga, balki Indeks.html-da, HTML kodini shakllantirish va DV-bloklarni shakllantirishda o'zgartiramiz. Ammo birinchi navbatda.

Masalan, biz yaratgan uchta tortilgan sayt tartibini bizdan foydalanamiz. Shu bilan birga, indeks.html quyidagicha ko'rinadi:

Sarlavha

Sahifan tarkibi sahifasi Sahifa tarkibi Tarkibi tarkibi sahifasi

Va style.css faylida quyidagi CSS xususiyatlari buyuriladi:

Tana, HTML (marj: 0px; 0px;) #meket (800pcc; # c0cc0; # 00c0c0; kengligi: 200px ; Suzish: # chapda (kengligi: 200px; fon rang: to'g'ri;) # -mont-chap: 202px; o'rtada marjter: 202px;) #footer (Fon ranglari: # ffc0ff; aniq: ikkalasi;)

Xo'sh, tartibning o'zi shunday ko'rinardi:

Ko'rinib turibdiki, pastki qismi pastki qismga bosim o'tkazmaydi va shuning uchun bizning talablarimizni qondirmaydi (har doim pastki ustun ostida), shuning uchun siz kodga tuzatishlar kiritishingiz kerak. Xuddi shu narsa ikki yo'lak uchun va kauchuk tuzatish uchun amalga oshirilishi mumkin. Universal usul.

Qanday qilib tayanchning pastki qismiga qanday bosish kerak

Shunday qilib, biz Div idishini ekranning pastki qismigacha urishimiz kerak. Buning uchun siz avval butun sahifaning balandligini yuz foizga o'rnatishingiz kerak (u butun ekranni egallaydi). Asosiy blokni 100% gacha bo'lgan tartib bilan o'lchamini o'zgartirish uchun kerak bo'ladi.

Sayt sahifasining barcha mazmuni tana teglari ochilib, shuning uchun biz 100% balandligi ko'rsatilgan boshqa CSS-mulk uchun bizga yoqish kerak.

Tana, HTML (0px: 0px; pljcing: 0px; balandligi: 100%;);

Tashqi ko'rinishda, bu hali ta'sir qilmaydi, ammo endi asosiy blog ekranning butun balandligiga cho'zilishi mumkin. Ular. Bu turdagi tayyorgarlik bosqichi edi.

CSSning asosiy xususiyatlari, agar xohlasangiz, ko'rishingiz mumkin. Endi bizning butun reja tuzilgan Dda uchun konteynerni o'rnating, minimal balandligi 100%:

Men uni ham ajratib qo'ymoqchiman (DIV id \u003d "Maket"). Buning uchun unga tegishli chegara () mulkidan foydalanib, ramka so'rang:

Chegara mulki: Qattiq 3px black ushbu konteyner uchun qora rangdagi uchta pikselda qalin ramka (qattiq) qalinligini o'rnatishga imkon beradi. Bu sxeut bilan konteyner ekranning butun balandligiga cho'zilganligini aniq ko'rishga yordam beradi:

Endi biz umumiy konteynerni ko'tarish va uni quyida, odatdagidan keyin joylashtirishimiz kerak. Bu nima beradi? Va nihoyat aytilishicha, siz ignabargiday bo'lib turadi va eng uzun ustunga bosim o'tkazilmaydi. Bunday holda, indeks.html quyidagi shaklni oladi:

Sarlavha

Chap ustun menyusi Menyu menyusi
Sahifadik sahifasi tarkibi

E'tibor bering, uning paketlari hozirda umumiy idishga (muzet) ichida emas, shuning uchun uning kengligi uslubdagi Metet uchun belgilangan CSS xususiyatlari tomonidan tartibga solinmaydi. Style.css. Palapa kengligi butun ekranga cho'zilib ketadi, ammo u hali ham ekranning pastki qismida joylashgan bo'lib, darhol asosiy qism ostida joylashgan:

Ammo yana bir muammo bor, chunki podvalni ko'rish uchun endi siz ekranni brauzerda aylantirishingiz kerak (ko'rsatilgan aylanma panelini ko'rasiz).

Ma'lum bo'lishicha, asosiy idish (Maket) ekranning butun hajmini oladi (bu min-balandlikdagi mulk bilan belgilanadi) va uning pastki qismi darhol uning orqasida joylashgan va uni allaqachon ko'rish uchun juda qulay va funktsional bo'lmagan joyga aylantirish kerak.

Ajva idishi uchun ada idishiga salbiy ma'lumotni belgilash orqali bu muammoni hal qilish orqali hal qilish mumkin, shunda u yuqoriga teng masofaga teng bo'lgan masofaga siljiydi. Bunday holda, oyoq idishi asosiy ustida ishlaydi va brauzer ekranining balandligiga mos keladi (i.e. uni ko'rish uchun aylantirish kerak emas).

Ammo salbiy yozuvni yuqoridan berish uchun siz ushbu narsaning juda balandligini bilishingiz kerak va biz hali ham buni bilmaymiz.

Shuning uchun, birinchi navbatda podvalni o'z ichiga olgan idishni style.css-da belgilaydigan idishni joylashtiring:

#footer (fon rangi: # ffc0ff; aniq: ikkalasi ham; balandligi: 50px;)

Va keyin biz unga balandlikka teng salbiy narsani so'raymiz:

Bu podvalga aniq o'z bo'yini ko'tarishga imkon beradi va shu bilan brauzer ekraniga mos keladi (endi CSS mulk chegarasini olib tashlashingiz mumkin: ramka qalinligi bizning tartibimizga xalaqit bermaydi Bog'lanish ekranida joylashgan.

Ko'rinib turibdiki, endi brauzerdagi o'tish paneli ko'rinmaydi va uchta strelka joylashuvimiz bitta ekranga joylashtirilgan (sahifadagi oz sonli ma'lumotlar) va a pastki pastki qismida joylashgan. Biz nima qilishimiz kerak edi.

Stutni va Internet Explorer bilan jang qiling

Ammo muammo borBu tartib sahifasi to'g'risidagi ma'lumotlar tobora kuchayib boradigan va bu vaziyatni o'zgartirganda paydo bo'ladi:

Ko'rinib turibdiki, bu tartib ustunlardan birida ma'lumotlar chiroyli ko'rinmaydi, bu chiroyli ko'rinmaydi. Bu taniqli salbiy ahamiyatga ega bo'lganligi sababli, biz undan so'ralgan va podozozni asosiy konteyner tartibiga urishga yordam bergan.

Ular. Ma'lum bo'lishicha, ekranning pastki qismida podvaldagi bir-birining ustiga bir-biriga mos keladigan ikkita blok bo'ladi.

Ushbu muammoning echimi - bu yangi bo'sh DIS konteynerini qo'shish (chaqirilgan) ma'ruzachilar) Bizning maketimiz (Maket) ning asosiy idishda, uchastka bo'lgan joyda joylashgan joyda.

Ushbu yangi idishning yangi konteynerini o'rnatish, podvalning balandligiga teng, biz asosiy idishga ulagichiga pastki qismga chiqishdan qochishimiz mumkin. Biz ushbu identifikatorni () Rascka nomi bilan va indeks.html-ning natijasi bilan tayinlaymiz.

Sarlavha

Chap ustun menyusi Menyu menyusi
Sahifa Kontentlar sahifasi Tarkellar sahifasi sahifa sahifa sahifa sahifa sahifa sahifa

Va uslubda bu uchun yig'ladi (podvalning balandligiga teng kontrut balandligini aniqlash:

#Faskka (Balandlik: 50px;)

Natijada, tog 'ignaidan (masalan, eng yuqori ustunda matnli matnni) ostiga qo'yilmasligi va balandligi teng podsho bo'lgan joyni hech qanday ma'lumotga ega bo'lmagan holda bosiladi .

Shunday qilib, uch quvgraftimizda urish va buzilishdan qochamiz. Hamma narsa aniq va chiroyli bo'ladi (Chinno va olijanob):

Yuqorida aytib o'tganimdek, hozir faserning kengligi alohida o'rnatilishi kerak, chunki Ushbu idishni endi asosiy narsaga kiritilmagan. Buning uchun CSS fayliga qo'shing, forum uchun qo'shimcha xususiyatlar, uning kengligini o'rnatishga imkon beradi va uni gorizontal ravishda ekranning o'rtasida tekislashga imkon beradi.

Kengligi butun makkajo'xori kenglikning kengligini belgilash uchun va gorizontal tekislash, biz Blok tartibida butun sxema uchun qilgani kabi, gorizontal tekislash uchun amalga oshirilishi mumkin.

Shunday qilib, ID raqami uchun qo'shimcha xususiyatlarni qo'shishimiz kerak:

#footer (fon rangi: # ffc0ff; aniq: balandligi: 20pxx; woytx; chap chap: avtoulov)

Kengligidan foydalanib: 800px mulki, 800 pikselga 800 pikselga o'rnatilgan va ikki marjal xususiyatlari: avtomatik ravishda chap va o'ngni avtomatik ravishda o'rnatadi. Ushbu yozuvlar teng va bizning qahramonimiz o'rtada mos keladi:

Xo'sh, bu yaxshilanish uchun hamma narsadan ko'proq ko'rinadi, ammo u erda yo'q edi. Har doimgidek, bizning eng sevimli Internet Explorer Brauzer 6 Biror narsa biz ishlatgan CSS xususiyatlarini tushunmaydi. Ushbu brauzerda (va, ehtimol ba'zi qadimgi qadimgi qadimgi qadimgi qadimgi qadimgi qadimgi), podvalni pastki tomonga bosilmaydi va hali ham sayt tartibining eng yuqori ustuniga yopishadi.

Bularning barchasi (min-balandlikdagi mol-mulkni tushunmaydigan) shundan iboratki, biz asosiy bo'linmaning minimal balandligini o'rnatgan holda ekranning balandligiga teng bo'lgan.

Shuning uchun, ushbu muammoni hal qilish uchun biz (barmoqlaringizni) eski brauzerlarga nima qilish kerakligini tushuntirishga imkon beradigan xakerlarni qo'llashimiz kerak. Metet uchun CSS xususiyatlari ro'yxatidan oldin siz quyidagi kombinatsiyani kiritishingiz kerak bo'ladi:

* Html #maket (balandligi: 100%;)

Ushbu qoida faqat Internet Explorer 6 brauzeri uchun qo'llaniladi, qolgan qismi uni hisobga olmaydi va bajarmaydi.

Shunday qilib, ekranning pastki qismiga bosilgan start.cssning oxirgi nuqtai nazari quyidagicha bo'ladi:

Tana, HTML (marj: 0px; 0px; HTML # 800px; 0 avtoulov; min-balandligi: 100%;) #) # Sarlavha (fon rangi: # c0c000;) #left (Keng rang: # 00c0c0; rang-rangi: Float; (Orqa fon rangi: # 8080FF; FFC0F; FFC0F; BUGRTER (FFC0F; -500px; kengligi: 800px; Margin-chap: avtoulov; avtoulov: avtoulov;) #fekka (balandligi: 50px;)

Xo'sh, indeks.htmlning yakuniy turi biroz yuqori bo'ldi. Barchasi 2 va 3 pog'onasini blokirovka qilish uchun ajratilgan ushbu turdagi maqolalarda saytning torli va kauchuk sxeplari to'ldirilishi mumkin.

Siz shuningdek "HTML yorlig'i Div bilan ishlash" videoni tomosha qilishingiz mumkin:

Omad sizga! Blog sahifalaridagi noaniq uchrashuvlarga

Sizni qiziqtirishi mumkin

Blokning tartibi - Sayt uchun ikki ustun, trikolon va kauchuk tuzilmalarni yarating
Divning tartibi - HTML-da ikki panel tartibini yaratish uchun bloklarni yarating, ularning o'lchamlarini aniqlang va CSS-da joylashishni sozlang

HTML5-da Kod tuzilishi uchun bir nechta yangi teglar joriy etildi:

,