Google Web Designer- ում դրոշի ստեղծում

Քայլ 1. Սկսել

Google Web Designer- ը վեբ վարպետների անվճար զարգացման միջավայր է, որն ապահովում է վեբ էջեր ստեղծելու ունակություն, ներառյալ առանձին իրեր, ինչպիսիք են պաստառները, օգտագործելով CSS3 եւ HTML5: Այս գործիքը օգտագործելու համար, առաջին հերթին, դուք պետք է ներբեռնեք տեղադրման ֆայլը պաշտոնական կայքից եւ տեղադրեք:

Ներբեռնեք Google Web Designer- ը պաշտոնական կայքից

Ծրագրի տեղադրում

1. Կտտացրեք վերը ներկայացված հղմանը `այժմ էջին այցելելու համար եւ կտտացրեք« Ներբեռնեք վեբ դիզայներ »կոճակը: Նկատի ունեցեք, որ ծրագիրը աջակցում է միայն Windows 7-ին եւ հետագա տարբերակներին:



2. Save Pop-up պատուհանի միջոցով ընտրեք տեղ ձեր համակարգչում եւ օգտագործեք ներքեւի վահանակի վրա նշված կոճակը:



3. Գնացեք թղթապանակում պարզապես պահված ֆայլը եւ կրկնակի սեղմեք մկնիկի ձախ կոճակը `բացումը կատարելու համար: Արդյունքում, տեղադրման պատուհանը պետք է բացվի:

   

   Տեղադրման կարգը ինքնին իրականացվում է ամբողջությամբ ավտոմատ ռեժիմով, բոլոր աշխատանքային ֆայլերը գրացուցակով խնայելով համակարգի սկավառակի այլ ծրագրերով:

Թույլտվություն

1. Եթե ​​ցանկանում եք խնայել ծրագրերը ինտերնետում կամ ընդհանրապես, ստեղծել բեյներ, հատուկ Google- ի ներքին ծառայությունների համար, այն լրացուցիչ արժե կատարել թույլտվություն: Դա անելու համար գործարկեք ծրագիրը `օգտագործելով համապատասխան պատկերակը, փակեք ողջունելի պատուհանը եւ կտտացրեք« Մուտք »կոճակը վերին պանելում:



2. Նշեք տվյալները Google- ի հաշվից, կտտացրեք «Հաջորդը» եւ հաստատեք անհրաժեշտության դեպքում: Դրանից հետո հաշիվը անմիջապես կավելացվի, առանց որոշ անհատական ​​պարամետրեր պահանջելու:

Փոխելով պարամետրերը

1. Պատրաստման մասին հասկանալով, այժմ ցանկալի է փոփոխություններ մտցնել ծրագրաշարի հիմնական պարամետրերում `ապագայում աշխատանքը հեշտացնելու համար: Օգտագործելով վերին վահանակը, ընդլայնել խմբագրման մենյունը եւ ցուցակի վերջում ընտրել «Կարգավորումներ»:



2. «Հիմնական» ներդիրի վրա դուք կարող եք փոխել ծրագրի նախնական պահվածքը `ծրագրերը արագ բացելու համար, թղթապանակ նշանակեք, ստեղծված ձեւանմուշները փրկելու համար, ինչպես նաեւ սահմանում են լռելյայն արժեքներ:



3. «Layout View Mode» հետեւյալ էջը պարունակում է խմբագրի տեսքի պարամետրերը: Ներկայացված պարամետրերը փոխելով, կարող եք կարգավորել ցանցի եւ պարտադիր օբյեկտները տարրերի ավելի ճշգրիտ դիրքավորման համար:



4. Google Web Designer- ը իր պարամետրերով ունի կոդերի խմբագիր: Այսպիսով, «Code Viewer» ներդիրում կարող եք նշանակել դիզայնի ոճը, սահմանել ձեւաչափի պարամետրերը եւ ավելացնել հիմնական կապերը առաջադրանքներին:



5. «Ընդլայնված» վերջին ներդիրը պարունակում է ընդամենը երկու պարամետր `« մուտք »եւ« դիմումի մասշտաբ »: Առաջին դեպքում ներառումը կստեղծի փոփոխությունների մատյան, իսկ երկրորդ կետը թույլ է տալիս ստեղծել նոր ստանդարտ մասշտաբ, խմբագրի աշխատանքային տարածքի համար:

   Զգույշ եղիր! Եթե ​​չափազանց շատ մասշտաբ եք դնում, էկրանին տարածքի պակասի հետ կապված խնդիրները կարող են հայտնվել կարեւոր իրերի համար:

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

Քայլ 2. Դրոշի ստեղծում

Ծրագիրը կազմաձեւելով, կարող եք սկսել աշխատել դրոշի վրա, օգտագործելով Google WEB դիզայների բոլոր տարբերակները: Այնուամենայնիվ, նշենք, որ այս միջոցը բացառապես որպես տեսողական խմբագիր է, որը թույլ է տալիս տեղադրել միայն պատրաստի տարրեր, որոնք ստեղծվում են առանձին, օրինակ, ֆոտոշոփում:

Աշխատեք գործիքների հետ

1. Դասավորումը պատրաստելուց հետո անհրաժեշտ է ծանոթանալ գործիքներին: Հիմնական ուշադրության կենտրոնական վահանակի վրա, «Դիտում» ցուցակը արժանի է, թույլ տալով միացնել եւ անջատել օժանդակ տարրերը:



2. «Պատուհանի» ընտրացանկի միջոցով դուք կարող եք ժամանակավորապես անջատել որոշակի ինտերֆեյսի տարրը: Օրինակ, եթե ցանկանում եք ստատիկ դրոշ պատրաստել, «ժամանակացույցը» միայն խառնվելու է, եւ, հետեւաբար, լավագույնն է հանել համապատասխան տիզը:



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



4. Գործիքադարի կողքին ներկայացվում է «Հայտարարողների գովազդ», մի քանի ներդրումներով: Հատուկ ուշադրությունն արժանի է «իրադարձություններին», որոնք պատասխանատու են գործողության համար մեկ կամ մեկ այլ դրոշի օբյեկտի եւ «CSS», որտեղ սահմանված են ոճի պարամետրերը:



5. Ծրագրի ճիշտ մասը ունի նաեւ մի շարք գործիքներ, որոնք թույլ են տալիս վերահսկել օբյեկտների գույնը, տեքստը, կառուցվածքը, հատկությունները եւ պարզապես շերտերը: Գործառույթների հիմնական փաթեթի նման, պատուհաններն ավելի լավ են ուսումնասիրել ինքնուրույն նախագիծ ստեղծելու գործընթացում:



6. Անհրաժեշտության դեպքում «ժամանակացույց» օգտագործելը կարող է ստեղծվել անիմացիոն դրոշ: Միեւնույն ժամանակ, խմբագրի հիմնական տարածքը կառավարելու համար օգտագործեք խցանման տարածք եւ LCM, ինչպես նաեւ մասշտաբային պարամետրերով բլոկ:

Դասավորությունը լրացնելը

1. Բաների ստեղծումը միշտ սկսվում է ֆոնից, եւ, հետեւաբար, դասավորություն պատրաստելուց հետո բացեք «Հատկություններ» ներդիրը եւ էջի բլոկում օգտագործեք «Լրացրեք» ենթաբաժինը: Միանգամայն հնարավոր է տեղադրել ցանկացած գույն, ներառյալ գրադիենտ կամ լիովին թափանցիկ ֆոն:



2. Ավելի հերթով հերթում ավելացրեք նախապես պատրաստված գրաֆիկական տարրեր: Դուք կարող եք դա անել օբյեկտի գրադարանի ներդիրում `կտտացնելով ներքեւի վահանակի« + »պատկերակը:



3. Ընտրեք ցանկալի գրաֆիկական ֆայլերը եւ կտտացրեք բաց: Դա կարելի է անել երկուսն էլ միանգամից բոլոր անհրաժեշտ շերտերի համար, եւ առանձին, կրկնելով այդ գործողությունները:



4. Տեղավորելու համար ցանկալի պատկերը օբյեկտի գրադարանի ներդիրի վրա եւ խմբագիրը քաշեք հիմնական տարածք:

   

   Կարող եք վերահսկել օբյեկտի գտնվելու վայրը սովորական քաշքշուկով եւ ընտրության ակտիվ գործիքով: Անհրաժեշտության դեպքում միշտ կարող եք օգտագործել ուղեցույցներ:



5. Ընտրելով աշխատատեղի կամ կառուցվածքային խմբագրի ներդիրի գրաֆիկական ֆայլ, բացեք «հատկությունները»: Կան շատ ավելին, քան ավելի շատ հնարավորություններ, քան ֆոնի դեպքում, օրինակ, սահմանային պարամետրերը կամ մուտքերը:



6. Եթե ​​Banner Design- ը տրամադրում է տեքստի առկայությունը, կարող եք ավելացնել համապատասխան ապրանք, օգտագործելով Google վեբ դիզայներ ստանդարտ գործիք: Կտտացրեք ձախ վահանակի «T» պատկերակին, կտտացրեք հիմնական խմբագրի պատուհանը եւ մուտքագրեք նիշերի ցանկալի հավաքածու:

   

   Տեքստը վերահսկելու համար ընտրեք «կառուցվածքային խմբագիր» ներդիրի շերտը, ընդլայնել «տեքստը» եւ սահմանել համապատասխան պարամետրեր:

Անիմացիայի սահմանում

1. «Ժամանակացույց» բլոկում կարող եք ավելացնել եւ կարգաբերել անիմացիայի հետեւանքները: Սկսելու համար կտտացրեք «Ավելացնել պատկերակը» կոճակը «+» պատկերակով:



2. Կտտացրեք «.5S» պատկերակը շրջանակների միջեւ եւ սահմանեք ձեզ անհրաժեշտ պարամետրերը: Օրինակ, կարող եք փոխել անցման տեւողությունը եւ ոճը:



3. «Ժամանակացույցի» յուրաքանչյուր առանձին բլոկ ամբողջովին անկախ է մյուսներից: Անիմակներ ստեղծելու համար որոշ նյութեր փոխեք ձեր հայեցողությանը եւ ստուգեք արդյունքը, օգտագործելով Play կոճակը:

   

   Խմբագրել գործընթացը լրացնելուց հետո օգտագործեք կրկնակի կոճակը: Սա կստեղծի անվերջ անիմացիա:

Միջոցառումներ ավելացնելը

1. Հասկանալով դասավորությամբ, դուք պետք է ավելացնեք անցումային միջոցառումներ անհատական ​​տարրերի կամ ամբողջ ցուցակի համար: Դա անելու համար, ոլորտի տեսուչ սյունակում, բացեք իրադարձությունների ներդիրը եւ կտտացրեք ներքեւի վահանակի «+» պատկերակին:



2. Պատուհանում, որը բացվում է «նպատակային» ցուցակից, ընտրեք մի առարկա, որը կուղեւորվի:



3. Միջոցառման էջում ընդլայնեք «մկնիկի» էջը եւ ընտրեք «Կտտացրեք»: Կախված արդյունքի պահանջներից, կարող եք համատեղել տարբեր կայանքներ:



4. Հետագայում «Գործողությունների» ցուցակից, բացեք Google- ի հռչակագիրը եւ սահմանեք «անցում» արժեքը: Նման ընտրությունը կդարձնի այն, որպեսզի օգտագործողը անցնի ինտերնետում անհրաժեշտ հատուկ էջին:



5. Որպես «ստացող», ընտրեք մեկ «GWD-AD» տարբերակը:



6. Դաշտի վերջին փուլում «նույնականացում: Ind ուցանիշներ »Ստուգեք դյուրանցման հղումը եւ լրացրեք« URL »- ը` նշելով ցանկալի էջը: Պահպանելու համար օգտագործեք «OK»:

Աշխատեք աղբյուրի կոդով

1. Ինչպես նշեցինք, Google Web Designer- ը պարունակում է ներկառուցված կոդերի խմբագիր: Այն կարող է միացված լինել `օգտագործելով« Կոդ »կոճակը` վերին վահանակի աջ կողմում:



2. Դուք կարող եք փոփոխություններ կատարել դրոշի կառուցվածքում, օգտագործելով ոչ միայն տեսողական խմբագիր, այլեւ ուղղակիորեն աշխատելով ծածկագրի հետ ծրագրի ֆայլում: Սա կարող է շատ օգտակար լինել, երբ մեծ քանակությամբ փոքր տարրեր հավասարեցնելը կամ ծրագրով չնշված միջոցառումներ ավելացնելու ժամանակ:

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

Քայլ 3: Ավարտում

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

Նախադիտում

1. Վերեւի վահանակում կտտացրեք Preview կոճակը `լրացուցիչ ընտրացանկը բացելու համար: Այստեղ դուք կարող եք նշել զննարկիչը, որի միջոցով կբացվի դրոշը:



2. Բոլոր գործառույթները բացելիս պահպանվում են, բայց որոշ հատկություններով: Օրինակ, նույնիսկ եթե անիմացիայի անսահման կրկնություն եք տեղադրել, այստեղ ամեն ինչ կսահմանափակվի միայն մեկ կրկնություն:



3. Անհրաժեշտության դեպքում միշտ կարող եք արդյունքը ցույց տալ այլ մարդկանց: Դա անելու համար ընտրեք «Ստացեք բաժնետիրական հղում» եւ հաստատեք Google հաշվի հասանելիությունը:

   

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

Պահպանում եւ հրապարակում

1. Նախագիծը պահպանելու համար նախ բացեք ֆայլի ընտրացանկը եւ օգտագործեք SAVE տարբերակը: Դրանից հետո աղբյուրի ֆայլը կփրկվի համակարգչում եւ կարող է բացվել հետագայում:



2. Դուք կարող եք պատրաստել նախագիծ, տեղում տեղադրելու համար `բացելով ծրագրի վերին աջ անկյունում« Հրապարակել »ընտրացանկը եւ ընտրելով փրկության վայրերից մեկը:



3. Ձեր հայեցողությամբ փոխեք պարամետրերը հրապարակման պատուհանում, թողնելով միայն ցանկալի տուփերը եւ կտտացրեք «Հրապարակումը»: Այսպիսով փրկելը արագ է պատահում, անկախ նախագծի չափից:

   

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