Ko'p sahifali html. Yuzlab dizayn variantlariga ega ko'p sahifali HTML shablonlari

Uy / Ishlamaydi

Ushbu bo'limda men qanday qilish haqida gapirishga harakat qilaman PHP yordamida ko'p sahifali veb-sayt shablonini yarating. O'ylaymanki, ko'pchilik Internetni kezish paytida ko'pchilik saytlar "bir xil turdagi" sahifalardan iborat ekanligini payqashadi. Har bir bunday sahifaning sarlavhasi, chap, o'ng va pastki qismlari deyarli bir xil bo'lib, ular bir-biridan faqat markazda joylashgan asosiy qismning mazmuni bilan farqlanadi. Saytning asosiy menyusi odatda sahifaning yuqori qismida joylashgan. Chap va o'ng ustunlarda turli xil havolalar, bannerlar va reklama bloklari bo'lishi mumkin. Pastki qismida ular loyiha, mualliflik huquqi va barcha sahifalar uchun umumiy bo'lgan boshqa ma'lumotlar haqidagi ma'lumotlarni joylashtirishni afzal ko'radilar. Albatta, bunday sahifalarni qo'lda yaratish mumkin, ammo bu tavsiya etilmaydi, chunki har bir sahifaning asl HTML belgilarida juda ko'p ikki nusxadagi kod mavjud bo'ladi va xatolar yoki ularning tuzilishini o'zgartirishga urinishlar bo'lsa, o'zgartirishlar kiritilishi kerak bo'ladi. barcha sahifalar uchun yaratilgan. PHP-dan foydalanib, bunday sahifa uchun shablon yaratish muammosi juda oddiy hal qilinadi.

Manba kodi Ushbu shablonga mos keladigan sahifaning shakllanishi quyidagicha ko'rinadi:

start_center();

aks-sado "
Asosiy qismdagi ma'lumotlar bloki 1
"; aks-sado "
Asosiy qismdagi ma'lumotlar bloki 1
Asosiy qismdagi ma'lumotlar bloki 2
Asosiy qismdagi ma'lumotlar bloki 1
Asosiy qismdagi ma'lumotlar bloki 3
Asosiy qismdagi ma'lumotlar bloki 1
Asosiy qismdagi ma'lumotlar bloki 4
Asosiy qismdagi ma'lumotlar bloki 1
Asosiy qismdagi ma'lumotlar bloki 5
Asosiy qismdagi ma'lumotlar bloki 1
Asosiy qismdagi ma'lumotlar bloki 6
Asosiy qismdagi ma'lumotlar bloki 7

"; get_page()->end_center(); ichiga "footer.php"; close_page(); ?>

Manba kodi page.php. Sahifa belgilarini yaratishni boshlashdan oldin birinchi require_once bayonotida ko'rsatilgan global.php faylini kiritishingiz kerak. Keyin biz qo'ng'iroq qilish orqali sahifani ishga tushiramiz global funktsiya

Hammasi juda oddiy. header.php , left_side.php , right_side.php va footer.php fayllari uchun manba kodi quyida keltirilgan. Agar ba'zi sahifalar guruhi uchun siz ushbu sohalarning mazmunini o'zgartirishingiz kerak bo'lsa, unda ushbu fayllarning maxsus versiyalarini yarating va ularga mos keladigan ko'rsatmalarning argumentlarini o'zgartiring. o'z ichiga oladi sahifa shablonida.

start_header();

aks-sado "

Sayt nomi

"; get_page()->end_header(); ?>

Header.php manba kodi.

start_left_side();
Asosiy qismdagi ma'lumotlar bloki 1
aks-sado "
Asosiy qismdagi ma'lumotlar bloki 1
Chap ma'lumot bloki 1
Chap ma'lumot bloki 2

Chapdagi axborot bloki 3

"; get_page()->end_left_side(); ?>

Manba kodi left.php.
Asosiy qismdagi ma'lumotlar bloki 1
start_right_side();
Asosiy qismdagi ma'lumotlar bloki 1
aks-sado "
O'ngdagi ma'lumot bloki 1

O'ngdagi ma'lumot bloki 2

O'ngdagi ma'lumot bloki 3

"; get_page()->end_right_side(); ?>

Manba kodi right.php.

begin_footer(); echo ""; get_page()->end_footer(); ?> Manba kodi footer.php. Ko'rib chiqilgan shablonni qayta ishlash natijasini ko'rish mumkin.

Hammaga salom. Ushbu mavzuda men veb-studiya veb-sayti uchun html shablonini joylashtiraman. Slayder, portfel va eng so'nggi yangiliklarga ega klassik sayt

bosh sahifa

. Veb-sayt yaratish yoqilgan Rossiya bozori tobora jiddiy burilishlar olib bormoqda va tobora ko'proq veb-studiyalar mavjud. Veb-ishlab chiqishga ozgina qiziqqan deyarli har bir talaba o'zi uchun veb-sayt yaratishi mumkin. Menga juda ko'p odamlar u yoki bu ishni bajarishda yordam berishimni so'rab kelishadi, garchi bu odamlar o'zlarini veb-sayt yaratuvchisi deb atashlarini va hatto o'zlarining veb-studiyalari borligini keyinroq bilsam ham. Aynan shunday odamlar uchun men ushbu shablonni joylashtiryapman (albatta, nafaqat bunday odamlar uchun). Veb-sayt reklamasi ham juda mashhur xizmatga aylanib bormoqda, garchi bunday xizmatlarni taqdim etayotganlarning 80% hatto SEO bo'yicha fundamental bilimga ega emas.

Bu erda turli xil tarkibga ega 10 ta sahifa mavjud. Keling, har bir sahifani ko'rib chiqaylik.

Rasmlar, sana, maqolaga qoldirilgan sharhlar soni va matnni oldindan ko'rish bilan maqolalarning klassik tasmasi. Sahifada tasodifiy xabarlar, teglar, toifalar va boshqalar bilan to'g'ri sayt paneli mavjud.

Maqola sahifasi

Har qanday blog postining sarlavhasini bossak, biz bir xil sayt paneli, matn va sharhlar bilan maqola sahifasiga o'tamiz.

Biz haqimizda sahifa

Ushbu sahifada biz sahifadagi bloklarning joylashuvi taqdimotini ko'ramiz: 2 ta ustun, 3 va 4. Ushbu sahifada kichik toifalar mavjud:

  • Elementlar. Bu erda biz tugmalar, akkordeonlar va yorliqlarni ko'ramiz
  • Belgilar. Ushbu shablonda monoxrom piktogrammalarning yaxshi to'plami mavjud. Belgilarni img/mono-icons papkasida topishingiz mumkin
  • Tipografiya. Iqtibos, urg'u, bosh harflar, paragraflar va boshqalar.

Portfolio sahifasi

Barcha ishlar portfel sahifasida to'plangan. Sayt sarlavhasida filtr mavjud. Asarlardan birini bosganingizda, biz to'liq sahifali slayder, tavsif va to'rtta tasodifiy asar bilan ish sahifasining o'ziga o'tamiz.

Kontaktlar

Xarita, manzil, telefon raqamlari va fikr-mulohaza shakli bilan oddiy sahifa.

Men uchun hammasi shu. Ishlang, o'qing, dangasa bo'lmang va hamma narsa yaxshi bo'ladi :) Hamma yaxshi!

№9 dars
Biz veb-saytimizni uchta sahifadan yaratamiz

Ushbu darsda biz uch sahifadan iborat veb-sayt yaratamiz. Lekin bundan oldin, sizning qulayligingiz uchun ish stolida papka yaratishingiz kerak, papkani Mening saytim deb atashingiz mumkin.

"Mening saytim" jildiga bizda mavjud bo'lgan barcha fayllarni, ya'ni ikkita HTML faylni joylashtiring:
index.html - Qor qoploni haqida maqola,
polyarnyi-volk.html — Polar bo'ri haqida maqola,

va ikkita fotosurat:
irbis.jpg
polyarnyi-volk.jpg

Keling, uchinchi sahifani yarataylik, u bag'ishlangan bo'ladi qutbli boyqush.

Uchinchi sahifa ma'lumotlari

Mening saytim papkasida HTML fayl yarating:
polyarnaya-sova.html

Sahifa sarlavhasi , bajaring:
Qorli boyqush sahifasi

CSS kodini joylashtiring:

Maqola sarlavhasi

:
qutbli boyqush

Surat :

Ikki banddan iborat maqola:

Polar boyqush (oq boyo'g'li) - boyqushlar oilasiga mansub qush. Tundrada boyqushlar qatoridan eng katta qush. Oq boyo'g'lining boshi yumaloq, ko'zlari sariq, tana uzunligi 70 sm ga etadi, vazni 3 kg, qanotlari 165 sm tarqaladi - tundra hududi: Evroosiyo, Shimoliy Amerika, Grenlandiya. Polar boyqush odatda ochiq joylarda yashaydi va o'rmonlarda kamdan-kam uchraydi. U asosan mayda kemiruvchilar bilan oziqlanadi: lemmings; yiliga 1600 dan ortiq lemmings yeyishi mumkin. Boyqushning ratsioniga quyonlar, mayda yirtqichlar, qushlar, baliqlar va hatto o'lik hayvonlar ham kiradi.

Natijada siz quyidagi sahifani olishingiz kerak.

Veb-sayt sahifalarini havolalar bilan ulash

Yoniq hozirgi paytda Bizda turli xil shimoliy hayvonlarni tavsiflovchi maqolalarni o'z ichiga olgan uchta HTML fayl mavjud:

Index.html - Qor qoploni haqida maqola,
polyarnyi-volk.html — Polar bo'ri haqida maqola,
polyarnaya-sova.html — Polar boyqush haqida maqola.

Qor qoploni Polar bo'ri Polar boyo'g'li

Oxir-oqibat, sizning saytingiz shunday ko'rinishi kerak. Havolalarni bosish orqali siz quyidagi sahifalarga o'tasiz: qor qoploni, qutb bo'ri va qutb boyo'g'li.

Ma'lumki, har bir HTML hujjat teg bilan boshlanadi , bu tushuntirish yangi boshlanuvchilar uchun edi. Aslida, har HTML hujjat satr bilan boshlanishi kerak, va tagiga teg qo'yiladi . Chiziqbrauzerga hujjatda ishlatiladigan HTML tili tilning eng so'nggi, beshinchi versiyasiga yo'naltirilganligini aniq ko'rsatadi, ya'ni. HTML5 da.

Yakuniy HTML hujjati, masalan, index.html fayli quyidagicha ko'rinishi kerak:

Qor qoploni sahifasi

Qor qoploni

Qor qoploni (irbis, ak leopard) — mushuklar oilasiga mansub yirik yirtqich sutemizuvchilar. Afgʻoniston, Birma, Butan, Hindiston, Qozogʻiston, Qirgʻiziston, Xitoy, Moʻgʻuliston, Nepal, Pokiston, Rossiya, Tojikiston va Oʻzbekiston togʻlarida yashaydi. Qor qoploni ingichka, uzun, moslashuvchan tana, nisbatan qisqa oyoqlari, kichik bosh va juda uzun quyruq.

Dumi bilan birga uzunligi 200-230 sm ga etadi, vazni 55 kg gacha. Mo'ynali kiyimlarning rangi ochiq tutunli kulrang, halqa shaklidagi va qattiq qora dog'lar bilan.

Qor qoploni, asosan, togʻ echkilari va qoʻylarni ovlaydi, uning ratsioniga yovvoyi choʻchqalar, qirgʻovullar va hatto gophers ham kiradi. Turlarning yashash muhiti mavjud emasligi sababli, qor qoplonlari hali ham yaxshi o'rganilmagan. Biroq, taxminiy hisob-kitoblarga ko'ra, ularning soni taxminan 10 ming kishini tashkil qiladi. 2013 yildan boshlab qor qoplonlarini ovlash taqiqlangan. Qor qoploni qutbli boyqush

qutbli bo'riHar doim qatorni qo'shing

, har bir HTML hujjatining boshida.

Domenni ro'yxatdan o'tkazish va hosting
Shunday qilib, mening saytim jildida saqlangan uchta HTML faylingiz bor:
index.html
polarnayi-volk.html

polarnaya-sova.html
irbis.jpg
va uchta fotosurat:
polyarnyi-volk.jpg

polyarnaya-sova.jpg
Bularning barchasini Internetga joylashtirish uchun avvalo veb-sayt nomini (domenini), eng yuqori sifatli domenni ro'yxatdan o'tkazish kompaniyasini ro'yxatdan o'tkazishingiz kerak, hozirda bu Webnames: webnames.ru - domenni ro'yxatdan o'tkazish kompaniyasi. Odatda, .RU zonasida domenni ro'yxatdan o'tkazish uchun siz birinchi yilda taxminan 100 rubl va keyingi yillarda taxminan 500 rubl to'lashingiz kerak..

(to'lov yiliga bir marta amalga oshiriladi) Sayt nomini ro'yxatdan o'tkazgandan so'ng, siz o'zingizni sotib olishingiz kerak xosting

Bir sahifali yoki ko'p sahifali dizayn o'rtasida qaror qabul qilish qiyin bo'lishi mumkin. Mobil va ijtimoiy tarmoqlarning mashhurligi oshishi bilan oddiy, tezkor va sezgir bir sahifali veb-saytlar bugungi kunda eng mashhur veb-trendlardan biri hisoblanadi. Boshqa tomondan, an'anaviy navigatsiya oqimlari bilan belgilangan ko'p sahifali veb-saytlar foydalanuvchilarga yaxshi ma'lum.


Bu qiyin tanlov. Eng yaxshi yo'l Bir sahifali va ko'p sahifali dizayn o'rtasida qaror qabul qilish uchun saytingiz mazmuni va navigatsiya oqimini hisobga olish kerak. Saytingiz kontenti tez va oson ko‘rib chiqiladimi yoki foydalanuvchilar uchun strategik jihatdan joylashtirilishi kerak bo‘lgan ko‘p kontent bormi? Kontentga asoslangan yondashuv bilan siz to'g'ri navigatsiya tizimini topish ehtimoli ko'proq.

Ushbu post sizga har bir variantning ijobiy va salbiy tomonlarini tortishga yordam beradi.

Bir sahifali sayt

Bir sahifali veb-sayt shunchaki bitta veb-saytni o'z ichiga olgan veb-saytdir HTML sahifasi. Haqida, Xususiyatlar yoki Kontakt sahifasi kabi qoʻshimcha sahifalar yoʻq.

Awwwards tushuntirganidek, bitta sahifali saytlardagi kontent butunlay bosh sahifaga yuklanadi, bu esa tajribani foydalanuvchi uchun yanada izchil va tabiiy qiladi. Bir sahifali veb-saytning turli bo'limlariga o'tish uchun foydalanuvchilar sahifadagi manzillarga o'tish imkonini beruvchi navigatsiya havolalarini bosing yoki kontentning turli bo'limlarini qamrab olish uchun sahifani aylantiradi.

Bir sahifali veb-saytlar foydalanuvchiga faqat tegishli miqdordagi ma'lumotlarni taqdim etishga qaratilgan. Qaror qabul qilish va unga muvofiq harakat qilish kerak. Shuning uchun bir sahifali dizaynlar ko'pincha ochilish sahifalari, portfellar va voqea bilan bog'liq veb-saytlar uchun ishlatiladi. Ushbu toza, minimalistik yondashuv foydalanuvchi e'tiborini eng muhim tarkibga qaratib, interfeysdan keraksiz shovqinlarni olib tashlaydi.

Samarali bir sahifali veb-saytlar toza va aniq. Tarkibni kichikroq qismlarga ajratadigan va tartibsizliklarni yo'q qiladigan bitta sahifali veb-sayt foydalanuvchi interfeysi, foydalanish uchun qulay.


Yagona sahifa dizayni, shuningdek, foydalanuvchining intuitiv sayohatiga yordam beradi. Qo'shimcha sahifalarsiz tashrif buyuruvchilar aniq belgilangan boshi, o'rtasi va oxiri bilan hikoya qiluvchi chiziqli navigatsiya oqimidan bahramand bo'lishadi.

Oddiy navigatsiya tizimiga ega bo'lishning yana bir afzalligi shundaki, foydalanuvchi faqat bitta harakatga yo'naltiriladi. Tadqiqotlar shuni ko'rsatadiki, bitta sahifaga ega bo'lish ko'p sahifali saytlarga qaraganda konversiyalarni 37,5% gacha oshirishi mumkin.

Kichik miqdordagi kontent (va barchasi bitta sahifada) bilan siz bitta sahifali veb-saytlarni osongina va doimiy ravishda moslashingiz mumkin turli ekranlar va qurilmalar. Bundan tashqari, aylantirish oson va tabiiy harakatdir mobil qurilmalar sensorli ekran bilan.

Ammo bu hammasi emas - dizaynerlar uchun ham qiziqarli imtiyozlar mavjud. Misol uchun, bir sahifada ko'p sahifali dizaynga qaraganda kamroq tarkib mavjud. Bu odatda bir sahifali veb-dizaynlarni amalga oshirish, takrorlash va saqlashni osonlashtiradi.

Bir sahifali saytning kamchiliklari

Bir sahifali dizayn bo'lishining bir qancha sabablari ham bor noto'g'ri qaror veb-saytingiz uchun.

Bir sahifali veb-saytlar pastroq ( qidiruv tizimini optimallashtirish). Bundan tashqari, bir sahifali sayt o'sib borayotgan brend uchun ideal nomzod emas, chunki uning kengayish qobiliyati cheklangan. Yuqorida aytib o'tganimizdek, bir sahifali veb-saytlar odatda tor fokusga ega va shuning uchun katta, murakkab va/yoki turli xil kontentdan foydalanishni talab qiladigan veb-saytlar uchun mos emas.

Ko'p sahifali veb-sayt bir nechta sahifalarni o'z ichiga oladi. Bitta sahifali veb-saytdan farqli o'laroq, ko'p sahifali dizayndagi sahifalarni ko'rish va ko'rishning yagona yo'li menyu havolalariga rioya qilishdir.

Ko'p sahifali dizayn deyarli barcha turdagi loyihalar uchun yaxshi ishlaydi. Ko'p sahifali veb-dizaynga misollarni elektron tijorat saytlarida (masalan, Amazon) va elektron o'quv saytlarida (Lynda kabi) topish mumkin.


Ko'p sahifali dizaynning afzalliklari

Bitta veb-saytda ko'p sahifali sahifaga ega bo'lishning uchta asosiy afzalliklari bor.

Birinchidan, ko'p sahifali dizayn cheksiz hajmni taklif qiladi. O'zingiz xohlagancha ko'p sahifa yarating va kerak bo'lsa navigatsiya tizimini kengaytiring. Masalan, sozlanishi mega menyu uchun yuqori navigatsiya panelini cheksiz navigatsiya imkoniyatlari uchun qidiruv paneli bilan almashtiring. Siz tanlagan navigatsiya dizayni turi veb-saytingiz chuqurligiga bog'liq bo'lishini unutmang.

Ikkinchidan, ko'p sahifali saytdagi navigatsiya oqimini kuzatish oson. Ushbu turdagi veb-saytlar 90-yillardan beri mavjud, ya'ni ko'pchilik foydalanuvchilar u bilan tanish va ko'pincha saytlarda bir nechta sahifalarni topishni kutishadi.

Nihoyat, bir nechta sahifali saytlar kuchli SEO imkoniyatlariga ega. Chet el veb-saytlari bilan ehtimoli ko'proq bir sahifalilardan ko'ra ko'proq tarkibga ega bo'ladi.

Misol uchun, saytingizga muntazam yangilanishlarni qanday boshqarishni ko'rib chiqing. Shuni unutmangki, bu kontentning barchasi ishlab chiqish va kontent guruhlari tomonidan saqlanishi kerak. Bitta sahifa yoki ko'p sahifali veb-sayt yaratishni ko'rib chiqayotganda, mavjudligi haqida o'ylashingiz kerak katta miqdor mazmuni tejamkor.

Ko'rib chiqilishi kerak bo'lgan yana bir narsa - saytingizning chiqish tezligi. Ko'p kontentga ega saytlar ko'pincha sekin yuklanadi, chalg'itadi va foydalanuvchini tark etishga olib kelishi mumkin.


Va nihoyat, ko'p sahifali dizaynlarni mobil qurilmalarga moslashtirish qiyinroq. Bir sahifali saytlardan farqli o'laroq, mobil saytni ishlab chiqish uchun bir xil koddan foydalanish mumkin, ko'p sahifali loyihalar mobil versiyani yaratish uchun ko'pincha noldan moslashtirilishi kerak.

Bir sahifali va ko'p sahifali veb-saytlarni taqqoslash - Xulosa

Umid qilamizki, bizning postimiz bitta sahifali va ko'p sahifali dizayn o'rtasidagi farqlarni aniqladi. Xulosa qilib aytadigan bo'lsak: Bir sahifali dizaynlar tor diqqatga ega bo'lganingizda yoki foydalanuvchilarni muayyan vazifani bajarishga undaganingizda tegishli bo'ladi. Bu mobil dizayn uchun ham ideal. Boshqa tomondan, ko'p sahifali dizayn sizning yutuqlaringiz potentsialini kengaytirishga, an'anaviylikka rioya qilishga imkon beradi navigatsiya tizimlari va qidiruv tizimini optimallashtirish strategiyangizni optimallashtirish.

Bir sahifali yoki ko'p sahifali veb-sayt yaratish kerakligini aniqlash uchun hech qanday qoida yo'q. Eng muhimi, avvalo tarkib haqida o'ylash. Foydalanuvchilarga xizmat ko'rsatish uchun kerakli ma'lumotlarni ko'rib chiqing va qancha ma'lumotga ega ekanligingizga qarab qaror qabul qiling.

© 2024 ermake.ru -- Kompyuterni ta'mirlash haqida - Axborot portali