Stvaranje bannera na Google web dizajneru

Korak 1: Početak rada

Google web dizajner je besplatan razvoj okruženja za webmastere koji pružaju mogućnost stvaranja web stranica, uključujući pojedinačne stavke kao što su banneri koristeći CSS3 i HTML5. Da biste koristili ovaj alat, prije svega morate preuzeti instalacijska datoteka s službene web-lokacije i instalirati.

Preuzmite Google web dizajner s službene stranice

Instalacija programa

1. Kliknite na gore prikazanu vezu da biste prešli na stranicu sada i kliknite gumb "Download Web dizajner". Imajte na umu da program podržava samo Windows 7 i kasnije verzije.



2. Kroz prozor za pop-up spremi odaberite mjesto na računalu i koristite gumb označen na donjoj ploči.



3. Idite u mapu samo uštedite datoteku i dvaput kliknite na lijevu tipku miša za izvođenje otvora. Kao rezultat toga, prozor za instalaciju treba otvoriti.

   

   Sam instalacijski postupak izvodi se u potpuno automatskom načinu rada, spremanje svih radnih datoteka u direktorij s drugim programima na disku sustava.

Odobrenje

1. Ako želite spremiti projekte na internetu ili općenito, stvorite banner posebno za Googleove interne usluge, dodatno je vrijedno obavljanja odobrenja. Da biste to učinili, pokrenite program pomoću odgovarajuće ikone, zatvorite prozor dobrodošlice i kliknite gumb "Login" na gornjoj ploči.



2. Navedite podatke s Google računa, kliknite "Dalje" i potvrdite ako je potrebno. Nakon toga, račun će se odmah dodati, bez potrebe pojedinih postavki.

Promjena postavki

1. Nakon što je shvatio s pripremom, sada je poželjno napraviti promjene u osnovnim postavkama softvera kako bi se olakšao rad u budućnosti. Koristeći gornju ploču, proširite izbornik Uredi i odaberite "Postavke" na kraju popisa.



2. Na "glavnoj" kartici, možete promijeniti početno ponašanje programa za brzo otvaranje projekata, dodijeliti mapu za spremanje stvorenih predložaka, kao i zadane vrijednosti za specifikaciju najave prilikom stvaranja.



3. Sljedeća stranica "način prikaza izgleda" sadrži parametre izgleda urednika. Promjena prikazanih postavki možete podesiti mreže i obvezujuće objekte za točnije pozicioniranje elemenata.



4. Google web dizajner ima urednik kod s postavkama. Dakle, na kartici "Code Viewer", možete dodijeliti stil dizajna, postaviti parametre oblikovanja i dodavati zadatke ključa.



5. Posljednja kartica "Extended" sadrži samo dva parametra - "Zapisivanje" i "Skala primjene". U prvom slučaju, uključivanje će stvoriti dnevnik promjene, dok je druga stavka omogućuje postavljanje nove standardne ljestvice za radno područje urednika.

   Budi oprezan! Ako postavite previše ljestvice, mogu se pojaviti problemi s nedostatkom prostora na zaslonu za važne stavke.

Sve promjene na neki način ili drugi zahtijevaju ponovno pokretanje programa. Ako samo počnete raditi s urednikom, ne zaboravite na mogućnost resetiranja postavki pomoću zasebne stavke na svakoj od kartica.

Korak 2: Stvaranje bannera

Konfiguriranjem programa možete početi raditi na banneru koristeći sve opcije za Google web dizajnera. Međutim, napominjemo da je ovaj lijek isključivo kao vizualni urednik, omogućujući vam da postavite samo gotove elemente koji se stvaraju odvojeno, na primjer, u Photoshopu.

Radite s alatima

1. Nakon pripreme izgleda, morate se upoznati s alatima. Na gornjoj ploči glavne pozornosti, popis "View" zaslužuje, omogućujući omogućavanje i onemogućavanje pomoćnih elemenata.



2. Kroz izbornik "Window" možete privremeno onemogućiti određeni element sučelja. Na primjer, ako želite napraviti statičku bannera, "vremenski okvir" će se miješati samo, i stoga je najbolje ukloniti odgovarajuću krpelju.



3. Glavni alat za uređivanje prikazani su u lijevom stupcu. Nećemo uzeti u obzir svaku opciju, jer se ne koriste sve stavke prilikom stvaranja, međutim, preporučujemo eksperimentiranje sebe.



4. Pored alatne trake prikazana je "oglasi spikara" s nekoliko doprinosa. Posebna pozornost zaslužuje "događaje" odgovorne za akciju s jednim ili drugim objektom bannera i "CSS", gdje su postavljeni stilski parametri.



5. Pravi dio programa također ima skup alata koji vam omogućuje kontrolu boje, teksta, strukture objekata, svojstava i jednostavno slojeva. Kao i glavni skup funkcija, prozori su bolji samostalno proučavati u procesu stvaranja projekta.



6. Ako je potrebno, koristeći "vremenski okvir" može se stvoriti animirani banner. U isto vrijeme, za upravljanje glavnim područjem urednika, koristite steznu prostor i LCM, kao i blok s parametrima ljestvice.

Popunjavanje izgleda

1. Stvaranje bannera uvijek počinje s pozadinom, i stoga, nakon pripreme rasporeda, otvorite karticu "Svojstva" i na bloku stranice, koristite pododjeljak "popunjavanje". Sasvim je moguće instalirati bilo koju boju, uključujući gradijent ili potpuno transparentnu pozadinu.



2. Nadalje u redu čekanja, dodajte grafičke elemente unaprijed unaprijed. Možete to učiniti na kartici objekta knjižnica klikom na ikonu "+" na donjoj ploči.



3. Odaberite željene grafičke datoteke i kliknite Otvori. To se može učiniti i odjednom za sve potrebne slojeve, i zasebno, ponavljanje tih radnji.



4. Za smještaj, pričvrstite željenu sliku na kartici knjižnica objekta i povucite urednik na glavno područje.

   

   Možete kontrolirati mjesto objekta s uobičajenim povlačenjem i skaliranjem s aktivnim alatom za odabir. Ako je potrebno, uvijek možete koristiti vodiče.



5. Odabirom grafičke datoteke u radnom prostoru ili na kartici Strukturni urednik otvorite "Svojstva". Postoji mnogo više od mogućnosti nego u slučaju pozadine, na primjer, granične postavke ili uvlake.



6. Ako dizajn bannera pruža prisutnost teksta, možete dodati odgovarajuću stavku pomoću standardnog Google Web dizajner alata. Kliknite na ikonu "t" na lijevom oknu, kliknite na glavni urednik i unesite željeni skup znakova.

   

   Da biste kontrolirali tekst, odaberite sloj na kartici "Strukturni urednik", proširite "Text" i postavite odgovarajuće parametre.

Postavljanje animacije

1. U bloku "Timeline" možete dodati i konfigurirati učinke animacije. Za početak kliknite gumb "Dodaj ikonu" s ikonom "+".



2. Kliknite ikonu ".5s" između okvira i postavite parametre koje su vam potrebne. Na primjer, trajanje i stil tranzicije možete promijeniti.



3. Svaki pojedinačni blok na "vremenskoj liniji" je potpuno neovisan o drugima. Da biste stvorili animacije, promijenite neke stavke na diskreciju i provjerite rezultat pomoću gumba za reprodukciju.

   

   Nakon završetka procesa uređivanja koristite gumb ponavljanje. To će stvoriti beskrajnu animaciju.

Dodavanje događaja

1. Nakon što je shvatio s rasporedom, morate dodati tranzicijske događaje za pojedine elemente ili cijeli banner u cjelini. Da biste to učinili, u stupcu sektora inspektora otvorite karticu događaja i kliknite na ikonu "+" na donjoj ploči.



2. U prozoru koji se otvara iz popisa "Namjena", odaberite objekt koji će se referencirati.



3. Na stranici događaja proširite stranicu "Miš" i odaberite "klik". Ovisno o zahtjevima za rezultat, možete kombinirati različite instalacije.



4. Nadalje od popisa "Akcija" otvorite Google deklaraciju i postavite vrijednost "tranzicije". Takav izbor će to učiniti tako da korisnik ide na određenu stranicu koju trebate na internetu.



5. Kao "primatelj" odaberite jednu verziju "GWD-AD".



6. U posljednjoj fazi polja "identifikacija. Pokazatelji »Provjerite vezu na prečac i ispunite" URL "navodeći željenu stranicu. Koristite "OK" za spremanje.

Radite s izvornim kodom

1. Kao što smo spomenuli, Google web dizajner sadrži ugrađeni urednik koda. Može se omogućiti pomoću gumba "Kod" na desnoj strani gornje ploče.



2. Možete napraviti promjene u strukturi bannera pomoću ne samo vizualni urednik, već i izravno raditi s kodom u projektnoj datoteci. To može biti vrlo korisno kada se može uskladiti mnoštvo malih elemenata ili dodavati događaje koji nije osiguran od strane programa.

Opisane radnje bi trebale biti dovoljno dovoljno da stvore banner, bez obzira na primjenu. U isto vrijeme, možete značajno proširiti sposobnosti kombiniranjem ovih alata.

Korak 3: Završetak

Kada je banner dovršen i spreman za postavljanje na web-lokaciju, možete otići na posljednji korak. Prije svega, vrijedi provjeriti kako izgleda vaš rad na pravoj web stranici.

Pregledati

1. Na gornjoj ploči kliknite gumb Pregled da biste otvorili dodatni izbornik. Ovdje možete odrediti preglednik s kojim će se otvoriti banner.



2. Prilikom otvaranja svih funkcija i izgled bannera su sačuvani, ali s nekim značajkama. Na primjer, čak i ako ste instalirali beskonačno ponavljanje animacije, sve će biti ograničeno samo jednom iteracijom.



3. Ako je potrebno, uvijek možete pokazati rezultate s drugim ljudima. Da biste to učinili, odaberite "Nabavite vezu za dijeljenje" i potvrdite pristup Google računu.

   

   Kao rezultat toga, na zaslonu će se pojaviti veza za pregled bannera u takvom načinu kao što je gore opisano. Naravno, moguće je samo ako imate račun.

Očuvanje i objavljivanje

1. Da biste spremili projekt, prvo otvorite izbornik datoteke i koristite opciju Spremi. Nakon toga, izvorna datoteka će se spremiti na računalo i može se naknadno otvoriti.



2. Projekt možete pripremiti za mjesto na web-lokaciji otvaranjem izbornika "Objavljivanje" u gornjem desnom kutu programa i odabirom jedne od lokacija spremanja.



3. Promijenite parametre u prozoru publikacije po vlastitom nahođenju, ostavljajući samo željene potvrdne okvire i kliknite "objavljivanje". Spremanje se tako brzo događa bez obzira na veličinu projekta.

   

   Kao rezultat toga, mapa se može naći u mjestu spremanje. Postavljanje bannera na mjestu razlikuje se u ovisnosti o mjestu i općenito ne pripada postupku stvaranja.