Google веб-дизайнеринен баннерди түзүү

1-кадам: Баштоо

Google Web Designer веб-баракчаларды, анын ичинде CSS3 жана HTML5 колдонуп, баннерлер сыяктуу жеке буюмдарды, анын ичинде жеке буюмдар үчүн акысыз өнүгүү чөйрөсү үчүн акысыз өнүгүү чөйрөсү. Бул куралды колдонуу үчүн, биринчиден, сиз расмий сайтка орнотуу файлын жүктөп, орнотушуңуз керек.

Расмий сайтынан Google веб-дизайнерди жүктөп алыңыз

Программаны орнотуу

1. Төмөнкү баракка баруу үчүн берилген шилтемени чыкылдатыңыз жана "Желе Дизайнерди" баскычын чыкылдатыңыз. Эскертүү, программа Windows 7 жана кийинки версияларды гана колдойт.



2. Калкымал терезе аркылуу, компьютериңиздеги орунду тандаңыз жана төмөнкү панелде белгиленген баскычты колдонуңуз.



3. Файлды сактап калуу менен папкага барып, ачылышын аткаруу үчүн Сол Чычкан баскычын эки жолу чыкылдатыңыз. Натыйжада, орнотуу терезеси ачылышы керек.

   

   Орнотуу тартиби өзү толук автоматтык режимде жүргүзүлөт, бардык жумушчу файлдарды системага системанын дискинде башка программалар менен сактоону сактайт.

Авторизация

1. Эгерде сиз Интернеттен же жалпысынан долбоорлорду үнөмдөгүңүз келсе, Google'дун ички кызматтары үчүн баннерди түзүңүз, ал кошумча уруксат берүүчү уруксат. Бул үчүн, тиешелүү сөлөкөттү колдонуп, программаны иштетип, саламдашуу терезесин жабыңыз жана жогорку панелдеги "Кирүү" баскычын чыкылдатыңыз.



2. Google каттоо эсебинен маалыматтарды көрсөтүңүз, "Кийинки" баскычын чыкылдатыңыз жана зарыл болсо, ырастаңыз. Андан кийин, каттоо эсеби ошол замат кошулат, жеке жөндөөлөрдү талап кылбастан.

Жөндөөлөрдү өзгөртүү

1. Даярдык менен таанышуу менен, келечекте ишти жеңилдетүү үчүн программанын негизги орнотууларын өзгөртүү керек. Мыкты панелди колдонуу, Түзөтүү менюсун кеңейтүү жана тизмедин аягында "Жөндөөлөрдү" тандаңыз.



2. "Негизги" өтмөк жөнүндө сиз программанын баштапкы жүрүм-турумун тез арада ачык-айкын көрүүнү тездетүү үчүн, түзүлгөн шаблондорду сактоо үчүн папканы, ошондой эле түзүлгөн калыпты сактоо үчүн демейки маанилерди белгилөө үчүн папканы дайындай аласыз.



3. Төмөнкү бет "Layout View Mode" редактордун сырткы көрүнүш параметрлерин камтыйт. Белектелген жөндөөлөрдү өзгөртүү элементтердин так жайгашуусу үчүн торду жана милдеттүү объекттерди тууралана аласыз.



4. Google веб-дизайнери анын жөндөөлөрү менен код редактору бар. Ошентип, "код Viewer" өтмөгүндө, сиз дизайн стилин дайындай аласыз, форматтоо параметрлерин орнотуп, тапшырмаларды аткарууга ачкыч байлап коюңуз.



5. "Кеңейтүү" акыркы өтмөк эки гана параметрди камтыйт - "Кирүү" жана "Колдонмо шкаласы". Биринчи учурда, киргизүү өзгөрүү журналын түзө алат, ал эми экинчи нерсе редактордун иш чөйрөсүнүн жаңы стандарттык шкаласын орнотууга мүмкүнчүлүк берет.

   Сак бол! Эгерде сиз өтө көп масштабдуу болсо, анда экранга мейкиндиктин жоктугу маанилүү нерселер үчүн пайда болушу мүмкүн.

Кандайдыр бир өзгөрүүлөр кандайдыр бир жол менен жасалган же башка программаны өчүрүп-күйгүзүүнү талап кылат. Эгер сиз редактор менен иштей баштасаңыз, анда ал өтмөктөрүңүздүн ар биринде өзүнчө нерсени колдонуп, жөндөөлөрдү баштапкы абалга келтирүү мүмкүнчүлүгүн унутпаңыз.

2-кадам: Баннерди түзүү

Программаны конфигурациялоо менен, Google веб-дизайнеринин бардык варианттарын колдонуп, баннерге иштей аласыз. Ошентсе да, бул чара көргөзмө индусуалдык редактор катары, мисалы, фотошопто өзүнчө жаратылган, мисалы, даяр элементтерди гана билдирүүгө уруксат берүүчү визуалдык редактор катары.

Куралдар менен иштөө

1. Макетти даярдап жатканда, куралдар менен таанышуу керек. Негизги көңүлдүн жогорку коллегиясынын үстүндө, "Көрүү" тизмеге татыктуу, көмөкчү элементтерди иштетүүгө жана өчүрүү мүмкүнчүлүгүн берет.



2. "Терезе" менюсу аркылуу сиз белгилүү бир интерфейс элементтерин убактылуу өчүрүп салсаңыз болот. Мисалы, сиз статикалык баннерди, "убакыт сызыгы" жасагыңыз келсе, анда бир гана жолу кийлигишүүнү каалайсыз, ошондуктан тиешелүү кене алып салуу жакшы.



3. Негизги редактор шаймандары сол тилкеде келтирилген. Биз ар бир параметрди карап чыгабыз, анткени бардык нерселер жаратылганда, биз өзүңүздү эксперименттөөнү сунуштайбыз.



4. Куралдар панелинин жанында "ХАРК октор жарнамалары" сунушталат. Өзгөчө көңүл буруу "окуялар" бир же бир баннер объектиси жана "CSS", стил параметрлерин орнотуу үчүн жооптуу болгон "окуялар" жооптуу.



5. Программанын оң бөлүгү ошондой эле объекттер, текстти, түзүлүшүн, касиеттери, касиеттери жана жөн гана катмарларын башкарууга мүмкүндүк берген куралдар топтому бар. Долбоорду түзүү процессинде терезелер өз алдынча изилдөөнүн эң жакшы окуганы жакшы.



6. Зарыл болсо, "Убакыт тилкесин" колдонуп, анимацияланган баннерди түзсө болот. Ошол эле учурда, редактордун негизги аймагын башкаруу, баскычтоп космосун жана LCM, ошондой эле масштабдуу параметрлер менен блок колдонуңуз.

Макетти толтуруу

1. Баннерди түзүү ар дайым фонунда башталат, демек, "касиеттер" өтмөгүн жана беттеги "касиеттерди" ачып, "толтуруу" бөлүмүн ачыңыз. Ар кандай түстү, анын ичинде градиент же толук ачык-айкын маалыматты орнотууга болот.



2. Андан ары кезекте, алдын ала даярдалган графикалык элементтерди кошуңуз. Бул нерсени объект китепчесинен "+" сөлөкөтүн чыкылдатып, "+" сөлөкөтүн чыкылдатып, жасай аласыз.



3. Керектүү графикалык файлдарды тандап, Ачуу баскычын чыкылдатыңыз. Муну бир эле учурда бир эле учурда керектүү катмарлар үчүн, өзүнчө жасаса болот, бул иш-аракеттерди кайталаңыз.



4. Объект китепканасынын өтмөгүндөгү керектүү сүрөттү жайгаштыруу үчүн, жөнгө салыңыз, редакторду негизги аймакка сүйрөңүз.

   

   Сиз кадимки сүйрөөчү жана жигердүү тандоо куралы менен чабуулу менен объекттин жайгашкан жерин башкара аласыз. Зарыл болсо, сиз ар дайым гиддерди колдоно аласыз.



5. Жумуш аянтындагы графикалык файлды тандоо менен же структуралык редактор табулатура, "касиеттерди" ачыңыз. Мисалы, чек ара жөндөөлөрү же штрихтердин ишине караганда алда канча көп мүмкүнчүлүктөр бар.



6. Эгерде баннер дизайны тексттин катышуусун камсыз кылса, Google Web Designer куралын колдонуп, сиз тиешелүү нерсени кошсоңуз болот. Сол панелдеги "T" сөлөкөтүн чыкылдатыңыз, негизги редактор терезесин чыкылдатыңыз жана каалаган белгилерди киргизиңиз.

   

   Текстти башкара билүү үчүн, "Структуралык редактор" өтмөгүндөгү катмарды тандаңыз, "текстти" кеңейтиңиз жана тийиштүү параметрлерди коюңуз.

Анимацияны орнотуу

1. "Убакыт тилкесине" блокунда, сиз анимациянын таасирин кошо аласыз жана конфигурация аласыз. Баштоо үчүн "сүрөтчөсүн кошуу" баскычын чыкылдатыңыз "" "" "" сөлөкөтүн кошуу "баскычын чыкылдатыңыз.



2. ".5S" сөлөкөтүн чыкылдатып, алкактардын ортосундагы параметрлерди коюңуз. Мисалы, сиз өткөөлдүн узактыгын жана стилин өзгөртө аласыз.



3. "Убакыт тилкесиндеги" ар бир блок башкалардан толугу менен көз каранды эмес. Анимацияларды түзүү үчүн, кээ бир буюмдарды өзүңүздүн каалооңузга өзгөртүңүз жана спектаклдин баскычын колдонуп, натыйжаны текшериңиз.

   

   Түзөтүү процессин аяктагандан кийин, кайталануу баскычын колдонуңуз. Бул чексиз анимация жаратат.

Окуяларды кошуу

1. Макет менен таанышуу, сиз бүтүндөй элементтер үчүн же бүтүндөй баннер үчүн өткөөл окуяларды кошушуңуз керек. Бул үчүн, тармактык инспектор тилкесинде, окуяларды ачып, "+" сөлөкөтүн ачыңыз, төмөнкү панелдеги "+" сөлөкөтүн чыкылдатыңыз.



2. "Максат" тизмесинен ачылган терезеде, шилтеме берген объектти тандаңыз.



3. Окуя бетинде "чычкан" баракчасын жайып, "Click" дегенди тандаңыз. Натыйжада талаптарга жараша, сиз ар кандай орнотууларды бириктире аласыз.



4. Андан ары "Аракет" тизмесинен Google декларациясын ачып, "өткөөл" маанисин коюңуз. Мындай тандоо аны Интернетте сизге керектүү конкреттүү баракка өтүшү үчүн жасайт.



5. "Алуучу" катары, бирдиктүү "GWD жарнама" версиясын тандаңыз.



6. "Идентификациялоо" акыркы баскычында. Индикаторлор »Жарлыктан шилтемени текшериңиз жана керектүү бетти көрсөтүү менен" URL "толтуруңуз. Сактоо үчүн "OK" колдонуңуз.

Булак код менен иштөө

1. Жогоруда айтылгандай, Google веб-дизайнери камтылган коддун редактору бар. Мыкты панелдин оң жагындагы "код" баскычын колдонуу менен аны иштетүүгө болот.



2. Визуалдык редакторду гана эмес, ошондой эле долбоордун файлында түздөн-түз түздөн-түз иштеп жаткан баннердин түзүлүшүнө өзгөртүүлөрдү киргизсеңиз болот. Бул көп кичинекей элементтерди тегиздөөдө же Программада каралбаган окуяларды кошпогондо, абдан пайдалуу болушу мүмкүн.

Сүрөттөлгөн иш-аракеттер арызга карабастан, баннерди түзүү үчүн жетиштүү болушу керек. Ошол эле учурда, сиз бул шаймандарды айкалыштырып, мүмкүнчүлүктөрдү кыйла кеңейтүүгө болот.

3-кадам: Аяктоо

Баннер аяктаганда жана сайтта жайгаштырууга даяр болгондо, акыркы кадамга барсаңыз болот. Биринчиден, чыныгы веб-баракчада ишиңиздин кандай иш-аракетиңизге окшош экендигин текшерүүгө болот.

Алдын ала көрүү

1. Мыкты панелде, кошумча меню ачуу үчүн алдын ала көрүү баскычын чыкылдатыңыз. Бул жерде сиз баннер ачыла турган браузерди көрсөтө аласыз.



2. Бардык функцияларды ачканда жана баннердин пайда болушу сакталып калса, айрым өзгөчөлүктөрү бар. Мисалы, сиз анимациянын чексиз кайталоону орнотсоңуз дагы, бул жерде бир гана итерация гана чектелет.



3. Зарыл болсо, сиз ар дайым башка адамдарга натыйжасын көрсөтө аласыз. Муну жасоо үчүн, "Бөлүшүү шилтемесин алуу" дегенди тандаңыз жана Google каттоо эсебине кирүүсүн ырастаңыз.

   

   Натыйжада, жогоруда айтылгандай, баннерди көрүү үчүн экранда шилтеме пайда болот. Албетте, эгерде сизде каттоо эсеби болсо гана мүмкүн.

Сактоо жана жарыялоо

1. Долбоорду сактоо үчүн, алгач файл менюсун ачып, үнөмдөө опциясын колдонуңуз. Андан кийин, баштапкы файл компьютерде сакталат жана кийинчерээк ачылышы мүмкүн.



2. Программанын жогорку оң бурчунда "жарыялоо" менюну ачылып, "жарыялоо" менюну ачылып, "жарыялоо" менюсун ачуу жана үнөмдөө жерлеринин бирин тандап алуу.



3. Басылманын терезесиндеги параметрлерди өзүңүздүн каалооңузда гана өзгөртүңүз, каалаган белгилөө кутучаларын гана таштап, "Жарыялоо" баскычын чыкылдатыңыз. Ушундай үнөмдөө долбоордун көлөмүнө карабастан тез арада болот.

   

   Натыйжада, папкадан үнөмдөөчү жерден табууга болот. Баннерди сайтка жайгаштыруу сайттын көз карандылыгынан айырмаланып, жалпысынан мындан ары түзүү процедурасына таандык эмес.