Manyրագրավորման, ոճի և նշման բազմաթիվ լեզուների զարգացումով վեբ դիզայն սովորելը դառնում է ավելի բարդ, քան երբևէ: Բարեբախտաբար, կան բազմաթիվ գործիքներ, որոնք կօգնեն ձեզ սկսել: Փնտրեք մի քանի հիմնական ռեսուրսներ, օրինակ ՝ առցանց ձեռնարկներ կամ վեբ դիզայնի արդի գիրք: Երբ պատրաստ լինեք սկսել, սկսեք տիրապետել HTML- ի և CSS- ի հիմունքներին: Այնուհետև կարող եք սկսել ուսումնասիրել վեբ դիզայնի ավելի առաջադեմ լեզուներ, ինչպիսիք են JavaScript- ը:
Քայլեր
Մեթոդ 1 -ը 4 -ից ՝ Վեբ դիզայնի ռեսուրսների որոնում
Քայլ 1. Առցանց ստուգեք վեբ դիզայնի դասընթացների և ձեռնարկների առկայությունը:
Ինտերնետը լի է վեբ դիզայնի վերաբերյալ մանրամասն տեղեկություններով, և դրանցից շատերն ազատ հասանելի են: Դուք կարող եք սկսել Udemy- ի կամ CodeCademy- ի վերաբերյալ անվճար առցանց դասընթացներ վերցնելուց կամ միանալով կոդավորման համայնքին, ինչպիսին է freeCodeCamp- ը: Կարող եք նաև վեբ ձևավորման վիդեո ձեռնարկներ գտնել YouTube- ում:
- Եթե դուք հստակ գիտեք, թե ինչ եք փնտրում, փորձեք որոնել որոշակի տերմիններով (օրինակ ՝ «դասարանի ընտրողներ CSS ձեռնարկում»):
- Եթե դուք վեբ դիզայնի փորձ չունեք, սկսեք ծանոթանալ HTML- ի և CSS- ի կոդավորման հիմունքներին:
Քայլ 2. Մտածեք դասընթացներ անցկացնելու տեղական քոլեջում կամ համալսարանում:
Եթե հաճախում եք քոլեջ կամ համալսարան, դիմեք ձեր դպրոցի համակարգչային գիտության բաժին կամ խորհրդակցեք ձեր դասընթացների կատալոգի հետ ՝ պարզելու համար, թե արդյոք առկա են վեբ դիզայնի դասընթացներ: Եթե դպրոցում չեք, ստուգեք `արդյոք մոտակայքում գտնվող քոլեջներ կամ համալսարաններ առաջարկում են շարունակական կրթության դասընթացներ վեբ դիզայնի ոլորտում:
Որոշ համալսարաններ առաջարկում են վեբ դիզայնի առցանց դասընթացներ, որոնք բաց են բոլոր նրանց համար, ովքեր ցանկանում են գրանցվել: Ստուգեք Coursera.org- ի նման կայքերը `համալսարանի հրահանգիչների կողմից դասավանդվող անվճար կամ մատչելի վեբ դիզայնի դասընթացներ գտնելու համար:
Քայլ 3. Ստացեք վեբ դիզայնի գրքեր գրախանութից կամ գրադարանից:
Վեբ դիզայնի մասին լավ գիրքը կարող է անգնահատելի հղում լինել, երբ սովորում և կիրառում ես քո արհեստը: Որոնեք ընդհանուր վեբ դիզայնի կամ կոդավորման հատուկ ձևաչափերի և լեզուների վերաբերյալ արդի գրքեր, որոնք կցանկանայիք սովորել:
Վեբ դիզայնի վերաբերյալ ամսագրեր և բլոգային հոդվածներ կարդալը նաև լավ միջոց է նոր տեխնիկա սովորելու, ոգեշնչում ստանալու և վերջին միտումներին հետևելու համար:
Քայլ 4. Ներբեռնեք կամ գնեք վեբ դիզայնի ծրագրակազմ:
Վեբ դիզայնի լավ ծրագրակազմը կարող է օգնել ձեզ ավելի արդյունավետ և արդյունավետ կառուցել վեբ կայքեր, ինչպես նաև հիանալի է ձեզ օգնելու սովորել կոդավորման, սկրիպտավորման և դիզայնի այլ հիմնական տարրերի կիրառման խորաթափանցությունները: Դուք կարող եք օգուտ քաղել այնպիսի գործիքներից, ինչպիսիք են ՝
- Գրաֆիկական դիզայնի ծրագրեր, ինչպիսիք են Adobe Photoshop- ը, GIMP- ը կամ Sketch- ը:
- Վեբ կայքի ստեղծման գործիքներ, ինչպիսիք են WordPress- ը, Chrome DevTools- ը կամ Adobe Dreamweaver- ը:
- FTP ծրագրակազմ ՝ ավարտված ֆայլերը ձեր սերվերի վրա փոխանցելու համար:
Քայլ 5. Գտեք որոշ վեբ կայքերի ձևանմուշներ, որոնց հետ կարող եք խաղալ սկզբից:
Կաղապարների օգտագործման մեջ ոչ մի վատ բան չկա, քանի որ սովորում եք վեբ դիզայնի հիմունքները: Որոնեք ձեր նախընտրած վեբ էջի ձևանմուշները և ուշադիր նայեք ծածկագրին ՝ պատկերացում կազմելու համար, թե ինչպես է դիզայները համատեղում էջը: Կարող եք նաև փորձարկել ծածկագիրը փոխելու և կաղապարին ձեր սեփական տարրերը ավելացնելու միջոցով:
Սկսելու համար որոնեք վեբ կայքի անվճար ձևանմուշներ կամ փորձարկեք ձեր վեբ դիզայնի ծրագրակազմին կաղապարներ:
Մեթոդ 2 4 -ից. HTML- ի յուրացում
Քայլ 1. izeանոթացեք հիմնական HTML պիտակներին:
HTML- ը նշման պարզ լեզու է, որն օգտագործվում է կայքի հիմնական տարրերը ձևակերպելու համար: Դուք կարող եք ձևակերպել ձեր վեբ կայքի տարբեր տարրեր ՝ օգտագործելով պիտակներ: Պիտակները յուրաքանչյուր տարրից առաջ և հետո հայտնվում են անկյունագծով փակագծերում և տալիս են ցուցումներ, թե ինչպես է այդ տարրը գործելու էջում: Պիտակը փակելու համար վերջնական պիտակի դիմաց տեղադրեք a / անկյունագծով փակագծերի ներսում:
- Օրինակ, եթե ցանկանում եք, որ ձեր տեքստի մի մասը լինի համարձակ, դուք տարրը կշրջապատեք պիտակով, այսպես. Այս տեքստը համարձակ է:
- Մի քանի սովորական պիտակներ ներառում են (պարբերություն), (խարիսխ, որը սահմանում է կապակցված տեքստը) և (տառատեսակ, որը կարող է օգնել տեքստի տարբեր հատկանիշների սահմանմանը, ինչպիսիք են չափը և գույնը):
- Այլ պիտակները սահմանում են ինքնին HTML փաստաթղթի տարբեր մասերը: Օրինակ ՝ օգտագործվում է էջի մասին տեղեկություններ պարունակելու համար, որոնք տեսանելի չեն լինի դիտողին, ինչպես օրինակ ՝ հիմնաբառեր կամ էջի նկարագրություն, որը կհայտնվի որոնման արդյունքներում:
Քայլ 2. Սովորեք օգտագործել պիտակի հատկանիշները:
Որոշ պիտակների համար անհրաժեշտ է լրացուցիչ տեղեկատվություն `հստակեցնելու, թե ինչպես պետք է գործեն: Այս լրացուցիչ տեղեկությունները հայտնվում են բացման պիտակի մեջ և կոչվում են «հատկանիշ»: Հատկանիշի անունը հայտնվում է պիտակի անունից անմիջապես հետո ՝ բաժանված բացատով: Հատկանիշի արժեքը կցվում է հատկանիշի անվան վրա = նշանով և շրջապատված չակերտներով:
- Օրինակ, եթե ցանկանում եք ձեր տեքստի մի մասը կարմիր դարձնել, կարող եք դա անել ՝ օգտագործելով պիտակը և համապատասխան տառատեսակի գույնի հատկանիշը, օրինակ ՝ այս տեքստը կարմիր է:
- Շատ էֆեկտներ, որոնք ժամանակին պարբերաբար ձեռք էին բերվում HTML պիտակի հատկանիշներով, ինչպես օրինակ տառատեսակի տարբեր գույներ սահմանելը, այժմ սովորաբար կատարվում են փոխարենը CSS կոդավորման միջոցով:
Քայլ 3. Փորձ արեք բնադրված տարրերով:
HTML- ն նաև թույլ է տալիս տարրեր տեղադրել այլ տարրերի մեջ `ավելի բարդ ձևավորում ստեղծելու համար: Օրինակ, եթե ցանկանում էիք պարագրաֆ սահմանել, այնուհետև պարբերության մեջ տեքստի մի մասը շեղացնել, կարող եք դա անել այսպես.
Ես սիրում եմ կոդավորումը:
Քայլ 4. acquaintedանոթացեք դատարկ տարրերին:
HTML- ի որոշ տարրեր կարիք չունեն ինչպես բացման, այնպես էլ փակման պիտակների: Օրինակ, եթե պատկեր եք տեղադրում, ձեզ հարկավոր է միայն մեկ «img» պիտակ, որը պարունակում է պիտակի անունը և ցանկացած այլ անհրաժեշտ հատկանիշ (օրինակ ՝ պատկերի ֆայլի անունը և ցանկացած այլընտրանքային տեքստ, որը ցանկանում եք ավելացնել մատչելիության նպատակով): Օրինակ:
Քայլ 5. Ուսումնասիրեք HTML փաստաթղթի հիմնական դասավորությունը:
Որպեսզի ձեր HTML- ի վրա հիմնված կայքը ճիշտ գործի, դուք պետք է իմանաք, թե ինչպես ձևակերպել ամբողջ էջը: Սա ենթադրում է սահմանել, թե որտեղ է սկսվում և ավարտվում ձեր html կոդը, ինչպես նաև պիտակներ օգտագործելը ՝ որոշելու համար, թե կոդի որ հատվածները կցուցադրվեն, իսկ ո՞րն են այնտեղ ՝ թաքնված ֆոնային տեղեկատվություն տրամադրելու համար: Օրինակ:
- Օգտագործեք պիտակը ՝ ձեր էջը որպես HTML փաստաթուղթ սահմանելու համար:
- Հաջորդը, պարունակեք ձեր ամբողջ էջը պիտակների մեջ `որոշելու, թե որտեղ է սկսվում և ավարտվում ձեր կոդը:
- Պիտակների մեջ տեղադրեք ցանկացած տեղեկատվություն, որը չի ցուցադրվի դիտողին, ինչպիսիք են էջի վերնագիրը, հիմնաբառերը և ձեր էջի նկարագրությունը:
- Սահմանեք ձեր էջի մարմինը (այսինքն ՝ ցանկացած տեքստ և պատկեր, որը ցանկանում եք, որ դիտողը տեսնի) պիտակներով:
Մեթոդ 3 -ից 4 -ը. Famանոթացում CSS- ին
Քայլ 1. CSS- ի միջոցով ոճեր կիրառեք ձեր HTML փաստաթղթերում:
CSS- ը ոճաթերթի լեզու է, որը թույլ է տալիս կիրառել տարբեր ոճի և դիզայնի տարրեր ձեր վեբ էջում: Օրինակ, եթե ցանկանում եք ընտրովի կիրառել որոշակի տառատեսակ կամ տեքստի գույն ձեր էջի տեքստի որոշ տարրերի վրա, ապա դա անելու համար կարող եք ստեղծել CSS ֆայլ: Այնուհետև կարող եք տեղադրել CSS ֆայլը ձեր HTML փաստաթղթում, որտեղ ցանկանում եք:
-
Օրինակ, եթե ցանկանում եք, որ CSS ֆայլը կանաչ դարձնի ձեր HTML փաստաթղթի պարբերության բոլոր տարրերը, կարող եք ստեղծել.css ֆայլ, որը պարունակում է տողեր.
- պ {
- գույնը `կանաչ;
- }
- Դրանից հետո դուք կպահպանեք ֆայլը style.css անունով:
- Ձեր HTML փաստաթղթում ոճաթերթը կիրառելու համար այն պիտակների մեջ տեղադրեք որպես դատարկ հղման տարր: Օրինակ:
Քայլ 2. familiarանոթացեք CSS կանոնների հավաքածուի տարրերին:
CSS կոդի առանձին կտոր կոչվում է «կանոնների հավաքածու»: Կանոնների հավաքածուն պարունակում է տարբեր տարրեր, որոնք որոշում են, թե ինչ եք ուզում անել ձեր կոդը: Դրանք ներառում են.
- Ընտրիչ, որը սահմանում է այն HTML տարրը, որը ցանկանում եք ոճավորել: Օրինակ, եթե ցանկանում եք, որ ձեր կանոնը ազդի պարբերության տարրերի վրա, ձեր կանոնակարգը կսկսեք «p» տառով:
- Հռչակագիրը, որը սահմանում է այն հատկությունները, որոնք կցանկանայիք ոճավորել (օրինակ ՝ տառատեսակի գույնը): Հռչակագիրը պարունակվում է գանգուր փակագծերում {}:
- Հատկությունը, որը սահմանում է HTML տարրի որ հատկությունը ցանկանում եք ոճավորել: Օրինակ ՝ thetag- ում կարող եք նշել, որ ցանկանում եք ոճավորել տեքստի գույնը:
- Հատկության արժեքը հատուկ սահմանում է, թե ինչպես եք ցանկանում փոխել հատկությունը (օրինակ, եթե հատկությունը տառատեսակի գույն է, ապա գույքի արժեքը կլինի «կանաչ»):
- Դուք կարող եք փոփոխել մի քանի տարբեր հատկություններ մեկ հայտարարագրի շրջանակներում:
Քայլ 3. Կիրառեք CSS ձեր տեքստին, որպեսզի ձեր տպագրությունը գեղեցիկ տեսք ունենա:
CSS- ն օգտակար է ձեր տեքստին մի շարք էֆեկտներ կիրառելու համար ՝ առանց HTML- ի յուրաքանչյուր հատկության անհատական ծածկագրման: Փորձեր կատարեք CSS- ում տարբեր տպագրական հատկությունների փոփոխման հետ, ներառյալ.
- Տառատեսակի գույնը
- Տառատեսակի չափը
- Տառատեսակների ընտանիք (օրինակ ՝ տառատեսակների շրջանակը, որոնք ցանկանում եք օգտագործել ձեր տեքստում)
- Տեքստի հավասարեցում
- Գծի բարձրությունը
- Տառերի տարածություն
Քայլ 4. Փորձարկեք արկղերի և CSS- ի դասավորության այլ գործիքների հետ:
CSS- ը նաև օգտակար է ձեր էջին գրավիչ տեսողական տարրեր ավելացնելու համար, օրինակ ՝ տեքստային տուփեր և աղյուսակներ: Բացի այդ, դուք կարող եք օգտագործել այն ՝ ձեր էջի ընդհանուր դասավորությունը փոխելու և սահմանելու համար, թե որտեղ են տարբեր տարրերը տեղադրված միմյանց համեմատ:
Օրինակ, կարող եք սահմանել այնպիսի հատկանիշներ, ինչպիսիք են տարրի լայնությունը և ֆոնի գույնը, ավելացնել սահման կամ սահմանել լուսանցքներ, որոնք տարածք կստեղծեն ձեր էջի տարբեր տարրերի միջև:
Մեթոդ 4 -ից 4 -ը ՝ Աշխատանք դիզայնի այլ լեզուների հետ
Քայլ 1. Սովորեք JavaScript, եթե ցանկանում եք ինտերակտիվ տարրեր ավելացնել ձեր էջերին:
JavaScript- ը հիանալի լեզու է սովորելու համար, եթե հետաքրքրված եք ձեր կայքերին ավելի առաջադեմ հնարավորություններ ավելացնելով, ինչպիսիք են անիմացիաները և թռուցիկները: Անցեք դասընթաց կամ փնտրեք առցանց ձեռնարկներ այն մասին, թե ինչպես պետք է ծածկագրել JavaScript- ում և ներառել այդ կոդավորված տարրերը ձեր վեբ էջերում | HTML- ի միջոցով:
Նախքան JavaScript- ին հարմարվելը, ձեզ հարկավոր է ծանոթ լինել HTML և CSS էջերի ստեղծման հիմունքներին:
Քայլ 2. Qանոթացեք jQuery- ին ՝ JavaScript- ի կոդավորումն ավելի դյուրին դարձնելու համար:
jQuery- ն JavaScript գրադարան է, որը կարող է պարզեցնել Java- ի ծրագրավորումը ՝ թույլ տալով մուտք գործել նախապես կոդավորված JavaScript տարրեր: jQuery- ն հիանալի գործիք է, եթե արդեն ծանոթ եք JavaScript- ի կոդավորման հիմունքներին:
Դուք կարող եք մուտք գործել jQuery գրադարան և շատ այլ արժեքավոր ռեսուրսներ jQuery.org- ի ՝ jQuery հիմնադրամի վեբ կայքի միջոցով:
Քայլ 3. Ուսումնասիրեք սերվերի կողքի լեզուները, եթե հետաքրքրված եք հետին պլանով զարգացմամբ:
Թեև HTML- ը, CSS- ը և JavaScript- ը իդեալական են վեբ դիզայներների համար, ովքեր կենտրոնացած են այն բանի վրա, ինչ օգտվողը տեսնում և անում է կայքում, սերվերային լեզուները օգտակար են, եթե ձեզ ավելի շատ հետաքրքրում են կուլիսային աշխատանքը: Եթե ցանկանում եք սովորել back-end զարգացման մասին, կենտրոնացեք այնպիսի լեզուների ուսուցման վրա, ինչպիսիք են Python- ը, PHP- ն և Ruby on Rails- ը:
Այս լեզուները օգտակար են այն տվյալների կառավարման և մշակման համար, որոնք օգտագործողը չի տեսնում: Օրինակ, PHP- ն կարող է օգտագործվել մուտքի կարիք ունեցող կայքերում գաղտնաբառ ստեղծելու անվտանգ գործիքներ ստեղծելու համար:
Օգնության ֆայլեր
HTML խաբեության թերթիկ
CSS խաբեության թերթիկ
