Ustvarjanje banneja Google Web Designer

Anonim

Ustvarjanje banneja Google Web Designer

1. korak: Prvi koraki

Google Web Designer je prosto razvojno okolje za webmasters, ki omogočajo ustvarjanje spletnih strani, vključno s posameznimi predmeti, kot so transparenti, ki uporabljajo CSS3 in HTML5. Če želite uporabiti to orodje, morate najprej prenesti namestitvene datoteke iz uradnega spletnega mesta in namestiti.

Prenesite Google spletni oblikovalec z uradne strani

Namestitev programa.

  1. Kliknite na zgornjo povezavo, da pojdite na zdaj stran in kliknite gumb »Download Web Designer«. Upoštevajte, da program podpira samo Windows 7 in novejše različice.
  2. Pojdite na Prenesi Google Web Designer z uradne spletne strani

  3. S pomočjo pop-up okna Shrani, izberite mesto v računalniku in uporabite gumb, označen na spodnji plošči.
  4. Shranjevanje Google Web Designer na računalniku

  5. Pojdite v mapo s samo shranjeno datoteko in dvakrat kliknite na levi gumb miške, da izvedete odprtino. Posledično je treba odpreti okno za vgradnjo.

    Otvoritev namestitvene datoteke Google Web Designer na računalniku

    Postopek namestitvenega postopka se izvede v popolnoma samodejnem načinu, s čimer shrani vse delovne datoteke v imenik z drugimi programi na sistemskem disku.

  6. Postopek namestitve Google Web Designer na računalniku

Dovoljenje

  1. Če želite prihraniti projekte na internetu ali na splošno, ustvarite banner posebej za Googlove notranje storitve, je dodatno vredno izvajati dovoljenje. Če želite to narediti, zaženite program z ustrezno ikono, zaprite okno Dobrodošli in kliknite gumb »Prijava« na zgornji plošči.
  2. Prehod na avtorizacijo v Googlovem spletnem oblikovalcu

  3. Podajte podatke iz Google Računa, kliknite »Naprej« in po potrebi potrdite. Po tem bo račun takoj dodan, ne da bi zahteval nekaj posameznih nastavitev.
  4. Postopek avtorizacije prek Googla v Google Web Designer

Spreminjanje nastavitev

  1. Ker je razumel pripravo, je zdaj zaželeno, da se spremenijo osnovne nastavitve programske opreme, da bi olajšali delo v prihodnosti. Z zgornjo ploščo razširite meni Urejanje in na koncu seznama izberite »Nastavitve«.
  2. Pojdite na razdelek Setup v Google Spletni oblikovalcu

  3. Na kartici "Main", lahko spremenite začetno obnašanje programa, da hitro odprete projekte, dodelite mapo, da shranite ustvarjene predloge, kot tudi nastavljene privzete vrednosti za specifikacijo objave pri ustvarjanju.
  4. Spreminjanje glavnih nastavitev v Googlovem spletnem oblikovalcu

  5. Naslednja stran "Način prikaza postavitve" vsebuje parametre videza urednika. Spreminjanje predstavljenih nastavitev, lahko nastavite mreže in vezave predmetov za bolj natančno pozicioniranje elementov.
  6. Nastavitve Mock View Mode v Google Web Designer

  7. Google Web Designer ima urejevalnik kode s svojimi nastavitvami. Tako lahko na kartici "Viewer Viewer", lahko dodelite slog oblikovanja, nastavite parametre oblikovanja in dodate ključne vezi na naloge.
  8. Nastavitve gledanja načina gledanja kode v Googlovem spletnem oblikovalcu

  9. Zadnji zavihek »Extended« vsebuje le dva parametra - »beleženje« in »lestvica aplikacij«. V prvem primeru bo vključitev ustvarila dnevnik sprememb, drugi element pa vam omogoča, da nastavite novo standardno lestvico za delovno območje urednika.

    Bodi previden! Če nastavite preveč lestvice, se lahko pojavijo težave s pomanjkanjem prostora na zaslonu.

  10. Oglejte si napredne nastavitve v Googlovem spletnem oblikovalcu

Vse spremembe, ki so na voljo na nek način ali druge, zahtevajo ponovni zagon programa. Če začnete delati z urejevalnikom, ne pozabite na možnost ponastavitve nastavitev z uporabo ločenega elementa na vsakem od zavihkov.

2. korak: Ustvarjanje bannerja

S konfiguriranjem programa lahko začnete delati na banner z uporabo vseh možnosti za Google Web Designer. Vendar pa opozoriti, da je to zdravilo izključno kot vizualni urednik, ki vam omogoča, da objavite le pripravljene elemente, ki se ustvarijo ločeno, na primer v Photoshopu.

Delo z orodji

  1. Po pripravi postavitve se morate seznaniti z orodji. Na zgornji plošči glavne pozornosti si seznam "Pogled" zasluži, ki omogoča omogočanje in onemogočanje pomožnih elementov.
  2. Oglejte si pogled menija v Googlovem spletnem oblikovalcu

  3. Skozi "okno" meni, lahko začasno onemogočite določen vmesniški element. Na primer, če želite narediti statično banner, bo "časovna premica" samo posegala, zato je najbolje, da odstranite ustrezno oznako.
  4. Oglejte si meni Window v Googlovem spletnem oblikovalcu

  5. Glavna orodja urednika so predstavljena v levem stolpcu. Vsaka možnost ne bomo upoštevali, saj se pri ustvarjanju ne uporabljajo vse postavke, vendar vam priporočamo, da sami eksperimentiramo.
  6. Oglejte si glavno orodno vrstico v Google Spletni oblikovalcu

  7. Poleg orodne vrstice je predstavljen "napovedovalci oglasov" z več prispevki. Posebna pozornost si zaslužijo "dogodke", ki so odgovorni za ukrepanje z enim ali drugim objektom za banner, in "CSS", kjer so nastavljeni slog parametri.
  8. Oglejte si Inšpektorje oglasa v Google Web Desicles

  9. Desni del programa ima tudi niz orodij, ki vam omogočajo nadzor barve, besedila, strukture predmetov, lastnosti in preprosto plasti. Tako kot glavni niz funkcij, so Windows bolje študirati samostojno v procesu ustvarjanja projekta.
  10. Oglejte si lastnosti objekta v Googlovem spletnem oblikovalcu

  11. Če je potrebno, z uporabo "časovne premice" lahko ustvarite animirano banner. Hkrati pa upravljati glavno področje urednika, uporabite vpenjalni prostor in LCM, pa tudi blok s parametri lestvice.

Polnjenje postavitve

  1. Ustvarjanje pasice se vedno začne z ozadjem, zato po pripravi postavitve odprite zavihek »Lastnosti« in v bloku strani, uporabite pododdelek »Fill«. To je povsem mogoče namestiti vse barve, vključno z gradientom ali popolnoma pregledno ozadje.
  2. Konfigurirajte lastnosti ozadja v ozadju v Googlovem oblikovalcu

  3. V čakalni vrsti vnaprej dodajte grafične elemente. To lahko storite na kartici knjižnice objekta, tako da kliknete ikono "+" na spodnji plošči.
  4. Prehod na dodajanje grafičnih elementov v Googlovem spletnem oblikovalcu

  5. Izberite želene grafične datoteke in kliknite Odpri. To je mogoče storiti takoj za vse potrebne plasti in ločeno, ponavljajoče se ta dejanja.
  6. Postopek dodajanja grafičnih elementov v Google Web Designer

  7. Če želite prilagoditi, navijte želeno sliko na kartici knjižnice objekta in povlecite urejevalnik na glavno območje.

    Dodajanje slik na banner na Googlovem spletnem oblikovalcu

    Lahko nadzorujete lokacijo predmeta z običajnim povlecim in skaliranjem z aktivnim izbirnim orodjem. Če je potrebno, lahko vedno uporabljate vodnike.

  8. Pozicioniranje slik na banner na Googlovem spletnem oblikovalcu

  9. Z izbiro grafične datoteke v delovnem prostoru ali na zavihek Strukturni urednik odprite "Lastnosti". Obstaja veliko več kot več možnosti kot v primeru ozadja, na primer na mejnih nastavitvah ali alineah.
  10. Spreminjanje lastnosti slik na banner v Googlovem spletnem oblikovalcu

  11. Če zasnova bannerja predvideva prisotnost besedila, lahko dodate ustrezno postavko s standardnim orodjem Google Web Designer. Kliknite na ikono »T« na levem podoknu, kliknite okno glavnega urejevalnika in vnesite želeni niz znakov.

    Dodajanje besedila na banner na Googlovem spletnem oblikovalcu

    Če želite nadzorovati besedilo, izberite plast na kartici »Strukturni urejevalnik«, razširite »Besedilo« in nastavite ustrezne parametre.

  12. Spreminjanje lastnosti besedila na banner na Googlovem spletnem oblikovalcu

Nastavitev animacije

  1. V bloku "Timeline" lahko dodate in konfigurirate učinke animacije. Če želite začeti, kliknite gumb »Dodaj ikono« z ikono »+«.
  2. Delo s časovnim okvirjem v Googlovem spletnem oblikovalcu

  3. Kliknite ikono ".5S" med okvirji in nastavite parametre, ki jih potrebujete. Na primer, lahko spremenite trajanje in slog prehoda.
  4. Nastavitev prehodov med okvirji v Googlovem spletnem oblikovalcu

  5. Vsak posamezen blok na "časovni premici" je popolnoma neodvisen od drugih. Če želite ustvariti animacije, spremenite nekaj elementov po lastni presoji in preverite rezultat z gumbom za predvajanje.

    Ustvarjanje animacije za banner na Googlovem spletnem oblikovalcu

    Po končanem postopku urejanja uporabite gumb Ponovi. To bo ustvarilo neskončno animacijo.

  6. Uspešno ustvarjanje animacije za banner v Googlovem spletnem oblikovalcu

Dodajanje dogodkov

  1. Ker je razumel postavitev, morate dodati prehodne dogodke za posamezne elemente ali celotno banner kot celoto. Če želite to narediti, v stolpcu Sector Inspector, odprite kartico dogodkov in kliknite ikono "+" na spodnji plošči.
  2. Pojdite na ustvarjanje novega dogodka v Googlovem spletnem oblikovalcu

  3. V oknu, ki se odpre iz seznama "Namen", izberite predmet, ki bo naveden.
  4. Določanje dogodkov v Google Web Designer

  5. Na strani dogodka razširite stran "Mouse" in izberite "Kliknite". Glede na zahteve za rezultat lahko združite različne naprave.
  6. Določanje lastnosti dogodka v Googlovem spletnem oblikovalcu

  7. Poleg tega iz "akcijskega" seznama odprite Google Deklaracijo in nastavite vrednost "prehoda". Takšna izbira bo tako, da uporabnik gre na določeno stran, ki jo potrebujete na internetu.
  8. Določanje dogodkov v Googlovem spletnem oblikovalcu

  9. Kot "prejemnik" izberite eno samo "GWD-AD" različico.
  10. Določanje dogodkov prejemnika v Googlovem spletnem oblikovalcu

  11. Na zadnji stopnji na polju "Identif. Kazalniki »Preverite povezavo do bližnjice in izpolnite» URL «, tako da določite želeno stran. Uporabite "OK", da shranite.
  12. Popolne nastavitve dogodka v Googlovem spletnem oblikovalcu

Delo z izvorno kodo

  1. Kot smo omenili, Google Web Designer vsebuje vgrajen urejevalnik kode. To je mogoče omogočiti z gumbom "kode" na desni strani zgornje plošče.
  2. Pojdite na urejevalnik kode v Google spletnem oblikovalcu

  3. Spremembe strukture pasic lahko s pomočjo ne samo vizualnega urejevalca, temveč tudi neposredno delate s kodo v projektni datoteki. To je lahko zelo koristno pri poravnavi številnih majhnih elementov ali dodajanje dogodkov, ki jih program ne zagotavlja.
  4. Oglejte si in spremenite kodo v Google Spletni oblikovalcu

Opisana dejanja bi morala biti dovolj, da ustvarijo banner, ne glede na tožbo. Hkrati pa lahko znatno razširite zmogljivosti z združevanjem teh orodij.

3. korak: Dokončanje

Ko je banner zaključen in pripravljen za namestitev na spletnem mestu, lahko greste na zadnji korak. Najprej je vredno preveriti, kako izgleda vaše delo na resnični spletni strani.

Predogled

  1. Na zgornji plošči, kliknite gumb Predogled, da odprete dodatni meni. Tukaj lahko določite brskalnik, s katerim bo odprta pasica.
  2. Pojdite na Predogled Banner v Google Web Designer

  3. Pri odpiranju vseh funkcij in videz pasice se ohranijo, vendar z nekaterimi funkcijami. Na primer, tudi če ste namestili neskončno ponavljanje animacije, bo vse omejeno le ena ponovitev.
  4. Predogled Banner z Google Web Designer

  5. Če je potrebno, lahko rezultat vedno prikažete drugim ljudem. Če želite to narediti, izberite »Pridobite povezavo za skupno rabo« in potrdite dostop do Google Računa.

    Ustvarjanje splošne povezave za dostop, da si ogledate banner v Google Web Designer

    Posledica tega je, da se na zaslonu prikaže povezava, da si ogledate pasico v takem načinu, kot je opisano zgoraj. Seveda je možno le, če imate račun.

  6. Uspešno ustvarjanje splošnih dostopovnih povezav za ogled bannerja v Googlovem spletnem oblikovalcu

Ohranjanje in publikacija

  1. Če želite shranjevati projekt, najprej odprite meni Datoteka in uporabite možnost Shrani. Po tem bo izvorna datoteka shranjena na računalniku in se lahko naknadno odpre.
  2. Proces ohranjenosti projekta z banner v Googlovem spletnem oblikovalcu

  3. Projekt lahko pripravite na mesto, tako da odprete meni »Objavi« v zgornjem desnem kotu programa in izberete eno od lokacij Shrani.
  4. Proces objavljanja banneja v Googlovem spletnem oblikovalcu

  5. Spremenite parametre v oknu Publikacija po lastni presoji, tako da pustite samo želena potrditvena polja, in kliknite »Objavi«. Shranjevanje se tako zgodi hitro ne glede na velikost projekta.

    Dokončanje objave bannerja v Googlovem spletnem oblikovalcu

    Posledično lahko mapa najdete v pridržku. Namestitev bannerja na spletno mesto se razlikuje v odvisnosti od mesta in na splošno ne spada več v postopek oblikovanja.

Preberi več