• Windows 10
• Ինտերնետ, WiFi
• Օգտակար
• Windows 7
• Սխալներ

Վեբ դասավորության ուսուցում. HTML և CSS դասընթացներ. Համացանցը դժվար է՝ դասավորության ուսումնասիրության ծառայություն

• Ոճերը կարգավորումների մի շարք են, որոնք որոշում են վեբ էջի տարրերի դիրքը, տեսքը և ֆունկցիոնալությունը: Ոճերի հիմնական առավելությունն այն է, որ դրանք ֆորմատավորման, ձևավորման և դասավորության համար շատ ավելի շատ տարբերակներ են տրամադրում՝ համեմատած հայրենի HTML-ի հետ: Այս հզոր համակարգը կարող է հավաքվել առանձին փաստաթղթերում, որպեսզի այն չխառնվի HTML կոդի հետ: Սա հիմքն է; ավելին, ավելի պարզ և պարզ - այստեղ՝ http://htmlbook.ru: Սկսեք ձեր ծանոթությունը «CSS» բաժնի հետ «Ձեռնարկից», և տեղեկագիրքը մեծապես կհեշտացնի անծանոթ տերմինների ըմբռնումը: Ապագայում ձեզ անհրաժեշտ կլինի նաև «Block layout» բաժինը։
• Նրանց համար, ովքեր հատկապես համառ են և հետաքրքրասեր են ծրագրավորման հարցում, խորհուրդ ենք տալիս http://www.xiper.net, http://css-live.ru կայքերը: Ահա դասեր, որոնք բացահայտում են HTML-ում և CSS-ում «առաջադեմ» տեխնիկայի օգտագործման գաղտնիքները: Եթե ​​խոսում եք անգլերեն, անպայման այցելեք http://css-tricks.com/ , http://net.tutsplus.com/ ռեսուրսները, որտեղ կարող եք գտնել ոչ միայն տեքստային, այլև տեսադասեր։

Աերոբատիկա - JavaScript!

JavaScript լեզվի օգտագործումը ձեր վեբ էջերը կդարձնի ինտերակտիվ: Երբ ուսումնասիրեք այս ավելի լուրջ դասավորությունը, դանդաղորեն ներառեք JavaScript-ը ձեր HTML-ում:

• http://javascript.ru ռեսուրսը ունի բավարար տեղեկատվական բազա այս լեզուն սովորելու համար: Այն ներառում է բազմաթիվ անհրաժեշտ նյութեր, քննարկումներ և խորհուրդներ որակյալ ուսուցման համար:
• Դեյվիդ Ֆլանագանի JavaScript-ի առաջին մասը Մանրամասն ուղեցույց” հիանալի ուղեցույց կլինի JavaScript-ի հիմունքների համար: Երկրորդ մասը նկարագրում է բրաուզերների կողմից տրամադրվող սցենարների մշակման միջավայրը: Երրորդ մասը ընդարձակ հղում է հիմնական JavaScript-ի համար, չորրորդը՝ հաճախորդի կողմից:
• Վեբ էջերում JavaScript-ի ներմուծումը պարզեցնելու համար օգտագործվում է jQuery գրադարանը, որը գրված է նաև JavaScript-ով: Պաշտոնական կայքը http://jquery.com և jQuery Advanced JavaScript Guide Definitive Guide-ը (Ber Bibo, Yehuda Katz) պարզաբանում են այն ամենը, ինչ դուք պետք է իմանաք լեզվի մասին հեշտ հասկանալի ձևով:
• Mootools-ը՝ անվճար մոդուլային շրջանակը, նշանակալի օգնություն է տրամադրում JavaScript-ի մշակմանը:

Փոքր հնարքներ մեծ վարպետներից

Նույնիսկ փորձառու գրամեքենաների համար մենք պատրաստ ենք տրամադրել տեղեկատվություն, որը կարող է զգալիորեն բարելավել աշխատանքը։ Օպտիմիզացված դասավորության կոդի ստեղծման հարցում ձեզ անպայման պետք կլինի hthttp://www.xiper.net կայքը։ Առաջնորդվեք «Սովորել» և «Պատրաստի հնարքներ» բաժիններով, որոնք պարունակում են սկրիպտների օգտագործման առաջադեմ լուծումներ և տեխնոլոգիա։

Կան նաև բազմաթիվ ծառայություններ դասավորության օպտիմալացման համար: Խորհուրդ ենք տալիս ուշադրություն դարձնել այս թեմայի վերաբերյալ ռեսուրսներին.

1. http://www.google.com/webfonts; - կտրամադրի տառատեսակների հավաքածու, որը կարող է ներառվել ձեր էջերում:
2. http://www.fontsquirrel.com/fontface/generator - Փոխակերպում է ցանկացած տառատեսակ և ստեղծում է CSS կոդ՝ ոճի թերթիկում տեղադրելու համար:
3. http://stm.dp.ua/web-design/color-html.php - գույների և դրանց կոդերի լայն ընտրանի:
4. CSS sprite ծառայությունը կնվազեցնի ձեր կայքի կողմից ուղարկված գրաֆիկական ակտիվները ներբեռնելու HTTP հարցումների քանակը: Այս մասին ավելին կպատմի http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html հոդվածը:
5. http://htmlbook.ru կայքի «Փաստաթղթերի վավերացում» բաժինը ձեզ կծանոթացնի վավերացնողների հայեցակարգին: Յուրաքանչյուր էջի կոդը պետք է համապատասխանի բնութագրին, որը մշակվել է W3 կոնսորցիումի կողմից www.w3c.org: Վալիդատորների մի քանի օրինակ (ստուգում html կոդը և css կոդը) հասանելի է այստեղ՝ http://validator.w3.org/, http://jigsaw.w3.org/css-validator/:
6. http://caniuse.com - բրաուզերի համատեղելիության ստուգում - ծառայություն, որը կօգնի խուսափել տարբեր դասավորության ցուցադրումից մի քանի բրաուզերում:

+ Խոստացված գեղեցիկ բոնուս

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

• Mark Pilgrim HTML5. Բարձրանալ և վազել»
• Էրիկ Մեյեր «CSS - Կասկադային ոճերի թերթիկներ. վերջնական ուղեցույց»
• Peter Lubbers, Brian Albers, Frank Salim «HTML5 մասնագետների համար. հզոր գործիքներ ժամանակակից վեբ հավելվածների մշակման համար»
• Stephen Schafer HTML, XHTML և CSS: Օգտագործողի Աստվածաշունչը»
• Էրիկ Ֆրիմեն, Էլիզաբեթ Ֆրիմեն Սովորեք HTML, XHTML և CSS:

P.S. Երբ դուք որոշել եք սովորել HTML, մի օգտագործեք հատուկ խմբագրիչներ: Գրեք սովորական նոթատետրում կամ Notepad++-ում, սա կօգնի ձեզ արագ ձեռք բերել անհրաժեշտ հմտությունները: Եթե ​​դուք ինտերակտիվ հաղորդակցության կողմնակից եք, դարձեք մասնագիտացված ֆորումների հաճախակի հյուր.

• http://www.cyberforum.ru/html/
• http://ru.html.net/forums/viewforum.php?f=49
• http://www.html.by/
• http://forum.htmlbook.ru/

Խորհուրդ խնդրեք ավելի փորձառու գործընկերներից, կիսվեք ձեր սեփական գիտելիքներով սկսնակների հետ:

Հուսով ենք, որ այս հոդվածը ձեզ համար արժանի ուղեցույց կլինի ծրագրավորում սովորելու համար: Հետևյալ նյութը նվիրված կլինի սերվերի կողմից ծրագրավորման PHP լեզվին:

Ձեզ հետաքրքրում է հարցը ինչպես ինքնուրույն սովորել կայքի դասավորությունը? Համապատասխան հաստատակամությամբ յուրաքանչյուրը կարող է սովորել կայքերի դասավորությունը:

Այսօրվա գրառման թեման. Որտեղի՞ց սկսել դասավորությունը սովորել:Այս հարցը հեռու է պարապ լինելուց, և յուրաքանչյուրն ինքն է ընտրում իր ճանապարհը։ Ես ձեզ կպատմեմ այն ​​մասին, թե ինչպես ես ինքս սկսեցի այս հետաքրքրաշարժ ճանապարհորդությունը դեպի աշխարհ HTMLԵվ CSS.Հուսով եմ, որ ձեզանից ոմանց համար սա կդառնա, եթե ոչ առաջնորդող աստղ, ապա գոնե ուղեցույց դեպի նպատակ:

Այսպիսով, ինչ է կայքի դասավորությունը? Ով դեռ տանկի մեջ չէ, լսեք. դասավորությունը այս դեպքում չի նշանակում «Իսկրա» թերթում տպագրել նոր հոդվածը կապարատառերով, այլ Photoshop-ում նկարված կայքի դասավորությունը ուղղակիորեն աշխատանքային կայքի վերածել:

Այլ կերպ ասած, դասավորությունը կոդավորումն է, HTML-ով տվյալներ գրելը, որոնք իրեն հարգող ցանկացած բրաուզեր կվերածի գեղեցիկ և հասկանալի կայքի:

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

Այսպիսով, որտեղի՞ց եք սկսել սովորել HTML: Առաջին բանը, որ գալիս է մտքին, գիրք գնելն է: Եվ որքան հաստ է, այնքան լավ: Միգուցե սա ինչ-որ մեկին օգտակար կլինի:

Բայց անձամբ, նման «աղյուսների» փորձից հետո, ես հստակ վանող ռեֆլեքս եմ զարգացրել։ Այն պարզ պատճառով, որ այնտեղ տեղեկատվությունն ավելորդ է մատակարարվում։

Հիշում եք դպրոցը: Սովորական քաղաքացին կարիք չունի իմանալու քիմիա, ֆիզիկա, անատոմիա և այլն, այնքանով, որքանով փորձում է մտցնել իր ուղեղի մեջ։

Ահա այսպես. հաստ գրքում շատ ավելորդ կա, իսկ երբ շատ է, այն մթագնում է աչքերը, հորանջում և ուսումը վերածում 2-3 օրվա տանջանքների, որին հաջորդում է այս գիտությունը հեռուն նետելու մեջ։ վառարանը։ Եվ վերջ։

Այսպիսով, ես անձամբ գնացի այլ ճանապարհով: Ես գնել եմ գիրքը: Ամենևին չաղ. Եվ ես դեռ չեմ հոգնում այն ​​խորհուրդ տալ իմ ուսանողներին, քանի որ գրքի արդիականությունը դեռ թարմ է և պահանջված: գրքի հեղինակ Արտեմի Լոմով, բայց դա կոչվում է «HTML, CSS, սցենարներ. կայքեր ստեղծելու պրակտիկա». «ԲՀՎ-Պետերբուրգ» հրատարակչություն.

Այս գրքում ամեն ինչ չափավոր է. կա մի քիչ վեբ պատմություն, մի քիչ ստանդարտների մասին: Բայց ամենակարևորը, HTML-ի, CSS-ի և JavaScript-ի հիմնական նյութը շատ հասկանալի և պարզ է ներկայացված: Սկսնակների համար, ովքեր սովորում են կայքի դասավորությունը, դա պարզապես պարտադիր է:

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

Իմ երկրորդ նման գիրքը Վլադիմիր Դրոնովի Macromedia Dreamweaver ձեռնարկի էլեկտրոնային տարբերակն էր:

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

Այս ծրագրի մեծ պլյուսը ցանցում գոյություն ունեցող ցանկացած կայք դիտելու հնարավորությունն է (կրկին երկակի ռեժիմով):

Օրինակ, ինձ դուր եկավ բլոկների գեղեցիկ և հարմար տեղադրմամբ կայք, ես պահպանեցի ամբողջ էջը նկարներով, իսկ հետո գործարկեցի այս էջը Dream-ում: Եվ վոյլա! Դուք կարող եք տեսնել ամեն ինչ, որտեղ և ինչ: Չնայած սկզբում ամեն ինչ այնքան ակնհայտ չէ, որքան մենք կցանկանայինք։ Դա պարզապես գիրքն է, այստեղ պարզապես հիանալի օգնական է:

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

Ի դեպ, կառուցվածքը ցանկացած լեզու սովորելու ամենակարեւոր գործոնն է։ Իսկ HTML-ը նույնպես լեզու է։ Իսկ այս կառույցի մասին կխոսեմ հաջորդ անգամ։

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

UPD թվագրված 10/25/2012Սկսնակների համար խորհուրդ եմ տալիս այս հոդվածը. Դասավորության դիզայների ուղին: Այնտեղ ամեն ինչ շատ ավելի մանրամասն է՝ հղումներով և այլ օգտակար բաներով։

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

Որտեղի՞ց է սկսվում դասավորությունը:

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

Դասավորության դիզայների հիմնական խնդիրն է մշակել իրեն հասած նյութը տեքստերի, պատկերների, կատալոգների և այլնի տեսքով և այն վերածել վեբ էջերի՝ հիմնված հաստատված վեբ դիզայնի վրա։

Այնուամենայնիվ, պատկերացրեք, որ դուք 2-ը 1-ում դասավորության դիզայներ եք, և ինչ-ինչ պատճառներով ստիպված եք եղել տպագրել դասավորությունը դիզայների փոխարեն, ով չի հետաքրքրում ձեր խնդիրներին:

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

Ժամանակի ընթացքում դուք ինքներդ կսկսեք զգալ, թե ինչն է գեղեցիկ, իսկ ինչը՝ ոչ։ Հենց սկզբում դուք կարող եք պարզապես վերցնել և նկարել, օրինակ, այլ մարդկանց ինտերֆեյսի տարրերը։ Սա ձեզ կստիպի մտածել, թե ինչպես են կառուցված հենց այս տարրերը և ինչից են դրանք բաղկացած: Եվ այդ ժամանակ գեղեցիկ դիզայնը կդադարի ձեզ համար առասպելական բան լինել, քանի որ դուք կիմանաք, թե ինչպես ստեղծել նման բան:

Կայքի դասավորության գործիքներ

Ինչ վերաբերում է գործիքներին, շատ վեբ դիզայներներ օգտագործում են Adobe Photoshop ինտերֆեյս ստեղծելու համար: Այս ծրագրով դուք կարող եք ամեն ինչ անել:

Կան մարդիկ, ովքեր աշխատում են միայն վեկտորային գրաֆիկայի հետ և օգտագործում են դրանք դասավորություններ ստեղծելու համար Adobe Illustrator.
Եվ մեկ այլ խմբագիր, որը ես չեմ փորձել, բայց որը, ըստ լուրերի, բավականին արժանի այլընտրանք է վերը նշվածին, Sketch-ն է, բայց այն աշխատում է միայն Mac OS-ով։

Ծանոթացում - HTML

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

Ամենատարրական վեբ ռեսուրսը ոչ այլ ինչ է, քան HTML էջերի մի շարք: Եթե ​​կայքը ստատիկ է, ապա դասավորությունից հետո դուք իրականում կստանաք դրա վերջնական տարբերակը, և ոչ միայն կաղապարը։ Հիմա նման կայքերը, իհարկե, հազվադեպ են։ Բոլոր ժամանակակից վեբ էջերը ստեղծվում են դինամիկ կերպով՝ օգտագործելով սերվերի կողմի որոշակի տրամաբանություն, որը դուք կամ ինքներդ գրում եք, կամ օգտագործում եք պատրաստ՝ ինչ-որ CMS-ի (բովանդակության կառավարման համակարգ) օգնությամբ:

Առանց այս սերվերային տրամաբանության, առցանց ծառայությունների մեծ մասը, որոնք մենք օգտագործում ենք ամեն օր և այդքան սովոր ենք, հնարավոր չէր լինի: Ինչ վերաբերում է HTML-ին, ապա այն բոլորովին ոչ բարդ լեզու է։

Runet-ում կան հսկայական թվով վճարովի դասեր վեբ կայքի դասավորության վերաբերյալ և այլ նյութեր, որոնք ունեն արժանապատիվ ուսումնական բազա: Իմ կարծիքով այս լեզուն ինքնուրույն սովորելը ամենևին էլ խնդիր չէ։

Ավելի լավ է դառնում - CSS

HTML-ի հիմունքներին տիրապետելուց հետո կարող եք անմիջապես սկսել սովորել CSS (Cascading Style Sheets), որը թույլ է տալիս սահմանել տառատեսակներ, գույներ և կայքի առանձին բլոկների գտնվելու վայրը:

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

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

Արդյո՞ք անհրաժեշտ է սովորել բոլոր HTML/CSS թեգերը, ատրիբուտները և հատկությունները:

HTML-ն ունի բազմաթիվ տարբեր պիտակներ և ատրիբուտներ, իսկ CSS-ն ունի բազմաթիվ հատկություններ, որոնք կարող են ունենալ տարբեր արժեքներ: Հետևաբար, սկսնակների շատերին անհանգստացնում է այն հարցը. որտեղի՞ց սկսել կայքի դասավորությունը և արդյոք անհրաժեշտ է անգիր անել այս բոլոր արժեքները, պիտակները և հատկությունները:

Իհարկե, եթե ունես յուրահատուկ լուսանկարչական հիշողություն, ապա քեզ համար դժվար չի լինի սովորել այս ամենը, և միևնույն ժամանակ, «Պատերազմ և խաղաղություն» երեք հատորները՝ անգիր։ Հակառակ դեպքում, ձեզ հարկավոր չէ անգիր անել այս բոլոր բառերը:

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

Նույնը վերաբերում է ցանկացած լեզվին, ներառյալ JavaScript-ը, PHP-ն և այլն: Այն, ինչ դուք հաճախ եք օգտագործում, ինքնին առանձնանալու է: Այն ամենը, ինչ դուք հազվադեպ եք օգտագործում, կարող եք դիտել տեղեկատու գրքում, որոնցից շատերը ցանցում կան: Ամաչելու բան չկա, և, ես ձեզ գաղտնիք կասեմ, բոլոր վեբ-վարպետները դա անում են:

Մենք պարզեցնում ենք դասավորության գործընթացը

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

Երբ դուք հարմարավետ լինեք CSS-ի հետ և սկսեք ստեղծել ձեր սեփական ինչ-որ բան, կարող եք չկարողանաք բավարարել լեզվի ճկունությունը և ցանկանաք օգտագործել ինչ-որ CSS նախապրոցեսոր: Նախամշակողները CSS կոդից հեռացնում են ամբողջ աղբը, դարձնում այն ​​ավելի մաքուր և տրամաբանական, փոփոխականների և այլ «չիպերի» օգնությամբ մեծացնում են վերացականության աստիճանը։ Ամենահայտնի նախապրոցեսորներն են LESS-ը, Sass-ը և Stylus-ը:

Աերոբատիկա - JavaScript

Վեբ դիզայնի ավելի լուրջ դասեր ուսումնասիրելիս դուք կհանդիպեք HTML-ում ներառված JavaScript-ի տարրերին, որոնք վեբ էջերը դարձնում են ինտերակտիվ: Եթե ​​դուք նախատեսում եք ոչ միայն Back-end, այլ նաև Front-end մշակում, ապա դուք պետք է իմանաք JavaScript-ը շատ լավ մակարդակով։

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

Ամփոփելով

Այսպիսով, ինչպես դուք, հուսով եմ, արդեն հասկացաք, դասավորության դիզայները շատ կարևոր և հնագույն ինտերնետ մասնագիտություն է, որից կախված է.

կայքի բեռնման արագություն;

դրա ցուցադրման համապատասխանությունը տարբեր բրաուզերներում.

հարմարվողականություն տարբեր օգտագործողների էկրաններին;

Համապատասխանություն HTML ստանդարտներին և որոնման համակարգի պահանջներին:

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

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

Բարև, իմ անունը Ալեքսանդր Զելենին է և ես վեբ ծրագրավորող եմ:
Շատ անգամներ եմ լսել այն կարծիքը, որ դասավորությունը սկսնակ ֆրոնտենդերների մեծ մասն է: Չնայած իրականում դա ցանկացած (գրեթե) վեբ նախագծի ամենակարեւոր մասն է: Սա այն է, ինչ առաջինը տեսնում են օգտվողները: Այս պահին մեծ նախագծում բարձրորակ դասավորությունը (հատկապես բլոկի դիզայնը) պահանջում է մեծ թվով տարբեր հմտություններ:

Այս հոդվածում ես ներկայացնում եմ դասավորության դիզայների մշակման սխեմա

[մեծ սեղմում]
Իհարկե, սա համապարփակ և միակ ճշմարիտ սխեմա չէ։ Կա նաև հարակից հմտությունների մի ամբողջ լեռ, համապատասխան տեխնոլոգիաներ և այլն։ Գնահատումը սուբյեկտիվ է.

Ուզում եմ անմիջապես ավելացնել, որ հոդվածում ուսումնական նյութերի կոնկրետ հղումներ չեն լինի։ Ուրախ կլինեմ մեկնաբանություններ ավելացնել։

Ի՞նչ ենք մենք սպասում:

Նախ պետք է հասկանալ, թե ինչ ենք մենք ակնկալում մարդուց յուրաքանչյուր մակարդակում։ Ձեր ակնկալիքները կարող են տարբեր լինել:
Կրտսեր- գիտի հիմնական պիտակները, կարող է շտկել բովանդակությունը պատրաստի html կայքում, գիտի, թե ինչպես ճիշտ ձևաչափել տեքստը, առանց որևէ խնդրի տեղադրում է ներկառուցված տարր (տեսանյութ YouTube-ից, Yandex քարտեզ), աշխատում է տարբերակի կառավարման համակարգի միջոցով միայն իր համար ( վարպետ, 1 ներդրող): Այն կարող է զրոյից պարզ բան ստեղծել, և այն նույնիսկ չի գնա (անձամբ նրա հետ): Ընդհանրապես, դա անկախ միավոր չէ և պահանջում է ուղղորդում վերևից:
Միջին- քիչ թե շատ ինքնավար միավոր (կամ ամբողջովին ինքնավար փոքր և միջին նախագծերի համար): Այն կարող է լավ դասավորել միջին չափի կայքը, և այն ճիշտ կցուցադրվի բոլորում ընթացիկ տարբերակներըբրաուզերներ. Հասկանում է, թե ինչպես են աշխատում կաղապարային շարժիչները և կարող է դրանք օգտագործել (եթե տրված է մնացած կոդը): Կարողանում է պլանավորել և փաստաթղթավորել իրենց աշխատանքը և գնահատել ժամկետները: Հասկանում է կոդի ոճի պահպանման կարևորությունը: Հասկանում է, թե ինչու կան ցանցային համակարգեր և css շրջանակներ: Կարողանում է դիզայներից վերցնել բոլոր անհրաժեշտ տեղեկությունները դասավորությունից: Կարող է շփվել փոքր թիմի հետ, ստեղծել մասնաճյուղեր և պահանջներ ներկայացնել:
Ավագ- կարող է նախագծել բլոկային համակարգ մեծ նախագծի համար: Գիտի, թե ինչպես խուսափել կրկնությունից և խնդրահարույց տարածքներից, երբ այլ մշակողները օգտագործում են իր կոդը: Կարողանում է տարրալուծել բարդ առաջադրանքները և ճիշտ ձևակերպել առաջադրանքները: Կարող է կիրառել զարգացման առնվազն մեկ մեթոդաբանություն (օրինակ՝ BEM): Կարող է հնարավորինս արագ բացել նախագիծը: Լավ հասկանում է մի քանի հայտնի կաղապարային շարժիչներ: Կարող է գրել assemblers և ավտոմատացնել դրա հետ կապված գործընթացը: Կարող է իրականացնել կոդերի վերանայում և վերահսկել դասավորության այլ դիզայներներին:
Եկեք հիմա մի փոքր ավելի կոնկրետ դիտարկենք, թե ինչ է ներառում յուրաքանչյուր մակարդակի բլոկներից յուրաքանչյուրը:

Կրտսեր

HTML- հիմնական պիտակների, ատրիբուտների իմացություն. Հասկանալով, թե ինչպես գրել այն սկզբունքորեն:
Տպագրություն- տեքստը ձևաչափելու ունակություն: Տեքստը գրեթե ցանկացած նախագծի հիմքն է: Տեղադրեք չընդհատվող բացատները, որտեղ անհրաժեշտ է, թավ, շեղ, աբբր և այլն: Կարող եք օգտագործել տպագիր կամ նմանատիպ ծառայություն, բայց կարողանալ հասկանալ արդյունքը։
Իմաստաբանություն- հասկանալ, որ որոշակի առաջադրանքների համար կան որոշակի պիտակներ: Կարողանալ ընտրել ճիշտ պիտակը:
Մեդիա- ինչ տեսակի լրատվամիջոցներ կարելի է տեղադրել էջում:
iframe- երրորդ կողմի վիդջեթների ներկառուցում (վիդեո, աուդիո, քարտեզներ և այլն):
Աուդիո Տեսանյութ-Դուք կարող եք հետաձգել ուսումը, քանի որ. մասամբ լուծված է iframe-ով։ Հասկացեք, թե ինչ ձևաչափեր կարող է խաղալ բրաուզերը, ինչպես ձևավորել նվագարկիչը և այլն:
Պատկերներ- ինչ գրաֆիկական ձևաչափեր և ինչ ձևով է ընկալում զննարկիչը: Որոշ ձևաչափերի օգտագործման առավելություններն ու թերությունները:
Ռաստեր- jpg, png, gif: Հասկացեք ձևաչափերի տարբերությունը և կարողանաք կիրառել այն, ինչ և որտեղ է դա անհրաժեշտ:
SVG-Դուք կարող եք հետաձգել ուսումը, քանի որ. օգտագործվում է ավելի քիչ, քան մենք կցանկանայինք: Հասկացեք առավելությունները, թերությունները, սահմանափակումները և այլն:
Տառատեսակներ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Դա իրականում բավականին բարդ թեմա է, և ընդհանրապես սկսնակներին խորհուրդ կտամ օգտվել համակարգային տառատեսակներից։ Կարողանալ բեռնել տառատեսակներ, օպտիմիզացնել ցուցադրումը, նվազագույնի հասցնել մատուցման հետաձգումը հատուկ տառատեսակներով:
Աղյուսակային դասավորություն- ընտրովի: Նրանց համար, ովքեր ցանկանում են ապագայում ստեղծել բարձրորակ էլփոստի տեղեկագրեր:
css 1- տառատեսակներ, գույներ, հավասարեցում, չափսեր:
CSS 2.1- բլոկի վարքագծի վերահսկում, դիրքավորում, ամբողջական ձևավորում:
Ընտրիչներ- պարզ ընտրիչներ պիտակի, դասի, տեղադրված տարրի համար: Պարզ կեղծ սելեկտորներ, ինչպիսիք են :hover-ը։
անվանակոչում- ինչպես անվանել դասերը, որպեսզի դա անտանելի ցավ չլինի:
Բլոկի դասավորությունը- նկարը բաժանեք գիտակցված բլոկների, մարմնավորեք բլոկները HTML-ով, զարդարեք CSS-ով:
Բրաուզերներ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Ինչ բրաուզերներ կան, ո՞րն է դրանց տարբերությունը:
Մշակողի գործիքներ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Օգտագործեք զննարկիչի գործիքներ՝ ցուցադրման խնդիրները լուծելու համար:
Տեքստային խմբագիրներ- ինչ են մշակողների համար տեքստային խմբագրիչները և ինչու: SublimeText-ը և Notepad++-ը ինձ ծանոթ օրինակներ են: Կարողանալ դրանցում կարգավորել հիմնական բաները, ինչպիսիք են նահանջները, տողերի ընդմիջումները և այլն:
Տարբերակի կառավարման համակարգեր-Անձամբ ես շատ կարեւոր եմ համարում դրանք գոնե անհատապես, անձամբ ինձ համար օգտագործելու ունակությունը։ Հասկացեք, թե ինչու են ստեղծվել այս համակարգերը և որոնք են դրանք:
git- ընդհանուր առմամբ հասկանալ ամենատարածված տարբերակների կառավարման համակարգի խնդիրն ու սկզբունքները:
Github / bitbucket- կարողանալ օգտագործել git-ի հայտնի հարթակներից մեկը:
վճարել/կատարել/հրել/քաշել- անձնական օգտագործման հիմնական գործողություններ:
Ստաշ- ժամանակավորապես պահպանել ավելորդ տվյալները տվյալ պահին:
10 աշխատանք- կատարել առնվազն 10 աշխատանք տարբեր դիզայնով: Դուք կարող եք փորձարկել, դա նշանակություն չունի: Կարևոր է լինել ամբողջական ընթացիկ գիտելիքների շրջանակներում:

Միջին

CSS 3- աստիճանավորում, ստվերներ, հարթեցում, զտիչներ, փոխակերպումներ:
Ընդլայնված ընտրիչներ- նշված (+)-ին հաջորդող տարրեր, որոնք նշված են ըստ քանակի (nth-child), shadow-dom, առաջ/հետո և այլն:
Անիմացիաներ- ընտրովի: անցում և անիմացիա: Սահուն անցումներ, անիմացիաներ: Հասկացեք սահմանափակումներն ու թերությունները:
Ցանցեր- ինչու կան, ինչպես կառուցել, ինչ պատրաստի լուծումներ կան։ Օրինակ, կարող եք նայել Flexbox ցանցին կամ ցանկացած այլ, որը կարող եք գտնել:
Շրջանակներ (CSS)Ինչու են դրանք անհրաժեշտ և ինչպես օգտագործել դրանք: Ցանկալի է սովորել, թե ինչպես օգտագործել առնվազն մեկ ջրհոր: Շատ օգտակար է նախատիպի համար: Զգալիորեն բարելավում է նախագծի որակը նախագծային բյուջեի բացակայության դեպքում (ոչ եզակի, բայց օգտագործելի):
CSS նախապրոցեսորներ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Աշխատանքի օպտիմիզացում, ավելի գեղեցիկ և ընթեռնելի կոդ։ Փոփոխականներ, միքսիններ և այլն: Աշխատեք մեկ կամ մի քանի հայտնի նախապրոցեսորների հետ, ինչպիսիք են SASS, LESS, Stylus:
Մեդիա հարցումներ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Ցուցադրել ցանկալի ոճերը՝ կախված պայմաններից (սարք, էկրանի չափ, պիքսելների խտություն, տպագիր տարբերակ և այլն):
Կոդի ոճը- հասկացեք, թե ինչ ոճի կոնվենցիաներ են նախատեսված, ուսումնասիրեք և սկսեք կիրառել ցանկացածը (խորհուրդ եմ տալիս AirBNB-ից):
ՉՈՐ/ՀԱՄԲՈՒՅՐ/ՊԻՍՏ- Դուք կարող եք հետաձգել ուսումնասիրությունը: Հասկանալ զարգացման կարևոր սկզբունքները, որոնք զգալիորեն պարզեցնում են ծրագրի հետագա պահպանումը:
OOCSS- ընտրովի: Հասկացեք, թե ինչ է օբյեկտ-կողմնորոշված ​​css-ը և ինչի համար է այն: Այս կամ այն ​​ձևով այն օգտագործվում է բազմաթիվ նախագծերում (թեև առանց հասկանալու, թե դա ինչ է): Իդեալում սովորեք նախագծել: Կարող է հիանալի լինել մեծ նախագծերի համար:
Փաստաթղթեր- հասկանալ, թե ինչ և ինչպես փաստաթղթավորել: Փաստաթուղթ. Դուք կարող եք հետաձգել, բայց ապագայում համոզվեք, որ ուսումնասիրեք նիշերի նշումը:
Պլանավորում- սովորել գնահատել տերմինները նկարի վրա և սահմանել աշխատանքների հաջորդականությունը:
Քայքայումը- Դուք կարող եք հետաձգել ուսումնասիրությունը: Իմացեք, թե ինչպես կարելի է առաջադրանքը բաժանել ենթաառաջադրանքների: Ավելի դժվար է, քան թվում է :-)
Նպատակներ դնելը- Դուք կարող եք հետաձգել ուսումնասիրությունը: Սովորեք հստակ նկարագրել առաջադրանքները տեքստում, որպեսզի մյուս մշակողները, ներառյալ ավելի քիչ որակավորում ունեցողները, միանշանակորեն հասկանան, թե ինչ է պետք անել դրանք ավարտելու համար:
Flexbox- մոդելի ըմբռնում, լիարժեք կիրառելու ունակություն:
Տառերի դասավորությունը- ընտրովի: Ընդհանրապես, հմտությունն ավելորդ չէ։ Հասկացեք փոստային համակարգերի առանձնահատկությունները, պահպանեք լավ տեսք և չընկնեք սպամի մեջ (եթե դա սպամ չէ):
պոլիֆիլներ- պարզել, թե ինչպես օգտագործել զարգացման վերջին հնարավորությունները՝ պահպանելով հետամնաց համատեղելիությունը: Հասկացեք այս մոտեցման դրական և բացասական կողմերը:
Cross-platform դասավորություն- հասկանալ, թե ինչ է պետք անել, որպեսզի նախագիծը լավ տեսք ունենա ոչ միայն Windows-ի, Linux-ի և Mac-ի, այլև SmartTV-ի կամ PS-ի ներքո:
Խաչաձեւ դիտարկիչի դասավորություն- հասկանալ բրաուզերի մատուցման տարբերությունը և ստիպել նրանց ցույց տալ նույն կերպ: CanIUse կայքը շատ օգտակար է այս հարցում:
Բջջային դասավորություն- Դուք կարող եք հետաձգել ուսումնասիրությունը: Հասկացեք շարժական հարթակների սահմանափակումները: Խելամտորեն օգտագործեք սահմանափակ տարածքը:
Օպտիմալացում- Դուք կարող եք հետաձգել ուսումնասիրությունը: Հասկացեք որոշակի տեխնիկայի «գինը»: Հասկացեք, թե ինչ փուլերից է բաղկացած կայքի ցուցադրումն օգտագործողին: - Դուք կարող եք հետաձգել ուսումնասիրությունը: Օպտիմիզացումներ՝ կապված չափի, քեշի, սեղմման, ռեսուրսների միավորման և այլնի հետ:
Ներկայացում- Դուք կարող եք հետաձգել ուսումնասիրությունը: Օպտիմիզացումներ՝ կապված բեռնումից հետո մատուցման արագության հետ:
SEO- Դուք կարող եք հետաձգել ուսումնասիրությունը: Առնվազն տարրական պատկերացում, թե ինչպես են աշխատում որոնման համակարգերը: Օգնելու ունակություն որոնման համակարգպարզեք, թե որտեղ փնտրել և ինչն է կարևոր:
Կաղապարային շարժիչներ- հասկանալ, թե ինչպես կարող եք նորից օգտագործել կոդը, խմբավորել տարրերը և կազմել էջեր: Շատ ցանկալի է սովորել ինչպես սերվերի կողմից, այնպես էլ հաճախորդի կողմից մատուցում: Սա նաև ներառում է «մաքուր» լեզվով ձևանմուշներ (օրինակ՝ պարզ PHP ներդիրներ): Կաղապարի շարժիչի «նախքան» աշխատանքը (տվյալների հոսքը) մեզ չի հետաքրքրում:
PHP- Դուք կարող եք հետաձգել ուսումնասիրությունը: Հասկանալ հիմնական շարահյուսությունը և կարողանալ փոքր փոփոխություններ կատարել էջի ձևավորման հետ կապված:
CMS- Դուք կարող եք հետաձգել ուսումնասիրությունը: Պարզեք, թե ինչ CMS գոյություն ունի և ինչու են դրանք ստեղծվել: Սովորեք գրել կաղապարներ առնվազն մեկի համար (խորհուրդ եմ տալիս Wordpress-ին):
javascript- Դուք կարող եք հետաձգել ուսումնասիրությունը: Իմացեք հիմնական շարահյուսությունը, հասկացեք, թե ինչպես կարելի է կախել ամենապարզ կարգավորիչները և կատարել պարզ աշխատանք DOM-ի հետ:
jQuery- Դուք կարող եք հետաձգել ուսումնասիրությունը: Իմացեք, թե ինչպես խնայել շատ ժամանակ բավականին բնորոշ առաջադրանքները լուծելու համար՝ օգտագործելով plugins-ը ամենահայտնի js գրադարանի համար (իհարկե, vanilla.js-ից հետո):
NodeJS- Դուք կարող եք հետաձգել ուսումնասիրությունը: Հասկացեք, թե ինչպես գործարկել պարզ սերվեր, բաշխել ստատիկ և մատուցել սերվերի կողմից: Դուք կարող եք օգտագործել Express կամ ցանկացած այլ շրջանակ:
ժողով- ընտրովի: Իմացեք, թե ինչպես հավաքել նախագիծ CSS-ից / HTML ֆայլերմեջ այն, ինչ անհրաժեշտ է: Խորհուրդ եմ տալիս ձեզ ծանոթանալ գոնե քրթմնջալով և կուլ տալով, որպես «տարբեր» ճամբարների ներկայացուցիչներ։
IDE- ընտրովի: Իմացեք, թե ինչու են անհրաժեշտ IDE-ները և ինչպես օգտագործել դրանք: Ժամանակ խնայելու համար անցեք որոշ IDE-ի օգտագործմանը: Կարևոր է. IDE սովորելը համեմատելի է լիարժեք ծրագրավորման լեզու սովորելու հետ, և դրա վրա շատ ժամանակ ներդնելը կարող է արդարացված լինել: Անձամբ ես օգտագործում եմ տեքստային խմբագրիչներ (և միացնում եմ IDE-ն միայն շատ մեծ նախագծերի համար):
ճյուղավորվող- սովորել կառավարել մասնաճյուղերը git-ում:
Միաձուլել- սովորել, թե ինչպես միավորել մասնաճյուղերը կոնֆլիկտների լուծման հետ:
բերել/վերաբացնել- հասկանալ, թե ինչու են դրանք օգտագործվում, երբ օգտագործել դրանք և սկսեք օգտագործել դրանք ըստ անհրաժեշտության:
Գրաֆիկական խմբագիր- հասկանալ, թե ինչն է, ինչի համար: Ինչպե՞ս են վեկտորները տարբերվում ռաստերից: Կարևոր է խմբագրին հասկանալ գոնե դիզայներից դասավորությունը «կարդալու» մակարդակով։ Ընտրեք ճիշտ տառատեսակը, չափը, գույնը և այլն: Ոչ թե աչքին, այլ հաստատ։ Խորհուրդ եմ տալիս աշխատել առնվազն 1 ռաստերի (Photoshop) և 1 վեկտորի (Figma) հետ։
50 աշխատանք- մինչև փուլի ավարտը դուք ունեք մոտ 50 տարբեր աշխատանքներ, որոնք ցուցադրում են հմտություններ ուսումնասիրված ոլորտներից:

Ավագ

Չնայած այս խումբը գծագրում փոքր է թվում, իրականում այն ​​ամենամեծն է: Որովհետեւ այս պահին անհրաժեշտ է ուսումնասիրել այն ամենը, ինչ հետաձգվել է։
Հարմարվողական / արձագանքող դասավորություն- հասկանալ ամենաբարձր մակարդակը և համատեղել մինչ այժմ ձեռք բերված ողջ գիտելիքները: Նախագիծը պետք է լավ տեսք ունենա ամենուր և ամեն ինչում (հիմնականում):
Աստիճանական դեգրադացիա / Առաջադիմական բարելավում- հասկանալ, թե ինչ է դա և ինչու: Օգտագործեք.
Gitflow- կարողանալ բացատրել այլ ծրագրավորողներին, թե ինչպես ստեղծել մասնաճյուղեր, որտեղ դրանք միավորել, ինչպես կարողանալ վերանայել կոդը (դասավորությունները, իհարկե, ոչ կոդ):
ԲԵՄ- ընտրովի: Հասկացեք մեթոդաբանությունը, որը թույլ է տալիս ստեղծել անսահմանափակ մեծ նախագծեր, որպեսզի նվազագույն համաժամացման դեպքում տարբեր թիմեր կարողանան օգտագործել միմյանց բլոկները: Կան այլ մեթոդաբանություններ, որոնք տալիս են ոչ ամենավատ արդյունքը։ Այս պահին դուք այսպես թե այնպես կիմանաք դրանց մասին և ցանկության դեպքում կկարողանաք ուսումնասիրել դրանք:
100 աշխատանք- ունենալ ընդհանուր առմամբ հարյուր աշխատանք, որոնք ցույց են տալիս ձեռք բերված տարբեր հմտությունները: Իրականում այդ ամենը պայմանական է: Պորտֆոլիոյում հնարավոր է մեկ աշխատանք (տարբեր մասերից բաղկացած), որն արդեն ցույց կտա, որ ոչնչից չեք վախենում։

Եզրակացություն

Իրականում այս թեմաներից շատերը փոքր են: Այնուամենայնիվ, մի խումբ տարբեր գործոններ նկատի ունենալը շատ դժվար է: 15 տարի ես զրուցում էի տասից քիչ դասավորողների (և ընդհանրապես ծրագրավորողների) հետ, որոնց կդասակարգեի որպես ավագ (շատ ավելի շատ դասավորության դիզայներներ կային, լավ ծրագրավորողներ):
Offhand - միանգամայն հնարավոր է մեկ տարի ծախսել միայն զրոյից դասավորության լիարժեք ուսումնասիրության և պրակտիկայի վրա (և ավելին, եթե մտնեք բաղադրիչների նախագծման մեջ):

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

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

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

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

Մի կրկնեք նրանց սխալները:

Ինչպես գիտեք, թշվառը վճարում է երկու անգամ, կամ նույնիսկ ավելին։ Այնուամենայնիվ, շատ գրավիչ թվացող կայքեր տուժել են իրենց հաճախորդների ժլատությունից և ավելի մանրամասն ուսումնասիրելուց հետո ստացել են սարսափելի կոդ: Հաճախ կայքերը շտապում են հատուկ ծրագրերում, որոնք լիովին չեն տիրապետում: Արդյունքում, կոդը պարզվում է, որ անշնորհք է, խառնաշփոթ, անճկուն և ավելի շատ նման է աղբավայրի, քան HTML պիտակների, CSS հատկությունների և Java սկրիպտների բարակ շարքի:

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

Բայց չէ՞ որ մենք չենք կրկնի նման հավանական կայքեր ստեղծողների սխալները։ Եթե ​​մտածում եք, թե ինչպես դառնալ լավ կոդավորող, ապա անմիջապես միացեք HTML-ի և CSS-ի լուրջ ուսումնասիրությանը, և ապագայում կարող եք տիրապետել PHP-ին, Java-ին և ծրագրավորման այլ լեզուներին: Ավելին, ինտերնետում կան շատ հիանալի վիդեո դասընթացներ HTML դասավորության վերաբերյալ սկսնակների համար:

Որտեղի՞ց է սկսվում դասավորության դիզայների աշխատանքը:

Ինչպես արդեն հասկացաք, դասավորության դիզայները կարևոր դեր է խաղում կայքի ստեղծման գործում։ Այն կոդավորում է վեբ էջերը՝ օգտագործելով HTML և XHTML նշագրման լեզուները՝ օգտագործելով CSS Cascading Style Sheets:

JavaScript. Արագ մեկնարկ

Սկզբում դասավորության դիզայները վեբ դիզայներից ստանում է կայքի դասավորություն, առավել հաճախ Adobe Photoshop ծրագրի ձևաչափով՝ PSD կաղապար, որը դասավորության ձևանմուշ է։ Կաղապարն ամբողջությամբ արտացոլում է ապագա վեբ էջի դիզայնը, դրա չափսերը և բոլոր բաղադրիչների դասավորությունը (պատկերներ, պատկերանշան, կոճակներ, մենյու և այլն):

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

Հիացած լինելով դասավորությամբ՝ դասավորության դիզայները անմիջապես անցնում է դասավորությանը։ Այն գրում է կայքի յուրաքանչյուր տարր որպես HTML կոդ հատուկ ծրագրում կամ տեքստային խմբագրիչում, որը նախատեսված է ծրագրավորողների համար, օրինակ՝ Notepad++։

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

Դասավորության հիմունքները օրինակով

Օրինակ՝ վերցնենք տարրական 2-սյունանի ձևանմուշ՝ տարբերանշանով, որը կօգտագործենք որպես ֆոնային պատկեր։ Մենք կդասավորենք մնացած մասերը HTML-ի միջոցով և կսահմանենք չափերն ու ոճերը CSS դասերի միջոցով:

Մեր օրինակի կայքը բաղկացած է «Content», «Sidebar» և «Footer»-ից: Վեբ էջի կառուցվածքը կարելի է ձևակերպել՝ օգտագործելով div պիտակներ: Յուրաքանչյուր տարր պետք է տեղակայված լինի առանձին կաղապարի կոնտեյների շերտում: Օրինակ, «Բովանդակություն» և « Կողային վահանակ» գտնվում են շերտի ներսում.

JavaScript. Արագ մեկնարկ

Իմացեք JavaScript-ի հիմունքները վեբ հավելված կառուցելու գործնական օրինակով

Օգտագործելով CSS դասերը, մենք սահմանում ենք ոճի կարգավորումները: Ֆոնի պարամետրը սահմանում է ֆոնի գույնը: Սահմանեք չափերը բարձրության և լայնության հատկություններով: Պատուհանի վերին, ձախ և աջ եզրերից լուսանցքները սահմանվում են լուսանցք-վերև, լուսանցք-ձախ և լուսանցք-աջ:

Վերին մասի համար գույնը և ֆոնն անմիջապես դրվում են: PSD ձևանմուշից կտրված պատկերի ուղին նշված է հատուկ ֆոն-պատկեր դաշտում։

Վերնագիր ( լուսանցք-ձախ: auto; լուսանցք-աջ: auto; լուսանցք-ներքև: 10px; լայնություն:1000px; բարձրություն:100px; եզրագիծ:1px ամուր #000000; ֆոն՝ #009966; ֆոն-պատկեր՝ url(img/1. gif); ) .էջեր ( լուսանցք-ձախ:auto; լուսանցք-աջ:auto; լայնություն:1000px;) .բովանդակություն (լուսանցք-աջ:10px; լայնություն:806px; բարձրություն:450px; եզրագիծ:1px ամուր #000000; ֆոն: #999999; float:ձախ;) .կողային գոտի (լայնություն:180px; բարձրություն:450px; եզրագիծ:1px ամուր #000000; ֆոն՝ #FF9900; float:ձախ;) .foot ( պարզ:երկուսն էլ; ) :10px; լուսանցք-ձախ:auto; լուսանցք-աջ:auto; լայնությունը:1000px; բարձրություն:50px; եզրագիծ:1px ամուր #000000; ֆոն՝ #333399; )