Գրասենյակային սարքավորումներ

Ինչպես ճիշտ սեղմել լողացող ստորագիրն էջի ներքևի մասում: Այն ամենը, ինչ դուք պետք է իմանաք վայրէջքի էջի էջատակի ձևավորման մասին: Առավելագույն օգտակար և կարևոր տեղեկատվություն

Ստորատակը ցանկացած կայքի կարևոր կառուցվածքային տարր է, այն հաճախ կոչվում է «ստորատակ»: Այն գտնվում է վեբ էջի ներքևում և հակառակ տարրն է վերնագրին (կայքի վերնագիր), որը գտնվում է վերևում։

Նկուղը ծառայում է որպես լրացուցիչ բլոկ՝ ընկերության տվյալները տեղադրելու և կապելու համար։ Պատշաճ կերպով լցված էջատակը լավ է ազդում և բարելավում է դրա օգտագործման հնարավորությունը: Երբեմն այն օգտագործվում է որպես լրացուցիչ գործիք՝ կապարներ հավաքելու օգնական:

Ինչ դնել էջատակի մեջ

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

  • Կապող բլոկ

Նման կապը կարող է լինել հիմնական մենյուի կրկնօրինակումը, որը պարունակում է կարևոր և հայտնի բաժիններ: Եթե ​​բաժիններն ունեն բազմամակարդակ կառուցվածք, դրանք բաժանվում են սյունակների՝ բացատրական վերնագրերով:

աղբյուր sima-land.ru

Պիտակների ամպը կարող է նաև ծառայել որպես փոխկապակցող: Սրանք կարող են լինել տեղեկատվական կայքի հայտնի բաժիններ, կարևոր նորություններ կամ հոդվածներ:

աղբյուր vesti.ru

  • Հեղինակային իրավունք

Կայքի ստորոտը հաճախ պարունակում է տեղեկություններ հեղինակության մասին, նկարագրում է նյութերի օգտագործման և վերարտադրման կանոնները և տեղեկություններ ռեսուրսի մշակողների մասին։

աղբյուր vesti-ural.ru

  • Գործընկերների մասին

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

աղբյուր ekb.rbc.ru

  • Կոնտակտներ

Ստորագրում կարող եք նշել միայն հիմնական կոնտակտային տվյալները՝ հասցեն, հեռախոսը, էլ. փոստը, երբեմն նույնիսկ պարզապես հեռախոսը: Ավելի մանրամասն տեղեկատվություն ներկայացված է կոնտակտների էջում:

աղբյուր uniland.ru

  • Սոցիալական մեդիա

աղբյուր e1.ru

  • Կապարի ձևեր

Օգտատերերի համար հարմար է ստորագրում ունենալ հետադարձ կապի ձև, ներառյալ թույլ տալով նրանց թողնել իրենց կոնտակտները, պատվիրել հետադարձ զանգ կամ բաժանորդագրվել: Բացի այդ, այս տարբերակը թույլ է տալիս ստանալ տվյալներ հետաքրքրված այցելուների մասին։

աղբյուր afisha.yandex.ru

  • Քարտեզ

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

(footer-ը ոտքի ածանցյալն է (անգլերեն) - ոտքը) - սա կայքի ամենացածր հատվածն է, վերնագրի դիմաց՝ վերին հատվածը: Իհարկե, կայքի ղեկավարը՝ վերնագիրը, ամենակարևոր տարրն է, բայց ստորագիրն էլ նման է ոտքերիդ տակ գտնվող հողին՝ այն պետք է լինի դիմացկուն և գործունակ։ Թեև ոչ բոլոր օգտատերերն են ոլորում վեբ էջերը մինչև վերջ, դուք չպետք է անտեսեք կայքի սեխի բաժինը:

Ի՞նչն է ընդունված տեղադրել էջատակի մեջ:

Ստանդարտ ստորագրի տարրերն են.

  1. Սոցիալական ցանցի կոճակներ և սոցիալական ցանցերի խմբի վիդջեթներ
  2. Հղումներ դեպի կայքի հիմնական բաժինները
  3. Հղումներ երրորդ կողմի ռեսուրսներին
  4. Հեղինակային իրավունք
  5. Կոնտակտային տվյալներ
  6. Որոնում

Դուք չպետք է օգտագործեք վերը նշված բոլոր տարրերը միաժամանակ, հակառակ դեպքում նկուղը նման կլինի ամենաավելորդ իրերի իրական աղբանոցին: Անհրաժեշտ է ապահովել, որ ստորագրի տարրերը տեղադրվեն համաչափ և չխախտեն կայքի ընդհանուր հայեցակարգը և գունային սխեման:

Օրիգինալ ստորագիրն այն վայրն է, որտեղ կարող եք զարմացնել ձեր այցելուին

Ստորագիրն այն վայրն է, որտեղ դուք կարող եք իրականացնել շատ հետաքրքիր դիզայներական գաղափարներ, նույնիսկ եթե սա լուրջ կայք է պաշտոնական ընկերություն. Ահա մի քանի հետաքրքիր օրինակ.



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

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

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

Լրացուցիչ ընտրացանկ ստորատատի մեջ

Սովորական պրակտիկա է կայքի մենյուը ստորագրում կրկնօրինակել կամ մի փոքր փոփոխված մենյու տեղադրել: Այնուամենայնիվ, այն հաճախ հրապարակվում է ընդլայնված ձևով, եթե մենյուն ունի բազմաստիճան կառուցվածք: Սա շատ օգտակար է որպես այլընտրանքային նավարկություն. ներքևի մասում հիմնական ընտրացանկը սովորաբար չի նկատվում, բայց օգտագործողը ստիպված չէ լրացուցիչ ջանքեր գործադրել և կարող է անմիջապես գնալ իրեն անհրաժեշտ բաժին: Սա հեշտությամբ կարելի է հետևել՝ օգտագործելով Yandex Metrics-ից կամ Google Analytics-ից օգտվողների կողմից կայքի կոճակների վրա սեղմումների քարտեզը:

Օրինակ, այն կարող է այսպիսի տեսք ունենալ.


Սրանք, թերևս, բոլոր այն հիմնական տարրերն են, որոնք կարող են լինել կայքի ստորոտում և օգտակար լինել այցելուներին։ Ամենակարևորը, որ պետք է հաշվի առնել այս հոդվածից. Մի անտեսեք կայքի այս բաժինը, և դա կօգնի պահպանել այցելուների հավատարմությունը և ավելացնել կայքում անցկացրած ժամանակը:

WordPress-ի բոլոր կաղապարները բաղկացած են մի քանի ֆայլերից, որոնք պատասխանատու են բլոգի այս կամ այն ​​մասի մշակման և ցուցադրման համար՝ վերնագիր, հիմնական բովանդակություն, կողագոտ և ստորագիր: Այսօր կխոսենք վերջինիս մասին։ Ստորագիր (կայքի ստորագիր) նրա ստորին հատվածն է՝ ամբողջ բովանդակությամբ։ Ամենից հաճախ այն օգտագործվում է վեբ վարպետի կողմից՝ տրամադրելու այնպիսի տեղեկություններ, ինչպիսիք են ստեղծման ամսաթիվը, հեղինակային իրավունքի պաշտպանությունը, վերնագիրը և այլն: Բայց դա հեշտ չէ իրականացնել WordPress-ի բոլոր թեմաներում, ոմանք պարզապես էջատակին տեղեկատվություն ավելացնելու պարզ տարբերակներ չունեն:

Ի՞նչ տեղադրել կայքի էջատակում:

Նախ, եկեք որոշենք, թե ինչ տեսակի կայք, ինչ կարող է տեղադրվել նկուղում, վարքագծի գործոնները բարելավելու համար:

Կոնտակտային տվյալներԱռավել հարմար է վեբ խանութների համար: Ճանապարհորդական քարտի հասցեն, հեռախոսահամարը, խանութի կամ կազմակերպության փոստի հասցեն և այլն տեղադրելը նկուղում մարդուն հնարավորություն է տալիս ավելի արագ կատարել պատվեր կամ գնումներ կատարել։

Նավիգացիակամ նավիգացիոն բլոկը կրկնելը հարմար է ցանկացած տեսակի կայքի համար: Սա շատ կարևոր է երկար էջերի համար: Այս դեպքում օգտվողը ստիպված չի լինի վերադառնալ վերև՝ ցանկալի բաժին գնալու համար: Բայց եթե դուք չեք ցանկանում տեղադրել նավիգացիոն բլոկ ստորատակի մեջ, ապա կարող եք արագ վերադառնալ վերև՝ օգտագործելով վեր սլաքը:

Սոցիալական էջանիշներ,եթե ձեր կայքի բովանդակությունը ներառում է զանգվածային քննարկում, կամ դուք հրապարակում եք թեմայի զարգացման հետ կապված իրադարձությունների ակնարկներ, ապա էջատակի մեջ կարող եք տեղադրել հղումներ դեպի սոցիալական մեդիաորտեղ դուք խթանում եք ռեսուրսը: Tag cloud-ը, ինչպես նաև լրացուցիչ նավիգացիոն բլոկը հարմար է բոլոր տեսակի կայքերի համար։ Եռաչափ պիտակների ամպի տեղադրումը ստորագրի մեջ ոչ միայն հարմար կլինի օգտատերերի համար, այլև գեղեցիկ դիզայնի տեսանկյունից:

Հարկ է նշել, որ ստորագիր հղումների վրա սեղմելու հնարավորությունը, եթե այն գեղեցիկ և տեղեկատվական չէ, մոտ է զրոյի՝ նման ստորագրի աննկատելիության պատճառով։

Գեղեցիկ ձևավորված վեբ էջատակների օրինակներ

Գեղեցիկ և տեղեկատվական ստորագիր ստեղծելու համար ձեր ուշադրությանն ենք ներկայացնում վեբ դիզայն ստուդիաների ամենահայտնի աշխատանքները.

1. Ֆրանսիական վեբ ստուդիայի KDIGIT դիզայնի լուծում.

2. Ստորագրի ձևավորում վեբ դիզայն ստուդիայի կողմից SNOWDEN industries.

3. Դիզայներական լուծում շվեդական Uforia CMS ընկերության ստորոտի համար.

4. Նրբագեղ էջատակի ձևավորում Tapbots-ի կողմից.

5. Վեբ դիզայն ստուդիայի ստորագիր Ready made designs:

6. Մեխանիկական էջատակի ձևավորում.

7. Գեղեցիկ էջատակի ձևավորում.

Ինչպես, հուսով եմ, արդեն հասկացել եք, այս բոլոր էջատակներն իրականացվում են գեղեցիկ ֆոնային պատկերների և դրանց վրա տեղադրված տեղեկատվության բլոկների հիման վրա: Եթե ​​դուք առանձնահատուկ դժվարություններ չունեք ֆոնային պատկեր ստեղծելու համար, բարեբախտաբար, դրա համար կան տարբեր պատկերների խմբագրիչներ, ինչպիսիք են Photoshop-ը, ապա բլոկներում տեղեկատվության արագ և հարմար տեղադրմամբ դա հնարավոր է:

Ստորագրին տեղեկատվության բլոկների ավելացում

Առավելագույնը պարզ ձևովէջատակին տեղեկատվության բլոկներ ավելացնելը WordPress-ի ադմինիստրատորի վահանակին կավելացնի ստորագրի վիջեթների բլոկ: Վիդջեթների նման բլոկ ստեղծելու համար անհրաժեշտ է բացել admin menu—>editor և աջ կողմի սյունակում ընտրել functions.php ֆայլը, որում ավելացնում ենք կոդը.

if (function_exists("register_sidebar")) register_sidebar(array("name" => "Footer Sidebar", "before_widget" => "", "after_widget" => "", "before_title" => "

", "after_title" => "
",));

if (function_exists("register_sidebar") )

գրանցման_կողային տող(զանգված(

"name" => "Foter Sidebar" ,

"before_widget" => "" ,

"after_widget" => "" ,

"նախքան_վերնագիրը" => "

" ,

"after_title" => "

" , ) ) ;

Սա ադմինիստրատորի վահանակում վիջեթների նոր բլոկի գրանցման ծածկագիրն է, որտեղ «անունը» վիջեթի անունն է, «before_widget»՝ վիջեթից առաջ ցուցադրվող HTML կոդը, իսկ «after_widget»՝ ցուցադրվող HTML կոդը վիջեթը, ինչպես նաև ծածկագիրը վերնագրի վերնագրից առաջ և հետո: Այն սովորաբար ավելացվում է functions.php ֆայլի հենց սկզբում։

Պահպանեք functions.php-ի բովանդակությունը և անցեք «Վիդջեթներ» բաժին: Եթե ​​ամեն ինչ արվել է առանց սխալների, ապա այնտեղ կգտնեք նոր բլոկ.

Այսպիսով, մենք ստեղծել ենք վիջեթների նոր բլոկի ցուցադրում ադմինիստրատորի մենյուում, այժմ մենք պետք է ցուցադրենք այս բլոկի վիդջեթները կայքում։ Դա անելու համար բացեք ադմինիստրատորի ընտրացանկը -> խմբագիր և աջ կողմում ընտրեք footer.php ֆայլը, ի դեպ, նման վիջեթների բլոկները կարող են ցուցադրվել ոչ միայն ստորագրում, այլև կայքի ցանկացած այլ վայրում։

footer.php ֆայլում ավելացրեք հետևյալ կոդը.

Մենք սկսում ենք CMS Joomla 3-ում կաղապարների խմբագրման հինգերորդ դասը, այս անգամ կխոսենք կայքի ստորագրի մասին։ Դիտարկենք էջատակի ձևավորման հնարավոր տարբերակները և դրա ստեղծման որոշ մոտեցումներ:

Ինչ է ստորագիր

Կայքի ստորագիր կամ ստորագիր նրա ամենացածր հատվածն է, որը սովորաբար պարունակում է տեղեկություններ կայքի, հեղինակային իրավունքի և այլնի մասին։ Ստանդարտ տարբերակը կաղապարում Պրոտոստար, էջատակը չի պարունակում որևէ իմաստալից տեղեկատվություն.

Ստորագրի ստանդարտ բովանդակությունը ընթացիկ տարին է, կայքի անվանումը և էջի վերև տանող «Վերադառնալ սկիզբ» հղումը: Անկեղծ ասած, ստորագրի այս տարբերակը բոլորովին անօգուտ է մեր կայքի այցելուների համար, բացի այդ, «Վերադառնալ սկիզբ» հղումը մեր դեպքում բացարձակապես ավելորդ է, մենք արդեն գեղեցիկ կոճակ ենք պատրաստել այս նպատակների համար:

Ուստի, սկսելու համար, ես առաջարկում եմ ազատվել ստանդարտ ստորագիր բովանդակությունից: Բացեք ֆայլը index.phpստանդարտ Protostar ձևանմուշ և փնտրեք կոդը, որը պատասխանատու է ստորագրի ցուցադրման համար: 205 և 219 տողերի միջև ընկած կոդը պատասխանատու է ստորագիր ցուցադրելու համար, որն ունի հետևյալ տեսքը (կախված Joomla-ի տարբերակից և ինդեքսային ֆայլում կատարված փոփոխություններից՝ կոդի տողերը կարող են տարբերվել).

">

Այժմ եկեք հեռացնենք լրացուցիչ կոդը 210-ից 217 տողերից, արդյունքում ստորագրի կոդը կլինի այսպիսին.

">

Ըստ էության, մենք հանեցինք այն ամենը, ինչ հնարավոր էր, թողնելով միայն ստորագրում մոդուլներ ցուցադրելու հնարավորությունը.

Մենք պահպանում ենք ինդեքսային ֆայլը, գնում ենք կայք և թարմացնում ենք էջը։ Ստորագրի բովանդակությունը անհետացավ, ինչը մենք ուզում էինք: Այժմ դուք կարող եք ձեր հայեցողությամբ նոր տեղեկատվություն ավելացնել էջատակին, բայց նախքան այն ավելացնելը, արժե պատասխանել այն հարցին, թե ինչ կարող է լինել կայքի ստորագիր:

Ինչ տեղեկատվություն ցուցադրել կայքի ստորագրում

Ստորագիրն արդյունավետ դարձնելու համար այն պետք է պարունակի տեղեկատվություն, որը կարող է հետաքրքրել կայքի այցելուներին: Կախված կայքի ուշադրության կենտրոնում, այս տեղեկատվությունը կարող է տարբեր լինել: Ահա նույն տեղեկատվության փոքր օրինակը, որը կարող է պարունակվել ստորոտում.

  • Լրացուցիչ մենյու- այս ընտրացանկը կարող է կրկնօրինակել գոյություն ունեցողը կամ եզակի լինել: Ստորագրում մենյուի կրկնօրինակումը օգտակար է, երբ ձեր կայք հաճախ այցելում են շարժական սարքերից, այցելուն, ոլորելով էջի ամենաներքևի հատվածը, կարող է օգտվել կայքի լրացուցիչ նավիգացիայից:
  • Կոնտակտային տվյալներ- Կայքեր վաճառելու համար կամ տարբեր ծառայություններ մատուցող կայքերի համար կոնտակտային տվյալների առկայությունը պարզապես անհրաժեշտ է, իսկ էջատակը դրա տեղն է։
  • Սոցիալական մեդիայի կոճակներ- Ժամանակակից աշխարհում սոցիալական ցանցերը շատերի համար ամեն ինչ են, ուստի նման տեղեկատվությունը երբեք ավելորդ չի լինի:
  • Տարբեր հղումներ- օրինակ, հղումներ դեպի կայքի քարտեզ, նորությունների հոսքեր և այլն:
  • Վիդջեթներ- Դուք կարող եք էջատակում ցուցադրել տեղեկատվությունը, որն արտացոլում է կայքի գործունեությունը, երթևեկության հաշվիչները, վերջին մեկնաբանությունները և այլն:
  • Գովազդ- գալիս է մի պահ, երբ ցանկանում ես կայքից ստանալ ոչ միայն դրա առկայությունը, այլև շահույթը, այս դեպքում էջատակը կարող է վատ կոնտեյներ չլինել գովազդի համար։

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

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

Կայքի համար ստորագիր ստեղծելը

Հիմա եկեք վերացնենք տեսությունը և անմիջապես անցնենք ստորագիր ստեղծելուն: Ստորագիր ձևավորելու մի քանի եղանակ կարող է լինել.

  • Ավտոմատ- ներառում է տարբեր մոդուլների օգտագործում՝ որոշակի տեղեկատվություն ցուցադրելու համար
  • Ձեռնարկ- մոդուլները չեն օգտագործվում, բոլոր փոփոխությունները կատարվում են ձեռքով, օգտագործելով կաղապարի ֆայլերի խմբագրման գործիքները
  • Խառը- այս դեպքում վերը նշված երկու տարբերակներն էլ օգտագործվում են միասին

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

Բոլոր հնարավոր տարբերակները դիտարկելու համար ես կընտրեմ երրորդ տարբերակը։ Այսպիսով, դուք ընդհանուր պատկերացում կունենաք այն մասին, թե ինչ է խմբագրվում և ինչպես:

Որպես օրինակ՝ ես որոշեցի էջատակը բաժանել երեք ուղղահայաց մասերի, ձախ կողմում կցուցադրվեն կայքի որոշակի էջերի հղումներ, կենտրոնում կլինի ինչ-որ լոգո, իսկ աջում՝ փոքր տեքստ: Մոդուլները պատասխանատու կլինեն ստորագրի ձախ և աջ մասերի ցուցադրման համար, իսկ լոգոն ձեռքով կգրենք ինդեքսային ֆայլում։

Նախ, եկեք մոդուլների համար ստեղծենք նոր դիրքեր ստորոտում (մենք խոսեցինք, թե ինչպես դա անել կաղապարների տեղադրման և խմբագրման դասում) երկու մասի չափով: Քանի որ դրանք տեղակայված կլինեն ստորագրի ձախ և աջ կողմերում, նրանք ունեն համապատասխան անվանում. ստորագիր-ձախԵվ ստորագիր-աջ. Մենք դրանք հայտարարագրում ենք ֆայլում templateDetails.xml.

Այժմ մենք փոփոխություններ ենք կատարում կաղապարի ինդեքսային ֆայլում, իմ կոդը ստացվեց այսպես.

baseurl. «կաղապարներ/»: $this->template . "/images/joom4all.png"?>" />

Եվ պարզության համար, սքրինշոթ.

Պարզ է, թե ինչպես են ցուցադրվում մոդուլները, բայց ես կցանկանայի ավելի մանրամասն անդրադառնալ տարբերանշանի վրա: Լոգոյի ցուցադրման համար պատասխանատու կոդը հետևյալն է.

baseurl. «կաղապարներ/»: $this->template . "/images/joom4all.png"?>" />

Առաջին հայացքից այն կարծես սովորական HTML թեգ լինի պատկերի համար, բայց սովորական ֆայլի ուղու փոխարեն գրված է PHP կոդ։ Այս ծածկագիրը կարող է առաջին հայացքից բարդ և անհասկանալի թվալ, բայց իրականում, եթե նայեք դրան, պարզ է դառնում, որ դրանում ոչ մի բարդ բան չկա.

  • - php կոդի սկիզբ
  • արձագանք- պատասխանատու է տողի թողարկման համար
  • $this->baseurl- այս տողը վերադարձնում է կայքի անունը
  • կաղապարներ/- այստեղ մենք նշում ենք, որ պատկերը պահվում է կաղապարների թղթապանակում
  • $this->կաղապար- վերադարձնում է ընթացիկ ձևանմուշի անունը
  • /images/joom4all.png- կաղապարի արմատային թղթապանակի ներսում գտնվող պատկերի ուղին և պատկերով ֆայլի անվանումը
  • ?> - php կոդի ավարտը

Այս php կոդը օգտագործելու արդյունքում մենք ստանում ենք պատկերի ֆայլի հարաբերական ճանապարհը։ Այսինքն, անկախ նրանից, թե կայքը ինչ անվանում ունի կամ ինչ կաղապար է օգտագործվում, պատկերը կվերցվի ընտրված կաղապարի պատկերների թղթապանակից։

Մենք պահպանում ենք index.php ֆայլը, այժմ կարող ենք փակել այն, այն մեզ այլևս պետք չի լինի։

Այժմ ստեղծենք մի քանի մոդուլներ, որոնք կցուցադրենք նորաստեղծ նոր դիրքերում։ Առաջին մոդուլը ստորագրում կցուցադրի մենյու, իսկ երկրորդը՝ փոքր տեքստ:

Հաջորդ փուլում մենք ստեղծում ենք մոդուլներ՝ «Մենյու» տիպով մենյուի և «HTML կոդ» տեսակի տեքստի համար (ինչպես ստեղծել մոդուլ): Նրանց համար որպես դիրքեր ընտրում ենք նորաստեղծ մոդուլի դիրքերը.

Մեր ստորագրի ընտրացանկը կայքի մնացած մենյուից տարբերելու համար մենյուի մոդուլի կարգավորումներում մենք դրան ավելացնում ենք «_footer» դասի վերջածանցը.

Որպեսզի չբացատրեմ, թե ինչպիսի մոդուլ է «HTML կոդ» տիպով, ես ցույց կտամ դրա գործողության սկզբունքը սքրինշոթում.

Ես այս մոդուլը լցրեցի որոշակի տեքստով, որը կցուցադրվի ստորագրի մեջ, բացի սովորական տեքստից, ես գրեցի մի փոքրիկ php կոդ, որը ցույց է տալիս ընթացիկ տարին.

Մենք պահպանում ենք մոդուլները և գնում ենք կայք՝ արդյունքը ստուգելու համար, և սա այն է, ինչ ես ստացա.

Թեև արդյունքը կա, բայց այն այնքան էլ տպավորիչ չէ։ Այժմ մենք պետք է ավելի ադեկվատ ձևավորենք ստորագրի տարրերը՝ օգտագործելով CSS:

Նախ, եկեք ստեղծենք նոր էջատակի բլոկներ.

Foot-left, .foot-center(float: ձախ;) /*footer block-ի հավասարեցում*/ .foot-left (լայնությունը՝ 20%;) /*ձախ բլոկի լայնությունը*/ .foot-center (լուսանցք-ձախ՝ -6px ;) /*կենտրոնական բլոկի նահանջ*/ .foot-right ( /*աջ բլոկ*/ float՝ ոչ մեկը, բարձրությունը՝ 60px; )

Սթայլինգի հաջորդ թեկնածուն ճաշացանկն է, որի վրա կիրառել եմ հետևյալ ոճերը.

Ul.nav.menu_footer (լուսանցք՝ 0;) /*զրո լուսանցք մենյուի համար*/ ul.nav.menu_footer li ( /*մենյուի տեքստի ձևավորում*/ տառատեսակ՝ «Lobster», ոլորագիր; տառաչափ՝ 16px ; տող -բարձրություն՝ 18px ) ul.nav.menu_footer li.item-179 a (/*Sitemap menu item*/ margin-left: 15px; color՝ #fc8f30;) ul.nav.menu_footer li.item-180 a ( /*Մենյուի տարր Կայքի մասին*/ գույնը՝ #5aa426; եզրագծում՝ 3px կոշտ #5aa426; ) ul.nav.menu_footer li.item-181 a ( /*Ցանկի տարր Կոնտակտներ*/ լուսանցք-ձախ՝ 45px; եզրագիծ-ներքև՝ 3px կոշտ #0f70ad գույն՝ #0f70ad;

Եվ վերջապես, բովանդակության հիմնական մասից առանձնացնում ենք էջատակը.

Footer.footer hr (border-top: 3px solid #fc8f30;) /*ստորատակը առանձնացնել հիմնական բովանդակությունից*/

Պահպանեք ոճի ֆայլը, գնացեք կայք և նայեք արդյունքին.

Այսպիսով, մենք ստեղծեցինք ստորագիր մեր կայքի համար, որը շատ ավելի զվարճալի տեսք ունի, քան ստանդարտը: Սա ավարտում է այս դասը, իսկ հաջորդ դասում մենք կստուգենք հարմարվողական դիզայնի հնարավոր սխալները և կշտկենք որոշ թերություններ: Բացի այդ, խորհուրդ եմ տալիս կարդալ հոդվածը, թե ինչպես արագ ստեղծել Joomla 3 կաղապար և մասնավորապես զրոյից ստորագիր Bootstrap-ի միջոցով:

Սա ինչ-որ մղձավանջ է: Ինչու՞ է ձեր կայքի էջատակը նորից «բացվում» և փոխում դիզայնը: Իսկապե՞ս անհնար է ինչ-որ բանով էջատակը ճիշտ սեղմել էջի ներքևի մասում: Բովանդակություն կամ աղյուսներ առնվազն: Աղյուսը չի՞ տեղավորվի մոնիտորի մեջ:

Տեսնում եմ, հետո նստիր ու ոչինչ չանես, քանի դեռ չես կարդում մեր հոդվածը մինչև վերջ։

Ձեր կայքի համար ճիշտ ստորագիր պատրաստելը

Շատ կայքերի սեփականատերեր բախվում են այս խնդրին, երբ էջի ստորագիրն ուղղակի լողում է դեպի վերև: Եվ հետո պարզ չէ, թե ինչ անել: Ամենից հաճախ, վեբ կայքերի նախագծերը, որոնք հավաքվել են շտապում, ինքնուրույն, տառապում են այս թերությունից ( շրջան «խելագար ձեռքեր») կամ սկսնակ վեբ վարպետներ:

Միևնույն ժամանակ, ոչ մի սարսափելի բան տեղի չի ունենում կայքի կյանքի առաջին փուլերում: Եվ այս իդիլիան շարունակվում է այնքան ժամանակ, քանի դեռ բովանդակությունը «իր ծանրությամբ» սեղմում է նկուղը՝ թույլ չտալով վեր բարձրանալ։ Բայց արժե էջի վրա ավելի փոքր ծավալի նյութեր տեղադրել, և վերջերս «հանգիստ» ստորագիրն անմիջապես բարձրանում է վերև՝ բերելով կայքի ամբողջ դիզայնը ոչ պատշաճ տեսքի:

Նախագծված կաղապարի այս «թերությունը» վերացնելու համար հարկավոր չէ գումար ծախսել վեբ վարպետի ծառայությունների վրա։ Ամենից հաճախ կայքի էջատակը կարող է տեղադրվել ինքներդ: Դիտարկենք այս խնդիրը վերացնելու բոլոր հնարավոր տարբերակները.

Առաջին ճանապարհը

Էջի ներքևի մասում ստորագիր ամրացնելու առաջին ձևը հիմնված է CSS-ի վրա: Սկսենք օրինակի կոդից, այնուհետև ավելի մանրամասն նայենք դրա իրականացմանը.

html ( բարձրություն՝ 100%; ) վերնագիր, նավարկություն, բաժին, հոդված, մի կողմ, էջատակ ( ցուցադրում՝ բլոկ; ) մարմին ( բարձրություն՝ 100%; ) #փաթաթան ( լայնություն՝ 1000 px; լուսանցք՝ 0 ավտոմատ, րոպե բարձրություն՝ 100 %; բարձրություն՝ ավտոմատ !կարևոր է; բարձրություն՝ 100% );

Էջի ներքևի մասում ստորագիր պիտակ կցելու համար

մենք այն տեղափոխեցինք տարայից դուրս (շերտային փաթաթան): Մենք ամբողջ էջը և «մարմնի» պարունակությունը ձգում ենք էկրանի եզրերին: Դա անելու համար մենք սահմանում ենք պիտակների բարձրությունը CSS կոդի մեջ Եվ 100% -ով:

html (բարձրությունը՝ 100%; ) մարմինը (բարձրությունը՝ 100%; )

Մենք նաև սահմանել ենք տարայի շերտի նվազագույն բարձրությունը 100%: Այն դեպքում, երբ բովանդակության լայնությունը մեծ է կոնտեյների բարձրությունից, հատկությունը սահմանեք auto ։ Դրա շնորհիվ փաթաթանն ավտոմատ կերպով կհարմարվի էջում տեղադրված բովանդակության լայնությանը.

#փաթաթան (min-բարձրությունը՝ 100%, բարձրությունը՝ ավտոմատ !կարևոր է, բարձրությունը՝ 100%; )

Կոդի «բարձրություն. 100%» տողը նախատեսված է IE-ի հին տարբերակների համար, որոնք չեն ընդունում min-height հատկությունը:

Էջի ձևավորման մեջ ստորագրի համար տարածություն առանձնացնելու համար մենք պիտակի համար նահանջ ենք սահմանում 100 պիքսելում՝

#բովանդակություն (լիցք՝ 100px; )

Այս փուլում մենք ունենք ամբողջ էկրանով լայնածավալ վեբ էջ և լրացուցիչ 100 պիքսել, որը «չեզոքացվում է» ստորագրի բացասական լուսանցքի արժեքով (լուսանցք՝ -100px), որի դիրքը դրված է հարաբերական (դիրք՝ հարաբերական) . Այսպիսով, օգտագործելով բացասական լիցքավորող արժեք, մենք «քաշում ենք» ստորոտը տարայի տարածք, որի բարձրությունը սահմանված է 100%:

Այս օրինակում վեբ փաստաթղթի նշագրումը նշվում է համեմատաբար նոր HTML 5 թեգերի միջոցով, որոնք կարող են ճիշտ չմեկնաբանվել հին բրաուզերների կողմից: Դրա պատճառով էջի ամբողջ դիզայնը կարող է ճիշտ չցուցադրվել: Դրանից խուսափելու համար հարկավոր է հիպերտեքստային լեզվի 5-րդ տարբերակի զինանոցից նոր պիտակները փոխարինել սովորականներով։

:

բովանդակությունը

Բարելավված տարբերակ

Վերևում քննարկված մեթոդը, թե ինչպես կարելի է էջի ներքևում գտնվող ստորագիրն «անսասան» դարձնել, բոլորի համար հարմար չէ: Եթե ​​ապագայում պատրաստվում եք փոփոխել և բարելավել ձեր կայքի դիզայնը՝ թռուցիկ պատուհանների միջոցով, ապա ավելի լավ է դադարեցնել նախկին ներդրումը։

Ամենից հաճախ օգտագործվող CSS հատկությունը թռուցիկ պատուհանների համար z-index-ն է: Օգտագործելով դրա արժեքները, դուք սահմանում եք շերտերը միմյանց վրա դրված կարգը:

Որքան բարձր լինի տարրի z-ի ցուցիչը, այնքան այն կհայտնվի ընդհանուր «շերտավորման» կույտում:

Բայց քանի որ նախորդ օրինակում մենք օգտագործել ենք ներդիրի բացասական արժեք, ելնող պատուհանի ներքևի մասը կհամընկնի վերևի էջատակի տարածքի վրա: Թեև այն կունենա ավելի բարձր z-ինդեքսի արժեք: Քանի որ ելնող պատուհանի մայրը (փաթաթան) դեռևս ավելի ցածր արժեք ունի այս հատկության համար:

Ահա ավելի առաջադեմ տարբերակ.

CSS - օրինակ կոդ.

html, մարմին ( բարձրություն՝ 100%; ) .վերնագիր ( բարձրություն՝ 120px; ֆոնի գույն՝ rgb(0,255,102); ) .հիմնական ( min-բարձրություն:100%; դիրքը՝ հարաբերական; ֆոնի գույնը՝ rgb(100,255,255); ) .footer (բարձրությունը՝ 150px; դիրքը՝ բացարձակ; ձախը՝ 0; ներքևում՝ 0; լայնությունը՝ 100%, ֆոնի գույնը՝ rgb(0,0,153); )

Ինչպես երևում է ծածկագրից, մենք տեղադրեցինք էջատակը որպես հիմնական տարրի մաս: Մենք սահմանել ենք կոնտեյների հարաբերական դիրքը, իսկ ստորագրի համար բացարձակ դիրքավորումը: Մենք ամրացրել ենք նկուղը տարայի հենց ներքևում, նրա դիրքը ձախ և վերևում դնելով 0-ի:

Ոչ ֆիքսված բարձրությամբ նկուղի տարբերակ

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

Սա կպահանջի ավելի առաջադեմ տարբերակ ոչ ֆիքսված նկուղի համար: Այն իր ցուցադրման հատկության համար ստորագիր է դնում աղյուսակի տողի վրա: Դրանով այն կհայտնվի որպես աղյուսակի տող: