Այս բաժնում ես կփորձեմ խոսել այն մասին, թե ինչպես դա անել օգտագործելով PHPստեղծել մի քանի էջանոց կայքի ձևանմուշ: Կարծում եմ, որ շատերը համացանցում շրջելիս նկատում են, որ կայքերի մեծ մասը բաղկացած է «նույն տեսակի» էջերից։ Յուրաքանչյուր նման էջի վերնագիրը, ձախ, աջ և ներքևի մասերը գրեթե նույնական են, և դրանք միմյանցից տարբերվում են միայն կենտրոնում գտնվող հիմնական մասի բովանդակությամբ։ Կայքի հիմնական ընտրացանկը սովորաբար գտնվում է էջի վերևում: Ձախ և աջ սյունակները կարող են պարունակել տարբեր տեսակի հղումներ, բաններներ և գովազդային բլոկներ: Ներքևում նրանք նախընտրում են տեղադրել նախագծի մասին տեղեկատվություն, հեղինակային իրավունք և այլ տեղեկություններ, որոնք ընդհանուր են բոլոր էջերի համար: Անշուշտ, հնարավոր է ձեռքով ստեղծել նման էջեր, բայց դա նպատակահարմար չէ, քանի որ յուրաքանչյուր էջի սկզբնական HTML նշումը կպարունակի բավականին քանակությամբ կրկնօրինակ կոդ, և սխալների կամ դրանց կառուցվածքը փոխելու փորձերի դեպքում փոփոխությունները պետք է կատարվեն: արված է բոլոր էջերում: PHP-ի միջոցով նման էջի համար կաղապար ստեղծելու խնդիրը լուծվում է բավականին պարզ.

Աղբյուրի կոդըայս ձևանմուշին համապատասխան էջի ձևավորումը կունենա հետևյալ տեսքը.

start_center();

"; get_page()->end_center(); ներառել "footer.php"; close_page(); ?>

Աղբյուրի կոդը page.php. Նախքան էջի նշագրումը սկսելը, դուք պետք է ներառեք global.php ֆայլը, որը նշված է հենց առաջին require_once հայտարարության մեջ: Հաջորդը մենք նախաստորագրում ենք էջը՝ զանգահարելովգլոբալ գործառույթ

Ամեն ինչ բավականին պարզ է. header.php, left_side.php, right_side.php և footer.php ֆայլերի սկզբնական կոդը տրված է ստորև: Եթե ​​էջերի որոշ խմբի համար անհրաժեշտ է փոխել այս տարածքների բովանդակությունը, ապա ստեղծեք այդ ֆայլերի հատուկ տարբերակները և փոխեք դրանց համապատասխան հրահանգների փաստարկները: ներառելէջի ձևանմուշում։

start_header();

արձագանք»

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

Header.php աղբյուրի կոդը:

Տեղեկատվական բլոկ ձախ կողմում 3

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

Տեղեկատվական բլոկ աջ կողմում 2

Տեղեկատվական բլոկ աջ կողմում 3

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

Աղբյուրի կոդը right.php.

start_footer(); արձագանք «»; get_page()->end_footer(); ?> Աղբյուրի կոդը footer.php.Դիտարկվող կաղապարի մշակման արդյունքը կարելի է դիտել։

Բարև բոլորին: Այս թեմայում ես տեղադրում եմ html ձևանմուշ վեբ ստուդիայի կայքի համար: Դասական կայք՝ սլայդերով, պորտֆոլիոյով և վերջին նորություններով

գլխավոր էջ

. Կայքի ստեղծումը միացված է Ռուսական շուկաավելի ու ավելի լուրջ շրջադարձեր է ստանում, և ավելի ու ավելի շատ վեբ ստուդիաներ կան: Գրեթե յուրաքանչյուր ուսանող, ով գոնե մի փոքր հետաքրքրված է վեբ մշակմամբ, կարող է իր համար կայք կառուցել: Բավականին շատ մարդիկ են գալիս ինձ մոտ՝ խնդրելով օգնել իրենց այս կամ այն ​​գործով զբաղվելու համար, թեև ավելի ուշ իմացա, որ այդ մարդիկ իրենց անվանում են կայքերի ստեղծողներ և նույնիսկ ունեն իրենց սեփական վեբ ստուդիան։ Հենց այդպիսի մարդկանց համար եմ տեղադրում այս կաղապարը (դե իհարկե ոչ միայն այդպիսի մարդկանց համար)։ Կայքերի առաջխաղացումը նույնպես դառնում է շատ տարածված ծառայություն, չնայած նման ծառայություններ մատուցողների 80%-ը նույնիսկ SEO-ի հիմնարար գիտելիքներ չունի։

Ահա 10 էջ տարբեր բովանդակությամբ կազմակերպվածությամբ: Եկեք անցնենք էջերից յուրաքանչյուրը:

Պատկերներով, ամսաթվով, հոդվածի վրա թողնված մեկնաբանությունների քանակով և նախադիտման տեքստով հոդվածների դասական հոսք: Էջն ունի ճիշտ կայքի տող՝ պատահական գրառումներով, թեգերով, կատեգորիաներով և այլն:

Հոդվածի էջ

Եթե ​​սեղմենք ցանկացած բլոգի գրառման վերնագրի վրա, մենք կտեղափոխվենք հոդվածի էջ՝ նույն կայքի տողով, տեքստով և մեկնաբանություններով:

Մեր մասին Էջ

Այս էջում մենք տեսնում ենք էջի բլոկների դասավորվածության ներկայացում՝ 2 սյունակ, 3 և 4: Այս էջն ունի ենթակատեգորիաներ.

• Տարրեր. Այստեղ մենք տեսնում ենք կոճակներ, ակորդեոններ և ներդիրներ
• Սրբապատկերներ. Այս ձևանմուշը պարունակում է մոնոխրոմ պատկերակների լավ հավաքածու: Դուք կարող եք գտնել պատկերակները img/mono-icons պանակում
• Տպագրություն. Մեջբերումներ, շեշտադրումներ, մեծատառեր, պարբերություններ և այլն:

Պորտֆոլիոյի էջ

Բոլոր աշխատանքները հավաքված են պորտֆոլիոյի էջում։ Կայքի վերնագրում կա զտիչ: Երբ սեղմում եք ստեղծագործություններից մեկի վրա, մենք գնում ենք հենց աշխատանքային էջ՝ ամբողջական սլայդերով, նկարագրությամբ և չորս պատահական աշխատանքով։

Կոնտակտներ

Սովորական էջ՝ քարտեզով, հասցեով, հեռախոսահամարներով և հետադարձ կապի ձևով:

Ինձ համար այսքանն է: Աշխատիր, սովորիր, մի ծուլացիր ու ամեն ինչ լավ կլինի :) Ամենայն բարիք։

Դաս #9
Մենք ստեղծում ենք մեր կայքը երեք էջից

Այս դասում մենք մենք կստեղծենք երեք էջից բաղկացած կայք. Բայց մինչ այդ, ձեր հարմարության համար, պետք է ձեր աշխատասեղանին թղթապանակ ստեղծել, թղթապանակը կարող եք անվանել My site:

Տեղադրեք Իմ Կայքի թղթապանակում բոլոր այն ֆայլերը, որոնք մենք արդեն ունենք, մասնավորապես երկու HTML ֆայլ.
index.html - Հոդված ձյան հովազի մասին,
polyarnyi-volk.html — Հոդված բևեռային գայլի մասին,

և երկու լուսանկար.
irbis.jpg
polyarnyi-volk.jpg

Կազմենք երրորդ էջ, այն կնվիրվի բևեռային բու.

Երրորդ էջի տվյալները

Ստեղծեք HTML ֆայլ Իմ Կայքի պանակում.
polyarnaya-sova.html

Էջի վերնագիր , անել:
Snowy owl էջ

Տեղադրեք CSS կոդը.

Հոդվածի վերնագիր

Լուսանկարը :

Հոդված, որը բաղկացած է երկու պարբերությունից.

Բևեռային բու (սպիտակ բու) բուերի ընտանիքի թռչուն է։ Ամենամեծ թռչունը, բուերի կարգից, տունդրայում։ Սպիտակ բուն ունի կլոր գլուխ, դեղին աչքեր, մարմնի երկարությունը հասնում է 70 սմ-ի, քաշը՝ 3 կգ, թեւերի բացվածքը՝ 165 սմ Տարածման տարածքը՝ տունդրայի տարածք՝ Եվրասիա, Հյուսիսային Ամերիկա, Գրենլանդիա: Բևեռային բուը սովորաբար ապրում է բաց տարածքներում և հազվադեպ է հանդիպում անտառներում: Սնվում է հիմնականում մանր կրծողներով՝ լեմինգներով։ Բվի սննդակարգում կան նաև նապաստակներ, փոքրիկ գիշատիչներ, թռչուններ, ձկներ և նույնիսկ լեշ:

Արդյունքում, դուք պետք է ստանաք հետևյալ էջը.

Կայքերի էջերի միացում հղումներով

Միացված է այս պահինՄենք ունենք երեք HTML ֆայլ, որոնք պարունակում են հոդվածներ, որոնք նկարագրում են տարբեր հյուսիսային կենդանիներ.

Index.html - Հոդված ձյան հովազի մասին,
polyarnyi-volk.html — Հոդված բևեռային գայլի մասին,
polyarnaya-sova.html — Հոդված բևեռային բուի մասին.

Ձյան ընձառյուծ Բևեռային գայլ Բևեռային բու

Ի վերջո, ձեր կայքը պետք է այսպիսի տեսք ունենա. Սեղմելով հղումների վրա՝ դուք կտեղափոխվեք հետևյալ էջերը՝ ձյան ընձառյուծ, բևեռային գայլ և բևեռային բու։

Ինչպես արդեն գիտեք, յուրաքանչյուր HTML փաստաթուղթ սկսվում է պիտակով , այս բացատրությունը սկսնակների համար էր։ Փաստորեն, ամեն HTML փաստաթուղթը պետք է սկսվի տողով, և դրա տակ դրվում է պիտակ . Գիծզննարկիչին պարզ է դարձնում, որ փաստաթղթում օգտագործվող HTML լեզուն ուղղված է լեզվի վերջին՝ հինգերորդ տարբերակին, այսինքն. HTML5-ում:

Վերջնական HTML փաստաթուղթը, ինչպիսին է index.html ֆայլը, պետք է ավարտվի այսպես.

Ձյան ընձառյուծ

Ձյան հովազը (irbis, ak leopard) խոշոր գիշատիչ կաթնասուն է կատուների ընտանիքից։ Ապրում է Աֆղանստանի, Բիրմայի, Բութանի, Հնդկաստանի, Ղազախստանի, Ղրղզստանի, Չինաստանի, Մոնղոլիայի, Նեպալի, Պակիստանի, Ռուսաստանի, Տաջիկստանի և Ուզբեկստանի լեռներում։ Ձյան հովազը բարակ է, երկար, ճկուն մարմին, համեմատաբար կարճ ոտքեր, փոքր գլուխ և շատ երկար պոչ։

Պոչի հետ միասին հասնելով 200-230 սմ երկարության՝ կշռում է մինչև 55 կգ։ Մորթի գույնը բաց ծխագույն մոխրագույն է՝ օղակաձեւ և պինդ մուգ բծերով։

բևեռային գայլՄիշտ ավելացրեք տողը

, յուրաքանչյուր HTML փաստաթղթի սկզբում:

Դոմենի գրանցում և հոսթինգ
Այսպիսով, դուք ունեք երեք HTML ֆայլ, որոնք պահվում են ձեր Իմ Կայքի պանակում.
index.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-ի հզոր հնարավորություններ: Արտասահմանյան կայքերի հետ ավելի հավանական էավելի շատ բովանդակություն կունենա, քան մեկ էջանոցները:

Օրինակ, մտածեք, թե ինչպես եք կառավարելու ձեր կայքի կանոնավոր թարմացումները: Մի մոռացեք, որ այս ամբողջ բովանդակությունը պետք է պահպանվի մշակողների և բովանդակության թիմերի կողմից: Երբ մտածում եք ստեղծել մեկ էջ կամ բազմաէջ կայք, դուք պետք է մտածեք այն մասին, թե արդյոք առկա է մեծ քանակությամբբովանդակությունը ծախսարդյունավետ է:

Մեկ այլ բան, որը պետք է հաշվի առնել, ձեր կայքի վերադարձի տոկոսադրույքն է: Շատ բովանդակություն ունեցող կայքերը հաճախ դանդաղ են բեռնվում, շեղում են ուշադրությունը և կարող են հանգեցնել օգտատերերի լքման:

Վերջապես, բազմաէջանոց դիզայնն ավելի դժվար է հարմարեցնել բջջայինին: Ի տարբերություն մեկ էջանոց կայքերի, որտեղ նույն կոդը կարող է օգտագործվել բջջային կայք մշակելու համար, բազմաէջ նախագծերը հաճախ անհրաժեշտ է զրոյից հարմարեցնել՝ բջջային տարբերակ ստեղծելու համար:

Մեկ էջերի և բազմաէջանոց կայքերի համեմատություն - ամփոփում

Հուսով ենք, որ մեր գրառումը պարզել է մեկ էջի և բազմաէջ դիզայնի տարբերությունները: Ամփոփելու համար. Մեկ էջի ձևավորումները տեղին են, երբ դուք ունեք նեղ ուշադրություն կամ խրախուսում եք օգտվողներին կատարել կոնկրետ առաջադրանք: Այն նաև իդեալական է բջջային դիզայնի համար: Մյուս կողմից, բազմաէջ դիզայնը թույլ է տալիս ընդլայնել ձեր ձեռքբերումների ներուժը, հավատարիմ մնալ ավանդականին նավիգացիոն համակարգերև օպտիմալացնել որոնման համակարգի օպտիմալացման ռազմավարությունը:

Չկա հիմնական կանոն, որը կարող է որոշել, թե արդյոք դուք պետք է ստեղծեք մեկ էջանոց կամ բազմաէջանոց կայք: Ամենակարևորը նախ բովանդակության մասին մտածելն է։ Հաշվի առեք այն տեղեկատվությունը, որն անհրաժեշտ է ձեր օգտատերերին սպասարկելու համար և ձեր որոշումը կայացրեք՝ հիմնվելով ձեր ունեցած տեղեկատվության քանակի վրա: