Энэ хэсэгт би яаж хийх талаар ярихыг хичээх болно PHP ашигланолон хуудас вэбсайтын загвар үүсгэх. Олон хүмүүс интернетээр аялж байхдаа ихэнх сайтууд "ижил төрлийн" хуудаснаас бүрддэгийг анзаардаг гэж би бодож байна. Ийм хуудас бүрийн толгой, зүүн, баруун, доод хэсгүүд нь бараг ижил бөгөөд тэдгээр нь зөвхөн гол хэсэгт байрлах үндсэн хэсгийн агуулгаараа ялгаатай байдаг. Сайтын үндсэн цэс нь ихэвчлэн хуудасны дээд хэсэгт байрладаг. Зүүн ба баруун баганууд нь янз бүрийн төрлийн холбоос, баннер, сурталчилгааны блокуудыг агуулж болно. Доод талд нь төсөл, зохиогчийн эрх болон бүх хуудсанд нийтлэг байдаг бусад мэдээллийг байрлуулахыг илүүд үздэг. Ийм хуудсуудыг гараар үүсгэх нь мэдээжийн хэрэг, гэхдээ энэ нь зохисгүй, учир нь хуудас бүрийн анхны HTML тэмдэглэгээ нь хангалттай хэмжээний давхардсан код агуулсан байх бөгөөд алдаа гарсан эсвэл бүтцийг өөрчлөх оролдлого гарсан тохиолдолд өөрчлөлт оруулах шаардлагатай болно. бүх хуудсанд хийсэн. PHP ашиглан ийм хуудасны загвар үүсгэх асуудлыг маш энгийнээр шийддэг.

Эх кодЭнэ загварт тохирох хуудас үүсэх нь иймэрхүү харагдах болно.

эхлэх_төв();

"; get_page()->end_center(); "footer.php"-г оруулах; close_page(); ?>

Эх код page.php. Та хуудасны тэмдэглэгээг үүсгэж эхлэхээсээ өмнө хамгийн эхний require_once мэдэгдэлд заасан global.php файлыг оруулах хэрэгтэй. Дараа нь бид дуудаж хуудсыг эхлүүлнэглобал функц

Бүх зүйл маш энгийн. header.php , left_side.php , right_side.php болон footer.php файлуудын эх кодыг доор өгөв. Хэрэв зарим бүлэг хуудасны хувьд эдгээр хэсгүүдийн агуулгыг өөрчлөх шаардлагатай бол эдгээр файлуудын тусгай хувилбаруудыг үүсгэж, тэдгээрт тохирох зааврын аргументуудыг өөрчил. оруулаххуудасны загварт.

эхлэл_толгой();

цуурай "

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

Header.php эх код.

Зүүн талын мэдээллийн блок 3

"; get_page()->төгс_зүүн_тал(); ?>

Баруун талын мэдээллийн блок 2

Баруун талын мэдээллийн блок 3

"; get_page()->төгс_баруун тал(); ?>

Эх код right.php.

start_footer(); цуурай ""; get_page()->end_footer(); ?> Эх код footer.php.Үзсэн загварыг боловсруулах үр дүнг харж болно.

Сайн уу. Энэ сэдвээр би вэб студийн вэбсайтад зориулсан html загварыг нийтэлж байна. Слайдер, портфолио, хамгийн сүүлийн үеийн мэдээ бүхий сонгодог сайт

нүүр хуудас

. Вэбсайт үүсгэх боломжтой Оросын зах зээлулам бүр ноцтой эргэлт хийж, улам олон вэб студиуд бий болж байна. Вэб хөгжүүлэлтийг бага ч гэсэн сонирхдог бараг бүх оюутан өөртөө зориулж вэбсайт хийж чадна. Нэлээд олон хүмүүс над дээр ирж, энэ эсвэл тэр зүйлийг хийхэд нь туслаач гэж гуйдаг, гэвч эдгээр хүмүүс өөрсдийгөө вэб сайт бүтээгчид гэж нэрлэдэг, бүр өөрийн вэб студитэй болдгийг сүүлд мэдсэн. Ийм хүмүүст зориулж би энэ загварыг нийтэлж байна (мэдээжийн хэрэг, зөвхөн ийм хүмүүст биш). Вэбсайтыг сурталчлах нь маш алдартай үйлчилгээ болж байгаа ч ийм үйлчилгээ үзүүлдэг хүмүүсийн 80% нь SEO-ийн талаар суурь мэдлэггүй байдаг.

Энд янз бүрийн агуулгын зохион байгуулалттай 10 хуудас байна. Хуудас бүрийг нь авч үзье.

Зураг, огноо, нийтлэлд үлдээсэн сэтгэгдлийн тоо, урьдчилан үзэх текст бүхий нийтлэлүүдийн сонгодог тэжээл. Энэ хуудас нь санамсаргүй нийтлэл, шошго, категори гэх мэт зөв сайтын самбартай.

Нийтлэлийн хуудас

Хэрэв бид ямар нэгэн блог нийтлэлийн гарчиг дээр дарвал бид ижил сайтын хуудас, текст, сэтгэгдэл бүхий нийтлэлийн хуудас руу шилжих болно.

Бидний тухай хуудас

Энэ хуудсан дээр бид хуудсан дээрх блокуудын зохион байгуулалтын танилцуулгыг харж байна: 2 багана, 3 ба 4. Энэ хуудсанд дэд ангилал бий:

• Элементүүд. Энд бид товчлуур, баян хуур, табуудыг харж байна
• Дүрсүүд. Энэхүү загвар нь монохром дүрсүүдийн сайн цуглуулгыг агуулдаг. Та дүрсүүдийг img/mono-icons хавтаснаас олох боломжтой
• Типографи. Ишлэл, тодотгол, том үсэг, догол мөр гэх мэт.

Портфолио хуудас

Бүх бүтээлийг багцын хуудсан дээр цуглуулсан. Сайтын толгой хэсэгт шүүлтүүр байдаг. Бүтээлийн аль нэг дээр дарахад бид бүтэн хуудас гулсагч, тайлбар, санамсаргүй дөрвөн бүтээл бүхий ажлын хуудас руу очно.

Харилцагчид

Газрын зураг, хаяг, утасны дугаар, санал хүсэлтийн маягт бүхий ердийн хуудас.

Энэ бол миний хувьд. Ажиллаарай, суралцаарай, залхуурах хэрэггүй, бүх зүйл сайхан болно :) Хамгийн сайн сайхан!

Хичээл №9
Бид вэбсайтаа гурван хуудаснаас бүрдүүлдэг

Энэ хичээл дээр бид бид гурван хуудаснаас бүрдсэн вэбсайт үүсгэх болно. Гэхдээ үүнээс өмнө таны тав тухыг хангахын тулд та ширээний компьютер дээрээ хавтас үүсгэх хэрэгтэй бөгөөд энэ хавтсыг Миний сайт гэж нэрлэж болно.

Миний сайт хавтсанд бидэнд байгаа бүх файлуудыг, тухайлбал хоёр HTML файлыг байрлуул.
index.html - Цоохор ирвэсийн тухай нийтлэл,
polyarnyi-volk.html — Туйлын чонын тухай нийтлэл,

болон хоёр зураг:
irbis.jpg
polyarnyi-volk.jpg

Гурав дахь хуудсыг хийцгээе, энэ нь зориулагдсан болно туйлын шар шувуу.

Гурав дахь хуудасны өгөгдөл

Миний сайт хавтсанд HTML файл үүсгэнэ үү:
polyarnaya-sova.html

Хуудасны гарчиг , хийх:
Цасан шар шувууны хуудас

CSS кодыг оруулах:

Өгүүллийн гарчиг

Зураг :

Хоёр догол мөрөөс бүрдсэн нийтлэл:

Цагаан шар шувуу (цагаан шар шувуу) нь шар шувууны овогт багтдаг шувуу юм. Тундрын шар шувууны дарааллаас хамгийн том шувуу. Цагаан шар шувуу нь дугуй толгойтой, шар нүдтэй, биеийн урт нь 70 см, жин нь 3 кг, далавчаа дэлгэхэд 165 см байдаг - Тундрын нутаг дэвсгэр: Еврази, Хойд Америк, Гренланд. Цагаан шар шувуу ихэвчлэн задгай газар амьдардаг бөгөөд ойд ховор байдаг. Энэ нь голчлон жижиг мэрэгч амьтдаар хооллодог: lemmings, энэ нь жилд 1600 гаруй лемминг идэж чаддаг. Шар шувууны хоолонд туулай, жижиг махчин амьтад, шувууд, загас, тэр ч байтугай сэг зэм орно.

Үүний үр дүнд та дараах хуудсыг авах ёстой.

Вэбсайт хуудсуудыг холбоосоор холбох

Асаалттай одоогоорБидэнд хойд нутгийн янз бүрийн амьтдыг дүрсэлсэн нийтлэл агуулсан гурван HTML файл байна:

Index.html - Цоохор ирвэсийн тухай нийтлэл,
polyarnyi-volk.html — Туйлын чонын тухай нийтлэл,
polyarnaya-sova.html — Цагаан шар шувууны тухай нийтлэл.

Цоохор ирвэс Алтан гадас чоно Алтан шар шувуу

Эцсийн эцэст таны сайт иймэрхүү харагдах ёстой. Холбоос дээр дарснаар та цоохор ирвэс, туйлын чоно, шар шувуу гэсэн хуудаснууд руу орох болно.

Та аль хэдийн мэдэж байгаачлан HTML баримт бичиг бүр шошготой эхэлдэг , энэ тайлбар нь эхлэгчдэд зориулагдсан байсан. Үнэндээ, бүр HTML баримт нь мөрөөр эхлэх ёстой, доор нь шошго байрлуулсан байна . ШугамБаримт бичигт ашигласан HTML хэл нь тухайн хэлний хамгийн сүүлийн, тав дахь хувилбарт чиглэгддэг болохыг хөтчид тодорхой болгодог, i.e. HTML5 дээр.

index.html файл гэх мэт эцсийн HTML баримт нь дараах байдлаар харагдах ёстой.

Цоохор ирвэс

Цоохор ирвэс (ирбис, ак ирвэс) нь муурны гэр бүлийн том махчин хөхтөн амьтан юм. Энэ нь Афганистан, Бирм, Бутан, Энэтхэг, Казахстан, Киргиз, Хятад, Монгол, Балба, Пакистан, Орос, Тажикистан, Узбекистан зэрэг уулсд амьдардаг. Цоохор ирвэс нь нимгэн, урт, уян хатан биетэй, харьцангуй богино хөл, жижиг толгой, маш урт сүүлтэй.

Сүүлтэйгээ нийлээд 200-230 см урт, 55 кг хүртэл жинтэй. Үслэг өнгө нь цайвар утаатай саарал өнгөтэй, цагираг хэлбэртэй, хатуу хар толботой.

туйлын чоноҮргэлж мөр нэмнэ

, HTML баримт бүрийн эхэнд.

Домэйн бүртгэл, хостинг
Тэгэхээр, таны Миний сайт хавтсанд гурван HTML файл хадгалагдсан байна:
индекс.html
polarnayi-volk.html

polarnaya-sova.html
irbis.jpg
болон гурван гэрэл зураг:
polyarnyi-volk.jpg

polyarnaya-sova.jpg
Энэ бүхнийг интернетэд байршуулахын тулд та эхлээд вэб сайтын нэрийг (домэйн) бүртгүүлэх шаардлагатай бөгөөд энэ нь хамгийн өндөр чанартай домэйн бүртгэлийн компани бөгөөд одоогоор энэ нь Webnames юм. webnames.ru бол домэйн бүртгэлийн компани юм. Ихэвчлэн .RU бүсэд домэйн бүртгүүлэхийн тулд эхний жилд 100 орчим рубль, дараагийн жилүүдэд 500 орчим рубль төлөх шаардлагатай болдог..

(төлбөрийг жилд нэг удаа төлдөг) Сайтын нэрийг бүртгүүлсний дараа та өөрөө худалдаж авах хэрэгтэйхостинг

Нэг хуудас эсвэл олон хуудас дизайныг сонгоход хэцүү байж болно. Хөдөлгөөнт болон олон нийтийн мэдээллийн хэрэгслийн нэр хүнд өсөхийн хэрээр энгийн, хурдан бөгөөд хариу үйлдэл үзүүлэх нэг хуудастай вэб сайтууд өнөөдөр хамгийн алдартай вэб чиг хандлагын нэг болж байна. Нөгөөтэйгүүр, уламжлалт навигацийн урсгалаар тодорхойлогддог олон хуудастай вэбсайтуудыг хэрэглэгчид сайн мэддэг.

Энэ бол хэцүү сонголт юм. Хамгийн сайн аргаНэг хуудас болон олон хуудасны дизайныг сонгохдоо таны сайтын агуулга, навигацийн урсгалыг харгалзан үзэх шаардлагатай. Танай сайтын контент хурдан бөгөөд үзэхэд хялбар уу, эсвэл хэрэглэгчдэд стратегийн хувьд байршуулах шаардлагатай олон контент байна уу? Агуулгад тулгуурласан арга барилаар та зөв навигацийн системийг олох магадлал өндөр байна.

Энэ нийтлэл нь сонголт бүрийн давуу болон сул талуудыг үнэлэхэд тусална.

Нэг хуудас сайт

Нэг хуудасны вэбсайт нь зөвхөн нэгийг агуулсан вэбсайт юм HTML хуудас. Тухай, Онцлог, Холбоо барих хуудас гэх мэт нэмэлт хуудас байхгүй.

Awwwards-ийн тайлбарласнаар, нэг хуудасны сайтууд дээрх контент бүхэлдээ нүүр хуудсанд ачаалагддаг бөгөөд энэ нь хэрэглэгчийн туршлагыг илүү тогтвортой, байгалийн болгодог. Нэг хуудастай вэб сайтын өөр өөр хэсгүүдэд шилжихийн тулд хэрэглэгчид хуудас дээрх очих газрууд руу шилжих боломжийг олгодог навигацийн холбоос дээр дарах эсвэл агуулгын өөр өөр хэсгийг хамрахын тулд хуудсыг гүйлгэдэг.

Нэг хуудастай вэбсайтууд нь хэрэглэгчдэд зөвхөн зохих хэмжээний мэдээллийг өгөх зорилготой. Шийдвэр гаргаж, түүнийхээ дагуу ажиллах шаардлагатай. Ийм учраас нэг хуудасны загварыг ихэвчлэн буух хуудас, портфолио, үйл явдалтай холбоотой вэбсайтуудад ашигладаг. Энэхүү цэвэр, минималист арга нь интерфейсээс шаардлагагүй дуу чимээг арилгаж, хэрэглэгчийн анхаарлыг хамгийн чухал агуулгад төвлөрүүлдэг.

Нэг хуудастай үр дүнтэй вэбсайтууд цэвэр, ойлгомжтой байдаг. Агуулгыг жижиг хэсгүүдэд хувааж, эмх замбараагүй байдлыг арилгадаг нэг хуудастай вэбсайт хэрэглэгчийн интерфэйс, хэрэглэгчдэд ээлтэй.

Ганц хуудасны загвар нь хэрэглэгчийн зөн совингийн аялалыг дэмждэг. Нэмэлт хуудасгүй бол зочдод эхлэл, дунд, төгсгөлийг тодорхой тодорхойлсон түүхийг өгүүлдэг шугаман навигацийн урсгал таалагддаг.

Энгийн навигацийн системтэй байхын бас нэг давуу тал нь хэрэглэгч зөвхөн нэг үйлдэлд чиглэгддэг. Судалгаанаас харахад нэг хуудастай байх нь олон хуудастай сайтуудтай харьцуулахад хөрвүүлэлтийг 37.5% хүртэл нэмэгдүүлэх боломжтой.

Бага хэмжээний контентоор (мөн бүгдийг нэг хуудсанд) та нэг хуудасны вэбсайтыг хялбар бөгөөд тогтвортой дасан зохицож чадна өөр өөр дэлгэцүүдболон төхөөрөмжүүд. Дээрээс нь гүйлгэх нь хялбар бөгөөд байгалийн хөдөлгөөн юм хөдөлгөөнт төхөөрөмжүүдмэдрэгчтэй дэлгэцтэй.

Гэхдээ энэ нь бүгд биш юм - дизайнеруудад сонирхолтой ашиг тус бас бий. Жишээлбэл, олон хуудастай дизайнтай харьцуулахад зөвхөн нэг хуудсан дээрх контент хамаагүй бага байдаг. Энэ нь нэг хуудас вэб дизайныг хэрэгжүүлэх, давтах, засварлахад хялбар болгодог.

Нэг хуудас сайтын сул тал

Нэг хуудас дизайн яагаад байж болох хэд хэдэн шалтгаан бий буруу шийдвэртаны вэбсайтад зориулсан.

Нэг хуудастай вэб сайтууд муу байна ( хайлтын системийн оновчлол). Нэмж дурдахад нэг хуудастай сайт нь өсөн нэмэгдэж буй брендийн хувьд тохиромжтой нэр дэвшигч биш юм, учир нь түүний цар хүрээг нэмэгдүүлэх чадвар хязгаарлагдмал байдаг. Бидний аль хэдийн харсанчлан, нэг хуудасны вэбсайтууд нь нарийн төвлөрөлтэй байдаг тул том, нарийн төвөгтэй ба/эсвэл олон төрлийн контент ашиглах шаардлагатай вэбсайтуудад тохиромжгүй байдаг.

Олон хуудастай вэбсайт нь олон хуудас агуулдаг. Нэг хуудас вэб сайтаас ялгаатай нь олон хуудасны загварт хуудсуудыг удирдах, үзэх цорын ганц арга бол цэсийн холбоосыг дагах явдал юм.

Олон хуудасны загвар нь бараг бүх төрлийн төслүүдэд сайн ажилладаг. Олон хуудастай вэб дизайны жишээг цахим худалдааны сайтууд (Amazon гэх мэт) болон цахим сургалтын сайтуудаас (Lynda гэх мэт) олж болно.

Олон хуудасны дизайны давуу тал

Нэг вэб сайт дээр олон хуудастай байх нь үндсэн гурван давуу талтай.

Нэгдүгээрт, олон хуудасны загвар нь хязгааргүй өргөтгөх боломжийг санал болгодог. Хүссэн хэмжээгээрээ олон хуудас үүсгэж, шаардлагатай бол навигацийн системийг өргөжүүлээрэй. Жишээлбэл, өөрчлөх боломжтой мега цэсний дээд навигацийн мөрийг хайлтын талбараар сольж, хязгааргүй навигацийн боломжуудыг олоорой. Таны сонгосон навигацийн дизайны төрөл нь таны вэбсайтын гүнээс хамаарна гэдгийг санаарай.

Хоёрдугаарт, олон хуудастай сайт дээрх навигацийн урсгалыг хянахад хялбар байдаг. Энэ төрлийн вэбсайт нь 90-ээд оноос хойш бий болсон бөгөөд энэ нь ихэнх хэрэглэгчид үүнийг мэддэг бөгөөд сайтууд дээр олон хуудас олохыг хүсдэг гэсэн үг юм.

Эцэст нь, олон хуудастай сайтууд нь хүчирхэг SEO чадвартай байдаг. Гадаадын вэбсайтуудтай илүү магадлалтайнэг хуудаснаас илүү агуулгатай байх болно.

Жишээлбэл, та сайтынхаа байнгын шинэчлэлтийг хэрхэн удирдах талаар бодож үзээрэй. Энэ бүх агуулгыг хөгжүүлэлт, агуулгын багууд хадгалах ёстой гэдгийг бүү мартаарай. Нэг хуудас эсвэл олон хуудастай вэбсайт үүсгэх эсэх талаар бодохдоо бэлэн байгаа эсэх талаар бодох хэрэгтэй их хэмжээнийагуулга нь зардал багатай.

Анхаарах өөр нэг зүйл бол таны сайтын уналтын хурд юм. Агуулга ихтэй сайтууд ихэвчлэн удаан ачаалагддаг, анхаарал сарниулдаг бөгөөд хэрэглэгчийг орхиход хүргэдэг.

Эцэст нь хэлэхэд, олон хуудасны загвар нь гар утсанд дасан зохицоход илүү хэцүү байдаг. Хөдөлгөөнт сайтыг хөгжүүлэхэд ижил код ашиглаж болох нэг хуудастай сайтуудаас ялгаатай нь олон хуудастай төслүүдийг гар утасны хувилбар үүсгэхийн тулд эхнээс нь тохируулах шаардлагатай байдаг.

Нэг хуудас болон олон хуудастай вэбсайтуудын харьцуулалт - Дүгнэлт

Манай нийтлэл нэг хуудас болон олон хуудасны дизайны ялгааг тодруулсан гэж найдаж байна. Дүгнэж хэлэхэд: Нэг хуудасны загвар нь нарийн төвлөрөлтэй байх эсвэл хэрэглэгчдийг тодорхой даалгаврыг биелүүлэхийг урамшуулах үед хамааралтай болно. Энэ нь гар утасны дизайн хийхэд тохиромжтой. Нөгөөтэйгүүр, олон хуудасны дизайн нь уламжлалт хэв маягийг баримталж, амжилтын боломжоо нэмэгдүүлэх боломжийг олгодог навигацийн системүүдмөн хайлтын системийг оновчтой болгох стратегийг оновчтой болгох.

Нэг хуудас эсвэл олон хуудастай вэб сайт үүсгэх эсэхийг тодорхойлох дүрэм байхгүй. Хамгийн гол нь эхлээд агуулгыг нь бодох хэрэгтэй. Хэрэглэгчиддээ үйлчлэхэд хэрэгтэй мэдээллээ авч үзээд, хэр их мэдээлэлтэй байгаа дээрээ үндэслэн шийдвэрээ гарга.